/* ============================================================
   Om Yoga International — Complete Design System
   Palette: Bhagwa Saffron · Warm Cream · Gold Accents
   ============================================================ */

:root {
  --header-height: 116px; /* top-strip 36px + nav-shell 80px */
  --maroon:      #b85000;   /* bhagwa saffron-orange */
  --maroon-dark: #8a3900;   /* deep saffron */
  --maroon-deep: #4e2000;   /* burnt saffron / darkest */
  --gold:        #d4a020;   /* warm gold — pairs with saffron */
  --cream:       #fdf9f5;
  --white:       #ffffff;
  --ink:         #211d18;
  --muted:       #5c554e;
  --border:      #e8d4c0;
  --light-bg:    #fff5ec;
  --charcoal:    #180a00;
  --shadow-sm:   0 2px 8px rgba(26,12,0,0.07);
  --shadow:      0 4px 20px rgba(26,12,0,0.08), 0 12px 40px rgba(26,12,0,0.06);
  --shadow-lg:   0 8px 40px rgba(26,12,0,0.14), 0 24px 64px rgba(26,12,0,0.08);
  --radius:      6px;
  --container:   1180px;
  --serif:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:        Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --transition:  0.22s ease;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ══════════════════════════════════════════════════════════════
   UNIVERSAL CONTRAST SYSTEM
   Rule 1 — dark background  →  always light text
   Rule 2 — light background →  always dark text
   Every section, card, or element that carries a known dark or
   light background sets a CSS custom property (--_fg) which all
   child text elements inherit. Theme switches only change
   colour values; the contrast direction never breaks.
   ══════════════════════════════════════════════════════════════ */

/* DARK CONTEXTS — force light text on everything inside */
.hero,
.page-hero,
.dark-section,
.why-section,
.glass-card,
.stats-strip,
[data-contrast="dark"] {
  --_fg:       #ffffff;
  --_fg-muted: rgba(255, 255, 255, 0.75);
  color: var(--_fg);
}

.hero h1, .hero h2, .hero h3, .hero p, .hero span, .hero li, .hero a:not(.btn),
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero p, .page-hero span,
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4,
.dark-section p, .dark-section span, .dark-section li, .dark-section a:not(.btn),
.why-section h1, .why-section h2, .why-section h3, .why-section h4,
.why-section p, .why-section span, .why-section li,
.glass-card h1, .glass-card h2, .glass-card h3, .glass-card h4,
.glass-card p, .glass-card span, .glass-card li,
.stats-strip strong, .stats-strip span {
  color: var(--_fg);
}
/* Button labels keep their button's own colour (e.g. white .btn-light on a
   dark section must stay dark), not the forced white of the dark context. */
.hero .btn span, .page-hero .btn span, .dark-section .btn span,
.why-section .btn span, .glass-card .btn span { color: inherit; }

/* Secondary/body text inside dark contexts — slightly softer */
.dark-section p, .why-section p, .glass-card p {
  color: var(--_fg-muted);
}

/* LIGHT CONTEXTS — force dark text on everything inside */
body,
.section:not(.dark-section):not(.why-section):not(.highlights-band),
.course-card,
.post-card,
.product-card,
article,
[data-contrast="light"] {
  --_fg:       var(--ink);
  --_fg-muted: var(--muted);
  color: var(--_fg);
}

.course-card h1, .course-card h2, .course-card h3, .course-card h4,
.post-card h1, .post-card h2, .post-card h3,
article h1, article h2, article h3, article h4 {
  color: var(--ink);
}

.course-card p, .post-card p, article p {
  color: var(--muted);
}
/* ══════════════════════════════════════════════════════════════ */

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
}

body.no-js main::before {
  content: "This site needs JavaScript enabled to load editable content.";
  display: block; padding: 24px;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: var(--sans); font-size: 1rem; line-height: 1.7; }
button { cursor: pointer; }

svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

h1, h2, h3, p { overflow-wrap: anywhere; }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

/* ── Site Header ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 248, 242, 0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
}

.top-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; min-height: 36px; padding: 6px 24px;
  background: var(--maroon-dark);
  color: rgba(255,255,255,0.85);
  font-size: 12px; letter-spacing: 0.04em;
}
.top-strip a, .top-strip span {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}

.nav-shell {
  width: min(100% - 48px, var(--container));
  min-height: 80px; margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 260px; }
.brand img { width: 50px; height: 50px; object-fit: contain; }
.brand strong {
  display: block;
  font-family: var(--serif); font-size: 21px; font-weight: 500;
  line-height: 1.1; letter-spacing: -0.01em; color: var(--ink);
}
.brand small {
  display: block; color: var(--muted);
  font-size: 11px; letter-spacing: 0.05em; line-height: 1.3; margin-top: 3px;
}

.nav-badges {
  display: flex; align-items: center; gap: 6px;
  justify-content: center; flex: 1;
}
.nav-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.nav-badge-sep { color: var(--border); font-size: 14px; }

.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.site-nav a {
  border-radius: 4px; color: var(--muted);
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; padding: 9px 13px;
  transition: background var(--transition), color var(--transition);
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  background: var(--light-bg); color: var(--maroon);
}

.cart-link, .icon-button {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--white); color: var(--ink); position: relative;
  transition: border-color var(--transition), background var(--transition);
}
.cart-link:hover, .icon-button:hover {
  border-color: var(--maroon); background: var(--light-bg);
}
.cart-link [data-cart-count] {
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--maroon-dark); color: #fff;
  font-size: 11px; font-weight: 700;
}
.cart-link-text { display: none; }
.menu-toggle { display: none; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  height: calc(100svh - var(--header-height));
  min-height: 480px;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  background-image: var(--hero-image);
  background-position: center top; background-size: cover;
  color: var(--white);
  overflow: hidden;
}

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  pointer-events: none;
}

.hero-overlay,
.page-hero .hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(92, 40, 4, 0.46) 0%,
    rgba(78, 32, 0, 0.64) 45%,
    rgba(52, 20, 0, 0.88) 100%
  );
}

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 80px 24px 32px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.hero-copy { text-align: center; width: 100%; }
.hero-copy h1, .page-hero h1 {
  margin: 16px 0 22px;
  font-family: var(--serif); font-size: 82px;
  line-height: 0.96; font-weight: 400; letter-spacing: -0.025em;
}
.hero-copy p, .page-hero p {
  max-width: 640px; margin: 0 auto;
  color: rgba(255,255,255,0.80); font-size: 18px; line-height: 1.75;
}

.hero-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 38px; justify-content: center;
}

/* Stats strip — full-width horizontal band below hero */
.stats-strip {
  display: flex; align-items: stretch;
  background: #1a0c06;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stat-item {
  flex: 1; text-align: center;
  padding: 28px 20px;
  border-right: 1px solid rgba(255,255,255,0.10);
}
.stat-item:last-child { border-right: 0; }
.stat-item strong {
  display: block; font-family: var(--serif);
  font-size: 42px; font-weight: 400; line-height: 1;
  letter-spacing: -0.02em; color: #fff;
}
.stat-item span {
  display: block; margin-top: 6px;
  color: rgba(255,255,255,0.55); font-size: 10.5px;
  letter-spacing: 0.13em; text-transform: uppercase;
}

/* ── Hero accreditation strip ────────────────────────────── */
.hero-accred {
  width: 100%;
  margin-top: 36px;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-accred-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.hero-accred-logos {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-accred-logo {
  height: 56px;
  width: auto;
  /* Invert dark parts to white for hero visibility */
  filter: brightness(0) invert(1);
  opacity: 0.88;
  transition: opacity var(--transition);
}
.hero-accred-logo:hover { opacity: 1; }
.hero-accred-divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  flex: 0 0 auto;
}
.hero-accred-text {
  text-align: left;
}
.hero-accred-text strong {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
}
.hero-accred-text span {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.60);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ── Eyebrow label ───────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--gold); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after {
  content: ''; display: block;
  width: 22px; height: 1px; background: currentColor; flex: 0 0 auto;
}
.hero .eyebrow, .page-hero .eyebrow, .dark-section .eyebrow {
  color: rgba(196, 148, 69, 0.85);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; border-radius: 2px;
  padding: 13px 30px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; line-height: 1.2; text-align: center;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
/* btn-primary uses maroon-dark so even light themes (#e06010-type) keep ≥4.5:1 contrast */
.btn-primary { background: var(--maroon-dark); color: #fff; }
.btn-primary:hover {
  background: var(--maroon-deep); transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
}
.btn-secondary { background: var(--white); border-color: var(--border); color: var(--ink); }
.btn-secondary:hover {
  background: var(--light-bg); border-color: var(--maroon); color: var(--maroon);
  transform: translateY(-1px);
}
.btn-ghost { border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-ghost:hover {
  background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.80);
  transform: translateY(-1px);
}
.btn-light { background: #fff; color: var(--maroon-dark); }
.btn-light:hover { background: var(--cream); transform: translateY(-1px); }
.btn-small { min-height: 40px; padding: 8px 18px; font-size: 11px; }
.full-width { width: 100%; }
/* Dark/gold backgrounds always force high-contrast text */
[style*="background:var(--gold)"],
[style*="background: var(--gold)"] { color: var(--ink) !important; }
[style*="background:var(--maroon)"],
[style*="background: var(--maroon)"] { color: #fff !important; }

/* ── Text links ──────────────────────────────────────────── */
.text-link, .text-button {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--maroon); border: 0; background: transparent;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0;
  transition: color var(--transition), gap var(--transition);
}
.text-link:hover, .text-button:hover { color: var(--maroon-dark); gap: 13px; }

/* ── Trust band ──────────────────────────────────────────── */
.trust-band { background: var(--white); border-bottom: 1px solid var(--border); }
/* auto-fit (not a fixed 4 columns): the 1px gap over a coloured background is
   what draws the dividers, so any unused cell used to show up as a bare peach
   block. auto-fit collapses the empty tracks, so 1–3 items simply fill the row. */
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  background: var(--border); gap: 1px;
}
.trust-grid span {
  display: flex; align-items: center; gap: 12px;
  min-height: 72px; padding: 16px 22px;
  background: var(--white);
  color: var(--muted); font-size: 13.5px; font-weight: 500;
}
.trust-grid svg, .check-list svg, .two-column-list svg {
  color: var(--gold); flex: 0 0 auto;
}
.trust-accred-logos {
  /* full row, not 2 tracks — a partial span left bare cells showing the
     divider colour whenever the item count did not fill the grid */
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: nowrap;
  padding: 16px 28px; background: var(--white);
}
/* was `span 3`, which left the remaining tracks empty and showed the divider
   colour as a bare block — the logo row always takes the full width instead */
.trust-accred-logos--3 { grid-column: 1 / -1; }
.trust-accred-logo {
  height: 30px; width: auto; max-width: 140px; object-fit: contain;
  filter: grayscale(1); opacity: 0.60;
  transition: opacity 0.2s, filter 0.2s;
}
.trust-accred-logo:hover { opacity: 1; filter: none; }

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 72px 0; background: var(--cream); }
.muted-section {
  position: relative;
  isolation: isolate;
  background: var(--light-bg);
}
.muted-section::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600&q=75&auto=format&fit=crop') center/cover no-repeat;
  opacity: .07;
}
.muted-section::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(196,148,69,.13) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(107,26,26,.10) 0%, transparent 50%),
    linear-gradient(180deg, rgba(250,240,241,.92) 0%, rgba(250,240,241,.82) 50%, rgba(250,240,241,.95) 100%);
}
.dark-section { background: var(--charcoal); color: var(--white); }

/* ── Split grid ──────────────────────────────────────────── */
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 80px; align-items: start;
}

/* ── Typography ──────────────────────────────────────────── */
h2 {
  margin: 10px 0 0; font-family: var(--serif);
  font-size: 52px; line-height: 1.04; font-weight: 400; letter-spacing: -0.015em;
}
h3 {
  margin: 0; font-family: var(--serif);
  font-size: 24px; font-weight: 500; line-height: 1.2;
}
.split-grid p, .section-heading p, .image-copy-content p, .final-cta p {
  color: var(--muted); margin: 0; font-size: 18px; line-height: 1.78;
}

/* ── Section heading ─────────────────────────────────────── */
.section-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px; align-items: end; margin-bottom: 48px;
}
.section-heading h2, .section-heading p { max-width: 760px; }
/* A section intro typed as several lines renders as a real list, in the page's
   normal prose size — not as run-on <br> lines at subtitle size. */
.section-intro-list {
  margin: 14px 0 0; padding-left: 20px;
  color: var(--muted); font-size: 16px; line-height: 1.8;
}
.section-intro-list li { margin: 0 0 6px; }
.section-heading.compact { display: block; }

/* ── Card grids ──────────────────────────────────────────── */
.course-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Row gap is deliberately larger than the column gap: with equal gaps the
     rows read as one block and the cards look merged vertically. */
  gap: 46px 24px;
}
.post-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.product-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.teacher-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
/* Single-row teacher carousel — equal-height cards */
.teacher-carousel-wrap { margin-top: 8px; }
.teacher-carousel { align-items: stretch; gap: 20px; }
.teacher-carousel > .teacher-card {
  flex: 0 0 clamp(240px, 26%, 300px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.teacher-carousel > .teacher-card > div { flex: 1; display: flex; flex-direction: column; }
.teacher-carousel .tm-bio {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 760px) { .teacher-carousel > .teacher-card { flex-basis: 78%; } }

/* ── Cards ───────────────────────────────────────────────── */
.post-card, .product-card, .teacher-card,
.booking-panel, .cart-summary, .checkout-cart, .checkout-form,
.value-grid article, .contact-cards a {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Course card — glassmorphism */
/* ── Course card — rich glass redesign ───────────────────── */
.course-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,252,248,.78);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 8px 32px rgba(138,57,0,.10), 0 1px 4px rgba(138,57,0,.06), inset 0 1px 0 rgba(255,255,255,.85);
  transition: box-shadow .3s ease, transform .3s ease;
}
.course-card:hover {
  box-shadow: 0 20px 56px rgba(138,57,0,.18), 0 4px 12px rgba(138,57,0,.10), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-6px);
}

/* Full-bleed image, taller, with gradient overlay */
.cc-image-wrap {
  position: relative;
  display: block;
  height: 220px;
  flex: 0 0 220px;
  overflow: hidden;
  text-decoration: none;
}
.cc-image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease;
  display: block;
}
.course-card:hover .cc-image-wrap img { transform: scale(1.07); }
.cc-image-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(20,6,4,.08) 0%,
    rgba(20,6,4,.18) 50%,
    rgba(20,6,4,.55) 100%);
  pointer-events: none;
}

/* Floating badges on image */
.cc-duration-badge {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(255,252,248,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 700;
  color: var(--maroon); letter-spacing: .05em; text-transform: uppercase;
}
.cc-cat-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(107,26,26,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #fde8d0;
}

/* Body */
.cc-body {
  flex: 1; display: flex; flex-direction: column;
  padding: 20px 22px 18px;
}
.cc-title {
  font-size: 20px; font-weight: 700; line-height: 1.3;
  margin: 0 0 8px; font-family: var(--serif);
}
.cc-title a { color: var(--dark); text-decoration: none; }
.cc-title a:hover { color: var(--maroon); }
.checkout-note { display:block; font-size:12.5px; color:var(--maroon); margin-top:2px; }
/* Admin-editable Included / Excluded / What-to-bring lists (rich content with icon bullets) */
.inc-rich ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.inc-rich ol { padding-left:20px; }
.inc-rich li { position:relative; padding-left:28px; line-height:1.55; }
.inc-rich li::before { position:absolute; left:0; top:0; font-weight:700; }
.inc-rich--check li::before { content:'✓'; color:#2e8b57; }
.inc-rich--cross li::before { content:'✕'; color:#b3261e; }
.inc-rich--bring li::before { content:'→'; color:var(--maroon); }
@media (max-width:760px) { .inc-rich ul { grid-template-columns:1fr; } }
.cc-summary {
  font-size: 13px; line-height: 1.6; color: var(--muted);
  margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Card summary may contain pasted rich HTML — flow it as a clean 2-line preview */
.cc-summary p, .cc-summary div, .cc-summary span, .cc-summary ul, .cc-summary ol,
.cc-summary li, .cc-summary h1, .cc-summary h2, .cc-summary h3, .cc-summary h4 {
  display: inline; font-size: inherit !important; font-family: inherit !important;
  font-weight: inherit; margin: 0; padding: 0; line-height: inherit;
}
.cc-summary br { display: none; }
.cc-summary strong, .cc-summary b { font-weight: 700; }
.cc-summary [style*="color"] { color: inherit !important; background: transparent !important; }
/* Classic card bullets — only rendered when the admin writes them (Listing Card) */
.course-card:not(.cc-b) .cc-points { margin: 0 0 14px; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.course-card:not(.cc-b) .cc-points li { margin: 0 0 3px; }

/* Info rows (credential + next batch) */
.cc-info-rows {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
  border-top: 1px solid rgba(107,26,26,.1);
  padding-top: 12px;
}
.cc-info-row {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 12.5px; line-height: 1.4;
}
.cc-info-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  white-space: nowrap; padding-top: 2px;
  min-width: 64px; flex-shrink: 0;
}
.cc-info-val {
  font-size: 12.5px; font-weight: 600; color: var(--dark);
}
.cc-info-row--highlight .cc-info-val { color: #7a5010; }

/* Price block */
.cc-price-block {
  display: flex; align-items: baseline; gap: 6px;
  background: rgba(107,26,26,.05);
  border: 1px solid rgba(107,26,26,.14);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.cc-price-from {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.cc-price-amount {
  font-size: 26px; font-weight: 900; color: var(--maroon);
  line-height: 1; font-family: var(--serif);
}
.cc-price-amount span {
  font-size: 14px; font-weight: 700; color: var(--muted);
  font-family: var(--sans); letter-spacing: .04em;
  margin-left: 2px;
}

/* Actions — two side-by-side buttons */
.cc-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: auto;
}
.cc-detail-btn,
.cc-reserve-btn {
  text-align: center; font-size: 13px; font-weight: 700;
}
/* Both card buttons are orange — the white secondary looked unfinished beside
   Reserve Seat. Overridden here rather than on .btn-secondary, which is used
   site-wide and must stay white. The lighter tone keeps Reserve Seat dominant. */
.cc-detail-btn.btn-secondary {
  background: var(--maroon); border-color: var(--maroon); color: #fff;
}
.cc-detail-btn.btn-secondary:hover {
  background: var(--maroon-deep); border-color: var(--maroon-deep); color: #fff;
  transform: translateY(-1px);
}
.cc-reserve-btn { flex-shrink: 0; }

/* The pair reads as one control: only the outer corners are rounded, the two
   edges that face each other stay square. Radius only — size is untouched. */
.cc-actions > :first-child {
  border-radius: 10px 2px 2px 10px;
}
.cc-actions > :last-child {
  border-radius: 2px 10px 10px 2px;
}
.cc-actions > :only-child { border-radius: 10px; }

/* Post + product cards stay vertical */
.post-card, .product-card {
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.post-card:hover, .product-card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-5px);
}

.card-media, .product-card > img {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--light-bg);
}
.card-media img, .product-card > img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.55s ease;
}
.post-card:hover .card-media img { transform: scale(1.06); }

.card-body, .product-body { padding: 22px 24px; }

.meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
  color: var(--maroon); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.meta-row.large { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 28px; }
.meta-row span, .meta-row time { min-width: 0; }

.card-body p, .product-body p, .teacher-card p, .value-grid p,
.cart-summary p, .checkout-cart p, .small-note { color: var(--muted); }

.course-facts { display: grid; gap: 8px; margin: 16px 0; }
.course-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
/* Course card facts: 2-column paired layout — saves ~55px per card */
.course-card .course-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 12px 0;
}
.course-card .course-facts div {
  grid-template-columns: 1fr;
  gap: 3px;
  align-items: start;
}
/* Credential spans both columns — value can be long */
.course-card .course-facts div:first-child { grid-column: 1 / -1; }
/* Push card actions to bottom */
.course-card .card-actions { margin-top: auto; padding-top: 14px; }
.course-facts dt {
  color: var(--muted); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.course-facts dd { margin: 0; font-weight: 700; font-size: 14px; }
.course-card .course-facts dd { font-size: 13.5px; }
.course-facts.stacked div { grid-template-columns: 1fr; gap: 2px; }

.card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--border);
}

/* ── Image-copy split ────────────────────────────────────── */
.image-copy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch; padding: 0; background: var(--white);
}
.image-copy-media img {
  width: 100%; height: 100%; min-height: 620px; object-fit: cover;
}
.image-copy-content {
  display: grid; align-content: center;
  padding: 100px max(48px, calc((100vw - var(--container)) / 2)) 100px 80px;
}

/* ── Check list ──────────────────────────────────────────── */
.check-list, .footer-inner ul { list-style: none; margin: 0; padding: 0; }
.check-list { display: grid; gap: 16px; margin-top: 30px; }
.check-list li, .two-column-list div { display: flex; align-items: flex-start; gap: 14px; }

/* ── Batch list ──────────────────────────────────────────── */
.batch-list { display: grid; border-top: 1px solid var(--border); }
.batch-row {
  display: grid; grid-template-columns: 180px 1fr 120px;
  gap: 22px; align-items: center;
  min-height: 78px; border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.batch-row:hover { background: var(--light-bg); }
.batch-row span { color: var(--maroon); font-weight: 600; font-size: 14px; }
.batch-row em { color: var(--muted); font-style: normal; text-align: right; }

/* ── Ecommerce callout / Final CTA ───────────────────────── */
.ecommerce-callout, .final-cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.ecommerce-callout h2, .final-cta h2 { max-width: 700px; }
.ecommerce-callout p, .dark-section p {
  max-width: 680px; color: rgba(255,255,255,0.68); margin-bottom: 0;
}
.final-cta { background: var(--light-bg); }

/* ── Page hero ───────────────────────────────────────────── */
.page-hero {
  min-height: 460px; position: relative;
  display: grid; align-items: end;
  background-image: var(--hero-image);
  background-position: center; background-size: cover; color: var(--white);
  overflow: hidden;
}
.page-hero-inner { position: relative; z-index: 1; padding: 130px 0 80px; }
.page-hero h1 {
  max-width: 820px; font-family: var(--serif);
  font-size: 64px; font-weight: 400;
  line-height: 1.0; letter-spacing: -0.02em; margin: 12px 0 18px;
}

/* ── Toolbar / filters ───────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 36px;
}
.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 40px; border: 1px solid var(--border); border-radius: 2px;
  background: var(--white); color: var(--muted);
  padding: 8px 16px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em;
  transition: all var(--transition);
}
.chip.is-active { background: var(--maroon-dark); color: #fff; border-color: var(--maroon-dark); }

.search-box {
  min-width: 260px; min-height: 46px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 2px;
  background: var(--white); padding: 0 16px;
  transition: border-color var(--transition);
}
.search-box:focus-within { border-color: var(--maroon); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; }

/* ── Detail / store layouts ──────────────────────────────── */
.detail-layout, .store-layout, .checkout-layout, .contact-layout, .faq-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 370px;
  gap: 40px; align-items: start;
}
.detail-main { max-width: 760px; }
.detail-main h2 { font-size: 40px; margin-top: 40px; }

/* ── Overview sub-blocks ─────────────────────────────────── */
.ov-block {
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 30px 32px;
  margin-top: 24px;
  background: #fff;
  position: relative;
}
.ov-block--tinted  { background: var(--cream); }
.ov-block--accent  { background: #fff8f0; border-color: #f5d9b8; }
/* Two-up "Find your ideal TTC" cards — fills the blank space, each opens its own popup */
.ttc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 24px;
}
.ttc-grid .ttc-card {
  margin-top: 0;
  display: flex;
  flex-direction: column;
}
.ttc-grid .ttc-card .ov-readmore { margin-top: auto; }
/* Stacked (course page) — one card below another */
.ttc-grid--stacked { grid-template-columns: 1fr; }
@media (max-width: 720px) { .ttc-grid { grid-template-columns: 1fr; } }
/* First overview block aligns its top with the booking panel */
.detail-main > .ov-block:first-child { margin-top: 0; }

.ov-block-icon {
  font-size: 22px;
  margin-bottom: 8px;
  line-height: 1;
}
.ov-title {
  font-size: 32px !important;
  margin-top: 6px !important;
  margin-bottom: 0;
}
.ov-subtitle {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  font-family: var(--serif);
  line-height: 1.3;
}
.ov-body {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
}
/* ── Uniform typography for ALL readable content across the course page ──
   Every prose block (overview, key outcomes, what's included, curriculum,
   syllabus descriptions) renders in the same body font, size, line-height and
   colour — overriding any size/colour/font that crept in from pasted content.
   The compact syllabus-topics grid and designed UI cards keep their own sizing. */
.ov-body, .rich-content, .syllabus-desc {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--ink) !important;
}
.ov-body :where(p, li, span, b, strong, em, i, u, a, div, td, th, blockquote),
.rich-content:not(.syllabus-topics) :where(p, li, span, b, strong, em, i, u, a, div, td, th, blockquote),
.syllabus-desc :where(p, li, span, b, strong, em, i, u, a, div) {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}
.ov-body :where(b, strong), .rich-content :where(b, strong), .syllabus-desc :where(b, strong) { font-weight: 700; }
.ov-body :where(h1,h2,h3,h4,h5,h6),
.rich-content:not(.syllabus-topics) :where(h1,h2,h3,h4,h5,h6),
.syllabus-desc :where(h1,h2,h3,h4,h5,h6) {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
  font-weight: 600;
  margin: 18px 0 8px;
}
/* Strip pasted hard-coded colours/backgrounds so site colours apply */
.ov-body [style*="color"], .rich-content [style*="color"], .syllabus-desc [style*="color"] {
  color: inherit !important; background: transparent !important;
}
/* Keep the compact two-column topic list as designed (sans, but its own size) */
.syllabus-topics.rich-content, .syllabus-topics.rich-content :where(li, span, p) { font-family: var(--sans) !important; }
.ov-body .check-list { margin-top: 0; }
.ov-body .two-column-list { margin-top: 8px; }

.two-column-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px;
}

.booking-panel {
  position: sticky; top: 128px;
  padding: 24px 24px 22px;
  background: linear-gradient(160deg, var(--maroon-dark) 0%, var(--maroon-deep) 55%, var(--maroon-dark) 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(196,148,69,.3), inset 0 1px 0 rgba(255,255,255,.07) !important;
  overflow: hidden;
}
/* Gold shimmer bar at top */
.booking-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #7a4a10 0%, #c49445 30%, #f0d898 55%, #c49445 75%, #7a4a10 100%);
}
/* Eyebrow override */
.booking-panel .eyebrow {
  color: var(--gold) !important;
  opacity: 1 !important;
  font-size: 11px;
  letter-spacing: .14em;
  display: block;
  margin-bottom: 18px;
}
.cart-summary, .checkout-cart, .checkout-form {
  position: sticky; top: 128px; padding: 28px;
}

.price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 20px;
}
.price-row strong { font-family: var(--serif); font-size: 30px; font-weight: 500; }
.price-row span { color: var(--muted); font-size: 13px; }

.store-layout { grid-template-columns: minmax(0, 1fr) 330px; }

/* ── Cart & checkout ─────────────────────────────────────── */
.mini-cart-lines, .checkout-lines { display: grid; gap: 14px; margin: 22px 0; }
.mini-cart-lines div, .total-line {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--border); padding-bottom: 12px;
}
.total-line { align-items: center; margin: 20px 0; font-size: 18px; font-weight: 700; }

.checkout-line {
  display: grid; grid-template-columns: 82px 1fr auto;
  gap: 14px; align-items: start;
  border-bottom: 1px solid var(--border); padding-bottom: 14px;
}
.checkout-line img { width: 82px; height: 82px; object-fit: cover; border-radius: var(--radius); }
.checkout-line span { display: block; color: var(--muted); }
.checkout-line label {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; color: var(--muted); font-size: 13px;
}
.checkout-line input {
  width: 64px; min-height: 36px; border: 1px solid var(--border);
  border-radius: 2px; padding: 6px 10px;
}

.checkout-form { display: grid; gap: 16px; }
.checkout-form label {
  display: grid; gap: 7px; color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.checkout-form input, .checkout-form select, .checkout-form textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 2px;
  background: var(--cream); color: var(--ink); padding: 13px 16px; outline: 0;
  transition: border-color var(--transition);
}
.checkout-form input:focus, .checkout-form select:focus, .checkout-form textarea:focus {
  border-color: var(--maroon);
}
.checkout-form textarea { resize: vertical; }

/* ── Teachers ────────────────────────────────────────────── */
.teacher-card { overflow: hidden; }
.teacher-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.teacher-card div { padding: 20px 22px; }
.teacher-card span {
  display: block; color: var(--gold);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 8px 0 10px;
}

/* ── Value grid ──────────────────────────────────────────── */
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.value-grid article { padding: 28px; }

/* ── Testimonials ────────────────────────────────────────── */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

