/* Design tokens for the Pilates One Carcin Site.
 *
 * ONE :root BLOCK, ON PURPOSE. The Worker (src/index.js) reads the token
 * names for /api/theme out of the FIRST `:root{...}` in this file, and injects
 * a second :root after the stylesheets at request time to override them. So:
 *   - every token the theme layer may change lives in this block, and
 *   - nothing else in this file may open a `:root{` before it.
 * Values accepted by the theme API are colours and lengths only, which is why
 * font stacks and shadows are defined in site.css rather than here.
 *
 * Naming: --color-*, --font-size-*, --space-*, --radius-*, --z-*. The six
 * original names (--primary, --muted, --text, --background, --surface,
 * --border) are kept as the stable public API — chat edits written against
 * them keep working — and the new names alias them.
 */

:root {
  /* Brand colour */
  --primary: #9c2520;
  --primary-deep: #7f1d19;
  --navy: #2a2e40;
  --leaf: #7e9377;          /* the sage of the studio's plants; the flying mark */

  /* Text */
  --text: #1c1c1c;
  --heading: #333333;
  --muted: #666666;
  --on-dark: #ffffff;

  /* Surfaces */
  --background: #ffffff;
  --surface: #f6f4f1;
  --surface-deep: #ece8e2;
  --border: #e4e0da;

  /* Aliases (new naming, same values) */
  --color-primary: var(--primary);
  --color-primary-deep: var(--primary-deep);
  --color-navy: var(--navy);
  --color-text: var(--text);
  --color-heading: var(--heading);
  --color-muted: var(--muted);
  --color-on-dark: var(--on-dark);
  --color-bg: var(--background);
  --color-surface: var(--surface);
  --color-surface-deep: var(--surface-deep);
  --color-border: var(--border);

  /* Type scale (fluid). Display = Oswald, soft = Poppins, body = Oxygen. */
  --font-size-xs: 0.75rem;     /* 12 */
  --font-size-sm: 0.875rem;    /* 14 */
  --font-size-base: 1rem;      /* 16 */
  --font-size-md: 1.125rem;    /* 18 */
  --font-size-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);   /* 20-26 */
  --font-size-xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);    /* 26-36 */
  --font-size-2xl: clamp(1.875rem, 1.35rem + 2.6vw, 3.25rem);  /* 30-52 */
  --font-size-3xl: clamp(2rem, 1.3rem + 3.6vw, 3.75rem);       /* 32-60 */

  /* Spacing scale, 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Section rhythm and container */
  --section-y: clamp(2.25rem, 1.75rem + 2.2vw, 4.25rem);
  --container: 75rem;              /* 1200 */
  --container-narrow: 46rem;       /* 736, ~68ch of Oxygen 16 */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Radii */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;

  /* Layers. The flying mark sits between section backgrounds (0) and page
     content (2), so it passes behind headings and cards rather than over them. */
  --z-fly: 1;
  --z-content: 2;
  --z-nav: 50;
  --z-dropdown: 60;
  --z-overlay: 100;

  /* Chrome */
  --nav-height: 5.5rem;
  --topbar-height: 2.25rem;
}

/* Mobile-only: condense the "A Space That Moves You" home section (media:media-1).
   Scoped to this section's own attribute selector so no other section or
   breakpoint is affected. */
