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

:root {
  --maroon:      #7a2c38;
  --maroon-dark: #4e1520;
  --maroon-deep: #2e0c14;
  --gold:        #c49445;
  --cream:       #fdf8f2;
  --white:       #ffffff;
  --ink:         #1a0e12;
  --muted:       #6b595c;
  --border:      #e5d8da;
  --light-bg:    #faf0f1;
  --charcoal:    #18080c;
  --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);
  --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; }

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: inherit; }
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;
  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 span {
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--maroon); color: var(--white);
  font-size: 11px; font-weight: 700;
}
.menu-toggle { display: none; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  min-height: 90svh; position: relative;
  display: flex; align-items: center; justify-content: center;
  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(30, 8, 14, 0.52) 0%,
    rgba(30, 8, 14, 0.68) 45%,
    rgba(30, 8, 14, 0.88) 100%
  );
}

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 80px 0 64px;
  width: min(100% - 48px, 960px);
}

.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 inside hero */
.hero-panel {
  display: flex; flex-wrap: wrap; justify-content: center;
  width: 100%; margin-top: 64px; padding-top: 44px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-panel div {
  text-align: center; padding: 0 40px;
  border-right: 1px solid rgba(255,255,255,0.18);
}
.hero-panel div:last-child { border-right: 0; }
.hero-panel strong {
  display: block; font-family: var(--serif);
  font-size: 38px; font-weight: 400; line-height: 1; letter-spacing: -0.01em;
}
.hero-panel span {
  display: block; margin-top: 6px;
  color: rgba(255,255,255,0.6); font-size: 11px;
  letter-spacing: 0.12em; 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 { background: var(--maroon); color: var(--white); }
.btn-primary:hover {
  background: var(--maroon-dark); transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(78, 21, 32, 0.38);
}
.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.48); color: var(--white); }
.btn-ghost:hover {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.72);
  transform: translateY(-1px);
}
.btn-light { background: var(--white); 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%; }

/* ── 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); }
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 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;
}

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 100px 0; }
.muted-section { background: var(--light-bg); }
.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; }
.section-heading.compact { display: block; }

/* ── Card grids ──────────────────────────────────────────── */
.course-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 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;
}

/* ── Cards ───────────────────────────────────────────────── */
.course-card, .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: vertical single column, image ≤ 30% of card */
.course-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.course-card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-4px);
}
/* Image strip — fixed narrow height so it stays ≤ 30% */
.course-card .card-media {
  aspect-ratio: unset;
  height: 160px;
  flex: 0 0 160px;
  width: 100%;
}
/* Body fills remaining 70%+ */
.course-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 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;
}
.course-card:hover .card-media img,
.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: stacked rows */
.course-card .course-facts div { grid-template-columns: 90px 1fr; gap: 6px; }
.course-card .course-facts { gap: 7px; margin: 14px 0; }
/* Push card actions to bottom */
.course-card .card-actions { margin-top: auto; padding-top: 16px; }
.course-facts dt {
  color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.course-facts dd { margin: 0; font-weight: 700; font-size: 15px; }
.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); color: var(--white); border-color: var(--maroon); }

.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; }

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

.booking-panel, .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: grid; gap: 12px; }

details {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px;
  transition: border-color var(--transition);
}
details:hover { border-color: var(--maroon); }
summary { cursor: pointer; font-weight: 600; font-size: 16px; }
details p { color: var(--muted); margin: 14px 0 0; }

/* ── 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(--charcoal); color: var(--white); }

.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: rgba(255,255,255,0.92);
}
.footer-inner h3 {
  font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0 0 18px;
  color: rgba(255,255,255,0.88); letter-spacing: 0.02em;
}
.footer-inner p, .footer-inner li { color: rgba(255,255,255,0.58); font-size: 14px; line-height: 1.7; }
.footer-inner ul { display: grid; gap: 10px; }
.footer-inner a { transition: color var(--transition); }
.footer-inner a:hover { color: rgba(255,255,255,0.9); }

.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.09);
  color: rgba(255,255,255,0.38); font-size: 13px;
}

/* ── 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: 4px 10px;
  background: var(--maroon); color: var(--white);
  border-radius: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
}
.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) ─────────────────────────────────── */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.why-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.why-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.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  { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }

/* ── 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(122,44,56,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; }
.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); color: var(--white);
  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); color: var(--white); }

.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; }

/* 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); border-color: var(--maroon); color: var(--white); }

/* 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); }

/* ── 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-image-wrap img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.cert-label {
  display: inline-block; margin-top: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* ── 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; }

/* ── 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 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); }

  .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 { min-height: 82svh; }
  .hero-inner { padding: 70px 0 44px; }
  .hero-accred { padding: 16px 18px; gap: 14px; }
  .hero-accred-logo { height: 44px; }
  .hero-accred-divider { display: none; }
  .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: 64px 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;
  }
  .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; }
  .courses-layout { grid-template-columns: 1fr; }
  .courses-sidebar { position: static; }
  .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; }
  .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.
   ════════════════════════════════════════════════════════════ */

/* ── Maroon (default) ────────────────────────────────────── */
[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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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);
  color: var(--white);
  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-dark);
  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; }
}