blockquote {
  margin: 0; border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius); padding: 32px;
  background: rgba(255,255,255,0.04);
}
blockquote p { margin: 0; color: rgba(255,255,255,0.88); font-size: 17px; line-height: 1.75; }
blockquote footer { margin-top: 22px; font-weight: 600; font-size: 15px; }
blockquote span { display: block; color: rgba(255,255,255,0.5); font-size: 12px; margin-top: 4px; letter-spacing: 0.04em; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-layout { grid-template-columns: 360px minmax(0, 1fr); }
.faq-list { display: flex; flex-direction: column; }

details {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
  overflow: hidden;
}
details + details { margin-top: 8px; }
details:hover { border-color: var(--border); border-left-color: var(--maroon); }
details[open] {
  border-left-color: var(--maroon);
  background: var(--light-bg);
}
summary {
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px;
  font-weight: 600; font-size: 15.5px; color: var(--ink);
  list-style: none; user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 18px; font-weight: 300; line-height: 1;
  color: var(--maroon);
  transition: background var(--transition), transform var(--transition);
}
details[open] summary::after {
  content: '−';
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
}
details[open] summary { border-bottom: 1px solid var(--border); }
details p {
  padding: 16px 22px 18px;
  color: var(--muted); font-size: 15px; line-height: 1.72;
  margin: 0;
}

/* Admin-written FAQ answers arrive as rich HTML in a wrapper — give them the
   same breathing room as a plain <p> answer so the text never hugs the card edge. */
.faq-ans {
  padding: 16px 22px 20px;
  color: var(--muted); font-size: 15px; line-height: 1.72;
}
.faq-ans > :first-child { margin-top: 0; }
.faq-ans > :last-child  { margin-bottom: 0; }
.faq-ans p  { padding: 0; margin: 0 0 12px; color: inherit; font-size: inherit; line-height: inherit; }
.faq-ans ul, .faq-ans ol { margin: 0 0 12px; padding-left: 22px; }
.faq-ans li { margin-bottom: 7px; }

/* "Browse every … question →" — the link out of a page's own FAQ block into the
   /faqs hub, anchored at that page's category. */
.faq-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 11px 18px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--maroon);
  text-decoration: none; background: #fff;
  transition: background .15s, border-color .15s, transform .15s;
}
.faq-more:hover { background: #f7efe3; border-color: var(--gold, #c49445); transform: translateX(2px); }
.faq-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ── Article ─────────────────────────────────────────────── */
.article-layout { max-width: 780px; }
.article-layout p { font-size: 19px; color: var(--muted); line-height: 1.82; }
.article-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ── Contact ─────────────────────────────────────────────── */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-cards a {
  min-height: 150px; display: grid; align-content: space-between; padding: 24px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.contact-cards a:hover { border-color: var(--maroon); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.contact-cards span { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-cards strong { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.3; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state { max-width: 720px; padding: 80px 0; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: var(--maroon-dark); color: rgba(255,255,255,0.85); border-top: 1px solid var(--maroon-dark); }

.footer-inner {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
  display: grid; grid-template-columns: 1.35fr 0.7fr 0.9fr 1fr;
  gap: 40px; padding: 80px 0 48px;
}
.footer-brand img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 18px; }
.footer-inner h2 {
  font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 14px;
  color: #fff;
}
.footer-inner h3 {
  font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0 0 18px;
  color: #fff; letter-spacing: 0.02em;
}
.footer-inner p, .footer-inner li { color: rgba(255,255,255,0.78); font-size: 14px; line-height: 1.7; }
.footer-inner ul { display: grid; gap: 10px; }
.footer-inner a { color: rgba(255,255,255,0.78); transition: color var(--transition); }
.footer-inner a:hover { color: #fff; }

.footer-bottom {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0 28px; border-top: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.82); font-size: 13px;
}
.footer-bottom a { color: rgba(255,255,255,0.82); }
.footer-bottom a:hover { color: #fff; }
/* The Trustindex badge is fixed to the bottom-left corner on desktop, so the
   last footer row needs room or the copyright line ends up underneath it. */
@media (min-width: 1021px) { .footer-bottom { padding-bottom: 76px; } }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; border: none;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.footer-social a.fs-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.footer-social a.fs-fb { background: #1877F2; }
.footer-social a.fs-yt { background: #FF0000; }
.footer-social a.fs-wa { background: #25D366; }
.footer-social a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.28); filter: brightness(1.08); }

/* ── Certifications band (homepage) ─────────────────────── */
.certs-band {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center;
  justify-content: center; padding: 12px 0;
}
.certs-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white);
}
.certs-codes { display: flex; gap: 6px; flex-wrap: wrap; }
.certs-code {
  display: inline-block; padding: 5px 11px;
  border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: #fff !important;
}
/* Yoga Alliance — orange (brand color) */
.certs-item:nth-child(1) .certs-code { background: #c44800; }
/* Ministry of AYUSH — government green */
.certs-item:nth-child(2) .certs-code { background: #1a5e3a; }
/* Specialty Certifications — deep amber */
.certs-item:nth-child(3) .certs-code { background: #7a4e08; }
.certs-item strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.certs-item span   { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Why grid (homepage) — glassmorphism ─────────────────── */
.why-section {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(160deg, #fff5ea 0%, #ffe9d2 55%, #f8dcbb 100%);
}
.why-section-overlay { display: none; }
.why-eyebrow { color: var(--maroon) !important; opacity: 1 !important; }
.why-heading { color: var(--maroon-dark) !important; }
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.glass-card {
  background: rgba(15, 5, 2, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.glass-card:hover {
  transform: translateY(-4px);
  background: rgba(15, 5, 2, 0.80);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.glass-card .why-num {
  color: var(--gold); opacity: 1;
}
.glass-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.glass-card p  { color: #fff; font-size: 14px; line-height: 1.75; margin: 0; font-weight: 400; }
.why-num {
  display: block; font-family: var(--serif); font-size: 42px; font-weight: 400;
  color: var(--maroon); opacity: 0.18; line-height: 1; margin-bottom: 16px;
}
.why-card h3 { margin-bottom: 10px; font-size: 20px; }
.why-card p  { font-size: 15px; line-height: 1.7; margin: 0; }
.why-section .why-card p { color: #fff; }

/* ── "Six things" cards — light with icon badges (matches design) ── */
.why-section .glass-card {
  background: #fff;
  border: 1px solid #f0e2d1;
  box-shadow: 0 8px 30px rgba(120,60,10,.06);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 30px 30px 32px;
}
.why-section .glass-card:hover {
  background: #fff;
  box-shadow: 0 16px 44px rgba(120,60,10,.14);
}
.why-section .glass-card h3 { color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 20px; }
.why-section .glass-card p  { color: var(--muted); }
/* Scoped to .why-section on purpose: the course-page "#sec-why" blocks lower
   down define .why-icon too, and being later they would otherwise win here. */
.why-section .why-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px;
  margin-bottom: 20px;
  /* A peach chip with a deep-saffron glyph. Both are mixed from the admin's
     theme colour, so a light brand colour still leaves a readable icon —
     var(--maroon) on its own washed out completely at #ff7722. */
  background: #fff2e2;
  background: color-mix(in srgb, var(--maroon) 16%, #fff);
  border: 1px solid #f7dfc6;
  border-color: color-mix(in srgb, var(--maroon) 30%, #fff);
  color: var(--maroon-deep);
}
.why-section .why-icon svg { width: 26px; height: 26px; stroke-width: 2; }
.why-section .why-icon img { width: 30px; height: 30px; object-fit: contain; }

/* ── Embedded location map ──────────────────────────────────── */
.location-map-section { padding-top: 0; }
.map-embed-wrap {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 10px 34px rgba(0,0,0,.08);
}
.map-embed { width: 100%; height: 440px; border: 0; display: block; filter: saturate(1.02); }
.map-open-btn {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--maroon-dark);
  padding: 9px 15px; border-radius: 9px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: background var(--transition), transform var(--transition);
}
.map-open-btn:hover { background: var(--cream); transform: translateY(-1px); }
@media (max-width: 700px) { .map-embed { height: 340px; } }

/* ── Steps grid (how it works) ───────────────────────────── */
.steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.step-card {
  padding: 36px 28px;
  border-right: 1px solid var(--border);
  background: var(--white);
}
.step-card:last-child { border-right: 0; }
.step-num {
  display: block; font-family: var(--serif); font-size: 48px; font-weight: 400;
  color: var(--maroon); line-height: 1; margin-bottom: 20px;
}
.step-card h3 { font-size: 20px; margin-bottom: 10px; }
.step-card p  { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0; }

/* ── About stats strip ───────────────────────────────────── */
.about-stats-strip { padding: 0; }
.about-stats-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.about-stat {
  flex: 1; min-width: 160px; text-align: center;
  padding: 40px 24px;
  border-right: 1px solid var(--border);
}
.about-stat:last-child { border-right: 0; }
.about-stat strong {
  display: block; font-family: var(--serif); font-size: 52px; font-weight: 400;
  color: var(--maroon); line-height: 1; letter-spacing: -0.02em;
}
.about-stat span { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; letter-spacing: 0.06em; }

/* ── Cert detail grid (about page) ──────────────────────── */
.cert-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.cert-detail-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px;
  box-shadow: var(--shadow-sm);
}
.cert-detail-codes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cert-detail-card h3 { font-size: 24px; margin: 0 0 6px; }
.cert-detail-type { color: var(--maroon); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px; }
.cert-detail-card p { color: var(--muted); font-size: 15px; line-height: 1.75; margin: 0; }

/* ── Values grid (about page) ───────────────────────────── */
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.value-detail-card {
  padding: 32px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white);
}
.value-num {
  display: block; font-family: var(--serif); font-size: 40px; font-weight: 400;
  color: var(--border); line-height: 1; margin-bottom: 16px;
}
.value-detail-card h3 { font-size: 20px; margin-bottom: 10px; }
.value-detail-card p  { color: var(--muted); font-size: 14.5px; line-height: 1.72; margin: 0; }

/* ── Teacher detail (about page) ────────────────────────── */
.teacher-detail-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.teacher-detail-card {
  display: grid; grid-template-columns: 180px 1fr; gap: 28px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.teacher-detail-img { overflow: hidden; border-radius: var(--radius); }
.teacher-detail-img img { width: 100%; height: 220px; object-fit: cover; object-position: top; }
.teacher-detail-body .eyebrow { margin-bottom: 8px; }
.teacher-detail-body h3 { font-size: 22px; margin: 6px 0 4px; }
.teacher-role { color: var(--maroon); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 14px; }
.teacher-detail-body p { color: var(--muted); font-size: 14.5px; line-height: 1.75; margin: 0; }

/* ── Milestones (about page) ─────────────────────────────── */
.milestone-list {
  display: grid; gap: 0; border-left: 2px solid var(--border);
  margin-left: 60px; padding-left: 36px;
}
.milestone-row {
  display: grid; grid-template-columns: 60px 18px 1fr;
  gap: 0 20px; align-items: start;
  padding: 20px 0; position: relative;
  margin-left: -96px;
}
.milestone-year {
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  color: var(--maroon); text-align: right; padding-top: 2px;
}
.milestone-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--maroon); margin-top: 6px; flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(184,80,0,0.12);
  position: relative; left: -7px;
}
.milestone-row p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; }

/* ── Featured post (blog) ────────────────────────────────── */
.featured-post {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.featured-post:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.featured-post-img { overflow: hidden; min-height: 360px; }
.featured-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.featured-post:hover .featured-post-img img { transform: scale(1.04); }
.featured-post-body {
  padding: 48px; display: flex; flex-direction: column; justify-content: center;
}
.featured-post-body h2 { font-size: 36px; margin: 12px 0 18px; }
.featured-post-body p  { color: var(--muted); font-size: 17px; line-height: 1.75; margin: 0; }

/* ── Post layout (post detail) ───────────────────────────── */
.post-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 48px; align-items: start;
}
.post-article {}
.post-body p { font-size: 18px; color: var(--muted); line-height: 1.82; margin: 0 0 22px; }
/* Pasted / rich HTML inside the article body (Word, Google Docs, raw HTML) */
.post-body h2 { font-size: 30px; line-height: 1.25; margin: 40px 0 14px; }
.post-body h3 { font-size: 23px; line-height: 1.3; margin: 32px 0 12px; }
.post-body h4 { font-size: 19px; line-height: 1.35; margin: 26px 0 10px; }
.post-body ul, .post-body ol { padding-left: 1.5em; margin: 0 0 22px; font-size: 18px; color: var(--muted); line-height: 1.75; }
.post-body li { margin-bottom: 8px; }
.post-body li p { margin: 0; }
.post-body a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
.post-body blockquote { margin: 26px 0; padding: 14px 22px; border-left: 3px solid var(--maroon); background: var(--light-bg); font-size: 19px; line-height: 1.7; color: var(--muted); border-radius: 0 6px 6px 0; }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0 22px; display: block; }
.post-body figure { margin: 28px 0; }
.post-body figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; text-align: center; }
.post-body hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.post-body pre { background: var(--light-bg); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; overflow-x: auto; font-size: 14px; margin: 0 0 22px; }
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 16px; line-height: 1.6; display: block; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; vertical-align: top; }
.post-body th { background: var(--light-bg); font-weight: 600; }
.post-body td p, .post-body th p { margin: 0; font-size: inherit; }
.post-footer-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.post-tag {
  display: inline-block; padding: 6px 14px;
  background: var(--light-bg); border: 1px solid var(--border);
  border-radius: 2px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--maroon);
}
.author-card {
  display: flex; align-items: flex-start; gap: 18px;
  margin-top: 40px; padding: 28px;
  background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.author-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  background: var(--maroon-dark); color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 22px; font-weight: 500;
}
.author-card strong { display: block; font-size: 16px; margin-bottom: 6px; }
.author-card p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }
.post-sidebar { display: grid; gap: 24px; position: sticky; top: 104px; }
.sidebar-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm);
}
.sidebar-card .eyebrow { margin-bottom: 10px; }
.sidebar-card h3 { font-size: 20px; margin: 0 0 12px; }
.sidebar-card p  { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 0 16px; }

/* ── Courses layout: sidebar + content ──────────────────── */
.courses-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Sidebar */
.courses-sidebar {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sf-section {
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}
.sf-section:last-of-type { border-bottom: 0; }

.sf-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px;
}

.sf-options { display: grid; gap: 4px; }

.sf-check {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 12px; border-radius: 4px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.sf-check input { display: none; }
.sf-check:hover { background: var(--light-bg); color: var(--ink); }
.sf-check.is-active {
  background: var(--light-bg); color: var(--maroon); font-weight: 600;
}

.sf-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  background: var(--light-bg); color: var(--muted);
  border-radius: 999px; padding: 2px 8px;
  letter-spacing: 0.04em;
}
.sf-check.is-active .sf-count { background: var(--maroon-dark); color: #fff; }

.sf-reset {
  width: 100%; padding: 14px 22px;
  background: transparent; border: 0;
  color: var(--muted); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition), background var(--transition);
}
.sf-reset:hover { color: var(--maroon); background: var(--light-bg); }

.sf-cta { padding: 20px 22px; background: var(--light-bg); }
.sf-cta p { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; line-height: 1.5; }

/* Mobile filter toggle button (hidden on desktop; the sidebar shows in full) */
.sf-toggle { display: none; align-items: center; gap: 9px; width: 100%;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.sf-toggle-label { flex: 1; text-align: left; }
.sf-toggle-count {
  min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px;
  background: var(--maroon-dark); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center; letter-spacing: 0;
}
.sf-toggle-chev { transition: transform .2s; flex: 0 0 auto; }
.courses-sidebar.is-open .sf-toggle-chev { transform: rotate(180deg); }
.courses-sidebar.is-open .sf-toggle { border-color: var(--maroon-dark); }

/* Toolbar */
.courses-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.courses-count {
  font-size: 14px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.02em;
}
.view-toggle { display: flex; gap: 4px; }
.view-btn {
  width: 38px; height: 38px; border-radius: 4px;
  display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--white);
  color: var(--muted); cursor: pointer;
  transition: all var(--transition);
}
.view-btn:hover { border-color: var(--maroon); color: var(--maroon); }
.view-btn.is-active { background: var(--maroon-dark); border-color: var(--maroon-dark); color: #fff; }

/* No results */
.courses-empty { padding: 48px 0; text-align: center; color: var(--muted); }
.courses-empty p { font-size: 17px; }

/* List view */
.course-list { display: grid; gap: 16px; }
.course-list-card {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.course-list-card:hover {
  box-shadow: var(--shadow); transform: translateY(-2px);
}
.course-list-thumb {
  display: block; overflow: hidden;
  flex: 0 0 200px;
}
.course-list-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.course-list-card:hover .course-list-thumb img { transform: scale(1.05); }

.course-list-body {
  padding: 24px 28px; display: flex; flex-direction: column; gap: 12px;
  border-right: 1px solid var(--border);
}
.course-list-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.course-tag {
  display: inline-block; padding: 3px 10px; border-radius: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.course-tag.cat  { background: var(--light-bg); color: var(--maroon); }
.course-tag.cred { background: rgba(196,148,69,0.1); color: var(--gold); border: 1px solid rgba(196,148,69,0.2); }

.course-list-body h3 { font-size: 22px; margin: 0; }
.course-list-body h3 a { color: var(--ink); transition: color var(--transition); }
.course-list-body h3 a:hover { color: var(--maroon); }
.course-list-body p { color: var(--muted); font-size: 14.5px; line-height: 1.68; margin: 0; flex: 1; }

.course-list-facts {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--muted); font-weight: 500;
}
.course-list-facts span {
  display: inline-flex; align-items: center; gap: 6px;
}
.course-list-facts svg { flex: 0 0 auto; color: var(--gold); }

.course-list-actions {
  padding: 24px; display: flex; flex-direction: column;
  align-items: stretch; gap: 10px; min-width: 180px;
  justify-content: center;
}
.course-list-price {
  text-align: center; margin-bottom: 4px;
}
.course-list-price strong {
  display: block; font-family: var(--serif);
  font-size: 22px; font-weight: 500; color: var(--maroon);
}
.course-list-price span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.course-list-price small { display: block; font-size: 11px; color: var(--muted); }

/* ── Calendly booking cards ──────────────────────────────── */
.calendly-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.calendly-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 24px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.calendly-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.calendly-card-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--light-bg); border: 1px solid var(--border);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.calendly-card-icon svg { stroke: var(--maroon); }
.calendly-card h3 { font-size: 20px; margin: 0; }
.calendly-card p  { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; flex: 1; }

/* ── Accreditation strip ─────────────────────────────────── */
.accred-strip {
  background: var(--charcoal);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.accred-strip--light {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.accred-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0;
}
.accred-badge {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 32px; flex: 1; min-width: 200px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.accred-strip--light .accred-badge {
  border-right-color: var(--border);
}
.accred-badge:last-child { border-right: 0; }
.accred-badge svg { color: var(--gold); flex: 0 0 auto; }
.accred-strip--light .accred-badge svg { color: var(--maroon); }
.accred-badge strong {
  display: block; color: var(--white);
  font-size: 14px; font-weight: 600; line-height: 1.2;
}
.accred-strip--light .accred-badge strong { color: var(--ink); }
.accred-badge span {
  display: block; color: rgba(255,255,255,0.5);
  font-size: 12px; margin-top: 2px; letter-spacing: 0.04em;
}
.accred-strip--light .accred-badge span { color: var(--muted); }
/* 3-column accred strip */
.accred-tri {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}
.accred-tri-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 0;
}
.accred-tri-col .accred-badge {
  padding: 10px 28px;
  border-right: none;
  flex: none;
  min-width: 0;
  border-bottom: 1px solid var(--border);
}
.accred-tri-col .accred-badge:last-child { border-bottom: none; }
.accred-tri-col--right { text-align: left; border-left: 1px solid var(--border); }
.accred-tri-col--right .accred-badge { padding: 10px 28px; }
.accred-tri-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 36px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.accred-ya-logo {
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  filter: invert(1);
}
@media (max-width: 720px) {
  .accred-tri { grid-template-columns: 1fr; }
  .accred-tri-center { border-left: none; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px; }
  .accred-tri-col--right { border-left: none; }
}
.accred-badge--logo { display: none; }
.accred-org-logo { display: none; }

/* ── Category sections (courses page) ───────────────────── */
.category-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 36px; padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.category-count {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

/* ── Course gallery ──────────────────────────────────────── */
.course-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 240px 240px;
  gap: 12px;
}
.gallery-item {
  overflow: hidden; border-radius: var(--radius);
  background: var(--light-bg);
}
.gallery-item--wide {
  grid-column: span 2; grid-row: span 2;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.55s ease;
}
.gallery-item:hover img { transform: scale(1.05); }

/* ── Certificate preview ─────────────────────────────────── */
.cert-preview-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 70px; align-items: center;
}
.cert-image-wrap {
  position: relative; text-align: center;
}
.cert-modal-trigger {
  display: inline-block; position: relative; cursor: zoom-in; text-decoration: none;
}
.cert-modal-trigger img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  transition: opacity 0.2s;
  display: block; width: 100%;
}
.cert-modal-trigger:hover img { opacity: 0.88; }
.cert-zoom-icon {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff;
  display: grid; place-items: center;
  pointer-events: none;
}
.cert-zoom-icon svg { width: 16px; height: 16px; }
.cert-label {
  display: block; margin-top: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
}
/* ── Certificate lightbox modal ─────────────────────────── */
.cert-modal {
  display: none; position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center;
}
.cert-modal.is-open { display: flex; }
.cert-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(6px);
  cursor: pointer;
}
.cert-modal-inner {
  position: relative; z-index: 1;
  max-width: min(90vw, 900px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  padding: 20px;
  text-align: center;
}
.cert-modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--light-bg); border: 1px solid var(--border);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  transition: background var(--transition);
}
.cert-modal-close:hover { background: var(--border); }
.cert-modal-img {
  width: 100%; max-width: 860px;
  border-radius: 4px; display: block; margin: 0 auto;
}
.cert-modal-caption {
  margin-top: 14px; font-size: 13px;
  color: var(--muted); letter-spacing: 0.04em;
}

/* ── "Read the full guide" link + text popup ─────────────────── */
.ov-readmore {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: none; cursor: pointer;
  color: var(--maroon); font-weight: 700; font-size: 14px;
  letter-spacing: .01em; padding: 0;
  transition: gap .15s, color .15s;
}
.ov-readmore span { transition: transform .15s; }
.ov-readmore:hover { color: var(--maroon-dark); }
.ov-readmore:hover span { transform: translateX(4px); }

.info-modal-inner {
  text-align: left;
  max-width: min(92vw, 720px);
  padding: 36px 40px 40px;
}
.info-modal-title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3vw, 28px);
  line-height: 1.15; color: var(--maroon-dark); margin: 0 30px 20px 0;
}
.info-modal-body { color: var(--ink); font-size: 15px; line-height: 1.78; }
.info-modal-body p { margin: 0 0 15px; }
.info-modal-h, .info-modal-body h3 {
  font-family: var(--serif); font-weight: 500; font-size: 21px;
  color: var(--maroon-dark); margin: 28px 0 12px; line-height: 1.2;
  padding-top: 22px; border-top: 1px solid var(--border);
}
.info-modal-quote {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--maroon-dark); line-height: 1.5;
  padding: 16px 20px; margin: 20px 0 8px;
  background: #fff8f0; border-left: 3px solid var(--maroon);
  border-radius: 6px;
}
.info-modal-body h4 {
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  margin: 24px 0 12px; color: var(--ink);
}
.info-modal-body ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 11px; }
.info-modal-body li { position: relative; padding-left: 28px; }
.info-modal-body li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--maroon); font-weight: 800;
}
@media (max-width: 560px) { .info-modal-inner { padding: 26px 22px 30px; } }

/* The in-page share card is gone — sharing is the floating .share-fab
   button (and the Share entry in the phone tab strip). */

/* ══════════════════════════════════════════════════════════
   BOOKING PANEL — dark premium theme
   ══════════════════════════════════════════════════════════ */

/* Cert logos: centered column per badge — NEVER clips the logo */
.bp-cert-logos {
  display: flex; gap: 10px; margin-bottom: 20px;
}
.bp-cert-logo-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 16px 8px 14px;
  border: 1px solid rgba(196,148,69,.22);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  text-align: center; min-width: 0;
}
.bp-cert-logos .bp-accred-logo {
  width: 72px; height: 72px; object-fit: contain;
  flex-shrink: 0; display: block;
}
/* IYT / portrait logos — natural aspect ratio, fixed width only */
.bp-cert-logo-rect .bp-accred-logo {
  width: 80px; height: auto; max-height: 110px;
}
.bp-cert-logos .bp-accred-text { min-width: 0; width: 100%; }
.bp-cert-logos .bp-accred-text strong {
  display: block; font-size: 11px; font-weight: 700;
  color: #fff; line-height: 1.35; word-break: break-word;
}
.bp-cert-logos .bp-accred-text span {
  font-size: 10px; color: rgba(255,255,255,.5); display: block; margin-top: 2px;
}

/* Legacy single-badge block */
.bp-accred-badge { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(196,148,69,.2); border-radius: var(--radius); background: rgba(255,255,255,.06); margin-bottom: 16px; }
.bp-accred-logo { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.bp-accred-text strong { display: block; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.bp-accred-text span { font-size: 11.5px; color: rgba(255,255,255,.55); }

/* Starting-from price block */
.bp-start-price {
  margin-top: 4px; margin-bottom: 4px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(196,148,69,.18) 0%, rgba(196,148,69,.08) 100%);
  border: 1px solid rgba(196,148,69,.3);
  border-radius: var(--radius);
  text-align: center; color: #fff;
}
.bp-from-label {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); opacity: 1;
}
.bp-from-value {
  font-size: 38px; font-weight: 700; line-height: 1;
  margin: 6px 0 4px; font-family: var(--serif);
  color: #fff;
  text-shadow: 0 2px 16px rgba(196,148,69,.4);
}
.bp-from-value span { font-size: 15px; font-weight: 600; color: var(--gold); vertical-align: super; }
.bp-from-sub { font-size: 12px; color: rgba(255,255,255,.6); }

/* Fee options table */
.bp-fee-table {
  margin: 14px 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); padding: 14px 16px;
}
.bp-fee-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gold); margin: 0 0 10px; opacity: .9;
}
.bp-fee-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bp-fee-row td {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
}
.bp-fee-row td:last-child { text-align: right; font-weight: 600; color: #fff; }
.bp-fee-row:last-child td { border-bottom: 0; }
.bp-fee-best td { color: var(--gold) !important; font-weight: 700; }
.bp-badge {
  display: inline-block; font-size: 9px; font-weight: 800;
  background: linear-gradient(135deg, #c49445, #e8c467);
  color: #1a0906; padding: 2px 7px; border-radius: 20px;
  margin-left: 6px; vertical-align: middle;
  text-transform: uppercase; letter-spacing: .06em;
}
.bp-note-tag { font-size: 10px; color: rgba(255,255,255,.4); margin-left: 5px; }

/* Deposit block — white card with dark-bhagwa (brown) text */
.bp-deposit {
  padding: 12px 16px; margin-bottom: 16px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius);
}
.bp-deposit-amount { font-size: 15px; font-weight: 700; color: var(--maroon-deep); }
.bp-deposit-amount span { font-size: 12px; font-weight: 600; color: rgba(78,32,0,.75); }
.bp-deposit-note { font-size: 12px; color: rgba(78,32,0,.65); margin: 3px 0 0; }

/* Course facts (duration / level / mode) inside dark panel */
.booking-panel .course-facts.stacked > div {
  border-bottom-color: rgba(255,255,255,.08);
}
.booking-panel .course-facts.stacked dt { color: rgba(255,255,255,.45); }
.booking-panel .course-facts.stacked dd { color: #fff; }

/* Upcoming dates */
.bp-dates { margin: 0 0 18px; }
.bp-dates-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gold); margin: 0 0 8px; opacity: .9;
}
.bp-dates ul { margin: 0; padding: 0; list-style: none; }
.bp-dates li {
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px; color: rgba(255,255,255,.8);
}
.bp-dates li::before { content: '▸ '; color: var(--gold); font-size: 10px; }
.bp-dates li:last-child { border-bottom: 0; }

