/* Site-wide layout changes published by Carcin. */

/* /classes hero banner only — scoped via .po-page-hero--classes, a class
   added just to that page's hero section. The shared .po-page-hero class
   used by other subpage headers (contact, events, packages, etc.) is left
   untouched. */
.po-page-hero--classes::before,
.po-page-hero--classes::after,
.po-page-hero--classes .po-page-hero__inner::before,
.po-page-hero--classes .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--classes .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--classes .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}

/* Home page hero video — remove the dark overlay so the video shows at
   full brightness. Scoped to .po-hero, the home hero only. */
.po-hero::before,
.po-hero::after,
.po-hero .po-hero__inner::before,
.po-hero .po-hero__inner::after {
  content: none;
}
.po-hero .po-hero__media {
  filter: none;
  opacity: 1;
}

/* Home page "Transform Your Body, Transform Your Life" section (the
   MOVE·BREATHE·TRANSFORM band) — widened content area so the title,
   paragraph and benefits have more horizontal room, with the title
   sitting on one line on wide desktop screens. Centered layout, Poppins
   lettering kept as before. Fully responsive: sizes step down on mobile
   so nothing is cut off or crowded. Scoped to .po-band--move, unique to
   this section. */
.po-band--move .po-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: var(--container);
}
.po-band--move .po-section__head,
.po-band--move .po-benefits,
.po-band--move .po-benefits li {
  font-family: "Poppins", sans-serif;
}
.po-band--move .po-h-display {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  line-height: 1.2;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  white-space: normal;
  letter-spacing: 0.02em;
}
.po-band--move .po-lead {
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
}
.po-band--move .po-benefits {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  column-gap: var(--space-8);
  row-gap: var(--space-3);
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
.po-band--move .po-benefits li {
  white-space: nowrap;
}
@media (min-width: 1536px) {
  .po-band--move .po-h-display {
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .po-band--move .po-h-display {
    font-size: clamp(1.4rem, 7vw, 2rem);
    letter-spacing: 0.02em;
    white-space: normal;
  }
  .po-band--move .po-lead {
    font-size: 0.95rem;
    max-width: 100%;
  }
  .po-band--move .po-benefits {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
  .po-band--move .po-benefits li {
    white-space: normal;
    font-size: 0.95rem;
  }
}

/* Team photos rendered in black and white — scoped via .po-member__photo--bw,
   applied only to the specific team member photos requested by the owner. */
.po-member__photo--bw {
  filter: grayscale(1);
}

/* Home page "Pilates One – Where Movement Transforms Mind & Body" intro
   text — widened to match the four-image Highlights row directly below it,
   so its left and right edges line up with the first and last photos.
   Scoped via the section's own label, unique to this section; nothing
   else about the text (size, colour, spacing) is touched. */
[data-cn-label="Pilates One – Where Movement Transforms Mind & Body"] .po-prose {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* "Rooted in traditional Pilates principles..." paragraph, moved beneath
   the four-photo Highlights row — matched to the same full-width margins
   as the "Pilates One, established in 2008..." paragraph above it (the
   rule just above), instead of the narrower default prose width it had
   when first moved here. Scoped via its own .po-prose--wide class, added
   only to this paragraph's wrapper. */
.po-prose--wide {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Home page "Pilates One – Where Movement Transforms Mind & Body" title —
   given the site's own .po-h-display heading treatment (it was plain bold
   text before), set to Cormorant Garamond at a semibold weight per the
   owner's request. Scoped via this section's own label, so no other
   heading on the site is affected. */
[data-cn-label="Pilates One – Where Movement Transforms Mind & Body"] .po-h-display {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  text-transform: none;
}
[data-cn-label="Pilates One – Where Movement Transforms Mind & Body"] .po-h-display {
  text-align: center;
}
[data-cn-label="Pilates One – Where Movement Transforms Mind & Body"] .po-lead {
  color: var(--color-heading);
}
[data-cn-label="Pilates One – Where Movement Transforms Mind & Body"] .po-h-display strong {
  font-weight: 800;
}
[data-cn-edit="prose.stronger_bodies_lead"] {
  margin-top: var(--space-4);
}
.po-lead-mobile {
  display: none;
}
@media (min-width: 641px) {
  [data-cn-edit="prose.stronger_bodies_lead"] {
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  [data-cn-edit="prose.stronger_bodies_lead"] {
    font-size: clamp(1.3rem, 6vw, 1.75rem);
    line-height: 1.3;
  }
  h2.po-h-display .po-lead-oneline {
  letter-spacing: inherit !important;
}

.po-lead-oneline {
    display: none;
  }
  .po-lead-mobile {
    display: inline;
  }
}

/* Reformer Pilates page hero banner — remove the dark overlay so the photo
   shows at full brightness, and set the title to Poppins. Scoped via
   .po-page-hero--reformer, a class added just to that page's hero section.
   The shared .po-page-hero class used by other subpage headers is left
   untouched. */
.po-page-hero--reformer::before,
.po-page-hero--reformer::after,
.po-page-hero--reformer .po-page-hero__inner::before,
.po-page-hero--reformer .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--reformer .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--reformer .po-page-hero__title {
  font-family: "Cormorant Garamond", serif;
}

/* Reformer Pilates page hero banner — the shared .po-page-hero has a fixed
   height shorter than the source photo's own proportions, so a large slice
   of the studio photo (top and bottom) was being cropped away by the
   cover fit. Sizing the section to the photo's own aspect ratio shows the
   whole photo instead. Scoped via .po-page-hero--reformer, this page's hero
   only. */
.po-page-hero--reformer {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 560;
}
.po-page-hero--reformer .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* On narrow phones the aspect-ratio above makes the banner too short to
   hold the three-line heading, clipping its top line. Give it a fixed
   floor there instead, while keeping the full-photo aspect ratio on
   larger screens. */
@media (max-width: 640px) {
  .po-page-hero--reformer {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Reformer Pilates page hero — full redesign to match the Classes page
   hero: the shared bottom-left corner gradient replaced for THIS hero
   only with a soft gradient down the left side (fading to fully clear by
   about two-thirds across, so the right side of the photo stays bright),
   content vertically centered on the left, Cormorant Garamond headline,
   JetBrains Mono body copy with slightly open letter-spacing, and the
   site's existing white pill button style (a.po-btn--pill-light) for
   "Get Started Today". Scoped entirely via .po-page-hero--reformer and
   its own elements, so no other page's hero is affected. */
.po-page-hero--reformer::before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 32%, rgba(0, 0, 0, 0) 65%);
}
.po-page-hero--reformer .po-page-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 36rem;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.po-page-hero--reformer .po-page-hero__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.1;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-5);
}
.po-page-hero--reformer .po-page-hero__desc {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-on-dark);
  font-size: var(--font-size-base);
  line-height: 1.65;
  margin: 0 0 var(--space-6);
  max-width: 30rem;
}
@media (max-width: 640px) {
  .po-page-hero--reformer .po-page-hero__inner {
    max-width: 100%;
    padding-right: var(--space-5);
  }
  .po-page-hero--reformer .po-page-hero__title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
  }
  .po-page-hero--reformer .po-page-hero__desc {
    font-size: 0.875rem;
    letter-spacing: 1.5px;
    max-width: 100%;
  }
}

/* Classes page hero banner — same fix as the Reformer page hero above: the
   shared .po-page-hero has a fixed height shorter than the source photo's
   own proportions, so a large slice of the studio photo (top and bottom)
   was being cropped away by the cover fit. Sizing the section to the
   photo's own aspect ratio shows the whole photo instead. Scoped via
   .po-page-hero--classes, this page's hero only. */
.po-page-hero--classes {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 656;
}
.po-page-hero--classes .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* On narrow phones the aspect-ratio above makes the banner too short to
   hold the heading and button, clipping them. Give it a fixed floor there
   instead, while keeping the full-photo aspect ratio on larger screens. */
@media (max-width: 640px) {
  .po-page-hero--classes {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Private Pilates Classes page hero banner — same fix as the Classes and
   Reformer page heroes above: remove the dark overlay so the studio photo
   shows at full brightness, size the section to the photo's own aspect
   ratio instead of the shared .po-page-hero's fixed (and shorter) height
   so the whole photo is visible instead of cropped, and set the title to
   Poppins. Scoped via .po-page-hero--private, this page's hero only. */
.po-page-hero--private::before,
.po-page-hero--private::after,
.po-page-hero--private .po-page-hero__inner::before,
.po-page-hero--private .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--private .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--private .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}
.po-page-hero--private {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 656;
}
.po-page-hero--private .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .po-page-hero--private {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Private Sessions page hero — full redesign to match the Classes page
   hero exactly: content vertically centered on the left over a soft
   left-to-right gradient, Cormorant Garamond headline, JetBrains Mono
   subtitle with slightly open letter-spacing. Scoped entirely via
   .po-page-hero--private and its own elements. */
.po-page-hero--private::before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 32%, rgba(0, 0, 0, 0) 65%);
}
.po-page-hero--private .po-page-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 36rem;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.po-page-hero--private .po-page-hero__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.1;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-5);
}
.po-page-hero--private .po-page-hero__desc {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-on-dark);
  font-size: var(--font-size-base);
  line-height: 1.65;
  margin: 0;
  max-width: 30rem;
}
@media (max-width: 640px) {
  .po-page-hero--private .po-page-hero__inner {
    max-width: 100%;
    padding-right: var(--space-5);
  }
  .po-page-hero--private .po-page-hero__title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
  }
  .po-page-hero--private .po-page-hero__desc {
    font-size: 0.875rem;
    letter-spacing: 1.5px;
    max-width: 100%;
  }
}

