/* =============================================================
   ROCKIN' WITH RACHEL — Shared Stylesheet
   Class naming: rwr- prefix throughout. Single classes only.
   ============================================================= */

/* 0. FONTS — self-hosted Nunito + DM Sans (latin, variable woff2 in /fonts).
   Same typefaces as before; this replaces the render-blocking Google Fonts
   stylesheet (a cross-origin request that stalled first paint ~2s on slow
   connections). font-display: swap shows fallback text immediately and swaps
   in when the woff2 loads, so nothing blocks the initial render. Paths are
   relative to this file, so they resolve from every page incl. /locations. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/nunito-latin-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(../fonts/dmsans-latin.woff2) format('woff2');
}

/* 1. CSS CUSTOM PROPERTIES */
:root {
  --cream: #FAF7F2;
  --warm-white: #FFFFFF;
  --soft-pink: #FBF0EC;
  --blush: #F2C4B8;
  /* Rose deepened from the original #D4896A to meet WCAG AA (the light original was
     ~2.5:1 as text and ~2.8:1 white-on-fill — both fail). This persimmon/coral keeps
     the warm, playful feel while passing: ~4.7:1 text on cream, ~5.0:1 white on
     fill. deep-rose is a darker persimmon for hover states. */
  --rose: #B84630;
  --deep-rose: #9A3826;
  --charcoal: #2A2420;
  --mid: #6B5B54;
  --light-mid: #C4B0A8;
  --font-display: 'Nunito', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --section-padding-v: 96px;
  --section-padding-h: 48px;
}

/* 2. RESET / BASE */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* 3. TYPOGRAPHY */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* 4. UTILITY CLASSES */
.rwr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rwr-img-full {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5. NAVIGATION */
.rwr-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 48px;
  padding-right: 48px;
  background-color: rgba(250, 247, 242, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(180, 160, 150, 0.15);
  transition: background-color 0.3s ease;
}

.rwr-nav-scrolled {
  background-color: rgba(250, 247, 242, 0.98);
  box-shadow: 0 2px 16px rgba(42, 36, 32, 0.06);
}

.rwr-nav-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.rwr-nav-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  display: block;
}

.rwr-nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.rwr-nav-link {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color 0.2s ease;
}

.rwr-nav-link:hover {
  color: var(--charcoal);
}

.rwr-nav-cta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--rose);
  color: var(--warm-white);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.rwr-nav-cta:hover {
  background-color: var(--deep-rose);
  color: var(--warm-white);
}

/* 44x44 hit area (the icon itself stays 28x18: box-sizing is border-box, so the
   padding is carved out of the box rather than added to it). The bars were the
   whole button before, which gave a 28x18 tap target — under the 24px WCAG 2.2
   minimum, on the primary mobile nav control. Margin pulls the bigger box back so
   the icon sits where it always did. */
.rwr-nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 44px;
  height: 44px;
  padding: 13px 8px;
  margin: -13px -8px;
  background: none;
  border: none;
  cursor: pointer;
}

.rwr-hamburger-line {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--charcoal);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.rwr-nav-mobile-menu {
  display: none;
  position: fixed;
  top: 92px;
  left: 0;
  right: 0;
  background-color: var(--cream);
  border-bottom: 1px solid rgba(180, 160, 150, 0.2);
  padding-top: 24px;
  padding-bottom: 32px;
  padding-left: 24px;
  padding-right: 24px;
  z-index: 99;
  flex-direction: column;
  gap: 20px;
}

.rwr-nav-mobile-menu.rwr-open {
  display: flex;
}

.rwr-mobile-link {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(180, 160, 150, 0.12);
}

.rwr-mobile-cta {
  display: inline-block;
  background-color: var(--rose);
  color: var(--warm-white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 8px;
  margin-top: 8px;
  text-align: center;
}

/* 6. BUTTONS */
.rwr-btn-primary {
  display: inline-block;
  background-color: var(--rose);
  color: var(--warm-white);
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 32px;
  padding-right: 32px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.rwr-btn-primary:hover {
  background-color: var(--deep-rose);
  color: var(--warm-white);
}

.rwr-btn-outline {
  display: inline-block;
  background-color: transparent;
  color: var(--warm-white);
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 32px;
  padding-right: 32px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
  font-family: var(--font-body);
}

.rwr-btn-outline:hover {
  border-color: var(--warm-white);
  background-color: rgba(255, 255, 255, 0.08);
}

.rwr-btn-rose-outline {
  display: inline-block;
  background-color: transparent;
  color: var(--rose);
  border: 1px solid var(--rose);
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 28px;
  padding-right: 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  font-family: var(--font-body);
}

.rwr-btn-rose-outline:hover {
  background-color: var(--rose);
  color: var(--warm-white);
}

/* 7. SECTION LABELS */
.rwr-section-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rwr-section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--rose);
  flex-shrink: 0;
}

.rwr-section-label-light {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* white over images (e.g. the CTA "come say hi"). The Programs section, which is
     on a white background, overrides this back to rose below. */
  color: #FFFFFF;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rwr-section-label-light::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--blush);
  flex-shrink: 0;
}

.rwr-section-label-centered {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 12px;
  text-align: center;
}

.rwr-section-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--charcoal);
  letter-spacing: 0;
}

.rwr-section-title-light {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--warm-white);
  letter-spacing: 0;
}

.rwr-section-title-centered {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--charcoal);
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 12px;
}

.rwr-title-em {
  font-style: italic;
  color: var(--rose);
}

.rwr-title-em-light {
  font-style: italic;
  color: var(--blush);
}

/* 8. HERO (shared hero styles) */
.rwr-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.rwr-hero-img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rwr-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.rwr-hero-slide.rwr-active {
  opacity: 1;
}

.rwr-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.rwr-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(42, 36, 32, 0.82) 0%, rgba(42, 36, 32, 0.34) 55%, rgba(42, 36, 32, 0.12) 100%);
}