/* PRIMARY CTA — glowing gold button */
.booking-panel .btn-primary {
  background: linear-gradient(135deg, #b8832e 0%, #d4a84b 40%, #f0cc6a 65%, #d4a84b 100%) !important;
  color: #1a0906 !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .04em;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 28px rgba(196,148,69,.55), 0 2px 8px rgba(0,0,0,.3) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.booking-panel .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(196,148,69,.7), 0 4px 12px rgba(0,0,0,.3) !important;
}

/* Secondary buttons — solid white on the saffron panel */
.booking-panel .btn-secondary {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: var(--ink) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: transform .15s, box-shadow .2s !important;
}
.booking-panel .btn-secondary:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Brochure button — gold dashed on dark */
.btn-outline-brochure {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border: 1.5px dashed rgba(196,148,69,.55);
  border-radius: var(--radius); color: var(--gold);
  font-size: 13px; font-weight: 600; background: transparent;
  transition: background .2s, border-color .2s, color .2s;
  text-decoration: none; width: 100%; box-sizing: border-box;
}
.btn-outline-brochure:hover {
  background: rgba(196,148,69,.1);
  border-color: var(--gold); color: #f0d898;
}

/* Small note disclaimer at bottom */
.booking-panel .small-note {
  color: rgba(255,255,255,.35) !important;
  font-size: 11.5px !important;
  line-height: 1.6;
}

/* ── Saffron booking panel: brighten gold accents & faint text ──
   The gold (#d4a020) & low-opacity whites were tuned for a near-black
   panel; on the saffron background they lose contrast, so lift them. */
.booking-panel .eyebrow { color: #ffdd9e !important; }
.booking-panel .bp-from-label,
.booking-panel .bp-fee-title,
.booking-panel .bp-dates-title { color: #ffe1a6 !important; opacity: 1 !important; }
.booking-panel .bp-from-value span { color: #ffe1a6; }
.booking-panel .bp-from-sub { color: rgba(255,255,255,.85); }
.booking-panel .bp-fee-row td { color: rgba(255,255,255,.9); }
.booking-panel .bp-fee-row td:last-child { color: #fff; }
.booking-panel .bp-fee-best td { color: #ffe1a6 !important; }
.booking-panel .bp-note-tag { color: rgba(255,255,255,.6); }
.booking-panel .bp-dates li { color: rgba(255,255,255,.9); }
.booking-panel .bp-dates li::before { color: #ffe1a6; }
.booking-panel .course-facts.stacked dt { color: rgba(255,255,255,.7); }
.booking-panel .small-note { color: rgba(255,255,255,.6) !important; }
.booking-panel .btn-outline-brochure {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid #fff !important;
  font-weight: 600 !important;
  transition: transform .15s, box-shadow .2s !important;
}
.booking-panel .btn-outline-brochure:hover {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Cert badge row below course description (outside panel) */
.cert-badge-row { display: flex; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.cert-badge-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cert-badge-img { width: 80px; height: 80px; object-fit: contain; }
.cert-badge-item span { font-size: 11px; color: var(--muted); max-width: 90px; line-height: 1.4; }

/* ── Course Timeline ─────────────────────────────────────── */
.ctl-section { background: var(--cream); }
.ctl-heading { text-align: center; margin-bottom: 48px; }
.ctl-ornament { font-size: 28px; color: var(--maroon); margin-bottom: 6px; line-height: 1; }
.ctl-title { font-family: var(--serif); font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; color: var(--maroon-dark); letter-spacing: .04em; margin: 0; }
.ctl-connector { display: none; }

/* 2×2 grid with photo cards — matches reference */
.course-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ctl-step {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.ctl-step:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.ctl-photo {
  position: relative;
  width: 130px;
  flex-shrink: 0;
}
.ctl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctl-num {
  position: absolute;
  top: 12px; left: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  z-index: 1;
}
.ctl-body {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.ctl-body strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink);
  line-height: 1.3;
}
.ctl-meta { display: flex; flex-direction: column; gap: 5px; }
.ctl-meta span {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
}
.ctl-meta svg { flex-shrink: 0; color: var(--maroon); }

/* ── Batch Calendar — BEGIN YOUR JOURNEY ────────────────── */
.bjy-section {
  background: #160a05; /* dark base behind the photo */
  position: relative;
  overflow: hidden;
}
/* Cinematic campus photo — brought forward for atmosphere */
.bjy-section::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url('/assets/images/gallery-yoga-1.jpg');
  background-size: cover;
  background-position: center 35%;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
/* Warm gold glow + dark saffron wash so text/cards stay crisp */
.bjy-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 58% -12%, rgba(212,160,32,.22) 0%, transparent 58%),
    linear-gradient(180deg, rgba(16,7,3,.80) 0%, rgba(34,15,6,.66) 46%, rgba(14,6,3,.92) 100%);
  pointer-events: none;
  z-index: 1;
}
/* ensure all bjy content sits above the bg layers */
.bjy-section > * { position: relative; z-index: 2; }
.bjy-heading { text-align: center; margin-bottom: 36px; position: relative; }
.bjy-ornament { font-size: 30px; color: var(--gold); margin-bottom: 8px; line-height: 1; filter: drop-shadow(0 2px 10px rgba(212,160,32,.5)); }
.bjy-title { font-family: var(--serif); font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; color: #fff; letter-spacing: .03em; margin: 0 0 12px; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.bjy-subtitle { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: rgba(240,216,152,.85); margin: 0; }

.batch-calendar-layout { display: grid; grid-template-columns: 1fr 320px; gap: 36px; align-items: start; }
.batch-dates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.batch-date-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: rgba(20,10,6,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.batch-date-card:hover { border-color: rgba(212,160,32,.5); background: rgba(30,16,8,.62); transform: translateY(-2px); }
.batch-date-card--next { border-color: rgba(196,148,69,.5); background: rgba(196,148,69,.1); }
.batch-date-card--selected {
  border-color: var(--gold) !important;
  background: rgba(196,148,69,.18) !important;
  box-shadow: 0 0 0 2px rgba(196,148,69,.3), inset 0 0 0 1px rgba(196,148,69,.2);
}
.batch-date-icon { color: rgba(196,148,69,.7); flex-shrink: 0; opacity: .8; }
.batch-date-card--next .batch-date-icon { color: var(--gold); opacity: 1; }
.batch-date-info { min-width: 0; }
.batch-date-card strong { display: block; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.88); margin-bottom: 4px; line-height: 1.3; }
.batch-date-card--next strong { color: #f0d898; }
.batch-date-card--selected strong { color: #fde68a !important; }
.batch-seats { font-size: 11.5px; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 5px; }
.batch-seats em { font-style: normal; color: #fbbf24; font-weight: 600; }
.batch-seat-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }
.batch-seat-dot--low { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
/* Sold out — same greyed treatment as a started batch, minus the strike-through:
   the date is still true, it is the seats that are gone. */
.batch-date-card--full strong { text-decoration: none; }
.batch-next-tag { display: none; }

/* Closed batch — the start day has passed, so it stays on the page for
   context but cannot be chosen. Dark hero variant. */
.batch-date-card--closed {
  cursor: default;
  opacity: .5;
  border-style: dashed;
  border-color: rgba(255,255,255,.14);
  background: rgba(20,10,6,.28);
}
.batch-date-card--closed:hover { transform: none; border-color: rgba(255,255,255,.14); background: rgba(20,10,6,.28); }
.batch-date-card--closed strong { text-decoration: line-through; text-decoration-thickness: 1px; color: rgba(255,255,255,.55); }
.batch-date-card--closed .bjy-date-radio { border-style: dashed; opacity: .6; }
.batch-date-card--closed .batch-date-icon { opacity: .45; }
.batch-seats--closed {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #f0a4a4;
}

/* Freshly rolled batch — generated to replace one that closed. */
.batch-date-card--new { position: relative; }
.batch-new-badge {
  position: absolute; top: -8px; right: 10px;
  padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #4ade80, #16a34a);
  color: #05230f; font-size: 9.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(22,163,74,.4);
}

/* Radio dot indicator */
.bjy-date-radio { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); flex-shrink: 0; transition: border-color .2s; }
.batch-date-card--selected .bjy-date-radio { border-color: var(--gold); }
.bjy-radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .18s ease; }
.batch-date-card--selected .bjy-radio-dot { transform: scale(1); }

/* Prompt and confirmation strip */
.bjy-select-prompt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: 12px; }
.bjy-selected-strip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(196,148,69,.12); border: 1px solid rgba(196,148,69,.3);
  border-radius: 8px; padding: 10px 16px; margin-top: 14px; margin-bottom: 0;
  color: rgba(255,255,255,.85); font-size: 13px;
}
.bjy-selected-strip svg { color: var(--gold); flex-shrink: 0; }
.bjy-selected-strip strong { color: #fde68a; font-weight: 700; }

/* Fee summary panel */
.batch-fee-summary {
  background: linear-gradient(165deg, var(--maroon-dark) 0%, var(--maroon-deep) 100%);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 90px;
  box-shadow: 0 8px 32px rgba(138,57,0,.28);
}
.bfs-duration {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.bfs-duration span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.5); }
.bfs-duration strong { font-size: 15px; font-weight: 700; color: #fff; font-family: var(--serif); }
.batch-fee-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.5); margin: 0 0 14px; }

/* Private room card */
.bfs-room { border-radius: 6px; margin-bottom: 10px; }
.bfs-room--private {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bfs-room-icon { color: rgba(255,255,255,.6); flex-shrink: 0; }
.bfs-room-info { flex: 1; }
.bfs-room-type { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.75); margin-bottom: 4px; }
.bfs-amenities { display: flex; gap: 8px; flex-wrap: wrap; }
.bfs-amenities span { font-size: 10px; color: rgba(255,255,255,.5); }
.bfs-price { font-size: 20px; font-weight: 700; font-family: var(--serif); color: #fff; white-space: nowrap; }
.bfs-price small { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.6); vertical-align: middle; margin-left: 2px; }
.bfs-price--best { color: var(--gold); }

/* Twin + Triple row */
.bfs-shared-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.bfs-room--twin, .bfs-room--triple {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.bfs-room--twin .bfs-price, .bfs-room--triple .bfs-price { font-size: 16px; }
.bfs-room--twin .bfs-room-type, .bfs-room--triple .bfs-room-type { font-size: 10px; }
.bfs-room--twin .bfs-room-icon, .bfs-room--triple .bfs-room-icon { color: rgba(255,255,255,.5); }

.bfs-book-btn {
  background: var(--gold) !important;
  color: var(--maroon-deep) !important;
  border-color: var(--gold) !important;
  font-weight: 700 !important;
}
.bfs-book-btn:hover { background: #d4a84e !important; }
.btn-outline-light {
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-outline-light:hover { background: rgba(255,255,255,.15); color: #fff; }
.bfs-note { font-size: 10.5px; color: rgba(255,255,255,.4); margin: 10px 0 0; text-align: center; }

/* ══ Begin Your Journey — LIGHT orange-gold theme ═══════════════
   Overrides the dark defaults above. The fee-summary card stays a
   dark saffron accent so the booking CTA still pops. */
.bjy-section {
  background: linear-gradient(165deg, #fff7ec 0%, #ffedd6 52%, #f9ddbb 100%);
}
.bjy-section::after { display: none; }               /* drop the dark photo layer */
.bjy-section::before {
  background: radial-gradient(ellipse at 60% -8%, rgba(212,160,32,.20) 0%, transparent 60%);
}
.bjy-section .bjy-title { color: var(--maroon-dark); text-shadow: none; }
.bjy-section .bjy-subtitle { color: var(--maroon); }
.bjy-section .bjy-ornament { filter: none; }
.bjy-section .bjy-select-prompt { color: var(--muted); }

:is(.bjy-section, .bjy-light) .batch-date-card {
  background: #fff; border: 1px solid #ecdcc4;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
:is(.bjy-section, .bjy-light) .batch-date-card:hover { background: #fffaf2; border-color: var(--maroon); }
:is(.bjy-section, .bjy-light) .batch-date-card--next { background: #fff3e2; border-color: rgba(184,80,0,.5); }
:is(.bjy-section, .bjy-light) .batch-date-card--selected {
  background: #fff0dc !important; border-color: var(--maroon) !important;
  box-shadow: 0 0 0 2px rgba(184,80,0,.28), inset 0 0 0 1px rgba(184,80,0,.15) !important;
}
:is(.bjy-section, .bjy-light) .batch-date-card strong { color: var(--ink); }
:is(.bjy-section, .bjy-light) .batch-date-card--next strong,
:is(.bjy-section, .bjy-light) .batch-date-card--selected strong { color: var(--maroon-dark) !important; }
:is(.bjy-section, .bjy-light) .batch-seats { color: var(--muted); }
:is(.bjy-section, .bjy-light) .batch-seats em { color: #b45309; }
:is(.bjy-section, .bjy-light) .batch-date-icon { color: var(--maroon); opacity: 1; }
:is(.bjy-section, .bjy-light) .bjy-date-radio { border-color: #d8c3a5; }
:is(.bjy-section, .bjy-light) .batch-date-card--selected .bjy-date-radio { border-color: var(--maroon); }
:is(.bjy-section, .bjy-light) .batch-date-card--closed { background: #f7f3ec; border-color: #e0d5c2; }
:is(.bjy-section, .bjy-light) .batch-date-card--closed:hover { background: #f7f3ec; border-color: #e0d5c2; }
:is(.bjy-section, .bjy-light) .batch-date-card--closed strong { color: var(--muted); }
:is(.bjy-section, .bjy-light) .batch-seats--closed { color: #b91c1c; }
:is(.bjy-section, .bjy-light) .bjy-radio-dot { background: var(--maroon); }
.bjy-section .bjy-selected-strip {
  background: #fff3e2; border-color: rgba(184,80,0,.32); color: var(--ink);
}
.bjy-section .bjy-selected-strip svg { color: var(--maroon); }
.bjy-section .bjy-selected-strip strong { color: var(--maroon-dark); }

/* Room cards + fee bar — light theme */
.bjy-section .bjy-fee-bar {
  background: rgba(255,255,255,.55); border-color: rgba(184,80,0,.22);
}
.bjy-section .bjy-room-card {
  background: #fff; border: 1px solid #ecdcc4;
}
.bjy-section .bjy-room-card:hover { background: #fffaf2; border-color: var(--maroon); }
.bjy-section .bjy-room-card--private { background: #fff5ea; border-color: rgba(184,80,0,.3); }
.bjy-section .bjy-room-card--best { background: #f2fbf0; border-color: rgba(45,160,70,.35); }
.bjy-section .bjy-room-card--selected {
  background: #fff0dc !important; border-color: var(--maroon) !important;
  box-shadow: 0 0 0 2px rgba(184,80,0,.28), inset 0 0 0 1px rgba(184,80,0,.14) !important;
}
.bjy-section .bjy-room-radio { border-color: #d8c3a5; }
.bjy-section .bjy-room-card--selected .bjy-room-radio { border-color: var(--maroon); }
.bjy-section .bjy-room-card .bjy-radio-dot { background: var(--maroon); }
.bjy-section .bjy-room-header { color: var(--ink); }
.bjy-section .bjy-room-header svg { color: var(--maroon); }
.bjy-section .bjy-amenities span { color: var(--muted); }
.bjy-section .bjy-price { color: var(--maroon-dark); }
.bjy-section .bjy-price small { color: var(--muted); }
.bjy-section .bjy-best-badge { color: #1f8a3b; background: rgba(45,160,70,.14); }
.bjy-section .bjy-duration-tag { color: var(--muted); border-bottom-color: rgba(184,80,0,.18); }
.bjy-section .bjy-room-chosen-strip {
  background: #fff3e2; border-color: rgba(184,80,0,.3); color: var(--maroon-dark);
}
.bjy-section .bjy-room-chosen-strip svg { color: var(--maroon); }
.bjy-section .bfs-note { color: var(--muted); }
.bjy-section .btn-outline-light {
  border-color: rgba(184,80,0,.4); color: var(--maroon-dark); background: #fff;
}
.bjy-section .btn-outline-light:hover { background: #fff3e2; color: var(--maroon-deep); }

/* ── Inclusions / Exclusions / What to Bring — Tabs ─────── */
.inc-section { background: var(--cream); }
.inc-tabs-wrap {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
}
.inc-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
  background: none; border: none; cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.inc-tab:hover { color: var(--maroon); }
.inc-tab--active { color: var(--maroon-dark); border-bottom-color: var(--maroon); }
.inc-tab--active svg { color: var(--maroon); }

.inc-panel { display: none; padding: 36px 0 0; }
.inc-panel--active { display: block; }

.inc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.inc-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.inc-item:nth-child(even) { border-right: none; }
.inc-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.inc-item span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.inc-check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #e8f5ee;
  color: #1a5e3a;
  font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
  margin-top: 1px;
}
.inc-cross {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fdecea;
  color: #8b1a1a;
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  margin-top: 1px;
}
.inc-dot {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--light-bg);
  color: var(--maroon);
  font-size: 14px; font-weight: 700;
  display: grid; place-items: center;
  margin-top: 1px;
}

/* ── Special Sessions ────────────────────────────────────── */
.special-sessions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ss-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.ss-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--gold); }

/* Photo header — 16/10 so a row of cards always lines up, whatever the source
   image's aspect ratio is. */
.ss-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--light-bg); }
.ss-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.ss-card:hover .ss-photo img { transform: scale(1.05); }
.ss-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,10,4,.35) 0%, rgba(20,10,4,0) 45%);
}
.ss-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--maroon-dark);
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(26,12,0,.16);
}
.ss-body { padding: 20px 22px 24px; }
/* Kept for sessions an admin has deliberately left without a photo */
.ss-icon {
  width: 56px; height: 56px; border-radius: 14px; margin: 24px 22px 0;
  background: var(--light-bg); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--maroon);
}
.ss-card--noimg .ss-body { padding-top: 16px; }
.ss-card h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 10px; line-height: 1.3; }
.ss-card p { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; }
.ss-body > div { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* ── Daily schedule ──────────────────────────────────────── */
.schedule-header { margin-bottom: 48px; }
.schedule-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; border-top: 1px solid var(--border);
}
.schedule-block {
  display: grid;
  grid-template-columns: 80px 18px 1fr;
  gap: 0 16px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--border);
}
.schedule-block:nth-child(odd) { padding-right: 40px; }
.schedule-block:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--border); }
.sched-time {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--maroon); text-transform: uppercase; padding-top: 3px;
  text-align: right;
}
.sched-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--maroon); margin-top: 5px; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(122, 44, 56, 0.15);
}
.schedule-block strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.schedule-block p { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }

/* ── Sunrise-to-Sunset Day Timeline ──────────────────────── */
.dl-section { background: var(--cream); padding: 80px 0 100px; }

.dl-head { text-align: center; margin-bottom: 64px; }
.dl-head h2 { margin: 10px 0 0; }
.dl-sub {
  color: var(--muted); font-size: 16px; line-height: 1.7;
  margin: 14px auto 0; max-width: 580px;
}

/* wrapper — fits within the screen, no horizontal scroll */
.dl-scroll-wrap {
  overflow: visible;
  padding-bottom: 8px;
}

/* outer flex row — fills the container width */
.dl-outer {
  display: flex; align-items: center;
  width: 100%; min-width: 0;
}
.dl-mobile-table { display: none; }

/* bookends */
.dl-bookend {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; flex-shrink: 0; width: 68px;
}
.dl-bookend span {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; white-space: nowrap;
}
.dl-bookend--left  { color: #c47a1a; }
.dl-bookend--right { color: #5a3d7a; }

/* ─── Timeline area ───
   Track sits dead-centre. 240px of room above and below for cards+stems. */
.dl-area {
  flex: 1; position: relative;
  height: 340px; min-width: 0;
}

/* The gradient bar — absolutely at vertical centre */
.dl-track-line {
  position: absolute;
  top: 50%; left: 0; right: 0; height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(to right,
    #f59e0b 0%, #d97706 20%, #b45309 42%,
    #c2410c 62%, #9f1239 80%, #6d28d9 100%
  );
  border-radius: 2px;
  z-index: 1;
}

/* half-hourly tick marks — inside dl-track-line */
.dl-tick {
  position: absolute; top: 50%; left: 0;
  transform: translateX(-50%) translateY(-50%);
  width: 1px; height: 10px;
  background: rgba(0,0,0,.22); z-index: 2;
}
.dl-tick--hour { height: 18px; background: rgba(0,0,0,.32); }
.dl-tick-lbl {
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

/* ─── Activity nodes ───
   DOM order always: dot → stem → card.

   above (column-reverse): visual = card ↑ stem ↑ dot — anchored at track with translateY(-100%)
   below (column):         visual = dot ↓ stem ↓ card — anchored at track with top:50%          */
.dl-node {
  position: absolute;
  display: flex; align-items: center;
  z-index: 5;
}

/* Card stands ABOVE the line: element top=50% then pushed up by its own full height */
.dl-node--above {
  flex-direction: column-reverse;
  top: 50%;
  transform: translateX(-50%) translateY(-100%);
}

/* Card falls BELOW the line: element top=50%, sits naturally below */
.dl-node--below {
  flex-direction: column;
  top: 50%;
  transform: translateX(-50%);
}

/* dot — colour from --nc (time-of-day) */
.dl-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--nc, var(--maroon));
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 2px var(--nc, var(--maroon)), 0 3px 10px rgba(0,0,0,.18);
  flex-shrink: 0; z-index: 4; position: relative;
}

/* stem — fades from node colour at track end to transparent */
.dl-stem { width: 1.5px; flex-shrink: 0; }
.dl-node--above .dl-stem {
  background: linear-gradient(to top, var(--nc, rgba(196,148,69,.6)), transparent);
}
.dl-node--below .dl-stem {
  background: linear-gradient(to bottom, var(--nc, rgba(196,148,69,.6)), transparent);
}

/* card — coloured top border + time label picks up node colour */
.dl-card {
  background: #fff;
  border: 1px solid #ede7dc;
  border-top: 3px solid var(--nc, var(--maroon));
  border-radius: 10px; padding: 9px 10px;
  width: 104px; box-sizing: border-box; text-align: center;
  box-shadow: 0 4px 16px rgba(26,12,0,.08);
  transition: box-shadow .2s, transform .2s;
}
.dl-card:hover { box-shadow: 0 8px 26px rgba(26,12,0,.13); transform: translateY(-2px); }
.dl-time {
  display: block; font-size: 9px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--nc, var(--gold)); margin-bottom: 5px;
}
.dl-name {
  display: block; font-family: var(--serif);
  font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
}

/* Slightly tighter cards on mid screens so everything still fits */
@media (max-width: 1100px) {
  .dl-card { width: 92px; padding: 8px 8px; }
  .dl-name { font-size: 12px; }
  .dl-area { height: 320px; }
}

/* ── Mobile: simple Time / Activity table ──────────────────── */
@media (max-width: 760px) {
  .dl-scroll-wrap { display: none; }            /* hide the timeline */
  .dl-section { padding: 56px 0; }
  .dl-head { margin-bottom: 30px; }
  .dl-mobile-table {
    display: table; width: 100%; border-collapse: collapse;
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 18px rgba(26,12,0,.07);
  }
  .dl-mobile-table tr { border-bottom: 1px solid #f0ece4; }
  .dl-mobile-table tr:last-child { border-bottom: none; }
  .dl-mt-time {
    padding: 13px 14px; white-space: nowrap; vertical-align: top;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--maroon); width: 1%; border-right: 1px solid #f0ece4;
  }
  .dl-mt-name {
    padding: 13px 16px; font-family: var(--serif);
    font-size: 15px; color: var(--ink); line-height: 1.4;
  }
}

/* ── Daily schedule: layout switch + Day-planner view ─────── */
.dl-section[data-dl-view="list"]     .dl-view--timeline,
.dl-section[data-dl-view="timeline"] .dl-view--list { display: none; }

.dl-switch {
  display: inline-flex; margin-top: 22px; padding: 4px;
  background: #fff; border: 1px solid #ede7dc; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(26,12,0,.05);
}
.dl-switch button {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 18px; border-radius: 999px;
  font: 600 13px/1 var(--sans, inherit); color: var(--muted);
  transition: background .2s, color .2s;
}
.dl-switch button[aria-pressed="true"] { background: var(--maroon); color: #fff; }
.dl-switch button:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

.dl-plan {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; align-items: start;
}
.dl-plan-col {
  background: #fff; border: 1px solid #ede7dc; border-radius: 14px;
  padding: 22px 22px 10px; box-shadow: 0 4px 18px rgba(26,12,0,.06);
}
.dl-plan-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #f0ece4;
  font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink);
}
.dl-plan-head span { font-size: 16px; }
.dl-plan-col--morning   .dl-plan-head span { color: #d97706; }
.dl-plan-col--afternoon .dl-plan-head span { color: #c2410c; }
.dl-plan-col--evening   .dl-plan-head span { color: #6d28d9; }

.dl-plan-list { list-style: none; margin: 0; padding: 0; }
.dl-plan-item {
  position: relative; display: grid; grid-template-columns: 92px 1fr;
  gap: 14px; align-items: baseline; padding: 11px 0 11px 18px;
}
/* dot + connecting rail, coloured by time of day */
.dl-plan-item::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--nc, var(--maroon));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--nc, var(--maroon));
}
.dl-plan-item::after {
  content: ""; position: absolute; left: 4px; top: 30px; bottom: -12px;
  width: 1px; background: #eadfce;
}
.dl-plan-item:last-child::after { display: none; }
.dl-plan-time { display: flex; flex-direction: column; line-height: 1.25; }
.dl-plan-time b {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--nc, var(--maroon)); white-space: nowrap;
}
.dl-plan-time small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.dl-plan-name {
  font-family: var(--serif); font-size: 16px; line-height: 1.35; color: var(--ink);
}

@media (max-width: 960px) {
  .dl-plan { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 16px; }
}
@media (max-width: 420px) {
  .dl-plan-col { padding: 18px 16px 6px; }
  .dl-plan-item { grid-template-columns: 80px 1fr; gap: 10px; }
}

/* ── Arrival grid (contact page) ─────────────────────────── */
.arrival-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.arrival-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 28px 24px;
}
.arrival-card h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  color: var(--white); margin: 16px 0 12px;
}
.arrival-card p { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.75; margin: 0; }
.arrival-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(196,148,69,0.15); border: 1px solid rgba(196,148,69,0.3);
  display: grid; place-items: center;
}
.arrival-icon svg { width: 22px; height: 22px; stroke: var(--gold); }

/* ── Climate grid (contact page) ─────────────────────────── */
.climate-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.climate-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-sm);
}
.climate-card h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  color: var(--maroon); margin: 0 0 12px;
}
.climate-card p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0; }

