/* =====================================================================
   PYC STUDIOS - Design System
   Warm, editorial, earthy. Cream + sand + warm charcoal.
   Built static for cPanel; structured for an easy Elementor rebuild.
   --------------------------------------------------------------------
   Section map:
     1. Tokens (colours, type, spacing)
     2. Reset & base
     3. Layout helpers
     4. Typography
     5. Buttons
     6. Header / nav
     7. Hero
     8. Section headers (numbered eyebrow)
     9. Pillars / feature cards
    10. Media placeholders
    11. Story / split rows
    12. Intro-offer band
    13. Pricing
    14. Testimonial
    15. FAQ accordion
    16. Footer
    17. Reveal animation
    18. Responsive
   ===================================================================== */

/* 1. TOKENS ---------------------------------------------------------- */
:root{
  /* Brand palette - charcoal, sand and white (client, 9 Sep 2026, after the
     Studio Anatomy review: "remove the heavy pink/brown backgrounds").
     ONE accent for links and actions, and it is the charcoal itself: --bark
     and --clay used to be a brown and a terracotta and now both resolve to
     ink, so every old link/tag/star rule goes mono without being rewritten.
     The greige + terracotta palette this replaces is recorded verbatim in
     THEME-COLOURS.md if it needs reverting. */
  --cream:      #FFFFFF;  /* on-dark foreground (was the page ground until 17 Sep 2026) */
  --ground:     #E9E2DD;  /* page background - SAND (client, 17 Sep 2026: "Variant B"; s44) */
  --cream-2:    #E9E2DD;  /* SAND - section bands, now the same as the ground */
  --paper:      #FFFFFF;  /* cards / panels (border, not fill)    */
  --ink:        #2B2926;  /* charcoal                             */
  --ink-soft:   #44413C;
  --sand:       #D8CFC2;  /* decorative - quote marks             */
  --bark:       #2B2926;  /* accent = charcoal (was brown)        */
  --sand-wash:  #E9E2DD;  /* SAND - soft washes                   */
  --clay:       #2B2926;  /* accent = charcoal (was terracotta)   */
  --clay-deep:  #2B2926;
  --muted:      #6E6963;  /* secondary text (5.3:1 on white)      */
  --line:       #DED8CF;  /* hairline borders                     */
  --line-dark:  #B9B1A5;

  /* Type - one serif for headlines, one sans for everything else. Cormorant
     Garamond replaces Playfair Display (client: "decorative"); it is the
     benchmark site's face and sits here until the client's own brand font
     arrives, when only this line and the enqueue in functions.php change. */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Switzer", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Shape & depth - square corners everywhere, no lift shadows (client,
     9 Sep 2026). The tokens stay so nothing else needs rewriting; they are
     all zero. */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-pill: 0;
  --r-btn: 0;       /* buttons: square again (Steve, 9 Sep 2026 PM, back to the Studio Anatomy note); fills stay solid. Kept as its own token so button radius can move independently of cards/boxes */
  --shadow-soft: none;
  --shadow-card: none;

  /* Rhythm */
  --max:     1180px;
  /* 1500px, up from 880px (Steve, 9 Sep 2026): 880 read as too tight against
     the 1600px .container cap. Everything on --max-narrow widens with it:
     .container--narrow, .faq, .prose and .post-backlink. */
  --max-narrow: 1500px;
  --gutter:  clamp(20px, 5vw, 56px);
  --section: clamp(64px, 9vw, 132px);
  /* 112px, up from 88px (Steve, 9 Sep 2026): the logo grew to 78px and the
     header gained 18px of breathing space above the row. The homepage hero
     derives its own top offset from this var, so both move together. */
  --header-h: 112px;

  font-size: 16px;
/* Alpha channels and the few one-off colours, tokenised at go-live (5 Oct 2026)
   so no rule carries a raw colour. rgb(var(--x-rgb) / a) computes to the same
   rgba() the rules used to spell out. --ink-legacy-rgb is the pre-September
   charcoal that still sits under photo gradients; --grey-rgb the video-hero
   scrim; --paper-legacy-rgb the old near-white card fill behind captions. */
--white-rgb:        255 255 255;
--ink-rgb:          43 41 38;
--ink-legacy-rgb:   58 53 46;
--grey-rgb:         62 60 57;
--paper-legacy-rgb: 251 250 245;
--sage-rgb:         139 154 123;
--sand-light:       #E6E2DB;  /* eyebrows and labels on dark bands */
--error:            #a4372f;  /* form validation */

}

/* 2. RESET & BASE ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{ overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  /* Cormorant defaults to old-style (descending) figures; keep numerals lining
     everywhere so prices, stats and the countdown sit on the baseline. */
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--sand); color:var(--cream); }

/* 3. LAYOUT HELPERS -------------------------------------------------- */
/* Width strategy: content areas span 70% of the viewport, the nav header
   spans 80%. Below 1024px we fall back to a padded near-full width so it
   never collapses to a thin column on tablets/phones.
   Tweak --content-w / --header-w to taste; set a --*-max to cap on ultrawide. */
.container{ width:var(--content-w,90%); max-width:var(--content-max,1600px); margin-inline:auto; padding-inline:0; }
.container--narrow{ max-width:var(--max-narrow); }
.site-header .container{ width:var(--header-w,90%); max-width:var(--header-max,1600px); }
@media (max-width:560px){
  .container,
  .site-header .container{ width:auto; max-width:var(--max); padding-inline:var(--gutter); }
}
/* PADDING-TOP IS CAPPED AT 20px SITE-WIDE (Steve, 21 Sep 2026: "make sure
   padding-top clamps are no more than 20px ... site wide"). Every section-level
   rule below opens with a flat 20px and keeps its own bottom padding, so the gap
   between two sections is the upper one's bottom plus 20px. Do not reintroduce a
   padding-top clamp on a section; if a block needs air above it, give the block
   above it more padding-bottom. Coloured/photo bands and the footer keep their
   inset (the padding is the content inset inside a visible surface, not gap
   between sections): .section.has-photo, .soft-cta.has-photo, .site-footer,
   .hero--video (which centres itself in the viewport), plus every card and
   panel. */
.section{ padding-block:20px var(--section); }
.section--tight{ padding-block:20px clamp(44px,6vw,80px); }
.bg-cream2{ background:var(--cream-2); }
.bg-paper{ background:var(--paper); }
.bg-ink{ background:var(--ink); color:var(--cream); }
.bg-sand{ background:var(--sand-wash); }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4,.bg-ink .lead{ color:var(--cream); }
.bg-ink .muted{ color:rgb(var(--white-rgb) / .7); }
.bg-ink .eyebrow{ color:var(--sand-light); }
.center{ text-align:center; }
.stack > * + *{ margin-top:1rem; }
.hairline{ height:1px; background:var(--line); border:0; margin:0; }

/* 4. TYPOGRAPHY ------------------------------------------------------ */
/* Cormorant Garamond has a small x-height, so every display size runs about
   15% larger than the Playfair values it replaced to hold the same presence. */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.06;
  letter-spacing:0;
  margin:0 0 .5em;
  color:var(--ink);
}
/* ONE size per heading level, everywhere (Steve, 9 Sep 2026 PM - the client
   flagged "too many styles"). Section rules must not restate heading sizes.
   The clamps scale with the viewport, but at any given width every h1 / h2 /
   h3 on the site is identical. The only exception is the homepage hero h1,
   which is additionally capped by its container so "Where Strength Begins."
   holds one line (s25). */
h1, .display{
  /* 4rem at desktop - the size every inner-page hero already used via an inline
     style; the homepage hero comes down from 5.6rem to match (one h1 size). */
  font-size:clamp(2.4rem, 5.5vw, 4rem);
  font-weight:500;
  letter-spacing:0;
  line-height:1.02;
}
h2{ font-size:clamp(2.2rem, 4.4vw, 3.4rem); }
h3{ font-size:clamp(1.35rem, 1.6vw, 1.5rem); }
h4{ font-size:1.1rem; }
/* ONE paragraph: 16px, regular, 1.6, ink-soft - in every section and at every
   width (Steve, 9 Sep 2026 PM). .lead and .muted are that same paragraph and
   remain only because the markup uses them. No max-width on copy: text uses
   the width it is given. Dark surfaces recolour with their own rules. */
p{ margin:0 0 1rem; font-size:1rem; line-height:1.6; color:var(--ink-soft); }
.lead{ max-width:none; }
.muted{ color:var(--ink-soft); }
/* The one small-caps sans label: eyebrows, nav, buttons and tags all share
   this voice (uppercase Switzer, wide tracking, medium weight). */
.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1rem;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  /* Inert on the single-item eyebrows; it is what lets a separator list wrap
     onto a second line instead of overflowing (see .eb-seg below). */
  flex-wrap:wrap;
  position:relative;
}
/* The little hyphen rule that used to hang off every eyebrow (a 26px 1px bar in
   ::before, pulled into the margin on left-aligned headings) was removed at the
   client's request, Aug 2026. Arrows (.arrow, .nav-caret) are unaffected. */
.eyebrow--center{ justify-content:center; }
/* Separator lists, e.g. "Yoga · Mat & Reformer Pilates · Parsons Green · West
   London". pyc_eyebrow_html() (inc/helpers.php) renders one .eb-seg per segment
   and the separators come from here, so the flex item boundaries are the only
   wrap points: a line can never begin with a separator, and a two-word segment
   is never split. The dot is spaced with a margin rather than a space so it
   cannot become a wrap point itself, and .7rem pairs with the container gap for
   even spacing either side. None of this depends on invisible characters in the
   copy - the field can be retyped in wp-admin with ordinary spaces.
   Below 400px segments may wrap internally: an unusually long one would
   otherwise overflow a narrow phone, and .hero--video clips its overflow. The
   dot still cannot lead a line there, having no whitespace before it. */
.eyebrow .eb-seg{ white-space:nowrap; }
.eyebrow .eb-seg:not(:last-child)::after{ content:"·"; margin-left:.7rem; }
@media (max-width:400px){
  .eyebrow .eb-seg{ white-space:normal; }
}
/* Step 1/2/3 labels on the teacher-training apply flow, deliberately large and
   clay-accented so they stand out (client, 17 Aug 2026). Clay is the sanctioned
   accent for tags/labels; buttons stay mono. On ink, full --clay reads better
   (3.4:1, fine at this size/weight) than --clay-deep. */
/* Since 9 Sep 2026 the step labels are the ordinary eyebrow - same size,
   tracking and colour as every other eyebrow on the site (Steve, 9 Sep 2026 PM:
   one style for all eyebrows). The class stays in the markup for the flip below. */

em.accent{ font-style:italic; color:var(--ink); }

/* 5. BUTTONS --------------------------------------------------------- */
/* ONE button (client, 9 Sep 2026, Studio Anatomy benchmark; revised the same
   afternoon, Steve): a rounded pill with a SOLID fill and a small-caps sans
   label. Rounded buttons were a requirement, and the outlined version was hard
   to read over the video and photography, so every button is filled - ink on
   light surfaces, white on dark ones, and solid white with an ink border for
   the secondary .btn--outline. Only buttons round (--r-btn); cards, boxes and
   images stay square (--r-*). The variant classes below are kept so no
   template needs touching. */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--cream);
  --btn-bd:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.95rem 1.6rem;
  border-radius:var(--r-btn);
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-body);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  line-height:1;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn:hover{ --btn-bg:var(--ink-soft); --btn-fg:var(--cream); --btn-bd:var(--ink-soft); }
.btn .arrow{ transition:transform .25s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

/* Legacy variant names. .btn--accent is the ink primary; .btn--outline is the
   secondary - solid white with an ink border, fills ink on hover. */
.btn--accent{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }
.btn--accent:hover{ --btn-bg:var(--ink-soft); --btn-fg:var(--cream); --btn-bd:var(--ink-soft); }
.btn--outline{ --btn-bg:var(--paper); --btn-fg:var(--ink); --btn-bd:var(--ink); }
.btn--outline:hover{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }
/* On dark surfaces: solid white with ink text; sand on hover. */
.btn--on-dark, .btn--ghost-on-dark,
.bg-ink .btn, .site-footer .btn{ --btn-bg:var(--cream); --btn-fg:var(--ink); --btn-bd:var(--cream); }
.btn--on-dark:hover, .btn--ghost-on-dark:hover,
.bg-ink .btn:hover, .site-footer .btn:hover{ --btn-bg:var(--cream-2); --btn-fg:var(--ink); --btn-bd:var(--cream-2); }
/* .offer is a light bordered panel now (s12), so its old on-dark buttons go back to ink. */
.offer .btn--on-dark, .offer .btn--ghost-on-dark, .offer .btn--accent{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }
.offer .btn--on-dark:hover, .offer .btn--ghost-on-dark:hover, .offer .btn--accent:hover{ --btn-bg:var(--ink-soft); --btn-fg:var(--cream); --btn-bd:var(--ink-soft); }

.btn--sm{ padding:.78rem 1.25rem; font-size:.7rem; }
.btn--full{ width:100%; }


/* The "Explore ->" link: same small-caps voice as the button, underlined. */
.textlink{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:3px;
  transition:border-color .25s ease, gap .25s ease, color .25s ease;
}
.textlink:hover{ color:var(--muted); border-color:var(--muted); gap:.65rem; }
/* Inline content link - sits naturally within a sentence of body copy */
.ilink{ color:var(--ink); border-bottom:1px solid var(--line-dark); padding-bottom:1px; font-weight:500; transition:border-color .2s ease, color .2s ease; }
.ilink:hover{ border-color:var(--ink); }
/* Inline link on dark sections */
.bg-ink .ilink{ color:var(--cream); border-bottom-color:rgb(var(--white-rgb) / .5); }
.bg-ink .ilink:hover{ border-color:var(--cream); }

/* 5a. The sitewide promo bar (Early Bird countdown above the header) was
   removed on 9 Sep 2026 (client) - the countdown is in the Teacher Training
   hero (s24). header.php no longer prints it. */

/* 6. HEADER / NAV ---------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgb(var(--white-rgb) / .82);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  /* The stuck-state hairline is an INSET box-shadow, not a border (Steve, 9 Sep
     2026 PM): a border made the header --header-h + 1px tall, and the homepage
     hero, pulled up by exactly --header-h, left a 1px strip of white body
     showing above the video. */
  box-shadow:inset 0 -1px 0 transparent;
  transition:box-shadow .3s ease, background .3s ease;
}
.site-header.is-stuck{ box-shadow:inset 0 -1px 0 var(--line); }
/* Centred logo (client request, mirrors the live site): hamburger left, logo
   dead centre, CTA cluster right. The 1fr side columns are what keep the logo
   optically centred - the hamburger and the CTA cluster are different widths,
   so don't swap these for auto.
   The desktop nav row is gone (Steve, 9 Sep 2026) - the drawer is the menu at
   every width - so the old 1239/1240px handover no longer exists and column 1
   holds the .nav-toggle instead of the nav. .nav itself is position:fixed at
   all widths now, which takes it out of flow entirely, so it needs no track. */
