/* =========================================================
   SUBPAGE STYLES
   Universal interior-page patterns (hero band, placeholder note,
   CTA wrapper) plus styles specific to individual subpages
   (Offerings, Retreat). Loaded after styles.css on every page
   under /class-schedule, /about, /offerings, /retreat, /contact,
   /founding-membership, /membership, /infrared-heat.
   ========================================================= */

/* =========================
   UNIVERSAL
   ========================= */
.page-cta {
  text-align: center;
  margin-top: 32px;
}

.contact-page-form {
  max-width: 560px;
  margin: 0 auto;
}

/* Photo hero band for interior pages — same recipe as the homepage/
   landing-page heroes: a photo with a slow zoom, the site's warm
   gradient texture layered on top for color and its own independent
   drift, and a dark overlay so the title stays readable. Shorter than
   the homepage's full hero since interior pages don't need the full
   viewport. */
.page-hero {
  position: relative;
  height: 56vh;
  min-height: 440px;
  padding-top: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  background-color: var(--foreground);
}

/* Desktop only: hero stands 25% taller — mobile keeps its own proportions. */
@media (min-width: 900px) {
  .page-hero {
    height: 70vh;
    min-height: 550px;
  }
}

/* Pages that skip the shared (fixed-position) header entirely have
   nothing to reserve space for, so the hero shouldn't pad for it. */
body.no-fixed-header .page-hero {
  padding-top: 0;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.page-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: page-hero-zoom 28s ease-in-out infinite alternate;
}

/* Same fix as the homepage's hero-bg-drift: trimmed from scale(1.14)
   down closer to what object-fit: cover already demands, so the zoom
   doesn't stack extra blur on top of the photo's native resolution. */
@keyframes page-hero-zoom {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.05) translate(-1%, -0.7%); }
}

/* 11/3 follow-up: every subpage hero now uses rays-1.webp (the warm
   water/light photo) as its actual background photo — Scott likes
   that photo's color as-is, so this layer's job changed from "recolor
   the photo" to "just darken it a touch" for title legibility. No more
   conic color sweep (that read as a gradient fighting the photo's own
   color); just a flat warm-dark wash at low opacity. */
.page-hero-bg-gradient {
  position: absolute;
  inset: 0;
  background: var(--accent-deep);
  opacity: 0.42;
  mix-blend-mode: multiply;
}

@keyframes page-hero-gradient-drift {
  0%, 100% { transform: scale(1.1) translate(-3%, -2%); }
  50% { transform: scale(1.22) translate(3%, 2%); }
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 31, 28, 0.75), rgba(43, 31, 28, 0.35) 65%);
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 24px;
}

.page-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.1;
  margin-top: 14px;
  color: var(--primary-foreground);
}

.page-hero-text {
  max-width: 560px;
  margin: 18px auto 0;
  color: rgba(247, 242, 234, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .page-hero-bg-img,
  .page-hero-bg-gradient {
    animation: none !important;
  }
}

/* Flags a section whose content is still a placeholder pending real
   copy/details — a soft dashed frame rather than looking broken. */
.placeholder-note {
  max-width: 560px;
  margin: 32px auto 0;
  padding: 20px 24px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  font-size: 14px;
  font-style: italic;
  color: var(--muted-foreground);
  text-align: center;
}

/* Marks where a third-party embed (Mindbody booking widget) will drop
   in once Tyler sends the embed code — a roomier dashed box than
   .placeholder-note since it's standing in for actual widget real
   estate, not just a line of copy. Used on Class Schedule + Membership. */
/* Wraps a live embedded Mindbody widget (Schedules/Pricing/etc.) — the
   widget styles its own contents, this just centers it with the same
   spacing the placeholder box used. */
.mindbody-widget-wrap {
  max-width: 900px;
  margin: 32px auto 0;
}

.widget-placeholder {
  max-width: 720px;
  min-height: 260px;
  margin: 32px auto 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  text-align: center;
}

.widget-placeholder-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.widget-placeholder p {
  max-width: 420px;
  font-size: 14px;
  font-style: italic;
  color: var(--muted-foreground);
}

/* Stands in for a photo that hasn't been supplied yet. Shares the
   .offering-img-wrap footprint (4:5) so a real photo can drop straight
   in later without disturbing the layout. Reused on Offerings and
   Retreat. */
.offering-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  color: var(--muted-foreground);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
}