/* ── Utility ─────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* ── Responsive: new components ─────────────────────────── */
@media (max-width: 1100px) {
  .calendly-cards { grid-template-columns: repeat(2, 1fr); }
  .accred-grid { justify-content: flex-start; overflow-x: auto; }
  .accred-badge { flex: 0 0 auto; }
  .arrival-grid, .climate-grid { grid-template-columns: repeat(2, 1fr); }
  .courses-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .course-list-card { grid-template-columns: 140px 1fr auto; }
  .course-list-actions { min-width: 150px; padding: 16px; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .step-card:nth-child(2) { border-right: 0; }
  .step-card:nth-child(3) { border-right: 1px solid var(--border); border-top: 1px solid var(--border); }
  .step-card:nth-child(4) { border-right: 0; border-top: 1px solid var(--border); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-detail-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-detail-grid { grid-template-columns: 1fr; }
  .featured-post { grid-template-columns: 1fr; }
  .featured-post-img { min-height: 280px; }
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
}

/* ── Responsive: 1020px ──────────────────────────────────── */
@media (max-width: 1020px) {
  .top-strip { justify-content: flex-start; overflow-x: auto; }
  .nav-shell { grid-template-columns: auto 1fr auto auto; }
  .menu-toggle { display: inline-grid; justify-self: end; }

  .site-nav {
    position: absolute; top: 100%; left: 24px; right: 24px;
    display: none; grid-template-columns: 1fr; align-items: stretch;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open { display: grid; }
  .site-nav a { border-radius: var(--radius); }

  /* Cart + language relocate INTO the hamburger menu (moved by site.js) and
     render as full-width menu rows. */
  .site-nav > .lang-pick { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
  .site-nav > .lang-pick,
  .site-nav > .cart-link { width: 100%; }
  .site-nav > .cart-link {
    height: auto; display: flex; align-items: center; gap: 12px;
    justify-content: flex-start; border-color: transparent; background: transparent;
    border-radius: var(--radius); padding: 11px 13px;
    color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  }
  .site-nav > .cart-link:hover { background: var(--light-bg); color: var(--maroon); }
  .site-nav > .cart-link svg { width: 20px; height: 20px; }
  .site-nav > .cart-link .cart-link-text { display: inline; }
  .site-nav > .cart-link [data-cart-count] { position: static; top: auto; right: auto; margin-left: auto; }
  .site-nav > .lang-pick .lang-pick-btn {
    width: 100%; justify-content: flex-start; gap: 10px;
    border-radius: var(--radius); padding: 11px 13px;
  }
  .site-nav > .lang-pick .lang-pick-btn span#lang-pick-label { display: inline; }
  .site-nav > .lang-pick .lang-pick-drop {
    position: static; right: auto; margin-top: 6px; width: 100%;
    box-shadow: none; max-height: 240px; overflow-y: auto;
  }

  .hero-inner, .split-grid, .image-copy,
  .detail-layout, .store-layout, .checkout-layout, .contact-layout, .faq-layout {
    grid-template-columns: 1fr;
  }
  .trust-grid, .post-grid, .teacher-grid,
  .value-grid, .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .booking-panel, .cart-summary, .checkout-cart, .checkout-form { position: static; }
  .image-copy-content { padding: 80px 48px; }
  .image-copy-media img { min-height: 440px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .hero-panel { gap: 0; }
  .hero-panel div { padding: 0 28px; }
}

@media (max-width: 1020px) {
  .course-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .gallery-item--wide { grid-column: span 2; grid-row: span 1; }
  .cert-preview-layout { grid-template-columns: 1fr; }
  .schedule-grid { grid-template-columns: 1fr; }
  .schedule-block:nth-child(even) { padding-left: 0; border-left: 0; }
  .schedule-block:nth-child(odd) { padding-right: 0; }
}

/* ── Responsive: 720px ───────────────────────────────────── */
@media (max-width: 720px) {
  .container, .nav-shell, .footer-inner, .footer-bottom {
    width: min(100% - 32px, var(--container));
  }
  .top-strip { gap: 18px; font-size: 11.5px; }
  .nav-shell { min-height: 68px; gap: 10px; }
  .nav-badges { display: none; }
  .brand { min-width: 0; }
  .brand img { width: 40px; height: 40px; }
  .brand strong { font-size: 18px; }
  .brand small { display: none; }

  .hero { height: auto; min-height: 420px; }
  .hero-inner { padding: 40px 20px 20px; }
  .hero-inner { padding: 44px 0 34px; }
  .hero-accred { padding: 16px 18px; gap: 14px; }
  .hero-accred-logo { height: 44px; }
  .hero-accred-divider { display: none; }
  .hero-ya-divider { display: none; }
  .hero-ya-bar { padding: 12px 0; }
  .hero-copy h1, .page-hero h1 { font-size: 44px; line-height: 1.02; }
  .hero-copy p, .page-hero p { font-size: 16px; }

  .hero-panel {
    flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 44px; padding-top: 28px; gap: 0;
  }
  .hero-panel div {
    width: 50%; padding: 16px 20px;
    border-right: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .hero-panel div:nth-child(2n) { border-right: 0; }
  .hero-panel div:nth-child(3), .hero-panel div:nth-child(4) { border-bottom: 0; }

  .section { padding: 48px 0; }
  h2 { font-size: 36px; }
  h3 { font-size: 22px; }

  .section-heading, .toolbar, .ecommerce-callout, .final-cta-inner {
    display: grid; grid-template-columns: 1fr; align-items: start;
  }
  .toolbar { gap: 14px; }
  .search-box { min-width: 0; width: 100%; }

  .hero-panel, .trust-grid, .post-grid, .product-grid,
  .teacher-grid, .value-grid, .testimonial-grid, .contact-cards, .two-column-list,
  .course-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .batch-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .batch-row em { text-align: left; }
  .course-facts div { grid-template-columns: 1fr; gap: 2px; }
  .checkout-line { grid-template-columns: 70px 1fr; }
  .checkout-line .text-button { grid-column: 2; }
  .footer-inner, .footer-bottom { grid-template-columns: 1fr; }
  .footer-bottom { display: grid; }
  .arrival-grid, .climate-grid, .calendly-cards { grid-template-columns: 1fr; }
  /* Stack as plain blocks so the Filters button sits cleanly above the
     toolbar (count + grid/list selector) and the cards — no grid overlap. */
  .courses-layout { display: block; }

  /* Mobile: filters collapse into a compact button that opens a dropdown panel */
  .courses-sidebar {
    position: relative; display: block; border: 0; box-shadow: none;
    background: transparent; border-radius: 0; overflow: visible;
    margin: 0 0 16px; padding: 0; z-index: 40;
  }
  .sf-toggle { display: flex; }
  .sf-panel {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
    max-height: 74vh; overflow-y: auto;
  }
  .courses-sidebar.is-open .sf-panel { display: block; animation: coFade .18s ease; }
  .course-list-card { grid-template-columns: 1fr; }
  .course-list-thumb { height: 200px; }
  .course-list-actions { border-top: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; align-items: center; }
  .course-gallery { grid-template-columns: 1fr 1fr; }
  .gallery-item--wide { grid-column: span 2; }
  .category-header { flex-direction: column; align-items: flex-start; }
  .why-grid, .values-grid { grid-template-columns: 1fr; }
  .why-section { background-attachment: scroll; padding: 72px 0; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { border-right: 0; border-bottom: 1px solid var(--border); }
  .step-card:last-child { border-bottom: 0; }
  .teacher-detail-card { grid-template-columns: 1fr; }
  .teacher-detail-img img { height: 200px; }
  .certs-band { flex-direction: column; align-items: stretch; }
  .certs-item { justify-content: flex-start; }
  .about-stats-grid { flex-direction: column; }
  .about-stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .milestone-row { grid-template-columns: 50px 14px 1fr; margin-left: -76px; }
  .milestone-list { margin-left: 40px; }
}

/* ════════════════════════════════════════════════════════════
   COLOUR THEMES
   Each theme overrides the same CSS variables used throughout.
   The rest of the stylesheet needs zero changes.
   ════════════════════════════════════════════════════════════ */

/* ── Bhagwa / Saffron (default) ──────────────────────────── */
[data-theme="bhagwa"] {
  --maroon:      #b85000;
  --maroon-dark: #8a3900;
  --maroon-deep: #4e2000;
  --gold:        #d4a020;
  --cream:       #fdf9f5;
  --ink:         #1a0c00;
  --muted:       #7a5c44;
  --border:      #e8d4c0;
  --light-bg:    #fff5ec;
  --charcoal:    #180a00;
  --bjy-from:    #1e0a00;
  --bjy-mid:     #301400;
  --bjy-to:      #180800;
  --bjy-glow:    rgba(184,80,0,.14);
  --shadow-sm:   0 2px 8px rgba(26,12,0,0.07);
  --shadow:      0 4px 20px rgba(26,12,0,0.08), 0 12px 40px rgba(26,12,0,0.06);
  --shadow-lg:   0 8px 40px rgba(26,12,0,0.14), 0 24px 64px rgba(26,12,0,0.08);
}

/* ── Deep Maroon ─────────────────────────────────────────── */
[data-theme="maroon"] {
  --maroon:      #7a2c38;
  --maroon-dark: #4e1520;
  --maroon-deep: #2e0c14;
  --gold:        #c49445;
  --cream:       #fdf8f2;
  --ink:         #1a0e12;
  --muted:       #6b595c;
  --border:      #e5d8da;
  --light-bg:    #faf0f1;
  --charcoal:    #18080c;
  --bjy-from:    #1e0b0f;
  --bjy-mid:     #2e1218;
  --bjy-to:      #1a080c;
  --bjy-glow:    rgba(122,44,56,.14);
  --shadow-sm:   0 2px 8px rgba(26,14,18,0.06);
  --shadow:      0 4px 20px rgba(26,14,18,0.07), 0 12px 40px rgba(26,14,18,0.06);
  --shadow-lg:   0 8px 40px rgba(26,14,18,0.13), 0 24px 64px rgba(26,14,18,0.08);
}

/* ── Forest ──────────────────────────────────────────────── */
[data-theme="forest"] {
  --maroon:      #2d6a4f;
  --maroon-dark: #1b4332;
  --maroon-deep: #0d2818;
  --gold:        #74a86e;
  --cream:       #f4f9f1;
  --ink:         #0e2218;
  --muted:       #4a6a55;
  --border:      #c4dfc0;
  --light-bg:    #eaf3e5;
  --charcoal:    #091810;
  --bjy-from:    #071410;
  --bjy-mid:     #0e2018;
  --bjy-to:      #06120e;
  --bjy-glow:    rgba(45,106,79,.16);
  --shadow-sm:   0 2px 8px rgba(14,34,24,0.06);
  --shadow:      0 4px 20px rgba(14,34,24,0.07), 0 12px 40px rgba(14,34,24,0.06);
  --shadow-lg:   0 8px 40px rgba(14,34,24,0.13), 0 24px 64px rgba(14,34,24,0.08);
}

/* ── Ocean ───────────────────────────────────────────────── */
[data-theme="ocean"] {
  --maroon:      #1a717e;
  --maroon-dark: #0f4e5c;
  --maroon-deep: #062e38;
  --gold:        #5bbac8;
  --cream:       #f0f8fa;
  --ink:         #062028;
  --muted:       #3a7080;
  --border:      #b4d8e4;
  --light-bg:    #e4f2f7;
  --charcoal:    #041820;
  --bjy-from:    #041420;
  --bjy-mid:     #071e2e;
  --bjy-to:      #03101a;
  --bjy-glow:    rgba(26,113,126,.16);
  --shadow-sm:   0 2px 8px rgba(6,32,40,0.06);
  --shadow:      0 4px 20px rgba(6,32,40,0.07), 0 12px 40px rgba(6,32,40,0.06);
  --shadow-lg:   0 8px 40px rgba(6,32,40,0.13), 0 24px 64px rgba(6,32,40,0.08);
}

/* ── Saffron ─────────────────────────────────────────────── */
[data-theme="saffron"] {
  --maroon:      #c4611a;
  --maroon-dark: #8f3c08;
  --maroon-deep: #4e1e02;
  --gold:        #e89f20;
  --cream:       #fdf6ec;
  --ink:         #2a1002;
  --muted:       #7a4c28;
  --border:      #f0d0a8;
  --light-bg:    #fceedd;
  --charcoal:    #1a0902;
  --bjy-from:    #1e0c02;
  --bjy-mid:     #2e1604;
  --bjy-to:      #180a02;
  --bjy-glow:    rgba(196,97,26,.16);
  --shadow-sm:   0 2px 8px rgba(42,16,2,0.06);
  --shadow:      0 4px 20px rgba(42,16,2,0.07), 0 12px 40px rgba(42,16,2,0.06);
  --shadow-lg:   0 8px 40px rgba(42,16,2,0.13), 0 24px 64px rgba(42,16,2,0.08);
}

/* ── Slate ───────────────────────────────────────────────── */
[data-theme="slate"] {
  --maroon:      #3d5a80;
  --maroon-dark: #263d5a;
  --maroon-deep: #14243a;
  --gold:        #7fafd4;
  --cream:       #f3f6fa;
  --ink:         #121e2a;
  --muted:       #566e84;
  --border:      #c0d2e4;
  --light-bg:    #e6edf5;
  --charcoal:    #0c141e;
  --bjy-from:    #0a121c;
  --bjy-mid:     #101c2a;
  --bjy-to:      #080e18;
  --bjy-glow:    rgba(61,90,128,.16);
  --shadow-sm:   0 2px 8px rgba(18,30,42,0.06);
  --shadow:      0 4px 20px rgba(18,30,42,0.07), 0 12px 40px rgba(18,30,42,0.06);
  --shadow-lg:   0 8px 40px rgba(18,30,42,0.13), 0 24px 64px rgba(18,30,42,0.08);
}

/* ── Indigo ──────────────────────────────────────────────── */
[data-theme="indigo"] {
  --maroon:      #4a3b8c;
  --maroon-dark: #2d2060;
  --maroon-deep: #180e3a;
  --gold:        #9b8ed4;
  --cream:       #f5f3fb;
  --ink:         #130c26;
  --muted:       #5c5080;
  --border:      #cac4e8;
  --light-bg:    #eceaf8;
  --charcoal:    #0c0820;
  --bjy-from:    #0a061c;
  --bjy-mid:     #100c28;
  --bjy-to:      #080418;
  --bjy-glow:    rgba(74,59,140,.16);
  --shadow-sm:   0 2px 8px rgba(19,12,38,0.06);
  --shadow:      0 4px 20px rgba(19,12,38,0.07), 0 12px 40px rgba(19,12,38,0.06);
  --shadow-lg:   0 8px 40px rgba(19,12,38,0.13), 0 24px 64px rgba(19,12,38,0.08);
}

/* ── Rose ────────────────────────────────────────────────── */
[data-theme="rose"] {
  --maroon:      #a63d5e;
  --maroon-dark: #7a2444;
  --maroon-deep: #3e0e24;
  --gold:        #e89ab4;
  --cream:       #fdf4f7;
  --ink:         #280a16;
  --muted:       #7a4a58;
  --border:      #f0c8d8;
  --light-bg:    #fce8f0;
  --charcoal:    #1a0610;
  --bjy-from:    #1c080e;
  --bjy-mid:     #28101a;
  --bjy-to:      #16060c;
  --bjy-glow:    rgba(166,61,94,.16);
  --shadow-sm:   0 2px 8px rgba(40,10,22,0.06);
  --shadow:      0 4px 20px rgba(40,10,22,0.07), 0 12px 40px rgba(40,10,22,0.06);
  --shadow-lg:   0 8px 40px rgba(40,10,22,0.13), 0 24px 64px rgba(40,10,22,0.08);
}

/* ── Terracotta ──────────────────────────────────────────── */
[data-theme="terracotta"] {
  --maroon:      #b5543a;
  --maroon-dark: #8a3422;
  --maroon-deep: #4a1a0e;
  --gold:        #d4956a;
  --cream:       #fdf5f0;
  --ink:         #2a1008;
  --muted:       #7a5040;
  --border:      #f0cfc0;
  --light-bg:    #fce8e0;
  --charcoal:    #1a0a06;
  --bjy-from:    #1c0c08;
  --bjy-mid:     #2a140e;
  --bjy-to:      #160a06;
  --bjy-glow:    rgba(181,84,58,.16);
  --shadow-sm:   0 2px 8px rgba(42,16,8,0.06);
  --shadow:      0 4px 20px rgba(42,16,8,0.07), 0 12px 40px rgba(42,16,8,0.06);
  --shadow-lg:   0 8px 40px rgba(42,16,8,0.13), 0 24px 64px rgba(42,16,8,0.08);
}

/* ── Midnight ────────────────────────────────────────────── */
[data-theme="midnight"] {
  --maroon:      #1e3a5f;
  --maroon-dark: #122540;
  --maroon-deep: #081428;
  --gold:        #6a9fd8;
  --cream:       #f0f4f9;
  --ink:         #080e18;
  --muted:       #3a5270;
  --border:      #b8cce0;
  --light-bg:    #e4ecf5;
  --charcoal:    #060c18;
  --bjy-from:    #050a14;
  --bjy-mid:     #08101e;
  --bjy-to:      #040810;
  --bjy-glow:    rgba(30,58,95,.16);
  --shadow-sm:   0 2px 8px rgba(8,14,24,0.06);
  --shadow:      0 4px 20px rgba(8,14,24,0.07), 0 12px 40px rgba(8,14,24,0.06);
  --shadow-lg:   0 8px 40px rgba(8,14,24,0.13), 0 24px 64px rgba(8,14,24,0.08);
}

/* ── Sage ────────────────────────────────────────────────── */
[data-theme="sage"] {
  --maroon:      #5a7a60;
  --maroon-dark: #3a5a40;
  --maroon-deep: #1e3422;
  --gold:        #9ab89e;
  --cream:       #f4f8f4;
  --ink:         #1a2a1e;
  --muted:       #5a6e5c;
  --border:      #c8dcc8;
  --light-bg:    #e8f0e8;
  --charcoal:    #101a12;
  --bjy-from:    #0e1810;
  --bjy-mid:     #142018;
  --bjy-to:      #0c140e;
  --bjy-glow:    rgba(90,122,96,.14);
  --shadow-sm:   0 2px 8px rgba(26,42,30,0.06);
  --shadow:      0 4px 20px rgba(26,42,30,0.07), 0 12px 40px rgba(26,42,30,0.06);
  --shadow-lg:   0 8px 40px rgba(26,42,30,0.13), 0 24px 64px rgba(26,42,30,0.08);
}

/* ── Burgundy ────────────────────────────────────────────── */
[data-theme="burgundy"] {
  --maroon:      #6b1f3a;
  --maroon-dark: #4a1028;
  --maroon-deep: #280812;
  --gold:        #c4a060;
  --cream:       #fdf3f6;
  --ink:         #1c0810;
  --muted:       #6a3a4a;
  --border:      #e8c8d4;
  --light-bg:    #f8e8ee;
  --charcoal:    #140610;
  --bjy-from:    #160810;
  --bjy-mid:     #200e18;
  --bjy-to:      #12060e;
  --bjy-glow:    rgba(107,31,58,.16);
  --shadow-sm:   0 2px 8px rgba(28,8,16,0.06);
  --shadow:      0 4px 20px rgba(28,8,16,0.07), 0 12px 40px rgba(28,8,16,0.06);
  --shadow-lg:   0 8px 40px rgba(28,8,16,0.13), 0 24px 64px rgba(28,8,16,0.08);
}

/* ── Bhagwa ──────────────────────────────────────────────── */
[data-theme="bhagwa"] {
  --maroon:      #e06010;
  --maroon-dark: #b84800;
  --maroon-deep: #5c2400;
  --gold:        #ffb300;
  --cream:       #fff8f0;
  --ink:         #2c1200;
  --muted:       #8c5020;
  --border:      #ffd0a0;
  --light-bg:    #fff0dc;
  --charcoal:    #1c0a00;
  --bjy-from:    #240e00;
  --bjy-mid:     #3a1800;
  --bjy-to:      #1e0a00;
  --bjy-glow:    rgba(224,96,16,.2);
  --shadow-sm:   0 2px 8px rgba(44,18,0,0.06);
  --shadow:      0 4px 20px rgba(44,18,0,0.07), 0 12px 40px rgba(44,18,0,0.06);
  --shadow-lg:   0 8px 40px rgba(44,18,0,0.13), 0 24px 64px rgba(44,18,0,0.08);
}

/* ── Light Green ─────────────────────────────────────────── */
[data-theme="lightgreen"] {
  --maroon:      #3d8b40;
  --maroon-dark: #2a6b2e;
  --maroon-deep: #143a18;
  --gold:        #7cb342;
  --cream:       #f3faf3;
  --ink:         #142018;
  --muted:       #4a6e4c;
  --border:      #c0dcc0;
  --light-bg:    #e4f4e4;
  --charcoal:    #0c180e;
  --bjy-from:    #0a160c;
  --bjy-mid:     #101e12;
  --bjy-to:      #08120a;
  --bjy-glow:    rgba(61,139,64,.14);
  --shadow-sm:   0 2px 8px rgba(20,32,24,0.06);
  --shadow:      0 4px 20px rgba(20,32,24,0.07), 0 12px 40px rgba(20,32,24,0.06);
  --shadow-lg:   0 8px 40px rgba(20,32,24,0.13), 0 24px 64px rgba(20,32,24,0.08);
}

/* ── Nirankari ───────────────────────────────────────────── */
[data-theme="nirankari"] {
  --maroon:      #1565c0;
  --maroon-dark: #0d47a1;
  --maroon-deep: #062070;
  --gold:        #42a5f5;
  --cream:       #f0f5ff;
  --ink:         #060e28;
  --muted:       #3a5a8c;
  --border:      #b0cce8;
  --light-bg:    #deeaf8;
  --charcoal:    #040c20;
  --bjy-from:    #040a1c;
  --bjy-mid:     #060e28;
  --bjy-to:      #030818;
  --bjy-glow:    rgba(21,101,192,.16);
  --shadow-sm:   0 2px 8px rgba(6,14,40,0.06);
  --shadow:      0 4px 20px rgba(6,14,40,0.07), 0 12px 40px rgba(6,14,40,0.06);
  --shadow-lg:   0 8px 40px rgba(6,14,40,0.13), 0 24px 64px rgba(6,14,40,0.08);
}

/* ── Sanatan ─────────────────────────────────────────────── */
[data-theme="sanatan"] {
  --maroon:      #c8440c;
  --maroon-dark: #9a2e00;
  --maroon-deep: #501800;
  --gold:        #ff8f00;
  --cream:       #fff8f0;
  --ink:         #280c00;
  --muted:       #7a4020;
  --border:      #f4cca8;
  --light-bg:    #fce8d4;
  --charcoal:    #180800;
  --bjy-from:    #1c0c00;
  --bjy-mid:     #2c1400;
  --bjy-to:      #160a00;
  --bjy-glow:    rgba(200,68,12,.18);
  --shadow-sm:   0 2px 8px rgba(40,12,0,0.06);
  --shadow:      0 4px 20px rgba(40,12,0,0.07), 0 12px 40px rgba(40,12,0,0.06);
  --shadow-lg:   0 8px 40px rgba(40,12,0,0.13), 0 24px 64px rgba(40,12,0,0.08);
}

/* ── Copper ──────────────────────────────────────────────── */
[data-theme="copper"] {
  --maroon:      #a0622a;
  --maroon-dark: #784018;
  --maroon-deep: #402008;
  --gold:        #d4a060;
  --cream:       #fdf8f0;
  --ink:         #281404;
  --bjy-from:    #1e1006;
  --bjy-mid:     #2c1a0a;
  --bjy-to:      #180e04;
  --bjy-glow:    rgba(160,98,42,.16);
  --muted:       #7a5830;
  --border:      #f0d8b8;
  --light-bg:    #faecd8;
  --charcoal:    #180c04;
  --shadow-sm:   0 2px 8px rgba(40,20,4,0.06);
  --shadow:      0 4px 20px rgba(40,20,4,0.07), 0 12px 40px rgba(40,20,4,0.06);
  --shadow-lg:   0 8px 40px rgba(40,20,4,0.13), 0 24px 64px rgba(40,20,4,0.08);
}

/* ── Theme Switcher UI ───────────────────────────────────── */
.theme-switcher {
  position: fixed;
  top: 96px;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.theme-toggle-btn {
  height: 44px;
  padding: 0 16px 0 18px;
  border-radius: 8px 0 0 8px;
  border: none;
  background: var(--maroon-dark);
  color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  box-shadow: -3px 3px 16px rgba(0,0,0,0.22);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: var(--maroon-deep);
  padding-left: 22px;
  box-shadow: -4px 4px 22px rgba(0,0,0,0.3);
}
.theme-toggle-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.theme-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16);
  animation: theme-panel-in 0.18s ease;
}
@keyframes theme-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.theme-panel-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.theme-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 6px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.theme-swatch-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.theme-swatch-dot::after {
  content: '✓';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s;
}
.theme-swatch.is-active .theme-swatch-dot::after { opacity: 1; }
.theme-swatch-name {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.theme-swatch:hover {
  background: var(--light-bg);
  border-color: var(--border);
}
.theme-swatch.is-active {
  border-color: var(--maroon);
  background: var(--light-bg);
}
.theme-swatch.is-active .theme-swatch-name { color: var(--maroon); font-weight: 600; }

@media (max-width: 600px) {
  .theme-switcher { top: 80px; right: 0; }
}

/* ── Course Syllabus ─────────────────────────────────────── */
.syllabus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 760px) { .syllabus-grid { grid-template-columns: 1fr; } }
.syllabus-module { background: var(--white); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition); }
.syllabus-module:hover { border-left-color: var(--maroon); }
.syllabus-module[open] { border-left-color: var(--maroon); }
.syllabus-module summary { cursor: pointer; list-style: none; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; }
.syllabus-module summary::-webkit-details-marker { display: none; }
.syllabus-module summary::after { content: '+'; width: 26px; height: 26px; border-radius: 50%; background: var(--light-bg); border: 1px solid var(--border); display: grid; place-items: center; font-size: 17px; color: var(--maroon); flex: 0 0 auto; }
.syllabus-module[open] summary::after { content: '−'; background: var(--maroon); border-color: var(--maroon); color: #fff; }
.syllabus-module-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.syllabus-module-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--maroon); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.syllabus-module-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.syllabus-module-body { padding: 0 22px 18px; border-top: 1px solid var(--border); }
.syllabus-desc { font-size: 14px; color: var(--muted); margin: 14px 0 10px; line-height: 1.65; }
.syllabus-topics { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; }
.syllabus-topics li { font-size: 13.5px; color: var(--muted); padding-left: 14px; position: relative; line-height: 1.5; }
.syllabus-topics li::before { content: '›'; position: absolute; left: 0; color: var(--maroon); font-weight: 700; }
/* HTML-authored topics (rich content) → normal list, not the 2-col grid */
.syllabus-topics.rich-content { display: block; margin: 12px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.syllabus-topics.rich-content ul, .syllabus-topics.rich-content ol { margin: 6px 0; padding-left: 20px; display: block; }
.syllabus-topics.rich-content li { display: list-item; padding-left: 0; margin-bottom: 4px; }
.syllabus-topics.rich-content li::before { content: none; }

/* ── Sattvic Meals section ───────────────────────────────── */
.meal-feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px; }
.meal-feature-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.meal-feature-icon { font-size: 28px; flex: 0 0 auto; }
.meal-feature-card strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.meal-feature-card p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }
.meal-menu-sample { background: var(--light-bg); border-radius: var(--radius); padding: 24px; }
.meal-menu-sample h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 16px; }
.meal-menu-row { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; gap: 20px; align-items: baseline; }
.meal-menu-row:last-child { border-bottom: 0; }
.meal-menu-row strong { flex: 0 0 160px; font-size: 14px; color: var(--ink); }
.meal-menu-row span { font-size: 14px; color: var(--muted); }
.meal-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.meal-photo-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.meal-photo-item img { width: 100%; height: 100%; object-fit: cover; }
.meal-photo-item span { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: 12.5px; font-weight: 600; }

/* ── Policy pages ────────────────────────────────────────── */
.page-hero--short {
  min-height: 300px; padding: 96px 0 64px;
  position: relative;
  background-color: #3a2316;            /* fallback tone so the title is always readable */
}
/* Dark gradient overlay so the white title reads over any image */
.page-hero--short::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(30,15,8,.34) 0%, rgba(30,15,8,.66) 100%);
}
/* Hero text container — was unstyled, so the title sat at the page edge with no overlay */
.page-hero .hero-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 1180px;
  margin: 0 auto; padding: 0 32px;
  align-self: end;
}
.page-hero .hero-content h1 { color: #fff; }
.page-hero .hero-content p { color: rgba(255,255,255,.92); max-width: 640px; }
@media (max-width: 700px) { .page-hero .hero-content { padding: 0 20px; } }
.policy-layout { display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: start; }
.policy-body { max-width: 720px; }
.policy-body h2 { font-size: 20px; margin: 40px 0 12px; color: var(--ink); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.policy-body p, .policy-body li { font-size: 15.5px; color: var(--muted); line-height: 1.78; }
.policy-body ul { padding-left: 20px; margin: 12px 0; }
.policy-body li { margin-bottom: 6px; }
.policy-body a { color: var(--maroon); text-decoration: underline; }
.policy-body strong { color: var(--ink); }
.policy-updated { font-size: 13px; color: var(--muted); font-style: italic; margin-bottom: 24px; }
.policy-body h3 { font-size: 16px; margin: 24px 0 8px; color: var(--ink); }
.policy-body ol { margin: 8px 0 8px 0; padding-left: 20px; }
.policy-body ol li { margin-bottom: 8px; line-height: 1.7; }
.policy-callout { background: var(--light-bg, #f7f5f0); border-left: 3px solid var(--maroon); border-radius: 8px; padding: 16px 18px; margin: 22px 0; font-size: 15px; line-height: 1.7; }
.policy-callout a { color: var(--maroon); font-weight: 600; }
.policy-callout--warn { background: #fdf6ec; border-left-color: #c98a1e; }
.policy-table { overflow-x: auto; margin: 20px 0; }
.policy-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.policy-table th { background: var(--maroon-dark); color: #fff; padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 600; }
.policy-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.policy-table tr:last-child td { border-bottom: 0; }
.policy-table tr:nth-child(even) td { background: var(--light-bg); }
.policy-sidebar { position: sticky; top: 90px; }
.policy-nav { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.policy-nav h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 12px; }
.policy-nav ul { margin: 0; padding: 0; list-style: none; }
.policy-nav li { border-bottom: 1px solid var(--border); }
.policy-nav li:last-child { border-bottom: 0; }
.policy-nav a { display: block; padding: 9px 0; font-size: 14px; color: var(--muted); }
.policy-nav li.active a { color: var(--maroon); font-weight: 600; }
.policy-contact-card { background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.policy-contact-card h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.policy-contact-card p { font-size: 13.5px; color: var(--muted); margin: 0; }
/* ── WhatsApp button + floating chat ─────────────────────── */
.btn-whatsapp { background: #25D366; color: #fff; border-color: #25D366; }
.btn-whatsapp:hover { background: #1ebe5d; border-color: #1ebe5d; color: #fff; }
.btn-whatsapp .wa-icon { width: 20px; height: 20px; fill: #fff; stroke: none; }

.wa-icon { fill: currentColor; stroke: none; }

.wa-widget { position: fixed; right: 22px; bottom: 22px; z-index: 900; }
.wa-float {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: #25D366; color: #fff; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(37,211,102,0.5); color: #fff; }
.wa-float .wa-icon { width: 34px; height: 34px; fill: #fff; stroke: none; }

/* Chat popup panel */
.wa-panel {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: 300px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.26);
  opacity: 0; transform: translateY(12px) scale(.96); transform-origin: bottom right;
  pointer-events: none; transition: opacity .2s, transform .2s;
}
.wa-widget.is-open .wa-panel { opacity: 1; transform: none; pointer-events: auto; }
.wa-panel-head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: #075E54; color: #fff; }
.wa-panel-avatar { width: 42px; height: 42px; border-radius: 50%; background: #25D366; display: grid; place-items: center; flex: 0 0 auto; }
.wa-panel-avatar .wa-icon { width: 24px; height: 24px; fill: #fff; }
.wa-panel-id { flex: 1; min-width: 0; }
.wa-panel-id strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.wa-panel-id span { font-size: 12px; color: rgba(255,255,255,.82); }
.wa-panel-close { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 2px; }
.wa-panel-close:hover { opacity: 1; }
.wa-panel-body { padding: 20px 16px; background: #ECE5DD; }
.wa-bubble { background: #fff; border-radius: 2px 12px 12px 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #333; box-shadow: 0 1px 2px rgba(0,0,0,.12); max-width: 92%; }
.wa-panel-cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; background: #25D366; color: #fff; font-weight: 700; font-size: 14.5px; text-decoration: none; letter-spacing: .01em; }
.wa-panel-cta .wa-icon { width: 22px; height: 22px; fill: #fff; }
.wa-panel-cta:hover { background: #1ebe5d; color: #fff; }
@media (max-width: 640px) {
  .wa-widget { right: 16px; bottom: 16px; }
  .wa-float { width: 54px; height: 54px; }
  .wa-float .wa-icon { width: 30px; height: 30px; }
}

.footer-policy-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-policy-links a { color: rgba(255,255,255,0.82); font-size: 12.5px; }
.footer-policy-links a:hover { color: #fff; }

/* ── New sections responsive ─────────────────────────────── */
@media (max-width: 1020px) {
  .batch-calendar-layout { grid-template-columns: 1fr; }
  .batch-dates-grid { grid-template-columns: repeat(2, 1fr); }
  .special-sessions-grid { grid-template-columns: repeat(2, 1fr); }
  .inc-grid { grid-template-columns: 1fr; }
  .inc-item { border-right: none; }
}
@media (max-width: 720px) {
  .course-timeline { grid-template-columns: 1fr; }
  .ctl-photo { width: 100px; }
  .batch-dates-grid { grid-template-columns: 1fr 1fr; }
  .bfs-shared-row { grid-template-columns: 1fr; }
  .special-sessions-grid { grid-template-columns: 1fr; }
  .bp-from-value { font-size: 26px; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-sidebar { position: static; }
  .footer-policy-links { flex-direction: column; gap: 8px; }
  .inc-tabs-wrap { gap: 0; }
  .inc-tab { padding: 12px 14px; font-size: 11px; }
}

/* ── Hero course badge ──────────────────────────────────────── */
.hero-course-badge {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 4;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.hero-course-badge img {
  height: 52px;
  width: auto;
  display: block;
  filter: brightness(1.15) drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
@media (max-width: 720px) {
  .hero-course-badge { bottom: 14px; right: 14px; padding: 8px 10px; }
  .hero-course-badge img { height: 38px; }
}

/* ── Google Reviews section ─────────────────────────────────── */
.google-rating-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  flex-shrink: 0;
}
.gr-stars { font-size: 18px; color: #fbbc05; line-height: 1; }
.gr-score { font-size: 13px; color: var(--muted); margin-top: 2px; }
.gr-score span { color: #4285f4; font-weight: 600; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.review-card {
  background: #fff;
  border: 1px solid #ece9e3;
  border-radius: 14px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .2s, transform .2s;
}
.review-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.09); transform: translateY(-2px); }
.review-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.review-card-top > div:nth-child(2) { flex: 1; }
.review-card-top strong { display: block; font-size: 14.5px; color: var(--dark); }
.review-card-top span { font-size: 12px; color: var(--muted); }
.review-stars { font-size: 13px; color: #fbbc05; flex-shrink: 0; margin-top: 2px; }
.review-card p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; flex: 1; }
.review-card p::before { content: '"'; }
.review-card p::after { content: '"'; }
.review-tag {
  display: inline-block;
  background: rgba(196,148,69,.12);
  color: #9a6b20;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  align-self: flex-start;
}
.review-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color .2s;
}
.btn-ghost:hover { color: var(--dark); }

/* ── Video Reviews section ──────────────────────────────────── */
/* ── Video Review Cards ─────────────────────────────────────── */
.vr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ── Reviews: tabs + carousel ────────────────────────────────── */
.rv-tabs {
  display: flex; gap: 8px; justify-content: center;
  margin: 8px 0 26px; flex-wrap: wrap;
}
.rv-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff;
  color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.rv-tab:hover { color: var(--maroon-dark); border-color: var(--maroon); }
.rv-tab--active {
  background: var(--maroon-dark); border-color: var(--maroon-dark); color: #fff;
  box-shadow: 0 6px 18px rgba(138,57,0,.25);
}
/* Keep the selected tab legible on hover — the generic :hover rule above turned
   its white label maroon-on-maroon, which read as a blank button. */
.rv-tab--active:hover { color: #fff; border-color: var(--maroon-dark); }

/* ── Certification: how you qualify / class size / after-course support ── */
.cert-assurance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-top: 44px;
}
.cert-assurance-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px 26px;
}
.cert-assurance-card h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; margin: 0 0 14px; color: var(--ink);
}
.cert-assurance-card h3 svg { flex: 0 0 auto; color: var(--gold); }
.cert-assurance-card p { color: var(--muted); font-size: 14.5px; line-height: 1.75; margin: 0; }
.cert-assurance-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cert-assurance-card li {
  position: relative; padding-left: 18px;
  color: var(--muted); font-size: 14.5px; line-height: 1.65;
}
.cert-assurance-card li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.bp-dep-sep { opacity: .45; font-weight: 400; }

/* "24 days" means what exactly? — calendar days vs training days vs nights */
.duration-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 20px; padding: 12px 16px;
  background: var(--light-bg); border-left: 3px solid var(--gold);
  border-radius: 8px;
  font-size: 14px; line-height: 1.65; color: var(--muted);
}
.duration-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--gold); }
.rv-panel[hidden] { display: none; }
.rv-carousel-wrap { position: relative; display: flex; align-items: center; }
.rv-carousel {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding: 6px 2px 10px; flex: 1; min-width: 0;
}
.rv-carousel::-webkit-scrollbar { display: none; }
.rv-carousel > .review-card { flex: 0 0 clamp(280px, 32%, 360px); scroll-snap-align: start; }
.rv-carousel > .vr-card { flex: 0 0 clamp(260px, 30%, 340px); scroll-snap-align: start; }
.rv-arrow {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #fff; border: 1px solid var(--border); color: var(--maroon-dark);
  box-shadow: 0 4px 16px rgba(0,0,0,.1); z-index: 2;
  transition: background .15s, color .15s, opacity .15s, transform .15s;
}
.rv-arrow:hover { background: var(--maroon-dark); color: #fff; transform: translateY(-1px); }
.rv-arrow--prev { margin-right: 8px; }
.rv-arrow--next { margin-left: 8px; }
.rv-arrow:disabled { opacity: .32; cursor: default; pointer-events: none; }
.rv-viewall { text-align: center; margin-top: 26px; }
@media (max-width: 760px) {
  .rv-arrow { display: none; }
  .rv-carousel > .review-card { flex-basis: 84%; }
  .rv-carousel > .vr-card { flex-basis: 78%; }
}
.vr-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ece9e3;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  cursor: pointer;
  transition: box-shadow .25s, transform .25s;
}
.vr-card:hover { box-shadow: 0 10px 36px rgba(0,0,0,.14); transform: translateY(-3px); }

/* Thumbnail */
.vr-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.vr-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.vr-card:hover .vr-thumb img { transform: scale(1.05); }

/* Dark overlay — hidden until hover */
.vr-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s;
}
.vr-card:hover .vr-overlay { background: rgba(0,0,0,.45); }

/* Play button circle */
.vr-play-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2.5px solid rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s, border-color .25s;
  backdrop-filter: blur(4px);
}
.vr-card:hover .vr-play-btn {
  background: var(--maroon);
  border-color: var(--maroon);
  transform: scale(1.12);
}
.vr-play-btn svg { margin-left: 4px; /* optical centre for play icon */ }

/* Card info strip */
.vr-info {
  padding: 14px 16px;
  border-top: 1px solid #f0ebe3;
}
.vr-name {
  display: block; font-size: 14px; font-weight: 700;
  color: var(--ink); margin-bottom: 3px;
}
.vr-title {
  display: block; font-size: 12.5px; color: var(--muted);
}

/* ── Shorts-style vertical video cards (Reviews → YouTube tab) ── */
.rv-carousel > .vr-card {
  flex: 0 0 clamp(198px, 21%, 244px);
  position: relative;
  aspect-ratio: 9 / 16;
  border: none; border-radius: 16px;
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
  background: #111;
}
.rv-carousel .vr-thumb {
  position: absolute; inset: 0;
  aspect-ratio: auto; width: 100%; height: 100%;
}
.rv-carousel .vr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-carousel .vr-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 26%, transparent 52%, rgba(0,0,0,.78) 100%);
}
.rv-carousel .vr-card:hover .vr-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 26%, transparent 48%, rgba(0,0,0,.82) 100%);
}
/* Red YouTube play button */
.rv-carousel .vr-play-btn {
  width: 60px; height: 42px; border-radius: 12px;
  background: #ff0000; border: none; backdrop-filter: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.rv-carousel .vr-card:hover .vr-play-btn { background: #ff0000; transform: scale(1.1); }
.rv-carousel .vr-play-btn svg { width: 24px; height: 24px; margin-left: 2px; fill: #fff; }
/* Name/title overlaid at the bottom */
.rv-carousel .vr-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 14px 14px 15px; border-top: none;
}
.rv-carousel .vr-name { color: #fff; font-size: 13.5px; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,.65); }
.rv-carousel .vr-title { color: rgba(255,255,255,.82); font-size: 11.5px; text-shadow: 0 1px 6px rgba(0,0,0,.65); }
@media (max-width: 760px) {
  .rv-carousel > .vr-card { flex-basis: 58%; }
}

/* Shorts-style grid (reviews page — shows all videos as portrait tiles) */
.vr-grid--shorts { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.vr-grid--shorts .vr-card {
  position: relative; aspect-ratio: 9 / 16;
  border: none; border-radius: 16px; background: #111;
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
}
.vr-grid--shorts .vr-thumb { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.vr-grid--shorts .vr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vr-grid--shorts .vr-overlay { background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 26%, transparent 52%, rgba(0,0,0,.78) 100%); }
.vr-grid--shorts .vr-play-btn { width: 56px; height: 40px; border-radius: 12px; background: #ff0000; border: none; backdrop-filter: none; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.vr-grid--shorts .vr-play-btn svg { width: 22px; height: 22px; margin-left: 2px; fill: #fff; }
.vr-grid--shorts .vr-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 12px 13px; border-top: none; }
.vr-grid--shorts .vr-name { color: #fff; font-size: 13px; text-shadow: 0 1px 6px rgba(0,0,0,.65); }
.vr-grid--shorts .vr-title { color: rgba(255,255,255,.82); font-size: 11px; text-shadow: 0 1px 6px rgba(0,0,0,.65); }

/* ── Lightbox ───────────────────────────────────────────────── */
.vr-lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.88);
  align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s;
}
.vr-lightbox.vr-lb--open {
  display: flex;
  animation: vr-fade-in .25s forwards;
}
@keyframes vr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.vr-lb-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: 50%;
  transition: background .2s;
  z-index: 1;
}
.vr-lb-close:hover { background: rgba(255,255,255,.12); }

.vr-lb-inner {
  width: 100%; max-width: 900px;
  animation: vr-slide-up .3s ease;
}
@keyframes vr-slide-up {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.vr-lb-video {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.vr-lb-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.vr-lb-meta {
  margin-top: 16px;
  text-align: center;
}
.vr-lb-meta strong {
  display: block; color: #fff;
  font-size: 16px; font-weight: 700;
}
.vr-lb-meta span {
  display: block; color: rgba(255,255,255,.55);
  font-size: 13px; margin-top: 4px;
}

@media (max-width: 1020px) {
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .vr-grid { grid-template-columns: repeat(2, 1fr); }
  .google-rating-badge { display: none; }
}
@media (max-width: 680px) {
  .review-grid { grid-template-columns: 1fr; }
  .vr-grid { grid-template-columns: 1fr; }
}

/* ── Course quick-facts pill strip (below hero) ─────────────── */
.course-pill-strip {
  background: #faf8f4;
  border-bottom: 1px solid #e8e4dc;
  padding: 14px 0;
}
.course-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #e0dbd2;
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-size: 13px;
  color: var(--dark);
  white-space: nowrap;
}
.cpill--accent {
  background: rgba(196,148,69,.1);
  border-color: rgba(196,148,69,.35);
  color: #7a5010;
}
.cpill--deposit {
  background: rgba(107,26,26,.07);
  border-color: rgba(107,26,26,.2);
  color: #6b1a1a;
}
.cpill-icon { color: var(--muted); flex-shrink: 0; }
.cpill--accent .cpill-icon { color: #b07820; }
.cpill--deposit .cpill-icon { color: #8b2222; }
.cpill-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-right: 2px;
}
.cpill--accent .cpill-label { color: #a06020; }
.cpill--deposit .cpill-label { color: #8b2222; }
.cpill-val {
  font-weight: 600;
  font-size: 13px;
}
.cpill-val small { font-weight: 400; font-size: 11.5px; opacity: .8; margin-left: 2px; }

/* Smaller variant for course cards — truncate long values */
.cpill--sm {
  padding: 4px 10px 4px 8px;
  font-size: 11.5px;
  white-space: normal;
  max-width: 100%;
}
.cpill--sm .cpill-label { font-size: 10px; flex-shrink: 0; }
.cpill--sm .cpill-val {
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.card-pill-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0; overflow: hidden; }

/* Booking panel pill row */
.bp-pill-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 16px 0;
  border: 1px solid rgba(196,148,69,.2);
  border-radius: 10px;
  overflow: hidden;
}
.bpill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(196,148,69,.12);
  font-size: 13px;
}
.bpill:last-child { border-bottom: none; }
.bpill-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.5);
}
.bpill-val {
  font-weight: 600;
  color: rgba(255,255,255,.9);
  font-size: 13px;
}

@media (max-width: 720px) {
  .course-pill-row { gap: 6px; }
  .cpill { font-size: 12px; padding: 5px 11px 5px 8px; }
}

/* ── Accommodation meals sub-section ───────────────────────── */
.accom-meals-strip {
  margin: 36px 0 40px;
  padding: 28px 32px;
  background: #faf8f4;
  border: 1px solid #e8e4dc;
  border-radius: 14px;
}
.accom-meals-strip h3 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--dark);
  margin: 0 0 8px;
}
.accom-meals-strip > p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 20px;
  max-width: 680px;
}
.accom-meals-strip > .rich-text {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 20px;
  max-width: 680px;
}

/* Admin rich-text blocks rendered as HTML (intro paragraphs, facilities prose) */
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child  { margin-bottom: 0; }
.rich-text p { margin: 0 0 12px; }
.rich-text h3 {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--dark);
  margin: 26px 0 10px;
}
.rich-text h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin: 20px 0 8px;
}
.rich-text ul, .rich-text ol { margin: 0 0 14px; padding-left: 20px; }
.rich-text li { margin-bottom: 6px; }
.rich-text strong, .rich-text b { color: var(--dark); font-weight: 600; }
.rich-text a { color: var(--maroon); }
.accom-prose {
  margin-top: 30px;
  max-width: 780px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.meal-menu-inline {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e0dbd2;
  border-radius: 10px;
  overflow: hidden;
  max-width: 640px;
}
.meal-menu-row {
  display: flex;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid #e8e4dc;
  font-size: 14px;
  align-items: baseline;
}
.meal-menu-row:last-child { border-bottom: none; }
.meal-menu-row strong {
  min-width: 160px;
  flex-shrink: 0;
  color: var(--dark);
  font-weight: 600;
}
.meal-menu-row span { color: var(--muted); line-height: 1.5; }
@media (max-width: 600px) {
  .accom-meals-strip { padding: 20px 18px; }
  .meal-menu-row { flex-direction: column; gap: 4px; }
  .meal-menu-row strong { min-width: unset; }
}

/* ── Section spacing ────────────────────────────────────────── */
.section--tight-top { padding-top: 40px; }

/* ── Page TOC (sticky right sidebar) ───────────────────────── */
/* Sticky horizontal section menu — sits below the hero, scrolls to sections */
.page-toc {
  position: sticky;
  top: var(--header-height);
  z-index: 40;
  background: rgba(255,240,224,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184,80,0,.18);
  opacity: 1;
  pointer-events: auto;
}
.page-toc-inner {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
  display: block;
  overflow: visible;
  background: none; border: none; box-shadow: none; border-radius: 0;
  padding: 8px 0; min-width: 0; max-width: none;
}
.page-toc-heading { display: none; }
.page-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.page-toc li { margin: 0; flex: 0 0 auto; }
.toc-link {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.25;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.toc-link:hover {
  color: var(--maroon-dark);
  background: rgba(196,148,69,.08);
}
.toc-link.toc-active {
  color: #fff;
  background: var(--maroon-dark);
  border-color: var(--maroon-dark);
  font-weight: 600;
}
/* Section anchors clear the sticky header + wrapped menu when jumped to */
section[id] { scroll-margin-top: calc(var(--header-height) + 118px); }

/* ══ Section menu — alternate display styles ═══════════════════════
   Default (.page-toc--bar) is the sticky wrapped bar above.            */

/* SIDE — a vertical panel docked in the LEFT margin, but ONLY where the margin
   is actually wide enough to hold one (>=1660px). At every narrower width this
   element is just the host for the floating button, so it must stay completely
   plain here.

   This is load-bearing: a `transform` or `backdrop-filter` on this element makes
   it the containing block for the `position: fixed` button and popup nested
   inside it. When those lived in the base rule the button was anchored to this
   box instead of the viewport — it landed in the middle of the hero on laptops
   — and the base `display: none` was never overridden below 1660px, so phones
   and tablets got no section menu at all. Keep the panel chrome scoped to the
   media query below. */
.page-toc--side { display: block; position: static; }

@media (min-width: 1660px) {
  .page-toc--side {
    position: fixed;
    /* Anchored by its RIGHT edge, always 16px clear of the container, so the
       panel grows leftwards into whatever margin the viewport actually has,
       up to 268px. */
    right: calc(50vw + (var(--container) / 2) + 16px);
    left: auto;
    width: min(268px, calc(50vw - (var(--container) / 2) - 32px));
    /* Top-anchored rather than vertically centred: a centred panel with 18
       sections opens with the first items pushed off the top of the screen. */
    top: 104px; transform: none;
    z-index: 60;
    background: rgba(255,252,248,.97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.14);
    max-height: calc(100vh - 150px);
  }
  .page-toc--side .page-toc-inner {
    display: block; width: auto; padding: 10px 8px;
    max-height: calc(100vh - 170px); overflow-y: auto;
  }
  .page-toc--side .page-toc-fab { display: none; }
}

/* Between tablet and that width there is no free margin, so the side menu
   behaves like the hamburger — a floating button, docked bottom-LEFT so it
   never covers the WhatsApp bubble or the sticky price bar on the right. */
@media (min-width: 1021px) and (max-width: 1659px) {
  .page-toc--side {
    display: block; position: static;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    width: auto; max-height: none;
  }
  .page-toc--side .page-toc-fab { display: grid; left: 24px; right: auto; bottom: 92px; }
  .page-toc--side .page-toc-inner {
    /* Anchored to the TOP, not the bottom: with 18 sections a bottom-anchored
       panel opens scrolled into the middle of the list. */
    position: fixed; left: 24px; right: auto; top: 88px; bottom: auto; z-index: 71;
    width: min(288px, calc(100vw - 48px)); max-height: calc(100vh - 180px); overflow-y: auto;
    background: rgba(255,252,248,.98);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 14px 44px rgba(0,0,0,.22);
    padding: 10px 8px;
    opacity: 0; transform: translateY(-10px) scale(.96); transform-origin: top left;
    pointer-events: none; transition: opacity .2s, transform .2s;
  }
  .page-toc--side.is-open .page-toc-inner { opacity: 1; transform: none; pointer-events: auto; }
  .page-toc--side.is-open .page-toc-fab .fab-open  { display: none; }
  .page-toc--side.is-open .page-toc-fab .fab-close { display: block; }
}
.page-toc--side .page-toc-heading,
.page-toc--hamburger .page-toc-heading {
  display: block; padding: 4px 14px 9px; margin: 0 0 6px;
  border-bottom: 1px solid #ece9e3;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.page-toc--side ul,
.page-toc--hamburger ul {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  gap: 2px; justify-content: flex-start;
}
/* Vertical panels stack their items, so a long label must WRAP. Inheriting the
   bar style's `nowrap` is what clipped labels and forced a sideways scrollbar. */
.page-toc--side .toc-link,
.page-toc--hamburger .toc-link {
  text-align: left; border-radius: 8px; padding: 8px 14px; font-size: 12.5px;
  white-space: normal; overflow-wrap: anywhere;
}

/* HAMBURGER — floating button (bottom-right) opens the menu; all sizes */
.page-toc--hamburger {
  position: static; background: none; border: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.page-toc-fab {
  position: fixed; right: 24px; bottom: 92px; z-index: 71;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--maroon-dark); color: #fff; border: none; cursor: pointer;
  display: none; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: background .18s, transform .18s;
}
.page-toc--hamburger .page-toc-fab { display: grid; }
.page-toc-fab:hover { background: var(--maroon-deep); transform: translateY(-2px); }
.page-toc-fab .fab-close { display: none; }
.page-toc--hamburger.is-open .page-toc-fab .fab-open { display: none; }
.page-toc--hamburger.is-open .page-toc-fab .fab-close { display: block; }
.page-toc--hamburger .page-toc-inner {
  position: fixed; right: 24px; bottom: 156px; z-index: 71;
  width: min(288px, calc(100vw - 48px)); max-height: 62vh; overflow-y: auto;
  background: rgba(255,252,248,.98);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.22);
  padding: 10px 8px;
  opacity: 0; transform: translateY(12px) scale(.96); transform-origin: bottom right;
  pointer-events: none; transition: opacity .2s, transform .2s;
}
.page-toc--hamburger.is-open .page-toc-inner { opacity: 1; transform: none; pointer-events: auto; }

/* ════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE FIXES
   ════════════════════════════════════════════════════════════ */

/* ── Mobile sticky booking bar ──────────────────────────────── */
.mobile-book-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: linear-gradient(160deg, #1e0b07 0%, #2e1208 50%, #1a0a06 100%);
  border-top: 1px solid rgba(196,148,69,.35);
  padding: 12px 20px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
.mbb-price { display: flex; flex-direction: column; }
.mbb-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); }
.mbb-price strong { font-size: 22px; font-weight: 700; font-family: var(--serif); color: #fff; line-height: 1.1; }
.mbb-price small { font-size: 13px; font-weight: 400; opacity: .7; }
/* Keeps "this is only the deposit" visible without making the bar taller —
   the three lines together match the old two-line height. */
.mbb-sub { font-size: 10px; letter-spacing: .04em; color: rgba(240,204,106,.75); margin-top: 1px; }
/* Batch picker under the price: a native select so phones open their own
   picker wheel/list with every open batch. */
.mbb-batch {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; margin-top: 4px; padding: 3px 20px 3px 8px;
  border: 1px solid rgba(240,204,106,.55); border-radius: 99px;
  color: #f0cc6a; background: rgba(240,204,106,.1); cursor: pointer;
}
.mbb-batch svg { flex: 0 0 auto; }
.mbb-batch select {
  appearance: none; -webkit-appearance: none; min-width: 0; max-width: 100%;
  border: 0; background: transparent; color: inherit; padding: 0; margin: 0;
  font: 600 11.5px/1.3 var(--sans); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.mbb-batch select:focus { outline: none; }
.mbb-batch:focus-within { box-shadow: 0 0 0 2px rgba(240,204,106,.5); }
.mbb-batch select option { color: #1e0b07; background: #fff; }
.mbb-batch-caret { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; pointer-events: none; }

/* ── Batch chooser sheet (mobile bar) + checkout batch cards ─────────────
   .bjy-light gives the course page's light date cards outside #sec-dates. */
.bjy-light-list { display: grid; gap: 10px; }
.bjy-light .batch-date-card { padding: 12px 14px; }
.bjy-light .batch-date-card:hover { transform: none; }
.bjy-light-more {
  justify-self: start; margin-top: 2px; padding: 9px 16px; border-radius: 99px;
  border: 1px solid #ecdcc4; background: #fff; color: var(--maroon); font: 600 13px/1 var(--sans); cursor: pointer;
}
.bsheet { position: fixed; inset: 0; z-index: 1000; }
.bsheet[hidden] { display: none; }
.bsheet-scrim { position: absolute; inset: 0; background: rgba(24,10,0,.45); }
.bsheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--cream, #fdf8f2); color: var(--ink); border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: bsheetUp .22s ease-out;
}
@keyframes bsheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.bsheet-grip { width: 40px; height: 4px; border-radius: 4px; background: #e2d3bd; margin: 0 auto 12px; }
.bsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.bsheet-head h3 { margin: 0; font-family: var(--serif); font-size: 22px; color: var(--maroon-dark); }
.bsheet-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ecdcc4; background: #fff; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; }
.bsheet-sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
button.mbb-batch { font: inherit; }
.mbb-batch-txt { font: 600 11.5px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.co-batch-cards { margin: 18px 0 6px; }
.co-batch-cards h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 20px; color: var(--maroon-dark); }
.co-batch-cards .co-batch-sub { margin: 0 0 12px; font-size: 13px; color: var(--muted); }

/* ══ ⓘ info dot + shared popup ═══════════════════════════════════════════════
   Long policy text collapses to this button; the detail opens in one modal
   reused site-wide (bindInfoDots in site.js). */
.idot-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex: 0 0 17px;
  margin-left: 6px; padding: 0;
  border: 1.5px solid currentColor; border-radius: 50%;
  background: none; color: inherit; opacity: .75;
  font: 700 11px/1 Georgia, serif; font-style: italic;
  cursor: pointer; vertical-align: middle;
  transition: opacity .15s, transform .15s;
}
.idot-btn:hover, .idot-btn:focus-visible { opacity: 1; transform: scale(1.12); }

.idot-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(20, 8, 4, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: idotFade .16s ease-out;
}
.idot-modal[hidden] { display: none; }
@keyframes idotFade { from { opacity: 0 } to { opacity: 1 } }
.idot-box {
  position: relative;
  width: 100%; max-width: 460px; max-height: 80vh; overflow-y: auto;
  padding: 26px 26px 22px;
  background: var(--card, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.idot-box:focus { outline: none; }
.idot-box h3 {
  margin: 0 30px 12px 0;
  font-family: var(--serif); font-size: 21px; line-height: 1.25;
  color: var(--heading, #2b1408);
}
.idot-body p {
  margin: 0 0 11px;
  font-size: 15px; line-height: 1.62; color: var(--muted, #5b4a40);
}
.idot-body p:last-child { margin-bottom: 0; }
.idot-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .05); color: var(--heading, #2b1408);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.idot-close:hover { background: rgba(0, 0, 0, .1); }

/* Phones: a bottom sheet is easier to reach than a centred card */
@media (max-width: 560px) {
  .idot-modal { align-items: flex-end; padding: 0; }
  .idot-box {
    max-width: none; max-height: 78vh;
    border-radius: 18px 18px 0 0;
    padding: 24px 20px calc(22px + env(safe-area-inset-bottom));
    animation: idotSheet .2s ease-out;
  }
  @keyframes idotSheet { from { transform: translateY(28px) } to { transform: none } }
}
.mbb-btn {
  background: linear-gradient(135deg, #b8832e 0%, #d4a84b 40%, #f0cc6a 65%, #d4a84b 100%) !important;
  color: #1a0906 !important;
  font-weight: 700 !important;
  padding: 13px 24px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 18px rgba(196,148,69,.5) !important;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 14px;
}

/* ── 1100px: tablet landscape ───────────────────────────────── */
@media (max-width: 1100px) {
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .video-review-grid { grid-template-columns: repeat(2, 1fr); }
  .course-pill-row { gap: 7px; }
}

/* ── 1020px: tablet portrait ────────────────────────────────── */
@media (max-width: 1020px) {
  /* Pill strip: allow horizontal scroll on narrow viewports */
  .course-pill-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .course-pill-row { flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .course-pill-row::-webkit-scrollbar { display: none; }
  .cpill { flex-shrink: 0; }

  /* Booking panel: un-sticky, full width */
  .booking-panel { border-radius: 12px !important; max-width: 560px; margin: 0 auto; }

  /* Accred strip: 2-col on tablet */
  .accred-tri { grid-template-columns: 1fr 1fr; }
  .accred-tri-center { display: none; }

  /* Show mobile booking bar */
  .mobile-book-bar { display: flex; }

  /* Add bottom padding so content isn't hidden behind bar */
  body { padding-bottom: 76px; }

  /* cert badge stays within its section */
  .hero-course-badge { display: none; }
}

/* ── 720px: mobile ──────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Pills — horizontal scroll on mobile */
  .course-pill-strip { padding: 10px 0; }
  .course-pill-row { gap: 6px; }
  .cpill { font-size: 11.5px; padding: 5px 11px 5px 8px; }
  .cpill-label { font-size: 10px; }

  /* Detail main headings */
  .detail-main h2 { font-size: 28px; margin-top: 28px; }
  .two-column-list { grid-template-columns: 1fr; }

  /* Reviews → single column */
  .review-grid { grid-template-columns: 1fr; }
  .video-review-grid { grid-template-columns: 1fr; }
  .review-cta-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .google-rating-badge { display: none; }
  .review-card { padding: 16px 14px 14px; }

  /* Booking panel: a contained card. It used to full-bleed with negative
     margins, which pushed it past the right edge of the viewport. */
  .booking-panel {
    max-width: 100%;
    width: auto;
    margin-inline: 0;
    border-radius: 14px !important;
  }

  /* Inclusions tabs wrap */
  .inc-tabs-wrap { gap: 0; border-bottom-width: 1px; }
  .inc-tab { padding: 11px 12px; font-size: 11px; flex: 1; text-align: center; justify-content: center; }

  /* Cert modal */
  .cert-modal-inner { padding: 20px 16px 24px; }
  .cert-modal-close { top: 12px; right: 12px; }

  /* Section tight-top on mobile */
  .section--tight-top { padding-top: 28px; }

  /* Batch calendar */
  .bjy-section { padding: 60px 0; }
  .bfs-shared-row { grid-template-columns: 1fr; gap: 12px; }
  .batch-dates-grid { grid-template-columns: 1fr; }

  /* Schedule */
  .schedule-grid { grid-template-columns: 1fr; }
  .schedule-block { flex-direction: row; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); border-right: none; border-left: none; }
  .sched-dot { display: none; }
  .sched-time { min-width: 68px; font-size: 12px; }

  /* Teacher grid */
  .teacher-grid { grid-template-columns: 1fr; }
  .teacher-card { flex-direction: row; gap: 16px; align-items: flex-start; }
  .teacher-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }

  /* Accred strip full collapse */
  .accred-tri { grid-template-columns: 1fr; gap: 0; }
  .accred-tri-center, .accred-tri-col--right { border-left: none; border-top: 1px solid var(--border); }
  .accred-tri-col .accred-badge { padding: 10px 16px; }
  .accred-tri-col--right .accred-badge { padding: 10px 16px; }

  /* Pill cards on listing */
  .card-pill-row { gap: 4px; }
  .cpill--sm { padding: 3px 8px 3px 6px; }
  .cpill--sm .cpill-val { max-width: 120px; }

  /* Meal menu on mobile */
  .meal-menu-inline { border-radius: 8px; }
  .meal-menu-row { flex-direction: column; gap: 3px; padding: 10px 14px; }
  .meal-menu-row strong { min-width: unset; font-size: 13px; }
  .meal-menu-row span { font-size: 13px; }

  /* Horizontal section menu stays on mobile (scrolls sideways) */
  .toc-link { padding: 13px 13px; font-size: 12.5px; }

  /* Hero pill strip → smaller body pb */
  body { padding-bottom: 72px; }

  /* Booking panel pills stack nicely */
  .bp-pill-row { margin: 12px 0; }
  .bpill { padding: 8px 12px; font-size: 12px; }
  .bpill-val { font-size: 12px; }
}

/* ── 480px: small phones ────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-copy h1, .page-hero h1 { font-size: 36px; line-height: 1.05; }
  .page-hero p { font-size: 15px; }
  .section { padding: 36px 0; }
  .section--tight-top { padding-top: 20px; }
  h2 { font-size: 30px; }
  h3 { font-size: 20px; }
  .mbb-btn { padding: 11px 18px !important; font-size: 13.5px; }
  .mbb-price strong { font-size: 20px; }
  .inc-tab { font-size: 10.5px; padding: 10px 8px; }
  .review-card p { font-size: 13.5px; }
  .course-pill-strip { padding: 8px 0; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE HERO + FLOATING COURSE CONTROLS
   ════════════════════════════════════════════════════════════ */

/* Inner-page hero stays on phones and is tuned to feel as impactful as it
   does on desktop: a strong full-bleed band, a deeper overlay for legibility
   and a large serif title that still fits the viewport. */
@media (max-width: 720px) {
  .page-hero {
    min-height: 280px;
    background-attachment: scroll;
  }
  .page-hero .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(92, 40, 4, 0.42) 0%,
      rgba(70, 28, 0, 0.66) 55%,
      rgba(40, 15, 0, 0.92) 100%
    );
  }
  .page-hero-inner { padding: 40px 0 26px; }
  .page-hero .eyebrow { font-size: 11.5px; margin-bottom: 10px; }
  .hero-copy h1, .page-hero h1 {
    font-size: clamp(30px, 8.5vw, 42px);
    line-height: 1.04; margin: 8px 0 12px;
  }
  .hero-copy p, .page-hero p { font-size: 15px; line-height: 1.55; }
}
/* Course hero carries accreditation seals below it — give it a touch more room */
@media (max-width: 560px) {
  .page-hero--with-seal { min-height: 320px; }
}

/* On tablet/phone the course section-menu collapses into a floating
   hamburger (bottom-right), and the floating controls stack above the
   sticky booking bar so nothing overlaps the price/CTA. */
@media (max-width: 1020px) {
  /* Any TOC style (bar/side/hamburger) behaves as a hamburger here */
  .page-toc {
    position: static; background: none; border: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .page-toc .page-toc-fab { display: grid; }
  .page-toc .page-toc-heading {
    display: block; padding: 4px 14px 9px; margin: 0 0 6px;
    border-bottom: 1px solid #ece9e3;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  }
  .page-toc ul {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: 2px; justify-content: flex-start;
  }
  .page-toc .toc-link {
    text-align: left; border-radius: 8px; padding: 8px 14px; font-size: 12.5px; white-space: normal;
  }
  .page-toc .page-toc-inner {
    position: fixed; left: 16px; right: auto; top: 74px; bottom: auto; z-index: 210;
    width: min(300px, calc(100vw - 32px)); max-height: calc(100vh - 150px); overflow-y: auto;
    background: rgba(255,252,248,.98);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 14px 44px rgba(0,0,0,.22);
    padding: 10px 8px;
    opacity: 0; transform: translateY(-10px) scale(.96); transform-origin: top left;
    pointer-events: none; transition: opacity .2s, transform .2s;
  }
  .page-toc.is-open .page-toc-inner { opacity: 1; transform: none; pointer-events: auto; }

  /* Floating stack on tablets. Four controls were landing on top of each
     other here, so they are given one column each: the section menu on the
     left, and WhatsApp → chat → share stacked up the right at 74px apart. */
  .page-toc-fab { left: 16px; right: auto; bottom: 92px; z-index: 210; }
  .wa-widget    { right: 22px; bottom: 22px; }
  .oyc          { right: 22px; bottom: 96px; }
  .share-fab    { right: 22px; bottom: 170px; }

  /* The booking bar owns the bottom ~86px of a course page, so lift the lot */
  body:has(.mobile-book-bar) .wa-widget    { right: 22px; bottom: 100px; }
  body:has(.mobile-book-bar) .oyc          { bottom: 174px; }
  body:has(.mobile-book-bar) .share-fab    { bottom: 248px; }
  body:has(.mobile-book-bar) .page-toc-fab { left: 16px; right: auto; bottom: 100px; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE APP BOTTOM TAB BAR
   ════════════════════════════════════════════════════════════ */
.mobile-tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  height: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255,252,248,.98);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(184,80,0,.16);
  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
}
.tabbar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--muted);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  padding: 6px 2px; transition: color .16s;
}
.tabbar-item svg { opacity: .82; }
.tabbar-item:active { color: var(--maroon-dark); }
/* Active tab is derived purely from <body data-page> */
body[data-page="home"]    .tabbar-item[data-tab="home"],
body[data-page="courses"] .tabbar-item[data-tab="courses"],
body[data-page="store"]   .tabbar-item[data-tab="courses"],
body[data-page="reviews"] .tabbar-item[data-tab="reviews"],
body[data-page="contact"] .tabbar-item[data-tab="contact"] { color: var(--maroon-dark); }
body[data-page="home"]    .tabbar-item[data-tab="home"] svg,
body[data-page="courses"] .tabbar-item[data-tab="courses"] svg,
body[data-page="store"]   .tabbar-item[data-tab="courses"] svg,
body[data-page="reviews"] .tabbar-item[data-tab="reviews"] svg,
body[data-page="contact"] .tabbar-item[data-tab="contact"] svg { opacity: 1; }

@media (max-width: 720px) {
  .mobile-tabbar { display: flex; }

  /* Reserve room for the tab bar globally */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* Course pages: sticky price bar sits directly above the tab bar */
  .mobile-book-bar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body:has(.mobile-book-bar) { padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }

  /* Floating controls clear the whole bottom stack */
  .wa-widget { right: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .page-toc-fab { right: 16px; left: auto; bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  .page-toc .page-toc-inner { bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }

  body:has(.mobile-book-bar) .wa-widget { bottom: calc(154px + env(safe-area-inset-bottom, 0px)); }
  body:has(.mobile-book-bar) .page-toc-fab { right: 16px; left: auto; bottom: calc(218px + env(safe-area-inset-bottom, 0px)); }
  body:has(.mobile-book-bar) .page-toc .page-toc-inner { bottom: calc(282px + env(safe-area-inset-bottom, 0px)); }
}

/* ════════════════════════════════════════════════════════════
   HIGH-RESOLUTION / LARGE SCREEN BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* ── 1440px: large desktop ──────────────────────────────────── */
@media (min-width: 1440px) {
  /* 1220 rather than 1320: the docked section menu (.page-toc--side) lives in
     the left margin, so the container is held back to leave it a usable width.
     Widen this and the menu is squeezed back into two-line labels. */
  :root { --container: 1220px; }

  .section { padding: 80px 0; }
  .section--tight-top { padding-top: 32px; }

  h1 { font-size: clamp(56px, 5vw, 80px); }
  h2 { font-size: clamp(40px, 3.2vw, 56px); }
  h3 { font-size: clamp(22px, 1.8vw, 28px); }

  .hero-copy h1, .page-hero h1 { font-size: clamp(72px, 6vw, 96px); }

  .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-grid { grid-template-columns: repeat(3, 1fr); }
  .video-review-grid { grid-template-columns: repeat(3, 1fr); }

  .detail-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; }
  .detail-main { max-width: 820px; }
  .booking-panel { padding: 36px 32px 32px; }
}

/* ── 1920px: full HD / ultrawide ────────────────────────────── */
@media (min-width: 1920px) {
  /* Same trade as 1440px — 1380 keeps ~240px of margin for the section menu. */
  :root { --container: 1380px; }

  .section { padding: 88px 0; }

  h2 { font-size: clamp(44px, 3vw, 60px); }

  .detail-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; }
  .review-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .accred-tri-col .accred-badge { padding: 14px 36px; }
  .accred-tri-center { padding: 24px 48px; }

  .teacher-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 2560px: 2K / QHD ───────────────────────────────────────── */
@media (min-width: 2560px) {
  :root { --container: 1680px; }

  body { font-size: 18px; }

  .section { padding: 96px 0; }

  h2 { font-size: clamp(48px, 2.8vw, 64px); }
  h3 { font-size: clamp(24px, 1.5vw, 32px); }

  .hero-copy h1, .page-hero h1 { font-size: clamp(80px, 5vw, 110px); }

  .course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .review-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* ════════════════════════════════════════════════════════════
   BATCH DATES — NEW HORIZONTAL LAYOUT
   ════════════════════════════════════════════════════════════ */
.bjy-dates-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.bjy-fee-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(196,148,69,.25);
  border-radius: 14px;
  padding: 20px 24px;
  position: relative;
}

.bjy-fee-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.bjy-room-photo { margin: -2px -2px 12px; border-radius: 10px 10px 0 0; overflow: hidden; aspect-ratio: 16/10; }
.bjy-room-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bjy-room-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
  position: relative;
}
.bjy-room-card:hover { border-color: rgba(196,148,69,.4); background: rgba(255,255,255,.1); }
.bjy-room-card--private { border-color: rgba(196,148,69,.3); background: rgba(196,148,69,.06); }
.bjy-room-card--best { border-color: rgba(107,220,100,.25); background: rgba(107,220,100,.05); }
.bjy-room-card--selected {
  border-color: var(--gold) !important;
  background: rgba(196,148,69,.15) !important;
  box-shadow: 0 0 0 2px rgba(196,148,69,.28), inset 0 0 0 1px rgba(196,148,69,.15);
}

/* Room radio dot (top-right corner) */
.bjy-room-radio {
  position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s;
  flex-shrink: 0;
}
.bjy-room-card--selected .bjy-room-radio { border-color: var(--gold); }
.bjy-room-card .bjy-radio-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); transform: scale(0); transition: transform .18s ease;
}
.bjy-room-card--selected .bjy-radio-dot { transform: scale(1); }

/* Chosen room label inside CTA col */
.bjy-room-chosen-strip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(196,148,69,.1); border: 1px solid rgba(196,148,69,.28);
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 600;
  color: #fde68a; margin-bottom: 2px;
}
.bjy-room-chosen-strip svg { color: var(--gold); flex-shrink: 0; }

.bjy-room-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}
.bjy-room-header svg { color: rgba(196,148,69,.7); flex-shrink: 0; }

.bjy-amenities {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bjy-amenities span {
  font-size: 11px;
  color: rgba(255,255,255,.45);
}

.bjy-price {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: #f0d898;
  line-height: 1;
  margin-top: 4px;
}
.bjy-price small {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,.45);
  font-family: var(--sans);
  margin-left: 2px;
}

.bjy-best-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6ddc64;
  background: rgba(107,220,100,.15);
  border-radius: 20px;
  padding: 2px 8px;
  align-self: flex-start;
}

.bjy-cta-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
  align-items: stretch;
}

.bjy-duration-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(196,148,69,.15);
  margin-bottom: 4px;
}