.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; gap:clamp(1.2rem,2.6vw,2.2rem);
  min-height:var(--header-h);
  /* Row is vertically centred in --header-h in every state (Steve, 9 Sep 2026 PM:
     the 18px top padding added that morning read as more space above than below
     once the header was stuck on scroll). */
  padding-block:0;
}
/* grid-row:1 is load-bearing. Sparse auto-placement will not backtrack to an
   earlier column once a later one is claimed, so an unpinned item can land on
   a second row (logo ends up clipped above the header). Pin every item. */
.header-inner .nav-toggle{ grid-column:1; grid-row:1; justify-self:start; }
.header-inner .logo{ grid-column:2; grid-row:1; justify-self:center; }
.header-inner .header-cta{ grid-column:3; grid-row:1; justify-self:end; }
.logo{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
  font-size:1.18rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink);
}
.logo .mark{
  width:30px; height:30px; flex:0 0 auto;
  border-radius:50%;
  background:var(--ink);
  color:var(--cream);
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:.85rem; letter-spacing:0;
}
.logo small{ font-family:var(--font-body); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); display:block; margin-top:2px; }
.logo .logo-text{ line-height:1; }

/* .nav is the drawer panel - all of its rules live in 6a (after the
   breakpoints) and 27 (accordion groups). The desktop nav row and its
   underline hover went on 9 Sep 2026. */

.header-cta{ display:flex; align-items:center; gap:.8rem; }
/* Plain three-line glyph, no circle around it (client, 9 Sep 2026). */
.nav-toggle{
  display:flex;                                  /* every width now (Steve, 9 Sep 2026) */
  width:44px; height:44px; border:0; margin-left:-8px;
  border-radius:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center;
}
/* Whole-pixel bar height: 1.6px rounded to different physical pixels per bar
   (the middle one is the flex-centred span, the outers are offset pseudos),
   so the three lines rendered at visibly different weights (Steve, 17 Aug 2026). */
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:24px; height:2px; border-radius:0; background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle span{ position:relative; }
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }
/* No X morph while open (Steve, 9 Sep 2026 PM): the drawer slides in from the
   left and covers the hamburger, and carries its own .nav-close. */

/* 7. HERO ------------------------------------------------------------ */
.hero{ padding-top:20px; padding-bottom:var(--section); }
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}
.hero-copy{ max-width:34ch; }
.hero .display{ margin-bottom:.4em; }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:1.8rem; }
.hero-meta{ display:flex; gap:2rem; margin-top:2.6rem; }
.hero-meta .stat{ }
.hero-meta .num{ font-family:var(--font-display); font-size:1.7rem; color:var(--ink); display:block; line-height:1; }
.hero-meta .label{ font-size:.78rem; color:var(--muted); letter-spacing:.04em; }
.hero-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:14px;
  height:clamp(360px,46vw,540px);
}
.hero-media .media{ height:100%; }
.hero-media .media:first-child{ grid-row:span 2; }
.hero-media .media:nth-child(3){ grid-column:span 1; }

/* full-bleed alternative hero image */
.hero-single .hero-media{ display:block; height:clamp(380px,50vw,560px); }

/* 8. SECTION HEADERS ------------------------------------------------- */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-bottom:clamp(28px,4vw,56px);
}
.section-head h2{ margin-bottom:.3em; }
.section-num{
  font-family:var(--font-display);
  font-size:.95rem; color:var(--bark);
  letter-spacing:.04em;
}
.section-head--center{ flex-direction:column; align-items:center; text-align:center; }
.section-head--center .copy{ max-width:60ch; }

/* 9. PILLARS / FEATURE CARDS ---------------------------------------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,30px); }

.pillar{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.pillar:hover{ border-color:var(--ink); }
.pillar .media{ height:230px; border-radius:0; }
.pillar-body{ padding:1.6rem 1.6rem 1.9rem; display:flex; flex-direction:column; flex:1; }
.pillar-body h3{ margin-bottom:.4rem; }
.pillar-body p{ color:var(--ink-soft); }
.pillar-body .textlink{ margin-top:auto; padding-top:1rem; }
/* Stacked links in one pillar (TT "Step 3" card): only the first gets pushed to the bottom. */
.pillar-body .textlink + .textlink{ margin-top:0; padding-top:.55rem; }
/* "Read more" inside a pillar card (TT curriculum modules, 26 Aug 2026). Native
   <details>, styled to read like a .textlink; margin-top:auto pins it to the
   bottom of the card so a row of cards keeps its buttons on one line. */
.card-more{ margin-top:auto; padding-top:1rem; }
.card-more > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.86rem; font-weight:500; color:var(--bark);
  text-decoration:underline; text-underline-offset:3px;
}
.card-more > summary::-webkit-details-marker{ display:none; }
.card-more > summary::after{ content:"+"; font-size:1rem; line-height:1; }
.card-more[open] > summary::after{ content:"–"; }
.card-more > summary:hover{ color:var(--ink); }
.card-more p{ margin:.9rem 0 0; }
.card-more[open] > summary{ margin-bottom:.1rem; }

/* Learn more + Class timetable, side by side (26 Aug 2026 homepage pillars) */
.pillar-actions{ margin-top:auto; padding-top:1rem; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1.3rem; }
.pillar-actions .textlink{ margin-top:0; padding-top:0; }

/* 10. MEDIA PLACEHOLDERS -------------------------------------------- */
/* Drop real photography in later (Elementor) - these frames are styled
   so the layout reads as intentional even before images are added.    */
.media{
  position:relative;
  border-radius:0;
  background:var(--cream-2);
  overflow:hidden;
  isolation:isolate;
}
.media::after{ /* subtle grain so flat fills don't look empty */
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.media[data-label]::before{
  content:attr(data-label);
  position:absolute; inset:auto auto 14px 16px; z-index:2;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgb(var(--ink-legacy-rgb) / .5);
  background:rgb(var(--paper-legacy-rgb) / .7);
  padding:.35rem .6rem; border-radius:var(--r-pill);
  backdrop-filter:blur(2px);
}


/* When a real image is supplied: <div class="media"><img ...></div> */
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

/* 11. STORY / SPLIT ROWS -------------------------------------------- */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,72px); align-items:center;
}
.split--reverse .split-media{ order:2; }
.split-media{ height:clamp(340px,40vw,500px); }
/* Hairline-ruled list, no bullet marks (client, 9 Sep 2026: the dot bullets
   were one more competing element). */
.checklist{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:0; border-top:1px solid var(--line); }
.checklist li{ position:relative; padding:.75rem 0; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.checklist li::before{ display:none; }
/* Checklist on dark sections */
.bg-ink .checklist{ border-top-color:rgb(var(--white-rgb) / .2); }
.bg-ink .checklist li{ color:rgb(var(--white-rgb) / .86); border-bottom-color:rgb(var(--white-rgb) / .2); }

/* 12. INTRO-OFFER BAND ---------------------------------------------- */
/* A white panel with a hairline border since 9 Sep 2026 (client: no dark
   blocks - "a thin border instead of a fill"). It was the homepage ink band. */
.offer{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line);
  padding:clamp(32px,5vw,64px);
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,56px);
  align-items:center;
}
/* Same box as .offer minus its two-column grid (the homepage "Plan your first
   visit" section, the TT scholarship and faculty boxes). */
.panel{ background:var(--paper); color:var(--ink); border:1px solid var(--line); padding:clamp(32px,5vw,64px); }
.offer h2{ color:var(--ink); }
.offer .eyebrow{ color:var(--muted); }
.offer-cards{ display:grid; gap:14px; }
.offer-card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:1.3rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;   /* lets .offer-card-cta drop onto its own row below the price */
}
/* Per-card booking button. flex-basis:100% forces the wrap so it sits under the
   title/price row rather than squeezing in beside it. */
.offer-card-cta{ flex:1 0 100%; margin-top:.35rem; }
.offer-card h3{ color:var(--ink); margin:0 0 .15rem; }
.offer-card p{ margin:0; }
.offer-card .price{ font-family:var(--font-display); font-size:2rem; color:var(--ink); }

/* The quiet cousin of .offer, used on About below the teacher grid (client,
   26 Aug 2026: "a gentle CTA rather than a second homepage"). Paper panel,
   hairline border, centred, no prices - it invites rather than sells. */
.soft-cta{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(30px,4.5vw,56px) clamp(24px,4vw,64px);
  text-align:center;
}
.soft-cta h2{ margin-bottom:.55rem; }
/* No 52ch measure cap since 10 Sep 2026: it wrapped a sentence that fits on one
   line at desktop (Steve's standing rule on paragraph widths). */
.soft-cta p{ color:var(--muted); margin:0 auto; text-wrap:balance; }
.soft-cta p:last-child{ margin-bottom:0; }
.soft-cta .hero-ctas{ justify-content:center; margin-top:1.5rem; }
/* Dark variant (Steve, 9 Sep 2026, the Yoga intro-offer panel): .bg-ink already
   inverts the heading, eyebrow and button; the panel's own hairline and muted
   paragraph are the two things it does not reach. */
.soft-cta.bg-ink{ background:var(--ink); border-color:var(--ink); }
.soft-cta.bg-ink p{ color:rgb(var(--white-rgb) / .72); }

/* 13. PRICING -------------------------------------------------------- */
.pricing-hero{ padding-block:20px clamp(20px,3vw,32px); text-align:center; }
.pricing-hero .lead{ margin-inline:auto; }

/* 20px top and bottom, no clamp (Steve, 21 Sep 2026: the 40-72px clamp read as
   "quite large" once every section of a tab stacks on one page; the hairline and
   the heading margins do the separating). Keep any padding-top here at 20px or under. */
.price-block{ padding-block:20px; border-top:1px solid var(--line); }
.price-block:first-of-type{ border-top:0; }
.price-block-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:.4rem; }
.price-block-head .section-num{ font-size:1.05rem; }
/* Full container width since 26 Aug 2026 (client: the paragraphs "are squashed
   off to the left"). The 60ch measure suited a numbered list where the copy sat
   beside the number; with the numbers gone these read as section intros and
   should run the width of the card grid below them. */
.price-block .intro-line{ color:var(--muted); margin-bottom:2rem; }

.price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:clamp(14px,1.6vw,22px); }
/* A one or two card row would stretch to the full container width and dwarf the
   three and four card rows above it, so the grid itself is capped and centred.
   Added 17 Sep 2026 with the full-range sections (workshops is a single tile,
   online is two). */
.price-grid.price-grid--one{ max-width:340px; margin-inline:auto; grid-template-columns:1fr; } /* two classes: outranks the 700-1099px two-column hold */
.price-grid--few{ max-width:720px; margin-inline:auto; }
/* Six cards would break as five plus an orphan; a wider minimum makes three per
   row, so two even rows. The 700-1099px two-column hold below still wins there. */
.price-grid--wide{ grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }
/* "Needs Momence link" placeholder, 17 Sep 2026. A span, never an anchor: the
   studio sells the product but the client's price-list PDF gives no Momence link
   for it, so the tile shows the gap rather than a dead button. Dashed and muted
   so it cannot read as a live CTA. Give the card a real `cta` and drop
   `needs_link` once the link arrives. */
.btn--todo,
.btn--todo:hover{ --btn-bg:transparent; --btn-fg:var(--ink-soft); --btn-bd:var(--line); }
.btn--todo{ border-style:dashed; cursor:default; white-space:normal; }
.price-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:1.5rem 1.5rem 1.7rem;
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.price-card:hover{ border-color:var(--ink); }
/* Plain small-caps label, no wash behind it (client, 9 Sep 2026). */
.price-card .tag{
  align-self:flex-start;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  color:var(--muted); background:none;
  padding:0; margin-bottom:1rem;
}
.price-card h3{ margin:0 0 .2rem; }
.price-card .price{
  font-family:var(--font-display); font-size:2.5rem; color:var(--ink);
  line-height:1; margin:.5rem 0 .1rem;
}
.price-card .price span{ font-size:.9rem; color:var(--muted); font-family:var(--font-body); }
.price-card .desc{ margin:.7rem 0 1.3rem; flex:1; }
.price-card .desc strong{ color:var(--ink-soft); font-weight:600; }
.price-card .meta{ margin:0 0 1.1rem; }
/* Featured = the same white card with a 1px INK border, not an ink fill
   (client, 9 Sep 2026: thin border instead of a fill). */
.price-card.is-featured{ border-color:var(--ink); }
.price-card.is-featured .tag{ color:var(--ink); }
/* On a dark section the paper cards need their h3 back, .bg-ink h3 cascades cream into them. */
.bg-ink .price-card h3{ color:var(--ink); }


/* ---- Rich price cards (client wording round, 26 Aug 2026) ----------
   A card can now carry a second price line, a bullet list and two CTAs.
   .price-card--rich moves the flex:1 spacer off .desc and onto the list, so
   the buttons still bottom-align across a row of unequal cards. */
.price-card .price-alt{ margin:.35rem 0 0; }
.price-card .card-list, .type-tile .card-list{
  list-style:none; padding:0; margin:.9rem 0 1.35rem;
  display:grid; gap:.45rem; font-size:.84rem; line-height:1.4; color:var(--muted);
}
/* A short hairline dash marks each line - not a dot (client, 9 Sep 2026).
   .type-tile (s40, the practice pages' class-type tiles) shares the list. */
.price-card .card-list li, .type-tile .card-list li{ position:relative; padding-left:1.05rem; }
.price-card .card-list li::before, .type-tile .card-list li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:7px; height:1px; background:var(--ink);
}
.price-card--rich .desc{ flex:0 0 auto; margin-bottom:.2rem; }
.price-card--rich .card-list{ flex:1; align-content:start; }
.price-card-ctas{ display:grid; gap:.55rem; }
/* The global .btn is white-space:nowrap; these labels are short sentences. */
.price-card-ctas .btn{ white-space:normal; text-align:center; line-height:1.25; padding-block:.8rem; }

/* Sub-heading under a block's h2, and the small print under its card grid. Both
   are ordinary paragraphs since 9 Sep 2026 PM (Steve: one paragraph style). */