@media (max-width: 640px) {
  [data-cn-section="media:media-1"].po-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  [data-cn-section="media:media-1"] .po-section__head {
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  [data-cn-section="media:media-1"] .po-h-display {
    font-size: 1.9rem;
    line-height: 1.15;
    margin-bottom: 0.25rem;
  }
  [data-cn-section="media:media-1"] .po-lead {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-top: 0;
  }
  [data-cn-section="media:media-1"] .po-media--wide.po-media--edge {
    aspect-ratio: 4 / 5;
    height: auto;
    overflow: hidden;
  }
  [data-cn-section="media:media-1"] .po-media--wide.po-media--edge picture,
  [data-cn-section="media:media-1"] .po-media--wide.po-media--edge img {
    width: 100%;
    height: 100%;
    display: block;
  }
  [data-cn-section="media:media-1"] .po-media--wide.po-media--edge img {
    object-fit: cover;
    object-position: center 35%;
  }
}

/* Home page hero prose heading (section prose:prose-1, data-cn-edit="h2.5"):
   the <strong>-wrapped emphasis words (BODY, STORY, ONE) need to read as
   visibly heavier than the heading's own Cormorant Garamond weight. Scoped
   strictly to this one heading's own strong tags — no other heading, section
   or page is affected, and no theme token is changed. */
[data-cn-edit="h2.5"] strong {
  font-weight: 800;
}

/* Mobile-only: condense the "Pilates For Every Body" home section
   (prose:prose-1), the same way media:media-1 was condensed above --
   tighter gaps and slightly smaller type on small screens only. Scoped
   to this section's own attribute selector (and its specific heading
   attributes) so no other section, breakpoint or page is affected.
   Does not touch the h2.5 strong font-weight rule above or the
   stronger_bodies_lead letter-spacing rule elsewhere. */
@media (max-width: 640px) {
  [data-cn-section="prose:prose-1"].po-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  [data-cn-section="prose:prose-1"] .po-prose > * {
    margin-top: 0;
    margin-bottom: 0;
  }
  [data-cn-section="prose:prose-1"] [data-cn-edit="h2.5"] {
    font-size: 1.9rem;
    line-height: 1.15;
    margin-bottom: 0.5rem;
  }
  [data-cn-section="prose:prose-1"] .po-lead {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }
  [data-cn-section="prose:prose-1"] .po-prose > p:not(.po-lead) {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 1rem;
  }
  [data-cn-section="prose:prose-1"] [data-cn-edit="prose.stronger_bodies_lead"] {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-top: 0;
  }
}

/* Mobile-only: condense the "Rooted in traditional Pilates principles" home
   paragraph (data-cn-edit="prose.moved_text_1"), the same way media:media-1
   and prose:prose-1 were condensed above -- slightly smaller type, tighter
   line-height and reduced section padding on small screens only. This
   section carries no data-cn-section id, so it is scoped instead to its own
   unique combination of existing classes (.po-section--flush-top together
   with .po-section--tight-mobile-gap appears nowhere else on this page) and
   to the paragraph's own data-cn-edit attribute. Neither rule touches
   text-align, so the existing .po-prose--wide.po-prose--center-mobile
   mobile-centering rule for this exact paragraph is left fully intact. */
@media (max-width: 640px) {
  .po-section.po-section--flush-top.po-section--tight-mobile-gap {
    padding-top: 0.5rem;
    padding-bottom: 1.75rem;
  }
  .po-prose--wide.po-prose--center-mobile [data-cn-edit="prose.moved_text_1"] {
    font-size: 0.95rem;
    line-height: 1.55;
  }
  [data-cn-edit="prose.moved_text_1"] {
    text-align: center !important;
  }
}

/* Mobile-only: tighten the Classes page gap between the intro sentence
   (po-section--classes-intro, new hook class on that section) and the
   first class photo directly below it (media:media-2), so it matches the
   rhythm between the class entries further down the page. Desktop is
   untouched -- only the mobile breakpoint's section padding and the intro
   heading's own bottom margin are reduced. Scoped to this section's own
   new class and to media:media-2's own data-cn-section attribute, so no
   other section or page is affected. */
@media (max-width: 640px) {
  .po-section--classes-intro {
    padding-bottom: 0.75rem;
  }
  .po-section--classes-intro .po-section__head {
    margin-bottom: 0;
  }
  [data-cn-section="media:media-2"].po-section {
    padding-top: 1rem;
  }
}

/* Packages page, New Client Specials panel (prose:prose-1, data-panel=
   "new-clients"): the intro sentence above the pricing rows reads as a
   call-out -- bold, uppercase and centered to match the width of the
   pricing card list below it. Scoped to this panel's own existing
   data-panel attribute and the existing .po-lead typography class --
   no new class, font or colour. */
[data-panel="new-clients"] > .po-lead {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}

/* Packages page, Memberships / Class Packages / Private Sessions / Duet
   Private Sessions panels (prose:prose-1): same call-out treatment as the
   New Client Specials intro above -- bold, uppercase and centered to match
   the pricing rows below. Scoped to each panel's own existing data-panel
   attribute and the existing .po-lead class -- no new class, font or
   colour. Private Sessions and Duet Private Sessions share one panel
   (data-panel="private-sessions") with their lead sentences nested one
   level deeper inside each group, hence the descendant (not child)
   combinator for that panel. */
[data-panel="memberships"] > .po-lead,
[data-panel="class-packages"] > .po-lead {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}

[data-panel="private-sessions"] .po-lead {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}

/* Site header, brand lockup (site.header.butterfly): a small decorative
   monarch butterfly photo sits beside the "Pilates One / since 2008" logo
   lockup, before the main menu. The source file is a large photo, so it is
   scaled right down here to roughly the lockup's own height -- a quiet
   accent, not a competing image. Scoped strictly to this image's own
   data-cn-src attribute, so no other image, the logo, the "since 2008"
   text, the menu or any other element is touched. No background, border
   or box is added, so its transparency shows through. */
[data-cn-src="site.header.butterfly"] {
  display: inline-block;
  height: 2.25rem;
  width: auto;
  max-width: 2.5rem;
  margin-left: 0.65rem;
  object-fit: contain;
  flex-shrink: 0;
  background: none;
  border: none;
  box-shadow: none;
  vertical-align: middle;
}

/* Mobile header: shrink the same butterfly further so it stays a quiet
   accent next to the logo and never crowds the logo or the mobile menu
   toggle button. Scoped to the same attribute selector and this
   breakpoint only -- no other header element or wider layout is affected. */
@media (max-width: 640px) {
  [data-cn-src="site.header.butterfly"] {
    height: 1.35rem;
    max-width: 1.6rem;
    margin-left: 0.4rem;
  }
}

/* FAQ page (faq:faq-1): visual polish only, no wording changed.
   1) Each category ("Getting started", "Booking and policies", etc.) gets
      a soft panel so the six groups read as distinct blocks instead of one
      long list -- background is the site's existing --surface tone (the
      same soft off-white used by the po-section--surface modifier
      elsewhere), with the existing border colour and radius scale. The
      wrapping element itself, .po-faq__category, is a new plain
      structural div (no visual rules of its own beyond what is set here)
      added in the page markup purely to group each heading with its own
      items.
   2) Each question row tints to the existing --surface-deep shade on
      hover/focus, and the question text itself picks up the site's
      existing --primary accent colour, so each row reads as interactive.
   3) On larger screens the content column (.po-container--narrow, shared
      with the page's own "Frequently Asked Questions" heading) is widened
      a little so it breathes more -- still well short of the full
      75rem --container, and untouched below 1024px.
   All rules are scoped to [data-cn-section="faq:faq-1"] so no other
   section, page, or the shared header/footer is affected, and the page's
   hero (headline, intro paragraph, hero photo) sits outside this section
   and is untouched. */
[data-cn-section="faq:faq-1"] .po-faq__category {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

[data-cn-section="faq:faq-1"] .po-faq__category:last-child {
  margin-bottom: 0;
}

[data-cn-section="faq:faq-1"] .po-faq__category > .po-faq__group:first-child {
  margin-top: 0;
}

[data-cn-section="faq:faq-1"] .po-faq__item {
  border-radius: var(--radius);
  transition: background-color 0.15s ease;
}

[data-cn-section="faq:faq-1"] .po-faq__item:hover,
[data-cn-section="faq:faq-1"] .po-faq__item:focus-within {
  background-color: var(--surface-deep);
}

[data-cn-section="faq:faq-1"] .po-faq__q {
  transition: color 0.15s ease;
}

[data-cn-section="faq:faq-1"] .po-faq__item:hover > .po-faq__q,
[data-cn-section="faq:faq-1"] .po-faq__item:focus-within > .po-faq__q {
  color: var(--primary);
}

@media (max-width: 640px) {
  [data-cn-section="faq:faq-1"] .po-faq__category {
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius);
  }
}

@media (min-width: 1024px) {
  [data-cn-section="faq:faq-1"] .po-container--narrow {
    max-width: 58rem;
  }
}

/* FAQ page: each category heading (Getting started, Booking and policies,
   etc.) is shown in all caps via text-transform, so the underlying wording
   is untouched. Scoped to this section's own existing .po-faq__group class,
   so the page's main "Frequently Asked Questions" heading (which does not
   carry this class) and no other page is affected. */
[data-cn-section="faq:faq-1"] .po-faq__group {
  text-transform: uppercase;
}

/* Contact page hero title (po-page-hero--contact): match the typeface used
   in the site's navigation menu / brand lockup (the --font-soft token),
   rather than whatever the page-hero template otherwise applies. Scoped to
   this page's own hero modifier class, so no other page's hero and nothing
   else on this page is affected. */
.po-page-hero--contact .po-page-hero__title[data-cn-edit="hero.headline"] {
  font-family: var(--font-soft);
}

/* Memberships page hero title: same treatment as the Contact page hero --
   match the nav/brand lockup's serif font (--font-soft) instead of the
   page-hero template's default. Scoped to this page's own hero modifier
   class only. */
.po-page-hero--memberships .po-page-hero__title[data-cn-edit="hero.headline"] {
  font-family: var(--font-soft);
}

/* Testimonials page hero title: same treatment as the Contact and
   Memberships page heroes above -- match the nav/brand lockup's serif font
   (--font-soft) instead of the page-hero template's default. Scoped to
   this page's own hero modifier class only. */
.po-page-hero--testimonials .po-page-hero__title[data-cn-edit="hero.headline"] {
  font-family: var(--font-soft);
}

/* Testimonials page, Highlights section (cards:cards-1): the three LeBron
   James / "3 Kings" YouTube videos were not filling their reserved frame --
   the iframe sat at its small default size in the corner of a much larger
   empty box. Scoped to this page's own new .po-video-embed hook class on
   each video's wrapper, so no other video or page is affected. */
.po-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.po-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Same section, the three old tweet screenshots: these are long, short
   strips (roughly 5:1-6:1), not square, so forcing them into a square crop
   cut most of each one off. Scoped to this page's own new .po-tweet-shot
   hook class on each image's wrapper, so no other image or page is
   affected. */
.po-tweet-shot {
  aspect-ratio: auto !important;
  height: auto !important;
  display: block !important;
}
.po-tweet-shot img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* New Clients page, "New Client Specials" pricing panel (prose:prose-1):
   widen the panel on larger screens so each row's label, price and plus
   indicator sit on one line, instead of the label wrapping across three
   lines while empty space sits unused to its right. The "see all pricing"
   button, a direct child of the same panel, widens along with it. Scoped
   to this page's own new .po-private-options--wide hook class, so the
   similar panel on the Packages page and no other page or section is
   affected. Mobile (below 1024px) is untouched. */
@media (min-width: 1024px) {
  .po-private-options--wide {
    max-width: 34rem;
    width: 100%;
  }
  .po-private-options--wide .po-private-options__row {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: var(--space-4);
  }
  .po-private-options--wide .po-private-options__name {
    white-space: nowrap;
    flex: 1 1 auto;
  }
  .po-private-options--wide .po-private-options__price {
    white-space: nowrap;
  }
  .po-private-options--wide .po-btn--block {
    white-space: nowrap;
  }
}

/* Free Thank You page: the new simplified top title and subtitle (replacing
   the old hero image) should use the site's own title typeface and accent
   typeface, not this legacy page's old Oswald/Poppins fonts. Scoped to this
   page's own new .po-fty-title / .po-fty-subtitle hook classes, so no other
   page's heading or hero is affected. */
.po-fty-title {
  font-family: var(--font-display);
  line-height: 1.15;
}
@media (max-width: 640px) {
  .po-fty-title {
    font-size: 2.25rem;
  }
}
.po-fty-subtitle {
  font-family: var(--font-body);
  text-transform: uppercase;
  line-height: 1.5;
}

/* Mobile nav menu: give the "Book" button at the bottom of the open mobile
   menu room to breathe from the screen's bottom edge, so it doesn't sit
   flush against where the chat icon floats in that same corner. Scoped to
   this button's own existing data-cn-edit attribute, mobile breakpoint
   only -- no other button, page or breakpoint is affected. */
@media (max-width: 640px) {
  .po-mobile [data-cn-edit="site.header.cta_mobile"] {
    bottom: 5rem !important;
    margin-bottom: 5rem;
  }
}

/* Site-wide heading pass: one weight, one letter-spacing and one case for
   every page heading, in the site's serif (--font-soft), so headings match
   the Canva design. Section headings (h1/h2) and class names are caps;
   smaller headings keep their case but share weight and spacing. The two
   decorative lines (stronger_bodies_lead, moved_text_1) are excluded and
   handled below. */
main h1, main h2, main h3, main h4,
.po-h-display, .po-h-soft, .po-page-hero__title, .po-class__name {
  font-family: var(--font-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
}
main h1, main h2,
.po-h-display, .po-h-soft, .po-page-hero__title, .po-class__name {
  text-transform: uppercase;
}
main h1, .po-page-hero__title { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
main h2, .po-h-display, .po-h-soft { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
.po-class__name { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); margin-bottom: 0.5rem; }
[data-cn-section="faq:faq-1"] .po-container--narrow > h2,
[data-cn-section="faq:faq-1"] .po-section__head h2 { font-weight: 700; }

/* Decorative lines: the serif, sentence case, normal spacing. */
[data-cn-edit="prose.stronger_bodies_lead"],
[data-cn-edit="prose.moved_text_1"] {
  font-family: var(--font-soft);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Accent lines, matched to the Canva design: Cormorant bold, sentence case,
   no letter spacing, dark. The second selector is more specific so it beats
   the older monospace rule on the intro paragraph. */
[data-cn-edit="prose.moved_text_1"],
[data-cn-label="Pilates One – Where Movement Transforms Mind & Body"] .po-prose p.po-lead[data-cn-edit="prose.stronger_bodies_lead"],
[data-cn-edit="prose.stronger_bodies_lead"].po-lead {
  font-family: var(--font-soft) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-heading) !important;
}

/* Matched to the Canva settings screenshots (Home page).
   "Stronger bodies": Cormorant bold, capitals, wide letter spacing, small.
   Intro paragraph: Barlow Condensed with light letter spacing, centred. */
[data-cn-label="Pilates One – Where Movement Transforms Mind & Body"] .po-prose p.po-lead[data-cn-edit="prose.stronger_bodies_lead"],
[data-cn-section="prose:prose-1"] [data-cn-edit="prose.stronger_bodies_lead"] {
  text-transform: uppercase !important;
  letter-spacing: 0.35em !important;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem) !important;
  text-align: center;
}
[data-cn-label="Pilates One – Where Movement Transforms Mind & Body"] .po-prose p:not(.po-lead) {
  font-family: var(--font-body) !important;
  letter-spacing: 0.08em !important;
  color: var(--color-heading) !important;
  text-align: center;
}

/* Tighter rhythm between sections and picture rows. */
.po-section { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.po-classes { gap: 1.25rem; }

/* Site-wide pass 2: older page-specific rules in the main stylesheet were
   overriding the heading and body styles above. These use !important so one
   look applies everywhere. Colours are left alone (white hero titles and red
   class names stay). The two accent lines win over the body rule below
   because their selectors are more specific. */
main h1, main h2, main h3, main h4,
.po-page-hero__title, .po-class__name,
.po-classes .po-class__name,
.po-page-hero .po-page-hero__title {
  font-family: var(--font-soft) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
}
main h1, .po-page-hero__title { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem) !important; }
.po-class__name, .po-classes .po-class__name { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem) !important; }

main p, main li, main td, main dd, main label, main input, main textarea, main button, main summary,
.po-class__desc, .po-classes .po-class__desc, .po-lead, .po-prose p, .po-faq__q, .po-faq__a, .po-btn {
  font-family: var(--font-body) !important;
}

/* Pass 3: the "Rooted" accent line was losing to the body font rule, and
   section headings were still taking the older, larger size on some pages. */
.po-prose p[data-cn-edit="prose.moved_text_1"],
main .po-prose p[data-cn-edit="prose.moved_text_1"] {
  font-family: var(--font-soft) !important;
}
main h2, .po-section h2, .po-h-display, .po-h-soft, .po-section .po-section__head > h2 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem) !important;
}