@media (max-width: 1020px) {
  .bjy-fee-bar { grid-template-columns: 1fr; }
  .bjy-cta-col { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .bjy-cta-col .bfs-book-btn { flex: 1; }
  .bjy-duration-tag { border-bottom: none; padding-bottom: 0; text-align: left; }
}
@media (max-width: 720px) {
  .bjy-dates-row { grid-template-columns: 1fr 1fr; }
  .bjy-fee-cards { grid-template-columns: 1fr; gap: 12px; }
  /* Keep room cards vertical & full-width on mobile (photo on top, amenities below) */
  .bjy-room-card { flex-direction: column; align-items: stretch; padding: 14px; }
  .bjy-room-photo { aspect-ratio: 16/9; margin: -2px -2px 10px; }
  .bjy-room-header { gap: 8px; font-size: 14px; }
  .bjy-amenities { gap: 6px 14px; }
  .bjy-amenities span { font-size: 12px; }
  .bjy-price { font-size: 22px; margin-top: 6px; }
  .bjy-cta-col { flex-direction: column; }
  .bjy-fee-bar { padding: 16px; }
}
@media (max-width: 480px) {
  .bjy-dates-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   SCHEDULE — COMPACT 3-COLUMN HORIZONTAL TIMETABLE
   ════════════════════════════════════════════════════════════ */
.schedule-header { margin-bottom: 32px; }

/* Override existing 2-col to 3-col, tighter padding, hide descriptions */
.schedule-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  border-top: 1px solid var(--border);
}
.schedule-block {
  grid-template-columns: 72px 14px 1fr !important;
  padding: 14px 0 !important;
  gap: 0 10px !important;
}
.schedule-block:nth-child(odd)  { padding-right: 20px !important; }
.schedule-block:nth-child(even) { padding-left: 20px !important; }
/* Every 3rd item gets a left border instead of every even */
.schedule-block { border-left: none !important; }
.schedule-block:nth-child(3n+2),
.schedule-block:nth-child(3n)  { border-left: 1px solid var(--border) !important; padding-left: 20px !important; }
.schedule-block p { display: none; }
.sched-time { font-size: 11px !important; }
.schedule-block strong { font-size: 14px !important; }

@media (max-width: 1020px) {
  .schedule-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .schedule-block:nth-child(3n+2),
  .schedule-block:nth-child(3n) { border-left: none !important; padding-left: 0 !important; }
  .schedule-block:nth-child(even) { border-left: 1px solid var(--border) !important; padding-left: 20px !important; }
  .schedule-block:nth-child(odd)  { padding-left: 0 !important; }
}
@media (max-width: 600px) {
  .schedule-grid { grid-template-columns: 1fr !important; }
  .schedule-block:nth-child(even) { border-left: none !important; padding-left: 0 !important; }
  .schedule-block { border-bottom: 1px solid var(--border); padding: 12px 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   OWNER PRIORITY UI — YA Badges · Highlights · Batch Table
   ═══════════════════════════════════════════════════════════════ */

/* ── School highlight cards (Traditional method / Batches / Campus) ── */
.highlights-band {
  background: var(--light-bg);
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.highlight-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.highlight-card:hover {
  box-shadow: var(--shadow);
  border-color: rgba(196,148,69,0.4);
  transform: translateY(-2px);
}
.hl-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(196,148,69,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--maroon-dark);
}
.highlight-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.highlight-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* ── Hero bottom YA bar — pinned to bottom edge of hero ── */
.hero-ya-bar {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid #e8e3dc;
  padding: 14px 0;
}
.hero-ya-inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 0 16px;
}
.hero-ya-logo {
  height: clamp(32px, 3.5vw, 44px);
  width: auto;
  flex-shrink: 0;
  opacity: 0.95;
}
.hero-ya-divider {
  width: 1px;
  height: 36px;
  background: #ddd;
  flex-shrink: 0;
}
.hero-ya-seals {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  flex-wrap: wrap;
  justify-content: center;
}
.hero-ya-seal {
  height: clamp(40px, 4vw, 54px);
  width: auto;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity 0.18s, transform 0.18s;
}
.hero-ya-seal:hover { opacity: 1; transform: translateY(-2px); }
.hero-ya-gov-logo {
  height: clamp(28px, 3vw, 40px);
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.9;
  flex-shrink: 0;
}
.hero-ya-caption {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.4;
  flex-shrink: 0;
  max-width: 280px;
}
.hero-ya-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--maroon);
  line-height: 1;
  font-family: var(--serif);
}
.hero-ya-stat span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* ── Course credential seal as a circular badge on the hero image ──
   The hero gets extra bottom padding (text pushed up) to open a band at
   the bottom of the photo; the seal(s) sit there as round white badges,
   fully on the image below the text. (course pages only) */