/* Home page "our location" and "our history" section headings, and the
   shared "contact us" section heading stamped on every page — set to
   Poppins lettering per the owner's request. Scoped via each section's
   own data-cn-label, so nothing else about these headings (size, colour,
   spacing) is touched. */
[data-cn-label="our history"] .po-h-display,
[data-cn-label="contact us"] .po-h-display {
  font-family: "Poppins", sans-serif;
}

/* Pricing (Packages & Specials) page hero banner — remove the dark overlay
   so the studio photo shows at full brightness, size the section to the
   photo's own aspect ratio instead of the shared .po-page-hero's fixed
   (and shorter) height so the whole photo is visible instead of cropped,
   and set the title to Poppins. Scoped via .po-page-hero--packages, this
   page's hero only. */
.po-page-hero--packages::before,
.po-page-hero--packages::after,
.po-page-hero--packages .po-page-hero__inner::before,
.po-page-hero--packages .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--packages .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--packages .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}
.po-page-hero--packages {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 651;
}
.po-page-hero--packages .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .po-page-hero--packages {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Memberships page hero banner — remove the dark overlay so the studio
   photo shows at full brightness, size the section to the photo's own
   aspect ratio instead of the shared .po-page-hero's fixed (and shorter)
   height so the whole photo is visible instead of cropped, and set the
   title to Poppins. Scoped via .po-page-hero--memberships, this page's
   hero only. */
.po-page-hero--memberships::before,
.po-page-hero--memberships::after,
.po-page-hero--memberships .po-page-hero__inner::before,
.po-page-hero--memberships .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--memberships .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--memberships .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}
.po-page-hero--memberships {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 854;
}
.po-page-hero--memberships .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .po-page-hero--memberships {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Contact page hero banner — match the Classes page hero exactly: remove
   the dark overlay so the studio photo shows at full brightness, and size
   the section to the same aspect ratio as the Classes hero (instead of the
   shared .po-page-hero's shorter fixed height) so the whole photo shows
   edge-to-edge with the title and button in the lower-left, at the same
   height as the other inner-page headers. Scoped via .po-page-hero--contact,
   this page's hero only. */
.po-page-hero--contact::before,
.po-page-hero--contact::after,
.po-page-hero--contact .po-page-hero__inner::before,
.po-page-hero--contact .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--contact .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--contact .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}
.po-page-hero--contact {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 656;
}
.po-page-hero--contact .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .po-page-hero--contact {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Testimonials page hero banner — same treatment as Contact above, matching
   the Classes page hero so every inner-page header shares the same height,
   layout and gradient treatment. Scoped via .po-page-hero--testimonials. */
.po-page-hero--testimonials::before,
.po-page-hero--testimonials::after,
.po-page-hero--testimonials .po-page-hero__inner::before,
.po-page-hero--testimonials .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--testimonials .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--testimonials .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}
.po-page-hero--testimonials {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 656;
}
.po-page-hero--testimonials .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .po-page-hero--testimonials {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* FAQ page hero banner — same treatment as Contact and Testimonials above,
   matching the Classes page hero. Scoped via .po-page-hero--faq. */
.po-page-hero--faq::before,
.po-page-hero--faq::after,
.po-page-hero--faq .po-page-hero__inner::before,
.po-page-hero--faq .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--faq .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--faq .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}
.po-page-hero--faq {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 656;
}
.po-page-hero--faq .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .po-page-hero--faq {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* History (Our Story / About) page hero banner — same treatment as the
   pages above, matching the Classes page hero. Scoped via
   .po-page-hero--history. */
.po-page-hero--history::before,
.po-page-hero--history::after,
.po-page-hero--history .po-page-hero__inner::before,
.po-page-hero--history .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--history .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--history .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}
.po-page-hero--history {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 656;
}
.po-page-hero--history .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .po-page-hero--history {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Events & Parties page hero banner — same treatment as Contact,
   Testimonials, FAQ and History above, matching the Classes page hero so
   every inner-page header shares the same height, layout and gradient
   treatment. Scoped via .po-page-hero--events. */
.po-page-hero--events::before,
.po-page-hero--events::after,
.po-page-hero--events .po-page-hero__inner::before,
.po-page-hero--events .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--events .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--events .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}
.po-page-hero--events {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 656;
}
.po-page-hero--events .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .po-page-hero--events {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Our Tribe page hero banner — same treatment as above, matching the
   Classes page hero so every inner-page header shares the same height,
   layout and gradient treatment. Scoped via .po-page-hero--our-tribe. */
.po-page-hero--our-tribe::before,
.po-page-hero--our-tribe::after,
.po-page-hero--our-tribe .po-page-hero__inner::before,
.po-page-hero--our-tribe .po-page-hero__inner::after {
  content: none;
}
.po-page-hero--our-tribe .po-page-hero__media {
  filter: none;
  opacity: 1;
}
.po-page-hero--our-tribe .po-page-hero__title {
  font-family: "Poppins", sans-serif;
}
.po-page-hero--our-tribe {
  height: auto;
  min-height: 0;
  aspect-ratio: 1280 / 656;
}
.po-page-hero--our-tribe .po-page-hero__media {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .po-page-hero--our-tribe {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Home page "New Clients / Classes / Privates / Workshops" photo row —
   make the four photos larger and more prominent by widening this row's
   own container (less empty space on the left and right) and narrowing
   the gap between the photos slightly, while keeping a clear, even space
   between them so they never touch. Applies only from tablet width up so
   the phone layout, which already fits its own screen, is left exactly as
   it was. Scoped to this row alone via its own section identifier; the
   photos, wording, buttons and colours are not touched. */
@media (min-width: 761px) {
  [data-cn-section="cards:cards-1"] .po-container {
    max-width: 87.5rem;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  [data-cn-section="cards:cards-1"] .po-grid--4 {
    gap: var(--space-5);
  }
}

/* Home page "A Space That Moves You" studio photo — stretch the photo
   edge to edge across the full width of the screen, breaking out of the
   centered container, on both desktop and mobile. The heading and intro
   text above are untouched and stay in the normal centered container.
   Scoped via .po-media--edge, added only to this one photo. */
[data-cn-label="A Space That Moves You"] .po-media--edge {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Private Pilates Classes page — "Pilates One Family" group photo —
   stretch the photo edge to edge across the full width of the screen,
   breaking out of the centered container, the same full-bleed treatment
   as "A Space That Moves You" on the home page. The photo keeps its own
   natural proportions exactly as uploaded (no crop, no zoom) — only its
   width changes, and the rounded corners are dropped since the photo now
   touches both edges of the screen. Scoped via
   [data-cn-label="Pilates One Family"] .po-media--edge, this one photo
   only. */
.po-family-band {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
}
.po-family-band img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ultimate Memberships page "Memberships for Pilates in Miami" intro text —
   widened to match the site header's own left and right edges (the
   "since 2008" wordmark and the "Book" button), so this text's edges line
   up with the header above it. Text stays centered within that width;
   wording and font size are unchanged. Scoped via this section's own
   label. */
[data-cn-label="Memberships for Pilates in Miami"] .po-prose {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Inner-page hero headers (Classes, Contact, Testimonials, FAQ, History,
   Reformer, Private, Packages, Memberships) — a subtle dark gradient
   behind the lower-left corner only, where the title and CTA button sit,
   so that light text and the light-outline button read clearly against a
   bright photo. Confined to that corner and fades smoothly into the photo;
   it does not wash over the rest of the image, which stays bright and
   natural. Implemented once, as a single rule shared by every page's own
   .po-page-hero--* class, instead of repeating it per page. Comes after
   each page's own hero rules above so it wins over their `content: none`
   reset on this same ::before (those rules still correctly remove the
   old full-image overlay; this adds back only the small corner gradient
   they were written before). */
.po-page-hero--classes::before,
.po-page-hero--contact::before,
.po-page-hero--testimonials::before,
.po-page-hero--faq::before,
.po-page-hero--history::before,
.po-page-hero--reformer::before,
.po-page-hero--private::before,
.po-page-hero--packages::before,
.po-page-hero--memberships::before,
.po-page-hero--events::before,
.po-page-hero--our-tribe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 65% at 0% 100%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.32) 35%, rgba(0, 0, 0, 0) 68%);
  pointer-events: none;
}

/* Packages & Specials page — pricing dashboard layout (customer request,
   2026-09-30): a slim category list on the left and the matching packages
   on the right, replacing the previous stacked list of pricing sections.
   Category switching uses hidden radio inputs and CSS sibling selectors
   only — no script — the same kind of no-JS interactivity the FAQ page's
   expandable questions already use. Scoped entirely via
   .po-pricing-dashboard and its descendants, added only to this page. */
.po-pricing-dashboard__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.po-pricing-dashboard__layout {
  display: grid;
  grid-template-columns: minmax(160px, 22%) 1fr;
  gap: var(--space-8);
  align-items: start;
}

.po-pricing-dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: var(--space-6);
}

.po-pricing-dashboard__nav-item {
  display: block;
  cursor: pointer;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid transparent;
  color: var(--color-muted);
  font-family: "Cormorant Garamond", serif;
  font-size: var(--font-size-xl);
  line-height: 1.2;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.po-pricing-dashboard__nav-item:hover {
  color: var(--color-heading);
}

.po-pricing-dashboard__panel {
  display: none;
}

.po-pricing-dashboard__panel-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.po-pricing-dashboard__group + .po-pricing-dashboard__group {
  margin-top: var(--space-7);
}

.po-pricing-dashboard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-6);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.po-pricing-dashboard__rows .po-pricing-dashboard__row:last-child,
.po-pricing-dashboard__group .po-pricing-dashboard__row:last-child {
  margin-bottom: 0;
}

.po-pricing-dashboard__row-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.po-pricing-dashboard__name {
  color: var(--color-heading);
  font-weight: 600;
  font-size: var(--font-size-lg);
  font-family: "Cormorant Garamond", serif;
}

.po-pricing-dashboard__price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  text-align: right;
}

.po-pricing-dashboard__price {
  color: var(--color-heading);
  font-weight: 600;
  white-space: nowrap;
  font-size: var(--font-size-2xl);
  font-family: "Cormorant Garamond", serif;
}

.po-pricing-dashboard__note {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.po-pricing-dashboard__buy {
  flex-shrink: 0;
}
span.po-btn.po-pricing-dashboard__buy,
.po-pricing-dashboard__buy.po-btn {
  font-family: "Cormorant Garamond", serif !important;
}

#po-pricing-tab-new-clients:checked ~ .po-pricing-dashboard__nav label[for="po-pricing-tab-new-clients"],
#po-pricing-tab-memberships:checked ~ .po-pricing-dashboard__nav label[for="po-pricing-tab-memberships"],
#po-pricing-tab-class-packages:checked ~ .po-pricing-dashboard__nav label[for="po-pricing-tab-class-packages"],
#po-pricing-tab-private-sessions:checked ~ .po-pricing-dashboard__nav label[for="po-pricing-tab-private-sessions"] {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

#po-pricing-tab-new-clients:checked ~ .po-pricing-dashboard__panels [data-panel="new-clients"],
#po-pricing-tab-memberships:checked ~ .po-pricing-dashboard__panels [data-panel="memberships"],
#po-pricing-tab-class-packages:checked ~ .po-pricing-dashboard__panels [data-panel="class-packages"],
#po-pricing-tab-private-sessions:checked ~ .po-pricing-dashboard__panels [data-panel="private-sessions"] {
  display: block;
}

@media (max-width: 760px) {
  .po-pricing-dashboard__layout {
    display: block;
  }
  .po-pricing-dashboard__nav {
    position: static;
    flex-direction: row;
    gap: var(--space-5);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }
  .po-pricing-dashboard__nav-item {
    flex-shrink: 0;
    padding: var(--space-2) 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  #po-pricing-tab-new-clients:checked ~ .po-pricing-dashboard__nav label[for="po-pricing-tab-new-clients"],
  #po-pricing-tab-memberships:checked ~ .po-pricing-dashboard__nav label[for="po-pricing-tab-memberships"],
  #po-pricing-tab-class-packages:checked ~ .po-pricing-dashboard__nav label[for="po-pricing-tab-class-packages"],
  #po-pricing-tab-private-sessions:checked ~ .po-pricing-dashboard__nav label[for="po-pricing-tab-private-sessions"] {
    border-left-color: transparent;
    border-bottom-color: var(--color-primary);
  }
  .po-pricing-dashboard__row {
    flex-wrap: wrap;
    padding: var(--space-5) var(--space-5);
  }
  .po-pricing-dashboard__price-col {
    align-items: flex-start;
    text-align: left;
  }
}

/* Packages & Specials page — per-package detail pop-up (customer request,
   2026-10-xx). Built first for the "2 Week Group Classes" row only. Pure
   CSS, no script: a hidden checkbox + labels + a sibling selector, the
   same no-JS technique already used above for the category tabs. Scoped
   entirely via .po-pricing-modal and its descendants. */
.po-pricing-modal__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.po-pricing-dashboard__row--clickable {
  cursor: pointer;
  text-decoration: none;
}

/* Scrollable as ONE piece, instead of being forced to vertically
   center in the window: on a shorter browser window or a phone, that
   centering was pushing the title above the top edge and the Purchase
   button below the bottom edge with no way to reach either. Now the
   whole pop-up scrolls together, so the title is reachable by scrolling
   up and the Purchase button by scrolling down, on any screen size. */
.po-pricing-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  overflow-y: auto;
  padding: var(--space-8) var(--space-5);
}