/* Simple 2-up card grid — used for the Offerings page's 4 cards and the
   Retreat page's accommodation cards. */
.subpage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px 32px;
}

@media (min-width: 700px) {
  .subpage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   RETREAT
   ========================= */
.retreat-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
}

.retreat-gallery .offering-img-wrap,
.retreat-gallery .offering-img-placeholder {
  aspect-ratio: 4 / 3;
}

@media (min-width: 700px) {
  .retreat-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.retreat-intro {
  max-width: 780px;
  margin: 64px auto 0;
}

/* Image + text band — mirrors the "about the property" section on
   Tyler's current retreat page. */
.retreat-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 960px;
  margin: 72px auto 0;
}

.retreat-split .offering-img-wrap,
.retreat-split .offering-img-placeholder {
  aspect-ratio: 4 / 3;
}

.retreat-split-text {
  background: var(--accent-deep);
  color: var(--primary-foreground);
  padding: 40px 36px;
  display: flex;
  align-items: center;
}

.retreat-split-text p {
  font-size: 15px;
  line-height: 1.75;
}

@media (min-width: 700px) {
  .retreat-split {
    grid-template-columns: 1.1fr 1fr;
  }
}

.content-section,
.retreat-section {
  max-width: 780px;
  margin: 88px auto 0;
  text-align: center;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.content-section .section-label,
.retreat-section .section-label {
  margin-bottom: 8px;
}

.content-section:first-child {
  margin-top: 0;
}

.itinerary-list {
  max-width: 480px;
  margin: 40px auto 0;
  text-align: left;
}

.itinerary-item {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.itinerary-item:first-child {
  border-top: 1px solid var(--border);
}

.itinerary-time {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
  white-space: nowrap;
}

.itinerary-activity {
  font-family: var(--font-display);
  font-size: 17px;
}

.accommodation-name {
  font-family: var(--font-display);
  font-size: 22px;
  margin-top: 20px;
}

/* =========================
   TEACHERS
   ========================= */
.teacher-card-name {
  font-family: var(--font-display);
  font-size: 22px;
  margin-top: 20px;
}

.teacher-card-role {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.teacher-card-bio {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* =========================
   FOUNDING MEMBERSHIP
   ========================= */
.included-list {
  max-width: 780px;
  margin: 28px auto 0;
  text-align: left;
  list-style: none;
}

.included-list li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.included-list li:first-child {
  border-top: 1px solid var(--border);
}

.included-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.payment-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.zelle-instructions {
  font-size: 14px;
  color: var(--muted-foreground);
}

.zelle-instructions strong {
  color: var(--foreground);
}

.founding-price {
  max-width: 780px;
  margin: 0 auto;
  padding: 36px 32px;
  border: 1px solid var(--border);
  text-align: center;
}

.founding-price-amount {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  color: var(--foreground);
}

.founding-price-detail {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted-foreground);
}

/* Permanent small-print note — unlike .placeholder-note (dashed, flags
   draft copy), this is for finished, non-draft fine print: terms,
   caveats, confirmations. */
.fine-print {
  max-width: 780px;
  margin: 24px auto 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-foreground);
  text-align: center;
}

.content-text {
  max-width: 780px;
  margin: 20px auto 0;
  color: var(--muted-foreground);
}

/* Thin rule under the About page's intro paragraphs, separating it
   from "The Vision" section below. */
.about-intro {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

/* =========================
   SIMPLE DETAIL LIST
   (About's "What We Value", used anywhere a title + line works)
   ========================= */
.detail-list {
  max-width: 680px;
  margin: 28px auto 0;
  text-align: left;
  list-style: none;
}

.detail-list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--muted-foreground);
}

.detail-list li:first-child {
  border-top: 1px solid var(--border);
}

.detail-list strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--foreground);
  margin-bottom: 8px;
}