.price-block-sub{ margin:.15rem 0 .7rem; }
.price-block .intro-line p{ margin:0 0 .8rem; }
.price-block .intro-line p:last-child{ margin-bottom:0; }
.price-note{ margin:clamp(18px,2.4vw,28px) 0 0; }
/* One button centred under a card grid (pyc_price_block's after_cta). */
.price-block-cta{ display:flex; justify-content:center; margin-top:clamp(18px,2.4vw,28px); }
/* "All times are London time" above the Momence schedules (pyc_schedule_tz()). */
.schedule-tz{ margin:0 0 14px; color:var(--muted); text-align:left; }

/* Four cards is now the widest grid on the page. Hold two-up through the
   tablet range rather than letting auto-fit squeeze to 235px columns. */
@media (min-width:700px) and (max-width:1099px){
  .price-grid{ grid-template-columns:repeat(2,1fr); }
}

.price-actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:clamp(28px,4vw,48px); }


/* 14. TESTIMONIAL ---------------------------------------------------- */
.quote{
  text-align:center; margin-inline:auto;
}
.quote blockquote{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1.22;
  letter-spacing:-.01em; margin:0 auto;
}
.quote .who{ margin-top:1.6rem; }


/* 15. FAQ ACCORDION -------------------------------------------------- */
.faq{ max-width:var(--max-narrow); margin-inline:auto; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:1.4rem 0; font-size:1.3rem; color:var(--ink); font-family:var(--font-display);
}
.faq-q .ico{ flex:0 0 auto; width:22px; height:22px; position:relative; }
.faq-q .ico::before,.faq-q .ico::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--bark);
  transition:transform .3s ease, opacity .3s ease;
}
.faq-q .ico::before{ width:14px; height:1.5px; transform:translate(-50%,-50%); }
.faq-q .ico::after{ width:1.5px; height:14px; transform:translate(-50%,-50%); }
.faq-item.is-open .faq-q .ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
/* No measure cap: the answer runs the full row width and wraps only when it
   has to (Steve, 9 Sep 2026: "don't line break the paragraph when not needed"). */
.faq-a-inner{ padding:0 0 1.4rem; color:var(--muted); }

/* 16. FOOTER --------------------------------------------------------- */
.site-footer{ background:var(--ink); color:var(--cream); padding-block:clamp(56px,7vw,96px) 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.footer-brand .logo{ color:var(--cream); }
.footer-brand .logo .mark{ background:var(--cream); color:var(--ink); }
.footer-brand p{ color:rgb(var(--white-rgb) / .6); margin-top:1.2rem; }
/* "Formerly The Power Yoga Company" under the footer logo (client, 17 Sep 2026):
   the one .eyebrow, colour-flipped for the ink footer like .footer-label. */
.footer-brand .footer-formerly{ color:rgb(var(--white-rgb) / .5); margin:.6rem 0 0; }
/* Footer column labels are ordinary eyebrows (footer.php prints <p class="eyebrow footer-label">, was <h4>; Steve, 9 Sep 2026 PM) - only the colour flips for the ink footer. */
.footer-col .footer-label{ color:rgb(var(--white-rgb) / .5); margin:0 0 1.1rem; }
.footer-col a, .footer-col p{ display:block; color:rgb(var(--white-rgb) / .82); margin-bottom:.7rem; transition:color .2s ease; }
.footer-col a:hover{ color:var(--cream); }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:clamp(40px,5vw,72px); padding-top:1.6rem;
  border-top:1px solid rgb(var(--white-rgb) / .14);
  font-size:.82rem; color:rgb(var(--white-rgb) / .55);
}
.footer-bottom a{ color:rgb(var(--white-rgb) / .7); }

/* 17. REVEAL ANIMATION ---------------------------------------------- */
/* Progressive enhancement: content is visible by default, and only hidden
   for the animation once JS confirms support (html.js). No JS = no blank. */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* 18. BOOKING -------------------------------------------------------- */
.booking-embed{
  border:1px dashed var(--line-dark);
  background:
    repeating-linear-gradient(135deg, transparent, transparent 14px, rgb(var(--sage-rgb) / .05) 14px, rgb(var(--sage-rgb) / .05) 28px),
    var(--paper);
  border-radius:var(--r-lg);
  padding:clamp(40px,7vw,96px) clamp(24px,4vw,48px);
  text-align:center;
}
.booking-embed .pill{ display:inline-block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bark); background:var(--sand-wash); padding:.4rem .8rem; border-radius:var(--r-pill); margin-bottom:1.4rem; }
.booking-embed code{ background:var(--cream-2); padding:.15rem .45rem; border-radius:6px; font-size:.85em; }
.booking-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin-top:clamp(32px,4vw,56px); }
.step{ text-align:left; }
.step .n{ font-family:var(--font-display); font-size:1.6rem; color:var(--bark); display:block; margin-bottom:.4rem; }

/* 19. RESPONSIVE ----------------------------------------------------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ max-width:46ch; }
  .hero-media{ height:clamp(320px,60vw,440px); }
  .offer{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
}
/* 6a. DRAWER MENU - every width (Steve, 9 Sep 2026) ------------------
   A side panel, not a full-width sheet (Steve, 9 Sep 2026 PM; benchmark
   studioanatomy.co.uk): slides in from the left over a dimmed page, 360px wide
   (86vw on narrow phones), full height, its own X top right. header.php
   prints .nav and .nav-scrim OUTSIDE .site-header - the header's
   backdrop-filter would otherwise be the containing block for these fixed
   boxes. Parent items are accordion groups (27). Stays in the DOM while
   closed so it can animate; visibility keeps the closed links out of the tab
   order and away from stray taps. */
.nav{
  position:fixed; top:0; bottom:0; left:0; z-index:66;
  width:min(360px, 86vw);
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:var(--cream); border-right:1px solid var(--line);
  padding:.9rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
  transform:translateX(-100%); visibility:hidden;
  transition:transform .36s cubic-bezier(.22,.61,.36,1), visibility .36s;
}
body.nav-open .nav{ transform:none; visibility:visible; }
/* dimmed page behind the panel; a tap on it closes the menu (main.js) */
.nav-scrim{
  position:fixed; inset:0; z-index:65;
  background:rgb(var(--ink-rgb) / .42);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .36s ease, visibility .36s;
}
body.nav-open .nav-scrim{ opacity:1; visibility:visible; pointer-events:auto; }
body.nav-open{ overflow:hidden; }
/* Rows: the small-caps sans label voice (client, 9 Sep 2026), hairline under
   each. The same rule dresses the accordion <button>s so they match the links. */
.nav a:not(.btn), .nav .nav-sub-toggle{
  display:block; width:100%; padding:1rem 0; margin:0;
  border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent;
  font-family:var(--font-body); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; line-height:1.3; text-align:left; color:var(--ink); white-space:normal;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .25s ease;
}
.nav a:not(.btn):hover, .nav .nav-sub-toggle:hover{ color:var(--muted); }
/* close (X) - bare glyph, top right of the panel. flex:0 0 auto matters: the
   panel is a column flex box that can overflow on short screens, and this
   button's only content is two absolutely positioned bars, so flex-shrink
   would squash it flat. */
.nav .nav-close{ display:grid; place-items:center; align-self:flex-end; flex:0 0 auto; position:relative; width:42px; height:42px; margin:0 -10px .3rem 0; border:0; border-radius:0; background:transparent; cursor:pointer; }
.nav-close::before, .nav-close::after{ content:""; position:absolute; width:20px; height:1.6px; background:var(--ink); border-radius:0; }
.nav-close::before{ transform:rotate(45deg); }
.nav-close::after{ transform:rotate(-45deg); }
/* Logged-in views: sit below the fixed admin bar (46px; 32px from 783px up). */
body.admin-bar .nav{ top:46px; }
@media (min-width:783px){ body.admin-bar .nav{ top:32px; } }
/* ≤600px WordPress switches #wpadminbar to position:absolute so it scrolls
   away with the page; pin the panel to the top and pad instead (Steve, 17 Aug 2026). */
@media (max-width:600px){ body.admin-bar .nav{ top:0; padding-top:calc(.9rem + 46px); } }
@media (max-width:760px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split--reverse .split-media{ order:0; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  /* ...but a deliberately centred head stays centred: this rule comes after
     .section-head--center in the sheet and was un-centring it below 790px,
     leaving text-align:center copy sitting in a left-aligned column
     (10 Sep 2026). */
  .section-head--center{ align-items:center; }
  .booking-steps{ grid-template-columns:1fr; }
  .price-actions{ flex-direction:column; }
  .price-actions .btn{ width:100%; }
}
@media (max-width:560px){
  .hero-media{ grid-template-columns:1fr; grid-template-rows:1fr; }
  .hero-media .media:not(:first-child){ display:none; }
  .hero-media{ height:300px; }
  .footer-top{ grid-template-columns:1fr; }
  /* The card stacks here, but `flex-wrap:wrap` plus the CTA's `flex:1 0 100%`
     basis meant that in COLUMN direction the button wrapped into a second
     flex column beside the card rather than onto its own row, and hung off
     the right edge of the viewport (found in the 17 Sep 2026 sweep, the only
     horizontal overflow on the site). Stacked and full width instead. */
  .offer-card{ flex-direction:column; align-items:flex-start; flex-wrap:nowrap; }
  .offer-card-cta{ flex:0 0 auto; align-self:stretch; }
}

/* =====================================================================
   20-23. ADDITIONS - logo image, socials, IG feed
   (the announcement bar lived here; removed on client request)
   ===================================================================== */

/* 21. LOGO IMAGE ---------------------------------------------------- */
/* Fixed display size, width:auto -> native 774x400 aspect ratio preserved
   (never distorted, never responsively rescaled). */
.logo-img{ height:78px; width:auto; display:block; }
.logo-img--light{ filter:brightness(0) invert(1); height:74px; }
.footer-brand .logo{ display:inline-block; }

/* 22. SOCIAL ICON BUTTONS ------------------------------------------- */
.social{ display:inline-flex; align-items:center; gap:.5rem; }
/* Bare glyphs, no circles (client, 9 Sep 2026). */
.social a{
  width:34px; height:34px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:0;
  border:0; color:var(--ink);
  transition:color .25s ease;
}
.social a:hover{ color:var(--muted); }
.social svg{ display:block; width:17px; height:17px; fill:currentColor; }
.social--header a{ width:34px; height:34px; }
.site-footer .social a{ color:var(--cream); }
.site-footer .social a:hover{ color:rgb(var(--white-rgb) / .65); }
.social--footer{ margin-top:1.4rem; }
/* .social--drawer, .nav-cta and .nav-close are drawer parts - see the block
   below and 6a. They used to be display:none outside the mobile drawer. */

/* 23. INSTAGRAM FEED ------------------------------------------------ */
.ig-head .textlink{ white-space:nowrap; }
.ig-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.ig-tile{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--r-md); background:var(--cream-2);
}
.ig-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.ig-tile:hover img{ transform:scale(1.06); }
.ig-cap{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:flex-end;
  padding:.95rem; font-size:.72rem; line-height:1.4; color:var(--cream);
  background:linear-gradient(180deg, rgb(var(--ink-legacy-rgb) / 0) 38%, rgb(var(--ink-legacy-rgb) / .85));
  opacity:0; transition:opacity .35s ease;
}
.ig-tile:hover .ig-cap{ opacity:1; }
.ig-mark{ position:absolute; top:.7rem; right:.75rem; width:18px; height:18px; fill:var(--cream); z-index:4; opacity:0; transition:opacity .35s ease; }
.ig-tile:hover .ig-mark{ opacity:.95; }
/* Drawer foot (Steve, 9 Sep 2026 PM): Login (outlined) above Book Now (ink),
   then the two socials centred under them. margin-top:auto sinks the block to
   the bottom of the panel when the list is short; it flows normally when the
   list is taller than the screen. Header socials show at every width down to
   560px (the ≤560px rule below drops them; the drawer copy carries on). */
.nav .nav-cta{ display:flex; flex-direction:column; gap:.7rem; margin-top:auto; padding-top:1.8rem; }
/* Explicit background/colour, not only the --btn-* vars: a link-colour rule
   with more specificity than .btn used to win here and left Book Now's label
   the same ink as its fill (Steve, 9 Sep 2026 PM). */
.nav .nav-cta .btn{ width:100%; justify-content:center; padding:1.05rem 1.4rem; font-size:.76rem; --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bd); }
.nav .nav-cta .btn:hover{ --btn-bg:var(--ink-soft); --btn-fg:var(--cream); --btn-bd:var(--ink-soft); }
.nav .nav-cta .btn--login{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--ink); }
.nav .nav-cta .btn--login:hover{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }
.nav .social--drawer{ display:flex; justify-content:center; gap:1rem; padding-top:1.3rem; }
.nav .social a{ display:grid; width:38px; height:38px; padding:0; border:0; color:var(--ink); }
.nav .social a:hover{ color:var(--muted); }
/* BOOK and NOW are separate spans; flex drops the space between them, so a
   word-space-sized gap stands in for it. */
.site-header .btn--book{ gap:.45em; }
/* 950px and below the header keeps hamburger + logo + Book Now only (client,
   2 Oct 2026): the socials and sign-in circle made the right track wider than
   the hamburger's and pulled the logo off centre. The drawer carries a copy.
   Equal minmax(0,1fr) side tracks keep the logo dead centre; minmax(0,...)
   stops the button widening its own track. */
@media (max-width:950px){
  .social--header{ display:none; }
  .header-inner{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
}
/* Phones: Book Now stays on one line (it used to stack BOOK / NOW), so the logo
   is a touch smaller and the gaps and button padding are trimmed to give the
   button room in its track without crowding the logo. */
@media (max-width:560px){
  .header-inner{ gap:.75rem; }
  .site-header .logo-img{ height:58px; }
  .site-header .btn--book{ padding:.7rem .9rem; }
}
@media (max-width:400px){
  .site-header .logo-img{ height:52px; }
}
@media (max-width:360px){
  .header-inner{ gap:.5rem; }
  .site-header .logo-img{ height:44px; }
  .site-header .btn--book{ padding:.65rem .7rem; }
}
@media (max-width:340px){
  .site-header .logo-img{ height:40px; }
  .site-header .btn--book{ padding:.6rem .55rem; }
}
/* Live Smash Balloon feed: one row of seven squares (client, 2 Oct 2026). The
   plugin's header, Load More and Follow buttons are hidden because the section
   head above carries the handle and the Follow button. Builder feeds ignore
   shortcode settings, so the row is set here; !important beats the plugin's
   own column rules. Under 760px the same row scrolls sideways, about three
   and a half squares in view, so it stays one line without tiny thumbnails. */
.ig-live #sb_instagram{ padding:0 !important; }
.ig-live #sb_instagram .sb_instagram_header,
.ig-live #sb_instagram #sbi_load{ display:none !important; }
.ig-live #sb_instagram #sbi_images{
  display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:10px !important; padding:0 !important; width:100% !important;
}
.ig-live #sb_instagram #sbi_images > .sbi_item{ width:auto !important; padding:0 !important; margin:0 !important; }
.ig-live #sb_instagram #sbi_images > .sbi_item:nth-child(n+8){ display:none !important; }
@media (max-width:760px){
  .ig-live #sb_instagram #sbi_images{
    grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:28%;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .ig-live #sb_instagram #sbi_images::-webkit-scrollbar{ display:none; }
  .ig-live #sb_instagram #sbi_images > .sbi_item{ scroll-snap-align:start; }
}
@media (max-width:1000px){ .ig-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:460px){ .ig-grid{ grid-template-columns:repeat(2,1fr); } }