/* Scoped per package by id pair, not by class alone: checking one
   package's box must only reveal THAT package's own pop-up, never a
   later package's in the same list (a plain class-based sibling rule
   here was showing every later pop-up stacked on top of each other,
   and made Close appear to do nothing). */
#po-modal-2wk-group-classes:checked ~ #po-pricing-modal-2wk-group-classes,
#po-modal-1mo-group-classes:checked ~ #po-pricing-modal-1mo-group-classes,
#po-modal-intro-private-30:checked ~ #po-pricing-modal-intro-private-30,
#po-modal-8-classes-month:checked ~ #po-pricing-modal-8-classes-month,
#po-modal-unlimited-classes-month:checked ~ #po-pricing-modal-unlimited-classes-month,
#po-modal-yearly-unlimited:checked ~ #po-pricing-modal-yearly-unlimited,
#po-modal-single-class:checked ~ #po-pricing-modal-single-class,
#po-modal-5-class-pack:checked ~ #po-pricing-modal-5-class-pack,
#po-modal-10-class-pack:checked ~ #po-pricing-modal-10-class-pack,
#po-modal-20-class-pack:checked ~ #po-pricing-modal-20-class-pack,
#po-modal-1mo-unlimited:checked ~ #po-pricing-modal-1mo-unlimited,
#po-modal-1-private:checked ~ #po-pricing-modal-1-private,
#po-modal-5-privates:checked ~ #po-pricing-modal-5-privates,
#po-modal-10-privates:checked ~ #po-pricing-modal-10-privates,
#po-modal-1-duet-private:checked ~ #po-pricing-modal-1-duet-private,
#po-modal-5-duet-privates:checked ~ #po-pricing-modal-5-duet-privates,
#po-modal-10-duet-privates:checked ~ #po-pricing-modal-10-duet-privates {
  display: block;
}

.po-pricing-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.po-pricing-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
}

.po-pricing-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.po-pricing-modal__close:hover {
  background: var(--color-border);
  color: var(--color-heading);
}

.po-pricing-modal__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.po-pricing-modal__name {
  font-weight: 600;
  font-size: var(--font-size-xl);
  color: var(--color-heading);
  font-family: "Cormorant Garamond", serif;
}

.po-pricing-modal__price {
  font-weight: 600;
  font-size: var(--font-size-2xl);
  color: var(--color-heading);
  white-space: nowrap;
  font-family: "Cormorant Garamond", serif;
}