.page-hero--with-seal .page-hero-inner { padding-bottom: clamp(116px, 13vw, 158px); }

.hero-ya-bar--on-hero {
  background: transparent;
  border-top: none;
  padding: 0;
  margin-top: clamp(-150px, -13vw, -120px);
  margin-bottom: clamp(28px, 3.2vw, 46px);
  position: relative;
  z-index: 5;
}
.hero-ya-bar--on-hero .hero-ya-inner {
  width: max-content;
  max-width: calc(100% - 40px);
  margin-inline: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  gap: clamp(12px, 1.6vw, 20px);
}
.hero-ya-bar--on-hero .hero-ya-seal,
.hero-ya-bar--on-hero .hero-ya-logo {
  height: clamp(74px, 8vw, 98px);
  width: clamp(74px, 8vw, 98px);
  padding: 9px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  opacity: 1;
  box-shadow: 0 12px 34px rgba(0,0,0,.42);
}
.hero-ya-bar--on-hero .hero-ya-seal:hover { transform: translateY(-3px); }
.hero-ya-bar--on-hero .hero-ya-divider { display: none; }
.hero-ya-bar--on-hero .hero-ya-caption { display: none; }
@media (max-width: 560px) {
  .page-hero--with-seal .page-hero-inner { padding-bottom: 96px; }
  .hero-ya-bar--on-hero { margin-top: -90px; }
  .hero-ya-bar--on-hero .hero-ya-seal,
  .hero-ya-bar--on-hero .hero-ya-logo { height: 66px; width: 66px; }
}

/* ── Yoga Alliance accreditation strip ── */
.ya-strip-section {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 36px 0;
}
.ya-strip-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  justify-content: center;
  flex-wrap: wrap;
}
.ya-brand-logo {
  height: 110px;
  width: auto;
  flex-shrink: 0;
}
.ya-strip-divider {
  width: 1px;
  height: 90px;
  background: var(--border);
  flex-shrink: 0;
}
.ya-strip-seals {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.ya-seal-img {
  height: 100px;
  width: auto;
  object-fit: contain;
  transition: transform 0.18s, opacity 0.18s;
}
.ya-seal-img:hover {
  transform: translateY(-3px);
  opacity: 0.88;
}

/* ── Batch table (upcoming residential batches) ── */
.batch-table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.batch-table-head {
  display: grid;
  grid-template-columns: 160px 1fr 120px 1fr;
  gap: 0;
  background: var(--ink);
  padding: 12px 20px;
}
.batch-table-head span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.batch-row {
  display: grid;
  grid-template-columns: 160px 1fr 120px 1fr;
  align-items: center;
  gap: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.15s;
  color: inherit;
}
.batch-row:last-child { border-bottom: 0; }
.batch-row:hover { background: #fdf6ec; }
.br-date {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--maroon);
  white-space: nowrap;
}
.br-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding-right: 16px;
}
.br-dur {
  font-size: 13px;
  color: var(--muted);
}
.br-cred {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.br-cred::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}
/* Keep the homepage dates table dark & readable on its light background —
   overrides the legacy ".batch-row span" bright-accent colour. */
.batch-table-wrap .br-date { color: var(--maroon-dark); font-weight: 700; }
.batch-table-wrap .br-dur,
.batch-table-wrap .br-cred { color: var(--muted); font-weight: 500; }
.batch-table-wrap .br-title { color: var(--ink); }

/* ── Responsive: highlights + YA strip ── */
@media (max-width: 1020px) {
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .ya-strip-divider { display: none; }
  .ya-strip-inner { gap: 28px; }
}
@media (max-width: 720px) {
  .highlights-grid { grid-template-columns: 1fr; }
  .highlights-band { padding: 40px 0; }
  .ya-brand-logo { height: 80px; }
  .ya-seal-img { height: 75px; }
  .ya-strip-section { padding: 24px 0; }
  .batch-table-head { display: none; }
  .batch-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 20px;
  }
  .br-date { font-size: 12px; }
  .br-title { padding-right: 0; }
  .br-dur { display: none; }
}

/* ── Google Translate: hide default toolbar ── */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ── Language Picker ── */
.lang-pick {
  position: relative;
  display: flex;
  align-items: center;
}
.lang-pick-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.lang-pick-btn:hover,
.lang-pick-btn[aria-expanded="true"] {
  background: var(--light-bg);
  border-color: var(--maroon);
  color: var(--maroon);
}
.lang-pick-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  z-index: 9999;
  padding: 4px 0;
}
.lang-pick-drop.open { display: block; }
.lang-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  transition: background .12s;
}
.lang-opt:hover { background: var(--light-bg); }
.lang-opt.active { background: var(--light-bg); font-weight: 700; }
.lang-flag { font-size: 16px; line-height: 1; }

@media (max-width: 900px) {
  .lang-pick-btn span#lang-pick-label { display: none; }
  .lang-pick-drop { right: -10px; }
}

/* ── Google Reviews Component ────────────────────────────────── */
.google-reviews-section { padding: 60px 0; }
.gr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}
.gr-header-score { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gr-big-rating {
  font-size: 52px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.gr-header .gr-stars { font-size: 26px; color: #fbbc05; }
.gr-total { font-size: 14px; color: var(--muted); }
.gr-write-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid #dadce0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
  white-space: nowrap;
}
.gr-write-btn:hover { border-color: #4285f4; box-shadow: 0 2px 8px rgba(66,133,244,.15); }

.gr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .gr-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .gr-cards { grid-template-columns: 1fr; } }

.gr-card {
  background: #fff;
  border: 1px solid #ece9e3;
  border-radius: 14px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s, transform .2s;
}
.gr-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.09); transform: translateY(-2px); }

.gr-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gr-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0ebe3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--maroon, #6b1a1a);
}
.gr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gr-meta { flex: 1; min-width: 0; }
.gr-meta strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-meta span { font-size: 12px; color: var(--muted); }
.gr-google-icon { margin-left: auto; flex-shrink: 0; opacity: .85; }