/* 24. COUNTDOWN TIMER ----------------------------------------------- */
.countdown{
  display:flex; flex-wrap:wrap; gap:clamp(.5rem,1.6vw,1.1rem);
  justify-content:center; margin:clamp(1.6rem,3vw,2.4rem) 0;
}
.cd-unit{
  min-width:clamp(70px,11vw,118px);
  padding:clamp(.8rem,1.6vw,1.2rem) .5rem;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--paper); text-align:center;
}
.cd-num{
  display:block; font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.4rem); line-height:1; color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums; letter-spacing:0;
}
.cd-label{
  display:block; margin-top:.55rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--muted);
}
.cd-ended{ display:none; }
.countdown.is-ended{ display:none; }
.countdown.is-ended + .cd-ended{
  display:inline-block; font-family:var(--font-display);
  font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--bark); margin:1.6rem 0;
}
/* dark-surface variant */
.bg-ink .cd-unit{ border-color:rgb(var(--white-rgb) / .18); background:rgb(var(--white-rgb) / .05); }
.bg-ink .cd-num{ color:var(--cream); }
.bg-ink .cd-label{ color:rgb(var(--white-rgb) / .6); }
.bg-ink .countdown.is-ended + .cd-ended{ color:var(--sand-light); }

/* 25. VIDEO HERO (homepage only) ------------------------------------ */
.hero--video{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;          /* fills the viewport on every device (Steve, 9 Sep 2026 PM); svh so the mobile URL bar does not push the fold */
  margin-top:calc(-1 * var(--header-h));        /* slide up under the transparent header */
  padding:calc(var(--header-h) + 7vh) 0 10vh;
  display:flex; align-items:center; justify-content:center;  /* centre both axes; inner fills width so text wraps */
  background:var(--cream-2);                     /* light cream behind the video */
}
/* Scroll cue (Steve, 9 Sep 2026 PM, as on studioanatomy.co.uk): a thin down arrow
   centred at the foot of the hero, gently bobbing, linking to #below-hero - the
   0-height anchor printed straight after the hero, offset by the sticky header
   so the directions row lands just beneath it. */
.hero-scroll{ position:absolute; left:50%; bottom:clamp(16px,3vh,32px); z-index:3; width:44px; height:44px; display:grid; place-items:center; color:rgb(var(--white-rgb) / .85); animation:hero-scroll-bob 2.6s ease-in-out infinite; transition:color .25s ease; }
.hero-scroll:hover{ color:var(--cream); }
.hero-scroll svg{ width:24px; height:24px; }
.hero-video:not(.is-playing) ~ .hero-scroll{ color:var(--ink-soft); }
@keyframes hero-scroll-bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }
@media (prefers-reduced-motion:reduce){ .hero-scroll{ animation:none; transform:translateX(-50%); } }
.hero-anchor{ height:0; scroll-margin-top:var(--header-h); }
/* Fade-in over the cream pre-roll panel. With the mp4 this is purely cosmetic -
   it just softens the switch from cream to footage. The old asymmetric timing
   (slow lift / instant drop) existed only to hide YouTube's centre glyph and is
   no longer needed. */
.hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; opacity:0; transition:opacity .5s ease; }
.hero-video.is-playing{ opacity:1; transition:opacity .7s ease; }
/* Self-hosted mp4. object-fit:cover does all the work the old iframe needed
   viewport-unit gymnastics for, and there's no title strip to crop away, so
   the 1.28 scale-up is gone too - the footage fills the hero at native size. */
.hero-video video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  border:0; pointer-events:none;
}
/* Dark scrim (8 Sep 2026, supersedes the earlier warm light version): one
   neutral-dark gradient, heavier at the top and bottom to hold the text and
   lighter through the middle so the footage still reads. Dense enough on its
   own for phones, so the old mobile-only deepening rule is gone. */
/* Flat grey transparent filter (client, 9 Sep 2026: "a gray transparent
   filter overlay on the homepage video to improve text readability"). One
   even tone, like the benchmark, rather than the earlier top/bottom gradient. */
.hero-video-overlay{
  position:absolute; inset:0; z-index:1;
  background:rgb(var(--grey-rgb) / .52);
}
/* Pre-roll state. Before the video lifts its curtain the hero is a plain light
   cream panel (client request - the old fallback was a dark brown flash). White
   text is unreadable on cream, so while .hero-video lacks .is-playing we:
     1. drop the warm scrim to almost nothing, and
     2. flip the copy to charcoal.
   Both sit on the same .7s ease as the curtain, so the cream-with-dark-text
   hero crossfades into video-with-white-text as one movement. Selectors are
   sibling-based because .hero-video is the element JS toggles. */
.hero-video:not(.is-playing) + .hero-video-overlay{ background:none; }
.hero-video:not(.is-playing) ~ .hero-video-inner{ color:var(--ink-soft); }
.hero-video:not(.is-playing) ~ .hero-video-inner .display{ color:var(--ink); }
.hero-video:not(.is-playing) ~ .hero-video-inner .lead{ color:var(--muted); }
.hero-video:not(.is-playing) ~ .hero-video-inner .eyebrow{ color:var(--muted); }
.hero-video:not(.is-playing) ~ .hero-video-inner .hero-meta .num{ color:var(--ink); }
.hero-video:not(.is-playing) ~ .hero-video-inner .hero-meta .label{ color:var(--muted); }
/* The hero CTA is .btn--on-dark (solid white) since 9 Sep 2026 PM (Steve swapped
   it with the header's charcoal Book Now). Before the video starts the hero is a
   cream panel, so give the white button an ink border there or it vanishes. */
.hero-video:not(.is-playing) ~ .hero-video-inner .btn--on-dark{ --btn-bd:var(--ink); }
.hero-video:not(.is-playing) ~ .hero-video-inner .hd-label,
.hero-video:not(.is-playing) ~ .hero-video-inner .hd-app{ color:var(--ink-soft); border-color:var(--line-dark); }
.hero-video-overlay,
.hero-video-inner, .hero-video-inner *{ transition:color .7s ease, background-color .7s ease, border-color .7s ease; }

/* 72rem, not the old 54rem (Steve, 9 Sep 2026 PM): the h1 went UPPERCASE, which
   is 41% wider than sentence case (measured: 12.7em vs 9.0em), so a 54rem column
   capped it at ~65px and it could not be made bigger while holding one line. */
.hero-video-inner{ position:relative; z-index:2; width:90%; text-align:center; color:var(--cream); max-width:72rem; container-type:inline-size; }
/* The hero h1 stays on ONE line at every width (client, 9 Sep 2026). "Where
   strength begins." measures 9.96em in Playfair Display at -.02em tracking, so
   9.7cqi of the hero column always leaves the line a few per cent of headroom,
   while the 5rem cap keeps the design's ceiling on wide screens. cqi and not vw
   because the column is 90% wide with its own gutter on phones. The column was
   62ch before this - too narrow to hold 5rem on one line, and the video hero
   carries no .lead paragraph that needed the tighter measure. */
/* The ONE heading on the site allowed its own size (Steve, 9 Sep 2026 PM):
   ~83px at desktop against the 4rem every other h1 uses. TITLE CASE, not caps
   (Steve, 9 Sep 2026 PM, "make it title case exactly as i sent it") - it prints
   exactly as stored in ACF (page 62 hero.heading). It must hold one line, hence
   min(clamp, cqi). 7.2cqi was measured for the old all-caps string at 13.16em;
   title case is ~9.3em, so the fit now has plenty of headroom and the rendered
   size is unchanged. Re-measure (scratchpad/probe-hero.mjs) if the copy grows. */
.hero-video-inner .display{
  color:var(--cream);
  white-space:nowrap;
  letter-spacing:.02em;
  font-size:min(clamp(1.9rem, 6.6vw, 5.2rem), 7.2cqi);
}
.hero-video-inner .lead{ color:rgb(var(--white-rgb) / .92); margin-inline:auto; }
/* The standard eyebrow - one style for all eyebrows (Steve, 9 Sep 2026 PM);
   only the colour flips for the video. The .eb-seg segments handle wrapping. */
.hero-video-inner .eyebrow{ color:rgb(var(--white-rgb) / .85); justify-content:center; }
.hero-video-inner .hero-ctas{ justify-content:center; margin-top:1.8rem; }
/* Stack the Book / Get-directions buttons on mobile instead of side by side */
@media (max-width:560px){ .hero-video-inner .hero-ctas{ flex-direction:column; align-items:center; gap:1rem; } }
.hero-video-inner .hero-meta{ justify-content:center; margin-top:2.4rem; }
/* The stat row is scaled up on the homepage only (Steve, 9 Sep 2026); the same
   .hero-meta on the inner-page heroes keeps its 1.7rem/.78rem sizing. Three
   classes deep, so the phone-side trims in wp-extras.css are scoped to match. */
.hero-video-inner .hero-meta .num{ color:var(--cream); font-size:2.1rem; }
.hero-video-inner .hero-meta .label{ color:rgb(var(--white-rgb) / .72); font-size:.9rem; }

/* Transparent header over the video (homepage only) */
.home .site-header{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.home .site-header .logo-img{ filter:brightness(0) invert(1); }
.home .site-header .social a{ color:var(--cream); }
.home .site-header .social a:hover{ color:rgb(var(--white-rgb) / .7); }
/* Book Now over the video: solid charcoal with white text, like everywhere else;
   the hero's Class Timetable is the white one (Steve, 9 Sep 2026 PM - swapped).
   Resolved through the --btn-* vars so the .btn--book rule in s27 still applies. */
.home .site-header .btn--sm{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }
.home .site-header .btn--sm:hover{ --btn-bg:var(--ink-soft); --btn-fg:var(--cream); --btn-bd:var(--ink-soft); }
.home .site-header .nav-toggle span,
.home .site-header .nav-toggle span::before,
.home .site-header .nav-toggle span::after{ background:var(--paper); }
/* solid state once the page is scrolled */
.home .site-header.is-stuck{ background:rgb(var(--white-rgb) / .9); backdrop-filter:saturate(150%) blur(10px); -webkit-backdrop-filter:saturate(150%) blur(10px); box-shadow:inset 0 -1px 0 var(--line); }
.home .site-header.is-stuck .logo-img{ filter:none; }
.home .site-header.is-stuck .social a{ color:var(--ink); }
.home .site-header.is-stuck .social a:hover{ color:var(--muted); }
.home .site-header.is-stuck .btn--sm{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }
.home .site-header.is-stuck .btn--sm:hover{ --btn-bg:var(--ink-soft); --btn-fg:var(--cream); --btn-bd:var(--ink-soft); }
.home .site-header.is-stuck .nav-toggle{ border-color:var(--line-dark); }
.home .site-header.is-stuck .nav-toggle span,
.home .site-header.is-stuck .nav-toggle span::before,
.home .site-header.is-stuck .nav-toggle span::after{ background:var(--ink); }

/* Pre-roll header. Until js/main.js puts .hero-live on <body> (i.e. the hero
   video has actually started) the hero is a light cream panel, so the header's
   light-on-dark treatment above would be cream on cream. Same dark-on-light
   values as .is-stuck, minus the solid background - the hero stays flat cream. */
body.home:not(.hero-live) .site-header .logo-img{ filter:none; }
body.home:not(.hero-live) .site-header .social a{ color:var(--ink); }
body.home:not(.hero-live) .site-header .social a:hover{ color:var(--muted); }
body.home:not(.hero-live) .site-header .btn--sm{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }
body.home:not(.hero-live) .site-header .btn--sm:hover{ --btn-bg:var(--ink-soft); --btn-fg:var(--cream); --btn-bd:var(--ink-soft); }
body.home:not(.hero-live) .site-header .nav-toggle span,
body.home:not(.hero-live) .site-header .nav-toggle span::before,
body.home:not(.hero-live) .site-header .nav-toggle span::after{ background:var(--ink); }
.site-header .logo-img, .site-header .social a,
.site-header .btn--sm, .site-header .nav-toggle{ transition:color .7s ease, background-color .7s ease, border-color .7s ease, filter .7s ease; }

/* 26. COMPACT TEACHER-TRAINING CALLOUT (homepage, secondary) -------- */


/* The drawer (.nav) is printed outside .site-header since 9 Sep 2026 PM, so
   none of the homepage header colour rules above reach it - it is always ink
   on cream (6a). */

/* 27. ACCORDION GROUPS IN THE DRAWER --------------------------------
   Every parent (About PYC Studios, Practices, Classes & Courses, Teacher
   Training) is a <button class="nav-sub-toggle"> from inc/nav-walker.php;
   main.js toggles .is-open on the wrapper, one group open at a time, and the
   walker opens the group holding the current page. The hover dropdown and
   side-flyout panels went on 9 Sep 2026 PM - the drawer is the only menu, and
   the per-item menu-admin classes (hide-parent-mobile, show-parent-mobile,
   label-parent-mobile, unindent-mobile) went with them. */
.nav-item--sub{ width:100%; }
.nav .nav-sub-toggle{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.nav-caret{ display:inline-block; flex:0 0 auto; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.7; transition:transform .25s ease; }
.nav-item--sub.is-open > .nav-sub-toggle .nav-caret{ transform:rotate(180deg); }
/* grid-template-rows 0fr -> 1fr animates the height without a magic
   max-height. overflow:hidden on both boxes keeps the inner hairline from
   peeking out of the collapsed 0-height track. */
.nav-sub{ display:grid; grid-template-rows:0fr; overflow:hidden; visibility:hidden; transition:grid-template-rows .3s ease, visibility .3s; }
.nav-sub-inner{ min-height:0; overflow:hidden; display:flex; flex-direction:column; border-bottom:1px solid var(--line); }
.nav-item--sub.is-open > .nav-sub{ grid-template-rows:1fr; visibility:visible; }
/* Sub links: smaller, muted, indented, no hairlines of their own - the group's
   toggle above and .nav-sub-inner below frame them. */
.nav .nav-sub a{ padding:.6rem 0 .6rem 1.1rem; border-bottom:0; font-size:.72rem; letter-spacing:.14em; color:var(--muted); }
.nav .nav-sub a:first-child{ padding-top:.75rem; }
.nav .nav-sub a:last-child{ padding-bottom:1rem; }
.nav .nav-sub a:hover, .nav .nav-sub a[aria-current="page"]{ color:var(--ink); }
/* The Login button is gone (Steve, 9 Sep 2026): the header CTA is Book Now, and
   the Momence sign-in is the user circle beside the socials. .btn--login,
   .btn--login:hover and .btn-ic went with it. */
.btn--book{ --btn-bg:var(--ink); --btn-bd:var(--ink); --btn-fg:var(--cream); }
.btn--book:hover{ --btn-bg:var(--ink-soft); --btn-bd:var(--ink-soft); --btn-fg:var(--cream); }
/* Book Now stays ink in the header on every page - the homepage rules below
   flip .btn--sm to cream over the video hero, which this has to outrank. */
/* Resolved through the --btn-* vars rather than hardcoded colours, so
   .btn--book:hover's ink-soft still lands (Steve, 9 Sep 2026). */
.site-header .btn--book,
.home .site-header .btn--book,
.home .site-header.is-stuck .btn--book{ background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bd); }
/* 27b. The level-2 flyout (Class Schedule ▸ filtered schedules, Practices,
   Teacher Training as depth-1 groups) is gone (Steve, 9 Sep 2026 PM): the menu
   is two levels deep and every group is a top-level accordion (27). */

/* 28. MOMENCE SIGN-IN ---------------------------------------------- */
/* The Momence sign-in has been a text link, then a .btn--login button, and is
   now .social-signin - a circle icon sitting after Instagram and Facebook in
   .social (Steve, 9 Sep 2026). It needs no rules of its own: .social a gives it
   the circle, the border and the hover, on the transparent homepage header too. */

/* 29. GET DIRECTIONS ROW -------------------------------------------- */
/* Its own row directly under the homepage hero, with Apple and Google as two
   outlined buttons (Steve, 9 Sep 2026 PM). Was a label + two bare glyphs inside
   the hero beside the CTA. The hero-video "not playing" .hd-* rules above are
   dead now and harmless. */
.hero-directions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.8rem 1.4rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.hero-directions .hd-label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--muted); white-space:nowrap; }
.hero-directions .hd-apps{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.hd-app svg{ width:15px; height:15px; fill:currentColor; flex:0 0 auto; }
@media (max-width:560px){
  .hero-directions{ flex-direction:column; gap:.7rem; }
  .hero-directions .hd-apps{ width:100%; }
  .hero-directions .hd-app{ flex:1 1 0; }
}

/* 29a. OUR STUDIO + ROOMS (homepage; Steve, 9 Sep 2026 PM) ----------- */
/* Centred heading and one sentence, then the two rooms side by side. An empty
   image field prints the .media placeholder frame with its "Photo to follow"
   label until the photo arrives. */
/* No narrow max-width on the intro (Steve, 9 Sep 2026 PM: use the space - the
   sentence should sit on one line at desktop). text-wrap:balance keeps the two
   lines even when it does wrap on smaller screens. */
.studio-intro{ text-align:center; margin:0 auto; }
.studio-intro h2{ margin-bottom:.6rem; }
.studio-intro .acf-copy p{ max-width:none; text-wrap:balance; }
.rooms{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); margin-top:clamp(36px,5vw,60px); }
.room{ text-align:center; }
.room-media{ aspect-ratio:4 / 3; }
.room h3{ margin:1.1rem 0 .3rem; }
.room p{ color:var(--ink-soft); margin:0; }
@media (max-width:760px){ .rooms{ grid-template-columns:1fr; } }