.po-pricing-modal__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.po-pricing-modal__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.po-pricing-modal__label {
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-family: "JetBrains Mono", monospace;
}

.po-pricing-modal__text {
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: 1.5;
  margin: 0;
  font-family: "JetBrains Mono", monospace;
}

.po-pricing-modal__buy {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--space-7);
}
a.po-btn.po-pricing-modal__buy,
.po-pricing-modal__buy.po-btn {
  font-family: "Cormorant Garamond", serif !important;
}

@media (max-width: 760px) {
  .po-pricing-modal {
    padding: var(--space-6) var(--space-4);
  }
  .po-pricing-modal__panel {
    padding: var(--space-6) var(--space-5);
  }
}

/* Private Pilates Classes page hero — two elegant hero choice panels
   (Private Sessions / Private Parties) beneath the existing title, styled
   as soft, rounded, semi-transparent panels rather than solid buttons.
   Scoped via .po-hero-choices, used only in this page's hero — independent
   of the hero photo itself so it keeps working if that media is replaced
   with a video later. */
.po-page-hero--private .po-hero-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.po-page-hero--private .po-hero-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex: 1 1 20rem;
  max-width: 24rem;
  text-decoration: none;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-navy) 15%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.po-page-hero--private .po-hero-choice:hover {
  transform: translateY(-2px);
  background: var(--color-surface);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--color-navy) 20%, transparent);
}
.po-page-hero--private .po-hero-choice__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.po-page-hero--private .po-hero-choice__title {
  font-family: "Poppins", sans-serif;
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.po-page-hero--private .po-hero-choice__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}
.po-page-hero--private .po-hero-choice__arrow {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
  color: var(--color-heading);
  transition: transform 0.15s ease;
}
.po-page-hero--private .po-hero-choice:hover .po-hero-choice__arrow {
  transform: translateX(3px);
}
@media (max-width: 640px) {
  .po-page-hero--private .po-hero-choices {
    flex-direction: column;
  }
  .po-page-hero--private .po-hero-choice {
    max-width: none;
  }
}

/* Private Pilates Classes page — "Private Sessions" section: one cohesive
   3-part editorial row (intro / tall image / benefits column), no cards,
   no divider lines. Scoped entirely via #private-sessions so nothing else
   on the site is touched. */
#private-sessions .po-eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
#private-sessions .po-sessions-layout {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  gap: var(--space-7);
  align-items: center;
}
#private-sessions .po-sessions-layout__intro .po-btn {
  margin-top: var(--space-2);
}
#private-sessions .po-sessions-layout__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
#private-sessions .po-sessions-layout__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
#private-sessions .po-benefits-minimal__item h3 {
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 var(--space-1);
}
#private-sessions .po-benefits-minimal__item p {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Private Pilates Classes page — "Who Private Sessions Are For" expanded
   into a 3-part row: photo / who-it's-for copy / a compact Private Session
   Options panel, using the site's real private-session names and prices
   from the Packages page. Scoped via @media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout{}@media (min-width:761px){@media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout@media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout{grid-template-columns:1fr 1.3fr}}@media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout and
   .po-private-options, unique to this section. */
@media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout {
  display: grid;
  grid-template-columns: 4fr 3fr 3.5fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout .po-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
}
@media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout__copy .po-eyebrow {
  margin-top: 0;
}
.po-h-section@media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout__headline {
  font-size: 1.875rem;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}
@media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout__copy .po-list li {
  font-size: 1.0625rem;
  line-height: 1.45;
}
.po-private-options {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.po-private-options .po-eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
}
.po-private-options__lead {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}
.po-private-options__rows {
  display: flex;
  flex-direction: column;
}
.po-private-options__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.po-private-options__rows .po-private-options__row:last-child {
  border-bottom: none;
}
.po-private-options__name {
  color: var(--color-heading);
  font-weight: 600;
}
.po-private-options__price {
  color: var(--color-heading);
  font-weight: 600;
  margin-left: auto;
}
.po-private-options__plus {
  color: var(--color-primary);
  font-weight: 600;
}
.po-private-options .po-btn {
  margin-top: var(--space-5);
}
.po-section--tight-top {
  padding-top: var(--space-5);
}

/* Private Pilates Classes page — full-bleed transition band marking the
   shift from Private Sessions into Private Parties, between the Private
   Session Options row and the existing "Celebrate with Pilates One"
   section. Rebuilt 2026-10 as a shallow editorial divider with a botanical
   photo background instead of a solid color block — shallow (100-140px
   desktop), elegant serif text, no button, no card. Scoped entirely via
   .po-transition-band--photo, unique to this page. */
.po-transition-band.po-transition-band--photo {
  position: relative;
  background: var(--color-navy);
  padding: 0;
  min-height: 140px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.po-transition-band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.po-transition-band--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-navy) 42%, transparent);
  z-index: 1;
}
.po-transition-band--photo .po-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
}
.po-transition-band__title--photo {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  letter-spacing: 0.03em;
  line-height: 1.45;
  color: var(--color-on-dark);
  text-align: center;
  margin: 0;
}
@media (max-width: 640px) {
  .po-transition-band.po-transition-band--photo {
    min-height: 110px;
    padding: var(--space-5) 0;
  }
  .po-transition-band__title--photo {
    font-size: 1.0625rem;
  }
}
@media (max-width: 900px) {
  @media (min-width:761px){.po-who-pricing-layout.po-who-pricing-layout{grid-template-columns:1fr 1.3fr!important}}.po-who-pricing-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  #private-sessions .po-sessions-layout {
    grid-template-columns: 1fr;
  }
  #private-sessions .po-sessions-layout__media img {
    aspect-ratio: 4 / 3;
  }
}

/* Private Pilates Classes page — "Private Parties" section: rebuilt the
   top portion of the "Why Choose Pilates for Your Celebration?" prose
   block into a single row — an elegant two-line serif headline + a muted
   caption on the left (~28%) beside four plain-text benefit items with
   thin-line icons, evenly spaced on the right (~72%). No cards, no boxes,
   no borders. Widened 2026-10 to ~92% of the viewport (capped at 1550px on
   large screens), broken out of the page's normal narrow content width so
   the four benefit descriptions wrap into 2-3 lines instead of 5-7, and
   icons centered over each benefit. Scoped entirely via .po-why-celebrate,
   used only in this block; the "Tailored to Your Group" list and CTA that
   follow it are untouched. */
.po-why-celebrate {
  display: grid;
  grid-template-columns: minmax(200px, 28%) 1fr;
  gap: var(--space-7);
  align-items: center;
  margin-bottom: var(--space-6);
  width: 92vw;
  margin-left: calc(50% - 46vw);
  margin-right: calc(50% - 46vw);
}
@media (min-width: 1685px) {
  .po-why-celebrate {
    width: 1550px;
    margin-left: calc(50% - 775px);
    margin-right: calc(50% - 775px);
  }
}
.po-why-celebrate__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}
.po-why-celebrate__sub {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin: 0;
}
.po-why-celebrate__benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.po-why-celebrate__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 var(--space-5);
}
.po-why-celebrate__item + .po-why-celebrate__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--color-border);
}
.po-why-celebrate__icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.po-why-celebrate__item-title {
  font-family: "Cormorant Garamond", serif;
  font-size: var(--font-size-sm);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 var(--space-1);
}
.po-why-celebrate__item-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .po-why-celebrate {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}
@media (max-width: 640px) {
  .po-why-celebrate__benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
  .po-why-celebrate__item {
    padding: 0;
  }
  .po-why-celebrate__item + .po-why-celebrate__item::before {
    content: none;
  }
}
@media (max-width: 480px) {
  .po-why-celebrate__benefits {
    grid-template-columns: 1fr;
  }
}

/* Private Pilates Classes page — new "How It Works" editorial row, placed
   below the "Why Choose Pilates for Your Celebration?" block and above the
   "Tailored to Your Group" list. A lifestyle photo on the left (~38%) beside
   a three-step process on the right, no cards or boxes, thin-line arrows
   between steps. Scoped entirely via .po-how-it-works, used only in this
   block. */
