<!--
  HISN Website — changelog
  v57 · 2026-08-28 · (42) Programs page, Derrick Low view, Current offering — SIGN UP BUTTON ADDED
       to the FIRST offering box, Basketball Skills with Derrick Low, Aug 25 - Sep 15 (Rob). Both
       offerings in this band now have their own booking route; v56 (41) did the pop-up.
       LINK: studioid=5745470, stype=-7, sTG=68, sVT=145, sView=week, sLoc=0.
       THIS IS NOT THE SAME LINK AS THE POP-UP BUTTON DIRECTLY BELOW IT. Side by side:
         this box (Aug 25 - Sep 15)  stype=-7     sTG=68  sVT=145  sView=week
         pop-up box (from Aug 30)    stype=-108   sTG=66  sVT=141  sView=day
       Every parameter but studioid and sLoc differs. Both were supplied by Rob verbatim and
       neither was derived from the other. The build asserts each button still carries its own
       distinct URL after the edit, so a future change to one cannot silently overwrite the other.
       Same double-escaping as v56: inside a srcdoc every & is written &amp;amp;amp; so that two decode
       passes leave a bare &. Verified by decoding the srcdoc, then the attribute, and comparing
       the result to Rob's URL character for character.
       PLACEMENT: last element in the box, AFTER the College caveat rather than straight after the
       time bands. The caveat qualifies who the schedule applies to, so it reads better before the
       call to action, and it puts the button in the same closing position it occupies in the
       pop-up box below. Same class, same target=_blank / rel=noopener, same label.
       NEITHER LINK COULD BE OPENED FROM THE BUILD ENVIRONMENT - no network route to Mindbody. What
       is verified is that the URL reaching the browser is byte-identical to what Rob supplied.
       Whether each lands on the intended class in Mindbody is a click test only Rob can run.
  v56 · 2026-08-28 · (41) Programs page, Derrick Low view, Varsity Pop-up Clinic — SIGN UP BUTTON
       ADDED with a Mindbody link (Rob). Closes the gap flagged in v53 (38) and again in v55 (40):
       the clinic starts Sunday 30 August and until now had no booking route at all.
       LINK: studioid=5745470, stype=-108, sTG=66, sVT=141, sView=day, sLoc=0. Note this is a
       DIFFERENT stype/sTG/sVT set from every other Mindbody link on the site - the all-skills
       clinic uses stype=-7 sTG=30 sVT=40, the membership tiers use stype=40 with prodIds - so it
       was taken verbatim from Rob and not adapted from a sibling link.
       AMPERSAND ESCAPING, WHICH IS WHERE THIS KIND OF EDIT GOES WRONG. The link lives inside a
       srcdoc attribute, so it passes through TWO html decode passes before the browser sees it.
       Each & is therefore written &amp;amp;amp; in the source: pass one yields &amp;amp;, pass two yields a
       bare &. Written &amp;amp; instead, the URL would arrive truncated at the first parameter and the
       button would open a bare studio page. VERIFIED, NOT ASSUMED: the build decodes the srcdoc
       and then the attribute, and asserts the resulting string equals Rob's URL character for
       character. It does.
       MARKUP: class=btn-sm, the only button class defined in the Programs iframe and the same one
       the other two Book / Register buttons use - flame background, white text, hover to ink-2.
       target=_blank and rel=noopener, matching the existing external links. data-program=
       varsity-popup added for consistency with its siblings; checked first that no script in
       either document binds data-program inside this iframe, so it is an inert label and cannot
       intercept the click. Label reads "Sign up" per Rob, not "Book / Register" like the others.
       STILL OPEN: no END date on this clinic. The box now says starting 30 August with no close,
       which reads as ongoing.
  v55 · 2026-08-28 · (40) Programs page, Derrick Low view, Current offering — start date added to
       the Varsity Pop-up Clinic (Rob). The line now reads "Starting August 30, 2026 · Sessions on
       Sundays." Formatted to match the first offering box exactly: bolded date, middot, bolded
       day. v53 (38) flagged that this offering had no dates at all; it now has a start.
       AUGUST 30 2026 IS A SUNDAY - checked, not assumed. It is also the Sunday immediately after
       this entry was written (Friday 28 August), so the clinic starts in two days.
       STILL OPEN, AND UNCHANGED BY THIS: there is no END date. The other box states a range
       (August 25 - September 15). This one is open-ended, which reads as ongoing. That is fine if
       it is ongoing and wrong if it is not; add an end date if the pop-up runs to a fixed window.
       ALSO STILL OPEN: no booking route. Every other bookable program on the site has either a
       Mindbody button or an explicit "Not sold online" marker. This clinic has neither, so the
       page now announces a session starting in two days with no way to book it beyond the app.
       BUILT ON ROB'S MACHINE, NOT IN THE CLOUD. First version produced entirely through the
       device mount after the Google Drive folder was switched from streaming (H:) to mirrored
       (C:). Source edited in place, portable built beside it from the 48 photos already on disk.
       No staging, no upload, no round trip.
  v54 · 2026-08-28 · (39) Programs page, Derrick Low view — ENTIRE PRICING BAND REMOVED (Rob).
       The whole section goes: heading, the .clinic box (tag, title, and the contact / Schedule-page
       rates pointer), and the account-and-waiver note. The view now runs About Derrick Low ->
       Current offering -> Divisions -> Clinic gallery, and ends there.
       RATES GUIDANCE IS NOT LOST. v53 (38) moved the rates line up into the Current offering band,
       where it now sits under both offerings: "Sign up in our app. For current rates, contact us
       or check the schedule in the app." A reader still learns how to find pricing, one band
       earlier than before.
       BUT THE WAIVER LINE IS LOST, AND THIS IS THE ONE TO LOOK AT. The removed note read: "All
       participants must create an account, complete their profile, and sign the waiver in the HiSN
       app before attending." That sentence now appears NOWHERE in the Derrick Low view. It is the
       only participation REQUIREMENT the view stated, and it is the one with consequences attached
       - the Schedule page carried the same line until v48 (30) removed that band too, so both
       places that told a Derrick Low parent about the waiver are now gone. The other seven program
       views each still carry their own copy, so this view is the sole exception.
       NOT A LEGAL OPINION, AND I AM NOT THE PERSON TO GIVE ONE: whether a waiver has to be
       surfaced before booking rather than inside the app is a question for whoever handles HISN's
       insurance and liability, and it is a partnership matter rather than a site-copy one. What I
       can say is factual - the sentence used to be on this page twice and is now on it zero times.
       Restoring just that one line, without the band around it, is a two-minute change.
       THE VIEW NOW ENDS ON A PHOTO STRIP. Clinic gallery is the last band, so the page finishes on
       images with no closing line, no booking route and no next step. Same shape of gap v49 opened
       on the Join page and v50 reverted.
       .clinic, .ctag AND .terms NOW HAVE NO USER in the Programs iframe, joining .cwhen (v52) and
       the .crate/.cn/.cr/.cp/.non family (v45). That is the whole ported clinic-card CSS block from
       v41 - roughly a dozen rules - now dead in this document, plus its twin in the Pricing iframe.
       Still not deleted, per standing policy, but this is well past the point where a cleanup pass
       is tidying and into the point where it is removing real weight.
  v53 · 2026-08-28 · (38) Programs page, Derrick Low view, Current offering — SECOND OFFERING
       ADDED: Varsity Pop-up Clinic with Derrick Low, Sundays, 10:30 AM - 12:30 PM (Rob). Built as
       a second .offerbox directly below the existing one, structured identically: label, day line,
       one .oslot time band tagged Varsity. No new CSS.
       NO DATES WERE GIVEN AND NONE WERE INVENTED. The first box states a range (August 25 -
       September 15, 2026). This one states only the day and the time band, because that is all the
       information supplied. If the pop-up runs in a defined window, that window should be added -
       as it stands a reader cannot tell whether it starts this Sunday or is already over.
       THE RATES LINE MOVED RATHER THAN DUPLICATED. "Sign up in our app. For current rates, contact
       us or check the schedule in the app." previously sat INSIDE the first box. It now sits below
       both boxes as a shared line, so it covers the pop-up too and is still stated once. Wording
       unchanged. It is styled at 14px in ink-60 to read as a footnote to the pair rather than as
       part of either box.
       "College is not part of this block" STAYS INSIDE THE FIRST BOX, since it qualifies that
       offering only - the pop-up is Varsity by name and the sentence would be wrong under it.
       TWO THINGS THIS DOES NOT DO, BOTH WORTH A DECISION:
         - NO BOOKING LINK. Every other bookable program on the site either has a Mindbody button
           or is explicitly marked Not sold online. This clinic has neither, so the page announces
           a session with no way to book it beyond the app. If it is bookable in Mindbody it should
           get a button; if it is not, it should say so.
         - NOT REFLECTED ANYWHERE ELSE. The Schedule page lost its Derrick Low band in v48, so this
           offering appears in exactly one place on the site. The Mindbody Schedules widget on the
           Schedule page will show it only if it is set up in Mindbody.
  v52 · 2026-08-28 · (37) Programs page, Derrick Low view, Pricing band clinic box (Rob): the
       .cwhen line "In-season - dates released monthly - see the Schedule page" REMOVED IN FULL.
       Both halves of it had gone stale, from two different edits:
         - "In-season" contradicted the "All year round" pill added one version earlier in (36).
         - "see the Schedule page" pointed at the Basketball with Derrick Low band, removed from
           the Schedule page in v48 (30). It had been sending readers to a section that no longer
           exists for four versions.
       THE DATES ARE NOT LOST. The Current offering box higher in this same view still carries
       August 25 - September 15 2026, Tuesdays and Thursdays, and both time bands. Nothing on the
       site now claims dates are published on the Schedule page - correct, because they are not.
       The clinic box now runs tag, title, then the contact / Schedule-page pointer. No date line.
       THE SRCDOC QUOTE BUG BIT AGAIN, IN THE FIRST CUT OF THIS VERY VERSION. v47 item (29)
       documented it and wrote two guards. Only one of them was applied here, and it was the weak
       one: the srcdoc attribute COUNT is unchanged by a break, because a raw double quote
       terminates an attribute without removing the string "srcdoc=" from the file. The count
       passed, the iframe was dead, and the render caught it - showView undefined, because the
       script tag after the break never parsed. THE COUNT CHECK IS NOT A SUBSTITUTE FOR THE QUOTE
       ASSERTION. Both now run on every injection into a srcdoc: assert no raw double quote in the
       injected string, AND compare the attribute count. Rule stands: text going inside a srcdoc
       uses &quot;, or no quotes at all.
       .clinic .cwhen NOW HAS NO USER in either iframe - the Pricing page copy lost its clinic box
       in v46 (27), and this was the last one. The rule is defined twice, once per iframe, and both
       copies are dead. Left in place, same policy as before.
       ORPHANED-CSS TALLY: .sec-head.hang (v48), .offseason (v41), the .crate/.cn/.cr/.cp/.non
       family in both iframes (v45-v46), and now .clinic .cwhen in both iframes. A cleanup pass
       would delete real weight at this point rather than a rule or two.
  v51 · 2026-08-28 · (35) Programs page, Basketball Skills with Derrick Low — HERO CAPTION
       REWRITTEN (Rob). The .sub directly under the h1 in that view's phead.
       WAS: "Tiered basketball skills with Derrick Low, running through the school year - four
            divisions by age and level, from Intermediate through College. Intermediate, JV, and
            Varsity are training in the current block."
       NOW: "Training and clinics offered throughout the year - opportunities for athletes from
            Intermediate through College to put in the work and learn directly from Derrick."
       Nothing else in the view changed. One line, one paragraph, no CSS, no ids.
       ONE WORD CHANGED FROM WHAT ROB ASKED FOR: he said "kids", this says "athletes". The College
       division is 18+, so "kids ... through college levels" describes people who are not kids, and
       the site calls them athletes everywhere else - the Speed & Agility sub, the Home hero, the
       mission line. Flagged rather than silently kept; say the word and it goes back to "kids".
       A CLAUSE WAS DROPPED AND THE REASON MATTERS. The old sub ended by naming Intermediate, JV
       and Varsity as the divisions training in the current block. That sentence was added in v41
       item (16d) specifically to stop the page implying College was on offer right now. Rob's new
       copy has no room for it, so it is gone from the hero - BUT THE FACT IS STILL STATED TWICE
       LOWER ON THE SAME PAGE: the Current offering box says College is not part of this block, and
       the note under the Divisions grid says College runs only in certain blocks. So the page does
       not contradict itself; the caveat simply arrives later than it used to.
       WHETHER THAT IS RIGHT IS A JUDGEMENT CALL, NOT A BUG. The new caption spans the whole year
       ("throughout the year"), and across a year College genuinely is offered - so the sentence is
       true as written. A reader who stops at the caption will assume all four divisions are
       running today. That is the trade: a warmer opening line, with the College caveat one scroll
       down instead of in the first sentence.
  v51 · 2026-08-28 · (36) Programs page, Derrick Low hero facts strip (Rob): the "In-season" pill
       now reads "All year round". The strip is still two pills - "All year round" and
       "Ages 11-18+". This follows the new caption in (35), which frames the program as running
       throughout the year rather than as an in-season block; leaving the old pill under it would
       have had the header disagree with itself in two adjacent lines.
       ONE PLACE STILL SAYS IN-SEASON AND WAS NOT TOUCHED. Further down this same view, the Pricing
       band's clinic box carries the line "In-season - dates released monthly - see the Schedule
       page". It is not wrong, but the header now says all year round and that line says in-season,
       so the view says both. It was left alone because Rob asked about the pill; changing it is a
       one-line fix whenever he wants it.
       PILL HISTORY: v41 item (14) cut this strip from four pills to two, removing "Dates set
       monthly" and "4 Divisions" because both were contradicted by the Current offering band. This
       is the first change to it since.
  v50 · 2026-08-28 · (34) Join page — GOOD TO KNOW / MEMBERSHIPS BAND RESTORED. v49 IS REVERTED
       AND SHOULD NOT BE USED (Rob). v49 removed this band; v50 puts it back exactly as it stood in
       v48 and is BYTE-IDENTICAL TO v48 apart from this changelog entry. Verified by diffing the
       two files with the changelog offset stripped: zero differences in markup, CSS or script.
       WHAT IS BACK: the eyebrow, the Memberships heading, the paragraph, and both buttons —
       See memberships (data-go=pricing) and Browse programs (data-go=programs). The paragraph
       keeps the v48 (31) sentence order Rob asked for: the membership requirement leads, "Clinics
       don't require a membership" closes. .goodtoknow has its user back and is no longer orphaned.
       WHY THIS MATTERS BEYOND THE COPY: v49 left the Join page ending on step 5 of the athlete
       walkthrough with no onward link of any kind — the Contact band below it had already gone in
       v41, so the page simply stopped in front of the most ready-to-book visitor on the site.
       Those two buttons are the page's only closing call to action and they are live again.
       v49 IS NOT DELETED, ONLY SUPERSEDED. HISN_Website_v49.html and HISN_Website_v49_portable
       .html are still sitting in \site — Claude cannot delete or move files on this machine, the
       Cowork mount for the H:\ Drive folder never established. Archive_Superseded_Versions_v2.ps1
       run with -Keep 50 sweeps them into \archive\Website with every other superseded version.
       Until that runs, \site holds v20 through v50 and v49 sits there looking current when it is
       not. It is the ONLY version in the folder that was reverted rather than built on.
       ORPHANED-CSS COUNT DROPS BACK TO FOUR: .sec-head.hang (v48), .offseason (v41) and the
       .crate/.cn/.cr/.cp/.non family in both the Programs and Pricing iframes (v45-v46).
  v48 · 2026-08-28 · (30) Schedule page — BASKETBALL WITH DERRICK LOW BAND REMOVED (Rob). The band
       that sat between Weekly schedule and Clinics is gone. It held the Aug 25 - Sep 15 2026
       dates, the two time bands (4:00-5:15 Intermediate & JV, 5:15-6:30 Varsity), the
       four-divisions paragraph, the account/waiver sentence, and two buttons: Program details
       (data-program=clinic) and How to register (data-go=join).
       NO CONTENT IS ORPHANED. The dates and both time bands still live in the Current offering box
       in the Derrick Low program view; the divisions text and the waiver sentence are in that same
       view. The Schedule page now runs Weekly schedule, then Clinics.
       TWO CONSEQUENCES WORTH NAMING:
         - data-program=clinic now has ONE user left on the whole site (the Programs grid card).
           The deep link still works; it just has one entrance instead of two.
         - .sec-head.hang, written in v41 specifically for this band, now has NO USER anywhere.
           Left in the stylesheet, same policy as .offseason and the orphaned .crate family.
       THE SCHEDULE PAGE IS NOW THIN: a Mindbody widget and four clinics all marked In development.
       Not a problem to fix here, but worth seeing plainly.
  v48 · 2026-08-28 · (31) Join page, Memberships box (Rob): the two sentences swapped so the
       clinics exemption closes rather than opens. Now reads "To access facilities, book classes,
       and book appointments, you'll purchase a membership after registering. Clinics don't require
       a membership." Neither sentence was reworded.
       NOTE, NOT CHANGED: the Pricing page carries the same pair in the OPPOSITE order - "Drop in to
       any clinic without a monthly membership. To access facilities..." - under the heading
       "Clinics don't require a membership". Different wording, same two ideas, now sequenced
       differently on the two pages. Say the word if they should match.
  v48 · 2026-08-28 · (32) Schedule page, Mindbody Schedules widget — TWO MOBILE FIXES, NEITHER
       VERIFIED AGAINST THE LIVE WIDGET (Rob reported it did not work on his phone). This build
       environment has no network route to Mindbody, so the widget cannot be loaded, rendered or
       measured here. What follows is diagnosis from the markup plus two low-risk changes; ONLY A
       TEST ON A REAL PHONE CAN CONFIRM EITHER. Both changes are inert if the diagnosis is wrong.
         a. NO SCROLL CONTAINER. .mb-schedule had no overflow handling at all - it was styled
            entirely by an inline attribute. The Schedules widget renders a wide table, so on a
            narrow screen it had nothing to scroll inside and pushed against the layout instead.
            overflow-x:auto and -webkit-overflow-scrolling:touch added, so a wide table now scrolls
            within its own white box. Verified at 375px that no page scrolls horizontally.
         b. PADDING COST 44px OF A 375px SCREEN. padding:22px was inline on the box. Moved into a
            real .mb-schedule rule so it can respond, and dropped to 12px/10px below 560px.
         c. THE WIDGET INITIALISES INTO A HIDDEN CONTAINER. This is the likelier cause and the
            least certain fix. .page is display:none until activated and the site opens on Home,
            so at load the Schedule page - and the widget div inside it - has zero width. The
            widget script is async and runs at load. An embed that measures its container to pick a
            layout would measure 0. go() now fires a window resize event 60ms after the Schedule
            page becomes visible, giving the widget a chance to re-measure. If Mindbody ignores
            resize, this does nothing at all; it cannot make anything worse.
       IF IT STILL FAILS ON A PHONE, the next thing to check is whether the widget renders at all
       or renders and is unreachable - those need different fixes. A screenshot from the phone
       would settle it faster than more guessing from here.
  v47 · 2026-08-27 · (29) Pricing page — UPCOMING CLINIC PRICING SECTION REMOVED, its content
       folded into the Good to know box (Rob). Follows from v46: once the Derrick Low card went,
       the section was a heading, one sentence and a booking line, and both of those read as
       general notes rather than as a pricing listing.
       WHAT MOVED, VERBATIM, into the navy .member box that already held Clinics dont require a
       membership — neither sentence was reworded:
         - Clinic pricing is set per clinic and varies by the guest trainer. For current rates,
           contact us or check the Schedule page for details. (both links intact)
         - All bookings and payments are handled in the Hawaii Sports Nexus app.
       The box now runs membership line, pricing line, booking line — three paragraphs — and the
       Pricing page ends on it. The subhead and the section wrapper were deleted. Tiers, the
       enrollment fee and the GET line are untouched.
       SPACING SET INLINE, NOT IN CSS. .member p is margin:0, correct while the box held one
       paragraph and would have jammed three together. Rather than add a .member p + p rule for a
       single box, the two new paragraphs carry margin-top:12px inline; the booking line also drops
       to 13.5px at 62% white so it reads as subordinate. Its old ink-40 colour was dropped — it
       was near-invisible on navy.
       LINK CONTRAST MEASURED, NOT ASSUMED. .ilink is var(--sand) #14A39A and now sits on
       var(--ink-2) #0E1830 inside this box. Ratio 5.61:1, clearing AA for body text (4.5:1), so no
       override was written. Re-check it if that background is ever lightened.
       A BUILD BUG WAS FOUND AND FIXED IN THIS VERSION — CLAUDE'S, AND IT SHIPPED NOTHING, BUT IT
       IS THE SECOND TIME A VERIFICATION GAP HAS BEEN THE REAL PROBLEM (see v43 item 24). The
       first cut of v47 injected an HTML comment into the Pricing srcdoc containing raw double
       quotes. A srcdoc attribute is itself delimited by a double quote, so the first raw quote
       TERMINATED THE ATTRIBUTE and everything after it in that iframe stopped existing — the two
       moved paragraphs never rendered and the box silently showed only its original line. Caught
       because the render was checked rather than the diff. Two guards now run on every edit into a
       srcdoc: any injected string is asserted to contain no raw double quote before it is written,
       and the file’s srcdoc attribute count is compared before and after and the build aborts on
       mismatch. Count held at 3. RULE: text going inside a srcdoc uses &quot;, or no quotes at all.
       THE PURCHASE-LINK TO-DO SURVIVED A SECOND DELETION. v46 preserved it in a comment on the
       card; that comment sat inside the section this version removed. It is re-preserved in the
       same position with the retired prodIds (100277-100283). STILL OUTSTANDING, and now harder:
       there is no clinic section left on this page to hang purchase buttons on.
       THE PRICING PAGE NO LONGER HAS A CLINIC SECTION AT ALL. Worth stating plainly. The nav still
       offers Pricing, and a visitor looking for what a clinic costs now finds a membership table
       and one line telling them to ask. That is what was asked for and it is honest, but it is a
       materially different page than it was three versions ago.
  v46 · 2026-08-27 · (27) Pricing page, "Upcoming clinic pricing" — DERRICK LOW CLINIC CARD
       REMOVED (Rob). This was the last place on the site quoting a price for Derrick Low's
       sessions; the v45 entry flagged it as the one card still holding the $50 figure after the
       program view was cleared. It is now gone and the site quotes no Derrick Low rate anywhere.
       WHAT WENT: the whole .clinic box — tag, title, the in-season/dates line, both .crate rate
       rows ($25 · $20 · $15 members, $50 / class non-members) and the ⚑ to-do terms line.
       WHAT REPLACED IT: nothing structural. The section's own sec-sub now carries the pointer, so
       the page reads heading → one sentence → the app line that was already there, with no empty
       box. Full sentence: "Clinic pricing is set per clinic and varies by the guest trainer. For
       current rates, contact us or check the Schedule page for details."
       ONE SENTENCE DELETED, NOT ASKED FOR: the sec-sub used to end "Here's what's on the calendar
       now." With the only card gone that sentence pointed at nothing. Say the word if you want
       clinic cards back here and it comes back with them.
       WORDING DIFFERS SLIGHTLY FROM v45's. The Derrick Low page says "...check the Schedule page
       and the Hawaiʻi Sports Nexus app for details." Here the app is dropped from the sentence,
       because the line directly below it already reads "All bookings and payments are handled in
       the Hawaiʻi Sports Nexus app" — saying it twice in adjacent paragraphs read as padding.
       Same instruction, same two links, one clause shorter.
       THE ⚑ TO-DO SURVIVED AS A COMMENT. The card carried the only visible reminder to add the
       2026–27 MindBody purchase links, and v41 item deliberately kept it here because this page is
       where the purchase buttons go. Deleting the card would have deleted the reminder, so it and
       the retired summer prodIds (100277–100283) are preserved in an HTML comment in the same
       position. STILL OUTSTANDING — no purchase links exist for the in-season format.
       .ilink ADDED A THIRD TIME, into the Pricing iframe stylesheet. Outer document, Programs
       iframe, Pricing iframe — three separate documents, no cascade between them, so the rule
       exists in all three now. KEEP IN SYNC.
       CSS ORPHANED IN THIS IFRAME TOO: with this card gone, .clinic, .ctag, .cwhen, .crate, .cn,
       .cr, .cp and .non have no user left in the Pricing document. Not deleted — same policy as
       v45 item (26). Between the two iframes that is now a meaningful amount of dead rule; worth a
       dedicated cleanup pass rather than more piecemeal notes.
       PRICING PAGE OTHERWISE UNTOUCHED: the three membership tiers, the $50 enrollment fee, the
       GET line and the "Clinics don't require a membership" box all stand.
  v45 · 2026-08-27 · (26) Basketball Skills with Derrick Low — ALL PRICING REMOVED (Rob). Every
       dollar figure is gone from the Derrick Low program view; it now points at Contact, the
       Schedule page and the app instead. Verified: zero "$" characters remain anywhere in the
       view-clinic block. Four edits, three of them in the Programs iframe and one in the outer
       document:
         a. Pricing band, lead paragraph — DELETED IN FULL. It carried the whole member rate
            ladder ($25 Starter / $20 Performer / $15 Elite), the $50 non-member drop-in, and the
            GET line. Nothing replaced it; the band now runs sec-head → clinic box → note.
         b. Pricing band, .clinic box — the two .crate rate rows deleted (Members $25/$20/$15,
            Non-members $50 per class) and the .terms line rewritten. The box itself STAYS: tag,
            title and the in-season/dates line are unchanged, so the band still reads as a card
            rather than an empty heading. New terms line reads "For current rates, contact us or
            check the Schedule page and the Hawaiʻi Sports Nexus app for details. All bookings and
            payments are handled in the app."
         c. Current offering box, same view — "Class rates for members · $50 for non-members. Sign
            up in our app." became "Sign up in our app. For current rates, contact us or check the
            schedule in the app." Pulled at Rob's direction: leaving $50 three sections above a
            band that says "contact us for rates" would have had the page contradict itself.
         d. Schedule page, Basketball with Derrick Low band (OUTER DOCUMENT, not an iframe) — the
            identical "$50 for non-members" line carried the same fix, same wording.
       LINKS ARE LIVE. Inside the iframe they call parent.go('contact') / parent.go('schedule');
       on the Schedule page it is a bare go('contact'), since that markup is already in the outer
       document. Both use the existing page-switch function — no new script, no new ids, and the
       same pattern the Power Building button has used since v41.
       NEW CSS — .ilink, added TWICE, once in the outer stylesheet and once in the Programs iframe
       stylesheet. The two are separate documents with no cascade between them, so the rule has to
       exist in both. It is needed because both stylesheets carry a{color:inherit;text-decoration:
       none}, which was harmless while every link on the site was a button or a nav item but would
       have rendered these four in-prose links as invisible body text. KEEP IN SYNC.
       CSS NOW ORPHANED, NOT DELETED: .crate, .cn, .cr, .cp and .non in the Programs iframe have
       no user left in that document — they existed only for the two rate rows removed in (b).
       .clinic, .ctag and .cwhen are still in use. Left in place deliberately, same policy as the
       .offseason rule from v41 item (16a); delete them in the next cleanup pass if the rate rows
       are not coming back.
       PRICING ELSEWHERE IS UNTOUCHED. The Pricing page still carries the full tier table, the
       enrollment fee, the GET line and the $50 non-member clinic card, and the other six program
       views still read "Tiered member pricing — see the Pricing tab for membership rates." Only
       the Derrick Low program was cleared. WORTH DECIDING: the Pricing page's clinic card still
       names Basketball Skills with Derrick Low at $50 per class, so the figure Rob removed from
       the program view is still reachable in two clicks. If that number is meant to be off the
       site entirely, that card is the last one holding it.
       RETIRED-RATE COMMENT KEPT: the 2026–27 pending-pricing comment in the Pricing band (summer
       3-Day/2-Day/Drop-In rates and their MindBody prodIds) is a build note that never renders and
       was left alone — it is the only record of the retired prodIds.
  v44 · 2026-08-27 · (25) Programs page, Derrick Low detail view, Divisions grid (Rob): cards
       reordered from Intermediate → JV → College → Varsity to Intermediate → JV → Varsity →
       College. Straight age order now: 11–13, 14–15, 16–18, 18+. College at 18+ had been sitting
       ahead of Varsity at 16–18, so the grid read out of sequence; it is also the one division
       not running in the current block, and it now falls last, directly above the note that says
       so. In the two-column .g2 grid the rendered layout changes from
         Intermediate | JV   /   College | Varsity
       to
         Intermediate | JV   /   Varsity | College
       CARD CONTENT UNCHANGED — the four <div class="card"> blocks were moved, not rewritten. Same
       names, same age ranges, same markup, no CSS touched, no ids or handlers involved.
       NOTHING ELSE NEEDED CHANGING. The divisions are named in four other places on the site —
       the Derrick Low hero sub, the Current offering box, the note under this grid, and the
       Schedule page divisions paragraph — and all four are prose reading "Intermediate through
       College" or naming the three active divisions. None of them asserts a card sequence, so all
       four remain correct. Verified: this grid is the only card list of divisions on the site.
       Markup otherwise byte-identical to v43.
  v43 · 2026-08-27 · (24) PORTABLE BUILD WAS BROKEN — SEVEN CSS BACKGROUND IMAGES NEVER
       EMBEDDED (Rob found it). On the web, the Home page bands and the Facility / "Take a tour"
       page rendered as flat navy blocks with no photograph. Cause: v42's embedder matched only
       src="photos/..." attributes. Seven photographs are not <img> elements at all — they are CSS
       background shorthand in the outer document's stylesheet, lines 669-675:
         .bg-court    url("photos/site-1.jpg")      .bg-pb2    url("photos/site-5.jpg")
         .bg-fitness  url("photos/site-2.jpg")      .bg-pb3    url("photos/site-6.jpg")
         .bg-strength url("photos/site-3.jpg")      .bg-cages  url("photos/site-7.jpg")
         .bg-pb1      url("photos/site-4.jpg")
       Those seven stayed relative, so once the file was served without a photos/ folder beside
       it they resolved to nothing. The #202A44 fallback colour in the same shorthand is why the
       result was a solid navy panel rather than a visibly broken image — the failure looked like
       a design choice.
       WHY CLAUDE'S VERIFICATION MISSED IT — two independent faults, both Claude's:
         1. The headless audit walked document.images. A CSS background is not in that
            collection, so all seven were invisible to the check that reported "0 broken images".
         2. The render was served from the build directory, which had photos/ sitting beside the
            HTML. The relative paths resolved locally. The test could not have failed.
       A build whose correctness depends on files being next to it is not a portable build, and
       the test has to run from a directory holding nothing but the HTML. It now does.
       FIXED IN v43: the embedder matches src= attributes AND CSS url() in all three quoting
       forms, in the outer document and inside both srcdoc iframes. 45 unique images embedded,
       up from 38. Verified by copying the portable alone into an empty directory, serving it,
       and auditing document.images plus the computed background-image of every element — zero
       unresolved photos/ references, zero broken images. The ten commented-out example paths
       from item (22) are still deliberately left alone.
  v42 · 2026-08-27 · (21) BASEBALL PHOTO FOLDERS RESOLVED (Rob). All 17 references to
       photos/hitting/, photos/pitching/ and photos/indoor-league/ now resolve to real files on
       disk. NO HTML CHANGE WAS REQUIRED — the paths written in v41 were already correct; the
       files simply did not exist. v42 is byte-identical to v41 apart from this changelog entry.
       Verified by extracting all 17 src paths from the markup (including inside both srcdoc
       iframes) and listing the folder against them: zero missing.
         photos/hitting/         hitting-1..5.jpg + hitting-card-a.jpg + hitting-card-b.jpg   (7)
         photos/pitching/        pitching-1..3.jpg + pitching-card-a/b.jpg                    (5)
         photos/indoor-league/   indoor-league-1..3.jpg + indoor-league-card-a/b.jpg          (5)
       hitting-4 and hitting-5 are the two real action shots Rob supplied. Originals were
       6486x4970 / 6.2 MB and 5484x4972 / 5.9 MB — far too heavy for web. Both were cropped to
       3:2 to match the gallery frames, which use object-fit:cover and would otherwise have
       cropped 13% and 26% off the height at arbitrary points, then resized to 1800x1200 and
       re-encoded at quality 85: 410 KB and 469 KB, a 93% reduction. hitting-4 was centre-anchored
       to keep the HitTrax monitor and the laptop station both in frame; hitting-5 was
       bottom-anchored to keep the batter's feet in frame.
       hitting-1..3, pitching-1..3 and indoor-league-1..3 are copies of baseball-1..3, exactly as
       v41's item (19) planned. They are 1000x666 against hitting-4/5 at 1800x1200 — same 3:2
       ratio, so they render correctly side by side, but noticeably softer on a retina display.
       CARD-HOVER PAIRS: pitching-card-a/b and indoor-league-card-a/b are copies of baseball-1 and
       baseball-2. hitting-card-a is hitting-4 (the HitTrax swing) at Rob's direction, so the
       Hitting card is visually distinct from the other two and doubles as proof of the HitTrax
       claim in items (17)/(18). hitting-card-b is still baseball-2, so that hover cross-fades
       from a batter mid-swing to an empty cage. Rob was offered hitting-5 for card-b and has not
       taken it up.
       ORPHANED FOLDER, NOT DELETED: a photos/baseball/ tree (baseball/hitting, baseball/pitching,
       baseball/indoor-league, files named baseball-hitting-1.jpg and so on, 11 files, 2.4 MB) was
       built at Rob's request earlier the same day and then superseded when he chose the flat
       structure the HTML already pointed at. Every file in it duplicates a file in the flat
       folders. Claude cannot delete on Rob's machine; Rob drags photos/baseball/ to the trash.
       NOTED AND NOT ACTED ON: nine of the eleven baseball images are the same three empty-cage
       photographs under different names. Rob has seen this and set it aside for now.
  v42 · 2026-08-27 · (22) CORRECTION — NO BROKEN IMAGES. Claude asserted twice in chat, and in a
       first draft of this entry, that ten card-hover images were broken: photo1a/1b,
       allskills1a/1b, shooting1a/1b, power1a/1b and sparq1a/1b, said to be live img src
       attributes with no file behind them. THAT WAS WRONG. All ten sit inside HTML comment
       blocks in the Programs srcdoc — the instructional note that reads "To add real photos,
       replace the <div class=lbl> inside each layer with an <img>", followed by two example
       lines. They are documentation of the pattern, not markup the browser ever parses. The
       error came from grepping raw text without checking whether the match sat inside a comment.
       VERIFIED THE CORRECT WAY: comments stripped from the outer document and from inside both
       srcdoc iframes after unescaping, then re-scanned — zero live relative photos/ src refs
       remain, and zero occurrences of any of the ten names survive. Independently, a headless
       Chromium render of the portable build reports 0 broken images on the home page, the
       Programs grid and the program detail views.
       NET: every image reference on the site resolves. No missing photograph, no action needed.
  v42 · 2026-08-27 · (23) PORTABLE BUILD BUILT BY CLAUDE. v41's item on build-portable.py noted
       that Claude held only 2 of the referenced photos and Rob had to run the script himself.
       All 48 photographs are now available to Claude, so HISN_Website_v42_portable.html was
       generated directly: every live photos/ reference in the main document and inside both
       srcdoc iframes replaced with a base64 data: URI — 38 unique files embedded, 10.8 MB total.
       Data URIs contain no double or single quotes, asserted per-image before writing, so the
       srcdoc attributes survive intact; the srcdoc attribute count is compared before and after
       and the build aborts on mismatch. The ten commented-out example paths in item (22) were
       deliberately left as relative paths — rewriting text inside a comment would have destroyed
       the instructions for the next person.
  v41 · 2026-08-26 · (20) Programs page, Speed/Reaction/Basketball & Baseball Clinic, Pricing
       section (Rob): Book / Register Mindbody link updated. The button was NOT unlinked — it
       already pointed at the same Mindbody widget. Rob's URL differs in exactly one parameter,
       sView=day -> sView=week, so the booking page now opens on the week view instead of the day
       view. studioid=5745470, stype=-7, sTG=30, sVT=40, sLoc=0 all unchanged. Ampersands are
       written &amp;amp;amp; in the source: this link lives inside a srcdoc attribute, where one
       decode pass turns &amp;amp;amp; into &amp;amp; and the second renders it as a bare &amp;. Verified the
       browser-decoded URL matches Rob's exactly. target=_blank and rel=noopener retained.
       WORTH CHECKING: this is the only booking link in this view, and every other Mindbody link on
       the site still carries sView=day. If week view is the preference, the rest should match —
       right now the Speed/Reaction clinic behaves differently from every other program.
  v41 · 2026-08-26 · BUGFIX C — buttons still dead in Safari, opened from file:// (Rob). BUGFIX B
       fixed the wrong browser. Three faults, all now guarded:
         1. window.scrollTo({top:0,behavior:'auto'}) with an options object throws a TypeError in
            Safari before 15.4. It sat at the TOP of showView's tail, so the throw killed the
            parent-scroll call that followed it. Now wrapped with a window.scrollTo(0,0) fallback.
         2. postMessage between a file:// parent and a srcdoc child is unreliable in Safari, which
            assigns local documents opaque origins. The scroll now has a synchronous first path
            that needs no messaging at all — window.frameElement.scrollIntoView() — with
            postMessage as second path and a delayed postMessage as third.
         3. The parent's own scrollTo had the same ScrollToOptions problem; also wrapped.
       Any one path succeeding is enough. All three failing leaves the view swapped but unscrolled,
       which is the pre-v41 behaviour rather than a new break.
       NOT VERIFIED IN SAFARI BY CLAUDE — no Safari available in this environment. If buttons still
       do nothing after this, the cause is not the scroll: it is that Safari is refusing to run
       scripts inside the srcdoc iframe on file:// at all. Diagnostic is in the chat; the test is
       whether the category chips (All / Basketball / Baseball / Speed) filter the grid. Chips dead
       too means no JS in the iframe, and the fix is serving over http rather than double-clicking
       the file.
  v41 · 2026-08-26 · PORTABLE BUILD — build-portable.py added (Rob). Reads the lean file, finds
       every photos/ reference in the main document and inside both srcdoc iframes, base64-embeds
       each image as a data: URI, writes HISN_Website_v41_portable.html. Data URIs contain no
       double quotes, so srcdoc attributes survive; the script asserts this before writing and
       aborts if either srcdoc has been corrupted. It also reports missing files and flags any
       photo over 1 MB, since base64 adds roughly a third. Claude CANNOT build the portable file
       itself — it holds 2 of the 49 referenced photos. Rob runs the script in /site.
  v41 · 2026-08-25 · BUGFIX B — "View program details" buttons appeared dead (Rob). The handlers
       were firing correctly the whole time; nothing scrolled, so the result was never visible.
       The pf-programs iframe carries scrolling="no" and is height-sized to its content, so it has
       no inner scrollbar and showView's window.scrollTo({top:0}) moved nothing. The PARENT page is
       the thing that scrolls, and it stayed put. A reader scrolled down to a card and clicking its
       button got a detail view rendered from the iframe's top — hundreds of pixels above their
       viewport — so the page looked unchanged. Fix is two-sided: showView now posts
       {hisnScrollTo:'pf-programs'} to the parent (twice, the second after 120ms so the height
       message lands first and the parent scrolls against the new height), and the parent's message
       listener scrolls that element into view, offset by the sticky .navbar height so the top of
       the view is not hidden under it. Same mechanism serves the Back buttons and the v41
       data-program deep-link. NOTE: this bug predates v41 and would have affected every detail
       view since the iframe split; it was masked because testing usually starts from the top of
       the Programs page, where the first cards are already near the iframe's top.
  v41 · 2026-08-25 · BUGFIX FIRST: change (8) originally wrote the two source filenames inside an
       HTML comment using RAW double quotes — "813-6 (edited)" and "813-8 (edited)". That comment
       lives inside the pf-programs iframe's srcdoc="..." attribute, so the first raw quote
       TERMINATED the attribute. Everything after it — including the &lt;script&gt; block that defines
       showView() — was dropped from the iframe document, and every button on the Programs page
       stopped responding. Replaced with single quotes. RULE: nothing inside a srcdoc attribute may
       contain a raw " — use &amp;quot; or single quotes, comments included. Both iframes now verified
       at zero raw quotes, and all five script blocks pass a syntax check.
       (1) Join page (Rob): removed the "Contact us" band from the bottom of the page —
       the mist band carrying 401 Atkinson Drive · 808.999.7449 · info@hawaiisportsnexus.com and
       the "Questions? We're here to help. — Coach Rob & the Nexus team" sign-off. The site footer
       already carries the same phone, email, and address on every page, so nothing is lost. Join
       now ends on the "Good to know / Memberships" band and its two buttons (See memberships /
       Browse programs), which is a stronger close than a contact block — the reader finishes
       registration and is pointed at the next step instead of at a phone number. The band-shading
       alternation is unaffected: Part 2 is mist, Good to know is plain, and the removed band was
       the last section. The dedicated Contact tab is untouched.
       (2) Basketball Skills with Derrick Low — in-season pricing published (Rob). PRICING page
       clinic card: the "Pending" price and the dashed "Link pending" button are gone, replaced by
       two rate rows — Members ($25 Starter · $20 Performer · $15 Elite, after the tier's included
       monthly sessions are used) and Non-members ($50 per class, no membership required). No
       booking button replaces the removed one; the card sits above the standing line "All bookings
       and payments are handled in the Hawaiʻi Sports Nexus app," which now carries it. PROGRAMS
       Derrick detail view: the "In-season rates are being finalized with Derrick" line was rewritten
       to state the same two rates, so the two pages no longer contradict each other. Both ⚑ to-do
       flags narrowed — they now ask only for the MindBody purchase links, not the rates. The
       retired summer 2026 prodIds (100277–100283) stay preserved in comments on both pages.
       ASSUMPTION FLAGGED: Rob's "class rate according to membership tier" was read as the existing
       session economics — the class consumes an included session, then bills at the tier's
       additional-session rate. If instead there is a separate per-tier rate for this program
       specifically, both blocks need different numbers.
       (3) Pricing page, Elite tier (Rob): third bullet is now "Member rates on clinics &
       appointments," matching Starter and Performer. It replaced "Best value for serious athletes"
       rather than being added as a fourth bullet — all three cards stay at three bullets, and the
       replaced line was the only one of the nine that was a sales claim rather than a stated
       benefit. Elite's $15 additional-session rate, the lowest of the three, already makes the
       value case on its own. Say the word if the line should come back as a fourth item.
       (4) Schedule page, "Basketball with Derrick Low" band (Rob): removed the two-card .g2 grid —
       "Where to find it / The weekly schedule" and "How to book / In the Nexus app." Both were
       redundant: the lead paragraph directly above already says each month's sessions appear in the
       weekly schedule, and the "How to register" button directly below already routes to the Join
       page. The band now runs lead → divisions/waiver note → buttons. One detail did NOT survive
       and is worth a decision: "Seats are limited by division," which appeared nowhere else on the
       site. If that is true and enforced, it should be restored somewhere — most naturally in the
       divisions line — since a parent who shows up expecting an open session has a bad first
       experience. That removal made two CSS rules in the MAIN document orphaned — .g2 (line 419)
       and .card, which no longer has a single user outside the iframes. Both are left in place
       rather than deleted, since either could be wanted again and neither costs anything at this
       file size. The iframes keep their own .g2/.card copies and are unaffected.
       (5) Schedule page, "Program details" button under Basketball Skills with Derrick Low (Rob):
       now opens that program's detail view directly instead of landing on the Programs card grid.
       Mechanism: the button's data-go="programs" was swapped for data-program="clinic", and a new
       delegated handler in the main document's last script block switches to the Programs tab and
       then calls showView('clinic') inside the pf-programs iframe. data-go had to come off — the
       v34-era window.go override force-resets the iframe to the card grid on every go('programs'),
       so leaving both attributes on would have raced. The handler is generic: put
       data-program="<viewId>" on any element to deep-link it. Valid ids are the ones showView()
       already takes — clinic, shooting, allskills, hitting, pitching, indoor-league,
       powerbuilding, sparq. A retry loop (40 × 50ms) covers a cold Programs tab whose srcdoc has
       not parsed yet, and a hisn-measure ping re-measures iframe height for the taller view.
       NOTE: the detail view's own "Back" button calls showView('programs'), so a visitor arriving
       from Schedule lands on the Programs card grid rather than returning to Schedule. Left as is
       — changing it would need the view to know where it was opened from.
       (6) Programs page, Derrick Low detail view (Rob): removed the ⚑ red to-do flag under the
       Pricing heading. That flag was public — .card-flag renders a dashed red box on the live page,
       not an HTML comment — so it was visible to any parent who opened the program. The retired
       summer prodIds stay preserved in the HTML comment directly above it. The work itself is
       still outstanding and the matching flag on the PRICING page clinic card is deliberately left
       in place: that is where the purchase buttons actually go, so it is the useful reminder.
       That one is also public and should come out before launch. This leaves .card-flag with one
       remaining user in the Programs iframe (the Speed & Agility placeholder flag, line ~1384).
       (7) Schedule page, "Basketball with Derrick Low" heading (Rob): now aligns with the copy
       beneath it. Cause: .sec-head is a flex row and the · marker plus its 14px gap pushed every
       h2 about 19px right of the wrap's left edge, while .eyebrow, the h3 and both .lead
       paragraphs sit flush at the edge. Fix is a new opt-in .sec-head.hang class that absolutely
       positions the marker into the left gutter (left:-19px), scoped so nothing else moves; below
       520px the gutter tightens and the marker returns to normal flow. Applied to this one
       heading only. NOTE: all 28 .sec-head instances site-wide have the same 19px offset — it is
       simply invisible where the heading sits above a bordered card or a grid rather than plain
       paragraphs, which is why this band is the one that reads wrong. Adding .hang everywhere
       would square the whole site, but that is a look change across every tab, so it was not made
       unasked. As it stands the Schedule page's other two headings (Weekly schedule, Clinics) no
       longer line up with this one.
       (8) Programs page, Baseball Hitting detail view (Rob): two frames added to the photo gallery,
       taking it from three to five. They follow the existing .shot.solo pattern exactly (same
       clamp sizing, same 3:2 aspect), so the row keeps its rhythm and wraps the same way.
       Sources point at photos/hitting-4.jpg and photos/hitting-5.jpg — the CBA shared-folder files
       "813-6 (edited)" and "813-8 (edited)", renamed to the lowercase-hyphen convention every
       other file in photos/ already uses. Spaces and parentheses survive a local preview but are a
       standing hazard on a web host, and "(edited)" is a working note that should not appear in a
       published URL.
       THREE THINGS UNVERIFIED, all needing Rob:
         - Neither Dropbox nor the photos/ folder is reachable from Claude's chat session. NO FILE
           WAS RENAMED, COPIED, OR MOVED. Rob must rename the two files hitting-4.jpg and
           hitting-5.jpg and place them in photos/ himself, or these two frames render broken.
         - RESOLVED 2026.08.26: both files supplied, already correctly named. Extension is .jpg as
           assumed. Placeholder alt text replaced with real descriptions written from the images —
           hitting-4 is a hitter finishing a swing with the HitTrax simulated-ballpark readout
           visible on the screen behind him; hitting-5 is a hitter loading to swing on front toss
           from a coach behind an L-screen, other cages in use behind.
         - hitting-4 is incidental proof of the HitTrax claim added in (17)/(18): the screen and
           the laptop station are both in frame. Worth considering for the Facility page too.
         - ORIGINALS ARE TOO LARGE FOR WEB: 6486x4970 / 6.2 MB and 5484x4972 / 5.9 MB. Every other
           photo in photos/ should be checked against this. Web-ready 1800x1200 versions were
           generated at 380 KB and 436 KB — a 93% reduction — and handed to Rob to drop into
           photos/. Aspect ratios were also wrong: the frames are 3:2 and the originals are 1.305
           and 1.103, so object-fit:cover would have cropped 13% and 26% off the height. hitting-5
           was cropped bottom-anchored to keep the batter's feet in frame; hitting-4 centre-anchored.
       (9) Schedule page, Derrick Low band (Rob): removed the h3 "Basketball Skills with Derrick
       Low," which repeated the section heading immediately above it, and added a session-details
       block under the first paragraph — Tuesdays and Thursdays, 4:00–5:15 PM Intermediate & JV,
       5:15–6:30 PM Varsity, class rates for members and $50 for non-members, sign up in the app.
       Built as a .note (white card, sand left rule) with .slot rows for the two time bands, so it
       reads as a fact panel rather than more body copy. No new CSS.
       TWO CONTRADICTIONS THIS CREATES — both need Rob before launch:
         - The paragraph directly ABOVE the new block still says "Days and times are set a month at
           a time around the in-season calendar." The block below it now states fixed weekly days
           and times. One of these is wrong. If Tue/Thu is the standing schedule, that sentence
           should be cut or reduced to a note that specific dates are published monthly.
         - The paragraph BELOW still says "Four divisions by age and level, Intermediate through
           College." The new block names three groups (Intermediate, JV, Varsity) in two time
           slots, with no College slot. Either College is dropped, or it shares a slot and the
           block needs to say so.
       Neither was changed unasked — this is partner-facing copy about Derrick's program, and the
       divisions structure appears in the Programs detail view too, so a fix should be made in both
       places at once.
       (10) Schedule page, Derrick Low note block (Rob): added the date range "August 25 –
       September 15, 2026" ahead of the Tuesdays/Thursdays line. This RESOLVES the first
       contradiction flagged in (9) — a dated block reads correctly against "days and times are set
       a month at a time," since this is that month's block rather than a standing schedule. The
       second contradiction stands: the paragraph below still says four divisions Intermediate
       through College, while the block names three groups in two slots with no College time.
       TWO THINGS TO WATCH:
         - This is a HARD-CODED DATE, the first one back in the file since v34 pulled the summer
           clinic dates out specifically so monthly changes would need no site edit. It now expires
           on 2026.09.15 and someone has to remember to update it. If these blocks recur monthly,
           it is worth deciding whether the date belongs here at all or should stay in the Mindbody
           widget above, which updates itself.
         - The eyebrow above still reads "Ongoing · Dates released monthly," which sits oddly
           against a fixed three-week window. Left unchanged pending Rob's call on whether this is
           a recurring block or a one-off.
       (11) Programs page, Derrick Low detail view (Rob): the Pricing-page clinic box is now
       duplicated into this view's Pricing section, below the existing prose paragraph. The two
       iframes are separate documents with separate stylesheets, so the supporting CSS
       (.clinic, .ctag, .cwhen, .crate, .cn, .cr, .cp, .non, .terms) had to be ported into the
       Programs iframe as well — it is a verbatim copy of the Pricing iframe's rules.
       TWO DELIBERATE DIFFERENCES from the original box:
         - The ⚑ to-do line was NOT copied. It renders as a public red box, and the Pricing page
           already carries that reminder; two copies of a working note on the live site is worse
           than one. Replaced with the plain GET + app-booking terms line.
         - The retired summer prodId comment was not copied either. It stays on the Pricing page,
           which is where the purchase buttons will go.
       MAINTENANCE COST, worth naming: the same rates now appear in THREE places — the Pricing page
       box, this box, and the prose paragraph directly above this box. A rate change means three
       edits, and the prose paragraph now says the same thing as the box immediately below it. It
       reads as belt-and-braces. Recommend cutting the prose paragraph and letting the box speak,
       which drops it to two. Not done unasked.
       (12) Programs page, all seven program cards (Rob): every orange .detail-btn now reads
       "View program details." Previously each named its own program — "View clinic details,"
       "View basketball shooting details," "View session details," "View baseball hitting details,"
       "View baseball pitching details," "View indoor league details," "View power building
       details" — which repeated the h3 sitting directly above the button on every card. One label
       across the grid; nothing else on the cards changed.
       Rob's first instruction was to drop "clinic" from the Derrick Low card, which was the only
       place that word appeared in it; the label pass followed from that. Consistent with v37,
       which retired the clinic framing for this program when Derrick's sessions moved to a
       recurring in-season class.
       NOTE: internal ids are deliberately unchanged, including showView('clinic') on the Derrick
       card and view-sparq elsewhere — same policy v34 set, so handlers and the v41 data-program
       deep-link keep working.
       (13) Programs page, Derrick Low detail view (Rob): new "Current offering" section, placed
       directly BELOW "About Derrick Low" and above "Divisions" (moved there per Rob; it was first
       in the band order when originally added). View order is now About Derrick Low → Current
       offering → Divisions → Clinic gallery → Pricing. Contents mirror the white box on the
       Schedule page: August 25 – September 15, 2026, Tuesdays and Thursdays, 4:00–5:15 PM
       Intermediate & JV, 5:15–6:30 PM Varsity, class rates for members and $50 non-member, sign up
       in the app. New CSS (.offerbox, .olab, .oslot) had to be written rather than reused — this
       iframe's .note is a teal sand-soft box used by the Divisions section, not the white
       sand-ruled card the Schedule page uses, and overriding .note would have changed Divisions.
       THIS BOX CONTRADICTED THREE THINGS ON ITS OWN PAGE. One is now fixed (see 14); two stand:
         - FIXED in (14): the hero facts strip said "Dates set monthly" and "4 Divisions".
         - STILL OPEN: all four Divisions cards carry the kicker "Days & times set monthly," and
           the note under them says each month's days and times are published on the Schedule page
           rather than fixed here — directly contradicted by fixed times now sitting above them.
         - STILL OPEN: the Divisions grid lists Intermediate, JV, College, Varsity. The offering
           box covers three of those in two slots; College has no session time. The hero sub line
           also still reads "four divisions by age and level, from Intermediate through College."
       These are the same two contradictions flagged in (9) and (10), now duplicated onto a second
       page. A fix has to cover the Schedule band, this view's facts strip, and the Divisions grid
       together, which is why none of it was changed unasked.
       DUPLICATION COUNT: the Aug 25 – Sep 15 dates and the two time bands now live in two places
       (Schedule band, this box); the member/non-member rates now live in FOUR (Pricing page box,
       this view's pricing box, this view's pricing prose, and this offering box).
       (14) Programs page, Derrick Low hero facts strip (Rob): removed the "Dates set monthly" and
       "4 Divisions" pills. Both were contradicted by the Current offering band added in (13) —
       the first by a fixed Aug 25 – Sep 15 Tue/Thu schedule, the second by that band naming three
       groups (Intermediate & JV, Varsity) across two time slots. Strip is now two pills:
       "In-season" and "Ages 11–18+".
       STILL SAYING FOUR DIVISIONS, in three places, none of them touched:
         - the hero sub line directly above this strip — "four divisions by age and level, from
           Intermediate through College"
         - the Divisions grid — four cards, each kicker still reading "Days & times set monthly"
         - the note under that grid — days and times "published on the Schedule page rather than
           fixed here"
       Removing the pills narrowed the contradiction but did not resolve it. What is needed is a
       decision on College: whether that division still exists, and if so when it trains.
       (15) Programs page, Derrick Low Divisions grid (Rob): removed the "Days &amp; times set
       monthly" kicker from all four cards. The Current offering band directly above now carries
       the real days and time bands, so the kicker was both redundant and contradictory. Cards are
       now just division name + age range, which is what the section is for. Each card lost its
       .kicker div, so all four sit slightly shorter and read cleaner; .kicker is untouched and
       still used across the Programs grid.
       (16) COLLEGE DIVISION RESOLVED (Rob: "College exists but only during certain times, right
       now only the three other divisions are being offered"). This closes the contradiction that
       ran through (9), (10), (13), (14) and (15). Four locations changed together so no page
       disagrees with another:
         a. Programs, Divisions grid — REVERTED. A "Not this block" pill was briefly added to the
            College card and then removed at Rob's direction ("nothing needs to change on the
            divisions right now"). The four cards are back to plain name + age range. The
            .offseason CSS written for that pill is left in the stylesheet with NO USER — one
            rule, kept in case the pill is wanted back; delete it in the next cleanup pass if not.
         b. Programs, note under the grid — the old sentence about days and times being published
            on the Schedule page "rather than fixed here" is replaced. It now states that College
            runs only in certain blocks and is not part of the current one, names Intermediate, JV
            and Varsity as the three training now, and points at the Schedule page or the app for
            the next College block.
         c. Programs, Current offering box — added a line directly under the two time slots saying
            College is not part of this block and runs at other times in the year, so the missing
            18+ slot is explained where the reader notices it.
         d. Programs hero sub AND the Schedule page divisions paragraph — both still say four
            divisions Intermediate through College, which is true, and both now add that
            Intermediate, JV and Varsity are the ones training in the current block.
       College is NOT deleted anywhere. It remains a real division on the site, correctly marked as
       between blocks.
       ONE THING LEFT OPEN: nothing on the site says WHEN the next College block runs. The note
       sends people to the Schedule page and the app, which is honest but not an answer. If those
       dates are known, they should go in the Current offering box.
       (17) Programs page, Baseball Hitting detail view (Rob): added a fourth pill to the header
       facts strip — "HitTrax Technology" — joining Baseball, All Ages and Cage Work. Brand
       capitalisation is HitTrax. No other change to the view.
       WORTH A DECISION: nothing on the site explains what HitTrax is. A parent who does not follow
       baseball training tech reads a brand name and gets nothing from it; the pill only works for
       people who already know. One clause in the sub line — that sessions use HitTrax to measure
       exit velocity, launch angle and batted-ball data — would make the pill mean something. Not
       added unasked. Also unverified by Claude: whether the unit is installed and in use now, or
       planned. If planned, this needs the In-development treatment rather than a plain fact pill.
       (19) Programs page — BASEBALL PHOTOS SPLIT INTO SUBFOLDERS (Rob). Until now Hitting,
       Pitching and Indoor League all pointed at the same three files, photos/baseball-1..3.jpg, so
       the three galleries were identical. Each program now has its own folder and its own copies:
         photos/hitting/        hitting-1..5.jpg      + hitting-card-a/b.jpg
         photos/pitching/       pitching-1..3.jpg     + pitching-card-a/b.jpg
         photos/indoor-league/  indoor-league-1..3.jpg + indoor-league-card-a/b.jpg
       -1..3 in each folder are copies of the old baseball-1..3; hitting-4/5 are the two real
       action shots. The card hover pairs moved in too and were renamed from the old no-hyphen
       form (hitting1a.jpg) to -card-a / -card-b, which reads unambiguously next to the numbered
       gallery files. HTML paths are rewritten; the file moves are Rob's to run — see
       reorganize-baseball-photos.sh, which copies rather than moves so nothing is lost.
       ALSO: the Hitting gallery was reordered to lead with hitting-4 and hitting-5 (real hitters,
       HitTrax screen visible) ahead of the three generic facility shots. Gallery order is markup
       order, not filename order, so no renaming was needed.
       INCONSISTENCY THIS CREATES: every other program is still flat in photos/ — clinic-1..4,
       shooting-1..4, allskills-1..5, powerbuilding-1..4, plus site-1..9 and logo.png. The photos
       folder now mixes flat files and subfolders. Worth doing the same split for the rest in one
       pass; not done unasked.
       (18) Programs page, Baseball Hitting and Indoor League detail views (Rob): HitTrax copy added
       to the first paragraph of each — the .sub line directly under the h1, which is the only prose
       paragraph in the header block. Hitting now says every swing in the HitTrax cage is measured
       rather than estimated, naming exit velocity, launch angle and projected landing spot tracked
       across sessions. Indoor League now says HitTrax turns the cage into a simulated ballpark, so
       indoor league nights run as real at-bats with batting average, slugging and hit distance
       tracked
       across the season. Both are appended to the existing tagline rather than replacing it.
       A third sentence was drafted for Baseball Pitching and DELIBERATELY NOT USED, per Rob.
       Reason it was flagged before he dropped it: HitTrax is a hitting-first system that tracks the
       batted ball. Its pitching value is narrow — velocity and location during live at-bats — and
       it gives no spin rate, spin axis or movement profile, so a HitTrax claim on the pitching page
       risks a parent arriving expecting pitch design. The Pitching view is untouched.
       TWO THINGS TO WATCH:
         - These .sub lines are hero taglines. Both are now roughly three times their previous
           length while every other program view still has a one-line sub. If they read heavy in
           the browser, the HitTrax sentence should move down into a body paragraph instead.
         - Indoor League has no HitTrax fact pill, while Baseball Hitting got one in (17). Not added
           unasked, but the two views now describe the same equipment with different prominence.
       UNVERIFIED BY CLAUDE: that the indoor league actually runs in the HitTrax-equipped cage. If
       league play happens on turf rather than in the cage, the Indoor League sentence is wrong —
       HitTrax only works where the unit is mounted.
  v40 · 2026-08-14 · (1) Home "The space" (Rob): removed the three In-development rooms from the
       chip row — Indoor turf field, Recovery & wellness, Classrooms & film room. "Space for multiple
       programs" is all that remains, since the three built rooms are now captioned on their photos.
       The Facility page list is untouched and still carries all seven with their In-development tags.
       (2) Programs: added a Basketball card, "Basketball Controlled Scrimmage · In development" —
       supervised 5-on-5 with coaches on the floor. Built on the Speed & Agility card pattern: plain
       .card, no detail view, no booking link, so nothing is promised before the program is real.
       Placed third, after Basketball Skills and Basketball Shooting, keeping basketball together.
       NOTE: name is a placeholder — Rob's phrasing was "Controlled Open Scrimmages"; "Open" was
       dropped because open (drop-in) and controlled (supervised) pull against each other in a name
       a parent reads once.
  v39 · 2026-08-14 · Home "The space" alignment fix (Rob). The photo strip (1.4fr 1fr 1fr, 10px gap)
       and the checklist below it (3 equal columns, 22px gap) divided the same 1054px width
       differently — column 2 was off by 77px, column 3 by 33px. Rather than force the two grids to
       match, the three photographed spaces are now CAPTIONED ON the image (Full-size court ·
       Performance & strength center · Batting cages), so the label cannot drift from its photo. The
       remaining four items became a wrapping chip row (.facility-blk .checks -> flex), which also
       kills the false pairing the old grid created — "Indoor turf field" used to sit directly under
       the court photo, reading as its label. The Facility page still uses the original .checks
       3-column grid; only the home block is scoped to flex.
  v38 · 2026-08-14 · (1) Removed the "Draft v19 · Contact alignment fix · program cards show
       tiered-member note (no $— per session)" banner from the top of every page (Rob). It was a
       build note from the v19 drafting session that was never taken out; the .draft CSS rule is left
       in place if a banner is ever wanted again. (2) Home "Speed & Performance" tile no longer reads
       "(S.P.A.R.Q)" — the acronym survived the v37 SPARQ retirement because it was punctuated;
       replaced with a plain description of the work. (3) Home removed the "Recovery & Wellness ·
       In development" PROGRAM tile, which still advertised the programs deleted in v36. The Home and
       Facility FACILITY lists still list "Recovery & wellness" — that is the room, left intentionally.
       Also shipped HISN_Website_v38_portable.html with all 31 photos base64-embedded.
  v37 · 2026-08-14 · Single current version (Rob). The A/B fork is closed: this file is Option A —
       Derrick's sessions run as a recurring CLASS in the Mindbody calendar and flow into the existing
       Schedules widget (id e9292811dc5), so a monthly date change needs no site edit. Option B (the
       Enrollments-widget course build) is dropped; v36b holds it if it is ever wanted back.
       Also removed the "Nexus" prefix from every program name — on a Nexus-branded site inside a
       Nexus-branded booking widget it read as repetition, not branding. Names are back to:
       Basketball Skills with Derrick Low · Basketball Shooting · Speed, Reaction, Basketball and
       Baseball Clinic · Baseball Hitting · Baseball Pitching · Indoor League · Speed & Agility ·
       Power Building. Note this leaves the CBA question moot — no program carries a house prefix now,
       so there is nothing to strip from the CBA-branded ones.
  v36 · 2026-08-14 · Recovery removed from Programs (Rob). Deleted the "Recovery" filter chip, both
       Recovery program cards (Nexus Injury Prevention & Recovery, Nexus Recovery & Wellness), and
       both of their detail views (view-injury-prevention, view-recovery-wellness) — those two views
       were already unreachable: no card, nav item, or showView() call pointed at them. Also removed
       the Schedule page line "Recovery & wellness sessions — In development — book in the app once
       live," which would otherwise promise classes that no longer appear anywhere. The Facility page
       is deliberately UNTOUCHED: the "Recovery / wellness area" gallery tile and the "Recovery &
       wellness" line in What's inside describe the planned build-out of the room, not classes.
       Programs filter row is now Basketball · Baseball · Speed · Strength.
  v34 naming pass · 2026-08-14 · Program naming (Rob). Derrick Low program is now "Nexus Basketball
       Skills with Derrick Low" — his name stays in the title so parents can find it fast on the
       schedule; he is also assigned as the teacher in Mindbody. SPARQ retired entirely and replaced
       with "Nexus Speed & Agility": new description built around footwork, acceleration,
       deceleration, and change of direction, and the word "Explosion" removed from the facts strip
       so it no longer overlaps Nexus Power Building. Nexus prefix applied to Basketball Shooting,
       Baseball Hitting, Baseball Pitching, Indoor League, Power Building, Injury Prevention &
       Recovery, Recovery & Wellness, and the Speed/Reaction/Basketball/Baseball clinic. Also fixed a
       standing mismatch: the Shooting card said "Basketball Shooting" while its detail view header
       said "Shooting Sessions" — both are now "Nexus Basketball Shooting". Internal IDs
       (showView/view-*/data-prog/data-f) deliberately unchanged, including view-sparq.
       OPEN: which programs are CBA-branded and should drop the Nexus prefix.
  v34 (Option A · recurring class in the Mindbody calendar) · 2026-08-14 · Back-to-school schedule
       reset (Rob). SCHEDULE: removed the "Featured clinic — Summer Basketball Clinics with Derrick
       Low" band (Jun 29–Jul 3 & Jul 6–10, 2026, four division cards) and the expired "Now → Aug 3 ·
       Summer Clinics" row from the Clinics list; Clinics now starts at Fall Break Oct 5–9. In its
       place, an ongoing band for "Nexus Basketball Academy with Derrick Low" that points at the live
       Mindbody Schedules widget — no dates hard-coded in the HTML, so monthly changes need no site
       edit. PROGRAMS: card blurb, detail-view header, facts strip, and Divisions grid reworded from
       one-week-clinic to in-season; the four summer day/time kickers replaced with "Days & times set
       monthly". The detail-view Clinic pricing grid (3-Day/2-Day/Drop-In with live prodId purchase
       buttons 100277–100283) is retired and its rates/prodIds preserved in an HTML comment. PRICING:
       "Derrick Low Skills Clinic" renamed, the Jun 16–20 date line replaced with "dates released
       monthly", and all six member/non-member purchase buttons removed pending new prodIds. Added a
       .btn.pending style to the main document. NOTE: the program name is a working name pending
       partner approval — see Derrick_Low_Class_Name_Options_v1.md.
  v33 · 2026-07-25 · Contact page (Rob): added a "Send us a message" section below "Contact us" — the
       MindBody Prospects lead-capture widget (id e9654761dc5, healcode.js loader) in a white card
       matching the Schedule tab's widget container, on an alternating mist band. Lead line invites
       written inquiries to set up the free trial class. The widget renders only on a live hosted
       domain — blank in local previews is expected. Note: v31–v33 were drafted in chat on 07-24
       against the portable build only; ported onto the lean file (from v30) on 07-25.
  v32 · 2026-07-25 · Removed the ⚑ "add photos / purchase link" to-do flag from the Basketball
       Shooting membership card (Rob) — matches the v27 cleanup on Hitting, Pitching, and Indoor
       League.
  v31 · 2026-07-25 · Basketball Shooting booking (Rob): removed the placeholder MindBody "Book /
       Register" button from the view-shooting Membership card and replaced it with the "Not sold
       online" pill — identical markup to the v22 treatment on Baseball Hitting and Pitching.
  v30 · 2026-07-24 · Programs page (Rob): removed the two filter lines under the header ("Filter by
       what you're working on. Tap a chip to narrow the list."). The filter chips themselves are
       unchanged. Note: Programs is now the only tab without a sub line under its header.
  v29 · 2026-07-24 · Footer banner slogan (Rob): "Train hard. Get better. Belong." is now
       "Train hard. Learn. Get better." — "Learn." carries the mind element of the whole-athlete
       mission and the line now follows the athlete's journey: effort, understanding, improvement.
  v28 · 2026-07-24 · Home page, athlete development path (Rob): removed "Real results." from the
       closing tag line — now reads "Long-term development." Footer slogan ("Train hard. Get better.
       Belong.") unchanged pending Rob's pick of a replacement for "Belong."
  v27 · 2026-07-24 · Removed the ⚑ "add photos" to-do flags from the Baseball Hitting, Baseball
       Pitching, and Indoor League membership cards (Rob). Cards now show just the "Not sold online"
       pill. No other flags touched.
  v26 · 2026-07-24 · Power Building booking (Rob): the Book / Register pill in the Power Building
       view now navigates to the Pricing tab (memberships) instead of the placeholder MindBody
       schedule link, styled as a normal solid button (no longer "pending"). Added a small disclaimer
       under it: Power Building is only available to book through memberships. Removed the obsolete
       ⚑ purchase-URL to-do flag from that card.
  v25 · 2026-07-24 · Page-header consistency pass (Rob: "check the header text on each page"):
       (1) Programs & Pricing iframe headers now match the main tabs — h1 at the same 72px scale
       (were 54px/50px), no forced uppercase, same 56/48 padding, same 18px sub width/size, and the
       Pricing eyebrow back to 12.5px (was 12px). Same class of frame-drift fixed in v14/v17.
       (2) About was the only page header without a sub line — added one ("The people and mission
       behind Hawaiʻi Sports Nexus.").
       (3) Derrick Low detail-view heading reordered to the official v16 program name: "Basketball
       Clinic with Derrick Low" (was "Derrick Low Basketball Clinic").
  v24 · 2026-07-24 · Alignment pass (Rob: "check the indentions on each page"): measured every tab's
       content left edge in-browser — all tabs and both iframes lined up except Join, whose four body
       sections (Before-you-start note, Part 1, Part 2, Good to know) still had the max-width:780px cap
       (same issue v19 fixed on Contact). Removed the four caps so Join's content aligns with its own
       page header and every other tab. No other tab needed changes.
  v23 · 2026-07-24 · SPARQ program card (Rob): removed the "View SPARQ details" button and the
       card's click-through to the detail view; the card now shows an "In development" badge on the
       title, matching the Injury Prevention & Recovery and Recovery & Wellness cards. The SPARQ
       detail view remains in the file (unreachable from the card) for when the program goes live.
  v22 · 2026-07-24 · Baseball Hitting, Baseball Pitching, and Indoor League detail views (Rob):
       removed the placeholder MindBody "Book / Register" button from each view's Membership card and
       replaced it with a "Not sold online" pill (reuses the .dev badge style). The Book / Register
       section, its heading, the Membership card itself, and the photo galleries are unchanged. The
       ⚑ to-do flags on those three cards now ask only for photos (no purchase link needed).
  v21 · 2026-07-24 · Program rename (Rob): "SPARQ Clinic" (the All-Skills program) is now
       "Speed, Reaction, Basketball and Baseball Clinic." Applied to the Programs card title, the
       program detail-view heading (was still "All-Skills Sunday"), and the pricing card inside that
       view. The separate "SPARQ" speed program is unchanged. Internal IDs (showView('allskills'),
       data-clinic="allskills-sunday") unchanged. Card kicker stays "All-Skills".
  v20 · 2026-07-21 · (retro note — this entry was missing) Replaced all embedded base64 images with
       real photo files linked from a photos/ folder next to the HTML; file size dropped ~3.2 MB -> ~140 KB.
  v19 · 2026-07-17 · (1) Contact tab: removed the max-width:780px cap on the "Contact us" band so it
       lines up with the page header and the other tabs (was indented). (2) Program detail cards: replaced
       the "$— per session" price placeholder with a note — "Tiered member pricing — see the Pricing tab
       for membership rates." — and relabeled those cards' kicker from "Per session" to "Membership"
       (9 cards). The real Derrick Low clinic pricing tiers ($150/$225 etc.) are unchanged.
  v18 · 2026-07-17 · Removed the Partners tab for now (Rob): deleted the nav link and the entire
       #page-partners section (headers, Travis Muraoka / performance-recovery partner content). Nav is
       now Home · Programs · Schedule · Facility · Pricing · Join · About · Location · Contact. Nothing
       else references partners, so no dead links.
  v17 · 2026-07-16 · BUGFIX: the Programs & Pricing iframes never defined the --flame token in their
       own :root (custom properties don't cross the iframe boundary), so every element recolored to
       var(--flame) inside those frames — the hover "View details" buttons, the MindBody "Book / Register"
       buttons, the Pricing tier buttons, "See clinic pricing", the back links, and the "In development"
       badges — resolved to invalid/transparent and disappeared (white text on white). Added
       --flame + --flame-soft to both iframe :root blocks, restoring all of them to orange.
  v16 · 2026-07-16 · Program names in the Programs frame updated to the naming system (Rob): Derrick
       Low Clinic -> Basketball Clinic with Derrick Low; Shooting Sessions -> Basketball Shooting;
       All-Skills Sunday -> SPARQ Clinic; Hitting -> Baseball Hitting; Pitching -> Baseball Pitching.
       Applied to card titles, detail-view headings, gallery labels, "View ... details" buttons and
       to-do flags. Internal IDs (showView/data-prog) and the person's name "Derrick Low" unchanged.
  v15 · 2026-07-16 · Extended the two-tone into the Programs frame's subtler controls so it fully
       matches home (Rob): the "View details" buttons are orange (were teal-filled), the "Back" links
       and their arrow icons are orange, and the frame's "In development" badge is orange to match the
       home-page badge. Text accents stay teal. The Pricing frame already matched (buttons orange, text
       teal, no view-details/back controls).
  v14 · 2026-07-16 · Pricing tab now matches the other tabs' content margins: the Pricing frame was
       capped at --maxw:600px (20px gutters), so its content sat in a narrow centered column with wide
       side margins. Widened to --maxw:1100px with 24px gutters to line up with every other tab. The
       tier/clinic grids are responsive (auto-fit), so they reflow to the wider width.
  v13 · 2026-07-16 · Restored the intended two-tone (undoes v12's site-wide orange): text accents —
       eyebrows, section numbers, kickers, links, active nav — are teal again; buttons and icons stay
       orange. Also turned the last filled button that was still navy (Pricing tier buttons) orange, so
       every filled button reads orange across all tabs. Kept the Pricing tab's new navy .phead header
       (eyebrow + big Anton "Memberships & clinics") so it matches Programs/Schedule/Facility.
  v11 · 2026-07-16 · Applied the orange accent (--flame #E17A2D) to interactive elements per Rob:
       buttons (nav "Book a Free Trial", "Explore programs" / "See clinic pricing", and the MindBody
       "Book / Register" & "Member" buttons in the Programs/Pricing frames) and the home feature-card
       icons. Text accents (eyebrows, kickers, section numbers, links, price highlights) stay teal —
       two-tone: teal for text, orange for anything clickable. No content/media changes.
  v10 · 2026-07-16 · (Rob) Logo + polish pass. Embedded the real HISN wordmark (flat navy keyed to
       transparent white) in the nav and footer, repairing the broken ../assets/Logo path. Home "The
       space" strip: swapped the leftmost fitness/weights photo for the basketball court. Schedule:
       static "A typical week" grid replaced with the live MindBody Schedules widget (card-bordered);
       heading renamed "Weekly schedule". Fixed the empty space below the Programs/Pricing iframes
       (measure body height, dropped the 640px min-height floor, parent-side re-sizing on every tab
       switch). Programs now resets to its home view + "All" filter chips whenever the tab is reopened.
       Pricing: removed the persistent Elite highlight — all tiers plain, with card + button highlight
       on hover. Facility gallery photos expand on hover for a big view.
  v9 · 2026-07-15 · Cleanup: removed the program pop-up modal that the iframe restructure left orphaned —
       deleted the #progModal markup, the PROGRAMS / openProgram / closeProgram script, the main-page
       chip-filter handler, and the .pmodal / .pm-* / #progGrid CSS (all targeted nodes that now live
       only inside the Programs iframe). No visible or design change. Version labels bumped.
  v8 · 2026-07-15 · (Rob) Programs & Pricing rebuilt as self-contained pages embedded via iframe srcdoc
       with a postMessage auto-resize bridge (min-height floor, grows to content, re-measured on tab show).
       Added MindBody "Book / Register" buttons on Programs; "Book a Free Trial" CTA now targets Contact.
       Photos still embedded as base64 (linking/resize still pending).
  v7 · 2026-07-05 · Copy edits (Rob): Speed & Performance card now spells out "Speed, Power,
       Agility, Reaction, and Quickness (S.P.A.R.Q)."; "Team Training" card renamed to
       "Custom Training Programs" with copy "Custom programs for individuals, clubs, and schools."
       No media changes — photos still embedded as base64 (photo-linking/resize pending sandbox
       access to the /assets folder).
  v6 · 2026-07-02 · Incorporated the v5-test edits into the main project (Paul + Holly PDF markup).
       All copy/design changes from HISN_v5_change-summary.md applied: caps hero headline + darkened
       scrim + headline text-shadow; hero subhead "Diverse sports and movement…"; nav + hero CTA
       "Book a Free Trial"; Sport Skills card names basketball & baseball; Speed & Performance simplified;
       SPARQ spelled out (SPARQ Clinic); "Clinics" everywhere (intensives dropped); footer tagline
       "Movement is Life."; class/clinic naming system across Programs cards, weekly grid, home cards,
       Pricing, and program pop-ups; --flame (#E17A2D) orange accent on "In development" badges;
       removed "Built different." (kept "Built for athletes."). No image/media swaps — base64
       placeholders and ../assets/Logo links unchanged from v4. Parked: recovery/PT copy (Travis/Ben),
       Open Lifting card, Indoor League prefix, and other open questions in the change summary.
  v5 · 2026-06-30 · TEST MOCKUP for Paul (pink) + Holly (orange/red) markup. Applied only the
       unambiguous edits; left all open questions for the team to decide (see chat summary). Applied:
       (1) Home headline -> all caps, single flowing line [Holly "caps"].
       (2) Hero scrim darkened + headline text-shadow for legibility [Paul "darken/shadow outline text"].
       (3) Spelled out SPARQ on Home + Programs + program modal; dropped "On-court" wording [Paul].
       (4) Removed Programs subtitle "Filter by what you're working on..." [Holly strikethrough].
       (5) "Clinics & intensives" -> "Clinics & Intensives" on Schedule [Paul "capital"].
       (6) Footer tagline "At Nexus, Movement is Life!" -> "Movement is Life." [Paul].
       (7) "Book a Trial" -> "Book a Free Trial" nav + hero [confirmed free intro].
       (8) Sport Skills card now names basketball & baseball [Holly].
       (9) Consistent class/clinic naming system [Paul terminology]: Shooting Sessions->Basketball
       Shooting; Hitting->Baseball Hitting; Pitching->Baseball Pitching; speed card (was "SPARQ")
       ->Speed; All-Skills Sunday->SPARQ Clinic (acronym now lives here, spelled out); Derrick Low
       ->"Basketball Clinic with Derrick Low" (Schedule featured headline carries "Summer"). Season
       stays the umbrella (Summer/Fall Break/Winter Break/Spring Break Clinics). Applied across
       Programs cards, weekly grid, home cards, pricing, and program pop-ups.
       Still parked: recovery/PT copy (Travis/Ben), Open Lifting card, Indoor League sport prefix.
       (11) Removed "Built different." from the home "The Space" heading (resolves Paul's "how are we
       built different?"); "Built for athletes." remains.
       (10) Home hero sub set to "Diverse sports and movement in one space, built to develop each
       athlete in body, mind, and spirit." (echoes mission without repeating it verbatim). Added
       --flame orange accent, applied to the "In development" badges.
       No image/media swaps. Photo-supply placeholders and broken logo path left as in v4.
  v4 · 2026-06-24 · Aligned blues to brand book: Ink #16233F→#202A44. Per request, fully unified — Deep Ink
       (--ink-2) collapsed into Ink #202A44 so all dark bands match (top navbar = footer, plus offer/draft bands).
       Muted text rgba(22,35,63)→rgba(32,42,68), dark placeholder texture #16233f→#202A44 / #1b2c4d→#253352.
       Steel #2C4170 and Plum #3C3470 already matched the brand book — unchanged. No content/media changes.
  v3 · 2026-06-24 · Replaced embedded base64 logo with linked files: white ../assets/Logo/HISN%20WB.png in
       both nav and footer (navbar background is --ink dark navy, so the white mark reads on both). All other media unchanged.
  v2 · baseline draft filed into /site (all images still embedded as base64).
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hawaiʻi Sports Nexus</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#202A44; --ink-2:#202A44; --paper:#F7F5EF; --mist:#E7EBF2;
    --line:rgba(32,42,68,.14); --sand:#14A39A; --sand-soft:#BFE9E3;
    --red:#BE3A34; --ink-60:rgba(32,42,68,.62); --ink-40:rgba(32,42,68,.40);
    --steel:#2C4170; --plum:#3C3470;--flame:#E17A2D;--flame-soft:#F7DFC8; --maxw:1100px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:'Archivo',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em;line-height:1.06}
  .anton{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em}
  .eyebrow{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60)}
  a{color:inherit;text-decoration:none}
  /* v45 — inline text-link style. The rule directly above strips colour and underline from every
     <a>, which was fine while every link on the site was a button or a nav item. The pricing
     bands now point at other pages in running prose, so those need to look like links. Twin of
     the same rule in the Programs iframe stylesheet — separate documents, no cascade between. */
  .ilink{color:var(--sand);text-decoration:underline;text-underline-offset:2px;font-weight:600;cursor:pointer}

  .draft{background:var(--ink-2);color:var(--sand);font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:7px 12px}

  /* in-development pill */
  .dev{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--flame);border:1px solid var(--flame);background:rgba(225,122,45,.12);padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:8px;white-space:nowrap}

  /* photo placeholder */
  .ph{position:relative;background:repeating-linear-gradient(135deg,#e9edf3,#e9edf3 14px,#e2e7ef 14px,#e2e7ef 28px);
    border:1.5px dashed rgba(32,42,68,.3);border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-60);overflow:hidden}
  .ph .lbl{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;padding:14px;line-height:1.5;max-width:90%}
  .ph .tag{display:block;color:var(--sand);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}
  .ph.dark{background:repeating-linear-gradient(135deg,#253352,#253352 14px,#202A44 14px,#202A44 28px);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.72)}
  .photo-real{border:0}
  .bg-court{background:#202A44 url("photos/site-1.jpg") center/cover no-repeat}
  .bg-fitness{background:#202A44 url("photos/site-2.jpg") center/cover no-repeat}
  .bg-strength{background:#202A44 url("photos/site-3.jpg") center/cover no-repeat}
.bg-pb1{background:#202A44 url("photos/site-4.jpg") center/cover no-repeat}
.bg-pb2{background:#202A44 url("photos/site-5.jpg") center/cover no-repeat}
.bg-pb3{background:#202A44 url("photos/site-6.jpg") center/cover no-repeat}
  .bg-cages{background:#202A44 url("photos/site-7.jpg") center/cover no-repeat}

  /* nav */
  .navbar{background:var(--ink);position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-inner{display:flex;align-items:center;gap:18px;height:70px}
  .nav-logo{display:flex;align-items:center;cursor:pointer}
  .nav-logo img{height:34px;width:auto;display:block}
  .nav-links{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
  .nav-links a{color:rgba(255,255,255,.82);font-size:14px;font-weight:600;padding:6px 2px;cursor:pointer}
  .nav-links a:hover{color:#fff}
  .nav-links a.on{color:var(--sand)}
  .nav-cta{background:var(--flame);color:var(--ink-2)!important;padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer}
  .burger{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;padding:6px}

  .btn{display:inline-block;font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .12s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn-gold{background:var(--flame);color:var(--ink-2)}
  .btn-ghost{border-color:var(--ink);color:var(--ink)}
  .btn-light{border-color:rgba(255,255,255,.65);color:#fff}
  .btn.pending{background:transparent;color:var(--red);border:2px dashed var(--red);cursor:not-allowed}
  .btn.pending:hover{transform:none}
  a:focus-visible,.nav-links a:focus-visible,button:focus-visible{outline:3px solid var(--sand);outline-offset:3px}

  /* pages */
  .page{display:none}
  /* v48 — Mindbody Schedules widget container. Padding is a rule rather than inline so it can
     shrink on phones; overflow-x is set inline on the element itself. */
  .mb-schedule{padding:22px}
  @media (max-width:560px){ .mb-schedule{padding:12px 10px} }
  .page.active{display:block}

  .band{padding:62px 0}
  .band.mist{background:var(--mist)}
  .phead{background:var(--ink);color:#fff;padding:56px 0 48px}
  .phead .eyebrow{color:var(--sand)}
  .phead h1{font-size:clamp(38px,6.4vw,72px);margin-top:10px}
  .phead .sub{color:rgba(255,255,255,.8);max-width:62ch;margin-top:16px;font-size:18px}
  .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
  /* v41 — .sec-head.hang: the · marker moves out of flow into the left gutter so the h2 starts at
     the wrap's left edge, in line with the body copy beneath it. .sec-head is a flex row, so the
     marker plus its 14px gap normally pushes the heading ~19px right of everything below it. Only
     noticeable where a heading sits directly above plain paragraphs (the Schedule page's Derrick
     Low band); elsewhere a bordered card or grid absorbs it. The wrap gutter is 24px, so a 19px
     hang still clears the viewport edge; below 520px the gutter tightens, so the hang is dropped
     and the marker returns to flow. */
  .sec-head.hang{position:relative}
  .sec-head.hang .sec-num{position:absolute;left:-19px;top:0}
  @media (max-width:520px){ .sec-head.hang .sec-num{position:static;left:auto} }
  .sec-num{font-family:'Space Mono',monospace;color:var(--sand);font-size:15px}
  .sec-title{font-size:clamp(26px,4vw,40px)}
  .lead{font-size:18px;max-width:64ch;color:var(--ink-60)}

  /* HOME hero */
  .hero{position:relative;color:#fff;min-height:500px;display:flex;align-items:center}
  .hero .ph{position:absolute;inset:0;border:0;border-radius:0;z-index:0}
  .hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,24,48,.94),rgba(14,24,48,.82) 42%,rgba(14,24,48,.45))}
  .hero .wrap{position:relative;z-index:2;padding:66px 24px}
  .hero .eyebrow{color:var(--sand)}
  .hero h1{font-size:clamp(42px,6.2vw,80px);margin-top:12px;text-shadow:0 2px 20px rgba(8,14,30,.55)}
  .hero p.sub{color:rgba(255,255,255,.85);font-size:18px;margin:20px 0 26px;max-width:40ch}
  .hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
  .photo-cred{position:absolute;right:16px;bottom:12px;z-index:2;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}

  .offer{background:var(--ink-2);color:#fff;padding:50px 0}
  .offer h2{text-align:center;font-size:clamp(19px,2.8vw,28px)}
  .offer .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 18px;margin-top:30px}
  .offer .item{display:flex;gap:12px;align-items:flex-start}
  .offer svg{width:30px;height:30px;stroke:var(--flame);fill:none;stroke-width:1.7;flex:none;margin-top:2px}
  .offer h4{font-size:14.5px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
  .offer p{font-size:13px;color:rgba(255,255,255,.66);margin:0;line-height:1.45}

  .facility-blk .head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:24px}
  .facility-blk h2{font-size:clamp(30px,4.6vw,46px)}
  .facility-blk h2 .accent{color:var(--sand);display:block}
  .strip{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;height:290px}
  .strip .ph{height:100%;overflow:hidden}
  /* photo captions — the label lives ON the image it describes, so it cannot drift out of
     alignment the way the old .checks column grid did (see v39 note in the changelog). */
  .strip .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 14px 12px;
    font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    color:#fff;font-weight:700;line-height:1.3;
    background:linear-gradient(to top,rgba(8,14,30,.86),rgba(8,14,30,.45) 46%,rgba(8,14,30,0))}
  /* home "The space" list is now a wrapping chip row, NOT a 3-column grid — nothing above it to
     line up with, so nothing to misalign. The Facility page keeps the original .checks grid. */
  .facility-blk .checks{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:18px}
  .checks{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 22px}
  .checks li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px}
  .checks li::before{content:"";width:17px;height:17px;border-radius:50%;background:var(--sand-soft);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314A39A' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size:11px;background-repeat:no-repeat;background-position:center;flex:none}

  .path{background:var(--ink);color:#fff;padding:56px 0}
  .path h2{text-align:center;font-size:clamp(24px,3.6vw,38px)}
  .stages{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0 18px}
  .stage{border-radius:12px;padding:22px 18px}
  .stage:nth-child(1){background:var(--sand)}
  .stage:nth-child(2){background:var(--steel)}
  .stage:nth-child(3){background:#223a6b}
  .stage:nth-child(4){background:var(--plum)}
  .stage h4{font-size:19px}
  .stage .age{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;margin:3px 0 12px;color:rgba(255,255,255,.78)}
  .stage p{font-size:13px;line-height:1.45;margin:0;color:rgba(255,255,255,.92)}
  .path .tag{text-align:center;color:var(--sand);font-family:'Space Mono',monospace;letter-spacing:.16em;font-size:12.5px;text-transform:uppercase}

  .statline{background:var(--mist);padding:24px 0}
  .statline .row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;align-items:baseline;text-align:center}
  .statline b{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink);font-size:21px}
  .statline .row>span{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
  .statline .dot{color:var(--sand)}

  /* generic cards / grids */
  .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
  .card .kicker{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);margin-bottom:8px}
  .card h3{font-size:20px;margin-bottom:6px}
  .card p{margin:0;font-size:14.5px;color:var(--ink-60)}

  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
  .chip{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 14px;border-radius:999px;cursor:pointer}
  .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

  /* schedule */
  .camp{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:10px}
  .camp .dt{font-family:'Space Mono',monospace;font-size:13px;color:var(--ink)}
  .camp .tg{display:inline-block;margin-top:6px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand);border:1px solid var(--sand);border-radius:999px;padding:2px 8px}
  .camp h3{font-size:18px;margin-bottom:4px}
  .camp p{margin:0;font-size:14px;color:var(--ink-60)}
  .week{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .day{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
  .day h4{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:8px}
  .slot{font-size:13px;padding:6px 0;border-top:1px solid var(--line)}
  .slot:first-of-type{border-top:0}
  .slot .t{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-60)}

  /* pricing */
  .price{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column}
  .price.hl{border-color:var(--sand);box-shadow:0 8px 30px rgba(20,163,154,.12)}
  .price .tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
  .price h3{font-size:24px;margin:6px 0}
  .price .amt{font-family:'Anton',sans-serif;font-size:30px;color:var(--ink);margin:4px 0 2px}
  .price .amt small{font-family:'Archivo';font-size:13px;color:var(--ink-60);font-weight:600}
  .price ul{list-style:none;padding:0;margin:14px 0 18px;flex:1}
  .price li{font-size:14px;padding:5px 0;border-top:1px solid var(--line);color:var(--ink-60)}

  /* join steps */
  .step{display:grid;grid-template-columns:44px 1fr;gap:16px;margin-bottom:18px;align-items:start}
  .step .n{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-family:'Anton',sans-serif;display:flex;align-items:center;justify-content:center;font-size:18px}
  .step h3{font-size:18px;margin-bottom:4px}
  .step p{margin:0;font-size:14.5px;color:var(--ink-60)}
  .step ul{margin:8px 0 0;padding-left:18px}
  .step ul li{font-size:14px;color:var(--ink-60);padding:3px 0}
  .kbd{font-family:'Space Mono',monospace;font-size:12.5px;background:var(--mist);border:1px solid var(--line);border-radius:5px;padding:1px 6px;white-space:nowrap;color:var(--ink-2)}
  .tip{background:var(--sand-soft);border-radius:8px;padding:12px 14px;margin-top:12px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
  .appbtns{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 12px}
  .appbtn{display:flex;align-items:center;background:#fff;color:var(--ink-2);border-radius:10px;padding:9px 18px;line-height:1.15}
  .appbtn .sm{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);display:block}
  .appbtn .bg{font-weight:800;font-size:16px}
  .partlabel{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
  .goodtoknow{background:var(--ink);color:#fff;border-radius:14px;padding:28px}

  /* partner */
  .partner{display:grid;grid-template-columns:84px 1fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;max-width:720px}
  .mono-badge{width:84px;height:84px;border-radius:14px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:26px}
  .partner .role{color:var(--ink-60);font-size:14.5px;margin:2px 0 8px}
  .tagrow{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 14px}
  .tagrow .t{font-family:'Space Mono',monospace;font-size:11px;background:var(--sand-soft);color:var(--ink-2);padding:4px 9px;border-radius:999px}
  .note{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--sand);border-radius:10px;padding:14px 16px;max-width:70ch;margin-top:18px}
  .note .mono{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);display:block;margin-bottom:3px}
  .note p{margin:0;color:var(--ink-60);font-size:14px}
  .brand{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column}
  .brand .logo{font-family:'Anton',sans-serif;font-size:28px;color:var(--ink)}
  .brand .kicker{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);margin:12px 0 8px}
  .brand p{margin:0 0 14px;font-size:14.5px;color:var(--ink-60);flex:1}

  .join-cta{background:var(--ink);color:#fff}
  .join-cta .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;padding:54px 24px}
  .join-cta h2{font-size:clamp(26px,4vw,40px)}
  .join-cta .eyebrow{color:var(--sand)}
  .join-cta p{color:rgba(255,255,255,.82);margin:14px 0 22px;max-width:46ch}
  .join-cta ul{margin:0;padding-left:18px;color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.9}

  /* facility gallery */
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:170px;gap:10px}
  .gallery .ph{height:100%}
  .gallery .ph.wide{grid-column:span 2}
  .gallery{position:relative}
  .gallery .ph.photo-real{cursor:zoom-in;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
  .gallery .ph.photo-real:hover{transform:scale(1.7);z-index:30;box-shadow:0 26px 64px rgba(8,14,30,.55)}
  .gallery .ph.bg-strength{transform-origin:left center}
  .gallery .ph.bg-fitness{transform-origin:right center}

  footer{background:var(--ink-2);color:rgba(255,255,255,.72);padding:46px 0 0;font-size:14px}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px;align-items:start}
  .foot-logo{height:40px;width:auto;display:block;margin-bottom:14px}
  footer .tagline{color:#fff;font-size:15px;letter-spacing:.06em}
  .tagline-sub{color:var(--sand);font-size:13.5px;font-weight:600;letter-spacing:.02em;margin-top:8px}
  .foot-col h4{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin:0 0 12px}
  .foot-col a,.foot-col span{display:block;color:rgba(255,255,255,.78);text-decoration:none;padding:3px 0;line-height:1.5}
  .foot-col a:hover{color:#fff}
  .foot-bottom{text-align:center;color:rgba(255,255,255,.5);font-size:12.5px;padding:22px 0;margin-top:30px;border-top:1px solid rgba(255,255,255,.1)}
  @media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:26px;text-align:center}.foot-logo{margin:0 auto 14px}}

  @media (max-width:900px){
    .burger{display:block}
    .nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--ink);flex-direction:column;padding:14px 24px;gap:10px;border-bottom:1px solid rgba(255,255,255,.12)}
    body.nav-open .nav-links{display:flex}
    .burger{margin-left:auto}
    .offer .grid{grid-template-columns:repeat(2,1fr)}
    .facility-blk .head{grid-template-columns:1fr}
    .strip{grid-template-columns:1fr 1fr;height:auto;grid-auto-rows:150px}
    .strip .ph:first-child{grid-column:1/-1}
    .checks,.g3,.g2,.week{grid-template-columns:repeat(2,1fr)}
    .stages{grid-template-columns:repeat(2,1fr)}
    .join-cta .wrap{grid-template-columns:1fr;gap:24px}
    .gallery{grid-template-columns:repeat(2,1fr)}
    .gallery .ph.wide{grid-column:span 2}
  }
  @media (max-width:520px){
    .offer .grid,.g3,.g2,.week,.checks,.strip{grid-template-columns:1fr}
    .camp{grid-template-columns:1fr}
    .partner{grid-template-columns:1fr}
  }

</style>
</head>
<body>


<nav class="navbar">
  <div class="wrap nav-inner">
    <a class="nav-logo" data-go="home" aria-label="Hawaiʻi Sports Nexus home"><img src="photos/logo.png" alt="Hawaiʻi Sports Nexus"></a>
    <div class="nav-links" id="links">
      <a data-go="home" class="on">Home</a>
      <a data-go="programs">Programs</a>
      <a data-go="schedule">Schedule</a>
      <a data-go="facility">Facility</a>
      <a data-go="pricing">Pricing</a>
      <a data-go="join">Join</a>
      <a data-go="about">About</a>
      <a data-go="location">Location</a>
      <a data-go="contact">Contact</a>
    </div>
    <button class="burger" id="burger" aria-label="Menu">☰</button>
  </div>
</nav>

<main>

<!-- ================= HOME ================= -->
<section class="page active" id="page-home">
  <div class="hero">
    <div class="ph photo-real bg-court"></div>
    <div class="scrim"></div>
    <div class="wrap">
      <p class="eyebrow">Hawaiʻi Sports Nexus · Honolulu</p>
      <h1 class="anton">DEVELOP THE WHOLE ATHLETE</h1>
      <p class="sub">Diverse sports and movement in one space, built to develop each athlete in body, mind, and spirit.</p>
      <div class="cta-row">
        <a class="btn btn-gold" data-go="programs">Explore programs</a>
        <a class="btn btn-light" data-go="contact">Book a free trial</a>
      </div>
    </div>
  </div>

  <section class="offer">
    <div class="wrap">
      <h2 class="anton">Everything athletes need. All under one roof.</h2>
      <div class="grid">
        <div class="item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3v18M5 5c3 3 3 11 0 14M19 5c-3 3-3 11 0 14"/></svg><div><h4>Sport Skills</h4><p>Basketball and baseball — position-specific, team-focused coaching.</p></div></div>
        <div class="item"><svg viewBox="0 0 24 24"><circle cx="13" cy="4" r="2"/><path d="M5 21l3-6 4-2 1-4M12 9l4 2 3-1M8 15l-3 1"/></svg><div><h4>Speed &amp; Performance</h4><p>Footwork, acceleration, change of direction, and reaction.</p></div></div>
        <div class="item"><svg viewBox="0 0 24 24"><path d="M4 9v6M7 7v10M17 7v10M20 9v6M7 12h10"/></svg><div><h4>Strength &amp; Power</h4><p>Build strength and move better.</p></div></div>
        <div class="item"><svg viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="17" rx="2"/><path d="M9 9h6M9 13h6M9 17h3"/></svg><div><h4>Clinics</h4><p>Breaks, weekends, and seasonal clinics.</p></div></div>
        <div class="item"><svg viewBox="0 0 24 24"><circle cx="8" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3 2.5-5 5-5s5 2 5 5M14 20c0-2.2 1.2-4 3.5-4S21 17.8 21 20"/></svg><div><h4>Custom Training Programs</h4><p>Custom programs for individuals, clubs, and schools.</p></div></div>
      </div>
    </div>
  </section>

  <section class="band facility-blk">
    <div class="wrap">
      <div class="head">
        <div>
          <p class="eyebrow">The space</p>
          <h2 class="anton"><span class="accent">Built for athletes.</span></h2>
          <p class="lead" style="margin-top:14px">20,000+ square feet of indoor training space, purpose-built so athletes can train across different sports under one roof.</p>
        </div>
        <a class="btn btn-ghost" data-go="facility">Take a tour</a>
      </div>
      <div class="strip">
        <div class="ph photo-real bg-court" role="img" aria-label="Full-size basketball court"><span class="cap">Full-size court</span></div>
        <div class="ph photo-real bg-strength" role="img" aria-label="Performance and strength center"><span class="cap">Performance &amp; strength center</span></div>
        <div class="ph photo-real bg-cages" role="img" aria-label="Batting cages"><span class="cap">Batting cages</span></div>
      </div>
      <ul class="checks">
        <li>Space for multiple programs</li>
      </ul>
    </div>
  </section>

  <section class="path">
    <div class="wrap">
      <h2 class="anton">The athlete development path</h2>
      <div class="stages">
        <div class="stage"><h4 class="anton">Foundations</h4><div class="age">Ages 8–11</div><p>Build fundamental movement, confidence, and a love for the game.</p></div>
        <div class="stage"><h4 class="anton">Develop</h4><div class="age">Ages 12–14</div><p>Improve skills, build strength and speed, and learn to compete.</p></div>
        <div class="stage"><h4 class="anton">Perform</h4><div class="age">Ages 15–18</div><p>Maximize performance and prepare for high school &amp; beyond.</p></div>
        <div class="stage"><h4 class="anton">Achieve</h4><div class="age">Beyond 18</div><p>College prep, advanced training, and continued development.</p></div>
      </div>
      <p class="tag">Long-term development.</p>
    </div>
  </section>

  <section class="statline">
    <div class="wrap"><div class="row">
      <span><b>20,000+</b> sq ft</span><span class="dot">·</span>
      <span><b>Year-round</b> programs</span>
    </div></div>
  </section>
</section>

<!-- ================= PROGRAMS ================= -->
<section class="page" id="page-programs">
  <iframe id="pf-programs" class="embed" title="Programs" scrolling="no" style="width:100%;border:0;display:block;min-height:120px" srcdoc="<!doctype html>
<html lang=&quot;en&quot;>
<head>
<meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
<title>Hawaiʻi Sports Nexus — Programs</title>
<link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;>
<link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin>
<link href=&quot;https://fonts.googleapis.com/css2?family=Anton&amp;family=Archivo:wght@400;500;600;700;800&amp;family=Space+Mono:wght@400;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;>
<style>
  :root{
    --ink:#16233F; --ink-2:#0E1830; --paper:#F7F5EF; --mist:#E7EBF2;
    --line:rgba(22,35,63,.14); --sand:#14A39A; --sand-soft:#BFE9E3;
    --red:#BE3A34; --ink-60:rgba(22,35,63,.62); --ink-40:rgba(22,35,63,.40);
    --steel:#2C4170;--flame:#E17A2D;--flame-soft:#F7DFC8; --maxw:1100px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:'Archivo',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em;line-height:1.06}
  .anton{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em}
  .eyebrow{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60)}
  a{color:inherit;text-decoration:none}
  /* v45 — inline text-link style. Twin of the rule in the outer document; see note there. */
  .ilink{color:var(--sand);text-decoration:underline;text-underline-offset:2px;font-weight:600;cursor:pointer}

  .view{display:none}
  .view.active{display:block}

  .phead{background:var(--ink);color:#fff;padding:56px 0 48px}
  .phead .eyebrow{color:var(--sand)}
  .phead h1{font-size:clamp(38px,6.4vw,72px);margin:10px 0 0}
  .phead .sub{font-size:18px;max-width:62ch;margin:16px 0 0;color:rgba(255,255,255,.8);font-weight:500}

  .band{padding:40px 0}
  .band.mist{background:var(--mist)}
  .sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
  .sec-num{font-family:'Space Mono',monospace;color:var(--sand);font-size:14px}
  .sec-title{font-size:clamp(22px,4vw,30px);text-transform:uppercase}
  .lead{color:var(--ink-60);font-size:15px}

  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
  .chip{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 14px;border-radius:999px;cursor:pointer}
  .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

  .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
  .card .kicker{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);margin-bottom:8px}
  .card h3{font-size:20px;margin-bottom:6px}
  .card p{margin:0;font-size:14.5px;color:var(--ink-60)}

  .dev{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--flame);border:1px solid var(--flame);background:rgba(225,122,45,.10);padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:8px;white-space:nowrap}

  .card.has-detail{position:relative;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
  .card.has-detail:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(22,35,63,.13);border-color:var(--sand)}
  .detail-btn{margin-top:14px;display:inline-flex;align-items:center;gap:7px;
    font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
    background:var(--flame);color:#fff;border:0;border-radius:8px;padding:9px 15px;cursor:pointer;
    opacity:0;transform:translateY(6px);transition:opacity .15s ease, transform .15s ease}
  .card.has-detail:hover .detail-btn,
  .card.has-detail:focus-within .detail-btn{opacity:1;transform:none}
  .detail-btn svg{width:13px;height:13px}
  @media (hover:none){ .detail-btn{opacity:1;transform:none} }

  .back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
    font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
    color:var(--flame);padding:0;margin-bottom:16px}
  .back:hover{color:#fff}
  .back svg{width:14px;height:14px}

  .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .fact{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 12px;border-radius:999px}

  .note{background:var(--sand-soft);border-radius:8px;padding:14px 16px;margin-top:20px;font-size:14px;color:#0B3D38}
  .note b{color:#0B3D38}

  /* clinic booking buttons (from Pricing page) */
  .cbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
  .btn-sm{display:inline-block;text-decoration:none;font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
    background:var(--flame);color:#fff;border:0;border-radius:7px;padding:9px 15px;cursor:pointer;transition:background .15s ease}
  .btn-sm:hover{background:var(--ink-2)}
  .btn-sm.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
  .btn-sm.outline:hover{background:var(--mist)}

  /* clinic photo gallery — horizontal, hover to swap image */
  .gallery{display:flex;flex-direction:row;gap:16px;overflow-x:auto;padding:16px 2px 16px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .gallery::-webkit-scrollbar{height:8px}
  .gallery::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
  .shot{flex:0 0 auto;width:min(82vw,380px);aspect-ratio:16/9;border-radius:14px;overflow:hidden;cursor:pointer;
    border:1px solid var(--line);position:relative;scroll-snap-align:start}
  .layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
    background:repeating-linear-gradient(135deg,#e9edf3,#e9edf3 14px,#e2e7ef 14px,#e2e7ef 28px);
    transition:opacity .45s ease}
  .layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .layer .lbl{position:relative;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--ink-60);padding:14px;line-height:1.5;max-width:90%}
  .layer .lbl span{display:block;color:var(--sand);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}
  .layer.back{background:repeating-linear-gradient(135deg,#dfe8e6,#dfe8e6 14px,#d3e2df 14px,#d3e2df 28px);opacity:0}
  .shot:hover .front{opacity:0}
  .shot:hover .back{opacity:1}
  .hint{position:absolute;right:12px;bottom:12px;z-index:2;font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(22,35,63,.72);padding:4px 9px;border-radius:999px;
    transition:opacity .3s ease}
  .shot:hover .hint{opacity:0}
  .shot.solo{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease}
  .shot.solo:hover{transform:scale(1.07);z-index:5;box-shadow:0 22px 55px rgba(8,14,30,.45);border-color:var(--sand)}
  .shot.solo:hover .front{opacity:1}

  /* about the coach */
  .about{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center}
  .portrait{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
    background:repeating-linear-gradient(135deg,#e9edf3,#e9edf3 14px,#e2e7ef 14px,#e2e7ef 28px);
    border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center}
  .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .portrait .lbl{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--ink-60);padding:14px;line-height:1.5}
  .portrait .lbl span{display:block;color:var(--sand);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}
  .flag{border:1.5px dashed var(--red);background:rgba(190,58,52,.05);border-radius:10px;padding:16px 18px}
  .flag .flag-tag{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--red);font-weight:700;margin-bottom:8px}
  .flag p{margin:0;font-size:15px;color:var(--ink-60);line-height:1.6}
  @media (max-width:640px){ .about{grid-template-columns:1fr;gap:18px} .portrait{max-width:280px} }

  /* v41 — clinic pricing box, ported verbatim from the Pricing iframe so the same box can render
     inside a program detail view. The two iframes are separate documents with separate stylesheets,
     so this is a duplicate by necessity, not by accident. If these rules change on the Pricing
     side, change them here too. */
  .clinic{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;margin-top:14px}
  .clinic .ctag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);font-weight:700}
  .clinic h3{font-size:19px;margin:6px 0 2px}
  .clinic .cwhen{font-size:13px;color:var(--ink-60);margin-bottom:12px}
  .crate{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
  .crate:last-of-type{border-bottom:0}
  .crate .cn{color:var(--ink);flex:1 1 auto;min-width:140px}
  .crate .cn small{display:block;color:var(--ink-40);font-size:12px;margin-top:2px}
  .crate .cr{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;margin-left:auto}
  .crate .cp{font-family:'Space Mono',monospace;font-weight:700;white-space:nowrap;text-align:right}
  .crate .cp .non{color:var(--ink-40);font-weight:400}
  .terms{margin-top:16px;font-size:13px;color:var(--ink-60)}
  .terms b{color:var(--ink)}

  /* v41 — neutral status pill for a division that exists but is not in the current block.
     Deliberately NOT .dev: that pill is orange --flame and reads 'in development,' which would
     wrongly suggest College is unbuilt rather than simply out of season. */
  .offseason{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-60);border:1px solid var(--line);background:rgba(22,35,63,.04);padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:8px;white-space:nowrap}

  /* v41 — current-offering box. Mirrors the white card on the Schedule page (white, 4px sand left
     rule). Deliberately NOT called .note: this iframe already has a .note that is a teal
     sand-soft box used in the Divisions section, and overriding it would change that. */
  .offerbox{background:#fff;border:1px solid var(--line);border-left:4px solid var(--sand);border-radius:10px;padding:16px 18px;max-width:70ch}
  .offerbox .olab{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);display:block;margin-bottom:4px}
  .offerbox p{margin:0;color:var(--ink-60);font-size:14px}
  .offerbox b{color:var(--ink)}
  .oslot{font-size:13px;padding:6px 0;border-top:1px solid var(--line);color:var(--ink)}
  .oslot .t{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-60);margin-right:8px}

  /* pending / to-supply banner */
  .flag-banner{border:1.5px dashed var(--red);background:rgba(190,58,52,.05);border-radius:10px;padding:12px 16px;margin-bottom:18px;
    font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--red);line-height:1.5}
  /* compact flag badge for a single card */
  .card-flag{display:block;margin-top:12px;border:1.5px dashed var(--red);background:rgba(190,58,52,.05);border-radius:8px;
    padding:9px 11px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--red);line-height:1.5}
  /* pending button look */
  .btn-sm.pending{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red);border:0}
  .btn-sm.pending:hover{background:rgba(190,58,52,.06)}

  @media (max-width:820px){ .g3{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .g3,.g2{grid-template-columns:1fr} }
</style>
</head>
<body>

<!-- ================= PROGRAMS VIEW ================= -->
<div class=&quot;view active&quot; id=&quot;view-programs&quot;>
  <div class=&quot;phead&quot;>
    <div class=&quot;wrap&quot;>
      <p class=&quot;eyebrow&quot;>Programs</p>
      <h1 class=&quot;anton&quot;>Find your training</h1>
    </div>
  </div>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;chips&quot; id=&quot;chips&quot;>
        <span class=&quot;chip on&quot; data-f=&quot;all&quot;>All</span>
        <span class=&quot;chip&quot; data-f=&quot;basketball&quot;>Basketball</span>
        <span class=&quot;chip&quot; data-f=&quot;baseball&quot;>Baseball</span>
        <span class=&quot;chip&quot; data-f=&quot;speed&quot;>Speed</span>
        <span class=&quot;chip&quot; data-f=&quot;strength&quot;>Strength</span>
      </div>
      <div class=&quot;g3&quot; id=&quot;progGrid&quot;>
        <div class=&quot;card has-detail&quot; data-cat=&quot;basketball&quot; tabindex=&quot;0&quot; onclick=&quot;showView('clinic')&quot;>
          <div class=&quot;kicker&quot;>Basketball</div>
          <h3>Basketball Skills with Derrick Low</h3>
          <p>Ongoing tiered basketball skills with Derrick Low — dates set monthly.</p>
          <button class=&quot;detail-btn&quot; type=&quot;button&quot; onclick=&quot;event.stopPropagation();showView('clinic')&quot;>
            View program details
            <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M5 12h14M13 6l6 6-6 6&quot;/></svg>
          </button>
        </div>
        <div class=&quot;card has-detail&quot; data-cat=&quot;basketball&quot; tabindex=&quot;0&quot; onclick=&quot;showView('shooting')&quot;>
          <div class=&quot;kicker&quot;>Basketball</div>
          <h3>Basketball Shooting</h3>
          <p>Technical shooting mechanics and reps.</p>
          <button class=&quot;detail-btn&quot; type=&quot;button&quot; onclick=&quot;event.stopPropagation();showView('shooting')&quot;>
            View program details
            <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M5 12h14M13 6l6 6-6 6&quot;/></svg>
          </button>
        </div>
        <div class=&quot;card&quot; data-cat=&quot;basketball&quot;>
          <div class=&quot;kicker&quot;>Basketball</div>
          <h3>Basketball Controlled Scrimmage <span class=&quot;dev&quot;>In development</span></h3>
          <p>Supervised 5-on-5 run — coaches on the floor calling it, so players get real game reps in a controlled setting.</p>
        </div>
        <div class=&quot;card has-detail&quot; data-cat=&quot;basketball baseball speed&quot; tabindex=&quot;0&quot; onclick=&quot;showView('allskills')&quot;>
          <div class=&quot;kicker&quot;>All-Skills</div>
          <h3>Speed, Reaction, Basketball and Baseball Clinic</h3>
          <p>Combined session across speed, reaction, basketball, and baseball.</p>
          <button class=&quot;detail-btn&quot; type=&quot;button&quot; onclick=&quot;event.stopPropagation();showView('allskills')&quot;>
            View program details
            <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M5 12h14M13 6l6 6-6 6&quot;/></svg>
          </button>
        </div>
        <div class=&quot;card has-detail&quot; data-cat=&quot;baseball&quot; tabindex=&quot;0&quot; onclick=&quot;showView('hitting')&quot;>
          <div class=&quot;kicker&quot;>Baseball</div>
          <h3>Baseball Hitting</h3>
          <p>Cage-based hitting development, all ages.</p>
          <button class=&quot;detail-btn&quot; type=&quot;button&quot; onclick=&quot;event.stopPropagation();showView('hitting')&quot;>
            View program details
            <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M5 12h14M13 6l6 6-6 6&quot;/></svg>
          </button>
        </div>
        <div class=&quot;card has-detail&quot; data-cat=&quot;baseball&quot; tabindex=&quot;0&quot; onclick=&quot;showView('pitching')&quot;>
          <div class=&quot;kicker&quot;>Baseball</div>
          <h3>Baseball Pitching</h3>
          <p>Mechanics and arm care by level.</p>
          <button class=&quot;detail-btn&quot; type=&quot;button&quot; onclick=&quot;event.stopPropagation();showView('pitching')&quot;>
            View program details
            <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M5 12h14M13 6l6 6-6 6&quot;/></svg>
          </button>
        </div>
        <div class=&quot;card has-detail&quot; data-cat=&quot;baseball&quot; tabindex=&quot;0&quot; onclick=&quot;showView('indoor-league')&quot;>
          <div class=&quot;kicker&quot;>Baseball</div>
          <h3>Indoor League</h3>
          <p>Friday-night indoor game play.</p>
          <button class=&quot;detail-btn&quot; type=&quot;button&quot; onclick=&quot;event.stopPropagation();showView('indoor-league')&quot;>
            View program details
            <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M5 12h14M13 6l6 6-6 6&quot;/></svg>
          </button>
        </div>
        <div class=&quot;card&quot; data-cat=&quot;speed&quot;>
          <div class=&quot;kicker&quot;>Speed</div>
          <h3>Speed &amp;amp; Agility <span class=&quot;dev&quot;>In development</span></h3>
          <p>Footwork, acceleration, and change of direction for every sport.</p>
        </div>
        <div class=&quot;card has-detail&quot; data-cat=&quot;strength&quot; tabindex=&quot;0&quot; onclick=&quot;showView('powerbuilding')&quot;>
          <div class=&quot;kicker&quot;>Strength</div>
          <h3>Power Building</h3>
          <p>Age-appropriate strength and power training.</p>
          <button class=&quot;detail-btn&quot; type=&quot;button&quot; onclick=&quot;event.stopPropagation();showView('powerbuilding')&quot;>
            View program details
            <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M5 12h14M13 6l6 6-6 6&quot;/></svg>
          </button>
        </div>
      </div>
    </div>
  </section>
</div>

<!-- ================= DERRICK LOW CLINIC VIEW ================= -->
<div class=&quot;view&quot; id=&quot;view-clinic&quot;>
  <div class=&quot;phead&quot;>
    <div class=&quot;wrap&quot;>
      <button class=&quot;back&quot; type=&quot;button&quot; onclick=&quot;showView('programs')&quot;>
        <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M19 12H5M11 6l-6 6 6 6&quot;/></svg>
        All programs
      </button>
      <p class=&quot;eyebrow&quot;>Basketball · Ongoing Program</p>
      <h1 class=&quot;anton&quot;>Basketball Skills<br>with Derrick Low</h1>
      <p class=&quot;sub&quot;>Training and clinics offered throughout the year — opportunities for athletes from Intermediate through College to put in the work and learn directly from Derrick.</p>
      <div class=&quot;facts&quot;>
        <!-- v41: 'Dates set monthly' and '4 Divisions' removed per Rob — the first contradicted the
             fixed Aug 25 – Sep 15 Tue/Thu schedule in the Current offering band below, and the
             second contradicted that band naming three groups in two time slots. -->
        <span class=&quot;fact&quot;>All year round</span>
        <span class=&quot;fact&quot;>Ages 11–18+</span>
      </div>
    </div>
  </div>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>About Derrick Low</h2></div>
      <div class=&quot;about&quot;>
        <!-- ===== COACH PHOTO =====
             Replace the <div class=&quot;lbl&quot;>...</div> below with an image:
                 <div class=&quot;portrait&quot;><img src=&quot;photos/derrick-low.jpg&quot; alt=&quot;Derrick Low&quot;></div>
             Recommended: a portrait shot, roughly 800×1000px. -->
        <div class=&quot;portrait&quot;>
          <img src=&quot;photos/derrick-low.jpg&quot; alt=&quot;Derrick Low&quot;>
        </div>
        <!-- ===== FLAG: BIO SNIPPET =====
             Replace the placeholder text below with the bio you want to publish about Derrick Low
             (background, playing/coaching career, what athletes get from his clinic, etc.). -->
        <div class=&quot;bio&quot;>
          <p style=&quot;margin:0 0 12px;font-size:15px;color:var(--ink-60);line-height:1.65&quot;>Derrick Low is a Honolulu native, ʻIolani School standout, and Washington State University star — a two-time All-Pac-10 guard and one of the program's all-time leaders in scoring and three-point shooting. A former professional basketball player, he spent nearly a decade competing in Australia and across Europe.</p>
          <p style=&quot;margin:0;font-size:15px;color:var(--ink-60);line-height:1.65&quot;>Now back home, Derrick is giving back to the community that shaped him — bringing his experience to the next generation of Hawaiʻi players through his partnership with Hawaiʻi Sports Nexus.</p>
        </div>
      </div>
    </div>
  </section>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Current offering</h2></div>
      <!-- v41: mirrors the white box on the Schedule page under 'Basketball with Derrick Low'.
           KEEP IN SYNC — the dates, days, time bands and rates appear in both places. -->
      <div class=&quot;offerbox&quot;>
        <span class=&quot;olab&quot;>Basketball Skills with Derrick Low</span>
        <p><b>August 25 – September 15, 2026</b> · Sessions on <b>Tuesdays and Thursdays</b>.</p>
        <div class=&quot;oslot&quot; style=&quot;margin-top:10px&quot;><span class=&quot;t&quot;>4:00 – 5:15 PM</span>Intermediate &amp;amp; JV</div>
        <div class=&quot;oslot&quot;><span class=&quot;t&quot;>5:15 – 6:30 PM</span>Varsity</div>
        <p style=&quot;margin-top:10px&quot;>College is not part of this block — it runs at other times in the year.</p>
        <a class=&quot;btn-sm&quot; style=&quot;margin-top:12px&quot; href=&quot;https://clients.mindbodyonline.com/classic/ws?studioid=5745470&amp;amp;stype=-7&amp;amp;sTG=68&amp;amp;sVT=145&amp;amp;sView=week&amp;amp;sLoc=0&quot; data-program=&quot;derrick-skills&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;>Sign up</a>
      </div>

      <!-- v53: second offering added per Rob. Dates were NOT supplied for this one, so no date
           range is stated - only the day and time band. The shared rates line below now covers
           both boxes; it used to sit inside the first box and was moved out rather than
           duplicated. -->
      <div class=&quot;offerbox&quot; style=&quot;margin-top:14px&quot;>
        <span class=&quot;olab&quot;>Varsity Pop-up Clinic with Derrick Low</span>
        <p><b>Starting August 30, 2026</b> · Sessions on <b>Sundays</b>.</p>
        <div class=&quot;oslot&quot; style=&quot;margin-top:10px&quot;><span class=&quot;t&quot;>10:30 AM – 12:30 PM</span>Varsity</div>
        <a class=&quot;btn-sm&quot; style=&quot;margin-top:12px&quot; href=&quot;https://clients.mindbodyonline.com/classic/ws?studioid=5745470&amp;amp;stype=-108&amp;amp;sTG=66&amp;amp;sVT=141&amp;amp;sView=day&amp;amp;sLoc=0&quot; data-program=&quot;varsity-popup&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;>Sign up</a>
      </div>

      <p style=&quot;margin-top:12px;font-size:14px;color:var(--ink-60)&quot;>Sign up in our app. For current rates, <a class=&quot;ilink&quot; href=&quot;#&quot; onclick=&quot;parent.go('contact');return false&quot;>contact us</a> or check the schedule in the app.</p>
    </div>
  </section>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Divisions</h2></div>
      <!-- v41: the 'Days &amp;amp; times set monthly' kicker was removed from all four cards per Rob —
           the Current offering band directly above now carries the actual days and time bands. -->
      <div class=&quot;g2&quot;>
        <div class=&quot;card&quot;><h3>Intermediate</h3><p>Ages 11–13</p></div>
        <div class=&quot;card&quot;><h3>JV</h3><p>Ages 14–15</p></div>
        <div class=&quot;card&quot;><h3>Varsity</h3><p>Ages 16–18</p></div>
        <div class=&quot;card&quot;><h3>College</h3><p>Ages 18+</p></div>
      </div>
      <div class=&quot;note&quot;>Age ranges are guidelines — players may be moved up or down a division at the coaches' discretion. <b>College runs only in certain blocks and is not part of the current one</b> — Intermediate, JV, and Varsity are the three divisions training right now. Check the Schedule page or the app for the next College block.</div>
    </div>
  </section>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Clinic gallery</h2></div>
      <p class=&quot;lead&quot; style=&quot;margin-bottom:18px&quot;>Scroll across for moments from Derrick's sessions on the court.</p>
      <!-- ===== CLINIC PHOTO GALLERY (vertical · hover to swap) =====
           Each photo has TWO layers: .front (shown by default) and .back (shown on hover).
           To add real photos, replace the <div class=&quot;lbl&quot;>...</div> inside each layer with an <img>:
               <div class=&quot;layer front&quot;><img src=&quot;photos/photo1a.jpg&quot; alt=&quot;...&quot;></div>
               <div class=&quot;layer back&quot;><img src=&quot;photos/photo1b.jpg&quot; alt=&quot;...&quot;></div>
           Recommended: landscape images, roughly 1600×900px. -->
      <div class=&quot;gallery&quot;>
        <div class=&quot;shot solo&quot; style=&quot;aspect-ratio:3/4;width:min(72vw,300px)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/clinic-1.jpg&quot; alt=&quot;Derrick Low basketball clinic at Hawaiʻi Sports Nexus&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;aspect-ratio:3/4;width:min(72vw,300px)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/clinic-2.jpg&quot; alt=&quot;Players running drills at the Derrick Low clinic&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;aspect-ratio:3/4;width:min(72vw,300px)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/clinic-3.jpg&quot; alt=&quot;Skills work during the Derrick Low basketball clinic&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;aspect-ratio:3/4;width:min(72vw,300px)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/clinic-4.jpg&quot; alt=&quot;Court action at the Derrick Low clinic, Hawaiʻi Sports Nexus&quot;></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== v54: the entire PRICING band was REMOVED from this view per Rob. It held the section
           heading, the .clinic box (tag, title, and the contact / Schedule-page rates pointer),
           and the account-and-waiver note. This comment is now the ONLY record of two things that
           were inside it, both still outstanding:

           1. THE PURCHASE-LINK TO-DO - add the 2026-27 MindBody purchase links for in-season
              Derrick Low sessions. Previously flagged here and on the Pricing page; the Pricing
              page copy went in v46 (27), and this was the last one.

           2. RETIRED SUMMER 2026 RATES (reference only, never rendered):
                3-Day   $150 member / $225 non-member   prodId 100277 / 100278
                2-Day   $100 member / $150 non-member   prodId 100279 / 100280
                Drop-In  $60 member /  $85 non-member   prodId 100282 / 100283
                URL form: https://clients.mindbodyonline.com/classic/ws?studioid=5745470&amp;stype=41&amp;sTG=66&amp;prodId=...
              Priced per clinic week (Jun 16-20, 2026); they do not apply to the in-season format.

           THE ACCOUNT-AND-WAIVER LINE WENT WITH IT and is NOT stated anywhere else in this view.
           It read: All participants must create an account, complete their profile, and sign the
           waiver in the HiSN app before attending. The other seven program views still carry their
           own copy of it. See the v54 changelog entry. ===== -->
</div>

<!-- ================= SPEED, REACTION, BASKETBALL AND BASEBALL CLINIC (ALL-SKILLS) VIEW ================= -->
<div class=&quot;view&quot; id=&quot;view-allskills&quot;>
  <div class=&quot;phead&quot;>
    <div class=&quot;wrap&quot;>
      <button class=&quot;back&quot; type=&quot;button&quot; onclick=&quot;showView('programs')&quot;>
        <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M19 12H5M11 6l-6 6 6 6&quot;/></svg>
        All programs
      </button>
      <p class=&quot;eyebrow&quot;>Multi-Sport · Weekly Session</p>
      <h1 class=&quot;anton&quot;>Speed, Reaction,<br>Basketball and Baseball Clinic</h1>
      <p class=&quot;sub&quot;>A combined Sunday session across speed, reaction, basketball, and baseball — one block that works the whole athlete.</p>
      <div class=&quot;facts&quot;>
        <span class=&quot;fact&quot;>Sundays</span>
        <span class=&quot;fact&quot;>8:30 AM</span>
        <span class=&quot;fact&quot;>Speed · Reaction · Basketball · Baseball</span>
      </div>
    </div>
  </div>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Session gallery</h2></div>
      <p class=&quot;lead&quot; style=&quot;margin-bottom:18px&quot;>Scroll across for moments from All-Skills Sunday.</p>
      <!-- ===== ALL-SKILLS PHOTO GALLERY (horizontal · hover to swap) =====
           Each photo has TWO layers: .front (default) and .back (on hover).
           To add real photos, replace the <div class=&quot;lbl&quot;>...</div> inside each layer with an <img>:
               <div class=&quot;layer front&quot;><img src=&quot;photos/allskills1a.jpg&quot; alt=&quot;...&quot;></div>
               <div class=&quot;layer back&quot;><img src=&quot;photos/allskills1b.jpg&quot; alt=&quot;...&quot;></div>
           Recommended: landscape images, roughly 1600×900px. -->
      <div class=&quot;gallery&quot;>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/allskills-1.jpg&quot; alt=&quot;Athletes training during All-Skills Sunday at Hawaiʻi Sports Nexus&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/allskills-2.jpg&quot; alt=&quot;Group session during All-Skills Sunday&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 2 / 3)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/allskills-3.jpg&quot; alt=&quot;Skills work during All-Skills Sunday&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 3 / 4)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/allskills-4.jpg&quot; alt=&quot;Athlete training at All-Skills Sunday&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 2 / 3)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/allskills-5.jpg&quot; alt=&quot;All-Skills Sunday session at Hawaiʻi Sports Nexus&quot;></div>
        </div>
      </div>
    </div>
  </section>

  <section class=&quot;band mist&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Pricing</h2></div>
      <div class=&quot;g3&quot;>
        <!-- ===== ALL-SKILLS SUNDAY — single option ===== -->
        <div class=&quot;card&quot;>
          <div class=&quot;kicker&quot;>Membership</div>
          <h3>Speed, Reaction, Basketball and Baseball Clinic</h3>
          <p>Tiered member pricing — see the Pricing tab for membership rates.</p>
          <span class=&quot;cbtns&quot;>
            <a class=&quot;btn-sm&quot; href=&quot;https://clients.mindbodyonline.com/classic/ws?studioid=5745470&amp;amp;stype=-7&amp;amp;sTG=30&amp;amp;sVT=40&amp;amp;sView=week&amp;amp;sLoc=0&quot; data-clinic=&quot;allskills-sunday&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;>Book / Register</a>
          </span>
        </div>
      </div>
      <div class=&quot;note&quot;>All participants must create an account, complete their profile, and sign the waiver in the HiSN app before attending.</div>
    </div>
  </section>
</div>

<!-- ================= POWER BUILDING VIEW ================= -->
<div class=&quot;view&quot; id=&quot;view-powerbuilding&quot;>
  <div class=&quot;phead&quot;>
    <div class=&quot;wrap&quot;>
      <button class=&quot;back&quot; type=&quot;button&quot; onclick=&quot;showView('programs')&quot;>
        <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M19 12H5M11 6l-6 6 6 6&quot;/></svg>
        All programs
      </button>
      <p class=&quot;eyebrow&quot;>Strength · Program</p>
      <h1 class=&quot;anton&quot;>Power<br>Building</h1>
      <p class=&quot;sub&quot;>Age-appropriate strength and power training that builds a durable, explosive athlete — usable on its own or alongside any sport program.</p>
      <div class=&quot;facts&quot;>
        <span class=&quot;fact&quot;>All Levels</span>
        <span class=&quot;fact&quot;>Strength · Power</span>
        <span class=&quot;fact&quot;>Age-Appropriate</span>
      </div>
    </div>
  </div>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Power Building gallery</h2></div>
      <p class=&quot;lead&quot; style=&quot;margin-bottom:18px&quot;>Scroll across for a look inside our Power-Building floor.</p>
      <!-- ===== POWER BUILDING PHOTO GALLERY (horizontal · hover to swap) =====
           Each photo has TWO layers: .front (default) and .back (on hover).
           To add real photos, replace the <div class=&quot;lbl&quot;>...</div> inside each layer with an <img>:
               <div class=&quot;layer front&quot;><img src=&quot;photos/power1a.jpg&quot; alt=&quot;...&quot;></div>
               <div class=&quot;layer back&quot;><img src=&quot;photos/power1b.jpg&quot; alt=&quot;...&quot;></div>
           Recommended: landscape images, roughly 1600×900px. -->
      <div class=&quot;gallery&quot;>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/powerbuilding-1.jpg&quot; alt=&quot;Power-Building strength floor at Hawaiʻi Sports Nexus&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/powerbuilding-2.jpg&quot; alt=&quot;Dumbbell and bench area in the Power-Building space&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/powerbuilding-3.jpg&quot; alt=&quot;Cable and rack training area for Power-Building&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/powerbuilding-4.jpg&quot; alt=&quot;Competition weight plates in the Power-Building gym&quot;></div>
        </div>
      </div>
    </div>
  </section>

  <section class=&quot;band mist&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Book / Register</h2></div>
      <div class=&quot;g3&quot;>
        <!-- ===== POWER BUILDING — booking ===== -->
        <div class=&quot;card&quot;>
          <div class=&quot;kicker&quot;>Membership</div>
          <h3>Power Building</h3>
          <p>Tiered member pricing — see the Pricing tab for membership rates.</p>
          <!-- ===== POWER BUILDING booking button — goes to the Pricing tab (memberships); Power Building books through memberships only (Rob, v26) ===== -->
          <span class=&quot;cbtns&quot;>
            <a class=&quot;btn-sm&quot; href=&quot;#&quot; data-program=&quot;power-building&quot; onclick=&quot;parent.go('pricing');return false&quot;>Book / Register</a>
          </span>
          <p style=&quot;font-size:12.5px;color:var(--ink-60);margin:10px 0 0&quot;>Power Building is only available to book through memberships — this button takes you to membership pricing.</p>
        </div>
      </div>
      <div class=&quot;note&quot;>All participants must create an account, complete their profile, and sign the waiver in the HiSN app before attending.</div>
    </div>
  </section>
</div>

<!-- ================= SHOOTING SESSIONS VIEW ================= -->
<div class=&quot;view&quot; id=&quot;view-shooting&quot;>
  <div class=&quot;phead&quot;>
    <div class=&quot;wrap&quot;>
      <button class=&quot;back&quot; type=&quot;button&quot; onclick=&quot;showView('programs')&quot;>
        <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M19 12H5M11 6l-6 6 6 6&quot;/></svg>
        All programs
      </button>
      <p class=&quot;eyebrow&quot;>Basketball · Program</p>
      <h1 class=&quot;anton&quot;>Basketball<br>Shooting</h1>
      <p class=&quot;sub&quot;>Technical shooting mechanics and high-rep work to build a repeatable, confident stroke.</p>
      <div class=&quot;facts&quot;>
        <span class=&quot;fact&quot;>Basketball</span>
        <span class=&quot;fact&quot;>Skill Work</span>
        <span class=&quot;fact&quot;>All Levels</span>
      </div>
    </div>
  </div>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Basketball Shooting gallery</h2></div>
      <p class=&quot;lead&quot; style=&quot;margin-bottom:18px&quot;>Scroll across for moments from our shooting sessions.</p>
      <!-- ===== SHOOTING SESSIONS PHOTO GALLERY (horizontal · hover to swap) — PLACEHOLDER =====
           Each photo has TWO layers: .front (default) and .back (on hover).
           Replace the <div class=&quot;lbl&quot;>...</div> inside each layer with an <img>:
               <div class=&quot;layer front&quot;><img src=&quot;photos/shooting1a.jpg&quot; alt=&quot;...&quot;></div>
               <div class=&quot;layer back&quot;><img src=&quot;photos/shooting1b.jpg&quot; alt=&quot;...&quot;></div>
           Recommended: landscape images, roughly 1600×900px. -->
      <div class=&quot;gallery&quot;>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/shooting-1.jpg&quot; alt=&quot;Team huddle during a basketball shooting session at Hawaiʻi Sports Nexus&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 2 / 3)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/shooting-2.jpg&quot; alt=&quot;Player releasing a jump shot during a shooting session&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 2 / 3)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/shooting-3.jpg&quot; alt=&quot;Player finishing at the rim during a shooting session&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(260px,44vw,380px);width:calc(clamp(260px,44vw,380px) * 2 / 3)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/shooting-4.jpg&quot; alt=&quot;Basketball shooting session at Hawaiʻi Sports Nexus&quot;></div>
        </div>
      </div>
    </div>
  </section>

  <section class=&quot;band mist&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Book / Register</h2></div>
      <div class=&quot;g3&quot;>
        <div class=&quot;card&quot;>
          <div class=&quot;kicker&quot;>Membership</div>
          <h3>Basketball Shooting</h3>
          <p>Tiered member pricing — see the Pricing tab for membership rates.</p>
          <!-- ===== SHOOTING — not sold online (Rob, v31); no booking button ===== -->
          <span class=&quot;cbtns&quot;>
            <span class=&quot;dev&quot; style=&quot;margin-left:0&quot;>Not sold online</span>
          </span>
        </div>
      </div>
      <div class=&quot;note&quot;>All participants must create an account, complete their profile, and sign the waiver in the HiSN app before attending.</div>
    </div>
  </section>
</div>

<!-- ================= HITTING VIEW ================= -->
<div class=&quot;view&quot; id=&quot;view-hitting&quot;>
  <div class=&quot;phead&quot;>
    <div class=&quot;wrap&quot;>
      <button class=&quot;back&quot; type=&quot;button&quot; onclick=&quot;showView('programs')&quot;>
        <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M19 12H5M11 6l-6 6 6 6&quot;/></svg>
        All programs
      </button>
      <p class=&quot;eyebrow&quot;>Baseball · Program</p>
      <h1 class=&quot;anton&quot;>Baseball Hitting</h1>
      <p class=&quot;sub&quot;>Cage-based hitting development for all ages — mechanics, timing, and approach. Every swing in our HitTrax cage is measured, not estimated: exit velocity, launch angle, and where the ball would have landed in a real park, tracked across sessions instead of going on how a swing looked.</p>
      <div class=&quot;facts&quot;>
        <span class=&quot;fact&quot;>Baseball</span>
        <span class=&quot;fact&quot;>All Ages</span>
        <span class=&quot;fact&quot;>Cage Work</span>
        <!-- v41: HitTrax added per Rob. Brand is capitalised HitTrax. -->
        <span class=&quot;fact&quot;>HitTrax Technology</span>
      </div>
    </div>
  </div>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Baseball Hitting gallery</h2></div>
      <p class=&quot;lead&quot; style=&quot;margin-bottom:18px&quot;>Scroll across for a look inside our indoor hitting cages.</p>
      <!-- ===== HITTING PHOTO GALLERY (horizontal · hover to swap) — PLACEHOLDER =====
           Each photo has TWO layers: .front (default) and .back (on hover).
           Replace the <div class=&quot;lbl&quot;>...</div> inside each layer with an <img>:
               <div class=&quot;layer front&quot;><img src=&quot;photos/hitting/hitting-card-a.jpg&quot; alt=&quot;...&quot;></div>
               <div class=&quot;layer back&quot;><img src=&quot;photos/hitting/hitting-card-b.jpg&quot; alt=&quot;...&quot;></div>
           Recommended: landscape images, roughly 1600×900px. -->
      <div class=&quot;gallery&quot;>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/hitting/hitting-4.jpg&quot; alt=&quot;Hitter finishing a swing in the HitTrax cage, the simulated ballpark readout on the screen behind him&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/hitting/hitting-5.jpg&quot; alt=&quot;Hitter loading to swing on front toss from a coach behind an L-screen, with other cages in use&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/hitting/hitting-1.jpg&quot; alt=&quot;Indoor batting cages at Hawaiʻi Sports Nexus&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/hitting/hitting-2.jpg&quot; alt=&quot;Batting cage lanes and pitching machine setup&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/hitting/hitting-3.jpg&quot; alt=&quot;Indoor baseball training cages at Hawaiʻi Sports Nexus&quot;></div>
        </div>
      </div>
    </div>
  </section>

  <section class=&quot;band mist&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Book / Register</h2></div>
      <div class=&quot;g3&quot;>
        <div class=&quot;card&quot;>
          <div class=&quot;kicker&quot;>Membership</div>
          <h3>Baseball Hitting</h3>
          <p>Tiered member pricing — see the Pricing tab for membership rates.</p>
          <!-- ===== HITTING — not sold online (Rob, v22); no booking button ===== -->
          <span class=&quot;cbtns&quot;>
            <span class=&quot;dev&quot; style=&quot;margin-left:0&quot;>Not sold online</span>
          </span>
        </div>
      </div>
      <div class=&quot;note&quot;>All participants must create an account, complete their profile, and sign the waiver in the HiSN app before attending.</div>
    </div>
  </section>
</div>

<!-- ================= PITCHING VIEW ================= -->
<div class=&quot;view&quot; id=&quot;view-pitching&quot;>
  <div class=&quot;phead&quot;>
    <div class=&quot;wrap&quot;>
      <button class=&quot;back&quot; type=&quot;button&quot; onclick=&quot;showView('programs')&quot;>
        <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M19 12H5M11 6l-6 6 6 6&quot;/></svg>
        All programs
      </button>
      <p class=&quot;eyebrow&quot;>Baseball · Program</p>
      <h1 class=&quot;anton&quot;>Baseball Pitching</h1>
      <p class=&quot;sub&quot;>Mechanics and arm care built by level, from foundations to advanced command.</p>
      <div class=&quot;facts&quot;>
        <span class=&quot;fact&quot;>Baseball</span>
        <span class=&quot;fact&quot;>By Level</span>
        <span class=&quot;fact&quot;>Arm Care</span>
      </div>
    </div>
  </div>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Baseball Pitching gallery</h2></div>
      <p class=&quot;lead&quot; style=&quot;margin-bottom:18px&quot;>Scroll across for a look inside our indoor pitching space.</p>
      <!-- ===== PITCHING PHOTO GALLERY (horizontal · hover to swap) — PLACEHOLDER =====
           Each photo has TWO layers: .front (default) and .back (on hover).
           Replace the <div class=&quot;lbl&quot;>...</div> inside each layer with an <img>:
               <div class=&quot;layer front&quot;><img src=&quot;photos/pitching/pitching-card-a.jpg&quot; alt=&quot;...&quot;></div>
               <div class=&quot;layer back&quot;><img src=&quot;photos/pitching/pitching-card-b.jpg&quot; alt=&quot;...&quot;></div>
           Recommended: landscape images, roughly 1600×900px. -->
      <div class=&quot;gallery&quot;>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/pitching/pitching-1.jpg&quot; alt=&quot;Indoor batting cages at Hawaiʻi Sports Nexus&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/pitching/pitching-2.jpg&quot; alt=&quot;Batting cage lanes and pitching machine setup&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/pitching/pitching-3.jpg&quot; alt=&quot;Indoor baseball training cages at Hawaiʻi Sports Nexus&quot;></div>
        </div>
      </div>
    </div>
  </section>

  <section class=&quot;band mist&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Book / Register</h2></div>
      <div class=&quot;g3&quot;>
        <div class=&quot;card&quot;>
          <div class=&quot;kicker&quot;>Membership</div>
          <h3>Baseball Pitching</h3>
          <p>Tiered member pricing — see the Pricing tab for membership rates.</p>
          <!-- ===== PITCHING — not sold online (Rob, v22); no booking button ===== -->
          <span class=&quot;cbtns&quot;>
            <span class=&quot;dev&quot; style=&quot;margin-left:0&quot;>Not sold online</span>
          </span>
        </div>
      </div>
      <div class=&quot;note&quot;>All participants must create an account, complete their profile, and sign the waiver in the HiSN app before attending.</div>
    </div>
  </section>
</div>

<!-- ================= INDOOR LEAGUE VIEW ================= -->
<div class=&quot;view&quot; id=&quot;view-indoor-league&quot;>
  <div class=&quot;phead&quot;>
    <div class=&quot;wrap&quot;>
      <button class=&quot;back&quot; type=&quot;button&quot; onclick=&quot;showView('programs')&quot;>
        <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M19 12H5M11 6l-6 6 6 6&quot;/></svg>
        All programs
      </button>
      <p class=&quot;eyebrow&quot;>Baseball · Program</p>
      <h1 class=&quot;anton&quot;>Indoor<br>League</h1>
      <p class=&quot;sub&quot;>Friday-night indoor game play — competitive reps in a controlled environment. HitTrax turns the cage into a simulated ballpark, so indoor league nights run as real at-bats with live results — batting average, slugging, and hit distance tracked across the season.</p>
      <div class=&quot;facts&quot;>
        <span class=&quot;fact&quot;>Baseball</span>
        <span class=&quot;fact&quot;>Friday Nights</span>
        <span class=&quot;fact&quot;>Game Play</span>
      </div>
    </div>
  </div>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Indoor League gallery</h2></div>
      <p class=&quot;lead&quot; style=&quot;margin-bottom:18px&quot;>Scroll across for a look inside our indoor baseball facility.</p>
      <!-- ===== INDOOR LEAGUE PHOTO GALLERY (horizontal · hover to swap) — PLACEHOLDER =====
           Each photo has TWO layers: .front (default) and .back (on hover).
           Replace the <div class=&quot;lbl&quot;>...</div> inside each layer with an <img>:
               <div class=&quot;layer front&quot;><img src=&quot;photos/indoor-league/indoor-league-card-a.jpg&quot; alt=&quot;...&quot;></div>
               <div class=&quot;layer back&quot;><img src=&quot;photos/indoor-league/indoor-league-card-b.jpg&quot; alt=&quot;...&quot;></div>
           Recommended: landscape images, roughly 1600×900px. -->
      <div class=&quot;gallery&quot;>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/indoor-league/indoor-league-1.jpg&quot; alt=&quot;Indoor batting cages at Hawaiʻi Sports Nexus&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/indoor-league/indoor-league-2.jpg&quot; alt=&quot;Batting cage lanes and pitching machine setup&quot;></div>
        </div>
        <div class=&quot;shot solo&quot; style=&quot;height:clamp(240px,42vw,340px);width:calc(clamp(240px,42vw,340px) * 3 / 2)&quot;>
          <div class=&quot;layer front&quot;><img src=&quot;photos/indoor-league/indoor-league-3.jpg&quot; alt=&quot;Indoor baseball training cages at Hawaiʻi Sports Nexus&quot;></div>
        </div>
      </div>
    </div>
  </section>

  <section class=&quot;band mist&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Book / Register</h2></div>
      <div class=&quot;g3&quot;>
        <div class=&quot;card&quot;>
          <div class=&quot;kicker&quot;>Membership</div>
          <h3>Indoor League</h3>
          <p>Tiered member pricing — see the Pricing tab for membership rates.</p>
          <!-- ===== INDOOR LEAGUE — not sold online (Rob, v22); no booking button ===== -->
          <span class=&quot;cbtns&quot;>
            <span class=&quot;dev&quot; style=&quot;margin-left:0&quot;>Not sold online</span>
          </span>
        </div>
      </div>
      <div class=&quot;note&quot;>All participants must create an account, complete their profile, and sign the waiver in the HiSN app before attending.</div>
    </div>
  </section>
</div>

<!-- ================= Speed &amp;amp; Agility VIEW ================= -->
<div class=&quot;view&quot; id=&quot;view-sparq&quot;>
  <div class=&quot;phead&quot;>
    <div class=&quot;wrap&quot;>
      <button class=&quot;back&quot; type=&quot;button&quot; onclick=&quot;showView('programs')&quot;>
        <svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M19 12H5M11 6l-6 6 6 6&quot;/></svg>
        All programs
      </button>
      <p class=&quot;eyebrow&quot;>Speed · Program</p>
      <h1 class=&quot;anton&quot;>Speed<br>&amp;amp; Agility</h1>
      <p class=&quot;sub&quot;>Court-based footwork, acceleration, deceleration, and change of direction — training athletes to get faster, stop under control, and react to what is in front of them. This is not a lifting class; strength and power work lives in Power Building.</p>
      <div class=&quot;facts&quot;>
        <span class=&quot;fact&quot;>Speed</span>
        <span class=&quot;fact&quot;>Agility</span>
        <span class=&quot;fact&quot;>Change of Direction</span>
        <span class=&quot;fact&quot;>All Sports</span>
      </div>
    </div>
  </div>

  <section class=&quot;band&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Speed &amp;amp; Agility gallery</h2></div>
      <p class=&quot;lead&quot; style=&quot;margin-bottom:18px&quot;>Scroll across and hover a photo to see another moment.</p>
      <!-- ===== Speed &amp;amp; Agility PHOTO GALLERY (horizontal · hover to swap) — PLACEHOLDER =====
           Each photo has TWO layers: .front (default) and .back (on hover).
           Replace the <div class=&quot;lbl&quot;>...</div> inside each layer with an <img>:
               <div class=&quot;layer front&quot;><img src=&quot;photos/sparq1a.jpg&quot; alt=&quot;...&quot;></div>
               <div class=&quot;layer back&quot;><img src=&quot;photos/sparq1b.jpg&quot; alt=&quot;...&quot;></div>
           Recommended: landscape images, roughly 1600×900px. -->
      <div class=&quot;gallery&quot;>
        <div class=&quot;shot&quot;>
          <div class=&quot;layer front&quot;><div class=&quot;lbl&quot;><span>Photo 1 · default</span>Drop image here</div></div>
          <div class=&quot;layer back&quot;><div class=&quot;lbl&quot;><span>Photo 1 · on hover</span>Drop image here</div></div>
          <span class=&quot;hint&quot;>Hover</span>
        </div>
        <div class=&quot;shot&quot;>
          <div class=&quot;layer front&quot;><div class=&quot;lbl&quot;><span>Photo 2 · default</span>Drop image here</div></div>
          <div class=&quot;layer back&quot;><div class=&quot;lbl&quot;><span>Photo 2 · on hover</span>Drop image here</div></div>
          <span class=&quot;hint&quot;>Hover</span>
        </div>
        <div class=&quot;shot&quot;>
          <div class=&quot;layer front&quot;><div class=&quot;lbl&quot;><span>Photo 3 · default</span>Drop image here</div></div>
          <div class=&quot;layer back&quot;><div class=&quot;lbl&quot;><span>Photo 3 · on hover</span>Drop image here</div></div>
          <span class=&quot;hint&quot;>Hover</span>
        </div>
        <div class=&quot;shot&quot;>
          <div class=&quot;layer front&quot;><div class=&quot;lbl&quot;><span>Photo 4 · default</span>Drop image here</div></div>
          <div class=&quot;layer back&quot;><div class=&quot;lbl&quot;><span>Photo 4 · on hover</span>Drop image here</div></div>
          <span class=&quot;hint&quot;>Hover</span>
        </div>
      </div>
    </div>
  </section>

  <section class=&quot;band mist&quot;>
    <div class=&quot;wrap&quot;>
      <div class=&quot;sec-head&quot;><span class=&quot;sec-num&quot;>·</span><h2 class=&quot;sec-title anton&quot;>Book / Register</h2></div>
      <div class=&quot;g3&quot;>
        <div class=&quot;card&quot;>
          <div class=&quot;kicker&quot;>Membership</div>
          <h3>Speed &amp;amp; Agility</h3>
          <p>Tiered member pricing — see the Pricing tab for membership rates.</p>
          <!-- ===== Speed &amp;amp; Agility booking button — PLACEHOLDER MindBody link; replace with the real purchase URL ===== -->
          <span class=&quot;cbtns&quot;>
            <a class=&quot;btn-sm pending&quot; href=&quot;https://clients.mindbodyonline.com/classic/ws?studioid=5745470&quot; data-program=&quot;sparq&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;>Book / Register</a>
          </span>
          <!-- ===== FLAG: Speed &amp;amp; Agility placeholder ===== -->
          <span class=&quot;card-flag&quot;>⚑ To do — add photos and the real MindBody purchase link for Speed &amp;amp; Agility.</span>
        </div>
      </div>
      <div class=&quot;note&quot;>All participants must create an account, complete their profile, and sign the waiver in the HiSN app before attending.</div>
    </div>
  </section>
</div>

<script>
  function showView(id){
    document.querySelectorAll('.view').forEach(function(v){v.classList.remove('active');});
    var el=document.getElementById('view-'+id);
    if(el) el.classList.add('active');
    /* v41 BUGFIX C — Safari-hardened. Three things were wrong here.
       1. window.scrollTo({top:0}) with an options object THROWS a TypeError in Safari before
          15.4. Because it sat ABOVE the parent-scroll call, the throw killed everything after
          it. Wrapped, with a positional-argument fallback.
       2. This iframe has scrolling=&quot;no&quot; and is height-sized to its content, so it has no inner
          scrollbar and scrolling it moves nothing. The PARENT is what scrolls.
       3. postMessage between a file:// parent and a srcdoc child is unreliable in Safari, which
          gives local documents opaque origins. So the parent scroll is now attempted THREE ways,
          each guarded: direct frameElement.scrollIntoView (synchronous, no messaging), then
          postMessage, then a delayed postMessage after the height lands. Any one succeeding is
          enough; all three failing leaves the view swapped but unscrolled, which is the old
          behaviour rather than a new break. */
    try{ window.scrollTo({top:0,behavior:'auto'}); }catch(e){ try{ window.scrollTo(0,0); }catch(e2){} }
    function askParentToScroll(){
      try{
        var fe = window.frameElement;
        if(fe && fe.scrollIntoView){ fe.scrollIntoView({block:'start'}); }
      }catch(e){}
      try{ parent.postMessage({hisnScrollTo:'pf-programs'}, '*'); }catch(e){}
    }
    askParentToScroll();
    setTimeout(askParentToScroll, 140);
  }

  document.querySelectorAll('#chips .chip').forEach(function(c){
    c.addEventListener('click', function(){
      var f=this.getAttribute('data-f');
      document.querySelectorAll('#chips .chip').forEach(function(x){x.classList.remove('on');});
      this.classList.add('on');
      document.querySelectorAll('#progGrid .card').forEach(function(card){
        var s=card.getAttribute('data-cat')||'';
        card.style.display=(f==='all'||s.indexOf(f)>-1)?'':'none';
      });
    });
  });
</script>

<script>
(function(){
  var FID='pf-programs';
  function postH(){
    try{
      var h=Math.max(document.body.scrollHeight, document.body.offsetHeight);
      parent.postMessage({hisnH:h, fid:FID}, '*');
    }catch(e){}
  }
  window.addEventListener('load', function(){ postH(); setTimeout(postH,250); setTimeout(postH,800); });
  if(window.ResizeObserver){ try{ new ResizeObserver(postH).observe(document.documentElement); }catch(e){} }
  document.addEventListener('click', function(){ setTimeout(postH,60); });
  window.addEventListener('message', function(e){ if(e.data==='hisn-measure'){ postH(); } });
})();
</script>
</body>
</html>
"></iframe>
</section>

<!-- ================= SCHEDULE ================= -->
<section class="page" id="page-schedule">
  <div class="phead"><div class="wrap"><p class="eyebrow">2026–27 Season</p><h1 class="anton">Schedule</h1>
    <p class="sub">Weekly training plus clinics around every school break.</p></div></div>

  <section class="band">
    <div class="wrap">
      <div class="sec-head"><span class="sec-num">·</span><h2 class="sec-title anton">Weekly schedule</h2></div>
      <!-- Live weekly schedule (Mindbody) -->
      <!-- v48: overflow-x added. The Mindbody Schedules widget renders a wide table; with no
           scroll container it pushed past the viewport on narrow screens instead of scrolling.
           Padding also drops on small screens - 22px each side cost 44px of a ~375px display. -->
      <div class="mb-schedule" style="margin-top:8px;min-height:140px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch">
        <!-- Mindbody Schedules widget begin -->
        <div class="mindbody-widget" data-widget-type="Schedules" data-widget-id="e9292811dc5"></div>
        <script async src="https://brandedweb.mindbodyonline.com/embed/widget.js"></script>
        <!-- Mindbody Schedules widget end -->
      </div>
    </div>
  </section>

  <!-- ===== v48: the "Basketball with Derrick Low" band that sat here was REMOVED per Rob.
           It held the Aug 25 - Sep 15 2026 dates, the two time bands (4:00-5:15 Intermediate & JV,
           5:15-6:30 Varsity), the four-divisions paragraph, the account/waiver sentence, and two
           buttons - Program details (data-program=clinic) and How to register (data-go=join).
           None of that content is lost: the dates and time bands still live in the Current
           offering box in the Derrick Low program view, and the divisions and waiver text are in
           that same view. The Schedule page now runs Weekly schedule then Clinics. ===== -->

  <section class="band mist">
    <div class="wrap">
      <div class="sec-head"><span class="sec-num">·</span><h2 class="sec-title anton">Clinics</h2></div>
      <div class="camp"><div><div class="dt">Oct 5–9, 2026</div><span class="tg">Fall break</span></div><div><h3>Fall Break Day Clinic <span class="dev">In development</span></h3><p>A full clinic week — public and private schools out together.</p></div></div>
      <div class="camp"><div><div class="dt">Nov 26–27, 2026</div><span class="tg">Holiday</span></div><div><h3>Thanksgiving Clinic <span class="dev">In development</span></h3><p>A short, optional skills clinic for families in town.</p></div></div>
      <div class="camp"><div><div class="dt">Dec 19 → Jan 4</div><span class="tg">Winter break</span></div><div><h3>Winter Break Clinics <span class="dev">In development</span></h3><p>Our biggest holiday window — a two-week block or week by week.</p></div></div>
      <div class="camp"><div><div class="dt">Mar 15–26, 2027</div><span class="tg">Spring break</span></div><div><h3>Spring Break Clinics <span class="dev">In development</span></h3><p>Two clinic weeks; week 1 is the prime all-schools-out week.</p></div></div>
    </div>
  </section>
</section>

<!-- ================= FACILITY ================= -->
<section class="page" id="page-facility">
  <div class="phead"><div class="wrap"><p class="eyebrow">The Space</p><h1 class="anton">One roof.<br>Every kind of work.</h1>
    <p class="sub">20,000+ square feet purpose-built for athlete development — a full-size court, strength center, and batting cages today, with turf, recovery, and classrooms in development.</p></div></div>

  <section class="band">
    <div class="wrap">
      <div class="gallery">
        <div class="ph wide photo-real bg-court" role="img" aria-label="Full-size basketball court"></div>
        <div class="ph photo-real bg-fitness" role="img" aria-label="Fitness room"></div>
        <div class="ph photo-real bg-strength" role="img" aria-label="Strength &amp; performance center"></div>
        <div class="ph photo-real bg-cages" role="img" aria-label="Batting cages"></div>
        <div class="ph dark"><span class="lbl"><span class="tag">In development</span>Indoor turf field</span></div>
        <div class="ph dark"><span class="lbl"><span class="tag">In development</span>Recovery / wellness area</span></div>
        <div class="ph dark"><span class="lbl"><span class="tag">In development</span>Classroom / film room</span></div>
      </div>
    </div>
  </section>

  <section class="band mist">
    <div class="wrap">
      <div class="sec-head"><span class="sec-num">·</span><h2 class="sec-title anton">What's inside</h2></div>
      <ul class="checks" style="margin-top:0">
        <li>Full-size court</li>
        <li>Performance &amp; strength center</li>
        <li>Batting cages</li>
        <li>Indoor turf field <span class="dev">In development</span></li>
        <li>Recovery &amp; wellness <span class="dev">In development</span></li>
        <li>Classrooms &amp; film room <span class="dev">In development</span></li>
        <li>Space for multiple programs at once</li>
      </ul>
      <p class="lead" style="margin-top:22px">Running a team, club, or school program? The space is available for group training and events.</p>
    </div>
  </section>
</section>

<!-- ================= PRICING ================= -->
<section class="page" id="page-pricing">
  <iframe id="pf-pricing" class="embed" title="Pricing &amp; Memberships" scrolling="no" style="width:100%;border:0;display:block;min-height:120px" srcdoc="<!doctype html>
<html lang=&quot;en&quot;>
<head>
<meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
<title>Hawaiʻi Sports Nexus — Pricing &amp; Memberships</title>
<link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;>
<link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin>
<link href=&quot;https://fonts.googleapis.com/css2?family=Anton&amp;family=Archivo:wght@400;500;600;700;800&amp;family=Space+Mono:wght@400;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;>
<style>
  :root{
    --ink:#16233F; --ink-2:#0E1830; --paper:#F7F5EF; --mist:#E7EBF2;
    --line:rgba(22,35,63,.14); --sand:#14A39A; --sand-soft:#BFE9E3;
    --red:#BE3A34; --ink-60:rgba(22,35,63,.62); --ink-40:rgba(22,35,63,.40);
    --steel:#2C4170;--flame:#E17A2D;--flame-soft:#F7DFC8; --maxw:1100px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:'Archivo',system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em;line-height:1.08}
  .anton{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em}
  .mono{font-family:'Space Mono',monospace}
  .eyebrow{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60)}
  a{color:inherit}
  /* v46 — inline text-link style. Third copy of this rule: outer document, Programs iframe,
     and now here. The three are separate documents with no cascade between them. KEEP IN SYNC. */
  .ilink{color:var(--sand);text-decoration:underline;text-underline-offset:2px;font-weight:600;cursor:pointer}

  /* section */
  section.band{padding:44px 0 8px}
  h2.sec-title{font-size:clamp(22px,6vw,30px);text-transform:uppercase}
  .sec-sub{color:var(--ink-60);font-size:14.5px;margin:6px 0 24px}
  .phead{background:var(--ink);color:#fff;padding:56px 0 48px;margin:0 0 4px}
  .phead .eyebrow{color:var(--sand)}
  .phead h1{font-size:clamp(38px,6.4vw,72px);margin:10px 0 0}
  .phead .sub{font-size:18px;max-width:62ch;margin:16px 0 0;color:rgba(255,255,255,.8);font-weight:500}

  /* membership callout */
  .member{background:var(--ink-2);color:#fff;border-radius:8px;padding:26px 22px;margin:30px 0 0}
  .member .kicker{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--sand);font-weight:700;margin-bottom:8px}
  .member h3{font-size:20px;text-transform:uppercase;margin-bottom:8px}
  .member p{margin:0;color:rgba(255,255,255,.82);font-size:14.5px}

  /* pricing &amp; memberships */
  .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
  .tier{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 18px;display:flex;flex-direction:column;transition:border-color .15s ease,box-shadow .15s ease}
  .tier:hover{border-color:var(--sand);box-shadow:0 0 0 1px var(--sand)}
.tier:hover .btn-navy{background:#C0641C;color:#fff}
  .tier .lvl{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);font-weight:700}
  .tier h3{font-size:21px;text-transform:uppercase;margin:6px 0 0}
  .tier .amt{font-family:'Anton',sans-serif;font-weight:400;font-size:40px;line-height:1;margin:12px 0 2px;color:var(--ink)}
  .tier .amt span{font-family:'Archivo',sans-serif;font-size:15px;font-weight:700;color:var(--ink-60)}
  .tier .inc{font-size:13px;color:var(--ink-60);margin-bottom:12px}
  .tier ul{margin:0;padding:0;list-style:none}
  .tier li{position:relative;padding:6px 0 6px 18px;font-size:13.5px;color:var(--ink-60);border-bottom:1px solid var(--line)}
  .tier li:last-child{border-bottom:0}
  .tier li::before{content:&quot;&quot;;position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--sand)}
  .terms{margin-top:16px;font-size:13px;color:var(--ink-60)}
  .terms b{color:var(--ink)}
  .subhead{font-size:clamp(18px,5vw,22px);text-transform:uppercase;margin:34px 0 4px}

  /* purchase buttons */
  .btn{display:block;width:100%;text-align:center;text-decoration:none;font-weight:700;font-size:14.5px;
    padding:12px 16px;border-radius:7px;margin-top:18px;border:0;cursor:pointer;
    font-family:'Archivo',sans-serif;transition:filter .15s ease,background .15s ease}
  .btn-navy{background:var(--flame);color:#fff}
  .btn-navy:hover{background:var(--ink-2)}
  .btn-gold{background:var(--flame);color:#06302C}
  .btn-gold:hover{filter:brightness(1.06)}

  /* clinic pricing cards */
  .clinic{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;margin-top:14px}
  .clinic .ctag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);font-weight:700}
  .clinic h3{font-size:19px;margin:6px 0 2px}
  .clinic .cwhen{font-size:13px;color:var(--ink-60);margin-bottom:12px}
  .crate{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
  .crate:last-of-type{border-bottom:0}
  .crate .cn{color:var(--ink);flex:1 1 auto;min-width:140px}
  .crate .cn small{display:block;color:var(--ink-40);font-size:12px;margin-top:2px}
  .crate .cr{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;margin-left:auto}
  .crate .cp{font-family:'Space Mono',monospace;font-weight:700;white-space:nowrap;text-align:right}
  .crate .cp .non{color:var(--ink-40);font-weight:400}
  .btn-sm{display:inline-block;text-decoration:none;font-weight:700;font-size:12.5px;padding:7px 16px;border-radius:6px;
    background:var(--flame);color:#fff;white-space:nowrap;font-family:'Archivo',sans-serif;transition:background .15s ease}
  .btn-sm:hover{background:var(--ink-2)}
  .cbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .btn-sm.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
  .btn-sm.outline:hover{background:var(--mist)}
  .btn-sm.pending{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red);border:1px dashed var(--red)}
  .btn-sm.pending:hover{background:rgba(190,58,52,.08)}
  .flag{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:700;color:#fff;background:var(--red);padding:3px 8px;border-radius:4px;margin-left:8px;vertical-align:middle}
  .todo{margin-top:12px;font-family:'Space Mono',monospace;font-size:12px;line-height:1.55;color:var(--red);
    background:rgba(190,58,52,.07);border:1px dashed var(--red);border-radius:6px;padding:10px 12px}
  .todo b{text-transform:uppercase;letter-spacing:.06em}

  /* footer */
  footer{background:var(--ink);color:#fff;padding:42px 0 46px;text-align:center;margin-top:34px}
  footer .sign{font-size:21px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:#fff}
  footer .csub{margin:8px auto 22px;font-size:14px;color:rgba(255,255,255,.7);max-width:32ch}
  .contact{display:flex;flex-direction:column;max-width:360px;margin:0 auto;text-align:left}
  .crow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14.5px}
  .crow:last-child{border-bottom:0}
  .crow .lab{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--sand);width:78px;flex-shrink:0;font-weight:700}
  .crow .val{font-weight:600;color:#fff;text-decoration:none;word-break:break-word}
  .crow a.val:hover{color:var(--sand)}
  footer .team{margin-top:24px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(255,255,255,.5)}
</style>
</head>
<body>

<div class=&quot;phead&quot;><div class=&quot;wrap&quot;>
    <p class=&quot;eyebrow&quot;>Pricing &amp;amp; Membership</p>
    <h1 class=&quot;anton&quot;>Memberships &amp;amp; clinics</h1>
    <p class=&quot;sub&quot;>Month-to-month memberships plus per-clinic pricing — no membership required for clinics.</p>
  </div></div>
<section class=&quot;band&quot; id=&quot;pricing&quot;>
  <div class=&quot;wrap&quot;>
    <p class=&quot;sec-sub&quot;>One membership covers every program — basketball, baseball, speed, and strength. Pick the tier that matches how often you train; sessions work on any program, even strength-only.</p>

    <div class=&quot;tiers&quot;>
      <div class=&quot;tier&quot;>
        <div class=&quot;lvl&quot;>Level 01</div>
        <h3>Starter</h3>
        <div class=&quot;amt&quot;>$50<span>/mo</span></div>
        <div class=&quot;inc&quot;>2 sessions included</div>
        <ul>
          <li>2 sessions a month — use on any program</li>
          <li>Each additional session $25</li>
          <li>Member rates on clinics &amp;amp; appointments</li>
        </ul>
        <!-- ===== STARTER purchase button — linked to MindBody Starter membership checkout ===== -->
        <a class=&quot;btn btn-navy&quot; href=&quot;https://clients.mindbodyonline.com/classic/ws?studioid=5745470&amp;amp;stype=40&amp;amp;prodId=125&quot; data-tier=&quot;starter&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;>Choose Starter</a>
      </div>
      <div class=&quot;tier&quot;>
        <div class=&quot;lvl&quot;>Level 02</div>
        <h3>Performer</h3>
        <div class=&quot;amt&quot;>$100<span>/mo</span></div>
        <div class=&quot;inc&quot;>5 sessions included</div>
        <ul>
          <li>5 sessions a month — use on any program</li>
          <li>Each additional session $20</li>
          <li>Member rates on clinics &amp;amp; appointments</li>
        </ul>
        <!-- ===== PERFORMER purchase button — linked to MindBody Performer membership checkout ===== -->
        <a class=&quot;btn btn-navy&quot; href=&quot;https://clients.mindbodyonline.com/classic/ws?studioid=5745470&amp;amp;stype=40&amp;amp;prodId=135&quot; data-tier=&quot;performer&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;>Choose Performer</a>
      </div>
      <div class=&quot;tier&quot;>
        <div class=&quot;lvl&quot;>Level 03 · Top tier</div>
        <h3>Elite</h3>
        <div class=&quot;amt&quot;>$200<span>/mo</span></div>
        <div class=&quot;inc&quot;>12 sessions included</div>
        <ul>
          <li>12 sessions a month — use on any program</li>
          <li>Each additional session $15</li>
          <li>Member rates on clinics &amp;amp; appointments</li>
        </ul>
        <!-- ===== ELITE purchase button — linked to MindBody Elite membership checkout ===== -->
        <a class=&quot;btn btn-navy&quot; href=&quot;https://clients.mindbodyonline.com/classic/ws?studioid=5745470&amp;amp;stype=40&amp;amp;prodId=136&quot; data-tier=&quot;elite&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;>Choose Elite</a>
      </div>
    </div>
    <p class=&quot;terms&quot;><b>$50 one-time enrollment fee</b> at activation and re-activation. Memberships auto-renew monthly — cancel anytime. Hawaiʻi GET (4.712%) added at checkout.</p>

    <div class=&quot;member&quot; style=&quot;margin-top:26px&quot;>
      <div class=&quot;kicker&quot;>Good to know</div>
      <h3>Clinics don't require a membership</h3>
      <p>Drop in to any clinic without a monthly membership. To access facilities, book classes, and book appointments, you'll purchase a membership after registering — and members get the best rates on clinics, too.</p>
      <!-- v47: these two lines moved here from the retired &quot;Upcoming clinic pricing&quot; section
           (Rob). .member p is margin:0, so spacing is set inline rather than by a new rule. -->
      <p style=&quot;margin-top:12px&quot;>Clinic pricing is set per clinic and varies by the guest trainer. For current rates, <a class=&quot;ilink&quot; href=&quot;#&quot; onclick=&quot;parent.go('contact');return false&quot;>contact us</a> or check the <a class=&quot;ilink&quot; href=&quot;#&quot; onclick=&quot;parent.go('schedule');return false&quot;>Schedule page</a> for details.</p>
      <p style=&quot;margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.62)&quot;>All bookings and payments are handled in the Hawaiʻi Sports Nexus app.</p>
    </div>

    <!-- ===== v47: the &quot;Upcoming clinic pricing&quot; section was REMOVED FROM THIS PAGE per Rob.
             Its heading, its two lines and the app-booking line all moved up into the &quot;Good to
             know&quot; box above; once the Derrick Low card went in v46 the section had nothing left
             of its own. The subhead read &quot;Upcoming clinic pricing&quot; and its lead sentence was
             &quot;Clinic pricing is set per clinic and varies by the guest trainer.&quot;

             THE PURCHASE-LINK TO-DO IS STILL OUTSTANDING and this comment is its only record:
               add the 2026-27 MindBody purchase links for in-season Derrick Low sessions.
             This page is where the purchase buttons were always meant to land, and there is no
             longer a section here to hang them on - a clinic section has to come back first.

             RETIRED SUMMER 2026 RATES (reference only, never rendered):
               3-Day   $150 / $225   prodId 100277 / 100278
               2-Day   $100 / $150   prodId 100279 / 100280
               Drop-In  $60 /  $85   prodId 100282 / 100283
               URL form: https://clients.mindbodyonline.com/classic/ws?studioid=5745470&amp;stype=41&amp;sTG=66&amp;prodId=...
             Priced per clinic week (Jun 16-20, 2026); they do not apply to the in-season format. ===== -->
  </div>
</section>

<footer>
  <div class=&quot;wrap&quot;>
    <p class=&quot;sign&quot;>Questions? We're here to help.</p>
    <p class=&quot;csub&quot;>Reach out anytime — we're glad to walk you through it.</p>
    <div class=&quot;contact&quot;>
      <div class=&quot;crow&quot;><span class=&quot;lab&quot;>Phone</span><a class=&quot;val&quot; href=&quot;tel:+18089997449&quot;>808.999.7449</a></div>
      <div class=&quot;crow&quot;><span class=&quot;lab&quot;>Email</span><a class=&quot;val&quot; href=&quot;mailto:info@hawaiisportsnexus.com&quot;>info@hawaiisportsnexus.com</a></div>
      <div class=&quot;crow&quot;><span class=&quot;lab&quot;>Website</span><a class=&quot;val&quot; href=&quot;https://www.hawaiisportsnexus.com&quot;>www.hawaiisportsnexus.com</a></div>
      <div class=&quot;crow&quot;><span class=&quot;lab&quot;>Find us</span><span class=&quot;val&quot;>Inside the Central Branch YMCA</span></div>
      <div class=&quot;crow&quot;><span class=&quot;lab&quot;>Hours</span><span class=&quot;val&quot;>8am – 6pm</span></div>
      <div class=&quot;crow&quot;><span class=&quot;lab&quot;>Instagram</span><a class=&quot;val&quot; href=&quot;https://instagram.com/hawaiisportsnexus&quot;>@hawaiisportsnexus</a></div>
    </div>
    <p class=&quot;team&quot;>The HISN Team</p>
  </div>
</footer>

<script>
(function(){
  var FID='pf-pricing';
  function postH(){
    try{
      var h=Math.max(document.body.scrollHeight, document.body.offsetHeight);
      parent.postMessage({hisnH:h, fid:FID}, '*');
    }catch(e){}
  }
  window.addEventListener('load', function(){ postH(); setTimeout(postH,250); setTimeout(postH,800); });
  if(window.ResizeObserver){ try{ new ResizeObserver(postH).observe(document.documentElement); }catch(e){} }
  document.addEventListener('click', function(){ setTimeout(postH,60); });
  window.addEventListener('message', function(e){ if(e.data==='hisn-measure'){ postH(); } });
})();
</script>
</body>
</html>
"></iframe>
</section>

<!-- ================= JOIN ================= -->
<section class="page" id="page-join">
  <div class="phead"><div class="wrap">
    <p class="eyebrow">App Registration</p>
    <h1 class="anton">Get set up in 5 steps</h1>
    <p class="sub">Welcome to the ʻohana. Here's how to download the app and register your athlete.</p>
    <div class="appbtns">
      <a class="appbtn" href="https://apps.apple.com/us/app/hawaii-sports-nexus/id6749549016" target="_blank" rel="noopener"><span><span class="sm">Download on the</span><span class="bg">App Store</span></span></a>
      <a class="appbtn" href="https://play.google.com/store/apps/details?id=com.fitnessmobileapps.hawaiisportsnexus42079" target="_blank" rel="noopener"><span><span class="sm">Get it on</span><span class="bg">Google Play</span></span></a>
    </div>
    <p class="eyebrow" style="color:rgba(255,255,255,.6)">Search "Hawaiʻi Sports Nexus" — it's free</p>
  </div></div>

  <section class="band" style="padding-bottom:0">
    <div class="wrap">
      <div class="note"><div><span class="mono">Before you start</span><p>The account holder must be a parent or legal guardian who is 18 or older. They register first, then add each athlete as a member. Both the parent and the player need an account, a signed waiver, and to follow the code of conduct before using the facility.</p></div></div>
    </div>
  </section>

  <section class="band">
    <div class="wrap">
      <div class="sec-head"><span class="partlabel">Part 1</span><h2 class="sec-title anton">Create your account</h2></div>
      <p class="lead" style="margin:-12px 0 24px">The first account must belong to a parent or legal guardian who is 18 or older — not the athlete. Create that account here, then add your child as a member in Part 2.</p>

      <div class="step"><div class="n">1</div><div><h3>Download the app</h3><p>Open the App Store or Google Play and search <span class="kbd">Hawaiʻi Sports Nexus</span>. Download it for free.</p></div></div>
      <div class="step"><div class="n">2</div><div><h3>Tap "Login or Create Account"</h3><p>Open the app and tap <span class="kbd">Login or Create Account</span>.</p></div></div>
      <div class="step"><div class="n">3</div><div><h3>Create your account</h3><p>Enter your email and tap <span class="kbd">Continue</span>, or sign up with Google or Apple. Set a password and agree to the Mindbody Consumer Agreement and Privacy Policy to finish.</p></div></div>
      <div class="step"><div class="n">4</div><div><h3>Complete your profile</h3><p>Tap <span class="kbd">Profile</span> at the bottom, then <span class="kbd">Edit</span> in the top right. Add:</p>
        <ul>
          <li><b>Contact Info</b> — mobile phone, country, street address, city, state, postal code</li>
          <li><b>Additional Info</b> — date of birth and gender</li>
          <li>Accept the liability waiver (tap the link to read it first)</li>
        </ul>
        <div class="tip"><b>Important:</b> use the same name and email you gave Hawaiʻi Sports Nexus, so your account syncs with our system.</div>
      </div></div>
      <div class="step"><div class="n">5</div><div><h3>Save your profile</h3><p>Tap <span class="kbd">Save</span> in the top right. That's it — your login works across the Hawaiʻi Sports Nexus app and Mindbody.</p></div></div>
    </div>
  </section>

  <section class="band mist">
    <div class="wrap">
      <div class="sec-head"><span class="partlabel">Part 2</span><h2 class="sec-title anton">Add your athlete</h2></div>
      <p class="lead" style="margin:-12px 0 24px">Link each child or dependent to your account.</p>

      <div class="step"><div class="n">1</div><div><h3>Open your account info</h3><p>Tap <span class="kbd">Profile</span>, then <span class="kbd">Edit</span>, then <span class="kbd">Manage account info</span> under your name. This opens Mindbody inside the app — log in with the same email and password if asked.</p></div></div>
      <div class="step"><div class="n">2</div><div><h3>Add the family member</h3><p>Scroll down and tap <span class="kbd">+ Add Member</span>. Enter your child's first and last name, then tap <span class="kbd">Add</span>. Repeat for each additional child.</p></div></div>
      <div class="step"><div class="n">3</div><div><h3>Exit and reopen</h3><p>Tap the <span class="kbd">X</span> in the top left to leave Mindbody, then fully close the app and reopen it.</p></div></div>
      <div class="step"><div class="n">4</div><div><h3>Complete your athlete's details</h3><p>Tap <span class="kbd">Profile</span>, tap your name in the center, then tap your child's name. Tap <span class="kbd">Edit</span> and add their Contact Info and Additional Info, then accept the waiver.</p>
        <div class="tip"><b>Please enter an accurate birthday</b> — some clinics and classes are age-restricted.</div>
      </div></div>
      <div class="step"><div class="n">5</div><div><h3>Save</h3><p>Tap <span class="kbd">Save</span> in the top right. Your athlete is now linked to your account and ready to go.</p></div></div>
    </div>
  </section>

  <section class="band">
    <div class="wrap">
      <div class="goodtoknow">
        <p class="eyebrow" style="color:var(--sand)">Good to know</p>
        <h3 class="anton" style="font-size:24px;margin:6px 0 8px">Memberships</h3>
        <!-- v48: sentence order swapped per Rob — the membership requirement leads, the clinics
             exemption closes. Wording of both sentences is unchanged. -->
        <p style="color:rgba(255,255,255,.82);margin:0;max-width:60ch">To access facilities, book classes, and book appointments, you'll purchase a membership after registering. Clinics don't require a membership.</p>
        <div style="margin-top:16px;display:flex;gap:10px;flex-wrap:wrap">
          <a class="btn btn-gold" data-go="pricing">See memberships</a>
          <a class="btn btn-light" data-go="programs">Browse programs</a>
        </div>
      </div>
    </div>
  </section>

  <!-- v41: the "Contact us" band that sat here (address · phone · email, plus the
       "Questions? We're here to help. — Coach Rob & the Nexus team" line) was removed
       per Rob. The site footer carries the same phone, email, and address on every page. -->
</section>

<!-- ================= CONTACT ================= -->
<section class="page" id="page-contact">
  <div class="phead"><div class="wrap">
    <p class="eyebrow">Free Trial</p>
    <h1 class="anton">Book a free trial class</h1>
    <p class="sub">Come try a class on us. Reach out and we'll help you pick a session and get your athlete scheduled.</p>
  </div></div>
  <section class="band">
    <div class="wrap">
      <div class="sec-head"><span class="sec-num">·</span><h2 class="sec-title anton">Contact us</h2></div>
      <p class="lead">Call, text, or email to schedule your free trial class. Let us know the athlete's age and the sport or program they're interested in, and we'll match them to the right session.</p>
      <div style="margin-top:16px;display:flex;gap:10px;flex-wrap:wrap">
        <a class="btn btn-gold" href="tel:+18089997449">Call or text 808.999.7449</a>
        <a class="btn btn-ghost" href="mailto:info@hawaiisportsnexus.com?subject=Free%20trial%20class&amp;body=Hi%20Hawaii%20Sports%20Nexus%2C%20I%27d%20like%20to%20schedule%20a%20free%20trial%20class.%20Athlete%20age%3A%20___%20Sport%2Fprogram%3A%20___">Email us</a>
      </div>
      <p class="lead" style="margin-top:20px">Or visit us inside the Central Branch YMCA · 401 Atkinson Drive, Honolulu, HI 96814 · Hours 8am–6pm.</p>
      <p class="lead" style="margin-top:6px;font-size:14px">We're here to help. — Coach Rob &amp; the Nexus team</p>
    </div>
  </section>

  <section class="band mist">
    <div class="wrap">
      <div class="sec-head"><span class="sec-num">·</span><h2 class="sec-title anton">Send us a message</h2></div>
      <p class="lead" style="margin-bottom:18px">Prefer to write? Fill this out and we'll get back to you to set up your athlete's free trial class.</p>
      <!-- Live lead form (Mindbody Prospects) — renders only on a live hosted domain -->
      <div class="mb-prospects" style="background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px">
        <!-- Mindbody Prospects widget begin -->
        <healcode-widget data-type="prospects" data-widget-partner="object" data-widget-id="e9654761dc5" data-widget-version="0"></healcode-widget>
        <script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script>
        <!-- Mindbody Prospects widget end -->
      </div>
    </div>
  </section>
</section>

<!-- ================= ABOUT ================= -->
<section class="page" id="page-about">
  <div class="phead"><div class="wrap"><p class="eyebrow">About</p><h1 class="anton">Who we are</h1><p class="sub">The people and mission behind Hawaiʻi Sports Nexus.</p></div></div>
  <section class="band">
    <div class="wrap">
      <div class="sec-head"><span class="sec-num">·</span><h2 class="sec-title anton">Our mission</h2></div>
      <p style="font-size:20px;max-width:60ch">To create a nexus of diverse sports and movement experiences in an environment that cultivates and empowers individuals to develop into a whole athlete — in body, mind, and spirit.</p>
    </div>
  </section>
</section>

<!-- ================= LOCATION ================= -->
<section class="page" id="page-location">
  <div class="phead"><div class="wrap">
    <p class="eyebrow">Location</p>
    <h1 class="anton">Find us</h1>
    <p class="sub">Hawaiʻi Sports Nexus is located inside the YMCA Central Branch at 401 Atkinson Drive — in the heart of Honolulu, directly across from Ala Moana Center.</p>
  </div></div>

  <section class="band">
    <div class="wrap">
      <div class="sec-head"><span class="sec-num">·</span><h2 class="sec-title anton">From the sky</h2></div>
      <p class="lead" style="margin-bottom:18px">We share the building with the YMCA Central Branch. Enter through the YMCA, and the Nexus is inside.</p>
      <img src="photos/site-8.jpg" alt="Aerial view of Hawaiʻi Sports Nexus at 401 Atkinson Drive, between Ala Moana Boulevard and the Ala Moana Shopping Center and Hotel" style="width:100%;border-radius:14px;border:1px solid var(--line);display:block">
      <div style="margin-top:16px">
        <a class="btn btn-gold" href="https://www.google.com/maps/dir/?api=1&amp;destination=401+Atkinson+Drive+Honolulu+HI+96814" target="_blank" rel="noopener">Get directions</a>
      </div>
    </div>
  </section>

  <section class="band mist">
    <div class="wrap">
      <div class="sec-head"><span class="sec-num">·</span><h2 class="sec-title anton">From the street</h2></div>
      <p class="lead" style="margin-bottom:18px">A street-level look at the building and entrance on Atkinson Drive.</p>
      <img src="photos/site-9.jpg" alt="Street-level view of the Hawaiʻi Sports Nexus building entrance on Atkinson Drive" style="width:100%;border-radius:14px;border:1px solid var(--line);display:block">
    </div>
  </section>

  <section class="band">
    <div class="wrap"><div class="sec-head"><span class="sec-num">·</span><h2 class="sec-title anton">Visit us</h2></div>
      <p class="lead">Inside the YMCA Central Branch · 401 Atkinson Drive, Honolulu, HI 96814<br>Hours · 8am–6pm · 808.999.7449 · <a href="mailto:info@hawaiisportsnexus.com" style="color:var(--sand);font-weight:700">info@hawaiisportsnexus.com</a><br><a href="https://www.instagram.com/hawaiisportsnexus" target="_blank" rel="noopener" style="color:var(--sand);font-weight:700">@hawaiisportsnexus</a> · <a href="https://www.hawaiisportsnexus.com" target="_blank" rel="noopener" style="color:var(--sand);font-weight:700">www.hawaiisportsnexus.com</a></p>
      <div class="note"><div><span class="mono">Parking</span><p>There is no on-site parking at the facility. Please use nearby street or public parking (Ala Moana Center is directly across Atkinson Drive) and allow a few extra minutes to walk in.</p></div></div>
    </div>
  </section>
</section>


</main>

<footer>
  <div class="wrap foot-grid">
    <div class="foot-brand">
      <img class="foot-logo" src="photos/logo.png" alt="Hawaiʻi Sports Nexus">
      <div class="anton tagline">TRAIN HARD. LEARN. GET BETTER.</div>
      <div class="tagline-sub">Movement is Life.</div>
    </div>
    <div class="foot-col">
      <h4>Contact</h4>
      <a href="tel:+18089997449">808.999.7449</a>
      <a href="mailto:info@hawaiisportsnexus.com">info@hawaiisportsnexus.com</a>
      <a href="https://www.hawaiisportsnexus.com" target="_blank" rel="noopener">www.hawaiisportsnexus.com</a>
      <a href="https://www.instagram.com/hawaiisportsnexus" target="_blank" rel="noopener">@hawaiisportsnexus</a>
    </div>
    <div class="foot-col">
      <h4>Visit</h4>
      <span>Inside the Central Branch YMCA</span>
      <span>401 Atkinson Drive, Honolulu, HI 96814</span>
      <span>Hours · 8am–6pm</span>
    </div>
  </div>
  <div class="foot-bottom">© 2026 Hawaiʻi Sports Nexus</div>
</footer>

<script>
  function go(id){
    document.querySelectorAll('.page').forEach(function(p){p.classList.remove('active');});
    var el=document.getElementById('page-'+id); if(el) el.classList.add('active');
    document.querySelectorAll('.nav-links a').forEach(function(a){a.classList.toggle('on', a.getAttribute('data-go')===id);});
    document.body.classList.remove('nav-open');
    window.scrollTo({top:0,behavior:'auto'});
    // v48: .page is display:none until activated, so the Mindbody Schedules widget initialises
    // into a zero-width container and can lay itself out for a 0px viewport. Firing a resize once
    // the Schedule page is actually visible gives it a chance to re-measure. Benign if the widget
    // ignores it. UNVERIFIED against the live widget — no network to Mindbody from the build env.
    if(id==='schedule'){ setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 60); }
  }
  document.querySelectorAll('[data-go]').forEach(function(el){
    el.addEventListener('click', function(e){ e.preventDefault(); go(this.getAttribute('data-go')); });
  });
  document.getElementById('burger').addEventListener('click', function(){ document.body.classList.toggle('nav-open'); });
  go('home');
</script>

<script>
/* size embedded HISN tab iframes to their content */
window.addEventListener('message', function(e){
  var d = e.data;
  if(d && typeof d === 'object' && d.hisnH && d.fid){
    var f = document.getElementById(d.fid);
    if(f){ f.style.height = d.hisnH + 'px'; }
  }
  /* v41 BUGFIX — an embedded view swapped inside an iframe and asked to be scrolled back into
     view. Without this the parent page never moved, so the detail view rendered above the
     reader's viewport and the orange "View program details" buttons looked dead. Offset by the
     sticky .navbar height, which would otherwise cover the top of the view. */
  if(d && typeof d === 'object' && d.hisnScrollTo){
    var t = document.getElementById(d.hisnScrollTo);
    if(t){
      var nav = document.querySelector('.navbar');
      var pad = (nav ? nav.getBoundingClientRect().height : 0) + 8;
      var y = Math.max(0, t.getBoundingClientRect().top + window.pageYOffset - pad);
      /* Safari before 15.4 throws on ScrollToOptions — fall back to positional args. */
      try{ window.scrollTo({top: y, behavior: 'smooth'}); }
      catch(err){ try{ window.scrollTo(0, y); }catch(err2){} }
    }
  }
});
(function(){
  var _go = window.go;
  window.go = function(id){
    _go(id);
    if(id==='programs'){ try{ var _pf=document.getElementById('pf-programs'); if(_pf&&_pf.contentWindow&&_pf.contentWindow.showView){ _pf.contentWindow.showView('programs'); } var _all=_pf&&_pf.contentDocument&&_pf.contentDocument.querySelector('#chips .chip[data-f="all"]'); if(_all) _all.click(); }catch(e){} }
    function _sync(){
      document.querySelectorAll('#page-'+id+' iframe.embed').forEach(function(f){
        try{ f.contentWindow.postMessage('hisn-measure','*'); }catch(e){}
        try{ var b=f.contentDocument&&f.contentDocument.body; if(b){ f.style.height=Math.max(b.scrollHeight,b.offsetHeight)+'px'; } }catch(e){}
      });
    }
    setTimeout(_sync,80); setTimeout(_sync,300);
  };

  /* v41 — deep-link into a program detail view.
     An element with data-program="<viewId>" switches to the Programs tab AND opens that
     program's detail view inside the pf-programs iframe, instead of landing on the card grid.
     The iframe is srcdoc, so it shares the parent's origin and contentWindow.showView is
     reachable; the retry loop covers the case where the tab has never been opened and the
     iframe has not finished parsing yet. Add data-program to any button to reuse this.
     View ids are the same ones showView() takes: clinic, shooting, allskills, hitting,
     pitching, indoor-league, powerbuilding, sparq. */
  document.querySelectorAll('[data-program]').forEach(function(el){
    el.addEventListener('click', function(e){
      e.preventDefault();
      var view = this.getAttribute('data-program');
      window.go('programs');
      var tries = 0;
      (function open(){
        var pf = document.getElementById('pf-programs');
        try{
          if(pf && pf.contentWindow && pf.contentWindow.showView){
            pf.contentWindow.showView(view);
            setTimeout(function(){
              try{ pf.contentWindow.postMessage('hisn-measure','*'); }catch(err){}
            }, 60);
            return;
          }
        }catch(err){}
        if(++tries < 40) setTimeout(open, 50);
      })();
    });
  });
})();
</script>
</body>
</html>