.pull-quote {
  max-width: 620px;
  margin: 32px auto;
  padding: 28px 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.6;
  text-align: center;
  color: var(--accent-deep);
}

/* =========================
   OFFERINGS — CLASS LIST
   ========================= */
.class-list {
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}

.class-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

.class-item:first-child {
  border-top: 1px solid var(--border);
}

.class-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  margin-bottom: 10px;
}

.class-item-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
}

.class-item-tag {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.class-item-desc {
  color: var(--muted-foreground);
  margin-bottom: 14px;
}

.class-item-meta p {
  font-size: 14px;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}

.class-item-meta strong {
  color: var(--foreground);
}

/* =========================
   ALTERNATING WHITE / CREAM BANDS
   Any interior page with several distinct sections can wrap each one
   in a full-bleed band so the page reads as a sequence of blocks
   instead of one long scroll of the same background. Both tones are
   light, so no text/component colors need to flip — just the band
   background itself. Used on Contact, About, Offerings, Retreat,
   Membership, Infrared Heat.
   ========================= */
.band {
  padding: 96px 0;
}

.band-white {
  background: #ffffff;
}

.band-cream {
  background: var(--background);
}

/* Hairline to separate two adjacent bands that share the same
   background — e.g. the Membership page's two stacked Mindbody widget
   sections, both forced white by the widgets' own built-in styling, so
   a border is the only way to mark where one widget ends and the next
   begins. */
.band-divider-top {
  border-top: 1px solid var(--border);
}

/* =========================
   CONTACT — PRACTICAL INFO / ETIQUETTE / FAQ
   ========================= */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}

@media (min-width: 600px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* A quiet row divider once items wrap into two columns — just
     enough to break up the block without adding a heavy full-width
     rule. */
  .info-grid > div:nth-child(n+3) {
    border-top: 1px solid var(--border);
    padding-top: 20px;
  }
}

.info-item-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.info-item-value {
  font-size: 15px;
}

.etiquette-list {
  max-width: 780px;
  margin: 32px auto 0;
  text-align: left;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 700px) {
  .etiquette-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Same quiet row-divider treatment as .info-grid — a few subtle
     lines sprinkled through the list instead of one long unbroken
     block of text. */
  .etiquette-list li:nth-child(n+3) {
    border-top: 1px solid var(--border);
    padding-top: 20px;
  }
}

.etiquette-list li strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--foreground);
  margin-bottom: 8px;
}

.etiquette-list li p {
  color: var(--muted-foreground);
  font-size: 14px;
}

.faq-list {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}

.faq-item:first-child {
  border-top: 1px solid var(--border);
}

.faq-question {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  font-family: var(--font-sans);
  font-size: 22px;
  color: var(--accent);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  margin-top: 12px;
  color: var(--muted-foreground);
  font-size: 15px;
}

/* =========================
   MEMBERSHIP + PRICING
   ========================= */
.intro-offer-banner {
  max-width: 620px;
  margin: 0 auto 64px;
  padding: 30px 32px;
  background: var(--accent-deep);
  color: var(--primary-foreground);
  text-align: center;
}

.intro-offer-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 10px;
}

.intro-offer-banner p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(247, 242, 234, 0.9);
}

.intro-offer-banner .cta-btn {
  margin-top: 22px;
}

.pricing-table-wrap {
  overflow-x: auto;
  max-width: 780px;
  margin: 0 auto;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}

.pricing-table th,
.pricing-table td {
  padding: 16px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.pricing-table th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}