.po-how-it-works {
  display: grid;
  grid-template-columns: minmax(220px, 38%) 1fr;
  gap: var(--space-7);
  align-items: stretch;
  margin-bottom: var(--space-6);
}
.po-how-it-works__media {
  height: 100%;
}
.po-how-it-works__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.po-how-it-works__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.po-how-it-works__content > .po-eyebrow {
  margin: 0 0 var(--space-4);
}
.po-how-it-works__steps {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.po-how-it-works__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.po-how-it-works__num {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1;
  color: var(--color-primary);
}
.po-how-it-works__label {
  font-family: "Cormorant Garamond", serif;
  font-size: var(--font-size-sm);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0;
}
.po-how-it-works__text {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: 1.45;
}
.po-how-it-works__eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-weight: 900;
}
.po-how-it-works__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-muted);
  margin-top: var(--space-6);
  width: 1.5rem;
  height: 1.5rem;
}
.po-how-it-works__arrow svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .po-how-it-works {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .po-how-it-works__media img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 640px) {
  .po-how-it-works__steps {
    flex-direction: column;
    gap: var(--space-5);
  }
  .po-how-it-works__arrow {
    margin-top: 0;
    width: 1.25rem;
    height: 1.25rem;
    transform: rotate(90deg);
  }
}

/* Private Pilates Classes page — "How It Works" row simplified to a plain
   horizontal strip: the lifestyle photo is dropped (the redesigned hero
   above now carries the photography for this page) in favor of an eyebrow
   label on the left beside the same three numbered steps and arrow
   dividers as before. Scoped via the added .po-how-it-works--plain
   modifier so the original two-column layout stays available for any
   other use of the base .po-how-it-works class. */
.po-how-it-works--plain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-7);
}
.po-how-it-works--plain .po-how-it-works__eyebrow {
  flex-shrink: 0;
  margin: 0;
}
.po-how-it-works--plain .po-how-it-works__steps {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 900px) {
  .po-how-it-works--plain {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}

/* Private Pilates Classes page — Private Parties area: a single warm
   surface-tinted band wrapping the intro, "Why Choose" row and "How It
   Works" row together so they read as one continuous section instead of
   three separate white blocks. The "Tailored to Your Group" list and its
   contact CTA, now in their own .po-prose below, stay on the default
   background. Also: a small leaf flourish beside the "Private Parties"
   eyebrow, a short divider rule under the "Why Choose" headline, and a
   lighter, slightly smaller treatment for the four benefit icons. Scoped
   via .po-parties-band, .po-eyebrow-icon and .po-why-celebrate__rule,
   unique to this page. */
.po-parties-band {
  background: var(--color-surface);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  box-sizing: border-box;
}

/* Private Parties page — remove the gap between the hero photo and the
   "Why Choose Pilates for Your Celebration?" section directly below it:
   this section's own default top padding, plus .po-parties-band's own
   top padding above, were adding up to a large white gap. Zeroed for
   THIS section only (scoped via its own data-cn-label), so no other
   section on the site loses its normal spacing. */
[data-cn-label="Why Choose Pilates for Your Celebration"] {
  padding-top: 0;
}
.po-parties-band {
  padding-top: var(--space-8);
}

/* "An unforgettable way to move together." caption, under the "Why Choose
   Pilates for Your Celebration?" headline — set to JetBrains Mono per the
   owner's request, matching the monospace body treatment used elsewhere
   on this page (e.g. the hero subtitle). Scoped to this one caption. */
.po-why-celebrate__sub {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
}
/* Private Parties intro — bleed the group photo to the right edge of the
   screen on desktop, while the text column keeps its normal position.
   Scoped to #private-parties so no other "po-feature" row on the site is
   affected. */
@media (min-width: 900px) {
  #private-parties .po-feature .po-media--landscape {
    margin-right: calc(50% - 50vw);
  }
}
/* Private Parties intro — the "INQUIRE ABOUT A PARTY" button was
   stretching to fill the full width of its column (a flex-stretch side
   effect of this component), unlike the normal auto-width buttons used
   elsewhere on this page (e.g. "VIEW PRIVATE OPTIONS"). Un-stretch just
   this button so it matches that same compact, auto-width style. */
#private-parties .po-feature__copy .po-btn {
  align-self: flex-start;
  width: auto;
}

/* Private Pilates Classes page — new "Frequently Asked Questions" section
   for Private Sessions / Private Parties, placed after all other Private
   Parties content. Reuses the site's existing .po-faq / .po-faq__item
   (native <details>/<summary>) accordion component as-is for behavior and
   styling, just arranged into two labeled columns under a shared heading.
   Same full-bleed warm surface tint as .po-parties-band. Scoped entirely
   via .po-faq-band, unique to this page. */
.po-faq-band {
  background: var(--color-bg);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-top: 0;
  box-sizing: border-box;
}
.po-faq-band__head {
  margin-bottom: var(--space-6);
}
.po-faq-band__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  color: var(--color-heading);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
}
.po-faq-band__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.po-faq-band__col > .po-eyebrow {
  margin-bottom: var(--space-3);
}
@media (max-width: 760px) {
  .po-faq-band__columns {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.po-eyebrow-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  margin-left: var(--space-2);
  color: var(--color-primary);
  vertical-align: middle;
}
.po-eyebrow-icon svg {
  width: 100%;
  height: 100%;
}
.po-why-celebrate__rule {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}
.po-why-celebrate__icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.25;
}

/* Contact page — phone and email, each on their own line, directly below
   the hero photo and before the Follow Us section. Generous top and
   bottom spacing so there is clear air between the hero photo above and
   the Follow Us section's grey background below, matching the owner's
   reference layout. Plain underline-on-hover links; the email line is
   bold to match that reference. Scoped via .po-contact-bar, used only on
   this page. */
.po-contact-bar {
  padding-top: var(--space-9, 5rem);
  padding-bottom: var(--space-9, 5rem);
}
.po-contact-bar__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.po-contact-bar__line {
  margin: 0;
}
.po-contact-bar__line--strong .po-contact-bar__link {
  font-weight: 700;
}
.po-contact-bar__link {
  font-size: var(--font-size-md);
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.po-contact-bar__link:hover {
  border-color: currentColor;
}

/* Our Story (History) page — elegant serif pull-quote for the founder's
   own words, so it reads as a quiet typographic moment rather than a
   boxed callout. Scoped via .po-history-quote, used only on this page. */
.po-history-quote {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.4;
  color: var(--color-heading);
  text-align: center;
  max-width: 42rem;
  margin: var(--space-8) auto;
  padding: 0;
}

/* Reformer Pilates page — new "More than a workout" intro section placed
   directly below the hero banner: two CTA buttons side by side under the
   paragraph, wrapping to a stacked column on narrow screens. Scoped via
   .po-reformer-intro__actions, unique to this section. */
.po-reformer-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
@media (max-width: 640px) {
  .po-reformer-intro__actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .po-reformer-intro__actions .po-btn {
    width: 100%;
    text-align: center;
  }
}

/* Reformer Pilates page — new "What Makes Pilates One Different?" 4-column
   row placed below the "More than a workout" intro: thin-line icon, a
   small bold uppercase title and a short description in each column, with
   a subtle vertical divider between columns. Scoped entirely via
   .po-reformer-diff__grid and its descendants, unique to this section. */
.po-reformer-diff__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.po-reformer-diff__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-5);
  position: relative;
}
.po-reformer-diff__item + .po-reformer-diff__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--color-border);
}
.po-reformer-diff__icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  stroke-width: 1.25;
}
.po-reformer-diff__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}
.po-reformer-diff__item p {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .po-reformer-diff__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .po-reformer-diff__item {
    padding: 0;
  }
  .po-reformer-diff__item + .po-reformer-diff__item::before {
    content: none;
  }
}

/* Reformer Pilates page — new "Different Ways to Experience Reformer"
   section placed below the "What Makes Pilates One Different?" row: three
   equal horizontal image cards in one row, each with a subtle dark
   gradient at the bottom so the white title and subtitle sitting in the
   lower-left stay easy to read, plus a centered outlined button beneath
   the row. Scoped entirely via .po-reformer-ways and its descendants,
   unique to this section. The .po-btn--outline modifier only changes
   colour and border on top of the site's existing .po-btn sizing/shape,
   using the site's own primary and on-dark colours — no new colours. */
.po-reformer-ways__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.po-reformer-ways__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
}
/* Hover zoom on the Flow / Tower / Cardio + Strength photos, matching the
   same subtle zoom-on-hover already used on the "New Clients / Classes /
   Privates / Workshops" photo row higher up the home page. Scoped to
   these three cards only via .po-reformer-ways__card; the card's own
   rounded corners (border-radius + overflow: hidden, set above) keep the
   zoomed photo from spilling past its frame. */