.gr-stars-row .gr-stars { font-size: 16px; color: #fbbc05; }
.gr-star--empty { color: #dadce0; }
.gr-star--half { position: relative; color: #dadce0; }
.gr-star--half::after { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #fbbc05; }

.gr-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gr-footer { text-align: center; margin-top: 36px; }
.gr-see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #4285f4;
  text-decoration: none;
  padding: 10px 24px;
  border: 1.5px solid #4285f4;
  border-radius: 8px;
  transition: background .2s, color .2s;
}
.gr-see-all:hover { background: #4285f4; color: #fff; }
.gr-empty { text-align: center; padding: 40px 0; }

/* ── Trustindex-style Google reviews widget ── */
/* ── Google reviews (Trustindex-style) — split: summary + carousel ── */
.ti-split {
  position: relative; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 270px 1fr; gap: 30px; align-items: start;
}
.ti-summary { text-align: center; padding: 6px 4px; }
.ti-summary-logo {
  width: 66px; height: 66px; border-radius: 50%; overflow: hidden;
  margin: 0 auto 14px; border: 1px solid var(--border); background: #fff;
}
.ti-summary-logo img { width: 100%; height: 100%; object-fit: cover; }
.ti-summary-name { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); line-height: 1.3; margin-bottom: 12px; }
.ti-summary .ti-stars { margin-bottom: 10px; }
.ti-summary-count { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.ti-summary-count svg { width: 16px; height: 16px; }
.ti-summary .ti-write-btn { justify-content: center; }

.ti-write-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: #fff; border: 1px solid #dadce0;
  text-decoration: none; white-space: nowrap; transition: background .2s, box-shadow .2s;
}
.ti-write-btn:hover { background: #f7f8fa; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.ti-stars { display: inline-flex; gap: 1px; line-height: 1; }
.ti-star { color: #fbbc05; font-size: 18px; }
.ti-star--off { color: #dcdcdc; }
.ti-star--half { position: relative; color: #dcdcdc; }
.ti-star--half::before { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #fbbc05; }
.ti-stars--sm .ti-star { font-size: 15px; }
.ti-stars--lg .ti-star { font-size: 24px; }

.ti-carousel-wrap { position: relative; display: flex; align-items: stretch; min-width: 0; }
.ti-carousel {
  display: flex; gap: 16px; flex: 1; min-width: 0; padding: 2px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.ti-carousel::-webkit-scrollbar { display: none; }
.ti-carousel > .ti-card { flex: 0 0 clamp(240px, 30%, 300px); scroll-snap-align: start; }
.ti-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--border); color: var(--maroon-dark);
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.ti-arrow--prev { left: -12px; }
.ti-arrow--next { right: -12px; }
.ti-arrow:disabled { opacity: 0; pointer-events: none; }

.ti-card {
  background: #f7f8fa; border: 1px solid #eceef1; border-radius: 12px;
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.ti-card-top { display: flex; align-items: center; gap: 12px; }
.ti-card-top > svg { margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; }
.ti-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px;
}
.ti-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ti-card-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ti-card-meta strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ti-card-meta span { font-size: 12px; color: var(--muted); }
.ti-card-rating { display: flex; align-items: center; gap: 8px; }
.ti-verified-check { flex-shrink: 0; }
.ti-text {
  font-size: 13.5px; color: #555; line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ti-text.is-open { -webkit-line-clamp: unset; overflow: visible; }
.ti-readmore { align-self: flex-start; background: none; border: none; padding: 0; color: var(--maroon); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.ti-readmore:hover { text-decoration: underline; }

.ti-verified { position: absolute; right: 2px; bottom: -36px; }
.ti-verified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #1a7d5a; color: #fff; padding: 5px 11px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600;
}
.ti-empty { text-align: center; padding: 40px 0; }

/* Per-course strip extra logo sizing parity */
.hero-ya-extra-logo { max-width: 130px; }

@media (max-width: 900px) {
  .ti-split { grid-template-columns: 1fr; gap: 22px; }
  .ti-carousel > .ti-card { flex-basis: 82%; }
  .ti-arrow { display: none; }
  .ti-verified { position: static; text-align: center; margin-top: 14px; }
}

/* ── Checkout: Razorpay pay UI ─────────────────────────────── */
.pay-currency {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 6px 0 14px;
}
.pay-currency-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pay-cur-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
}
.pay-cur-opt:has(input:checked) { border-color: var(--maroon-dark); background: rgba(196,148,69,.1); color: var(--maroon-dark); }
.pay-cur-opt input { accent-color: var(--maroon-dark); }
.pay-error { color: #b3261e; font-size: 13.5px; margin: 10px 0 0; }
.pay-divider {
  display: flex; align-items: center; text-align: center;
  color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  margin: 16px 0;
}
.pay-divider::before, .pay-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pay-divider span { padding: 0 14px; }
.checkout-paid { text-align: center; }
.checkout-paid-badge {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: #1e8a4c; color: #fff; font-size: 32px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(30,138,76,.35);
}

/* ── Magento-style stepped checkout ───────────────────────── */
/* ── Stepped checkout — clean, frameless, comfortable width ── */
.checkout-layout--stepped {
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 48px; max-width: 1160px; margin-inline: auto; align-items: start;
}
/* Left column is one clean white card (stepper + form together), matching
   the order-summary card on the right for a balanced, finished look. */
.co-checkout {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-sm);
  padding: 34px 38px;
}
/* Neutralise the <form>'s inherited card styles — the wrapper is the card now */
.co-form {
  position: static; display: block; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}

/* Progress header */
.co-steps {
  display: flex; align-items: center; gap: 8px;
  list-style: none; margin: 0 0 30px; padding: 0 0 24px;
  border-bottom: 1px solid var(--border);
}
.co-step-tab {
  display: flex; align-items: center; gap: 9px; flex: 1;
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.co-step-tab:not(:last-child)::after {
  content: ""; flex: 1; height: 2px; background: var(--border); border-radius: 2px; margin-left: 4px;
}
.co-step-num {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--light-bg); color: var(--muted); border: 1px solid var(--border);
  transition: background .18s, color .18s, border-color .18s;
}
.co-step-tab.is-active { color: var(--maroon-dark); }
.co-step-tab.is-active .co-step-num { background: var(--maroon-dark); color: #fff; border-color: var(--maroon-dark); }
.co-step-tab.is-done .co-step-num { background: #1e8a4c; color: #fff; border-color: #1e8a4c; font-size: 0; }
.co-step-tab.is-done .co-step-num::before { content: "✓"; font-size: 14px; }

/* Panels */
.co-panel { display: none; }
.co-panel.is-active { display: grid; gap: 18px; animation: coFade .22s ease; }
.co-panel .eyebrow { margin-bottom: 0; }
.co-panel h2 { font-size: 26px; margin: 0 0 2px; }
.co-panel h2 small { font-size: 15px; color: var(--muted); font-weight: 400; }
@keyframes coFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Fields — comfortable height, clear border, soft fill */
.co-form label {
  display: grid; gap: 8px; margin: 0; color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.co-form input, .co-form select, .co-form textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--light-bg); color: var(--ink);
  font-size: 15px; letter-spacing: normal; text-transform: none;
}
.co-form textarea { min-height: 92px; }
.co-form input::placeholder, .co-form textarea::placeholder { color: #b7ab99; }
.co-form input:focus, .co-form select:focus, .co-form textarea:focus {
  border-color: var(--maroon-dark); background: #fff; box-shadow: 0 0 0 3px rgba(122,46,18,.10);
}
.co-form input.co-locked, .co-form input[readonly] {
  background: #f1ebe1; color: var(--ink); cursor: default; font-weight: 600;
}
.co-form input.co-locked:focus, .co-form input[readonly]:focus { box-shadow: none; border-color: var(--border); background: #f1ebe1; }

.co-actions { margin-top: 6px; }
.co-actions--split { display: flex; gap: 12px; }
.co-actions--split .btn { flex: 1; }
.co-back-link {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 6px 0;
}
.co-back-link:hover { color: var(--maroon-dark); }

/* Review list */
.co-review { margin: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--cream); overflow: hidden; }
.co-review-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.co-review-row:last-child { border-bottom: 0; }
.co-review-row dt { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.co-review-row dd { margin: 0; font-size: 14px; color: var(--ink); text-align: right; word-break: break-word; }

/* Deposit clarification callout */
.co-deposit-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(196,148,69,.10); border: 1px solid rgba(196,148,69,.30);
}
.co-deposit-ic { font-size: 18px; line-height: 1.4; flex: 0 0 auto; }
.co-deposit-note strong { display: block; color: var(--maroon-dark); font-size: 14px; margin-bottom: 3px; }
.co-deposit-note span { color: var(--ink); font-size: 13px; line-height: 1.5; }

@media (max-width: 1020px) {
  .checkout-layout--stepped { grid-template-columns: 1fr; gap: 28px; max-width: 620px; }
}
@media (max-width: 560px) {
  .co-checkout { padding: 24px 20px; }
  .co-panel h2 { font-size: 22px; }
  .co-step-name { display: none; }         /* numbers-only stepper on small phones */
  .co-step-tab { flex: 0 0 auto; }
  .co-steps { gap: 6px; }
}

/* ── Single-column 4-step checkout wizard ── */
.co-single { max-width: 720px; margin-inline: auto; }
.co-single .co-steps { max-width: none; margin-bottom: 28px; }
.co-single .co-panel { max-width: none; }
.co-single .checkout-cart { position: static; margin: 0; }
.co-opt { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* Start-date pickers — one per course in the cart, editable until payment */
.co-batch-slot { display: grid; gap: 18px; }
.co-batch-slot label > span { display: block; }
.co-batch-empty { margin: 0; color: var(--muted); font-size: 13px; }

/* ── Order summary card ── */
.checkout-cart { padding: 30px 32px; }
.co-sum-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.co-sum-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--maroon); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.co-sum-eyebrow svg { width: 18px; height: 18px; color: var(--gold); }
.co-sum-rule { width: 46px; height: 2px; border-radius: 2px; background: var(--gold); opacity: .7; }
.co-sum-count { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.co-sum-count h2 { margin: 0; font-size: 32px; }
.co-sum-count-div { width: 1px; height: 28px; background: var(--border); }

.co-item {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  grid-template-areas:
    "thumb main"
    "thumb meta"
    "thumb actions";
  column-gap: 22px; row-gap: 10px; align-content: start;
  padding: 26px 0; border-bottom: 1px solid var(--border);
}
.co-item:last-child { border-bottom: 0; }
.co-item-thumb { grid-area: thumb; width: 120px; height: 108px; object-fit: cover; border-radius: 12px; align-self: start; }
.co-item-main { grid-area: main; }
.co-item-title {
  display: block; font-size: 19px; font-weight: 700; line-height: 1.28;
  color: var(--ink); letter-spacing: -0.01em;
}
.co-item-price { color: var(--muted); font-size: 16px; white-space: nowrap; margin-top: 6px; }

/* Meta chips — one row under the title */
.co-item-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.co-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; white-space: nowrap; }
.co-meta svg { width: 17px; height: 17px; color: var(--maroon); flex: 0 0 auto; }
.co-meta-sep { width: 1px; height: 15px; background: var(--border); }

/* Qty + Remove share one row below the batch info */
.co-item-actions, .co-qty { display: flex; align-items: center; }
.co-actions-row {
  grid-area: actions; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--border);
}
.co-qty { gap: 10px; }
.co-qty-label { color: var(--muted); font-size: 14px; }
.co-qty-box { display: inline-flex; align-items: stretch; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; }
.co-qty-box input {
  width: 44px; text-align: center; border: 0; background: transparent; padding: 8px 0;
  font-size: 15px; font-weight: 700; color: var(--ink); -moz-appearance: textfield;
}
.co-qty-box input::-webkit-outer-spin-button, .co-qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.co-qty-arrows { display: flex; flex-direction: column; border-left: 1.5px solid var(--border); }
.co-qty-arrows button { display: grid; place-items: center; width: 28px; flex: 1; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.co-qty-arrows button svg { width: 13px; height: 13px; }
.co-qty-arrows button:first-child { border-bottom: 1.5px solid var(--border); }
.co-qty-arrows button:hover { background: var(--light-bg); color: var(--maroon-dark); }

.co-item-remove {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
  color: var(--maroon); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.co-item-remove svg { width: 15px; height: 15px; }
.co-item-remove:hover { color: var(--maroon-dark); }

.co-sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 4px; padding-top: 20px; border-top: 1px solid var(--border); }
.co-sum-total span { color: var(--muted); font-size: 14px; font-weight: 600; }
.co-sum-total strong { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); }
.co-sum-note { color: var(--muted); font-size: 12.5px; margin: 0 0 16px; }
.co-clear { display: block; width: 100%; text-align: center; background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 12px 0 2px; }
.co-clear:hover { color: var(--maroon); }

@media (max-width: 560px) {
  .checkout-cart { padding: 22px 18px; }
  .co-item { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; }
  .co-item-thumb { width: 88px; height: 88px; }
  .co-item-title { font-size: 17px; }
  .co-meta { font-size: 13px; }
  .co-sum-count h2 { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════════
   RETREAT PAGES — MOBILE
   The retreat landing (/retreat) and each retreat's own page.
   Phones are the majority of this traffic, so these rules tighten
   spacing, stack every grid and keep every block inside the gutter.
   ════════════════════════════════════════════════════════════ */

/* ── Tablet and below ─────────────────────────────────────── */
@media (max-width: 1020px) {
  /* Retreat detail: content first, booking panel after it */
  .rt-facts { grid-template-columns: repeat(3, 1fr); }
  .rt-itin-day, .rt-itin-day--media { grid-template-columns: 52px 1fr; }
  .rt-itin-media { grid-column: 2; margin-top: 14px; max-width: 100%; }
  .rt-steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ── Phones ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* The long tagline is truncated mid-word on a phone — the logo says it already */
  .top-strip-tagline { display: none; }
  .top-strip { justify-content: center; gap: 18px; }

  /* Banner: shorter, and the subtitle stays readable */
  .rt-strip { padding: 14px 0; }
  .rt-strip-inner { gap: 10px 20px; }
  .rt-strip-item { font-size: 12px; gap: 8px; }

  /* Quick facts: two per row, no dividers, tighter */
  .rt-facts-band { padding: 18px 0 20px; }
  .rt-facts { grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
  .rt-fact { padding-right: 0; border-right: 0; }
  .rt-fact-label { font-size: 10px; letter-spacing: .06em; }
  .rt-fact-val { font-size: 14.5px; }

  /* Overview + panel stack, with even spacing */
  .detail-layout { gap: 26px; }
  .detail-main { max-width: 100%; }
  .detail-main h2, .ov-title { font-size: 27px; line-height: 1.2; }
  .ov-block { margin-top: 0; }

  /* Booking panel — full-width card, buttons stacked and thumb-sized */
  .booking-panel { padding: 22px 18px 24px; }
  .booking-panel .bp-pill-row { flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 0 0; }
  .booking-panel .bp-pill-row .btn { width: 100%; justify-content: center; text-align: center; padding: 14px 16px; }
  .booking-panel .btn-outline-brochure { width: 100%; justify-content: center; }
  .bp-from-value { font-size: 32px; }
  .bp-fee-table table { width: 100%; }
  .bp-fee-row td { font-size: 13px; padding: 8px 0; }
  .bp-deposit-note { font-size: 12.5px; line-height: 1.6; }
  .bp-panel-note { font-size: 12.5px; }

  /* Day-by-day itinerary: number rail slimmer, image full width under the text */
  .rt-itin-day, .rt-itin-day--media { grid-template-columns: 40px 1fr; gap: 0 14px; padding-bottom: 26px; }
  .rt-itin-num { width: 32px; height: 32px; font-size: 12px; }
  .rt-itin-body h3 { font-size: 18.5px; }
  .rt-itin-text { font-size: 15px; }
  .rt-itin-media { border-radius: 12px; }

  /* Arrival steps + dates: one per row */
  .rt-steps { grid-template-columns: 1fr; gap: 14px; }
  .rt-step img { height: 170px; }
  .rt-dates-grid { grid-template-columns: 1fr; gap: 10px; }
  .rt-date-card { padding: 12px 14px; font-size: 13.5px; }

  /* Landing page: trust items two-up and compact instead of five tall rows.
     The 1px gap IS the divider (the grid background shows through), so it must
     stay 1px — a larger gap renders as thick coloured bands. */
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1px; }
  .trust-grid span {
    min-height: 0; padding: 12px 14px;
    font-size: 12.5px; line-height: 1.4; gap: 8px; align-items: flex-start;
  }
  .trust-grid svg { margin-top: 2px; }
  .trust-accred-logos { grid-column: 1 / -1; justify-content: center; gap: 18px; padding: 14px 16px; flex-wrap: wrap; }
  /* odd number of items leaves a bare grid cell — fill it with the card colour */
  .trust-grid::after { content: ''; background: var(--white); }
  .trust-accred-logo { max-height: 26px; width: auto; }

  /* The tagline is truncated mid-word on a phone; `.top-strip span` outranks a
     plain class selector, so this needs the extra specificity. */
  .top-strip .top-strip-tagline { display: none; }

  /* Landing intro: kill the big empty gap between heading and copy */
  .split-grid { gap: 18px; }
  .split-grid p { font-size: 16px !important; line-height: 1.72 !important; }

  /* Section headings and body copy scale down */
  .section-heading.compact h2 { font-size: 27px; line-height: 1.2; }
  .schedule-header h2 { font-size: 27px; }

  /* Retreat cards: full-width buttons that never wrap awkwardly */
  .cc-actions { flex-direction: column; gap: 8px; }
  .cc-actions .btn { width: 100%; justify-content: center; }

  /* Gallery: single column, the first photo no longer forced 16:9 wide */
  .course-gallery { grid-template-columns: 1fr; gap: 10px; }
  .gallery-item, .gallery-item--wide { grid-column: auto; aspect-ratio: 4 / 3; }

  /* Inclusions tabs: equal thirds, no overflow */
  .inc-tabs-wrap { gap: 4px; }
  .inc-tab { flex: 1; min-width: 0; padding: 10px 6px; font-size: 11px; }
  .inc-tab svg { display: none; }

  /* FAQ block */
  .faq-layout { gap: 22px; }
  .faq-ans { padding: 14px 16px 16px; font-size: 14.5px; }
  summary { padding: 15px 16px; font-size: 14.5px; gap: 12px; }

  /* Final CTA: stacked, full-width buttons */
  .final-cta-inner { gap: 20px; }
  .final-cta-inner .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .final-cta-inner .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── Small phones ─────────────────────────────────────────── */
@media (max-width: 430px) {
  .rt-facts { gap: 14px 12px; }
  .rt-itin-day, .rt-itin-day--media { grid-template-columns: 34px 1fr; gap: 0 12px; }
  .rt-itin-num { width: 28px; height: 28px; font-size: 11px; }
  .detail-main h2, .ov-title, .section-heading.compact h2 { font-size: 24px; }
  .bp-from-value { font-size: 28px; }
  .rt-strip-item img { max-height: 26px; }
}

/* Retreat "a typical day" schedule on phones: the 72px time column squeezed
   both the range and the activity name onto three wrapped lines. Stack them. */
@media (max-width: 720px) {
  .rt-schedule-list .schedule-block,
  #rt-schedule .schedule-block {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    padding: 13px 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }
  #rt-schedule .sched-dot { display: none; }
  #rt-schedule .sched-time {
    font-size: 11px !important;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--gold); font-weight: 700;
  }
  #rt-schedule .schedule-block strong { font-size: 15px !important; }
  #rt-schedule .schedule-block p { display: block; font-size: 13.5px; margin-top: 3px; }
}

/* ── Retreat destinations — photo tiles on /retreat ───────────────────── */
.dest-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.dest-card {
  position: relative; display: block; overflow: hidden;
  border-radius: 14px; aspect-ratio: 4 / 3;
  background: var(--maroon-dark);
  text-decoration: none; isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease;
}
.dest-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transition: transform .5s ease;
}
.dest-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,10,4,.82) 0%, rgba(20,10,4,.30) 45%, rgba(20,10,4,.05) 100%);
}
a.dest-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
a.dest-card:hover img { transform: scale(1.06); }
.dest-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px 18px; color: #fff;
}
.dest-card-body strong { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: .01em; }
.dest-card-body small { font-size: 12.5px; color: rgba(255,255,255,.82); }
/* No photo yet — a branded tile rather than a broken-looking box */
/* same aspect as a photo tile, so rows never go ragged when only some
   destinations have images yet */
.dest-card--noimg {
  background: linear-gradient(150deg, var(--maroon-dark) 0%, #7a3410 60%, var(--gold) 160%);
}
.dest-card--noimg::after { background: none; }

@media (max-width: 720px) {
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dest-card { aspect-ratio: 4 / 3; border-radius: 12px; }
  .dest-card-body { padding: 12px 13px 14px; }
  .dest-card-body strong { font-size: 15px; }
  .dest-card-body small { font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════════════
   Students from around the world — course page #sec-global
   Admin: Courses → Edit → 🌍 Global Reach
   ══════════════════════════════════════════════════════════════ */
.intl-section {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: 96px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(212,160,32,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 92% 100%, rgba(184,80,0,.08) 0%, transparent 55%),
    linear-gradient(180deg, var(--light-bg) 0%, var(--cream) 60%);
}

/* Decorative scrolling flag ribbon pinned to the top edge */
.intl-ribbon {
  position: absolute; top: 0; left: 0; right: 0; height: 46px;
  overflow: hidden; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.intl-ribbon-track {
  display: flex; gap: 20px; width: max-content;
  font-size: 21px; line-height: 46px;
  animation: gr-ribbon-slide 70s linear infinite;
}
@keyframes gr-ribbon-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .intl-ribbon-track { animation: none; } }

.intl-heading { margin-bottom: 34px; }
.intl-intro {
  color: var(--muted); font-size: 17px; line-height: 1.65;
  margin-top: 14px; max-width: 720px;
}

/* ── Stat strip ── */
.intl-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm);
  margin-bottom: 34px;
}
.intl-stat { padding: 24px 18px; text-align: center; border-right: 1px solid var(--border); }
.intl-stat:last-child { border-right: 0; }
.intl-stat strong {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 36px; line-height: 1; color: var(--maroon);
}
.intl-stat span {
  display: block; margin-top: 9px; font-size: 12px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}

/* ── Country grid ── */
.intl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.intl-grid--collapsed .intl-card--extra { display: none; }

.intl-card {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; background: var(--white);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.intl-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 28px rgba(26,12,0,.10);
}
.intl-flag {
  flex: 0 0 auto; font-size: 30px; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(26,12,0,.18));
}
.intl-card-body { flex: 1 1 auto; min-width: 0; }
.intl-card-body strong {
  display: block; font-size: 15.5px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
}
.intl-card-body small {
  display: block; margin-top: 4px; font-size: 12.5px;
  line-height: 1.45; color: var(--muted);
}

/* Interest-level pill */
.intl-pill {
  flex: 0 0 auto; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.intl-pill--vhigh { background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%); color: #fff; }
.intl-pill--high  { background: #ffeddc; color: var(--maroon-dark); }
.intl-pill--mhigh { background: #f8f0dc; color: #8a6b12; }
.intl-pill--med   { background: #f2efec; color: var(--muted); }

/* ── Show all / show fewer ── */
.intl-more-wrap { display: flex; justify-content: center; margin-top: 26px; }
.intl-more {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--border);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: .02em; color: var(--maroon-dark);
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.intl-more:hover { border-color: var(--maroon); box-shadow: var(--shadow-sm); }
.intl-more svg { transition: transform var(--transition); }
.intl-more--open svg { transform: rotate(180deg); }

.intl-legend {
  margin-top: 22px; font-size: 13px; line-height: 1.6;
  color: var(--muted); max-width: 720px;
}

/* ── "What students search for" chips ── */
.intl-keys {
  margin-top: 40px; padding: 30px 32px;
  border: 1px solid var(--border); border-radius: 16px;
  background: linear-gradient(135deg, #fff7ee 0%, var(--white) 70%);
  box-shadow: var(--shadow-sm);
}
.intl-keys h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: 26px; line-height: 1.2; color: var(--ink); margin: 0;
}
.intl-keys > p { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); max-width: 660px; }
.intl-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.intl-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.3; color: var(--muted);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.intl-chip::before {
  content: ''; flex: 0 0 12px; width: 12px; height: 12px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c554e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat center / contain;
}
a.intl-chip:hover { border-color: var(--maroon); color: var(--maroon); transform: translateY(-1px); }

.intl-cta { margin-top: 32px; }

@media (max-width: 900px) {
  .intl-stats { grid-template-columns: 1fr; }
  .intl-stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .intl-stat:last-child { border-bottom: 0; }
  .intl-stat strong { font-size: 30px; }
}
@media (max-width: 640px) {
  .intl-section { padding-top: 84px; }
  .intl-grid { grid-template-columns: 1fr; gap: 12px; }
  .intl-card { flex-wrap: wrap; }
  .intl-card-body { flex: 1 1 calc(100% - 58px); }
  .intl-pill { margin-left: 58px; }
  .intl-keys { padding: 24px 20px; }
  .intl-keys h3 { font-size: 22px; }
  .intl-intro { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   Extra course-page blocks — admin: ✨ Page Blocks
   #sec-why · #sec-excursions · #sec-apply
   ══════════════════════════════════════════════════════════════ */

/* ── Why choose this TTC — icon cards ── */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.why-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px; background: var(--white);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.why-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow); }
.why-icon {
  width: 50px; height: 50px; flex: 0 0 auto; border-radius: 13px;
  display: grid; place-items: center;
  /* --maroon is the raw theme colour and can be far too light against a
     near-white chip; the deep mix stays readable whatever the admin picks. */
  color: var(--maroon-deep);
  background: #fff2e2;
  background: color-mix(in srgb, var(--maroon) 14%, #fff);
  border: 1px solid var(--border);
}
.why-icon svg { stroke-width: 2; }
.why-card h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.why-card p  { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }

/* ── Excursions & activities — photo tiles ── */
/* Uniform tiles on an auto-fill track: the block takes any number of
   excursions an admin adds, at any viewport, without a ragged mosaic. */
.exc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 18px; }
.exc-card {
  position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 4 / 3; isolation: isolate;
  background: var(--maroon-dark); box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.exc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(26,12,0,.20); }
.exc-card img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease;
}
.exc-card:hover img { transform: scale(1.06); }
.exc-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(18,9,3,.90) 0%, rgba(18,9,3,.55) 42%, rgba(18,9,3,.08) 100%);
}
.exc-card--noimg { background: linear-gradient(150deg, var(--maroon-dark) 0%, #7a3410 60%, var(--gold) 165%); }
.exc-card--noimg::after { background: none; }
/* Anchored to the bottom edge so copy never rides over the middle of the photo */
.exc-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 18px 20px;
}
.exc-body h3 { margin: 0; font-size: 17px; font-weight: 600; color: #fff; line-height: 1.28; }
.exc-body p  { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.86); }

/* ── How to apply — numbered steps ── */
.apply-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  counter-reset: apply;
}
.apply-step {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px 26px; background: var(--white);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
/* Connector between steps — the sequence made visible on wide screens */
.apply-step::after {
  content: ''; position: absolute; top: 44px; right: -18px; width: 18px;
  border-top: 1.5px dashed var(--border);
}
.apply-step:last-child::after { display: none; }
.apply-num {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color: #fff; font-family: var(--serif); font-size: 19px; font-weight: 600;
  box-shadow: 0 3px 10px rgba(184,80,0,.30);
}
.apply-step h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.apply-step p  { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.apply-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  margin-top: 30px; padding: 24px 28px;
  background: var(--light-bg); border: 1px solid var(--border); border-radius: 14px;
}
.apply-cta p { margin: 0; flex: 1 1 340px; font-size: 15px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1020px) {
  .why-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apply-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apply-step::after { display: none; }
}
@media (max-width: 640px) {
  .why-grid    { grid-template-columns: 1fr; }
  .apply-steps { grid-template-columns: 1fr; }
  .apply-cta { padding: 20px; }
}

/* ── Mobile tab bar: Cart entry ──────────────────────────────
   Hidden until the cart has something in it (site.js toggles
   .has-cart), because on mobile the header cart link sits inside
   the collapsed menu and there was otherwise no visible route
   back to checkout after adding a deposit. */
.tabbar-item--cart { display: none; }
.mobile-tabbar.has-cart .tabbar-item--cart { display: flex; }
.tabbar-cart-icon { position: relative; display: inline-grid; place-items: center; }
.tabbar-cart-badge {
  position: absolute; top: -5px; right: -9px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--maroon-dark); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Booking panel: currency tabs ────────────────────────────
   INR / USD / EUR are separately published prices, not conversions —
   the tabs pick which published amount to show. */
/* Row = published-currency tabs on the left, "Other currency" dropdown on the
   right. The dropdown converts from USD via includes/fx.php (display only). */
.bp-cur-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 8px; margin: 0 0 16px;
}
.bp-cur-row .bp-cur-tabs { margin: 0; flex: 0 0 auto; }
.bp-cur-row .bp-cur { padding: 6px 12px; }
/* The dropdown takes whatever width is left beside the tabs — never a new row. */
.bp-cur-other { display: flex; margin-left: auto; min-width: 0; flex: 1 1 0; max-width: 170px; }
.bp-cur-other select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 100%; min-width: 0; padding: 7px 26px 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.9);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  transition: background-color .18s, color .18s;
}
.bp-cur-other select:hover { color: #fff; }
.bp-cur-other select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bp-cur-other select.bp-cur-other--on {
  background-color: #fff; color: var(--maroon-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.bp-cur-other select option { color: #222; background: #fff; font-weight: 500; letter-spacing: 0; }
.bp-cur-note {
  margin: -8px 0 14px; font-size: 11.5px; line-height: 1.4;
  color: rgba(255,255,255,.78); font-style: italic;
}
.bp-cur-tabs {
  display: inline-flex; gap: 2px; margin: 0 0 16px;
  padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
}
.bp-cur {
  appearance: none; border: 0; cursor: pointer;
  padding: 6px 15px; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.82);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; line-height: 1;
  transition: background .18s, color .18s;
}
.bp-cur:hover { color: #fff; }
.bp-cur--on { background: #fff; color: var(--maroon-dark); }
.bp-cur:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── "Without accommodation" option in the room selector ──── */
.bjy-room-card--noaccom { border-style: dashed; }
.bjy-amenities--noaccom span { opacity: .78; font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   /apply — admissions application form
   ══════════════════════════════════════════════════════════════ */
.apply-section { background: linear-gradient(180deg, var(--light-bg) 0%, var(--cream) 55%); }
.apply-layout {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 48px; align-items: start;
}
.apply-aside h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12; margin: 12px 0 0; color: var(--ink);
}
.apply-lede { color: var(--muted); font-size: 16.5px; line-height: 1.65; margin: 14px 0 0; }

.apply-steps-list { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: ap; }
.apply-steps-list li {
  counter-increment: ap; position: relative;
  padding: 0 0 20px 44px; display: flex; flex-direction: column; gap: 3px;
}
.apply-steps-list li::before {
  content: counter(ap); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); border: 1.5px solid var(--border);
  color: var(--maroon); font-size: 13px; font-weight: 700;
}
.apply-steps-list li::after {
  content: ''; position: absolute; left: 13.5px; top: 30px; bottom: 4px;
  border-left: 1.5px dashed var(--border);
}
.apply-steps-list li:last-child { padding-bottom: 0; }
.apply-steps-list li:last-child::after { display: none; }
.apply-steps-list strong { font-size: 15px; color: var(--ink); }
.apply-steps-list span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

.apply-help { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.apply-help p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }

.apply-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 18px; padding: 34px 34px 30px; box-shadow: var(--shadow);
}
.apply-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.form-field .form-hint { font-size: 12px; color: var(--muted, #6b6b6b); line-height: 1.45; margin-top: -2px; }
.form-field .req { color: var(--maroon); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--white); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field textarea { resize: vertical; min-height: 96px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(184,80,0,.12);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #a89b90; }

.apply-consent { margin-top: 2px; }
.apply-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 400; }
.apply-check input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 18px; accent-color: var(--maroon); }
.apply-check span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.apply-error {
  margin: 18px 0 0; padding: 12px 15px; border-radius: 10px;
  background: #fdecec; border: 1px solid #f3c9c9; color: #8a3d3d;
  font-size: 14px; line-height: 1.5;
}
.apply-submit { margin-top: 22px; }
.apply-fineprint { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

.apply-done { text-align: center; padding: 26px 8px 12px; }
.apply-done-mark {
  width: 66px; height: 66px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  box-shadow: 0 8px 24px rgba(184,80,0,.28);
}
.apply-done h2 { font-family: var(--serif); font-weight: 600; font-size: 30px; margin: 0 0 12px; }
.apply-done p { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 0 auto; max-width: 46ch; }
.apply-done-sub { margin-top: 12px !important; font-size: 14px !important; }
.apply-done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

@media (max-width: 980px) {
  .apply-layout { grid-template-columns: 1fr; gap: 34px; }
  .apply-card { padding: 26px 22px 24px; }
}
@media (max-width: 620px) {
  .apply-grid { grid-template-columns: 1fr; }
  .apply-card { padding: 22px 18px 20px; border-radius: 14px; }
}

/* Checkout: the accommodation picker's reassurance line */
.co-room-note {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════
   Newsletter signup — footer (and reusable anywhere)
   ══════════════════════════════════════════════════════════════ */
.nl-signup {
  max-width: var(--container); margin: 0 auto;
  padding: 30px 0 6px; border-top: 1px solid rgba(255,255,255,.12);
}
.nl-heading {
  margin: 0 0 6px; font-family: var(--serif); font-weight: 600;
  font-size: 23px; line-height: 1.2; color: #fff;
}
.nl-blurb { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 56ch; }
.nl-row { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.nl-row input[type="email"] {
  flex: 1 1 240px; min-width: 0;
  padding: 12px 15px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08); color: #fff;
  font-family: var(--sans); font-size: 15px;
  transition: border-color var(--transition), background var(--transition);
}
.nl-row input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.nl-row input[type="email"]:focus {
  outline: none; border-color: var(--gold); background: rgba(255,255,255,.13);
}
.nl-btn {
  flex: 0 0 auto;
  background: #fff; color: var(--maroon-dark); border-color: #fff;
}
.nl-btn:hover { background: var(--cream); border-color: var(--cream); color: var(--maroon-deep); }
.nl-btn span { color: inherit; }
.nl-btn[disabled] { opacity: .65; cursor: default; }
.nl-msg { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; }
.nl-msg--ok  { color: #9fe0b8; }
.nl-msg--err { color: #ffb4a8; }
/* Honeypot — off-screen rather than display:none, which some bots skip */
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Unsubscribe confirmation page */
.unsub-card {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; padding: 40px 34px; box-shadow: var(--shadow-sm);
}
.unsub-card h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; margin: 0 0 14px; }
.unsub-card p { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 0 auto 10px; max-width: 46ch; }
.unsub-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

@media (max-width: 560px) {
  .nl-row { flex-direction: column; }
  .nl-btn { width: 100%; }
}

/* ══ Chat widget (assets/js/chat.js) ═════════════════════════════════════════
   Launcher stacks ABOVE the WhatsApp button on desktop, and mirrors it on the
   left on phones — the right-hand column there is already carrying WhatsApp,
   the section-menu button and the sticky booking bar. */
.oyc { --oyc-brand: var(--maroon-dark); position: fixed; right: 22px; bottom: 96px; z-index: 950; }
.oyc-launch {
  position: relative;
  width: 62px; height: 62px; border: none; border-radius: 50%;
  background: var(--oyc-brand); color: #fff; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.oyc-launch:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.34); }
.oyc.is-open .oyc-launch { transform: scale(.92); }

/* ── The face at the desk ────────────────────────────────────────────────────
   One photo carries the whole widget — launcher, ribbon, header, nudge and
   every reply bubble — so the chat reads as a person you can talk to rather
   than a robot icon. Without a photo the same markup shows initials. */
.oyc-face {
  position: relative; flex: none; display: block;
  border-radius: 50%; background: var(--cream);
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.18);
}
.oyc-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.oyc-face.is-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--oyc-brand); color: #fff; font-weight: 800; letter-spacing: .02em;
}
/* Emoji avatar — the default. A warm support face that belongs to nobody in
   particular, rather than a teacher's photograph on answers they never wrote. */
.oyc-face.is-emoji {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--cream) 70%, #f0e5d8 100%);
  line-height: 1;
}
.oyc-face--sm { width: 28px; height: 28px; font-size: 11px; }
.oyc-face--md { width: 42px; height: 42px; font-size: 15px; }
.oyc-face--lg { width: 100%; height: 100%; font-size: 20px; box-shadow: none; }
.oyc-face--sm.is-emoji { font-size: 15px; }
.oyc-face--md.is-emoji { font-size: 21px; }
.oyc-face--lg.is-emoji { font-size: 29px; }

/* "Someone is actually here" — the single most persuasive pixel on the page. */
.oyc-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #2fbf6b; border: 2px solid #fff;
  animation: oycPulse 2.4s ease-out infinite;
}
.oyc-face--lg .oyc-dot { width: 14px; height: 14px; right: 1px; bottom: 1px; }
@keyframes oycPulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,191,107,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(47,191,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,191,107,0); }
}
@media (prefers-reduced-motion: reduce) { .oyc-dot { animation: none; } }

/* The launcher becomes the avatar itself, in a white collar. */
.oyc.has-avatar .oyc-launch { background: #fff; padding: 3px; }
.oyc.has-avatar .oyc-launch-icon { display: none; }
.oyc-launch-face { display: none; width: 100%; height: 100%; }
.oyc.has-avatar .oyc-launch-face { display: block; }
/* A blinking green ring round the photo — "someone is here, tap to chat". */
.oyc.has-avatar .oyc-launch { box-shadow: 0 0 0 3px #2fbf6b, 0 6px 20px rgba(0,0,0,.28); }
.oyc.has-avatar .oyc-launch::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 3px solid #2fbf6b; opacity: 0; pointer-events: none;
  animation: oycHalo 1.8s ease-out infinite;
}
.oyc.is-open .oyc-launch::after { animation: none; opacity: 0; }
@keyframes oycHalo {
  0%   { transform: scale(1);    opacity: .9; }
  70%  { transform: scale(1.4);  opacity: 0; }
  100% { transform: scale(1.4);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .oyc.has-avatar .oyc-launch::after { animation: none; } }
/* "May I help you?" speech label to the left of the photo, tail pointing at it.
   Mirrors to the right of the photo when the launcher sits on the left. */
.oyc-launch-label {
  position: absolute; right: 76px; bottom: 14px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 18px;
  background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  animation: oycFloat 5s ease-in-out infinite;
}
.oyc-launch-label::after {
  content: ""; position: absolute; right: -6px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px; transform: rotate(45deg);
  background: #fff; border-top: 1px solid var(--border); border-right: 1px solid var(--border);
}
.oyc-left .oyc-launch-label { left: 76px; right: auto; }
.oyc-left .oyc-launch-label::after { left: -6px; right: auto; transform: rotate(-135deg); }
.oyc.is-open .oyc-launch-label { display: none; }
@media (prefers-reduced-motion: reduce) { .oyc-launch-label { animation: none; } }
/* Unread count. Red rather than brand-gold on purpose — this is the one thing
   on the launcher that has to read as "something is waiting for you". */
.oyc-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: #e23b2e; border: 2px solid #fff;
  color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  animation: oycPop .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes oycPop { from { transform: scale(0); } to { transform: scale(1); } }

/* Standing "Need help?" card above the bubble — a person offering to help,
   with a tail pointing down at the launcher they should press. */
.oyc-tab {
  position: absolute; right: 0; bottom: 80px;
  width: 268px; display: flex; align-items: center; gap: 11px;
  padding: 11px 30px 11px 11px;
  background: linear-gradient(140deg, #fff 0%, var(--cream) 100%);
  border: 1px solid var(--border); border-radius: 18px;
  color: var(--ink); text-align: left; cursor: pointer; user-select: none;
  box-shadow: 0 16px 38px rgba(0,0,0,.17), 0 2px 6px rgba(0,0,0,.06);
  animation: oycTabIn .5s cubic-bezier(.2,1.15,.35,1) both, oycFloat 5s ease-in-out 1.2s infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}
.oyc-tab:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(0,0,0,.22); }
/* Tail: a rotated square tucked under the card, on the launcher's side. */
.oyc-tab::after {
  content: ""; position: absolute; right: 25px; bottom: -6px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--cream);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.oyc-tab-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oyc-tab-text {
  font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--ink);
  letter-spacing: 0; text-transform: none;
}
.oyc-tab-sub { font-size: 11px; line-height: 1.35; color: var(--muted); }
.oyc-tab-go {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  color: var(--oyc-brand); opacity: .55; transition: transform .2s ease, opacity .2s ease;
}
.oyc-tab:hover .oyc-tab-go { opacity: 1; transform: translateY(-50%) translateX(2px); }
.oyc-tab-x {
  position: absolute; top: -9px; right: -7px;
  width: 22px; height: 22px; padding: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%; background: #fff;
  color: #7a6a5e; font-size: 15px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.oyc-tab-x:hover { background: #f3ece3; color: #000; }
.oyc-left .oyc-tab { left: 0; right: auto; }
.oyc-left .oyc-tab::after { left: 25px; right: auto; }
.oyc-left .oyc-tab-x { left: -7px; right: auto; }
@keyframes oycTabIn {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes oycFloat { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .oyc-tab { animation: oycTabIn .01s both; }
}
/* The proactive nudge and the standing ribbon share the same slot. Kept as two
   rules, not one list: a browser without :has() would throw away the whole
   selector list, and the is-open rule has to survive on its own. */
.oyc.is-open .oyc-tab { display: none; }
.oyc:has(.oyc-invite) .oyc-tab { display: none; }

.oyc-panel {
  position: absolute; right: 0; bottom: 74px;
  width: 370px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 190px);
  display: none; flex-direction: column; overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
}
.oyc.is-open .oyc-panel { display: flex; animation: oycIn .18s ease-out; }
@keyframes oycIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.oyc-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  background-color: var(--oyc-brand);
  background-image: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.16) 100%);
  color: #fff;
}
.oyc-head-face, .oyc-tab-face, .oyc-greet-face { display: flex; flex: none; }
.oyc-head-face .oyc-face { box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 2px 8px rgba(0,0,0,.22); }
.oyc-id { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.oyc-id strong { font-size: 15px; font-family: var(--serif); }
.oyc-status { font-size: 11.5px; opacity: .85; display: flex; align-items: center; gap: 5px; }
.oyc-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #6ff0a8; box-shadow: 0 0 0 2px rgba(111,240,168,.28);
}
.oyc-x { background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 2px; }
.oyc-x:hover { opacity: 1; }

.oyc-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.oyc-msg { max-width: 84%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; position: relative; }
.oyc-visitor { align-self: flex-end; background: var(--oyc-brand); color: #fff; border-bottom-right-radius: 4px; }
.oyc-bot, .oyc-agent { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--ink); }
.oyc-agent { border-color: var(--gold); }
/* Same avatar as the launcher, beside each reply — but only on the first bubble
   of a run, otherwise a long answer looks like five different people. Drawn in
   CSS so there is no extra element on every message. */
.oyc.has-avatar .oyc-bot, .oyc.has-avatar .oyc-agent { margin-left: 36px; }
.oyc.has-avatar .oyc-bot::before, .oyc.has-avatar .oyc-agent::before {
  position: absolute; left: -36px; bottom: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  box-shadow: 0 1px 5px rgba(0,0,0,.14);
}
.oyc.has-photo .oyc-bot::before, .oyc.has-photo .oyc-agent::before {
  content: "";
  background-color: var(--cream);
  background-image: var(--oyc-face); background-size: cover; background-position: center;
}
.oyc.has-emoji .oyc-bot::before, .oyc.has-emoji .oyc-agent::before {
  content: var(--oyc-emoji);
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--cream) 70%, #f0e5d8 100%);
  border: 1px solid var(--border);
}
.oyc.has-avatar .oyc-cont::before { display: none; }
.oyc-system { align-self: center; max-width: 100%; background: none; color: var(--muted); font-size: 11.5px; text-align: center; padding: 2px 8px; }
.oyc-who { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--maroon-dark); margin-bottom: 3px; }
.oyc-agent .oyc-who { color: #9a6b00; }
.oyc-body a { color: inherit; text-decoration: underline; }
.oyc-visitor .oyc-body a { color: #fff; }
/* Paragraphs and lists inside a bubble — see richBody() in chat.js. Tight
   spacing: this is a 300px column, not an article. */
.oyc-body p { margin: 0 0 7px; }
.oyc-body p:last-child { margin-bottom: 0; }
.oyc-body ul, .oyc-body ol { margin: 5px 0 7px; }
.oyc-body ul:last-child, .oyc-body ol:last-child { margin-bottom: 0; }
.oyc-body ul { list-style: none; padding-left: 1px; }
.oyc-body ul li { position: relative; padding-left: 14px; }
.oyc-body ul li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .45;
}
.oyc-body ol { padding-left: 19px; }
.oyc-body li { margin: 0 0 4px; }
.oyc-body li:last-child { margin-bottom: 0; }
.oyc-time { display: block; font-size: 10px; opacity: .55; margin-top: 4px; text-align: right; }
.oyc-system .oyc-time { display: none; }

.oyc-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.oyc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .45; animation: oycDot 1s infinite; }
.oyc-typing span:nth-child(2) { animation-delay: .15s; }
.oyc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes oycDot { 0%,60%,100% { transform: none; opacity: .35 } 30% { transform: translateY(-4px); opacity: .9 } }