.pricing-table td:first-child,
.pricing-table th:first-child {
  text-align: left;
  font-family: var(--font-display);
  font-size: 16px;
}

.pricing-annual {
  max-width: 480px;
  margin: 40px auto 0;
  text-align: center;
  padding: 28px;
  border: 1px solid var(--border);
}

.pricing-annual-name {
  font-family: var(--font-display);
  font-size: 20px;
}

.pricing-annual-price {
  margin-top: 6px;
  color: var(--accent);
  font-size: 15px;
}

/* =========================
   INFRARED HEAT — bold statement lines
   (used for both the sentence-style summary line and the
   dot-separated keyword line)
   ========================= */
.stat-line {
  max-width: 620px;
  margin: 36px auto;
  padding: 24px 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  color: var(--foreground);
}

/* =========================
   HOMEPAGE — NEW HERE SECTION
   ========================= */

/* Sits directly below the full-bleed hero now (moved up from further
   down the page), so it gets a tighter top gap than the default
   .content padding — the bottom stays the same as every other section. */
.new-here-section {
  padding-top: 64px;
  background: #ffffff;
}

@media (min-width: 700px) {
  .new-here-section {
    padding-top: 80px;
  }
}

/* "Ways to move" carousel — horizontal scroll-snap track of image +
   overlapping title tag cards (same card language as the Offerings
   grid elsewhere on the site). Images here are placeholders from the
   existing photo set until Tyler sends final shots for each style. */
.ways-carousel {
  margin: 40px auto 0;
}

.ways-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 24px 28px;
  margin: 0 -24px;
}

.ways-carousel-track::-webkit-scrollbar {
  display: none;
}

.way-slide {
  flex: 0 0 auto;
  width: clamp(180px, 55vw, 220px);
  scroll-snap-align: start;
}

.way-slide-media {
  position: relative;
  margin-bottom: 26px;
}

.way-slide-img-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.way-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.way-slide:hover .way-slide-img {
  transform: scale(1.04);
}

.way-slide-title {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 84%;
  padding: 12px 10px;
  background: var(--accent-deep);
  box-shadow: 0 10px 24px -12px rgba(43, 31, 28, 0.4);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
}

.ways-carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
}

.ways-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.ways-carousel-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary-foreground);
}

.ways-carousel-btn-arrow {
  width: 12px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.ways-carousel-btn-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.ways-carousel-prev .ways-carousel-btn-arrow {
  transform: scaleX(-1);
}

/* Homepage's compact version of the Contact page's .faq-list — same
   accordion component (and same JS, which binds to any .faq-list on
   the page), just given its own top spacing for this spot in the New
   Here section. Answers the most common questions right here instead
   of only linking out to the Contact page's full FAQ. */
.quick-faq-list {
  margin-top: 40px;
}

/* Two questions per row on desktop.
   align-items: start (instead of grid's default "stretch") matters here
   for more than looks — the accordion JS measures each item's own
   offsetHeight/scrollHeight to animate it open/shut, and with the
   default stretch behavior a *closed* item gets physically stretched
   to match its open row-partner's height, corrupting that measurement
   and making the open/close animation jump instead of ease smoothly
   whenever two items of different heights were ever open. start keeps
   every item's true height, independent of its row partner.
   Borders: every item gets its own border-top (dividing rows), and
   border-bottom is turned off per-item in favor of one closing line on
   the container, so a row boundary is never drawn twice (that double
   line was what made some dividers look thicker than others). */
@media (min-width: 860px) {
  .quick-faq-list {
    max-width: 960px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    align-items: start;
    border-bottom: 1px solid var(--border);
  }

  .quick-faq-list .faq-item {
    border-top: 1px solid var(--border);
    border-bottom: none;
  }
}

/* =========================
   NEW HERE — restyled per Tyler's reference
   (bold "NEW HERE?" label, large italic subhead, then body copy),
   PLUS real color/design (11/3 follow-up: Tyler's content pass had
   left this section as plain centered text on the page background —
   no card, no color — which read as flat next to the rest of the
   site. Section now carries the rays-of-light texture (see below) and
   the offer block is a proper dark card, not just more paragraphs.
   ========================= */
.new-here-section {
  padding: 96px 0;
}

.new-here-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 34px);
  color: var(--accent-deep);
  text-align: center;
}