/* Home page main headline (BUILT ON MOVEMENT. UNITED BY COMMUNITY.): keep it
   on ONE line on tablet and desktop. The heading row is allowed the full
   width of the container and the text scales with the screen so it always
   fits. On phones (640px and below) it may wrap, as before. */
@media (min-width: 641px) {
  [data-cn-section="prose:prose-1"] .po-section__head {
    max-width: none;
    width: 100%;
  }
  [data-cn-section="prose:prose-1"] h2[data-cn-edit="h2.5"] {
    white-space: nowrap;
    max-width: none;
    text-align: center;
    font-size: min(2.6rem, 3.2vw) !important;
  }
}

/* Home page "Rooted in traditional Pilates principles" line: centred on
   every screen size (it was only centred on phones). */
.po-prose p[data-cn-edit="prose.moved_text_1"],
main .po-prose p[data-cn-edit="prose.moved_text_1"] {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Contact band: keep the form on the left and the hours and location on the
   right on every screen wider than a phone, as on the original site. Only
   phones (640px and below) stack them. */
@media (min-width: 641px) {
  .po-band--contact .po-grid.po-grid--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
  }
}

/* ===== Pass 4: Canva match, now that Cormorant Garamond bold (700) loads ===== */

/* One true bold for every heading and the two accent lines. */
html body main h1, html body main h2, html body main h3, html body main h4,
html body .po-page-hero__title, html body .po-class__name,
html body .po-section h2[data-cn-edit], html body .po-section .po-section__head > h2,
html body .po-h-display, html body .po-h-soft, html body .po-h-section {
  font-family: var(--font-soft) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Wider content so picture grids use more of the page. */
:root { --container: 1360px; }

/* Class cards: bigger titles, tighter picture rows. */
html body .po-classes .po-class__name {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem) !important;
  margin-bottom: 0.35rem;
}
[data-cn-section="media:media-2"] .po-container { max-width: min(1500px, 94vw); }
.po-classes { gap: 1rem !important; row-gap: 1rem !important; }
.po-classes .po-class__body { padding-top: 0.75rem; }
.po-classes .po-class__desc { margin-top: 0.25rem; }