/* Instagram head (Steve, 9 Sep 2026 PM): the heading, then the @handle with the
   Follow button to its right. No paragraph. */
.ig-top{ margin-bottom:2rem; }
.ig-top h2{ margin-bottom:.6rem; }
.ig-handle{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; margin:0; }
.ig-handle .eyebrow{ margin:0; }

/* 30. PLAN YOUR VISIT STEPS ----------------------------------------- */
.plan-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,1.8vw,26px); }
.plan-step{ padding-top:1.2rem; border-top:1px solid var(--line); }
.plan-step .pstep-n{ font-family:var(--font-display); font-size:1.9rem; color:var(--bark); display:block; line-height:1; margin-bottom:.7rem; }
.plan-step h3{ margin:0 0 .45rem; }
.plan-step p{ margin:0; }
/* On the ink panel: --line and --bark are both too dark to read, and .plan-step p
   sets its colour directly so .bg-ink .muted doesn't reach it. */
.bg-ink .plan-step{ border-top-color:rgb(var(--white-rgb) / .22); }
.bg-ink .plan-step .pstep-n{ color:rgb(var(--white-rgb) / .72); }
.bg-ink .plan-step p{ color:rgb(var(--white-rgb) / .65); }
@media (max-width:980px){ .plan-steps{ grid-template-columns:repeat(2,1fr); gap:1.6rem; } }
@media (max-width:520px){ .plan-steps{ grid-template-columns:1fr; } }


/* 32. NEWSLETTER ---------------------------------------------------- */
/* Sits above the footer on every page. Soft sand band - deliberately a
   different colour to the dark (--ink) footer below it. */
.newsletter{ background:var(--sand-wash); padding-block:clamp(56px,7vw,96px); }
/* Wider than the old single-column band: the form now shares the row with an image. */
.newsletter .container{ max-width:1040px; }


/* Column flex so the CF7 <form> inside the plugin's wrapper stretches to the row height. */


/* Absolute image so the media column takes its height from the form card beside it,
   instead of the portrait crop dictating the row height. */


/* 33. SCHOLARSHIP DATES (dark section) ------------------------------ */
.scholarship-dates{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1.6rem 0 1.4rem; }
.scholarship-dates > div{ display:flex; flex-direction:column; gap:.25rem; padding:.85rem 1rem; border:1px solid rgb(var(--white-rgb) / .18); border-radius:var(--r-sm); background:rgb(var(--white-rgb) / .05); }


@media (max-width:560px){ .scholarship-dates{ grid-template-columns:1fr; } }
/* Light-bg variant, the component was built for the old bg-ink scholarship
   section; TT Step 1 has been a white (bg-paper) block since 17 Aug 2026. */
.bg-paper .scholarship-dates > div{ border-color:var(--line); background:var(--cream-2); }


/* Inside a dark box (.offer band or .panel.bg-ink, e.g. the TT scholarship box)
   the .bg-paper override above would win on source order - restore the dark
   treatment. */
.offer .scholarship-dates > div, .bg-ink .scholarship-dates > div{ border-color:rgb(var(--white-rgb) / .18); background:rgb(var(--white-rgb) / .05); }


/* TT page: centre the step content on mobile (Steve, 17 Aug 2026) - the
   Step 1 section head with its Training FAQs button, the Step 2 split copy
   and CTA (the checklist dots go inline so they centre with their text),
   and everything inside the Step 3 pricing cards. 760px = the width where
   .split stacks and .section-head goes column (§19). */
@media (max-width:760px){
  #curriculum .section-head{ align-items:center; text-align:center; }
  #apply .split-copy{ text-align:center; }
  #apply .checklist li{ padding-left:0; }
  #apply .checklist li::before{ position:static; display:inline-block; vertical-align:middle; margin-right:.55rem; }
  #apply .hero-ctas{ justify-content:center; }
  #rates .price-card{ text-align:center; }
  #rates .price-card .tag{ align-self:center; }
}

/* 34. TEACHERS (tabbed filter) -------------------------------------- */
.team-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin:0 0 2.6rem; }
/* Filter tabs: the same square small-caps box as .btn (client, 9 Sep 2026). */
.team-tab{ font-family:inherit; font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); background:transparent; border:1px solid var(--line-dark); border-radius:0; padding:.6rem 1.1rem; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.team-tab:hover{ border-color:var(--ink); color:var(--ink); }
.team-tab.is-active{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,28px); align-items:start; }
.team-card{ display:flex; gap:1.5rem; align-items:flex-start; text-align:left; background:var(--paper); border:1px solid var(--line); padding:1.4rem; min-height:268px; }
/* Portrait crop with square corners (client, 9 Sep 2026: "the circles don't
   make the page feel sharp"). The <img> still carries width/height 200 attrs
   for layout reservation; these sizes win. */
.team-avatar{ width:168px; height:212px; flex:0 0 168px; border-radius:0; object-fit:cover; object-position:top center; background:var(--sand-wash); display:block; cursor:zoom-in; }
.team-avatar:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.team-card-body{ min-width:0; }
.team-card-body h3{ margin:0 0 .15rem; }
.team-role{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 .9rem; }
.team-bio{ color:var(--ink-soft); margin:0; }
/* Inline links in a bio (the Teacher Training credential) take the
   author-link treatment from wp-extras.css `main :where(a:not([class]))`
   (bark, 1px underline) - do not restyle them here or the underline doubles. */
/* Collapsed bio is clamped to a fixed number of lines so every card matches.
   JS merges the paragraphs into one .team-bio and adds bio-ready. */
.team-card.bio-ready:not(.is-expanded) .team-bio{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.team-card.is-expanded{ min-height:0; }
.bio-toggle{ display:inline-block; margin-top:.6rem; padding:0 0 2px; background:none; border:0; border-bottom:1px solid var(--ink); cursor:pointer; font-family:inherit; font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); transition:color .2s ease, border-color .2s ease; }
.bio-toggle:hover{ color:var(--muted); border-color:var(--muted); }
/* Fade matching cards in when a filter tab is clicked */
@keyframes teamCardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.team-card.team-anim{ animation:teamCardIn .4s ease both; }
@media (prefers-reduced-motion:reduce){ .team-card.team-anim{ animation:none; } }
.team-card.is-hidden{ display:none; }
.team-more{ text-align:center; margin-top:clamp(26px,3.5vw,40px); }
.team-more[hidden]{ display:none; }   /* main.js hides the wrapper once every card is showing */
.team-empty{ text-align:center; margin-top:1.4rem; }

/* Teacher photo lightbox (built by main.js on first click). Charcoal scrim
   above the drawer (z 66), photo shown at a fixed 480px column so the 240px
   legacy headshots and the 336px new ones present consistently. */
.lightbox{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px; background:rgb(var(--ink-rgb) / .94); animation:lightboxIn .25s ease both; }
.lightbox[hidden]{ display:none; }
.lightbox-figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; width:min(90vw, 480px); }
.lightbox-img{ display:block; width:100%; height:auto; max-height:80vh; object-fit:contain; background:var(--sand-wash); border:1px solid rgb(var(--white-rgb) / .18); }
.lightbox-caption{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--cream); }
.lightbox-close{ position:absolute; top:18px; right:18px; width:44px; height:44px; display:grid; place-items:center; padding:0; background:none; border:1px solid rgb(var(--white-rgb) / .4); color:var(--cream); font-family:inherit; font-size:1.7rem; line-height:1; cursor:pointer; transition:border-color .2s ease; }
.lightbox-close:hover{ border-color:var(--cream); }
.lightbox-close:focus-visible{ outline:2px solid var(--cream); outline-offset:2px; }
body.lightbox-open{ overflow:hidden; }
@keyframes lightboxIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .lightbox{ animation:none; } }
@media (max-width:980px){ .team-grid{ grid-template-columns:1fr; } }
/* .team-types is a flex row, so the card's text-align:center below does NOT
   move it: the class tags stayed hard left under a centred name and bio on
   every phone-width teacher card (17 Sep 2026 sweep). Flex needs
   justify-content, hence the second declaration. */
@media (max-width:520px){ .team-card{ flex-direction:column; align-items:center; text-align:center; gap:1.1rem; min-height:0; } .team-avatar{ width:150px; height:190px; flex-basis:150px; } .team-types{ justify-content:center; } }

/* 35. CLASS-TYPE TAG ------------------------------------------------ */
/* Plain small-caps label - no fill, no pill (client, 9 Sep 2026: the orange
   badge was competing with everything else). Several on one line read as a
   list separated by middots. The text still doubles as the filter taxonomy
   on the teacher cards (see .team-tab / data-disc in js/main.js). */
.class-tag{ display:inline-block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--muted); background:none; padding:0; border-radius:0; margin-bottom:.8rem; }
.class-tag--sm{ margin-bottom:0; }
.team-types{ display:flex; flex-wrap:wrap; gap:.25rem .5rem; margin:0 0 .9rem; }
.team-types .class-tag + .class-tag::before,
.pillar-tags .class-tag + .class-tag::before{ content:"\00B7"; margin-right:.5rem; color:var(--line-dark); }
.pillar-body .class-tag + .class-tag{ margin-left:0; }
/* Teacher line-up on a practice page (26 Aug 2026): a light avatar grid, not
   the full .team-card treatment - the bios stay on /our-teachers/. */
.practice-teachers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(16px,2vw,26px);
}
.practice-teacher{ text-align:center; }
.practice-teacher .team-avatar{ width:120px; height:120px; flex-basis:auto; margin:0 auto .8rem; }
.practice-teacher h3{ margin:0 0 .1rem; }
.practice-teacher .team-role{ margin:0; }
@media (max-width:560px){
  .practice-teachers{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
  .practice-teacher .team-avatar{ width:92px; height:92px; }
}

/* Chip row on the practice-page class-type cards (26 Aug 2026). .pillar-body is
   a flex column, so a chip left to itself stretches the full card width and the
   next one drops underneath - this keeps two or three of them on one line. */
.pillar-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin:0; }
.pillar-tags .class-tag + .class-tag{ margin-left:0; }
/* "Find your style" now shares a band with "Good to know" rather than owning a
   section of its own (client, 26 Aug 2026), so its centred head needs the gap
   a section boundary used to give it. */
.practice-subhead{ margin-top:clamp(48px,7vw,88px); }

/* 36. TESTIMONIALS (masonry) ---------------------------------------- */
.tgrid{ columns:3; column-gap:clamp(16px,2vw,26px); }
.tgrid .tcard{ break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 clamp(16px,2vw,26px); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:1.7rem 1.6rem; }
.tcard .tq{ font-family:var(--font-display); font-size:2.6rem; line-height:1; color:var(--sand); display:block; height:.5em; }
.tcard p{ margin:.4rem 0 1.1rem; }
.tcard .tname{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0; }
.tcard .tname span{ color:var(--muted); letter-spacing:.04em; text-transform:none; font-weight:500; }
@media (max-width:920px){ .tgrid{ columns:2; } }
@media (max-width:600px){ .tgrid{ columns:1; } }

