/* Content-only image overrides written by the Phoenix visual CMS. */
[style*="--phoenix-cms-before-bg"]::before {
  background-image: var(--phoenix-cms-before-bg) !important;
}

[style*="--phoenix-cms-after-bg"]::after {
  background-image: var(--phoenix-cms-after-bg) !important;
}

/* Shared responsive safeguards. These normalise legacy page-specific rules. */
nav.breadcrumb {
  position: relative !important;
  top: auto !important;
  margin-top: 68px !important;
}

nav.breadcrumb + .page-hero {
  margin-top: 0 !important;
}

/* One breadcrumb system for every prototype page. Kept late in the cascade so
   incomplete or older page-level breadcrumb rules cannot change its appearance. */
nav.breadcrumb {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  margin-top: 68px !important;
  padding: 10px 0 !important;
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--navy) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

nav.breadcrumb .breadcrumb-inner {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 1200px !important;
  min-height: 20px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  color: inherit !important;
  font: inherit !important;
}

nav.breadcrumb a,
nav.breadcrumb span,
nav.breadcrumb strong {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

nav.breadcrumb a {
  color: var(--text-light) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

nav.breadcrumb a:hover,
nav.breadcrumb a:focus-visible {
  color: var(--green) !important;
}

nav.breadcrumb span {
  color: var(--gold) !important;
  font-weight: 600 !important;
}

nav.breadcrumb strong {
  color: var(--navy) !important;
  font-weight: 600 !important;
}

/* Permanent Teachers readability floor. This intentionally overrides the
   compact legacy card styles and inline testimonial sizes on this page only. */
.teachers-customer-journey .teachers-intro p {
  font-size: 18px !important;
}

.teachers-customer-journey .teacher-card .card-name {
  font-size: 22px !important;
  line-height: 1.35 !important;
}

.teachers-customer-journey .teacher-card .card-role,
.teachers-customer-journey .teacher-modal .modal-role {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.teachers-customer-journey .teacher-card .card-tagline {
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.teachers-customer-journey .teacher-card .card-quote {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.teachers-customer-journey .teacher-card .micro-quote {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.teachers-customer-journey .teacher-card .card-toggle span:first-child,
.teachers-customer-journey .filter-chip {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.teachers-customer-journey .teacher-intro-offer p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.teachers-customer-journey .teacher-intro-offer a,
.teachers-customer-journey .teacher-intro-offer span,
.teachers-customer-journey .teacher-filter-label {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Refined mobile-menu trigger: brand-adjacent, tactile and still restrained. */
.site-header .hamburger {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 11px !important;
  gap: 5px !important;
  border: 1px solid rgba(62, 46, 76, .16) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #f2eaf5 0%, #e7d8ee 100%) !important;
  box-shadow: 0 4px 14px rgba(26, 43, 60, .12), inset 0 1px 0 rgba(255, 255, 255, .75) !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.site-header .hamburger span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  flex: 0 0 2px !important;
  border-radius: 2px !important;
  background: var(--navy) !important;
  box-shadow: none !important;
}

.site-header .hamburger:hover,
.site-header .hamburger[aria-expanded="true"] {
  border-color: rgba(74, 103, 65, .28) !important;
  background: linear-gradient(145deg, #eadff0 0%, #dac5e4 100%) !important;
  box-shadow: 0 6px 18px rgba(26, 43, 60, .16), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
  transform: translateY(-1px);
}

.site-header .hamburger:focus-visible {
  outline: 3px solid var(--gold) !important;
  outline-offset: 3px !important;
  border-color: var(--navy) !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .hamburger {
    transition: none !important;
  }

  .site-header .hamburger:hover,
  .site-header .hamburger[aria-expanded="true"] {
    transform: none;
  }
}

/* Preserve the original menu layout and interaction, adding only atmosphere. */
.nav-overlay {
  background: rgba(15, 29, 43, .48) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.nav-drawer {
  overflow-x: hidden !important;
  border-left: 1px solid rgba(62, 46, 76, .14) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 169, 110, .15), transparent 34%),
    linear-gradient(165deg, #fff 0%, #fbf8fc 54%, #eee4f2 100%) !important;
  box-shadow: -18px 0 48px rgba(15, 29, 43, .2) !important;
}

.nav-drawer::before {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 8px;
  z-index: 0;
  width: 130px;
  height: 130px;
  background: url("../../graphics/LogoL-NoBG.png") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
  transform: rotate(-7deg);
}

.nav-drawer > * {
  position: relative;
  z-index: 1;
}

.hamburger,
.nav-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-group-toggle,
.nav-drawer .nav-item,
.faq-question,
details > summary {
  min-height: 44px;
}

.hero {
  min-height: 100svh;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .card-grid,
  .cards-grid,
  .classes-grid,
  .teachers-grid,
  .workshop-types,
  .seasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  nav.breadcrumb {
    margin-top: 60px !important;
  }

  nav.breadcrumb .breadcrumb-inner {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .site-header {
    height: 60px !important;
    padding-inline: 16px !important;
  }

  .site-header .logo {
    min-width: 0;
    gap: 8px;
  }

  .site-header .logo-img-wrap {
    width: 38px;
    height: 38px;
  }

  .site-header .logo-wordmark {
    min-width: 0;
  }

  .site-header .logo-wordmark span {
    display: none !important;
  }

  .site-header .logo-wordmark strong {
    font-size: 15px !important;
    white-space: nowrap;
  }

  .site-header .header-right {
    gap: 6px;
  }

  .site-header .header-cta {
    padding: 8px 11px !important;
    font-size: 10px !important;
    letter-spacing: .03em;
  }

  #cookie-bar {
    padding: 12px 16px !important;
  }

  #cookie-bar > div {
    gap: 10px !important;
  }

  #cookie-bar p {
    font-size: 12px !important;
  }

  #cookie-bar button {
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  .site-header .logo-wordmark {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 800px) {
  #cookie-bar {
    padding: 10px 24px !important;
  }

  #cookie-bar > div {
    gap: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Visible, no-plugin Instagram fallback for the HTML prototype. */
.phoenix-instagram { background: var(--off-white); padding: 64px 40px; text-align: center; }
.phoenix-instagram-inner { max-width: 1160px; margin: 0 auto; }
.phoenix-instagram-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 28px 0 32px; }
.phoenix-instagram-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phoenix-instagram-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: var(--navy); }
.phoenix-instagram-tile img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease, opacity .25s ease; }
.phoenix-instagram-tile span { position: absolute; right: 10px; bottom: 10px; padding: 5px 9px; border-radius: 99px; background: rgba(26, 43, 60, .82); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.phoenix-instagram-tile:hover img,
.phoenix-instagram-tile:focus-visible img { transform: scale(1.035); opacity: .9; }

@media (max-width: 760px) {
  .phoenix-instagram { padding: 52px 20px; }
  .phoenix-instagram-grid,
  .phoenix-instagram-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Sitewide page ending: keep FAQs immediately above Stay in Touch (or the
 * footer where a page has no newsletter) without changing CMS field order.
 */
main {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

main > * {
  order: 0;
  min-width: 0;
  max-width: 100%;
}

/* Prevent legacy grids and long editor-managed copy from escaping the page. */
.section-inner,
.page-hero-inner,
.two-col,
.split,
.split-grid,
.card-grid,
.cards-grid {
  min-width: 0;
  max-width: 100%;
}

.two-col > *,
.split > *,
.split-grid > *,
.card-grid > *,
.cards-grid > * {
  min-width: 0;
}

main h1,
main h2,
main h3,
main p,
main a {
  overflow-wrap: break-word;
}

main > .faq,
main > section:has(.faq-item) {
  order: 90;
}

main > .newsletter {
  order: 100;
}

/* Shared FAQ shell: individual pages previously defined only the accordion rows. */
.faq {
  width: 100%;
  padding: 80px 40px;
  border-top: 1px solid var(--border);
  background: var(--off-white);
}

.faq-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.faq-header {
  margin-bottom: 28px;
  text-align: center;
}

.faq-header h2 {
  margin-bottom: 0;
}

.faq-question,
.faq-q {
  min-height: 64px;
  width: 100%;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  background: none;
  color: var(--navy);
  font-family: 'Aleo', serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

.faq-q > span:first-child {
  color: inherit;
  font: inherit;
}

.faq-a p {
  max-width: 680px;
  padding-bottom: 20px;
  color: var(--text-mid);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
}

.cta-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.cta-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

/* Consistent, accessible CTA sizing even on templates with compact local CSS. */
.btn,
.header-cta {
  min-height: 44px;
}

.header-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.cta-band .btn {
  margin: 5px 6px;
}

/* Reusable enquiry form used where older pages had markup but no field CSS. */
.phoenix-enquiry-form {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

#private-enquiry {
  scroll-margin-top: 84px;
}

.phoenix-enquiry-form .form-group {
  min-width: 0;
  margin-bottom: 20px;
}

.phoenix-enquiry-form .form-group label {
  display: block;
  margin-bottom: 7px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
}

.phoenix-enquiry-form .form-group input,
.phoenix-enquiry-form .form-group select,
.phoenix-enquiry-form .form-group textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  outline: 0;
  background: #fff;
  color: var(--navy);
  font: 400 15px/1.45 'Source Sans 3', sans-serif;
  transition: border-color .2s, box-shadow .2s;
}

.phoenix-enquiry-form .form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.phoenix-enquiry-form .form-group input:focus,
.phoenix-enquiry-form .form-group select:focus,
.phoenix-enquiry-form .form-group textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74, 103, 65, .13);
}

/* One dependable Stay in Touch component for every prototype page. */
.newsletter {
  width: 100%;
  padding: 80px 40px;
  border-top: 1px solid var(--border);
  background: #fff;
}

.newsletter-inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.newsletter .eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.newsletter h2 {
  margin-bottom: 14px;
  color: var(--navy);
  font-family: 'Aleo', serif;
  font-size: clamp(28px, 4vw, 46px);
  font-style: italic;
  font-weight: 900;
  line-height: 1.15;
}

.newsletter p {
  margin-bottom: 32px;
  color: var(--text-mid);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
}

.newsletter p strong {
  color: var(--navy);
  font-weight: 600;
}

.newsletter-form {
  display: flex;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 14px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}

.newsletter-form input[type="email"] {
  min-width: 0;
  flex: 1;
  padding: 16px 20px;
  border: 0;
  outline: 0;
  background: var(--off-white);
  color: var(--navy);
  font: 400 15px/1.4 'Source Sans 3', sans-serif;
}

.newsletter-form button {
  padding: 16px 22px;
  border: 0;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  font: 700 13px/1.4 'Source Sans 3', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.newsletter-form button:hover,
.newsletter-form button:focus-visible {
  background: var(--green);
}

.newsletter .newsletter-legal {
  margin-bottom: 0;
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.5;
}

.newsletter[style*="background:var(--navy)"] h2,
.newsletter[style*="background: var(--navy)"] h2 {
  color: #fff;
}

.newsletter[style*="background:var(--navy)"] p,
.newsletter[style*="background: var(--navy)"] p {
  color: rgba(255, 255, 255, .78);
}

.newsletter[style*="background:var(--navy)"] p strong,
.newsletter[style*="background: var(--navy)"] p strong {
  color: #fff;
}

.newsletter[style*="background:var(--navy)"] .newsletter-legal,
.newsletter[style*="background: var(--navy)"] .newsletter-legal {
  color: rgba(255, 255, 255, .68);
}

@media (max-width: 640px) {
  .faq {
    padding: 52px 20px;
  }

  .cta-actions {
    gap: 10px;
  }

  .cta-actions .btn {
    width: 100%;
    max-width: 340px;
  }

  .newsletter {
    padding: 52px 20px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input[type="email"] {
    border-radius: 3px 3px 0 0;
  }

  .newsletter-form button {
    min-height: 52px;
    border-radius: 0 0 3px 3px;
  }
}
.packages-online-details summary::-webkit-details-marker{display:none}
.packages-online-details summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.packages-online-details summary [aria-hidden="true"]{transition:transform .2s ease}
.packages-online-details[open] summary [aria-hidden="true"]{transform:rotate(45deg)}
.packages-faq{order:0!important}
.home-customer-journey{display:flex;flex-direction:column;min-width:0}
.home-customer-journey .home-archive{display:none!important}
.home-journey-hero{order:1}.home-why{order:2}.home-new-to-yoga{order:3}.home-find-practice{order:4}.home-teachers{order:5}.home-community{order:6}.home-reviews{order:7}.home-customer-journey>.phoenix-instagram{order:8}.home-final-cta{order:9}
.journey-archive{display:none!important}

/* Keep the shared footer map compact when the Find Us column expands to the
   full mobile grid width. Without this cap its square grows with the column,
   making it appear almost twice its desktop size. */
@media (max-width: 640px) {
  .footer-col > div:has(iframe[src*="maps.google.com/maps"]) {
    width: 132px !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }

  .footer-col > div:has(iframe[src*="maps.google.com/maps"]) > a,
  .footer-col > div:has(iframe[src*="maps.google.com/maps"]) iframe {
    width: 100% !important;
    height: 100% !important;
  }
}

.studio-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.studio-gallery-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.schedule-live{scroll-margin-top:88px}
@media(max-width:800px){
  .studio-gallery-grid{grid-template-columns:1fr}
  .studio-imagine{padding-left:24px!important;padding-right:24px!important}
  .schedule-start{padding-left:24px!important;padding-right:24px!important}
}
.teacher-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.teachers-customer-journey .teacher-card .card-tagline::before{content:"Best for: ";font-weight:700;color:var(--green)}
@media(max-width:800px){.teacher-choice-grid{grid-template-columns:1fr}}
/* Shared form feedback used by the HTML prototype and production integration hook. */
[data-form-status] {
  max-width: 640px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}
[data-form-status][hidden] { display: none; }

/* Respect the native hidden contract even when a component has display rules. */
[hidden] { display: none !important; }
[data-form-status][data-state="pending"] { background: #F2ECF5; color: #173042; }
[data-form-status][data-state="success"] { background: #E5F1E4; color: #294C2A; }
[data-form-status][data-state="prototype"] { background: #FFF2CC; color: #6B4E00; }
[data-form-status][data-state="error"] { background: #F9E3E1; color: #7A2520; }
.newsletter-form button:disabled,
.phoenix-enquiry-form button:disabled { cursor: wait; opacity: .72; }