/* Studio-photo page heroes (everything except Private Sessions / Parties):
   centred title, soft shadow behind the words, and a small centred button. */
/* Per the Natalie call (10/28): only the Reformer Pilates Classes hero
   (/classes) is centred; the other studio-photo heroes keep their original
   layout but get the same soft shadow behind the words. */
html body .po-page-hero--classes .po-page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
html body .po-page-hero--classes .po-page-hero__inner {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  left: auto;
  right: auto;
}
html body .po-page-hero--classes .po-page-hero__title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 20em;
}
.po-page-hero:not(.po-page-hero--private) .po-page-hero__title {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.po-page-hero:not(.po-page-hero--private) a.po-btn--pill-light {
  font-size: 0.95rem !important;
  padding: 0.5rem 1.4rem !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  width: auto !important;
}
html body .po-page-hero--classes a.po-btn--pill-light { align-self: center; }

/* Phones: smaller buttons and tighter sections everywhere. */
@media (max-width: 640px) {
  a.po-btn--pill-light, .po-btn { font-size: 0.85rem !important; padding: 0.5rem 1.1rem !important; min-height: 0 !important; }
  .po-section { padding-top: 2rem; padding-bottom: 2rem; }
  html body main h2, html body .po-section h2[data-cn-edit] { font-size: clamp(1.5rem, 1.1rem + 2vw, 1.9rem) !important; }
  .po-classes { gap: 0.75rem !important; }
}

/* Make every section heading on the page identical, even where an older
   rule on one section gave it a different weight or spacing. */
.po-section h2[data-cn-edit], .po-section .po-section__head > h2 {
  font-family: var(--font-soft) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
}

/* Packages page (from the Natalie call): more space above the short intro
   line on each tab (New Clients, Memberships, Class Packages, Private
   Sessions), so it doesn't sit tight under the tab heading. */
.po-pricing-dashboard__panel > .po-lead,
[data-panel="private-sessions"] .po-lead {
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
}

/* FAQ questions in bold (Canva), on the FAQ page and on the Private
   Sessions / Private Parties FAQ sections. Answers keep the body font. */
.po-faq-band .po-faq__q,
[data-cn-section="faq:faq-1"] .po-faq__q {
  font-weight: 700 !important;
}

/* Tighter, consistent vertical rhythm (Natalie: "unusual or unnecessary
   extra spacing"). The section spacing token is used by every section in
   the main stylesheet; it was 56-96px, now about 37-60px. This file loads
   before the main stylesheet, so the rules below use "html body" to win.
   The decorative divider band keeps its curve but loses 30px of slack. */
html body .po-divider { padding-bottom: calc(var(--section-y) + 40px); }

/* Line heights: Barlow Condensed and Cormorant read loose at the old
   1.75-1.8, so body copy is 1.55 everywhere and the accent lines 1.35. */
html body main p, html body main li, html body .po-prose p, html body .po-lead,
html body .po-class__desc, html body .po-faq__a, html body .po-feature__copy p,
html body .po-hours p, html body .po-tile__body, html body .po-event__desc,
html body .po-review__excerpt, html body .po-list {
  line-height: 1.55;
}
html body .po-prose p[data-cn-edit="prose.moved_text_1"],
html body [data-cn-edit="prose.stronger_bodies_lead"] {
  line-height: 1.35 !important;
}
html body main h1, html body main h2, html body main h3,
html body .po-page-hero__title, html body .po-class__name {
  line-height: 1.12 !important;
}

/* Gaps inside sections: heading to content was 48px everywhere, now 32px;
   the "Rooted" line no longer adds its own 32px on top of the section
   spacing; the Reformer "what makes us different" items stack closer on
   phones; and on Packages the price list starts right under the page
   title instead of after two full section spacings. */
html body .po-section__head { margin-bottom: var(--space-6); }
html body .po-prose p[data-cn-edit="prose.moved_text_1"] { margin-top: 0; }
@media (max-width: 760px) {
  html body .po-reformer-diff__grid { gap: var(--space-5); }
}
html body .po-pricing-dashboard[data-cn-section="prose:prose-1"] { padding-top: 0; }
html body .po-pricing-dashboard__row { padding-block: var(--space-5); }

/* ===== Canva match (Carcin website design, pages 1 and 3) ===== */

/* Private Sessions / Private Parties FAQ: large serif title in sentence
   case, red serif "GOOD TO KNOW" label, questions in the serif bold. */
html body .po-faq-band .po-faq-band__title {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem) !important;
}
html body .po-faq-band .po-eyebrow {
  font-family: var(--font-soft) !important;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.14em;
}
html body .po-faq-band .po-faq__q,
html body [data-cn-section="faq:faq-1"] .po-faq__q {
  font-family: var(--font-soft) !important;
  font-size: 1.15rem;
}