.po-reformer-ways__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.po-reformer-ways__card:hover img {
  transform: scale(1.06);
}
.po-reformer-ways__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.1) 42%, rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
}
.po-reformer-ways__caption {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
}
.po-reformer-ways__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-1);
}
.po-reformer-ways__subtitle {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  opacity: 0.92;
  margin: 0;
}
.po-reformer-ways__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}
.po-btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.po-btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-on-dark);
}
@media (max-width: 760px) {
  .po-reformer-ways__grid {
    grid-template-columns: 1fr;
  }
  .po-reformer-ways__card {
    aspect-ratio: 4 / 3;
  }
}

/* Reusable FAQ list modifier: replace the native <details> disclosure
   marker with a plus/minus sign on the right, plus a thin divider line
   between questions. Opt-in via .po-faq--plus beside the existing .po-faq,
   so every other FAQ list on the site keeps its current look. Used first
   on the Reformer Pilates page's two-column FAQ (reusing the existing
   .po-faq-band__title / __columns / __col classes for the heading and
   column layout). */
.po-faq--plus .po-faq__item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
.po-faq--plus .po-faq__item:first-child {
  padding-top: 0;
}
.po-faq--plus .po-faq__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.po-faq--plus .po-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-heading);
}
.po-faq--plus .po-faq__q::-webkit-details-marker {
  display: none;
}
.po-faq--plus .po-faq__q::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  line-height: 1;
}
.po-faq--plus details[open] > .po-faq__q::after {
  content: "\2212";
}
.po-faq--plus .po-faq__a {
  padding-top: var(--space-3);
}

/* Reformer Pilates page — widen ONLY the FAQ block (not the "Ready to
   Transform" / "Contact Us" content that follows it in the same section)
   so its left and right edges line up exactly with the wider, non-narrow
   container used by the "Different Ways to Experience Reformer" cards
   row above it. Negative margins sized from the difference between the
   site's narrow and standard container widths — this exactly cancels out
   the narrow container's own extra side space, however wide it is, so the
   FAQ content lines up edge-to-edge with the cards without guessing a
   pixel value. Left untouched on phones, where it stays full width with
   the normal side padding. Also trims the empty space above the FAQ
   heading slightly, scoped to this section only via its own id. */
#reformer-faq {
  padding-top: var(--space-7);
}

/* Home page "New Clients / Classes / Privates / Workshops" photo row —
   move each pathway's title off the plain outlined button below its photo
   and onto the photo itself, as a white, softly rounded button sitting
   near the bottom center. The photos themselves are untouched — no
   darkening or overlay added. Lettering is Cormorant Garamond at a
   semibold weight, text in the site's own near-black body colour, on a
   plain white background. Scoped entirely via .po-pathway__label and the
   position context added to this row's own .po-media wrapper, so no
   other image on the site is affected. */
[data-cn-section="cards:cards-1"] .po-pathway .po-media {
  position: relative;
}
[data-cn-section="cards:cards-1"] .po-pathway__label {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: var(--color-bg);
  color: #4a3326;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: var(--font-size-md);
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-cn-section="cards:cards-1"] .po-pathway__label:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

/* The same white, softly rounded "New Clients"-style button, for use as a
   normal in-flow button (not sitting on top of a photo) — used here for
   "Explore All Classes" under the Flow / Tower / Cardio + Strength photos.
   Same look (white background, dark warm-brown Cormorant Garamond
   semibold lettering, soft corners, hover lift); no absolute positioning,
   since this one isn't layered over an image. */
.po-hero .po-hero__copy a.po-btn--pill-light {
  display: inline-flex !important;
  width: auto !important;
  max-width: fit-content !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}
a.po-btn--pill-light,
[data-cn-label="MOVE•BREATHE•TRANSFORM"] a.po-btn--pill-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: var(--color-bg);
  color: #4a3326 !important;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: var(--font-size-md);
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.po-btn--pill-light:hover,
[data-cn-label="MOVE•BREATHE•TRANSFORM"] a.po-btn--pill-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

/* "Our signature method..." paragraph in the green/photo band — switched
   to JetBrains Mono at its regular weight, with slightly opened-up
   letter-spacing for an airier feel. Size, line spacing, centering,
   and the section's own size/background are all left exactly as they
   were. Scoped to this one paragraph only. */
[data-cn-label="MOVE•BREATHE•TRANSFORM"] .po-section__head p {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: center;
}

/* "At Pilates One, we believe Pilates is..." paragraph — same treatment as
   the "Our signature method..." paragraph above: JetBrains Mono regular,
   letter-spacing opened up slightly, centered. Size, line spacing and the
   section itself are untouched. Scoped to just this first paragraph so
   the rest of the page is unaffected. */
[data-cn-label="Pilates One – Where Movement Transforms Mind & Body"] .po-prose p {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: center;
}

/* "Every detail at Pilates One is designed to..." paragraph — same
   treatment as the other two body paragraphs: JetBrains Mono regular,
   letter-spacing opened up slightly, centered. Size, line spacing and
   the section itself are untouched. */
[data-cn-label="A Space That Moves You"] .po-lead {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: center;
}

/* "A Space That Moves You" title — same heading treatment as "Pilates One
   – Where Movement Transforms Mind & Body": Cormorant Garamond at a
   semibold weight. Scoped to this one heading only. */
[data-cn-label="A Space That Moves You"] .po-h-display {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
}
@media (min-width: 1024px) {
  [data-cn-label="A Space That Moves You"] .po-h-display {
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
}
@media (max-width: 640px) {
  [data-cn-section="cards:cards-1"] .po-pathway__label {
    font-size: var(--font-size-base);
    padding: var(--space-2) var(--space-4);
    bottom: var(--space-3);
  }
}

/* Main site navigation -- top-level menu items and dropdown links, both
   desktop and mobile, all set to Cormorant Garamond at a regular weight,
   sentence case instead of uppercase, per the owner's request. Sized up
   from the site's base nav size for readability in this serif face.
   Scoped to the nav only -- the brand wordmark, the Book button and every
   other part of the site keep their existing font, size and case. */
.po-nav .po-menu__link,
.po-nav .po-dropdown a {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: var(--font-size-md);
  text-transform: none;
}
.po-mobile__group > a,
.po-mobile__group > span,
.po-mobile__group ul a {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: var(--font-size-lg);
  text-transform: none;
}

/* The "Book" nav button, desktop and mobile, also set to Cormorant
   Garamond per the owner's request -- every other button on the site
   keeps its own font. */
.po-nav__cta,
.po-mobile .po-btn--block {
  font-family: "Cormorant Garamond", serif;
}

/* Home page hero title ("Pilates for every body, every story,
   everyONE.") set to Cormorant Garamond, sentence case instead of
   uppercase, per the owner's request. Scoped to the hero title only --
   every other heading on the site keeps its existing font and case. */
.po-hero__title {
  font-family: "Cormorant Garamond", serif;
  text-transform: none;
}

/* Home page hero subtext ("Built on movement. United by community.")
   set to JetBrains Mono, regular weight, per the owner's request. Scoped
   to the hero subtext only. */
.po-hero__sub {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
}

/* Classes page hero — full redesign (customer request): intro paragraph
   added, the shared bottom-left corner gradient replaced for THIS hero
   only with a soft gradient down the left side (fading to fully clear by
   about two-thirds across, so the right side of the photo stays bright),
   content vertically centered on the left, Cormorant Garamond headline,
   JetBrains Mono body copy with slightly open letter-spacing, and the
   site's existing white pill button style (already used elsewhere as
   a.po-btn--pill-light) for "View Schedule". Scoped entirely via
   .po */

/* Fix: keep the "Stronger bodies builds better everyday lives." lead line (prose.stronger_bodies_lead) on one line on desktop. Scoped to this heading's desktop span only; mobile span and all other .po-h-display headings are untouched. */
h2[data-cn-edit="prose.stronger_bodies_lead"] .po-lead-oneline {
  letter-spacing: -0.045em;
  white-space: nowrap;
}

/*.po-page-hero--classes and its own elements, so no other page's hero
   is affected. */
.po-page-hero--classes::before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 32%, rgba(0, 0, 0, 0) 65%);
}
.po-page-hero--classes .po-page-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 36rem;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.po-page-hero--classes .po-page-hero__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.1;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-5);
}
.po-page-hero--classes .po-page-hero__desc {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-on-dark);
  font-size: var(--font-size-base);
  line-height: 1.65;
  margin: 0 0 var(--space-6);
  max-width: 30rem;
}
.po-page-hero--classes .po-page-hero__cta {
  margin: 0;
}
@media (max-width: 640px) {
  .po-page-hero--classes .po-page-hero__inner {
    max-width: 100%;
    padding-right: var(--space-5);
  }
  .po-page-hero--classes .po-page-hero__title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
  }
  .po-page-hero--classes .po-page-hero__desc {
    font-size: 0.875rem;
    letter-spacing: 1.5px;
    max-width: 100%;
  }
}