.rwr-hero-content {
  position: relative;
  z-index: 2;
  /* Soft shadow so text stays legible over bright photos — the blush accent
     especially washed out against light studio walls/floors. Cascades to all
     text below; buttons reset it (see .rwr-hero-btns a). */
  text-shadow: 0 1px 20px rgba(42, 36, 32, 0.45), 0 1px 4px rgba(42, 36, 32, 0.55);
  padding-top: 0;
  padding-bottom: 80px;
  padding-left: 72px;
  padding-right: 72px;
  max-width: 800px;
}

.rwr-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* white, not blush: small text over bright photos — blush was the least legible
     text on the site. (Large accent lines stay blush; the shadow carries them.) */
  color: #FFFFFF;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rwr-hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--blush);
  flex-shrink: 0;
}

.rwr-hero-title {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--warm-white);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.rwr-hero-em {
  font-style: italic;
  color: var(--blush);
}

.rwr-hero-desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 480px;
  line-height: 1.75;
  margin-bottom: 36px;
  font-weight: 300;
}

.rwr-hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Buttons sit on their own solid/outlined fill, so they don't need the hero's
   text-shadow — clear it so button labels stay crisp. */
.rwr-hero-btns a,
.rwr-cta-btns a {
  text-shadow: none;
}

.rwr-hero-scroll {
  position: absolute;
  bottom: 36px;
  right: 48px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.rwr-hero-scroll-line {
  width: 1px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.3);
}

/* Page hero height variants */
.rwr-page-hero-h40 { height: 40vh; min-height: 340px; }
.rwr-page-hero-h50 { height: 50vh; min-height: 420px; }
.rwr-page-hero-h60 { height: 60vh; min-height: 480px; }
.rwr-page-hero-h65 { height: 65vh; min-height: 520px; }

/* Page hero (shorter — for inner pages) */
.rwr-page-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-top: 92px;
}

.rwr-page-hero-img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rwr-page-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.rwr-page-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(42, 36, 32, 0.85) 0%, rgba(42, 36, 32, 0.45) 60%, rgba(42, 36, 32, 0.22) 100%);
}

.rwr-page-hero-content {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 20px rgba(42, 36, 32, 0.45), 0 1px 4px rgba(42, 36, 32, 0.55);
  padding-top: 80px;
  padding-bottom: 64px;
  padding-left: 72px;
  padding-right: 72px;
}

.rwr-page-hero-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--warm-white);
  line-height: 1.12;
  margin-bottom: 12px;
}

.rwr-page-hero-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF; /* white, not blush — small text over the page-hero photo */
}

/* 9. TRUST BAR */
.rwr-trust-bar {
  background-color: var(--soft-pink);
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 48px;
  padding-right: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.rwr-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(42, 36, 32, 0.72);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-body);
}

.rwr-trust-strong {
  color: var(--charcoal);
  font-weight: 600;
}

.rwr-trust-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--deep-rose);
  flex-shrink: 0;
}

/* 10. FEATURES SECTION */
.rwr-features {
  background-color: var(--warm-white);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-features-header {
  margin-bottom: 48px;
}

.rwr-features-header-left {
  flex-shrink: 0;
}

.rwr-features-desc {
  font-size: 15px;
  color: var(--mid);
  line-height: 1.8;
  max-width: 420px;
  font-weight: 300;
}

.rwr-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}

.rwr-feature-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
}

.rwr-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}

.rwr-feature-card:hover .rwr-feature-img {
  transform: scale(1.04);
}

.rwr-feature-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(42, 36, 32, 0.88) 0%, rgba(42, 36, 32, 0.1) 100%);
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: 28px;
  padding-right: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 60%;
}

.rwr-feature-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
  margin-bottom: 8px;
}

.rwr-feature-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--warm-white);
  margin-bottom: 8px;
  line-height: 1.2;
}

.rwr-feature-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
  font-weight: 300;
}

/* 11. ABOUT SECTION */
.rwr-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  padding: 0;
}

.rwr-about-image {
  overflow: hidden;
  position: relative;
}

.rwr-about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rwr-about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 96px;
  padding-bottom: 96px;
  padding-left: 80px;
  padding-right: 80px;
  background-color: var(--cream);
}

.rwr-about-credential {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--soft-pink);
  color: var(--deep-rose);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 100px;
  margin-bottom: 28px;
  width: fit-content;
}

.rwr-about-text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mid);
  line-height: 1.85;
  font-weight: 300;
  margin-bottom: 20px;
}

.rwr-about-detail {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(180, 160, 150, 0.2);
  margin-top: 16px;
}

.rwr-about-detail-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.rwr-about-detail-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rwr-about-detail-text {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.4;
}

/* 12. SERVICES SECTION */
.rwr-services {
  background-color: var(--soft-pink);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-services-header {
  margin-bottom: 56px;
}

.rwr-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}

.rwr-service-card {
  background-color: var(--warm-white);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rwr-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(42, 36, 32, 0.1);
}

.rwr-service-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.rwr-service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.rwr-service-card:hover .rwr-service-img {
  transform: scale(1.05);
}

.rwr-service-body {
  padding-top: 24px;
  padding-bottom: 28px;
  padding-left: 24px;
  padding-right: 24px;
}

.rwr-service-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.rwr-service-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mid);
  line-height: 1.7;
  font-weight: 300;
}

/* 13. PROGRAMS SECTION */
.rwr-programs {
  background-color: var(--warm-white);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

/* Stacked like every other section header: label, title, then description below —
   left-aligned. (Was a split row with the title hard-left and the description
   hard-right, the only header on the site laid out that way.) */
.rwr-programs-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 56px;
  gap: 16px;
}

.rwr-programs-desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mid);
  line-height: 1.8;
  max-width: 560px;
  font-weight: 300;
}

.rwr-programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 20px;
}

/* Caption cards: photo on top, copy on a light panel below. The dark-overlay
   version couldn't carry the brand coral (--rose is too dark to read on a near-
   charcoal overlay); on this white panel the tag and link use the real --rose,
   matching the coral header above. Card grows to fit its copy; the link is
   pinned to the bottom so every card's CTA lines up across the row. */