/* FAQ page category headings (Getting started, Booking and policies...):
   small red serif labels as in Canva, not full-size section headings. */
html body .po-section h2.po-faq__group,
html body [data-cn-section="faq:faq-1"] h2.po-faq__group {
  font-size: 0.95rem !important;
  letter-spacing: 0.14em !important;
  color: var(--primary) !important;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* Home headline: widely spaced bold capitals on one line, as in Canva. */
/* Studio-photo heroes (Canva, Reformer Pilates Classes): the title and the
   small "Book A Class" button sit together near the bottom centre of the
   photo, not in the middle. Private Sessions / Parties keep their own look. */
html body .po-page-hero--classes {
  align-items: flex-end !important;
}
html body .po-page-hero--classes .po-page-hero__inner {
  justify-content: flex-end !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: var(--space-6) !important;
  padding-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem) !important;
  gap: 0.75rem !important;
}
@media (min-width: 761px) {
  /* Keep the button above the fold on a laptop screen, and size the title
     like Canva (about 44% of the photo width, not 56%). */
  html body .po-page-hero--classes {
    max-height: max(26rem, calc(100svh - 170px));
  }
  /* The Classes hero keeps its photo shape (1280:656) but never taller than
     the screen, and always full width. */
  html body .po-page-hero--classes {
    aspect-ratio: auto !important;
    width: 100%;
    height: min(51.25vw, max(26rem, calc(100svh - 170px)));
  }
  html body .po-page-hero--classes .po-page-hero__title {
    font-size: clamp(2rem, 1rem + 2.2vw, 3rem) !important;
  }
}
html body [data-cn-section="prose:prose-1"] h2[data-cn-edit="h2.5"] { letter-spacing: 0.12em !important; }