/* Private Sessions page hero — re-apply the left-side gradient (instead
   of just the shared small bottom-left corner gradient) so the headline
   and subtitle read clearly against this bright, light-toned photo,
   matching the Classes page hero's contrast treatment exactly. Must come
   after the shared "Inner-page hero headers" corner-gradient rule above
   to win the cascade on this page's ::before background. */
.po-page-hero--private::before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 32%, rgba(0, 0, 0, 0) 65%);
}

/* Private Parties page hero — redesigned for the new group photo: an
   eyebrow label, a thin divider and a pill CTA button added above/below
   the existing headline and subtitle. The previous bottom-anchored
   position and taller 1280/760 aspect ratio were a workaround for the
   OLD photo's faces sitting low in the frame; the new photo has every
   face in the right ~70% of the frame, so the shared
   .po-page-hero--private centered layout and 1280/656 aspect ratio now
   work unchanged here too — no override needed for either. Scoped via
   the extra .po-page-hero--parties class added only to this page's hero
   section. */
.po-page-hero--parties .po-page-hero__eyebrow {
  display: block;
  color: var(--color-on-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.po-page-hero--parties .po-page-hero__rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-on-dark);
  opacity: 0.85;
  margin: var(--space-4) 0;
}
.po-page-hero--parties .po-page-hero__cta {
  margin-top: var(--space-5);
}

/* Private Parties page hero — show the newly uploaded photo at its own
   natural proportions, completely uncropped and un-zoomed, instead of the
   fixed 1280/656 box the other inner-page heroes use (the customer's new
   photo has a different height than that box and should not be cropped
   to fit it). The photo now sits in normal document flow at full width,
   so the hero's height simply follows the photo's own height; the text
   overlay (.po-page-hero__inner) stays absolutely positioned over it as
   before. Scoped via .po-page-hero--parties, this page's hero only — no
   other page's hero sizing is affected. */
/* Private Parties page hero — show the newly uploaded photo at its own
   natural proportions, completely uncropped and un-zoomed, instead of the
   fixed 1280/656 box the other inner-page heroes use. Desktop/tablet
   only (641px and up): below that, phones fall back to the same proven
   cover + 420px-minimum-height behaviour every other inner-page hero
   already uses, since this very wide photo is only ~150px tall at phone
   width — nowhere near enough room for the title, subtitle and button
   overlaid on top of it. Scoped via .po-page-hero--parties, this page's
   hero only. */
@media (min-width: 641px) {
  .po-page-hero--parties {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
  }
  .po-page-hero--parties .po-page-hero__media {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: unset;
  }
  .po-page-hero--parties .po-page-hero__inner {
    max-width: 44rem;
  }
}

/* Classes page — gentle zoom-on-hover for the class photos, from "TONE
   full body" (flow) through "PILATES ONE weights": the customer's
   preferred default hover style for photos. The photo scales up slightly
   inside its own frame on hover/focus; the frame clips the overflow so
   nothing spills past the card's rounded edges. */
.po-classes .po-media {
  overflow: hidden;
}
.po-classes .po-media img {
  transition: transform 0.4s ease;
  will-change: transform;
}
.po-classes .po-class:hover .po-media img,
.po-classes .po-class:focus-within .po-media img {
  transform: scale(1.05);
}

/* Classes page — class titles in Cormorant Garamond, descriptions in
   JetBrains Mono, per the owner's request. Scoped to the class list only. */
.po-classes .po-class__name {
  font-family: "Cormorant Garamond", serif;
}
.po-classes .po-class__desc {
  font-family: "JetBrains Mono", monospace;
}

/* Classes page — "We're excited for you to start your Pilates journey
   with us!" heading set to Cormorant Garamond, per the owner's request.
   Scoped to this one heading only. */
[data-cn-edit="h2.14"] {
  font-family: "Cormorant Garamond", serif;
}

/* Home page "Flow / Tower / Cardio + Strength" photo row -- titles
   (FLOW, TOWER, CARDIO + STRENGTH) set to Cormorant Garamond, and the
   line beneath each (STRENGTH • ALIGNMENT • CONTROL, etc.) set to
   JetBrains Mono, per the owner's request. Scoped to these two classes
   only -- size, weight, spacing and colour are untouched. */
.po-reformer-ways__title {
  font-family: "Cormorant Garamond", serif;
}
.po-reformer-ways__subtitle {
  font-family: "JetBrains Mono", monospace;
}

/* Home page "Our Pilates One Team", "Testimonials" and "our location"
   section headings -- set to Cormorant Garamond per the owner's request.
   "our location" is split out from the "our history" / "contact us" rule
   above, which keep Poppins. Scoped via each section's own data-cn-label,
   so no other heading on the site is affected. */
[data-cn-label="Our Pilates One Team"] .po-h-soft,
[data-cn-label="Testimonials"] .po-h-soft,
[data-cn-label="our location"] .po-h-display {
  font-family: "Cormorant Garamond", serif;
}

/* Home page "Testimonials" section -- the quote text itself set to
   JetBrains Mono, matching the body-text style already used elsewhere on
   the page, per the owner's request. The "-Name" attribution line and the
   section heading above are untouched. Scoped via this section's own
   data-cn-label, so no other quote-style text on the site is affected. */
[data-cn-label="Testimonials"] .po-quote {
  font-family: "JetBrains Mono", monospace;
}

/* Home page "Our Pilates One Team" section -- each member's name set to
   Cormorant Garamond, and their bio text (shown on hover/tap) set to
   JetBrains Mono, per the owner's request. Scoped to this section only. */
/* "Follow Us" heading -- shared across every page -- set to Cormorant
   Garamond per the owner's request. */
[data-cn-edit="shared.follow_title"] {
  font-family: "Cormorant Garamond", serif;
}

/* Home page "Pilates One Class Schedule" heading -- set to Cormorant
   Garamond per the owner's request. Scoped to this section only. */
[data-cn-label="Pilates One Class Schedule"] .po-h-soft {
  font-family: "Cormorant Garamond", serif;
}

[data-cn-label="Our Pilates One Team"] .po-member__name {
  font-family: "Cormorant Garamond", serif;
}
[data-cn-label="Our Pilates One Team"] .po-member__bio {
  font-family: "JetBrains Mono", monospace;
}

/* The hover/tap bio panel was clipping longer bios part-way through.
   Let the panel grow as tall as the text needs so every word shows --
   only while it is actually open (hover, keyboard focus, or tapped on
   touch), so the closed, at-rest look (name only) is untouched. Text
   size and paragraph spacing are left exactly as designed. Scoped to
   this section only. */