.rwr-program-card {
  background-color: var(--warm-white);
  border: 1px solid rgba(42, 36, 32, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rwr-program-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}

.rwr-program-card:hover .rwr-program-img {
  transform: scale(1.04);
}

.rwr-program-overlay {
  padding-top: 24px;
  padding-bottom: 26px;
  padding-left: 24px;
  padding-right: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rwr-program-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  border: 1px solid rgba(184, 70, 48, 0.35);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  width: fit-content;
}

.rwr-program-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 8px;
  line-height: 1.2;
}

.rwr-program-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mid);
  line-height: 1.65;
  margin-bottom: 20px;
  font-weight: 300;
}

.rwr-program-link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s ease;
}

.rwr-program-card:hover .rwr-program-link {
  gap: 14px;
}

.rwr-program-link-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

/* 14. TESTIMONIALS SECTION */
.rwr-testimonials {
  background-color: var(--cream);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-testimonials-header {
  text-align: center;
  margin-bottom: 64px;
}

.rwr-testimonials-desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mid);
  line-height: 1.8;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}

.rwr-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}

.rwr-testi-card {
  background-color: var(--warm-white);
  padding-top: 36px;
  padding-bottom: 36px;
  padding-left: 32px;
  padding-right: 32px;
  border-radius: 16px;
  border: 1px solid rgba(180, 160, 150, 0.15);
}

.rwr-testi-stars {
  color: var(--rose);
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 20px;
  font-weight: 500;
}

.rwr-testi-quote {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.75;
  margin-bottom: 24px;
}

.rwr-testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(180, 160, 150, 0.15);
}

.rwr-testi-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--soft-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  color: var(--rose);
  flex-shrink: 0;
}

.rwr-testi-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
}

/* TESTIMONIALS SLIDER — horizontal carousel (the only auto motion on the site) */
.rwr-testi-slider {
  position: relative;
}

.rwr-testi-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 18px;
  scrollbar-width: none;
}

/* Scroll-snap is enabled by JS (§14) on first interaction, not at load.
   scroll-snap-type on the track triggers an on-load snap scroll that Chrome
   counts as an interaction, which invalidates the Largest Contentful Paint
   before it's ever emitted — the page then reports NO_LCP and Performance
   can't be scored at all. Deferring snap keeps the swipe-to-card feel while
   leaving the first paint measurable. See js/main.js §14. */
.rwr-testi-track.rwr-snap {
  scroll-snap-type: x mandatory;
}

.rwr-testi-track::-webkit-scrollbar {
  display: none;
}

.rwr-testi-slider .rwr-testi-card {
  flex: 0 0 340px;
  max-width: 88%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.rwr-testi-slider .rwr-testi-quote {
  flex: 1 1 auto;
}

.rwr-testi-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(180, 160, 150, 0.3);
  background-color: var(--warm-white);
  color: var(--deep-rose);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(42, 36, 32, 0.1);
  transition: background-color 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.rwr-testi-arrow:hover {
  background-color: var(--deep-rose);
  color: var(--warm-white);
}

.rwr-testi-prev { left: -10px; }
.rwr-testi-next { right: -10px; }

/* Location pages: alternate section tints so no two neighbours share a colour.
   Scoped by the area-* heading ids, so the shared section classes are untouched
   everywhere else (home, schedule, faq, class pages). The intro stays white and
   what-to-expect stays soft-pink; testimonials is already cream globally; these flip
   schedule + faq. Full sequence becomes white · pink · cream · pink · cream. */
.rwr-schedule[aria-labelledby="area-programs-heading"] { background-color: var(--soft-pink); }
.rwr-faq[aria-labelledby="area-faq-heading"] { background-color: var(--cream); }

/* 15. CTA BANNER */
.rwr-cta-banner {
  position: relative;
  height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rwr-cta-img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rwr-cta-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rwr-cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(42, 36, 32, 0.62);
}

.rwr-cta-content {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 20px rgba(42, 36, 32, 0.45), 0 1px 4px rgba(42, 36, 32, 0.55);
  text-align: center;
  padding-left: 48px;
  padding-right: 48px;
}

.rwr-cta-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--warm-white);
  line-height: 1.12;
  margin-bottom: 16px;
}

.rwr-cta-sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 36px;
  font-weight: 300;
}

.rwr-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 16. FOOTER */
.rwr-footer {
  background-color: var(--cream);
  border-top: 1px solid rgba(42, 36, 32, 0.1);
  padding-top: 64px;
  padding-bottom: 40px;
  padding-left: 48px;
  padding-right: 48px;
}

.rwr-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(42, 36, 32, 0.1);
  flex-wrap: wrap;
}

.rwr-footer-logo-wrap {
  flex-shrink: 0;
  align-self: flex-end;
}

.rwr-footer-logo {
  height: 132px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.rwr-footer-links {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.rwr-footer-col {
  display: flex;
  flex-direction: column;
}

.rwr-footer-col-title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42, 36, 32, 0.72); /* was 0.5 — failed AA on cream (~2.5:1); 0.72 passes */
  margin-bottom: 16px;
}

.rwr-footer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* inline-block + vertical padding lifts these from a 17px tap target to 25px,
   clearing the 24px WCAG 2.2 minimum without changing how the list looks. */
.rwr-footer-link {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(42, 36, 32, 0.72);
  transition: color 0.2s ease;
}

.rwr-footer-link:hover {
  color: var(--deep-rose);
}

.rwr-footer-newsletter-band {
  background-color: var(--rose);
  border-radius: 20px;
  padding: 48px 56px;
  margin-bottom: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.rwr-footer-newsletter-band-copy {
  flex: 1 1 320px;
}

.rwr-footer-newsletter-band-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFFFF; /* was 0.78 white — failed AA on the accent band; solid white passes */
  margin-bottom: 10px;
}

.rwr-footer-newsletter-band-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--warm-white);
  margin-bottom: 10px;
}

.rwr-footer-newsletter-band-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 440px;
}

/* Signup is a Breely modal now, not an inline form: the band holds a single button
   (.breely-popup-trigger) and the email field lives inside the modal, so there's no
   input, no validation state and no thank-you panel to style here. */