.new-here-subhead {
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 30px);
  color: var(--foreground);
  text-align: center;
}

/* The "New to Maru" price block as its own dark card — same role the
   unstyled .intro-offer-banner used to play, now actually designed
   (and matches the card treatment .intro-offer-banner gets further
   down, so this and the Membership page's intro banner read as one
   family). */
.new-here-offer-card {
  position: relative;
  margin: 36px auto 0;
  max-width: 480px;
  padding: 36px 32px;
  background: var(--accent-deep);
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
}

.new-here-label {
  position: relative;
  display: block;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  text-align: center;
}

.new-here-price {
  position: relative;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 24px);
  color: var(--primary-foreground);
  text-align: center;
}

.new-here-trial-note {
  position: relative;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(247, 242, 234, 0.75);
  text-align: center;
}

.new-here-offer-card .cta-btn {
  position: relative;
  margin-top: 22px;
}

/* =========================
   OFFERINGS — HERO text confined to a left-aligned column
   (page-hero's default is centered + full-width; this modifier
   overrides that for just this page's hero)
   ========================= */
.page-hero-left .page-hero-inner {
  text-align: left;
  max-width: 620px;
  margin-left: 0;
}

.page-hero-left .page-hero-text {
  margin-left: 0;
}

@media (min-width: 900px) {
  .page-hero-left .page-hero-inner {
    margin-left: 7%;
  }
}

/* =========================
   ABOUT — hero photo already has strong natural contrast, so it
   needs less of the standard darkening overlay than the other
   subpage heroes (which sit on the brighter rays/gradient videos).
   ========================= */
.page-hero-soft-gradient .page-hero-bg-gradient {
  opacity: 0.25;
}

/* =========================
   DARK / PHOTO BAND
   Alternate to .band-white / .band-cream for a section that needs to
   read as a deliberate visual break (About's "Why Maru", Infrared
   Heat's benefits list) — dark warm background, light text, same
   vertical rhythm as the light bands around it.
   ========================= */
.band-dark {
  background: var(--accent-deep);
  color: var(--primary-foreground);
}

/* Opt-in variant: a photo sits behind the band instead of flat color.
   A neutral black wash sits over the photo (via ::after) rather than
   an opaque background, so the image keeps its own warm color instead
   of getting shifted maroon by the accent color. Experimental — only
   applied where asked for so far. */
.band-dark-photo {
  position: relative;
  overflow: hidden;
}

.band-dark-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.band-dark-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.band-dark-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: 0.78;
  z-index: 1;
}

.band-dark-photo > .container {
  position: relative;
  z-index: 2;
}

.band-dark .section-label {
  color: var(--secondary);
}

.band-dark .pull-quote {
  color: var(--primary-foreground);
  border-color: rgba(247, 242, 234, 0.3);
}

/* =========================
   SPLIT LAYOUT — label/heading in a left column, a thin vertical
   divider, body copy in the right column. Used by About ("The
   Vision" / "Why Maru") and Infrared Heat ("The Maru Difference" /
   benefits list), matching the reference mockups. Stacks on mobile.
   ========================= */
.band-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}

@media (min-width: 760px) {
  .band-split {
    grid-template-columns: minmax(220px, 320px) 1px 1fr;
    column-gap: 48px;
    align-items: start;
  }

  /* Keep the label column in view while the (often much taller) body
     column scrolls past, so the left side never reads as empty space
     once you're a few paragraphs into the right column. */
  .band-split > div:first-child {
    position: sticky;
    top: 130px;
  }

  .band-split-divider {
    width: 1px;
    height: 100%;
    background: var(--border);
  }

  .band-dark .band-split-divider {
    background: rgba(247, 242, 234, 0.25);
  }
}