[data-cn-label="Our Pilates One Team"] .po-member:hover,
[data-cn-label="Our Pilates One Team"] .po-member:focus,
[data-cn-label="Our Pilates One Team"] .po-member:focus-within,
[data-cn-label="Our Pilates One Team"] .po-member[aria-expanded="true"] {
  overflow: visible !important;
}
[data-cn-label="Our Pilates One Team"] .po-member:hover .po-member__bio,
[data-cn-label="Our Pilates One Team"] .po-member:focus .po-member__bio,
[data-cn-label="Our Pilates One Team"] .po-member:focus-within .po-member__bio,
[data-cn-label="Our Pilates One Team"] .po-member[aria-expanded="true"] .po-member__bio {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* The hover/tap bio panel was clipping longer bios part-way through.
   Rather than growing the panel past the photo, shrink the bio's text
   down -- smaller size, tighter line spacing, tighter paragraph gaps --
   so the full bio fits inside the existing box. Scoped to this section
   only. */

/* Reformer Pilates page -- "What Makes Pilates One Different?" heading
   set to Cormorant Garamond, per the owner's request. Scoped via its own
   modifier class, .po-h-section--serif, so the many other headings
   sharing the base .po-h-section class elsewhere on the site are
   untouched. */
.po-h-section--serif {
  font-family: "Cormorant Garamond", serif;
}

/* Private Pilates Classes page -- "What Makes Pilates One Different" row
   now has 3 columns after removing "INJURY + MOVEMENT SUPPORT": balance
   them evenly instead of leaving an empty 4th slot from the shared
   4-column grid. Scoped to this page's own section id, and only at
   desktop/tablet widths so the existing mobile single-column stacking
   (from the shared .po-reformer-diff__grid media query) is untouched. */
@media (min-width: 761px) {
  [data-cn-section="cards:private-different"] .po-reformer-diff__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Reformer Pilates page -- "What Makes Pilates One Different?" row now has
   3 columns after removing "A Space To Reset": balance them evenly instead
   of leaving an empty 4th slot from the shared 4-column grid. Scoped to
   this page's own section id, and only at desktop/tablet widths so the
   existing mobile single-column stacking (from the shared
   .po-reformer-diff__grid media query) is untouched. */
@media (min-width: 761px) {
  [data-cn-section="cards:reformer-different"] .po-reformer-diff__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
[data-cn-edit="private_diff.title_1"] {
  font-family: "Cormorant Garamond", serif;
}
[data-cn-edit="private_diff.text_1"] {
  font-family: "JetBrains Mono", monospace;
}
[data-cn-edit="private_diff.title_3"] {
  font-family: "Cormorant Garamond", serif;
}
[data-cn-edit="private_diff.text_3"] {
  font-family: "JetBrains Mono", monospace;
}
[data-cn-edit="private_diff.title_4"] {
  font-family: "Cormorant Garamond", serif;
}
[data-cn-edit="private_diff.text_4"] {
  font-family: "JetBrains Mono", monospace;
}

/* Private Pilates Classes page — new "Celebrate Differently" full-bleed
   photo band, placed between "A More Personalized Pilates Experience" and
   "Why Choose Pilates for Your Celebration?". Reuses the site's existing
   heading (.po-h-section--serif), body (.po-lead) and button (.po-btn)
   styles as-is — only new rules here are the band's own layout (full-bleed
   photo, dark left-to-right gradient for legibility, left-aligned content)
   so lettering and the button match the rest of the site exactly. Scoped
   entirely via .po-celebrate-band, unique to this page. */
.po-celebrate-band {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: clamp(760px, 85vh, 980px);
  display: flex;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.po-celebrate-band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.po-celebrate-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.3) 22%, rgba(0, 0, 0, 0) 50%);
  z-index: 1;
}
.po-celebrate-band__inner {
  position: relative;
  z-index: 2;
  max-width: 32rem;
  padding-left: clamp(2rem, 10vw, 8rem);
  padding-right: var(--space-5);
}
.po-celebrate-band__rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-on-dark);
  opacity: 0.85;
  margin-bottom: var(--space-5);
}
.po-celebrate-band__title.po-celebrate-band__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.05;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-5);
}
.po-celebrate-band__sub.po-celebrate-band__sub {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-6);
  max-width: 28rem;
}
@media (max-width: 1024px) {
  .po-celebrate-band {
    min-height: clamp(620px, 70vh, 760px);
  }
}

@media (max-width: 640px) {
  .po-celebrate-band {
    min-height: clamp(460px, 60vh, 620px);
  }
  .po-celebrate-band__inner {
    max-width: 100%;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .po-celebrate-band__title.po-celebrate-band__title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
  .po-celebrate-band__sub.po-celebrate-band__sub {
    font-size: 0.8125rem;
    letter-spacing: 1px;
    max-width: 100%;
  }
}

/* Home page "Smart progressive strength training..." heading (the
   MOVE•BREATHE•TRANSFORM band) — set to Cormorant Garamond per the
   owner's request, overriding this band's shared Poppins display font.
   Size, line-height, spacing and layout from .po-band--move .po-h-display
   are left exactly as they are; only the lettering changes. Scoped via
   this section's own label, so no other heading in this band is
   affected. */
[data-cn-label="MOVE•BREATHE•TRANSFORM"] .po-h-display {
  font-family: "Cormorant Garamond", serif;
  text-transform: none;
}

/* Home page — new "The Pilates One Method" 6-photo chain, added as a
   duplicate experiment section below the existing Move·Breathe·Transform
   band (customer request, keeping the original 3-photo section
   untouched). Titles set to Cormorant Garamond, supporting text to
   JetBrains Mono, matching the fonts used throughout the rest of the
   site. Scoped entirely via .po-method and its descendants, unique to
   this one section. */
.po-method {
  text-align: center;
}
.po-method__head {
  margin-bottom: var(--space-7);
}
.po-method__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}
.po-method__subtitle {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}
[data-cn-section="prose:prose-2-copy"] .po-method {
  max-width: 90rem;
}
.po-method__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
.po-method__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 0;
  min-width: 0;
  max-width: 16rem;
}
.po-method__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.po-method__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.po-method__item:hover .po-method__photo img {
  transform: scale(1.06);
}
.po-method__name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: var(--font-size-md);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0;
}
.po-method__op {
  flex: 0 0 auto;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 700;
  color: #ffffff;
  align-self: center;
}
.po-method__bracket {
  position: relative;
  width: 100%;
  max-width: none;
  height: 0;
  margin: var(--space-5) auto 0;
  border-top: 3px solid #ffffff;
}
.po-method__bracket::before,
.po-method__bracket::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 0.875rem;
  background: #ffffff;
}
.po-method__bracket::before {
  left: 0;
}
.po-method__bracket::after {
  right: 0;
}
.po-method__bracket-drop {
  width: 3px;
  height: 1.25rem;
  background: #ffffff;
  margin: 0 auto;
}
.po-method__eq {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  color: #ffffff;
  margin: var(--space-4) 0;
}
.po-method__result {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}
.po-method__caption {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}
.po-method__cta {
  margin-top: var(--space-6);
}
@media (max-width: 899px) {
  .po-method__row {
    flex-wrap: wrap;
  }
  .po-method__item {
    flex: 0 1 28%;
    min-width: 6rem;
    max-width: none;
  }
  .po-method__bracket {
    display: none;
  }
  .po-method__bracket-drop {
    display: none;
  }
}
@media (max-width: 640px) {
  .po-method__item {
    flex: 0 1 42%;
  }
  .po-method__op {
    display: none;
  }
  .po-method__eq {
    display: none;
  }
  .po-method__caption {
    display: none;
  }
  .po-method__title {
    font-size: 1.5rem;
  }
  .po-method__result {
    font-size: 1.75rem;
  }
}

/* Private Parties page — moved the Group Pricing panel out of its own
   separate section and into the same row as "How It Works", as a compact
   card on the right (per the owner's reference layout): How It Works
   takes the remaining width on the left, Group Pricing sits as a fixed-
   width card on the right, with a thin top divider separating this whole
   row from the "Why Choose" content above. Reuses the existing
   .po-private-options card styling and .po-btn--block button as-is —
   only the surrounding layout is new. Scoped via .po-how-pricing-row and
   .po-private-options--inline, used only on this page. */
.po-how-pricing-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-7);
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}
.po-how-pricing-row .po-how-it-works--plain {
  flex: 1 1 auto;
  min-width: 0;
}
.po-private-options--inline {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
}
/* Group Pricing card fonts, THIS page only (not the Private Sessions
   page's own pricing panel, which shares the same base .po-private-
   options styling) — scoped via .po-private-options--inline. */
.po-private-options--inline .po-eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-weight: 900;
}
.po-private-options--inline .po-private-options__lead {
  font-family: "JetBrains Mono", monospace;
}
.po-private-options--inline .po-btn {
  font-family: "Cormorant Garamond", serif;
}
@media (max-width: 900px) {
  .po-how-pricing-row {
    flex-direction: column;
    gap: var(--space-6);
  }
  .po-private-options--inline {
    flex: 1 1 auto;
  }
}

/* Classes page — new "Experience our brand-new Balanced Body Allegro 2
   Reformers and Towers..." intro text, directly below the hero. Widened
   from the default narrow prose width so the sentence wraps onto two
   balanced lines on desktop instead of three. Scoped via its own
   .po-container--allegro class, added only to this section's container. */
.po-container--allegro {
  max-width: 60rem;
}
/* This section and the class-photo grid directly below it share the
   same warm surface background, so their default top/bottom section
   padding was stacking into one large, visually "wasted" gap between the
   intro sentence and the first class photo. Tightened at every width for
   a more proportional gap, with a bit more breathing room on larger
   screens than on phones. */
section:has(> .po-container--allegro) {
  padding-bottom: var(--space-6);
}
[data-cn-section="media:media-2"] {
  padding-top: var(--space-6);
}
@media (max-width: 640px) {
  section:has(> .po-container--allegro) {
    padding-bottom: var(--space-5);
  }
  [data-cn-section="media:media-2"] {
    padding-top: var(--space-5);
  }
}