.rwr-footer-newsletter-band-actions {
  flex: 0 0 auto;
}

.rwr-footer-newsletter-band-btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--deep-rose);
  background-color: var(--warm-white);
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.rwr-footer-newsletter-band-btn:hover {
  background-color: var(--charcoal);
  color: var(--warm-white);
}

.rwr-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.rwr-footer-copy {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(42, 36, 32, 0.7); /* was 0.45 — failed AA on cream; 0.7 passes */
}

.rwr-footer-social {
  display: flex;
  gap: 20px;
}

.rwr-footer-social-link {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(42, 36, 32, 0.72); /* was 0.55 — failed AA on cream; 0.72 passes */
  transition: color 0.2s ease;
}

.rwr-footer-social-link:hover {
  color: var(--deep-rose);
}

/* Scroll-reveal disabled by request — content shows immediately, the only motion
   on the site is the horizontal sliders (gallery strip + testimonials). */
.rwr-fade-up,
.rwr-fade-up.rwr-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 17. PAGE-SPECIFIC: CLASSES PAGE */
.rwr-classes-intro {
  background-color: var(--warm-white);
  padding-top: 64px;
  padding-bottom: 64px;
  padding-left: 48px;
  padding-right: 48px;
}

.rwr-classes-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: center;
}

.rwr-classes-pullquote {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.35;
}

.rwr-classes-credential {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mid);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 16px;
}

.rwr-classes-credential:last-child {
  margin-bottom: 0;
}

.rwr-classes-credential-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--soft-pink);
  color: var(--deep-rose);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 14px;
  padding-right: 14px;
  border-radius: 100px;
  margin-bottom: 16px;
  width: fit-content;
}

.rwr-schedule {
  background-color: var(--cream);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

/* Gift cards page: tinted so the single section reads apart from the cream footer. */
.rwr-gift-section {
  background-color: var(--soft-pink);
}

/* Breathing room between the "who it's for" cards and the booking form, which
   otherwise butt straight up against each other. Scoped to this page — on
   schedule/contact the embed already sits below its own header. */
.rwr-gift-section .rwr-breely-embed {
  margin-top: 56px;
}

.rwr-schedule-header {
  margin-bottom: 40px;
}

/* Booking embeds (Breely). `.rwr-breely-embed` is the placeholder in each
   schedule tab; js/main.js drops a `.breely-inline` div in on first view and
   Breely's embed.js swaps that for a `.breely-iframe`, sizing it via postMessage
   (inline height, so we only set width/display here). */
.rwr-breely-embed {
  margin-bottom: 64px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--cream);
  border: 1px solid rgba(180, 160, 150, 0.2);
  box-shadow: 0 4px 32px rgba(42, 36, 32, 0.07);
}

.rwr-breely-embed .breely-iframe {
  display: block;
  border: none;
  width: 100%;
}

/* Shown in place of the embed when a panel is flagged data-empty (see js/main.js). */
.rwr-breely-empty {
  margin: 0;
  padding: 64px 32px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--mid);
}

.rwr-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.rwr-filter-tab {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid rgba(180, 160, 150, 0.4);
  border-radius: 6px;
  background-color: transparent;
  color: var(--mid);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rwr-filter-tab:hover {
  border-color: var(--rose);
  color: var(--rose);
}

.rwr-filter-tab.rwr-active {
  background-color: var(--rose);
  border-color: var(--rose);
  color: var(--warm-white);
}

.rwr-classes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}

.rwr-class-card {
  background-color: var(--warm-white);
  border-radius: 16px;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 28px;
  padding-right: 28px;
  border: 1px solid rgba(180, 160, 150, 0.15);
  transition: box-shadow 0.2s ease;
}

.rwr-class-card:hover {
  box-shadow: 0 8px 32px rgba(42, 36, 32, 0.08);
}

.rwr-class-card.rwr-hidden {
  display: none;
}

.rwr-class-time {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 12px;
}

.rwr-class-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.rwr-badge-baby {
  background-color: var(--soft-pink);
  color: var(--deep-rose);
}

.rwr-badge-toddler {
  background-color: #EDE8F5;
  color: #6B5888;
}

.rwr-badge-inhome {
  background-color: #E8F0EF;
  color: #2A5A52;
}

.rwr-class-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.rwr-class-meta-item {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mid);
  font-weight: 300;
}

.rwr-class-spots {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--rose);
  margin-bottom: 20px;
}

.rwr-class-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(180, 160, 150, 0.12);
}

.rwr-class-price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--charcoal);
}

.rwr-what-to-expect {
  background-color: var(--soft-pink);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-expect-header {
  margin-bottom: 56px;
}

.rwr-expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 32px;
}

.rwr-expect-icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.rwr-expect-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.rwr-expect-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mid);
  line-height: 1.75;
  font-weight: 300;
}

.rwr-gallery-strip {
  overflow: hidden;
  display: flex;
}

.rwr-gallery-track {
  display: flex;
  width: max-content;
  animation: rwr-gallery-marquee 60s linear infinite;
}

.rwr-gallery-strip:hover .rwr-gallery-track {
  animation-play-state: paused;
}

@keyframes rwr-gallery-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rwr-gallery-track { animation: none; }
  /* Show scroll-reveal content immediately — no motion for sensitive users */
  .rwr-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.rwr-gallery-photo {
  flex-shrink: 0;
  width: 28vw;
  height: 380px;
  overflow: hidden;
}

.rwr-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rwr-faq {
  background-color: var(--warm-white);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-faq-header {
  margin-bottom: 48px;
}

.rwr-faq-list {
  max-width: 800px;
}

.rwr-faq-item {
  border-bottom: 1px solid rgba(180, 160, 150, 0.2);
}

.rwr-faq-item input[type="checkbox"] {
  display: none;
}

.rwr-faq-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 24px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--charcoal);
  gap: 16px;
}

.rwr-faq-icon {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--rose);
  transition: transform 0.25s ease;
  line-height: 1;
}

.rwr-faq-item input:checked ~ .rwr-faq-label .rwr-faq-icon {
  transform: rotate(45deg);
}