/* Phone Book | Call bar, now in the shared footer, gets a third "Chat"
   button. It opens Carcin's site chat (any [data-carcin-chat] does), and the
   chat hides its own round button while this one is on screen. The chat
   script marks <html data-carcin-chat-ready> while it runs, so with chat off
   or not loaded the button stays hidden and the bar is Book | Call. */
.po-stickybar__btn--chat { background: rgba(255, 255, 255, 0.12); margin-left: var(--space-3); }
html:not([data-carcin-chat-ready]) .po-stickybar__btn--chat { display: none; }

/* Reformer Pilates Classes hero: the text block is positioned absolutely and
   was pinned to the left edge (left: 0) at its 1360px max width, so on wider
   screens the centred title sat left of the page centre. Pin both sides and
   let auto margins centre the block. */
html body .po-page-hero--classes .po-page-hero__inner {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 641px) {
  html body [data-cn-section="prose:prose-1"] h2[data-cn-edit="h2.5"] {
    letter-spacing: 0.2em !important;
    font-size: min(2.2rem, 2.35vw) !important;
  }
}


/* ===== Canva page 6 (Natalie, 10/30): bigger body text =====
   Barlow Condensed is narrow, so the 16px body and 13-14px card text read
   small. Body copy now matches the "A space that moves you" lead (18px);
   text inside cards and small panels goes to 16px. Labels (eyebrows) stay. */