.band-split-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.15;
  margin-top: 18px;
}

.band-split-label {
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}

.band-dark .band-split-label {
  color: var(--secondary);
}

/* When the label is the only thing in the column (no heading beside
   it), it's effectively standing in as the title, so give it real
   title-sized type instead of small eyebrow caps — wrapping to two
   lines is fine. Marked underneath with the same hand-painted circle
   graphic used under every section-label sitewide ("Maru means
   circle"), instead of a plain CSS-drawn ring. */
.band-split-label:only-child {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: capitalize;
  margin-bottom: 0;
  padding-bottom: 50px;
}

.band-split-label:only-child::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../images/circle-small.webp");
}

.band-split-body p {
  margin-bottom: 16px;
  line-height: 1.75;
}

.band-split-body p:last-child {
  margin-bottom: 0;
}

.band-split-body .lede {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.band-dark .band-split-body {
  color: rgba(247, 242, 234, 0.9);
}

/* =========================
   BENEFIT LIST — Infrared Heat's four benefit rows (icon + heading +
   text, divided by hairlines). Lives inside a .band-split's right
   column.
   ========================= */
.benefit-list {
  display: flex;
  flex-direction: column;
}

.benefit-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(247, 242, 234, 0.2);
}

.benefit-item:first-child {
  border-top: none;
  padding-top: 0;
}

.benefit-icon {
  width: 32px;
  height: 32px;
  color: var(--secondary);
}

.benefit-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.benefit-item-name {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--primary-foreground);
}

.benefit-item-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(247, 242, 234, 0.85);
}

/* =========================
   TEACHERS — when only one teacher card is present, center it as a
   single column instead of stretching the two-column grid.
   ========================= */
.subpage-grid.subpage-grid-single {
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   INTRO OFFER BANNER — "First Circle" card on Membership, matching
   the same dark-card treatment the homepage's New Here offer card
   just got. This class existed in the markup before (Membership page)
   but had never actually been styled — it rendered as plain text.
   ========================= */
.intro-offer-banner {
  max-width: 560px;
  margin: 0 auto 48px;
  padding: 32px 36px;
  background: var(--accent-deep);
  color: var(--primary-foreground);
  border-radius: 4px;
  text-align: center;
}

.intro-offer-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 400;
  margin-bottom: 8px;
}

.intro-offer-banner p {
  font-size: 14px;
  color: rgba(247, 242, 234, 0.85);
}

/* =========================
   RAYS OF LIGHT TEXTURE
   Tyler's two "rays of light" reference photos (steaming water /
   glowing arc), used as a soft background texture layered over a
   band's color rather than as sharp full-bleed photos — both source
   images are native web-resolution at best, so a crisp full-bleed
   treatment would show the same griminess the homepage gradient fix
   just removed. Blurred + low-opacity + blend-moded, they read as
   mood/color instead, which also means resolution stops mattering.
   Add -1 (horizontal, water/light — wide bands) or -2 (vertical,
   glowing arc — tall/narrow bands) alongside .band-rays to any
   .band-white / .band-cream / .band-dark section so subpages aren't
   only flat alternating colors.
   ========================= */
.band-rays {
  position: relative;
  overflow: hidden;
}

.band-rays::before {
  content: '';
  position: absolute;
  inset: -15%;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

.band-rays-1::before {
  background-image: url("../images/rays-1.webp");
}

.band-rays-2::before {
  background-image: url("../images/rays-2.webp");
}

.band-white.band-rays::before,
.band-cream.band-rays::before {
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.band-dark.band-rays::before {
  opacity: 0.55;
  mix-blend-mode: screen;
}

.band-rays > .container {
  position: relative;
  z-index: 1;
}