.rwr-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.rwr-faq-item input:checked ~ .rwr-faq-answer {
  max-height: 1200px;
}

.rwr-faq-answer-inner {
  padding-bottom: 24px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mid);
  line-height: 1.8;
  font-weight: 300;
}

.rwr-faq-still-q-body {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 20px;
}

.rwr-faq-still-q-text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mid);
  margin-bottom: 32px;
}

.rwr-faq-still-q-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 18. PAGE-SPECIFIC: ABOUT PAGE */
.rwr-about-intro {
  background-color: var(--cream);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
  text-align: center;
}

.rwr-about-intro-inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.rwr-about-intro-text {
  margin-top: 28px;
  text-align: left;
}

.rwr-stats-strip {
  display: flex;
  gap: 48px;
  margin-top: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(180, 160, 150, 0.2);
  flex-wrap: wrap;
}

.rwr-stats-strip-centered {
  justify-content: center;
  gap: 64px;
}

.rwr-stats-strip-centered .rwr-stat {
  align-items: center;
}

.rwr-stat {
  display: flex;
  flex-direction: column;
}

.rwr-stat-number {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--rose);
  line-height: 1;
  margin-bottom: 4px;
}

.rwr-stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}

.rwr-credentials {
  background-color: var(--soft-pink);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
  text-align: center;
}

.rwr-credentials-header {
  margin-bottom: 56px;
}

.rwr-credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 32px;
}

.rwr-credential-card {
  background-color: var(--warm-white);
  border-radius: 16px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 32px;
  padding-right: 32px;
  text-align: center;
}

.rwr-credential-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.rwr-credential-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.rwr-credential-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mid);
  line-height: 1.7;
  font-weight: 300;
}

.rwr-about-photos {
  background-color: var(--warm-white);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-about-photos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.rwr-about-photo {
  overflow: hidden;
  border-radius: 16px;
  height: 460px;
}

.rwr-about-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.rwr-about-photo:hover .rwr-about-photo-img {
  transform: scale(1.04);
}

/* 19. PAGE-SPECIFIC: BIRTHDAY PARTIES */
.rwr-party-included {
  background-color: var(--soft-pink);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-party-included-header {
  margin-bottom: 56px;
}

.rwr-party-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 40px;
}

.rwr-party-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.rwr-party-item-icon {
  font-size: 32px;
  flex-shrink: 0;
  margin-top: 2px;
}

.rwr-party-item-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.rwr-party-item-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mid);
  line-height: 1.75;
  font-weight: 300;
}

.rwr-party-included-intro {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mid);
  line-height: 1.8;
  max-width: 600px;
  margin-top: 16px;
  font-weight: 300;
}

/* "Beyond birthdays" is its own section in a different colour (white) from the
   soft-pink party section above, so it reads as a distinct block. */
.rwr-party-beyond-section {
  background-color: var(--warm-white);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
  text-align: center;
}

.rwr-party-beyond-section .rwr-credential-card {
  border: 1px solid rgba(180, 160, 150, 0.18);
  box-shadow: 0 4px 24px rgba(42, 36, 32, 0.05);
}

.rwr-party-beyond-header {
  margin-bottom: 40px;
}

.rwr-packages {
  background-color: var(--cream);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-packages-header {
  margin-bottom: 56px;
}

.rwr-packages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 32px;
  max-width: 900px;
}

.rwr-package-card {
  background-color: var(--warm-white);
  border-radius: 16px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 40px;
  padding-right: 40px;
  border: 1px solid rgba(180, 160, 150, 0.15);
}

.rwr-package-type {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 8px;
}

.rwr-package-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.rwr-package-price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--mid);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(180, 160, 150, 0.15);
}

.rwr-package-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.rwr-package-list-item {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mid);
  font-weight: 300;
  padding-left: 20px;
  position: relative;
}

.rwr-package-list-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--rose);
  font-weight: 500;
}

.rwr-party-contact {
  background-color: var(--blush);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-party-contact-inner {
  max-width: 680px;
}

.rwr-party-contact-header {
  margin-bottom: 40px;
}

/* 20. PAGE-SPECIFIC: CONTACT */
.rwr-contact-section {
  background-color: var(--soft-pink);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  column-gap: 64px;
  align-items: start;
}

/* Form sticks in view while reading the contact details on the left */
.rwr-contact-grid .rwr-form {
  position: sticky;
  top: 24px;
}

.rwr-contact-details-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 16px;
}

.rwr-contact-intro {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--mid);
  margin-bottom: 28px;
  max-width: 38ch;
}

.rwr-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.rwr-contact-item {
  display: flex;
  gap: 16px;
  align-items: center;
  background-color: var(--warm-white);
  border: 1px solid rgba(190, 74, 50, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 12px 32px -28px rgba(42, 36, 32, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rwr-contact-item:hover {
  transform: translateY(-2px);
  border-color: rgba(190, 74, 50, 0.28);
  box-shadow: 0 18px 38px -26px rgba(42, 36, 32, 0.5);
}

.rwr-contact-item-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(242, 196, 184, 0.4), rgba(190, 74, 50, 0.16));
  border-radius: 12px;
}

.rwr-contact-item-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mid);
  line-height: 1.55;
  font-weight: 300;
}

.rwr-contact-item-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose);
  display: block;
  margin-bottom: 3px;
}

/* email / phone / Instagram are the primary actions on this page — inline-block +
   padding takes them from an 18px tap target to 26px (24px WCAG 2.2 minimum). */
.rwr-contact-item-text a {
  display: inline-block;
  padding: 4px 0;
  color: var(--charcoal);
  font-weight: 400;
}

.rwr-contact-item-text a:hover {
  color: var(--rose);
}

.rwr-contact-social {
  display: flex;
  gap: 16px;
}

.rwr-contact-social-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rose);
  border: 1px solid rgba(190, 74, 50, 0.4);
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.rwr-contact-social-link:hover {
  background-color: var(--rose);
  color: var(--warm-white);
}