html body main p:not([class]),
html body main li:not([class]),
html body main .po-page-hero__desc,
html body main .po-faq__a p,
html body main .po-faq__a li,
html body .po-hours p,
html body main .po-table td {
  font-size: var(--font-size-md) !important;
  line-height: 1.55;
}
html body main .po-member__bio p,
html body main p.po-member__bio,
html body main .po-reformer-diff__item p,
html body main .po-why-celebrate__item-text,
html body main .po-how-it-works__text,
html body main .po-event__desc,
html body main .po-event__with,
html body main .po-event__date,
html body main .po-private-options__lead,
html body main .po-method__subtitle,
html body main .po-method__caption,
html body main .po-member__bio,
html body main .po-private-options .po-pricing-dashboard__row,
html body main .po-pricing-dashboard__row {
  font-size: var(--font-size-base) !important;
  line-height: 1.5;
}
@media (max-width: 640px) {
  html body main p:not([class]),
  html body main li:not([class]),
  html body main .po-faq__a p,
  html body .po-hours p { font-size: 1.0625rem !important; }
  /* Long team bios fit the photo card on phones: a touch smaller, and they scroll. */
  html body main .po-member__bio p, html body main .po-member__bio { font-size: 0.9375rem !important; }
  html body main .po-member__bio { overflow-y: auto; }
}