/* 37. COOKIE NOTICE - removed 18 Aug 2026; consent UI is the CookieYes plugin. */

/* 30. EXTRAS ROW ----------------------------------------------------- */
/* Privates / workshops / studio hire. Intentionally understated - these are
   secondary to the three pillars, so resist turning them into cards. */
.extras{
  margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:clamp(1.6rem,2.5vw,2.2rem);
  border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:1.2rem 2.4rem; flex-wrap:wrap;
}


@media (max-width:560px){
  .extras{ flex-direction:column; gap:1rem; }

}

/* 38. EXPLORE POINTERS (About) --------------------------------------- */
/* Two bordered boxes, one link each, in place of the pillars + teacher grid
   that used to be repeated on /about/ (client, 9 Sep 2026: say it once, keep
   class and teacher detail on their own pages). The whole box is the link. */
.explore-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px); }
.explore-item{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(28px,4vw,48px); background:var(--paper); border:1px solid var(--line);
  color:var(--ink); transition:border-color .25s ease;
}
.explore-item:hover{ border-color:var(--ink); }
.explore-item h2{ margin:0 0 1.2rem; }
.explore-item .textlink{ margin-top:auto; }
.explore-item:hover .textlink{ gap:.65rem; }
@media (max-width:760px){ .explore-grid{ grid-template-columns:1fr; } }
/* About hero: the founding-story copy runs on from the lead as one centred
   block (Steve, 17 Sep 2026 evening). Same paragraph style as the lead, so
   the two read as one; a little air between them and balanced wraps. */
.hero-story{ margin-top:clamp(20px,2.5vw,36px); }
.hero-story p{ margin-inline:auto; text-wrap:balance; }
.hero-story-heading{ margin-top:clamp(28px,3.5vw,48px); }

/* 39. CLASS-TYPE CAROUSEL (Yoga) ------------------------------------- */
/* Steve, 9 Sep 2026: the yoga class types are a row of portrait cards that
   starts on the container's left edge and runs off the right edge of the
   viewport, with two arrows top right and click-hold-drag (mouse/pen; touch
   scrolls natively). The track is a plain overflow scroller - no library -
   so every card is in the DOM, reachable by keyboard (the track is focusable
   and arrow keys scroll it) and by the browser's own gestures. The bleed is
   margin-right: 50% - 50vw inside .container, with the same amount back as
   padding so the last card lands on the container edge at full scroll; the
   section clips x so the scrollbar's width in 100vw never leaks sideways. */
/* Shorter top padding than a standard .section: this band follows a short
   hero directly (Steve, 9 Sep 2026: "remove the excessive padding above"). */
.has-carousel{ overflow-x:clip; padding-top:20px; }
.carousel{ position:relative; }
/* Head is the homepage "What we offer" shape: copy left, arrows right, on the
   heading's baseline. Tighter gap to the track than a plain .section-head. */
.carousel .section-head{ margin-bottom:clamp(20px,2.6vw,36px); }
/* Mat Pilates centres this head (no arrows); heading only, so drop the 60ch copy cap and let it sit on one line. */
.carousel .section-head--center .copy{ max-width:none; }
.carousel-nav{ display:flex; justify-content:flex-end; gap:.6rem; flex:0 0 auto; }
.carousel-btn{
  width:46px; height:46px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink); border:1px solid var(--ink); border-radius:var(--r-btn);
  font:inherit; font-size:1.15rem; line-height:1; cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.carousel-btn:hover{ background:var(--ink); color:var(--cream); }
.carousel-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.carousel-btn[disabled]{ opacity:.3; cursor:default; }
.carousel-btn[disabled]:hover{ background:var(--paper); color:var(--ink); }
.carousel-track{
  display:flex; align-items:stretch; gap:clamp(16px,2vw,26px);
  margin-right:calc(50% - 50vw); padding-right:calc(50vw - 50%);
  padding-bottom:2px; /* keeps the bottom hairline of the cards out of the scroll clip */
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  cursor:grab;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }
.carousel-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; -webkit-user-select:none; }
.carousel-track.is-dragging a, .carousel-track.is-dragging img{ pointer-events:none; }
/* Three cards fill the container and the fourth peeks off the viewport at
   every desktop width (Steve, 9 Sep 2026). The track is wider than the
   container (it bleeds), so the card is sized off the container's own width,
   --cw, mirroring .container{ width:90%; max-width:1600px }: a third of what
   is left after two gaps, then 90% of that so the fourth card shows a decent
   slice rather than a sliver. Two-up under 1100px, one-up under 560px. */
.carousel-track{ --cw:min(90vw, 1600px); --gap:clamp(16px,2vw,26px); gap:var(--gap); }
.carousel-card{ flex:0 0 calc((var(--cw) - 2 * var(--gap)) / 3 * .9); scroll-snap-align:start; }
@media (max-width:1100px){ .carousel-card{ flex-basis:calc((var(--cw) - var(--gap)) / 2 * .9); } }
.carousel-card .media{ height:auto; aspect-ratio:3 / 4; }
/* Mat Pilates: the same tiles, two across, no scrolling (Steve, 9 Sep 2026). */
.type-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 2vw, 26px); }
/* Two-across tiles are ~630px wide at 1440, so the portrait 3:4 frame would run to 835px; landscape here. */
.type-grid .carousel-card .media{ aspect-ratio:4 / 3; }
/* Reformer: one class, one tile, centred under the centred head. Wider than a
   two-across tile since it sits alone (Steve, 9 Sep 2026), with a 3:2 frame so
   the extra width does not turn into height. */
.type-grid--single{ grid-template-columns:minmax(0, 1fr); justify-items:center; }
.type-grid--single .carousel-card{ width:100%; max-width:960px; }
.type-grid--single .carousel-card .media{ aspect-ratio:3 / 2; }
@media (max-width:640px){ .type-grid{ grid-template-columns:minmax(0, 1fr); } }
.carousel-card .media img{ -webkit-user-drag:none; user-select:none; }
/* The chips' own .8rem bottom margin plus the row's would double the gap to the h3. */
.carousel-card .pillar-tags{ margin-bottom:.8rem; }
.carousel-card .pillar-tags .class-tag{ margin-bottom:0; }
@media (prefers-reduced-motion:reduce){ .carousel-track{ scroll-behavior:auto; } }
@media (max-width:560px){
  .carousel-btn{ width:42px; height:42px; }
  .carousel-card{ flex-basis:min(78vw, 300px); }
}

/* 40. CLASS-TYPE COLLAGE + LIST (Yoga trial, 10 Sep 2026) ------------ */
/* Client, 10 Sep 2026: one photo-and-blurb tile per class type made the three
   practice pages look different (Yoga scrolled five, Mat sat two, Reformer
   one). Their fix, trialled on Yoga first and ported to Mat Pilates and
   Reformer on 17 Sep 2026: keep the Reformer shape - one 960px landscape
   frame, centred under the centred head - but fill it with a collage of three
   photos of the discipline and list the class types underneath, so the frame
   is the same size on every page and only the list gets longer (5 / 2 / 1). The
   card is the same .pillar as the Reformer tile; .type-card replaces
   .carousel-card so none of the carousel frame sizes reach the collage cells. */
/* Full container width since 17 Sep 2026 (Steve: no gap either side of the
   montage banner) - was capped at 960px. */
.type-grid--single .type-card{ width:100%; max-width:none; }
/* The 3:2 frame is a grid of three .media cells: one square on the left, two
   stacked on the right. The gaps show the card's paper, which is what reads as
   a collage rather than one image with lines drawn on it. */
/* 21 Sep 2026 (client: "the montage would look better with 3 photos"): the
   collage is back in the frame, at the 2.4:1 proportion of the composite it
   replaces and at the full container width Steve asked for, so the big cell
   and the two small ones are all 1.6:1 landscapes. The 3:2 frame returns
   under 640px, where 2.4:1 would leave the small cells ~55px wide. */
.collage{
  display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr;
  gap:4px; aspect-ratio:2.4 / 1; background:var(--paper);
}
.collage > .media:first-child{ grid-row:1 / 3; }
/* .pillar .media fixes a 230px height for the homepage cards; the cells take
   their size from the grid instead. */
.collage > .media{ height:auto; min-height:0; }
/* 17 Sep 2026: the client composed the three photos into ONE 2.4:1 montage per
   discipline and asked to see its proportion in situ, so practice.php prints
   that image in the frame's place at its own aspect ratio (no crop, no fixed
   3:2). Not .media: .pillar .media fixes a 230px height. */
.montage{ background:var(--paper); }
.montage img{ display:block; width:100%; height:auto; }
/* Class types as a ruled list under the frame: title (and its chips) left,
   description right, a hairline between rows. One shape whether the list is
   one row (Reformer), two (Mat) or five (Yoga). Stacks under 640px. */
.type-row{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:.5rem 2.5rem;
  padding:1.3rem 0; border-top:1px solid var(--line);
}
.type-row:first-child{ border-top:0; padding-top:0; }
.type-row:last-child{ padding-bottom:0; }
.type-row h3, .type-row p{ margin:0; }
.type-row .pillar-tags{ margin-bottom:.6rem; }
/* Stack at 820px, not 640px: below that the title column is under ~220px and the
   two Power Yoga chips break across two lines with the middot orphaned. */
@media (max-width:820px){
  .type-row{ grid-template-columns:minmax(0, 1fr); gap:.4rem; }
}
/* 17 Sep 2026 (Steve, not keen on the five-row list): only the first class
   type stays in the card as the ruled row; the rest are white tiles under it,
   the same gap apart as the .type-grid so the block reads as one. Four across
   on Yoga; a lone tile (Mat Pilates) runs full width as a title / copy row. */
.type-tiles{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));  /* 2 x 2 on Yoga (Steve, 17 Sep 2026; was 4 across) */
  gap:clamp(16px,2vw,26px); margin-top:clamp(16px,2vw,26px);
}
/* Same shape as .price-card (s13) minus the price and the button: title,
   description, dashed .card-list (rules shared with the price cards below). */
.type-tile{
  background:var(--paper); border:1px solid var(--line);
  padding:1.5rem 1.5rem 1.7rem;
  display:flex; flex-direction:column;
  transition:border-color .3s ease;
}
.type-tile:hover{ border-color:var(--ink); }
/* A step up from the h3 size, between h3 and h2 (Steve, 17 Sep 2026: "a bit
   bigger"); the one deliberate exception to s4's one-size-per-level rule. */
.type-tile h3{ margin:0 0 .2rem; font-size:clamp(1.6rem, 2vw, 1.9rem); }
.type-tile .desc{ margin:.7rem 0 0; }
.type-tile .card-list{ margin-bottom:0; }
.type-tile .pillar-tags{ margin-bottom:.6rem; }
.type-tile:only-child{
  grid-column:1 / -1;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:.5rem 2.5rem; align-items:start;
}
.type-tile:only-child h3{ margin:0; }
.type-tile:only-child .desc{ margin-top:0; }
.type-tile:only-child .card-list{ grid-column:2; }
@media (max-width:820px){
  .type-tile:only-child{ grid-template-columns:minmax(0, 1fr); gap:.4rem; }
}
@media (max-width:640px){
  .type-tiles{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:640px){
  .collage{ aspect-ratio:3 / 2; }
  /* The two small cells are ~105px wide on a phone; the label only fits the big one. */
  .collage > .media:not(:first-child)::before{ display:none; }
}

/* 41. TEACHER TRAINING REDESIGN (client copy, 17 Sep 2026) ----------- */
/* The client sent two drafts of the page; this builds the short one (their
   "Option 2") with the practical detail from the long one folded in. New
   components only - the page otherwise reuses .split, .checklist, .type-row,
   .panel, .scholarship-dates, .plan-step, .quote and the FAQ accordion, and
   every paragraph / eyebrow / heading keeps the one site-wide style (s4). */
.tt-hero{ padding-bottom:clamp(48px,7vw,96px); }
/* "Formerly The Power Yoga Company" (client, 17 Sep 2026): the one .eyebrow,
   pulled up under the H1 (whose .5em margin was sized for the strapline) and
   pushed off the strapline below it. */
.tt-hero .hero-subtitle{ margin:-.5rem 0 1.5rem; }
.tt-hero .hero-ctas{ justify-content:center; margin-top:1.4rem; }
.tt-hero .quote{ margin-top:clamp(44px,6vw,80px); }
/* The same .quote component after the curriculum rows and the faculty grid,
   pushed off the content above it. Attribution is an eyebrow. */

.quote .who{ margin:1.6rem 0 0; }
/* Copy beside a list, both top-aligned (Is this for you? + key facts;
   the fee rows + Your place includes). */

/* Key facts: label / value rows on hairlines. The value is 16px semi-bold
   ink - the same figure as .scholarship-dates .sd-val, not a heading. */
.keyfacts{ margin:0; border-top:1px solid var(--line); }
.keyfact{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:.4rem 1.5rem;
  align-items:baseline; padding:.95rem 0; border-bottom:1px solid var(--line);
}
.keyfact dt{ margin:0; }
.keyfact dd{ margin:0; color:var(--ink); font-weight:600; }
/* "Read a graduate's story" under the overview list */
.tt-more{ margin:1.5rem 0 0; }
/* Expandable weekend schedule: native <details>; the summary reads like a
   .textlink with a +/x marker, the rows are module / dates / times on hairlines. */
.schedule{ margin-top:1.6rem; }
.schedule > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:3px;
}
.schedule > summary::-webkit-details-marker{ display:none; }
.schedule > summary::after{ content:"+"; font-size:1rem; line-height:1; }
.schedule[open] > summary::after{ content:"\00D7"; }
.schedule > summary:hover{ color:var(--muted); border-color:var(--muted); }
.schedule-intro{ margin:1.2rem 0 .4rem; }
.schedule-row{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.8fr); gap:.25rem 1.2rem;
  padding:.7rem 0; border-top:1px solid var(--line);
}
.schedule-row:last-child{ border-bottom:1px solid var(--line); }
.schedule-row .sr-mod{ color:var(--ink); font-weight:600; }
.schedule-row .sr-date{ color:var(--ink-soft); }
.schedule-row .sr-time{ color:var(--muted); }
/* The s40 collage as the media half of a .split. .split-media already fixes a
   height, and the collage's own aspect-ratio then computes a min-content WIDTH
   of height x 1.5 (750px at 1440), which stops the grid column shrinking: it
   squeezed the copy column to 461px at desktop and ran off the right edge of a
   phone. Width comes from the column and height from .split-media, exactly as
   every other split image on the site. */