.oyc-intro { padding: 14px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; }
/* Who the visitor is about to talk to, before they hand over their details. */
.oyc-greet {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 2px;
  background: #fff; border: 1px solid var(--border); border-radius: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.oyc-greet-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oyc-greet-copy strong { font-size: 13.5px; color: var(--ink); }
.oyc-greet-copy span { font-size: 11.5px; color: var(--muted); }
.oyc-intro p { margin: 0 0 2px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.oyc-intro label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink); }
.oyc-intro input { padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px; background: #fff; }
.oyc-intro input:focus { outline: 2px solid var(--maroon-dark); outline-offset: 1px; }
.oyc-start { padding: 11px; border: 0; border-radius: 10px; background: var(--oyc-brand); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.oyc-start:disabled { opacity: .6; cursor: default; }
.oyc-intro small { font-size: 11px; color: var(--muted); text-align: center; }
.oyc-error { color: #b3261e; font-size: 12.5px; margin: 0; }

/* Quick-reply options, inside the conversation under the reply they belong
   to. Once a newer set arrives the block is .is-used: same pills, rendered
   as plain text, nothing to tap. */
/* One chip per row, full width, text flush left — so every option starts on
   the same line whatever its length, instead of ragged pills of mixed widths
   with long labels wrapping centred. */
.oyc-options { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; width: 92%; max-width: 92%; }
.oyc.has-avatar .oyc-options { margin-left: 36px; width: calc(92% - 36px); }
.oyc-chip {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--ink); font: inherit; font-size: 12.5px; line-height: 1.3; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
button.oyc-chip:hover { border-color: var(--maroon-dark); color: var(--maroon-dark); }
.oyc-chip-human, .oyc-chip-lead { border-color: var(--maroon-dark); color: var(--maroon-dark); font-weight: 600; }
.oyc-chip-back { color: var(--muted); }
.oyc-options.is-used .oyc-chip {
  cursor: default; pointer-events: none; opacity: .55;
  background: var(--cream); border-style: dashed;
}

.oyc-composer { border-top: 1px solid var(--border); padding: 9px 12px 12px; background: #fff; }
.oyc-human {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-bottom: 9px; padding: 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: linear-gradient(180deg, #fff, var(--cream));
  color: var(--maroon-dark); font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.oyc-human:hover { border-color: var(--maroon-dark); background: rgba(138,57,0,.05); transform: translateY(-1px); }
.oyc-human svg { flex: none; }
.oyc-inputrow { display: flex; gap: 8px; align-items: center; }
.oyc-input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 14px; }
.oyc-input:focus { outline: 2px solid var(--maroon-dark); outline-offset: 1px; }
.oyc-send {
  width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 50%;
  background: var(--oyc-brand); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* Phones: mirror WhatsApp on the left, and clear the sticky booking bar */
@media (max-width: 720px) {
  .oyc { left: 16px; right: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body:has(.mobile-book-bar) .oyc { bottom: calc(154px + env(safe-area-inset-bottom, 0px)); }
  .oyc-launch { width: 56px; height: 56px; }
  /* The launcher mirrors to the left edge on phones, so the card and the nudge
     have to hang off the left too — anchored right they ran off-screen. */
  .oyc-tab, .oyc-invite { left: 0; right: auto; width: min(266px, calc(100vw - 30px)); bottom: 74px; }
  .oyc-tab::after, .oyc-invite::after { left: 22px; right: auto; }
  .oyc-tab-x { left: -7px; right: auto; }
  .oyc-tab { padding: 10px 26px 10px 10px; }
  .oyc-tab-text { font-size: 12.5px; }
  /* Launcher is on the left edge on phones → label goes to its right. */
  .oyc-launch-label { left: 68px; right: auto; bottom: 11px; font-size: 13px; padding: 7px 12px; }
  .oyc-launch-label::after { left: -6px; right: auto; transform: rotate(-135deg); }
  /* On a phone the chat is the task, not a widget in a corner — give it the
     screen so the conversation is readable and the keyboard has room. */
  .oyc-panel {
    position: fixed;
    left: 8px; right: 8px; bottom: 8px; top: 56px;
    width: auto; height: auto; max-height: none;
    border-radius: 16px;
  }
  .oyc-left .oyc-panel { left: 8px; right: 8px; }
}

/* Chat: left-hand placement, proactive invite bubble, rating */
.oyc-left { left: 22px; right: auto; }
.oyc-left .oyc-panel { left: 0; right: auto; }
.oyc-left .oyc-invite { left: 0; right: auto; }

.oyc-invite {
  position: absolute; right: 0; bottom: 80px;
  width: 268px; padding: 12px 28px 12px 12px;
  display: flex; align-items: flex-start; gap: 11px;
  background: linear-gradient(140deg, #fff 0%, var(--cream) 100%); color: var(--ink);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
  font-size: 13.5px; line-height: 1.5; cursor: pointer;
  animation: oycTabIn .45s cubic-bezier(.2,1.15,.35,1) both;
}
.oyc-invite::after {
  content: ""; position: absolute; right: 25px; bottom: -6px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--cream);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.oyc-left .oyc-invite::after { left: 25px; right: auto; }
.oyc-invite-text { min-width: 0; }
.oyc-invite-x {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.oyc.is-open .oyc-invite { display: none; }

.oyc-rate { align-self: center; text-align: center; padding: 14px 10px 4px; }
.oyc-rate p { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }
.oyc-stars { display: flex; gap: 6px; justify-content: center; }
.oyc-stars button {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: 26px; line-height: 1; color: var(--border);
}
.oyc-stars button.is-on { color: var(--gold); }
.oyc-rate-note {
  width: 100%; margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px;
}
.oyc-rate-done {
  margin-top: 8px; padding: 8px 16px; border: 0; border-radius: 8px;
  background: var(--oyc-brand); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}

@media (max-width: 720px) {
  .oyc-left { left: 16px; right: auto; }
  .oyc-invite { width: min(260px, calc(100vw - 48px)); }
}

/* Chat attachments */
.oyc-file { margin-top: 6px; }
.oyc-file img { max-width: 190px; max-height: 190px; border-radius: 9px; display: block; }
.oyc-file-doc { display: inline-block; padding: 7px 11px; border-radius: 8px; background: rgba(0,0,0,.05); font-size: 13px; text-decoration: none; }
.oyc-visitor .oyc-file-doc { background: rgba(255,255,255,.18); color: #fff; }
.oyc-attach {
  width: 34px; height: 34px; flex: 0 0 34px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.oyc-attach:hover { background: rgba(0,0,0,.05); color: var(--oyc-brand); }

/* ══ Share: one button + sheet, instead of a floating rail ═══════════════════
   The rail crowded the right edge next to chat and WhatsApp. On phones the
   Share button lives in the bottom tab strip; everywhere else it joins the
   floating stack. */
.share-fab {
  position: fixed; right: 22px; bottom: 170px; z-index: 940;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,252,248,.96); color: var(--maroon-dark);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  transition: transform .18s, box-shadow .18s;
}
.share-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
@media (max-width: 720px) { .share-fab { display: none; } }  /* the tab bar has it */

.share-sheet {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20,8,4,.5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.share-sheet[hidden] { display: none; }
.share-sheet-box {
  width: 100%; max-width: 340px; padding: 22px;
  background: var(--card, #fff); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  text-align: center;
}
.share-sheet-box h3 { margin: 0 0 14px; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.share-sheet-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.share-sheet-row a, .share-sheet-row button {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; text-decoration: none;
}
.share-sheet-close {
  margin-top: 16px; border: 0; background: none; color: var(--muted);
  font-size: 13.5px; cursor: pointer; text-decoration: underline;
}
@media (max-width: 560px) {
  .share-sheet { align-items: flex-end; padding: 0; }
  .share-sheet-box { max-width: none; border-radius: 18px 18px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); }
}

/* Share in the bottom tab strip (phones) */
.tabbar-item--share { background: none; border: 0; font: inherit; }

/* ══ Trustindex "Trusted Site" badge ═════════════════════════════════════════
   Their script pins it to a screen corner and keeps it floating over the page.
   We do not want a floating badge at all: it sits in normal flow directly
   under the Google review box (see render_trustindex_cert), where the rating
   it certifies actually is.

   Their JS writes an inline `position` after a delay, so every offset needs
   `!important` — a stylesheet `!important` still outranks a plain inline
   declaration, which is the only reason this holds. Both the widget and the
   button inside it have to be unpinned; unpinning just one leaves the other
   floating. */
.ti-cert {
  display: flex;
  justify-content: center;
  padding: 18px 0 4px;
}
.ti-cert-footer { padding: 8px 0 22px; }

.ti-widget.ti-certificate,
.ti-widget.ti-certificate .ti-sticky-button {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
}
.ti-widget.ti-certificate {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
/* Trustindex's certificate modal draws itself over the page on load. It is
   normally held out of view by the widget wrapper's fixed positioning and
   size — the very things unpinned above to move the badge into normal flow.
   It cannot be reached by a plain descendant or sibling selector: the loader
   inserts the modal and the badge as SIBLINGS, and inserts them in reverse
   order, so the modal precedes the badge in the DOM. The class below is put on
   and taken off by the guard in includes/trustindex-reviews.php. */
/* Belt and braces: loader-cert.js is no longer loaded at all (see
   includes/trustindex-reviews.php), but if a cached page still pulls it in, its
   full-screen modal backdrop must never be allowed to cover the page and eat
   clicks the way it did on 2026-09-01. */
.ti-modal-container { display: none !important; }

.oyi-ti-tab {
  position: fixed; left: 0; top: 50%; z-index: 940;
  text-decoration: none;
  /* vertical-rl + 180° turn makes the text read bottom-to-top and keeps the box
     naturally narrow and tall — no width/height arithmetic to get wrong. */
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  display: flex; align-items: center; gap: 7px;
  margin: 0; padding: 15px 9px; border: 0; border-radius: 6px;
  background: #17683f; color: #fff; cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  font-family: inherit; line-height: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  transition: background .18s ease, padding .18s ease;
}
.oyi-ti-tab:hover { background: #0f5433; padding-left: 13px; }
.oyi-ti-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Desktop only, matching trustindex_is_mobile_ua() on the server. */
@media (max-width: 1020px) { .oyi-ti-tab { display: none !important; } }
/* Phones never load the badge at all (trustindex_is_mobile_ua in
   includes/trustindex-reviews.php), so there is no mobile rule to write here.
   This belt-and-braces hide only matters for a desktop UA narrowed to phone
   width. */
@media (max-width: 1020px) {
  .ti-cert,
  .ti-widget.ti-certificate { display: none !important; }
}

/* ══ Student portal (/my-course) ═════════════════════════════════════════════
   Two layouts in one page: a narrow sign-in card, and the wider booking view
   once someone is in. Colours come from the theme variables so the admin's
   🎨 Theme Colour picker recolours this page with everything else. */
.stu-section { padding-top: 54px; }
.stu-container { max-width: 940px; }

/* ── sign in ── */
.stu-auth {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line, #e8ddd2);
  border-radius: 18px;
  padding: 34px 32px 28px;
  box-shadow: 0 10px 34px rgba(60, 30, 10, .06);
}
.stu-auth h1 { font-size: clamp(26px, 3.4vw, 33px); margin: 6px 0 10px; }
.stu-lede { color: var(--muted, #6d6055); font-size: 15.5px; line-height: 1.65; margin: 0 0 22px; }

.stu-form { display: flex; flex-direction: column; gap: 8px; }
.stu-form label { font-size: 13.5px; font-weight: 600; color: #4a3a2e; }
.stu-form input[type="email"],
.stu-form input[type="text"] {
  width: 100%;
  padding: 13px 14px;
  font-size: 16px;                 /* 16px stops iOS zooming the page on focus */
  border: 1px solid var(--line, #e0d3c5);
  border-radius: 10px;
  background: #fffdfb;
  font-family: inherit;
}
.stu-form input:focus {
  outline: none;
  border-color: var(--brand, #8a3900);
  box-shadow: 0 0 0 3px rgba(138, 57, 0, .12);
}
.stu-form .btn { margin-top: 12px; }

/* The code itself: monospaced and spaced out, because it is case-sensitive and
   a proportional face makes look-alike characters worse, not better. */
.stu-code-input {
  font-family: "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 24px !important;
  letter-spacing: 7px;
  text-align: center;
  padding: 15px 12px !important;
}
.stu-hint { font-size: 12.5px; color: var(--muted, #8a7a6d); margin: 2px 0 0; line-height: 1.5; }
.stu-sent-to { font-size: 14px; color: #4a3a2e; margin: 0 0 6px; }

.stu-resend {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line, #efe5da);
}
.stu-linkbtn {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px;
  color: var(--brand, #8a3900); text-decoration: underline; cursor: pointer;
}
.stu-help { font-size: 13px; color: var(--muted, #8a7a6d); margin: 18px 0 0; line-height: 1.6; }
.stu-help a { color: var(--brand, #8a3900); }

.stu-alert { border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.stu-alert--ok    { background: #f0f7ef; border: 1px solid #cfe4cb; color: #2f5c2a; }
.stu-alert--error { background: #fdf0ec; border: 1px solid #f0cec2; color: #8a3418; }

/* ── signed in ── */
.stu-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.stu-head h1 { font-size: clamp(27px, 3.6vw, 36px); margin: 6px 0 8px; }
.stu-head .stu-lede { margin: 0; }

.stu-card {
  background: #fff;
  border: 1px solid var(--line, #e8ddd2);
  border-radius: 18px;
  padding: 26px 26px 22px;
  margin-bottom: 20px;
  box-shadow: 0 8px 28px rgba(60, 30, 10, .05);
}
.stu-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.stu-card-head h2 { font-size: 21px; margin: 0 0 4px; line-height: 1.35; }
.stu-card-sub { font-size: 13.5px; color: var(--muted, #8a7a6d); margin: 0; }

.stu-pill {
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.stu-pill--paid    { background: #eaf5e8; color: #2f6b28; }
.stu-pill--pending { background: #fdf3e3; color: #8a5c00; }

.stu-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 22px; margin: 0 0 18px; padding: 18px 0 0;
  border-top: 1px solid var(--line, #f0e7dc);
}
.stu-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #9a8b7d); margin-bottom: 4px; }
.stu-facts dd { margin: 0; font-size: 15.5px; color: #33261c; font-weight: 600; line-height: 1.4; }
.stu-mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px !important; font-weight: 500 !important; word-break: break-all; }

.stu-balance {
  background: #fdf8f3; border-left: 3px solid var(--brand, #8a3900);
  padding: 12px 15px; border-radius: 0 8px 8px 0;
  font-size: 14px; line-height: 1.6; color: #4a3a2e; margin: 0 0 18px;
}
.stu-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Fee / paid / balance strip — figures the team maintains in Admin → Students. */
.stu-money {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin: 0 0 18px; padding: 16px 18px; border-radius: 12px;
  background: #fdf8f3; border: 1px solid var(--line, #f0e7dc);
}
.stu-money div { display: flex; flex-direction: column; gap: 3px; }
.stu-money span { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #9a8b7d); }
.stu-money strong { font-size: 19px; color: #33261c; line-height: 1.2; }
.stu-money-paid { color: #2f6b28 !important; }
.stu-money-bal strong { color: var(--brand, #8a3900) !important; font-size: 22px; }
.stu-facts--arrival { border-top: none; padding-top: 0; }

.stu-empty { text-align: center; padding: 40px 20px; color: var(--muted, #6d6055); }
.stu-empty p { margin-bottom: 18px; line-height: 1.65; }

.stu-next {
  background: #fdf8f3; border: 1px solid var(--line, #eee0d2);
  border-radius: 16px; padding: 24px 26px; margin-top: 26px;
}
.stu-next h3 { font-size: 17px; margin: 0 0 12px; }
.stu-next ul { margin: 0 0 14px; padding-left: 18px; }
.stu-next li { font-size: 14.5px; line-height: 1.9; }
.stu-next a { color: var(--brand, #8a3900); }
.stu-next-note { font-size: 13.5px; color: var(--muted, #7a6b5d); line-height: 1.65; margin: 0; }

@media (max-width: 640px) {
  .stu-auth { padding: 26px 20px 22px; border-radius: 14px; }
  .stu-card { padding: 20px 18px 18px; }
  .stu-code-input { font-size: 21px !important; letter-spacing: 5px; }
  .stu-head { flex-direction: column; }
}

/* ── Section galleries (lightbox) ──────────────────────────────────────────
   Every container carrying data-lb-group is one gallery "category": click a
   photo to enlarge, ← / → to move within that section, Esc or the backdrop to
   close. See bindLightbox() in site.js. */
.lb-zoomable img,
.lb-zoomable video { cursor: zoom-in; }

body.lb-open { overflow: hidden; }

.lb {
  position: fixed; inset: 0; z-index: 4000;
  display: none; align-items: center; justify-content: center;
  background: rgba(16, 12, 10, .93);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: 44px 20px 88px;
  opacity: 0; transition: opacity .2s ease;
}
.lb.is-open { display: flex; opacity: 1; }
.lb:focus { outline: none; }
.lb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 168px;
  background: linear-gradient(transparent, rgba(16, 12, 10, .55) 42%, rgba(16, 12, 10, .92));
  pointer-events: none;
}

.lb-stage { margin: 0; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.lb-media { display: flex; align-items: center; justify-content: center; max-width: 100%; min-height: 0; }
.lb-img {
  /* 80% of the viewport width is the target size. height:auto keeps the aspect
     ratio, and max-height is only a guard — a tall portrait or a short window
     scales the width back down rather than letting the photo run off screen. */
  display: block; width: 80vw; max-width: 80vw; height: auto;
  max-height: calc(100vh - 132px); object-fit: contain;
  border-radius: 8px; box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
  animation: lbIn .22s ease;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.lb-cap {
  position: absolute; z-index: 1; bottom: 52px; left: 50%; transform: translateX(-50%);
  width: min(720px, 88vw); text-align: center; color: #fff;
}
.lb-set {
  display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold, #c49445); margin-bottom: 6px;
}
.lb-text { display: block; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .92); }

.lb-count {
  position: absolute; z-index: 1; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; letter-spacing: .08em; color: rgba(255, 255, 255, .72);
}

.lb-close, .lb-nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; border-radius: 50%; cursor: pointer; padding: 0; z-index: 2;
  transition: background .15s, border-color .15s, transform .15s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--gold, #c49445); outline-offset: 3px; }
.lb-close svg, .lb-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.lb-close { top: 18px; right: 18px; width: 46px; height: 46px; }
.lb-nav { top: 50%; margin-top: -25px; width: 50px; height: 50px; }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-prev:hover { transform: translateX(-2px); }
.lb-next:hover { transform: translateX(2px); }

@media (max-width: 720px) {
  .lb { padding: 54px 8px 92px; }
  .lb-img { max-height: calc(100vh - 158px); }
  .lb-cap { bottom: 76px; }
  .lb-count { bottom: 30px; }
  /* Arrows sit low and clear of the photo on phones — swiping also works. */
  .lb-nav { top: auto; bottom: 18px; margin-top: 0; width: 44px; height: 44px; }
  .lb-prev { left: calc(50% - 74px); }
  .lb-next { right: calc(50% - 74px); }
  .lb-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb-img { transition: none; animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   SEO / AEO — breadcrumb trail + quick-answer box
   Both are real, visible page content. The quick answer exists so
   an answer engine has one short, self-contained passage to quote
   instead of stitching one together from the marketing copy — and
   so a visitor in a hurry gets the same passage.
   ══════════════════════════════════════════════════════════════ */
.breadcrumbs {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 10px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.breadcrumbs li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.breadcrumbs li + li::before { content: "›"; opacity: .55; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--maroon); text-decoration: underline; }
.breadcrumbs li[aria-current="page"] { color: var(--ink); font-weight: 600; }

.seo-answer { padding: 28px 0 0; }
.seo-answer-box {
  border-left: 3px solid var(--maroon);
  background: var(--light-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
}
.seo-answer-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--maroon); margin-bottom: 6px;
}
.seo-answer-box p {
  margin: 0; font-size: 16.5px; line-height: 1.72; color: var(--ink);
}
@media (max-width: 640px) {
  .seo-answer-box p { font-size: 15.5px; }
  .breadcrumbs { font-size: 12px; }
}

/* ── "What you will learn" icon tiles (course overview) ──────────────
   Built by learn_topics_html() from the admin's bullet-separated line.
   The .ov-body typography rules force 16px on every span, so the label
   size below has to be !important too. */
.wyl { margin: 22px 0 6px; }
.wyl-title {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px !important;
  line-height: 1.3 !important;
}
.wyl-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 14px;
}
.wyl-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--cream);
  min-height: 60px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.wyl-item:hover { border-color: var(--maroon); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.wyl-ico {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--maroon);
}
.wyl-ico svg { width: 22px; height: 22px; display: block; }
.ov-body .wyl-label {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 560px) {
  .wyl-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wyl-item { gap: 9px; padding: 9px 10px; min-height: 54px; border-radius: 10px; }
  .wyl-ico { flex-basis: 34px; width: 34px; height: 34px; }
  .wyl-ico svg { width: 18px; height: 18px; }
  .ov-body .wyl-label { font-size: 12.5px !important; }
}

/* ── Phones: course credential seal in the hero's top-right corner ──
   The seal strip under the hero used to need a tall empty band at the bottom
   of the banner (the dark part of the overlay). On phones the strip is hidden,
   a copy of the badges sits top-right inside the banner (.hero-seal-corner,
   rendered by page_hero) and the band is cut off. Selectors are heavier than
   the template-b.css rules they replace. */
.hero-seal-corner { display: none; }
@media (max-width: 720px) {
  .hero-seal-corner {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
    position: absolute; top: 12px; right: 14px; z-index: 3; max-width: 46%;
  }
  .hero-seal-corner img {
    width: 56px; height: 56px; padding: 5px; border-radius: 50%;
    background: #fff; object-fit: contain;
    box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 8px 20px rgba(0,0,0,.28);
  }
  body .hero-ya-bar.hero-ya-bar--on-hero { display: none; }
  body .page-hero.page-hero--with-seal { min-height: 0; }
  .page-hero.page-hero--with-seal .page-hero-inner,
  body.tpl-b .page-hero.page-hero--with-seal .page-hero-inner { padding-top: 26px; padding-bottom: 26px; }
  /* The eyebrow line keeps the title clear of the badge */
  .page-hero.page-hero--with-seal .page-hero-inner > .eyebrow { display: block; min-height: 50px; padding-right: 84px; }
}

/* ── "Your batch" button (course side panel + checkout) → batch pop-up ── */
.booking-panel .bp-batches { margin: 0 0 14px; }
.bp-batches .bp-fee-title, .co-batch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bp-batches .bp-fee-title span, .co-batch-head span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 12px; }
.co-batch-head { margin: 0 0 8px; font-weight: 700; font-size: 15px; color: var(--ink); }
.batch-pick-btn {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: #fff0dc; border: 1.5px solid var(--maroon); color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(184,80,0,.12); font-family: var(--sans);
  transition: box-shadow .15s, transform .15s;
}
.batch-pick-btn:hover { box-shadow: 0 0 0 4px rgba(184,80,0,.2); }
.batch-pick-btn svg { flex: 0 0 auto; }
.batch-pick-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.batch-pick-txt small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.batch-pick-txt strong { font-size: 15px; font-weight: 700; color: var(--maroon-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-pick-cta {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 99px;
  background: var(--maroon); color: #fff; font-size: 12.5px; font-weight: 700;
}
/* Desktop: the pop-up is a centred dialog rather than a bottom sheet */
@media (min-width: 761px) {
  .bsheet-panel {
    left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 48px)); max-height: 80vh; border-radius: 18px;
    padding: 20px 22px 22px; animation: bsheetFade .18s ease-out;
  }
  .bsheet-grip { display: none; }
}
@keyframes bsheetFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Checkout: compact banner so the batch cards are on the first screen ── */
body[data-page="checkout"] .page-hero { min-height: 0; }
body[data-page="checkout"] .page-hero .hero-video { display: none; }
body[data-page="checkout"] .page-hero-inner { padding: 30px 0 26px; }
body[data-page="checkout"] .page-hero h1 { font-size: clamp(30px, 3.4vw, 42px); margin: 6px 0 6px; }
body[data-page="checkout"] .page-hero p { font-size: 15px; }
body[data-page="checkout"] .page-hero + .section,
body[data-page="checkout"] .section:has(.co-single) { padding-top: 28px; }
.co-single .co-batch-slot[data-batch-slot] { margin-bottom: 18px; }
.co-single .co-batch-slot[data-batch-slot] .co-batch-cards { margin: 0; }
@media (max-width: 760px) {
  body[data-page="checkout"] .page-hero-inner { padding: 20px 0 18px; }
  body[data-page="checkout"] .page-hero p { display: none; }
  body[data-page="checkout"] .co-steps { margin-bottom: 16px; }
}