.rwr-contact-map {
  background-color: var(--warm-white);
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-map-header {
  margin-bottom: 32px;
}

.rwr-map-embed {
  width: 100%;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--light-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rwr-map-placeholder {
  text-align: center;
  color: var(--mid);
}

.rwr-map-placeholder-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  margin-top: 8px;
}

/* Small button variant (for compact card footers) */
.rwr-btn-sm {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 12px;
}

/* Party contact description */
.rwr-party-contact-desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(42, 36, 32, 0.7);
  line-height: 1.8;
  font-weight: 300;
  margin-top: 16px;
}

/* Programs sits on white, using the same rose accents as the areas section
   below it (the shared "-light" header classes are built for dark sections). */
.rwr-programs .rwr-section-label-light {
  color: var(--rose);
}
.rwr-programs .rwr-section-label-light::before {
  background-color: var(--rose);
}
.rwr-programs .rwr-section-title-light {
  color: var(--charcoal);
}
.rwr-programs .rwr-title-em-light {
  color: var(--rose);
}

/* Map placeholder icon / text */
.rwr-map-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
}

.rwr-map-placeholder-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--mid);
  margin-top: 8px;
}

/* SHARED FORM STYLES */
.rwr-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--warm-white);
  border: 1px solid rgba(190, 74, 50, 0.14);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 22px 60px -32px rgba(42, 36, 32, 0.30);
}

/* Friendly header inside the form card */
.rwr-form-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 22px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(190, 74, 50, 0.12);
}

.rwr-form-title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  color: var(--charcoal);
}

.rwr-form-intro {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--mid);
}

.rwr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 20px;
}

.rwr-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rwr-form-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}

.rwr-form-input {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--charcoal);
  background-color: var(--cream);
  border: 1.5px solid rgba(180, 160, 150, 0.35);
  border-radius: 10px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rwr-form-input:hover {
  border-color: rgba(190, 74, 50, 0.5);
}

.rwr-form-input:focus {
  border-color: var(--rose);
  background-color: var(--warm-white);
  box-shadow: 0 0 0 3px rgba(190, 74, 50, 0.16);
}

.rwr-form-textarea {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--charcoal);
  background-color: var(--cream);
  border: 1.5px solid rgba(180, 160, 150, 0.35);
  border-radius: 10px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
  outline: none;
  resize: vertical;
  min-height: 140px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rwr-form-textarea:hover {
  border-color: rgba(190, 74, 50, 0.5);
}

.rwr-form-textarea:focus {
  border-color: var(--rose);
  background-color: var(--warm-white);
  box-shadow: 0 0 0 3px rgba(190, 74, 50, 0.16);
}

/* Newsletter consent checkbox (CASL express opt-in) */
.rwr-form-consent {
  flex-direction: row;
}

.rwr-form-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.rwr-form-consent-check {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--rose);
  cursor: pointer;
}

.rwr-form-consent-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--mid);
}

.rwr-form-select {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--charcoal);
  background-color: var(--cream);
  border: 1.5px solid rgba(180, 160, 150, 0.35);
  border-radius: 10px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 16px;
  padding-right: 44px;
  width: 100%;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Custom chevron so the dropdown reads as interactive, not a dead field */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D4896A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rwr-form-select:hover {
  border-color: rgba(190, 74, 50, 0.5);
}

.rwr-form-select:focus {
  border-color: var(--rose);
  background-color: var(--warm-white);
  box-shadow: 0 0 0 3px rgba(190, 74, 50, 0.16);
}

/* Make the submit button fill the card so the next step is obvious */
.rwr-form .rwr-btn-primary {
  width: 100%;
}

/* 21. AREAS / LOCAL SEO SECTION */
.rwr-areas {
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
  background-color: var(--soft-pink);
  text-align: center;
}

.rwr-areas-inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.rwr-areas-text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mid);
  line-height: 1.75;
  max-width: 640px;
}

.rwr-areas-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}

.rwr-areas-group-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--charcoal);
  margin-top: 44px;
  margin-bottom: 18px;
}

.rwr-area-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--rose);
  /* solid white pill, not a rose tint: rose-on-tint measured under 4.5:1 (axe
     flagged it). Rose text on white passes ~5:1. Hover flips to a rose fill below. */
  background-color: var(--warm-white);
  border: 1px solid rgba(190, 74, 50, 0.22);
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 14px;
  padding-right: 14px;
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a.rwr-area-tag:hover {
  background-color: var(--rose);
  color: var(--warm-white);
}

.rwr-areas-link {
  color: var(--rose);
  text-decoration: underline;
}

.rwr-section-cta-center {
  text-align: center;
  margin-top: 40px;
}

/* 22. GALLERY PAGE */
.rwr-gallery-section {
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
}

.rwr-gallery-intro {
  max-width: 560px;
  margin-bottom: 56px;
}

.rwr-gallery-intro-text {
  font-size: 16px;
  color: var(--mid);
  line-height: 1.75;
  margin-top: 16px;
}

.rwr-masonry {
  columns: 4;
  column-gap: 10px;
}

.rwr-masonry-item {
  break-inside: avoid;
  margin-bottom: 10px;
}

.rwr-masonry-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  transition: opacity 0.3s ease;
}

.rwr-masonry-img:hover {
  opacity: 0.92;
}

/* Per-image focal point overrides (faces sitting high in frame) */
.rwr-pos-20 { object-position: center 20%; }
.rwr-pos-25 { object-position: center 25%; }
.rwr-pos-30 { object-position: center 30%; }

/* 24. OVERFLOW PROTECTION (long emails / URLs in narrow columns) */
.rwr-footer-link,
.rwr-contact-item-text,
.rwr-contact-item-text a,
.rwr-areas-link {
  overflow-wrap: anywhere;
}

/* 25. NAV DROPDOWNS */
.rwr-nav-item-dd {
  position: relative;
  padding-top: 14px;
  padding-bottom: 14px;
}