.split-media.collage{ aspect-ratio:auto; min-width:0; }
/* Curriculum rows: the s40 ruled list with the module number beside the title.
   Scoped to the curriculum since 21 Sep 2026: unscoped it also laid the
   practice pages' chips beside their class title, which on a phone squeezed
   "Power Yoga" into a sliver right of two wrapped chips. There the chips sit
   above the title (s40 .type-row .pillar-tags). */
.curriculum-list .type-row-head{ display:flex; align-items:baseline; gap:.9rem; }
.curriculum-outro{ margin:clamp(28px,3.5vw,44px) auto 0; text-wrap:balance; }
/* Faculty: portrait, name, specialism, one credential line, four across.
   Capped at --max so the 240px roster headshots are not blown up too far. */
.faculty-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.6vw,36px) clamp(16px,2vw,26px); max-width:var(--max); margin-inline:auto;
}
/* Paper, not the inherited sand: the faculty band is bg-cream2, so an empty
   frame filled with --cream-2 would be invisible against it and read as a hole
   rather than a photo still to come. */
.faculty-photo{ aspect-ratio:4 / 5; margin-bottom:1rem; background:var(--paper); }
.faculty-photo img{ object-position:top center; }
.faculty-card h3{ margin:0 0 .3rem; }
.faculty-card .team-role{ margin:0 0 .45rem; }
.faculty-card p{ margin:0; }
/* Fees: ruled rows (title + window left, price right) beside the inclusions.
   The price is the same figure as .price-card .price. */
.fee-row{
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:1.3rem 0; border-top:1px solid var(--line);
}
.fee-table .fee-row:last-of-type{ border-bottom:1px solid var(--line); }
.fee-row h3{ margin:0 0 .35rem; }
.fee-row .eyebrow{ margin:0; }
.fee-row.is-featured .eyebrow{ color:var(--ink); }
.fee-row .fee-desc{ margin:.5rem 0 0; }
.fee-price{ display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
.fee-price .price{ font-family:var(--font-display); font-size:2.5rem; line-height:1; color:var(--ink); white-space:nowrap; }
.fee-note{ margin:1.2rem 0 0; }
.fee-included h3{ margin:0; }
.fee-included .checklist{ margin-top:1rem; }
#rates .panel{ margin-top:clamp(40px,5vw,72px); }
#rates .panel .hero-ctas{ margin-top:1.2rem; }
/* Ready to begin?: three .plan-step columns, then the status line with the
   live day count and the two buttons, centred. */
.apply-steps{ grid-template-columns:repeat(3,1fr); list-style:none; padding:0; margin:0 auto; max-width:var(--max); }
.apply-close{ text-align:center; margin-top:clamp(40px,5vw,72px); }
.apply-close .hero-ctas{ justify-content:center; margin-top:1.4rem; }
.apply-status{ text-wrap:balance; }
.apply-status strong{ color:var(--ink); font-weight:600; }
.apply-note{ margin:1.2rem 0 0; }
/* The one-line scholarship mention is the last thing on the page (client,
   17 Sep 2026); its mailto link takes the house underline in cream, since the
   bark of `main :where(a:not([class]))` is invisible on the photo band. */
.scholarship-note{ margin-top:.6rem; }
.has-photo .scholarship-note a{ color:var(--cream); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.has-photo .scholarship-note a:hover{ color:rgb(var(--white-rgb) / .75); }
@media (max-width:980px){
  .faculty-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .apply-steps{ grid-template-columns:1fr; gap:1.4rem; }
}
@media (max-width:760px){
  .schedule-row{ grid-template-columns:1fr; gap:.1rem; }
  .keyfact{ grid-template-columns:1fr; gap:.15rem; }
}
@media (max-width:520px){
  .faculty-grid{ gap:1.3rem .9rem; }
  .fee-row{ flex-direction:column; align-items:flex-start; gap:.7rem; }
  .fee-price{ align-items:flex-start; }
}

/* 42. PHOTO CTA (Steve, 17 Sep 2026) --------------------------------- */
/* The closing CTA panels carry one of the darkest frames from Carlotta's
   September 2026 studio shoot behind the copy. Markup: the panel or section
   takes `bg-ink has-photo` (so every dark-surface rule above already applies)
   and pyc_cta_photo( $key ) prints the <img> layer as its first child; the
   key -> attachment map is in inc/helpers.php. A charcoal scrim sits over the
   photo so the cream text and white buttons keep their contrast whatever the
   crop shows. The layer is z-index:-1 inside the panel's own stacking context
   (isolation), so it paints over the ink fill and under the copy. */
.has-photo{ position:relative; isolation:isolate; overflow:hidden; border-color:transparent; }
.cta-photo{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.cta-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cta-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgb(var(--ink-rgb) / .6), rgb(var(--ink-rgb) / .74)); }
/* p sets its own ink-soft colour (s4), so the dark-surface recolour is explicit. */
.has-photo p{ color:rgb(var(--white-rgb) / .8); }
.has-photo .textlink{ color:var(--cream); border-bottom-color:rgb(var(--white-rgb) / .55); }
.has-photo .textlink:hover{ color:rgb(var(--white-rgb) / .75); border-bottom-color:rgb(var(--white-rgb) / .75); }
.has-photo .apply-status strong{ color:var(--cream); }
.has-photo .plan-step p{ color:rgb(var(--white-rgb) / .82); }
/* More air inside the photo panels and sections so the picture reads. */
.soft-cta.has-photo{ padding-block:clamp(64px,8vw,120px); }
.section.has-photo{ padding-block:clamp(72px,10vw,150px); }

/* 43. PRESS STRIP (About, client list 17 Sep 2026) ------------------- */
/* "As featured in": two identical .press-track lists inside an overflow-hidden
   .press-marquee, each sliding left by its own width plus one gap, so the
   second copy takes over exactly where the first leaves off (the second is
   aria-hidden in the markup). Logos are dark-on-transparent PNGs (media
   3111-3116, prepared in charcoal so no filter is needed) shown at reduced
   opacity. Both a height and a width cap, so wide wordmarks (Evening
   Standard) and tall ones (Conde Nast Traveller) carry similar weight.
   Pauses on hover; a static centred row under prefers-reduced-motion. */
.press{ --press-gap:clamp(48px,6vw,96px); text-align:center; }  /* .eyebrow is inline-flex, so the parent centres it */
.press .eyebrow{ margin-bottom:clamp(24px,3vw,40px); }
.press-marquee{
  display:flex; gap:var(--press-gap); overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.press-track{
  display:flex; align-items:center; gap:var(--press-gap); flex:0 0 auto;
  list-style:none; margin:0; padding:0;
  animation:press-scroll 42s linear infinite;
}
.press-marquee:hover .press-track{ animation-play-state:paused; }
.press-item{ flex:0 0 auto; display:flex; align-items:center; }
.press-logo{ display:block; width:auto; height:auto; max-height:34px; max-width:170px; opacity:.72; }
@keyframes press-scroll{ to{ transform:translateX(calc(-100% - var(--press-gap))); } }
@media (max-width:640px){
  .press-logo{ max-height:26px; max-width:130px; }
}
@media (prefers-reduced-motion:reduce){
  .press-marquee{ flex-wrap:wrap; justify-content:center; -webkit-mask-image:none; mask-image:none; }
  .press-track{ animation:none; flex-wrap:wrap; justify-content:center; row-gap:1.4rem; }
  .press-track[aria-hidden]{ display:none; }
}

/* 44. SAND GROUND - "Variant B" (client, 17 Sep 2026) ----------------- */
/* The whole page sits on sand #E9E2DD with white boxes: the second of the two
   homepage previews (templates/home-palette-preview.php, pages 3054/3055) the
   client chose. Kept as one block so it can be reverted as a unit. --cream
   stays white because it doubles as the on-dark foreground (footer copy,
   buttons over ink, hero video copy); the ground is its own token (s1).
   Sand bands (.bg-cream2) now match the ground, so sections separate by
   spacing and hairlines; the TT page's white .bg-paper bands go sand too so
   no page keeps a white band. Surfaces that read as boxes stay/turn white:
   panels and cards already are (--paper), the FAQ list gets a white box like
   .panel, and the sand-on-white fills flip to white. The header carries
   hardcoded whites in s6 and s26, hence the overrides; the homepage keeps its
   transparent-over-video state (s26) and goes sand once stuck. */
body{ background:var(--ground); }
.bg-paper{ background:var(--ground); }
.site-header{ background:var(--ground); backdrop-filter:none; -webkit-backdrop-filter:none; }
.home .site-header.is-stuck{ background:var(--ground); backdrop-filter:none; -webkit-backdrop-filter:none; }
/* "Photo to follow" frames and lazy-loading images: white box on the sand,
   with a hairline so an empty frame inside a white panel still reads as one. */
.media{ background:var(--paper); }
.media[data-label]{ box-shadow:inset 0 0 0 1px var(--line); }
.faq{ background:var(--paper); border:1px solid var(--line); padding:clamp(20px,3vw,44px); }
.faq-item:first-child{ border-top:0; }
.faq-item:last-child{ border-bottom:0; }
.bg-paper .scholarship-dates > div, .ig-tile, .booking-embed code{ background:var(--paper); }


/* The two appointment boards (Studio 2 reformer / Studio 3 yoga & mat) used to
   stack full-width, and each Momence page centres its ~810px content, so at
   desktop widths most of the iframe was empty white. Side by side, each board
   gets ~630px and the Momence layout fills it (checked at 640 and 420: it
   reflows). The markup lives in page 64's `embed_code` field. Fonts INSIDE the
   iframes are Momence's (host branding record, client's dashboard), not ours;
   the h3 above each board is the theme's. */


/* 46. PRACTICE PAGES - tighter rhythm, full-bleed intro CTA (Steve, 17 Sep 2026) */
/* practice.php adds body.page-practice (the template is applied by a
   template_include filter, so there is no page-template-* body class). Section
   padding roughly halves on these three pages only, and the closing intro
   offer is a full-width photo band (section.bg-ink.has-photo, s42) instead of a
   panel inside the container. */
.page-practice .pricing-hero{ padding-bottom:clamp(40px,5vw,72px); }
.page-practice .section{ padding-block:20px clamp(40px,5vw,72px); }
.page-practice .section--tight{ padding-block:20px clamp(32px,4vw,56px); }
.page-practice .section.has-photo{ padding-block:clamp(64px,8vw,120px); }
/* The intro CTA was a full-bleed .practice-cta band for an hour on 17 Sep
   2026; it is the About page's .soft-cta photo panel in the .container again
   (Steve: same width as the About one). */

/* 47. TEACHER TRAINING, COMPACT (Steve, 17 Sep 2026 evening) --------- */
/* "Way too long, alignment all over the place." Same content, displayed
   tighter: every section opens with the one centred .section-head and puts
   its content in a top-aligned two-column .split beneath (copy | facts,
   copy | collage, image | copy), the page takes the practice pages' rhythm
   (body.page-tt from the template), the curriculum runs in two columns of
   ruled rows, the faculty are compact horizontal cards four across, and the
   fees are the pricing page's .price-card grid (s13). The s41 rules for the
   pieces that stay (.keyfacts, .schedule, .quote--inset, .apply-*) still
   apply; the s41 .fee-row / tall .faculty-card rules are unused now. */
.page-tt .pricing-hero{ padding-bottom:clamp(40px,5vw,72px); }
.page-tt .section{ padding-block:20px clamp(40px,5vw,72px); }
.page-tt .section.has-photo{ padding-block:clamp(64px,8vw,120px); }
.page-tt .tt-hero .quote{ margin-top:clamp(32px,4vw,56px); }

.page-tt .section-head--center{ margin-bottom:clamp(28px,3.5vw,48px); }
/* A heading that fits one line at 1440 sits on one line (the paragraph-width
   rule): drop the 60ch cap on this page's heads, balance the ones that must
   wrap, and cap only the one-line lead under them. */
.page-tt .section-head--center .copy{ max-width:none; }
.page-tt .section-head--center h2{ text-wrap:balance; }
.page-tt .section-head--center .copy p{ max-width:70ch; margin-inline:auto; }

/* Curriculum: 01-04 down the left, 05-08 down the right, title over text.
   --tt-rows is set inline by the template (ceil(count / 2)). */
.curriculum-list--cols{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(var(--tt-rows, 4), auto); grid-auto-flow:column;
  column-gap:clamp(24px,4vw,64px);
}
.curriculum-list--cols .type-row{
  grid-template-columns:minmax(0, 1fr); gap:.35rem;
  padding:1rem 0; border-top:0; border-bottom:1px solid var(--line);
}
.curriculum-list--cols .type-row:first-child{ padding-top:1rem; }
.curriculum-list--cols .type-row:last-child{ padding-bottom:1rem; }
@media (max-width:820px){
  .curriculum-list--cols{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; grid-auto-flow:row; }
}
/* Faculty: portrait thumb + name / subject / credential, four across in one
   or two rows instead of eight tall portrait cards. */
.page-tt .faculty-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(14px,1.6vw,22px); max-width:none; }
.page-tt .faculty-card{ display:flex; gap:1rem; align-items:flex-start; background:var(--paper); border:1px solid var(--line); padding:1rem; }
.page-tt .faculty-photo{ width:88px; flex:0 0 88px; aspect-ratio:4 / 5; margin:0; }
.page-tt .faculty-photo.is-empty{ box-shadow:inset 0 0 0 1px var(--line); }
.faculty-body{ min-width:0; }
.page-tt .faculty-card h3{ margin:0 0 .25rem; }
.page-tt .faculty-card .team-role{ margin:0 0 .3rem; }
.page-tt .faculty-card p{ margin:0; }
@media (max-width:1100px){ .page-tt .faculty-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px){ .page-tt .faculty-grid{ grid-template-columns:minmax(0, 1fr); } }
/* Fees: the pricing page's cards. Two tiers plus "Your place includes" as a
   third card carrying the dashed list; the footnote runs under the grid. */
.fee-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.fee-grid .price-card .card-list{ margin-bottom:0; flex:1; align-content:start; }
.fee-grid .price-card .btn{ margin-top:1rem; }
.fee-note{ margin:1.4rem auto 0; text-wrap:balance; }
/* Two cards (one fee tier + "Your place includes", since the Early Bird closed:
   client, 2 Oct 2026) sit centred in the row instead of leaving a gap at the right. */
.fee-grid:has(> :nth-child(2):last-child){ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:880px; margin-inline:auto; }
@media (max-width:980px){ .fee-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px){ .fee-grid, .fee-grid:has(> :nth-child(2):last-child){ grid-template-columns:minmax(0, 1fr); } }

/* 48. TEACHER TRAINING, ALIGNMENT ROUND (Steve, 17 Sep 2026 late) ------ */
/* Six requests on the compact page. "Is this for you?" runs its copy full
   width under the head with the six key facts centred beneath in a 3-up grid
   (2-up under 640px). The overview copy and the course-format copy sit
   vertically centred beside their images (a plain .split, no --top). The
   curriculum, seven modules now the asana lab row is gone, is one centred
   column of ruled rows at the full container width (no measure cap, the
   paragraph-width rule). The faculty head, seven cards and pull quote share
   one white box; the cards go sand so they still read inside it. The fee
   cards centre everything, the dashed list marks going inline so they centre
   with their text (the #apply checklist pattern). The faculty lead also loses
   s47's 70ch cap: a section lead on this page uses the full container. */
.page-tt .section-head--center .copy p{ max-width:none; }
.fit-copy{ margin-bottom:clamp(28px,3.5vw,48px); text-align:center; }
.keyfacts--grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 clamp(16px,2vw,28px); border-top:0; text-align:center; }
.keyfacts--grid .keyfact{ display:block; padding:1rem .5rem; border-top:1px solid var(--line); border-bottom:0; }
.keyfacts--grid .keyfact dt{ margin:0 0 .4rem; justify-content:center; }
.curriculum-list--center{ text-align:center; }
.curriculum-list--center .type-row{ grid-template-columns:minmax(0, 1fr); gap:.35rem; padding:1rem 0; }
.curriculum-list--center .type-row-head{ justify-content:center; }
.faculty-box{ background:var(--paper); border:1px solid var(--line); padding:clamp(24px,3.5vw,56px); }
.page-tt .faculty-box .section-head--center{ margin-bottom:clamp(24px,3vw,40px); }
.page-tt .faculty-box .faculty-card{ background:var(--ground); }
.page-tt .faculty-box .faculty-photo{ background:var(--paper); }

.fee-grid .price-card{ text-align:center; align-items:center; }
.fee-grid .price-card .tag{ align-self:center; }
.fee-grid .price-card .card-list{ width:100%; }
/* Centred list items that wrap were breaking into one long line and one short
   one, which reads as ragged against the centred dashes (17 Sep 2026 sweep).
   Balanced wrapping keeps the centring Steve asked for and evens the lines. */
.fee-grid .price-card .card-list li{ padding-left:0; text-wrap:balance; }
.fee-grid .price-card .card-list li::before{ position:static; display:inline-block; vertical-align:middle; margin-right:.55rem; }
@media (max-width:640px){ .keyfacts--grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* 49. TEACHER TRAINING, ROUND FOUR + HOMEPAGE PRESS (Steve, 17 Sep 2026 late) */
/* Four requests. "Formerly The Power Yoga Company" joined the hero eyebrow
   line as its last segment (template; .tt-hero .hero-subtitle in s41 is
   unused now). The s24 four-box countdown is back in the hero between the
   strapline and the buttons with its label as an eyebrow; once the deadline
   passes (main.js adds .is-ended, or PHP prints it) the s24 rules hide the
   boxes and show the closed line, and :has() hides the label with them. The
   curriculum rows come in pairs (.curriculum-pair, from the template): the
   pair spans the container and carries the full-width rule; inside it a
   subgrid puts the two rows in the two max-content columns of the list's
   1fr | col | col | 1fr grid, so every pair's text starts on the same two
   left edges and the block is centred; text is left-aligned; an odd last row
   (07) sits in the left column. Browsers without subgrid size each pair's
   columns on their own (left edges may differ a little between pairs). All
   twelve graduate quotes are one
   scroll-snap carousel (main.js "Quote carousel"): slides the width of the
   track, top-aligned, and the JS sets the track's height to the quote in
   view (eased) so a short quote is not marooned in a tall frame; arrows reuse
   .carousel-btn (s39), dots are 8px squares; the nav only shows once the JS
   is running. The About page's press strip (s43) prints on the homepage under
   the directions row, a touch tighter than .section--tight. */
.hero-countdown{ margin-top:clamp(1.6rem,3vw,2.4rem); }
.hero-countdown .cd-title{ margin-bottom:.2rem; }
.hero-countdown .countdown{ margin:0; }
.hero-countdown:has(.countdown.is-ended) .cd-title{ display:none; }
.hero-countdown .countdown.is-ended + .cd-ended{ margin:0; }
.tt-hero .hero-countdown + .hero-ctas{ margin-top:clamp(1.6rem,3vw,2.4rem); }
/* Two equal halves across the full container, text centred in each, and an
   odd last row (07) centred across both (client, 2 Oct 2026: full width,
   no squashed content; it was a centred max-content block, left-aligned). */
.curriculum-list--pairs{
  display:grid; column-gap:clamp(32px,5vw,88px);
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.curriculum-pair{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; border-top:1px solid var(--line); }
.curriculum-pair:first-child{ border-top:0; }
.curriculum-pair .type-row{ grid-template-columns:minmax(0, 1fr); gap:.35rem; padding:1.1rem 0; border-top:0; text-align:center; }
.curriculum-pair .type-row-head{ justify-content:center; }
.curriculum-pair .type-row:first-child{ grid-column:1; }
.curriculum-pair .type-row:last-child:not(:first-child){ grid-column:2; }
.curriculum-pair .type-row:only-child{ grid-column:1 / -1; }
@supports not (grid-template-columns: subgrid){
  .curriculum-pair{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(32px,5vw,88px); }
}
@media (max-width:820px){
  .curriculum-list--pairs, .curriculum-pair{ grid-template-columns:minmax(0, 1fr); }
  .curriculum-pair .type-row:first-child, .curriculum-pair .type-row:last-child:not(:first-child){ grid-column:auto; }
  .curriculum-pair .type-row + .type-row{ border-top:1px solid var(--line); }
  /* Centred on phones too (client, 2 Oct 2026); it was left-aligned here. */
  .curriculum-pair .type-row{ text-align:center; }
  .curriculum-pair .type-row-head{ justify-content:center; flex-direction:column; align-items:center; gap:.2rem; }
  .curriculum-pair .type-row h3, .curriculum-pair .type-row p{ text-wrap:balance; }
}
.quote-carousel{ max-width:var(--max-narrow); margin-inline:auto; }
.quote-track{
  display:flex; align-items:flex-start; transition:height .45s ease;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.quote-track::-webkit-scrollbar{ display:none; }
.quote-track:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }
.quote-slide{ flex:0 0 100%; min-width:0; box-sizing:border-box; padding:0 clamp(8px,2vw,32px); scroll-snap-align:start; scroll-snap-stop:always; }
.quote-slide .quote{ margin-top:0; }
.quote-nav{ display:none; align-items:center; justify-content:center; gap:clamp(.8rem,2vw,1.4rem); margin-top:clamp(24px,3vw,40px); }
.quote-carousel.is-ready .quote-nav{ display:flex; }
.quote-dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; }
.quote-dot{ width:8px; height:8px; padding:0; margin:0; border:1px solid var(--ink); background:transparent; cursor:pointer; opacity:.45; transition:opacity .3s ease, background-color .3s ease; }
.quote-dot.is-active{ background:var(--ink); opacity:1; }
.quote-dot:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .quote-track{ scroll-behavior:auto; } }
.home .press{ padding-block:20px clamp(36px,4.5vw,64px); }
/* Ready to begin? (Steve, 17 Sep 2026 late): the three steps centre their
   number and text and the number steps up (a deliberate size exception on
   this page, like .type-tile h3); the s24 clock sits above the status line in
   the ink variant, the same deadline as the hero's. */
.apply-steps .plan-step{ text-align:center; }
.page-tt .apply-steps{ max-width:none; }
.apply-steps .plan-step .pstep-n{ font-size:clamp(2.6rem,3.4vw,3.4rem); margin-bottom:.9rem; }
.apply-close .countdown{ margin:0 0 clamp(1.4rem,2.4vw,2rem); }

/* 50. PRICING PICKER + ONE LIST PER TAB (client, 21 Sep 2026) ----------- */
/* "The buttons at the top have to be much clearer, I didn't see them
   straightaway." The s34 filter chips are replaced on /pricing/ by three
   boxes the width of the container: the list's name in the display face (the
   .type-tile h3 step, a button label not a heading) over one line of what it
   holds, white with a hairline, the chosen one filled ink. Every section on
   the page belongs to a tab (data-price-panel, template) and main.js hides the
   rest, so a visitor who picked Yoga & Mat sees only Yoga & Mat prices; a
   section can belong to two tabs (Unlimited passes). One column under 700px. */
.price-picker{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(1.8rem,3vw,2.6rem); text-align:left;
}
/* Deep links (#start, #private-reformer, ...) land under the sticky header
   otherwise; the same offset the Teacher Training anchors use (wp-extras.css). */
.price-block{ scroll-margin-top:clamp(88px, 11vh, 124px); }
/* The pricing page's own padding-top cap (21 Sep 2026) is now the site-wide
   rule at the top of this sheet, so the .page-pricing overrides that stood here
   are gone. The body class stays on the template for future use. */
.price-pick{
  display:flex; flex-direction:column; gap:.3rem;
  padding:clamp(1.1rem,1.8vw,1.5rem) clamp(1.2rem,2vw,1.7rem);
  background:var(--paper); color:var(--ink); border:1px solid var(--line-dark); border-radius:0;
  font:inherit; text-align:left; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.price-pick:hover{ border-color:var(--ink); }
/* Since 1 Oct 2026 the boxes are anchor links to sections on one page, not tabs. */
a.price-pick{ text-decoration:none; }
a.price-pick:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
a.price-pick:hover .pick-desc{ color:rgb(var(--white-rgb) / .78); }
.price-pick:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.price-pick.is-active{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.pick-name{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.6rem, 2vw, 1.9rem); line-height:1.06; }
.pick-desc{ font-size:1rem; line-height:1.6; color:var(--ink-soft); }
.price-pick.is-active .pick-desc{ color:rgb(var(--white-rgb) / .78); }
@media (max-width:700px){
  .price-picker{ grid-template-columns:minmax(0, 1fr); }
}

/* 51. TEACHER TRAINING HERO, TWO COLUMNS ON DESKTOP (client, 21 Sep 2026) -- */
/* "I quite like the TT page on the phone but it looks more bare on the
   computer ... maybe a more dynamic start with bullet points." From 900px the
   hero (template: .tt-hero-grid when hero.points is filled) is copy left,
   left-aligned - eyebrow, H1, strapline, the s24 clock, buttons - and a white
   .tt-glance box right with the points as the s11 hairline .checklist. Under
   900px the box is hidden and everything re-centres, so the phone layout the
   client liked is exactly as before; the facts in the box all appear further
   down the page anyway. */
.tt-hero-grid{
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:clamp(32px,4vw,72px); align-items:center; text-align:left;
}
.tt-hero-grid .eyebrow--center{ justify-content:flex-start; }
.tt-hero-grid .lead{ margin-inline:0; }
.tt-hero-grid .countdown{ justify-content:flex-start; }
.tt-hero-grid .hero-ctas{ justify-content:flex-start; }
.tt-glance{ background:var(--paper); border:1px solid var(--line); padding:clamp(24px,3vw,40px); }
.tt-glance .eyebrow{ margin-bottom:.4rem; }
.tt-glance .checklist{ margin-top:0; }
.tt-glance .checklist li:last-child{ border-bottom:0; padding-bottom:0; }
@media (max-width:899px){
  .tt-hero-grid{ display:block; max-width:var(--max-narrow); text-align:center; }
  .tt-hero-grid .eyebrow--center{ justify-content:center; }
  .tt-hero-grid .lead{ margin-inline:auto; }
  .tt-hero-grid .countdown, .tt-hero-grid .hero-ctas{ justify-content:center; }
  .tt-glance{ display:none; }
}

/* 52. TEACHER TRAINING, DESKTOP LIKE THE PHONE (client, 1 Oct 2026) ----- */
/* "We LOVE this page on the phone but not as much on the laptop." The At a
   glance box is gone (hero.points emptied, so the hero is the single centred
   column), and #overview / #format lose their two-column .split: centred
   copy with the practice pages' s40 three-photo collage above (#overview) or
   below (#format) it, the same stacking the phone already had. */
/* Full container width, no measure cap, and the ruled points centred
   (client, 2 Oct 2026: "the text needs to fit the full width of the page"). */
.tt-centred{ max-width:none; margin-inline:auto; text-align:center; }
.tt-centred .acf-copy > :first-child{ margin-top:0; }
.tt-centred .checklist{ max-width:none; margin-inline:auto; text-align:center; }
.tt-centred .schedule{ text-align:left; }
.tt-centred .schedule > summary{ display:flex; width:fit-content; margin-inline:auto; }
.tt-centred .tt-more{ justify-content:center; }
.tt-collage + .tt-centred,
.tt-single + .tt-centred,
.tt-centred + .tt-collage{ margin-top:clamp(28px,3.5vw,48px); }
.tt-single{ max-width:960px; margin-inline:auto; }
/* Faculty as /our-teachers/ cards (s29 .team-card) inside the white
   .faculty-box: sand cards so they read against the white, and the
   credential line between subject and bio. */
.page-tt .faculty-box .team-card{ background:var(--ground); }
.page-tt .faculty-box .team-avatar{ background:var(--paper); }
.team-cred{ font-size:.92rem; color:var(--ink-soft); margin:-.5rem 0 .8rem; }

/* About: "Why people choose PYC" runs the full container width with no photo
   beside it (client, 1 Oct 2026). */
.story-full .acf-copy{ max-width:none; }
/* Centred on the page (client, 2 Oct 2026). */
.story-full{ text-align:center; }
.story-full .acf-copy p{ text-wrap:pretty; }

/* About film (client, 5 Oct 2026): plays in the intro photo's frame under the
   founding-story quote. The homepage's .hero-video wrapper (absolute, faded in
   by main.js once playing) sits inside the .media frame; the frame's sand fill
   shows until playback starts. No scrim: nothing is set over the footage. */
.about-film .hero-video video{ object-position:center; }
/* Space either side at every width (client, 14 Oct 2026): the film is always
   narrower than the founding-story quote above it, which runs almost the full
   container width below ~1300px. Each tier keeps roughly the picture the
   original full-width frame showed at that size (about 5:4 on phones, 2:1 on
   tablets and laptops, the 1600x520 shape on wide screens), just smaller.
   !important beats the inline height the template prints. */
.about-film{ width:85%; margin-inline:auto; height:auto !important; aspect-ratio:5 / 4; }
@media (min-width:600px){ .about-film{ width:75%; aspect-ratio:2 / 1; } }
@media (min-width:1245px){ .about-film{ width:70%; max-width:1120px; aspect-ratio:40 / 13; } }
/* The homepage intro-offer band is a deep-link target (/#new-to-pyc). */
#new-to-pyc{ scroll-margin-top:clamp(88px, 11vh, 124px); }