.rwr-nav-dd-toggle {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.rwr-nav-dd-toggle:hover {
  color: var(--charcoal);
}

.rwr-nav-dd-caret {
  font-size: 9px;
  line-height: 1;
}

.rwr-nav-dd {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 232px;
  background-color: var(--cream);
  border: 1px solid rgba(180, 160, 150, 0.2);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(42, 36, 32, 0.12);
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 110;
}

.rwr-nav-item-dd:hover .rwr-nav-dd,
.rwr-nav-item-dd:focus-within .rwr-nav-dd,
.rwr-nav-item-dd.rwr-dd-open .rwr-nav-dd {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rwr-nav-dd-link {
  display: block;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mid);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.rwr-nav-dd-link:hover {
  color: var(--charcoal);
  background-color: rgba(190, 74, 50, 0.12);
}

/* 26. MOBILE MENU ACCORDION GROUPS */
.rwr-mobile-group {
  border-bottom: 1px solid rgba(180, 160, 150, 0.12);
}

.rwr-mobile-group-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  background: none;
  border: none;
  cursor: pointer;
  padding-top: 6px;
  padding-bottom: 12px;
  padding-left: 0;
  padding-right: 0;
}

.rwr-mobile-group-caret {
  font-size: 11px;
  transition: transform 0.25s ease;
}

.rwr-mobile-group.rwr-open .rwr-mobile-group-caret {
  transform: rotate(180deg);
}

.rwr-mobile-group-links {
  display: none;
  flex-direction: column;
  padding-bottom: 14px;
}

.rwr-mobile-group.rwr-open .rwr-mobile-group-links {
  display: flex;
}

.rwr-mobile-sublink {
  font-size: 14px;
  color: var(--mid);
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
}

/* 27. SCHEDULE TABS */
.rwr-page-top-pad {
  padding-top: 150px;
}

.rwr-tabs-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.rwr-sched-tab {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 999px;
  border: 1px solid rgba(154, 56, 38, 0.35);
  background: none;
  color: var(--mid);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.rwr-sched-tab:hover {
  color: var(--deep-rose);
  border-color: var(--deep-rose);
}

.rwr-sched-tab.rwr-active {
  background-color: var(--rose);
  border-color: var(--rose);
  color: var(--warm-white);
}

.rwr-tab-panel {
  display: none;
}

.rwr-tab-panel.rwr-active {
  display: block;
}

.rwr-tab-info {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
  text-align: center;
}

.rwr-tab-info-meta {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep-rose);
  margin-bottom: 8px;
}

.rwr-tab-info-text {
  font-size: 16px;
  color: var(--mid);
  line-height: 1.7;
}

/* 28. BREADCRUMBS */
.rwr-breadcrumbs {
  padding-top: 18px;
  padding-bottom: 0;
  padding-left: var(--section-padding-h);
  padding-right: var(--section-padding-h);
  font-size: 13px;
  color: var(--mid);
}

.rwr-breadcrumb-link {
  color: var(--deep-rose);
}

.rwr-breadcrumb-link:hover {
  text-decoration: underline;
}

.rwr-breadcrumb-sep {
  margin-left: 8px;
  margin-right: 8px;
}

.rwr-btns-center {
  justify-content: center;
  margin-top: 40px;
}

/* Calendar pills (secondary selector inside the Sessions tab) */
.rwr-cal-pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.rwr-cal-pill {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 999px;
  border: 1px solid rgba(154, 56, 38, 0.3);
  background: none;
  color: var(--mid);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.rwr-cal-pill:hover {
  color: var(--deep-rose);
  border-color: var(--deep-rose);
}

.rwr-cal-pill.rwr-active {
  background-color: var(--deep-rose);
  border-color: var(--deep-rose);
  color: var(--warm-white);
}

.rwr-cal-pane {
  display: none;
}

/* Conditional form fields toggled via the hidden attribute */
.rwr-form-group[hidden] {
  display: none !important;
}

/* Form inside the Current Sessions schedule tab */
.rwr-sched-form-wrap {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.rwr-cal-pane.rwr-active {
  display: block;
}

/* 29. STICKY MOBILE BOOKING BAR (class pages, shown <=767 only) */
.rwr-sticky-book {
  display: none;
}

/* 23. MEDIA QUERIES — Webflow breakpoints: 991 / 767 / 479 */
@media (max-width: 991px) {
  .rwr-hero-title { font-size: 46px; }
  .rwr-cta-title { font-size: 38px; }
  .rwr-page-hero-title { font-size: 42px; }
  .rwr-about-content { padding-left: 56px; padding-right: 56px; }
  .rwr-footer-links { gap: 40px; }
  .rwr-classes-grid { grid-template-columns: repeat(2, 1fr); }
  .rwr-contact-grid { column-gap: 48px; }
  .rwr-masonry { columns: 3; }

  /* Tablet: text-heavy 3-col grids step down to 2 before mobile collapse */
  .rwr-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .rwr-testi-card { padding: 24px; }
  .rwr-expect-grid { grid-template-columns: repeat(2, 1fr); }
  .rwr-credentials-grid { grid-template-columns: repeat(2, 1fr); }

  /* Nav collapses to hamburger at tablet — six top-level items don't fit below 992px */
  .rwr-nav-links { display: none; }
  .rwr-nav-hamburger { display: flex; }

  /* Feature cards lock an aspect-ratio and clip their overflow, while their
     caption sits in an absolutely-positioned overlay. Once the column gets
     narrow the overlay is taller than the card, so the heading and the top of the
     copy get sliced off — and because the card itself doesn't overflow the page,
     a page-level overflow check never catches it.
     Two fixes: step the grids down here (they were still 3- and 4-up at 768px),
     and let the overlay drive the card height — image fills the card absolutely,
     caption sits in flow at the bottom, card grows to whatever the text needs. */
  .rwr-features-grid { grid-template-columns: repeat(2, 1fr); }
  .rwr-programs-grid { grid-template-columns: repeat(2, 1fr); }

  /* Feature cards still use the dark-overlay treatment, so they keep the
     height fix. (Program cards are now caption cards that flow and grow on
     their own — no override needed.) */
  .rwr-feature-card {
    aspect-ratio: auto;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .rwr-feature-img { position: absolute; inset: 0; }
  .rwr-feature-overlay { position: relative; min-height: 0; }
}

@media (max-width: 767px) {
  :root {
    --section-padding-v: 64px;
    --section-padding-h: 24px;
  }

  /* Nav */
  .rwr-nav {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Sticky booking bar (class pages) */
  .rwr-sticky-book {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgba(250, 247, 242, 0.96);
    border-top: 1px solid rgba(180, 160, 150, 0.25);
  }
  .rwr-sticky-book-btn {
    display: block;
    text-align: center;
    background-color: var(--rose);
    color: var(--warm-white);
    padding-top: 13px;
    padding-bottom: 13px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  body:has(.rwr-sticky-book) .rwr-footer {
    padding-bottom: 96px;
  }

  /* Hero */
  .rwr-hero-content {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 56px;
  }
  .rwr-hero-title { font-size: 38px; }
  .rwr-hero-scroll { display: none; }

  /* Page hero */
  .rwr-page-hero-content {
    padding-left: 24px;
    padding-right: 24px;
  }
  .rwr-page-hero-title { font-size: 34px; }

  /* Trust bar: wrap nicely */
  .rwr-trust-bar {
    gap: 20px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Features: single column */
  .rwr-features-grid { grid-template-columns: 1fr; }

  /* About: stack vertically */
  .rwr-about { grid-template-columns: 1fr; min-height: auto; }
  .rwr-about-image { height: 420px; }
  .rwr-about-content {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* Services: 1 column */
  .rwr-services-grid { grid-template-columns: 1fr; }

  /* Programs: 2 columns at tablet. Header stacks tighter so "Find what fits"
     sits cleanly above the cards with room to breathe. */
  .rwr-programs-header { flex-direction: column; align-items: flex-start; margin-bottom: 28px; gap: 14px; }
  .rwr-programs-desc { max-width: none; }
  /* (card height + grid step-down handled in the 991 block above) */
  .rwr-programs-grid { grid-template-columns: repeat(2, 1fr); }

  /* Testimonials slider: swipe on touch, hide the arrows */
  .rwr-testimonials-grid { grid-template-columns: 1fr; }
  .rwr-testi-arrow { display: none; }
  .rwr-testi-slider .rwr-testi-card { max-width: 90%; }

  /* Footer: stack columns; logo drops to the bottom, centered and smaller
     (was floating awkwardly above the link columns on phones). */
  .rwr-footer-top { flex-direction: column; }
  .rwr-footer-logo-wrap { order: 2; align-self: center; margin-top: 28px; }
  .rwr-footer-logo { height: 92px; }
  .rwr-footer-links { gap: 32px; }
  .rwr-footer-bottom { flex-direction: column; align-items: flex-start; }
  .rwr-footer-newsletter-band {
    padding: 32px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 40px;
  }
  .rwr-footer-newsletter-band-title { font-size: 26px; }
  /* In column layout the row flex-basis becomes a height basis and balloons these
     blocks vertically — reset to content height. */
  .rwr-footer-newsletter-band-copy { flex: 0 0 auto; }
  .rwr-footer-newsletter-band-actions { flex: 0 0 auto; }

  /* Sections */
  .rwr-section-title { font-size: 28px; }
  .rwr-section-title-light { font-size: 28px; }
  .rwr-section-title-centered { font-size: 28px; }
  .rwr-cta-title { font-size: 32px; }

  /* CTA */
  .rwr-cta-content { padding-left: 24px; padding-right: 24px; }

  /* Classes page */
  .rwr-classes-grid { grid-template-columns: 1fr; }
  .rwr-classes-intro-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .rwr-expect-grid { grid-template-columns: 1fr; }
  .rwr-gallery-photo { width: 75vw; }
  .rwr-masonry { columns: 2; }

  /* About page */
  .rwr-credentials-grid { grid-template-columns: 1fr; }
  .rwr-stats-strip { gap: 32px; }
  .rwr-about-photos-grid { grid-template-columns: 1fr; }
  .rwr-about-photo { height: 320px; }

  /* Birthday parties */
  .rwr-party-items-grid { grid-template-columns: 1fr; }
  .rwr-packages-grid { grid-template-columns: 1fr; }

  /* Contact */
  .rwr-contact-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .rwr-contact-grid .rwr-form { position: static; }
  .rwr-form-row { grid-template-columns: 1fr; }
  .rwr-form { padding: 28px 22px; }

  /* Nav */
  .rwr-nav { padding-left: 24px; padding-right: 24px; }
  .rwr-nav-logo { height: 42px; }
  .rwr-nav-mobile-menu { top: 83px; }

}

@media (max-width: 479px) {
  :root {
    --section-padding-v: 48px;
    --section-padding-h: 20px;
  }

  /* Two program cards side by side leaves ~174px of width on a phone — the copy
     wraps to a shred and reads terribly even once it isn't clipped. One per row. */
  .rwr-programs-grid { grid-template-columns: 1fr; }

  /* Hero H1: mobile sizes */
  .rwr-hero-title { font-size: 32px; }
  .rwr-page-hero-title { font-size: 28px; }
  .rwr-section-title { font-size: 24px; }
  .rwr-section-title-light { font-size: 24px; }
  .rwr-section-title-centered { font-size: 24px; }
  .rwr-cta-title { font-size: 26px; }
  .rwr-cta-banner { height: 400px; }
  .rwr-hero-content { padding-left: 20px; padding-right: 20px; }
  .rwr-nav { padding-left: 20px; padding-right: 20px; }
  .rwr-footer { padding-left: 20px; padding-right: 20px; }
  .rwr-hero-btns { flex-direction: column; align-items: flex-start; }
  .rwr-cta-btns { flex-direction: column; align-items: center; }
  .rwr-gallery-photo { width: 84vw; }
  .rwr-masonry { columns: 1; }

  /* Small phones: rein in fixed minimum heights */
  .rwr-hero { min-height: 560px; }
  .rwr-page-hero-h60 { min-height: 440px; }
  .rwr-page-hero-h65 { min-height: 460px; }
  .rwr-hero-btns .rwr-btn-primary,
  .rwr-hero-btns .rwr-btn-outline { width: 100%; text-align: center; }
}