/* ============================================================
   Mathe Oase — design system + page styles
   Order: tokens → base → shared chrome → bg system
        → catalog → landing sections → courses → contact
   ============================================================ */

:root {
  /* Sand / stone (lightest to mid) */
  --sand-0:      #fffaf4;
  --sand-1:      #f7eadc;
  --sand-2:      #ead0ad;
  --stone:       #f0e7e3;
  --stone-deep:  #d8c3aa;

  /* Inks */
  --ink:         #2f3037;
  --ink-soft:    #6f6a67;
  --ink-faint:   #b9b3b0;

  /* Browns (warm accents — kept for compat with earlier code) */
  --warm-1:      #ffdda8;
  --warm-2:      #eab883;
  --warm-3:      #b76935;
  --warm-4:      #72472a;
  --warm-pop:    #e05f2d;

  /* Blues (oasis water — primary action) */
  --blue-pale:   #ade8f4;
  --oasis-light: #79d7e8;
  --oasis:       #0077b6;
  --oasis-deep:  #023e8a;
  --teal-night:  #002736;
  --teal-night-2:#001923;

  /* Gold (cherry-picked from reference) */
  --gold-light:  #f2d18a;
  --gold:        #d7a848;
  --gold-dark:   #8b6021;

  /* Legacy alias (some catalog code uses these) */
  --bg:          #f0e7e3;
  --bg-elevated: #ffffff;
  --bg-warm:     #fbf2ee;

  /* Surfaces / rules */
  --rule:        rgba(47, 48, 55, 0.12);
  --rule-soft:   rgba(47, 48, 55, 0.06);
  --rule-gold:   rgba(215, 168, 72, 0.42);

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(47, 48, 55, 0.06), 0 1px 2px rgba(47, 48, 55, 0.04);
  --shadow-md:   0 16px 36px rgba(84, 49, 21, 0.10);
  --shadow-lg:   0 24px 60px rgba(84, 49, 21, 0.16);
  --shadow-nav:  0 12px 30px rgba(0, 14, 20, 0.22);
  --shadow-blue: 0 14px 28px rgba(0, 119, 182, 0.28);

  /* Type */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --nav-height:    76px;
  --content-max:   1120px;
  --content-narrow:760px;
  --section-gap:   18px;

  /* Radii */
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}
html { scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }


/* ============================================================
   Snap-scroll mechanics (landing page only — opt-in via
   data-snap-scroll on body)
   The scroll container is <html>, so snap-type goes there.
   ============================================================ */
html:has(body[data-snap-scroll]) {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
body[data-snap-scroll] .section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Footer should not be a snap target on landing — it's free-flowing
   at the end. */
body[data-snap-scroll] .site-footer {
  scroll-snap-align: none;
}

/* Hero: full viewport height (using dynamic vh for mobile correctness),
   image fills entire visible area including under the (hidden) nav. */
body[data-snap-scroll] .section-hero {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}
body[data-snap-scroll] .section-hero .section-bg {
  inset: 0;
}

/* Sections 2-9: viewport minus nav. Image fills exactly that visible
   area — top edge of artwork sits just below nav, bottom edge at
   bottom of viewport.

   scroll-margin-top tells the snap engine to align the section's top
   nav-height pixels below viewport top — putting the section's top
   right under the nav, with the section filling exactly the remaining
   visible space. No clipping, no gap. */
body[data-snap-scroll] .section-with-bg {
  height: calc(100vh - var(--nav-height));
  height: calc(100dvh - var(--nav-height));
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  scroll-margin-top: var(--nav-height);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
body[data-snap-scroll] .section-with-bg .section-bg {
  inset: 0;
}
body[data-snap-scroll] .section-with-bg .section-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 2rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(47,48,55,0.2) transparent;
}
body[data-snap-scroll] .section-with-bg .section-overlay::-webkit-scrollbar {
  width: 6px;
}
body[data-snap-scroll] .section-with-bg .section-overlay::-webkit-scrollbar-thumb {
  background: rgba(47,48,55,0.2);
  border-radius: 3px;
}
body[data-snap-scroll] .section-with-bg .section-overlay::-webkit-scrollbar-track {
  background: transparent;
}

body[data-snap-scroll] .section-gap { display: none; }

@media (max-width: 760px) {
  body[data-snap-scroll] .section-with-bg .section-overlay {
    padding: 1.5rem 1.25rem;
  }
}

/* ============================================================
   Page-wide fixed background (catalog, courses, contact)
   ============================================================ */
.page-with-fixed-bg {
  position: relative;
  background: transparent;
}
body.page-with-fixed-bg { background: transparent; }

.page-bg {
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0; bottom: 0;
  z-index: -2;
  pointer-events: none;
}
.page-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Default overlay for courses/contact (kept warm-translucent for readability).
   Catalog overrides this to remove the wash entirely. */
.page-bg-overlay {
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,250,244,0.10), rgba(255,250,244,0.55) 60%, rgba(255,250,244,0.78));
}

/* On mobile we don't fix the bg — let it scroll with the page */
@media (max-width: 760px) {
  /* Background stretches from the bottom of the nav to the top of
     the slim footer — no gap. object-fit: cover on the img fills
     the band regardless of the image's own aspect ratio. */
  .page-bg {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: var(--footer-mini-height-slim);
    width: auto;
    height: auto;
    z-index: 0;
  }
  .page-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .page-bg-overlay {
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    bottom: var(--footer-mini-height-slim);
    height: auto;
    z-index: 0;
  }
  .page-with-fixed-bg > *:not(.page-bg):not(.page-bg-overlay):not(.site-nav):not(.site-footer-mini) {
    position: relative;
    z-index: 1;
  }
}


/* ============================================================
   Per-section background (landing page)
   ============================================================ */
.section-with-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section-overlay {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, rgba(255,250,244,0.62), rgba(255,250,244,0.78));
  padding: 6rem 2rem;
}
.section-overlay-dark {
  background: linear-gradient(180deg, rgba(0,25,35,0.62), rgba(0,25,35,0.82));
  color: var(--sand-0);
}

/* Section-gap: thin gold (or blue) separator between scenes */
.section-gap {
  height: var(--section-gap);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
.section-gap-blue {
  background: linear-gradient(90deg, transparent, var(--oasis), transparent);
}


/* ============================================================
   Shared nav (cherry-picked from reference: dark teal-night
   with gold ornament lines)
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(0,14,20,0.12), transparent 18%, transparent 82%, rgba(0,14,20,0.14)),
    radial-gradient(circle at 50% 50%, rgba(45,199,255,0.16), transparent 42%),
    linear-gradient(90deg, var(--teal-night-2), var(--teal-night) 50%, var(--teal-night-2));
  border-bottom: 1px solid var(--rule-gold);
  box-shadow: var(--shadow-nav);
  color: var(--sand-0);
  transform: translateY(0);
  transition: transform 380ms cubic-bezier(0.2, 0, 0.2, 1),
              opacity 380ms ease;
}
.site-nav::before,
.site-nav::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.site-nav::before { top: 10px; }
.site-nav::after  { bottom: 10px; }

.site-nav-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.site-nav-scrolled {
  background:
    linear-gradient(180deg, rgba(0,14,20,0.18), transparent 18%, transparent 82%, rgba(0,14,20,0.22)),
    radial-gradient(circle at 50% 50%, rgba(45,199,255,0.14), transparent 42%),
    linear-gradient(90deg, var(--teal-night-2), var(--teal-night) 50%, var(--teal-night-2));
}

.site-nav-inner {
  width: min(var(--content-max), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--sand-0);
}
.site-nav-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 209, 138, 0.15), transparent 62%);
  box-shadow: inset 0 0 18px rgba(242, 209, 138, 0.12);
  font-size: 1.1rem;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  font-size: 0.95rem;
  color: rgba(255, 250, 244, 0.82);
}
.site-nav-links a {
  position: relative;
  padding: 0.5rem 0;
  transition: color 160ms ease;
}
.site-nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
}
.site-nav-links a:hover { color: var(--sand-0); }
.site-nav-links a:hover::after { transform: scaleX(1); }
.site-nav-links a[aria-current="page"] { color: var(--gold-light); }
.site-nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.site-nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.site-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--sand-0);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}

@media (max-width: 760px) {
  .site-nav-inner {
    padding: 0 0.25rem;
    position: relative;   /* positioning context for the centered wordmark */
  }
  .site-nav-toggle { display: flex; }

  /* On mobile, the wordmark is pulled out of the brand-link's
     inline flow and centered in the whole nav bar — logo stays
     left (in the brand link), hamburger stays right, wordmark
     floats dead-center between them. Stays put when the dropdown
     menu opens (the menu appears below the nav, untouched). */
  .site-nav-brand-text-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* height/max-width still come from the brand-asset knobs */
    pointer-events: none;   /* taps fall through to the nav bar */
  }

  .site-nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    z-index: 1001;
    background: var(--teal-night);
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--rule-gold);
    box-shadow: 0 12px 24px rgba(0,14,20,0.45);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .site-nav-open .site-nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav-links a {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(242,209,138,0.12);
    font-size: 1rem;
  }
  .site-nav-links a:last-child { border-bottom: 0; }
  .site-nav-open .site-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav-open .site-nav-toggle span:nth-child(2) { opacity: 0; }
  .site-nav-open .site-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}


/* ============================================================
   Body offset so content doesn't slide under the nav.
   Pages with a fixed bg manage their own top spacing per element
   (the bg image and overlay sit below the nav already) — they
   shouldn't get a body padding-top, otherwise the bg gets pushed.
   ============================================================ */
body:not([data-hide-nav-until-hero]):not(.page-with-fixed-bg) {
  padding-top: var(--nav-height);
}


/* On page-with-fixed-bg pages, the first content section needs to clear
   the nav. Catalog handles this via its breadcrumb's margin-top. Other
   pages use their hero section's padding-top. */
.page-with-fixed-bg .courses-hero,
.page-with-fixed-bg .contact-hero {
  padding-top: calc(var(--nav-height) + 4rem);
}
@media (max-width: 760px) {
  .page-with-fixed-bg .courses-hero,
  .page-with-fixed-bg .contact-hero {
    padding-top: calc(var(--nav-height) + 2rem);
  }
}

/* ============================================================
   Footer (with bg image)
   ============================================================ */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 4.5rem 2rem 2.5rem;
  color: rgba(255, 250, 244, 0.86);
}
.site-footer-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.site-footer-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.65)),
    radial-gradient(circle at 12% 100%, rgba(215,168,72,0.18), transparent 22%),
    radial-gradient(circle at 88% 100%, rgba(215,168,72,0.18), transparent 22%);
}
.site-footer-inner {
  width: min(var(--content-max), 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.site-footer-brand {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--sand-0);
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.site-footer-links a {
  font-size: 0.95rem;
  color: rgba(255, 250, 244, 0.78);
  transition: color 160ms ease;
}
.site-footer-links a:hover { color: var(--gold-light); }
.site-footer-meta {
  font-size: 0.85rem;
  color: rgba(255, 250, 244, 0.64);
}
@media (max-width: 760px) {
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}


/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 200ms ease,
              border-color 200ms ease, background 200ms ease,
              color 200ms ease;
}
.btn-primary {
  color: var(--sand-0);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 48%),
    linear-gradient(135deg, var(--oasis), var(--oasis-deep));
  box-shadow: var(--shadow-blue), inset 0 0 0 1px rgba(255,255,255,0.14);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,119,182,0.34), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.btn-primary:active { transform: translateY(0); }
.btn-gold {
  color: #2b2115;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 14px 28px rgba(139,96,33,0.22), inset 0 0 0 1px rgba(255,255,255,0.26);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(139,96,33,0.30), inset 0 0 0 1px rgba(255,255,255,0.32);
}
.btn-ghost {
  color: var(--oasis-deep);
  background: rgba(255,250,244,0.55);
  border-color: rgba(0,119,182,0.22);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover {
  background: rgba(255,250,244,0.85);
  border-color: rgba(0,119,182,0.55);
}
.btn-large {
  padding: 1.05rem 2rem;
  font-size: 1.05rem;
}


/* ============================================================
   Sections — generic
   ============================================================ */
.section {
  padding: 6rem 2rem;
}
.section-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
.section-inner-narrow { max-width: var(--content-narrow); }
.text-center { text-align: center; }

.section-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-dark);
}
.eyebrow-gold { color: var(--gold-light); }

.section-heading {
  margin: 0 0 2rem;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.section-heading-light { color: var(--sand-0); }


/* ============================================================
   HERO (landing)
   ============================================================ */
.section-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4rem 2rem;
  isolation: isolate;
}
.section-hero .section-bg { z-index: -1; }
.section-hero .section-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
  background: rgba(255,250,244,0.70);
  border: 1px solid var(--rule-gold);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: 3rem 2.5rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 26px 70px rgba(84, 49, 21, 0.18);
}
.hero-prelude {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.hero-title {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero-title em {
  font-style: normal;
  color: var(--oasis-deep);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.hero-sub {
  margin: 0 0 2rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ink-soft);
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-scroll-hint {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 24px;
  height: 36px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 13px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
  opacity: 0.85;
}
.hero-scroll-hint span {
  display: block;
  width: 3px;
  height: 8px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(0);   opacity: 1; }
  60%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 0; }
}


/* ============================================================
   Solution grid (carved-stone cards from reference)
   ============================================================ */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
  margin-top: 1rem;
}
.solution-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 1.7rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,250,244,0.68)),
    linear-gradient(135deg, var(--sand-0), var(--sand-1));
  border: 1px solid rgba(139,96,33,0.16);
  box-shadow: var(--shadow-md);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.solution-card:hover {
  transform: translateY(-4px);
  border-color: var(--rule-gold);
  box-shadow: var(--shadow-lg);
}
/* Inset second border — the "carved stone" feel */
.solution-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(215,168,72,0.22);
  border-radius: 16px;
  pointer-events: none;
}
.solution-card .card-num,
.solution-card-num {
  width: 40px;
  height: 40px;
  margin-bottom: 1.4rem;
  display: grid;
  place-items: center;
  color: var(--gold-dark);
  border-radius: 50%;
  background: rgba(242,209,138,0.32);
  border: 1px solid var(--rule-gold);
  font-weight: 700;
  font-size: 0.9rem;
}
.solution-card h4 {
  margin: 0 0 0.5rem;
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--ink);
}
.solution-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.55;
}


/* ============================================================
   Schatz teaser (dark)
   ============================================================ */
.section-schatz .schatz-lead {
  margin: 0 0 2rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255,250,244,0.88);
}


/* ============================================================
   Tutor (3-column)
   ============================================================ */
.tutor-grid {
  display: grid;
  grid-template-columns: 1fr 280px 1fr;
  gap: 3rem;
  align-items: center;
}
.tutor-text-left, .tutor-text-right {
  display: flex; flex-direction: column; justify-content: center;
}
.tutor-text-left  { text-align: right; }
.tutor-text-right { text-align: left; }
.tutor-text-left p, .tutor-text-right p {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
}
.tutor-text-left p:last-child, .tutor-text-right p:last-child { margin-bottom: 0; }
.tutor-portrait { display: flex; justify-content: center; }
.tutor-portrait-placeholder {
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--sand-1);
  border: 2px solid var(--rule-gold);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.tutor-portrait-placeholder svg { width: 75%; height: 75%; }
.tutor-signature {
  margin-top: 1.5rem !important;
  font-style: italic;
  color: var(--gold-dark);
  font-weight: 500;
}
@media (max-width: 900px) {
  .tutor-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .tutor-text-left, .tutor-text-right { text-align: center; }
  .tutor-portrait-placeholder { width: 220px; height: 220px; }
}


/* ============================================================
   Testimonials
   ============================================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.testimonial-card {
  margin: 0;
  padding: 1.6rem;
  background: rgba(255,250,244,0.86);
  border: 1px solid rgba(139,96,33,0.16);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(4px);
}
.testimonial-card p {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
  font-style: italic;
}
.testimonial-card footer {
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: normal;
}


/* ============================================================
   Courses preview (landing)
   ============================================================ */
.section-courses { text-align: center; }
.courses-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin: 1rem 0 2.5rem;
}
.course-pill {
  padding: 0.75rem 1.4rem;
  background: rgba(255,250,244,0.82);
  border: 1px solid rgba(139,96,33,0.18);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.course-pill:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  transform: translateY(-1px);
}
.course-pill-more {
  background: transparent;
  border-style: dashed;
  color: var(--ink-soft);
}


/* ============================================================
   USP
   ============================================================ */
.usp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}
.usp-list li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(139,96,33,0.18);
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.55;
}
.usp-list li:last-child { border-bottom: 0; }
.usp-motto {
  background:
    linear-gradient(135deg, var(--teal-night-2), var(--teal-night));
  color: var(--sand-0);
  padding: 2rem 2.25rem;
  border-radius: var(--radius-lg);
  text-align: center;
  border: 1px solid var(--rule-gold);
  box-shadow: var(--shadow-md);
}
.usp-motto-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}
.usp-motto-text {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.45;
}


/* ============================================================
   How / steps
   ============================================================ */
.how-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}
.how-steps li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.5rem;
  background: rgba(255,250,244,0.85);
  border: 1px solid rgba(139,96,33,0.16);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.how-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--teal-night);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 5px 14px rgba(139,96,33,0.18);
}


/* ============================================================
   Philosophy
   ============================================================ */
.section-philosophy { text-align: center; }
.philosophy-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 2.5rem;
  max-width: 600px;
  text-align: left;
}
.philosophy-list li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(139,96,33,0.18);
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.6;
}
.philosophy-list li:last-child { border-bottom: 0; }
.philosophy-invite {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink);
}
.philosophy-cta {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--oasis-deep);
  border-bottom: 1px solid var(--oasis-deep);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.philosophy-cta:hover {
  color: var(--gold-dark);
  border-color: var(--gold);
  transform: translateX(2px);
}


/* ============================================================
   Catalog page (page-with-fixed-bg base already applied)
   ============================================================ */
.catalog-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.catalog-breadcrumb {
  margin-top: calc(var(--nav-height) + 0.75rem);
  padding: 0.25rem 2rem 0.5rem;
  font-size: 0.95rem;
  color: var(--oasis-deep);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.catalog-breadcrumb-link {
  color: var(--oasis-deep);
  font-weight: 600;
  transition: color 160ms ease;
  text-shadow: 0 1px 4px rgba(255,255,255,0.6);
}
.catalog-breadcrumb-link:hover { color: var(--oasis); }
.catalog-breadcrumb-current {
  color: var(--oasis-deep);
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(255,255,255,0.6);
}
.catalog-breadcrumb-sep {
  color: var(--oasis);
  opacity: 0.7;
}

.catalog-stage {
  flex: 1;
  position: relative;
  padding: 2rem 2rem 4rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.catalog-view {
  width: 100%;
  max-width: var(--content-max);
  display: grid;
  gap: 1.25rem;
  transform-origin: center center;
  will-change: transform, opacity;
}
.catalog-view-root,
.catalog-view-programs,
.catalog-view-topics {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.catalog-view-root { max-width: 720px; }
.catalog-view-lessons {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Drill animations */
.view-enter-forward { opacity: 0; transform: scale(0.8); transition: opacity 280ms ease-out, transform 280ms cubic-bezier(0.2, 0, 0.2, 1); }
.view-enter-back    { opacity: 0; transform: scale(1.2); transition: opacity 280ms ease-out, transform 280ms cubic-bezier(0.2, 0, 0.2, 1); }
.view-active        { opacity: 1; transform: scale(1); }
.view-exit-forward  { opacity: 1; transform: scale(1); animation: viewExitForward 260ms cubic-bezier(0.4, 0, 1, 1) forwards; }
.view-exit-back     { opacity: 1; transform: scale(1); animation: viewExitBack 260ms cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes viewExitForward { to { opacity: 0; transform: scale(1.2); } }
@keyframes viewExitBack    { to { opacity: 0; transform: scale(0.8); } }

/* Catalog tiles — dark "treasure" treatment */
.catalog-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.25rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent),
    linear-gradient(135deg, var(--teal-night), var(--oasis-deep));
  border: 1px solid var(--rule-gold);
  border-radius: 22px;
  min-height: 150px;
  text-align: center;
  cursor: pointer;
  color: var(--sand-0);
  box-shadow: 0 20px 42px rgba(0, 39, 54, 0.22);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.catalog-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(242,209,138,0.55);
  box-shadow: 0 26px 52px rgba(0, 39, 54, 0.32);
}
.catalog-tile::after {
  content: "";
  position: absolute;
  right: -45px; top: -45px;
  width: 120px; height: 120px;
  border: 1px solid rgba(242,209,138,0.32);
  border-radius: 50%;
  box-shadow: inset 0 0 0 12px rgba(242,209,138,0.04);
  pointer-events: none;
}
.catalog-tile-label {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--sand-0);
  line-height: 1.2;
}
.catalog-tile-sublabel {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: rgba(255,250,244,0.72);
  letter-spacing: 0.05em;
}
.catalog-tile-disabled { cursor: not-allowed; opacity: 0.45; }
.catalog-tile-disabled:hover {
  transform: none;
  border-color: var(--rule-gold);
  box-shadow: 0 20px 42px rgba(0, 39, 54, 0.22);
}

/* Lesson cards — same treasure feel, slightly less prominent */
.catalog-lesson-card {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 1.5rem 1.5rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
    linear-gradient(135deg, var(--teal-night-2), var(--teal-night));
  border: 1px solid var(--rule-gold);
  border-radius: 16px;
  color: var(--sand-0);
  box-shadow: 0 16px 36px rgba(0, 39, 54, 0.18);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.catalog-lesson-card:hover {
  transform: translateY(-2px);
  border-color: rgba(242,209,138,0.55);
  box-shadow: 0 22px 48px rgba(0, 39, 54, 0.28);
}
.catalog-lesson-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sand-0);
  line-height: 1.35;
}
.catalog-lesson-desc {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: rgba(255,250,244,0.78);
  line-height: 1.5;
}

.catalog-dev-badge {
  position: absolute;
  top: 0.75rem; right: 0.85rem;
  display: flex;
  gap: 0.25rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.catalog-dev-badge-letter { color: var(--gold-light); }
.catalog-dev-badge-missing { color: rgba(255,250,244,0.30); text-decoration: line-through; }

.catalog-empty,
.catalog-error {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--sand-0);
  font-size: 1rem;
  grid-column: 1 / -1;
}
.catalog-error { color: var(--gold-light); }


/* ============================================================
   Courses page
   ============================================================ */
.courses-hero {
  padding: 6rem 2rem 3rem;
  text-align: center;
}
.courses-hero-title {
  margin: 0.5rem 0 1.25rem;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sand-0);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0,25,35,0.45);
}
.courses-hero-sub {
  margin: 0 auto;
  max-width: 600px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,250,244,0.92);
  text-shadow: 0 1px 6px rgba(0,25,35,0.4);
}
.section-offering { padding: 2rem 2rem; }
.offering-card {
  background: rgba(255,250,244,0.92);
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2.5rem 2rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.offering-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(139,96,33,0.22);
}
.offering-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.offering-tagline {
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink-soft);
  font-style: italic;
}
.offering-price {
  flex-shrink: 0; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end;
}
.offering-price-amount {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--oasis-deep);
  letter-spacing: -0.02em;
}
.offering-price-unit { font-size: 1rem; color: var(--ink-soft); margin-top: 0.25rem; }
.offering-price-meta {
  font-size: 0.95rem; font-weight: 500; color: var(--gold-dark);
  background: rgba(242,209,138,0.32);
  border: 1px solid var(--rule-gold);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
}
.offering-prose {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.65;
}
.offering-variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.variant {
  padding: 1.2rem 1.25rem 1.05rem;
  background: var(--sand-1);
  border: 1px solid rgba(47,48,55,0.08);
  border-radius: var(--radius-sm);
  transition: border-color 200ms ease, transform 200ms ease;
}
.variant:hover { transform: translateY(-1px); border-color: var(--rule-gold); }
.variant-title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
}
.variant-desc { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }
.variant-note {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(139,96,33,0.32);
  font-size: 0.85rem;
  color: var(--gold-dark);
  font-weight: 500;
}
.variant-highlight { background: linear-gradient(135deg, var(--gold-light), var(--sand-2)); }

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 1rem;
}
.price-table th, .price-table td {
  text-align: left;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(139,96,33,0.18);
}
.price-table th {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
}
.price-table td { color: var(--ink); }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price-table tbody tr:hover { background: rgba(242,209,138,0.16); }
.price-table strong { color: var(--oasis-deep); font-weight: 700; }

.offering-cta-row {
  display: flex; justify-content: flex-end; margin-top: 1rem;
}

/* Closing essay — kept dark for emphasis even though page has bg */
.section-essay {
  padding: 5rem 2rem 6rem;
  text-align: center;
}
.section-essay .essay-prose,
.section-essay .essay-eyebrow {
  position: relative; z-index: 1;
}
.section-essay::before {
  content: "";
  position: absolute;
  inset: 1.5rem 2rem;
  z-index: 0;
  background:
    linear-gradient(135deg, var(--teal-night-2), var(--teal-night));
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.section-essay { position: relative; }
.essay-eyebrow {
  margin: 1rem 0 2.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-light);
}
.essay-prose { max-width: 620px; margin: 0 auto; }
.essay-lead {
  margin: 0 0 2rem;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--sand-0);
}
.essay-rule {
  width: 60px;
  border: none;
  border-top: 1px solid var(--rule-gold);
  margin: 2rem auto;
}
.essay-prose p {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,250,244,0.84);
}
.essay-close {
  margin-top: 2.5rem !important;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem) !important;
  font-weight: 500;
  color: var(--sand-0) !important;
  font-style: italic;
}
.essay-cta-row {
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}


/* ============================================================
   Contact page
   ============================================================ */
.contact-hero {
  padding: 5rem 2rem 3rem;
  text-align: center;
}
.contact-hero-title {
  margin: 0.5rem 0 1.25rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sand-0);
  text-shadow: 0 2px 16px rgba(0,25,35,0.45);
}
.contact-hero-sub {
  margin: 0 auto;
  max-width: 580px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,250,244,0.94);
  text-shadow: 0 1px 6px rgba(0,25,35,0.4);
}

.section-channels { padding: 1.5rem 2rem; }
.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.channel-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.4rem 1.5rem;
  background: rgba(255,250,244,0.92);
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.channel-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.channel-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.channel-icon svg { width: 28px; height: 28px; }
.channel-whatsapp .channel-icon { background: #25D366; color: white; }
.channel-whatsapp:hover { border-color: #25D366; }
.channel-email .channel-icon {
  background: linear-gradient(135deg, var(--oasis), var(--oasis-deep));
  color: white;
}
.channel-email:hover { border-color: var(--oasis); }
.channel-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.channel-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
}
.channel-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
.channel-meta {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.section-form { padding: 4rem 2rem; }
.form-intro {
  margin-bottom: 2.5rem;
  text-align: center;
}
.form-intro .section-eyebrow { color: var(--gold-light); }
.form-heading {
  margin: 0.4rem 0 0.6rem;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 600;
  color: var(--sand-0);
  text-shadow: 0 2px 12px rgba(0,25,35,0.4);
}
.form-sub {
  margin: 0;
  font-size: 0.98rem;
  color: rgba(255,250,244,0.92);
  text-shadow: 0 1px 6px rgba(0,25,35,0.35);
}
.contact-form {
  background: rgba(255,250,244,0.94);
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  backdrop-filter: blur(8px);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.form-optional { color: var(--ink-faint); font-weight: 400; font-size: 0.85rem; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(47,48,55,0.12);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.95rem;
  min-height: 48px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: rgba(0,119,182,0.55);
  background: white;
  box-shadow: 0 0 0 4px rgba(121,215,232,0.22);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.5rem 0;
}
.form-field-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px; flex-shrink: 0;
  accent-color: var(--oasis);
  cursor: pointer;
}
.form-field-checkbox label {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
  cursor: pointer;
}
.form-actions {
  display: flex; flex-direction: column;
  gap: 0.85rem; align-items: flex-start;
  margin-top: 0.5rem;
}
.form-disclaimer {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.form-status {
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.55;
}
.form-status-success {
  background: var(--blue-pale);
  color: var(--oasis-deep);
  border: 1px solid var(--oasis);
}
.form-status-error {
  background: rgba(176, 0, 32, 0.06);
  color: var(--warm-pop);
  border: 1px solid var(--warm-pop);
}

.section-contact-note {
  padding: 2rem 2rem 5rem;
  text-align: center;
}
.contact-note-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sand-0);
  font-style: italic;
  text-shadow: 0 1px 6px rgba(0,25,35,0.4);
}


/* ============================================================
   Page-level responsive overrides
   ============================================================ */
@media (max-width: 760px) {
  .section { padding: 4rem 1.25rem; }
  .section-overlay { padding: 4rem 1.25rem; }
  .section-hero { padding: 3rem 1.25rem; }
  .hero-content { padding: 2rem 1.5rem; }

  .courses-hero { padding: 4rem 1.25rem 2rem; }
  .section-offering { padding: 1.5rem 1.25rem; }
  .offering-card { padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--radius-md); }
  .offering-card-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .offering-price { text-align: left; align-items: flex-start; }
  .offering-cta-row { justify-content: stretch; }
  .offering-cta-row .btn { flex: 1; }
  .price-table th, .price-table td { padding: 0.8rem 0.6rem; font-size: 0.95rem; }
  .section-essay { padding: 3rem 1.25rem 4rem; }
  .section-essay::before { inset: 1rem 1.25rem; }

  .contact-hero { padding: 4rem 1.25rem 2rem; }
  .section-channels { padding: 1rem 1.25rem; }
  .channel-card { padding: 1.15rem 1.15rem; gap: 0.9rem; }
  .channel-icon { width: 44px; height: 44px; }
  .channel-icon svg { width: 24px; height: 24px; }
  .section-form { padding: 2.5rem 1.25rem; }
  .contact-form { padding: 1.75rem 1.5rem; border-radius: var(--radius-md); }
  .form-row { grid-template-columns: 1fr; gap: 1.4rem; }
  .form-actions { width: 100%; }
  .form-actions .btn { width: 100%; }
  .section-contact-note { padding: 1.5rem 1.25rem 3rem; }

  .catalog-breadcrumb {
    margin-top: calc(var(--nav-height) + 0.5rem);
    padding: 0.25rem 1rem 0.25rem;
    font-size: 0.85rem;
  }
  .catalog-stage { padding: 1rem 1rem 3rem; }
  .catalog-tile { padding: 1.75rem 1rem; min-height: 110px; }
  .catalog-tile-label { font-size: 1.15rem; }
  .catalog-lesson-card { padding: 1.1rem 1.15rem 1.05rem; }
}

/* ============================================================
   ============================================================
   ★ ROUND 2 OVERRIDES — landing-page redesign
   ============================================================
   Everything below this line implements the new desktop layout
   for index.html. Cascade order: appears last, so it wins by
   source order over any earlier rules with equal specificity.
   To roll back: delete from here to end of file.
   ============================================================ */


/* ============================================================
   ★★★ TUNING KNOBS ★★★
   ------------------------------------------------------------
   Adjust ANY of these to reposition / resize content per section.
   Search for "--<section>-" to find a section's knobs quickly.

   Units cheat sheet:
   - vh/vw    = % of full viewport (not section)
   - %        = % of section box (use inside positioned children)
   - rem      = scalable text size (1rem ≈ 16px default)
   - sec      = seconds (animation timing)
   ============================================================ */
:root {

  /* ── Cormorant Garamond (hero) ─────────────────────────── */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;


  /* ── SECTION 1: HERO (floating phrases) ────────────────── */
  --hero-phrase1-top:   11vh;        /* from top of viewport */
  --hero-phrase1-left:  8vw;         /* from left of viewport */
  --hero-phrase2-top:   calc(var(--hero-phrase1-top) + 8vh);
  --hero-phrase2-left:  calc(var(--hero-phrase1-left) + 10vw);
  --hero-phrase-size:   2.2rem;
  --hero-phrase-weight: 500;
  --hero-phrase-color:  #1a1a1a;
  --hero-phrase-tracking: 0.02em;


  /* ── SECTION 2: SOLUTIONS ──────────────────────────────── */
  --sol-heading-top:    5vh;
  --sol-heading-size:   2.2rem;
  --sol-heading-color:  var(--ink);
  --sol-cards-scale:    1.0;
  --sol-cards-gap:      2rem;
  --sol-cards-width:    80%;
  /* card visuals */
  --sol-card-bg-opacity: 0.80;       /* 0.0–1.0 — card background translucency */
  --sol-card-bg-color:   255, 250, 244;  /* RGB triplet for card bg (sand-0) */
  --sol-card-border:     rgba(234, 208, 173, 0.65); /* golden sand border */
  --sol-card-radius:     var(--radius-lg);


  /* ── SECTION 3: SCHATZ ─────────────────────────────────── */
  --schatz-heading-top:    2.5vh;
  --schatz-heading-size:   2.2rem;
  --schatz-lead-bottom:    8.5vh;
  --schatz-lead-width:     50%;
  --schatz-lead-bg-opacity: 0.80;    /* 0.0–1.0 — lead card bg translucency */
  --schatz-lead-bg-color:   255, 250, 244;  /* RGB triplet for lead bg (sand-0) */
  --schatz-cta-bottom:     45%;
  --schatz-cta-scale:      1.3;
  --schatz-cta-radius:     12px;
  --schatz-cta-opacity:    0.92;     /* 0.0–1.0 — button overall translucency */


  /* ── SECTION 4: TUTOR ──────────────────────────────────── */
  --tutor-block-top:     25vh;
  --tutor-text-spread:   14vw;
  --tutor-text-size:     1.05rem;
  --tutor-text-weight:   600;        /* embossed feel — heavier than default */
  --tutor-paragraph-width: 24%;
  --tutor-signature-size: 2.3rem;    /* "twice the font size" */
  --tutor-signature-color: #000;     /* black */


  /* ── SECTION 5: TESTIMONIALS ───────────────────────────── */
  --tst-heading-top:    5vh;
  --tst-heading-size:   2.2rem;
  --tst-carousel-height: 22vh;
  --tst-cards-visible:  2.8;
  --tst-card-gap:       4rem;
  --tst-loop-duration:  36s;


  /* ── SECTION 6: COURSES (ellipse) ──────────────────────── */
  --courses-heading-top:    3.5vh;
  --courses-heading-size:   2.2rem;
  --courses-ellipse-width:  22vw;
  --courses-ellipse-height: 22vh;
  --courses-ellipse-top:    45vh;
  --courses-cta-bottom:     24vh;
  --courses-cta-radius:     10px;


  /* ── SECTION 7: USP ────────────────────────────────────── */
  --usp-stone-top:        10vh;
  --usp-stone-left:       20%;
  --usp-stone-width:      40%;
  --usp-heading-size:     1.55rem;
  --usp-principle-right:  5%;
  --usp-principle-bottom: 14%;
  --usp-principle-width:  31%;


  /* ── SECTION 8: HOW (staircase) ────────────────────────── */
  --how-heading-right:   18%;
  --how-heading-bottom:  70%;
  --how-heading-size:    2.2rem;
  --how-stairs-top:      27%;
  --how-stairs-left:     8%;
  --how-stairs-width:    88%;
  --how-step-stride-x:   12%;
  --how-step-stride-y:   10vh;
  --how-step-bg-opacity: 0.85;       /* 0.0–1.0 — step background translucency */
  --how-step-bg-color:   255, 250, 244;  /* RGB triplet for step bg (sand-0) */


  /* ── SECTION 9: PHILOSOPHY ─────────────────────────────── */
  --phil-block-top:     7.5vh;
  --phil-block-left:    18%;
  --phil-block-width:   33%;
  --phil-eyebrow-size:  2rem;


  /* ── MINI-FOOTER ───────────────────────────────────────── */
  /* Landing page footer (copyright + back-to-top) */
  --footer-mini-height: calc(var(--nav-height) * 0.70);
  --footer-mini-gold-offset: 0.65rem;
  /* Slim empty footer for catalog / contact / courses — just the
     gold line on a thin blue strip. Keep it slim but tall enough
     that the gold line sits elegantly within the blue band. */
  --footer-mini-height-slim: 19px;
  --footer-mini-slim-gold-offset: 10px;  /* gold line distance from top edge */


  /* ── SHARED — soft white used in headings ──────────────── */
  --c-soft-white: #f5f1ea;
  --c-soft-white-shadow: 0 2px 8px rgba(20, 20, 20, 0.45);
}


/* ============================================================
   1. NEUTRALIZE OVERLAYS (drop the dark gradient backgrounds)
   ------------------------------------------------------------
   The .section-overlay div stays — it remains the positioning
   context for absolutely-placed content inside each section.
   But its dark gradient background is removed so the artwork
   shows through.
   ============================================================ */
.section-with-bg .section-overlay,
.section-with-bg .section-overlay-dark {
  background: none !important;
}

/* Re-make .section-overlay a clean positioning context that
   fills its section. Padding zeroed so absolute children measure
   from section edges, not from a padded inset. */
.section-with-bg .section-overlay {
  position: absolute;
  inset: 0;
  padding: 0;
  display: block;
  overflow: visible;
}


/* ============================================================
   2. HERO — two floating phrases, Cormorant Garamond italic
   ------------------------------------------------------------
   Replaces the old hero-content block entirely.
   ============================================================ */

/* Hide any leftover legacy hero content if present */
.section-hero .hero-content { display: none; }

.hero-phrase {
  position: absolute;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--hero-phrase-weight);
  font-size: var(--hero-phrase-size);
  letter-spacing: var(--hero-phrase-tracking);
  color: var(--hero-phrase-color);
  line-height: 1.2;
  z-index: 2;
  max-width: 60vw;
  pointer-events: none;
}

.hero-phrase-1 {
  top:  var(--hero-phrase1-top);
  left: var(--hero-phrase1-left);
}

.hero-phrase-2 {
  top:  var(--hero-phrase2-top);
  left: var(--hero-phrase2-left);
}


/* ============================================================
   3. SOLUTIONS SECTION — row of 4 enlarged cards, no numbers
   ============================================================ */

.section-solution .sol-heading {
  position: absolute;
  top: var(--sol-heading-top);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--sol-heading-size);
  font-weight: 600;
  color: var(--sol-heading-color);
  text-align: center;
  white-space: nowrap;
}

.section-solution .sol-cards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--sol-cards-scale));
  transform-origin: center center;
  width: var(--sol-cards-width);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sol-cards-gap);
}

/* Hide the old numbering pills */
.section-solution .solution-card .card-num,
.section-solution .solution-card .solution-card-num {
  display: none;
}

/* Override the inset "carved stone" border ring — remove it */
.section-solution .solution-card::before { display: none; }

/* Override the base .solution-card look:
   tunable background opacity, golden-sand border, no hover behavior. */
.section-solution .solution-card {
  background: rgba(var(--sol-card-bg-color), var(--sol-card-bg-opacity));
  border: 1px solid var(--sol-card-border);
  border-radius: var(--sol-card-radius);
  box-shadow: var(--shadow-sm);
  transition: none;
}
/* Kill hover effects entirely */
.section-solution .solution-card:hover {
  transform: none;
  border-color: var(--sol-card-border);
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   4. SCHATZ — centered heading, lead card, oversized gold button
   ============================================================ */

.section-schatz .schatz-heading {
  position: absolute;
  top: var(--schatz-heading-top);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--schatz-heading-size);
  font-weight: 600;
  color: var(--c-soft-white);
  text-align: center;
  white-space: nowrap;
  text-shadow: var(--c-soft-white-shadow);
}

.section-schatz .schatz-lead-card {
  position: absolute;
  bottom: var(--schatz-lead-bottom);
  left: 50%;
  transform: translateX(-50%);
  width: var(--schatz-lead-width);
  background: rgba(var(--schatz-lead-bg-color), var(--schatz-lead-bg-opacity));
  border: 1px solid var(--sol-card-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-md);
}
.section-schatz .schatz-lead-card p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Gold-gradient button — looks like real gold catching light.
   Translucency via --schatz-cta-opacity. Title gets a white drop-shadow
   for crispness against the gradient. */
.section-schatz .schatz-cta {
  position: absolute;
  bottom: var(--schatz-cta-bottom);
  left: 50%;
  transform: translateX(-50%) scale(var(--schatz-cta-scale));
  transform-origin: center center;
  background:
    linear-gradient(180deg,
      var(--gold-light) 0%,
      var(--gold) 50%,
      var(--gold-dark) 100%);
  color: #ffffff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.35);
  padding: 0.85rem 1.7rem;
  border-radius: var(--schatz-cta-radius);
  border: 1px solid rgba(255, 245, 220, 0.55);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  opacity: var(--schatz-cta-opacity);
  box-shadow:
    0 6px 18px rgba(139, 96, 33, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 200ms ease, filter 200ms ease;
  white-space: nowrap;
}
.section-schatz .schatz-cta:hover {
  filter: brightness(1.08);
  transform: translateX(-50%) scale(calc(var(--schatz-cta-scale) * 1.04));
}


/* ============================================================
   5. TUTOR — three columns spread outward, signature centered
   ============================================================ */

/* Hide the old grid layout's portrait placeholder block; we
   keep the artwork as the section background instead. */
.section-tutor .tutor-portrait { display: none; }

.section-tutor .section-overlay > .tutor-text-left,
.section-tutor .section-overlay > .tutor-text-right {
  position: absolute;
  top: var(--tutor-block-top);
  width: var(--tutor-paragraph-width);
  font-size: var(--tutor-text-size);
  font-weight: var(--tutor-text-weight);
  line-height: 1.6;
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}

.section-tutor .section-overlay > .tutor-text-left {
  left: var(--tutor-text-spread);
  text-align: right;
}

.section-tutor .section-overlay > .tutor-text-right {
  right: var(--tutor-text-spread);
  text-align: left;
}

.section-tutor .section-overlay > .tutor-text-left p,
.section-tutor .section-overlay > .tutor-text-right p {
  margin: 0 0 0.8rem 0;
}

.section-tutor .tutor-signature {
  display: block;
  margin-top: 1.2rem !important;
  text-align: center;
  font-weight: 700;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: var(--tutor-signature-size);
  color: var(--tutor-signature-color);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}


/* ============================================================
   6. TESTIMONIALS — heading + infinite horizontal carousel
   ============================================================ */

.section-testimonials .testimonials-heading {
  position: absolute;
  top: var(--tst-heading-top);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--tst-heading-size);
  font-weight: 600;
  color: var(--c-soft-white);
  text-shadow: var(--c-soft-white-shadow);
  text-align: center;
  white-space: nowrap;
}

.section-testimonials .testimonials-carousel {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: var(--tst-carousel-height);
  overflow: hidden;
}

.section-testimonials .testimonials-track {
  display: flex;
  gap: var(--tst-card-gap);
  height: 100%;
  width: max-content;
  animation: tst-loop var(--tst-loop-duration) linear infinite;
  will-change: transform;
}

.section-testimonials .testimonials-carousel:hover .testimonials-track {
  animation-play-state: paused;
}

/* Each card: width based on visible-count formula.
   Set A + Set B = 6 cards total; one full loop = half of total width. */
.section-testimonials .testimonial-card {
  flex: 0 0 calc(
    (100vw - (var(--tst-cards-visible) + 0.5) * var(--tst-card-gap))
    / var(--tst-cards-visible)
  );
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--oasis-light) 0%, var(--oasis) 60%, var(--oasis-deep) 100%);
  box-shadow: var(--shadow-md);
}

/* Per-card gradient variations for some visual variety */
.section-testimonials .testimonial-card:nth-child(2),
.section-testimonials .testimonial-card:nth-child(5) {
  background: linear-gradient(120deg, var(--blue-pale) 0%, var(--oasis-light) 50%, var(--oasis) 100%);
}
.section-testimonials .testimonial-card:nth-child(3),
.section-testimonials .testimonial-card:nth-child(6) {
  background: linear-gradient(160deg, var(--oasis) 0%, var(--oasis-deep) 70%, var(--teal-night) 100%);
}

.section-testimonials .testimonial-card p {
  margin: 0 0 1rem 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--gold-light);
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.35);
}

.section-testimonials .testimonial-card footer {
  margin: 0;
  font-size: 0.9rem;
  color: #ffffff;
  font-weight: 500;
}

@keyframes tst-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   7. COURSES — heading + ellipse of pill links + CTA
   ============================================================ */

.section-courses .courses-heading {
  position: absolute;
  top: var(--courses-heading-top);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--courses-heading-size);
  font-weight: 600;
  color: var(--c-soft-white);
  text-shadow: var(--c-soft-white-shadow);
  text-align: center;
  white-space: nowrap;
}

/* Ellipse positioning: the .courses-ellipse div is a zero-size
   anchor point at center of arc. Each pill is positioned by an
   individual transform pre-computed for its angle on the upper
   half of an ellipse. */
.section-courses .courses-ellipse {
  position: absolute;
  top: var(--courses-ellipse-top);
  left: 50%;
  width: 0;
  height: 0;
}

.section-courses .course-pill {
  position: absolute;
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border-radius: 6px;            /* slight rounding, "concrete unit" */
  background: var(--oasis);
  color: var(--c-soft-white);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--rule-gold);
  transform-origin: center center;
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.section-courses .course-pill:hover {
  background: var(--oasis-deep);
  box-shadow: var(--shadow-blue);
}

/* Angles spread across upper half of ellipse:
   180° (far left), 144°, 108°, 72°, 36°, 0° (far right).
   For each pill: left =  cos(angle) * --courses-ellipse-width,
                  top  = -sin(angle) * --courses-ellipse-height.
   Pre-computed cos/sin values used below.
   And we translate(-50%, -50%) to center the pill on its point. */

/* 180° → cos=-1.0000, sin=0.0000 */
.section-courses .course-pill-1 {
  left: calc(var(--courses-ellipse-width) * -1.0);
  top:  calc(var(--courses-ellipse-height) * 0);
  transform: translate(-50%, -50%);
}
/* 144° → cos=-0.8090, sin=0.5878 */
.section-courses .course-pill-2 {
  left: calc(var(--courses-ellipse-width) * -0.8090);
  top:  calc(var(--courses-ellipse-height) * -0.5878);
  transform: translate(-50%, -50%);
}
/* 108° → cos=-0.3090, sin=0.9511 */
.section-courses .course-pill-3 {
  left: calc(var(--courses-ellipse-width) * -0.3090);
  top:  calc(var(--courses-ellipse-height) * -0.9511);
  transform: translate(-50%, -50%);
}
/* 72°  → cos=0.3090, sin=0.9511 */
.section-courses .course-pill-4 {
  left: calc(var(--courses-ellipse-width) * 0.3090);
  top:  calc(var(--courses-ellipse-height) * -0.9511);
  transform: translate(-50%, -50%);
}
/* 36°  → cos=0.8090, sin=0.5878 */
.section-courses .course-pill-5 {
  left: calc(var(--courses-ellipse-width) * 0.8090);
  top:  calc(var(--courses-ellipse-height) * -0.5878);
  transform: translate(-50%, -50%);
}
/* 0°   → cos=1.0000, sin=0.0000  →  "und weiter" at right endpoint */
.section-courses .course-pill-6 {
  left: calc(var(--courses-ellipse-width) * 1.0);
  top:  calc(var(--courses-ellipse-height) * 0);
  transform: translate(-50%, -50%);
}

.section-courses .course-pill-more {
  background: transparent;
  color: var(--gold-light);
  border-style: dashed;
  font-style: italic;
}

.section-courses .courses-cta {
  position: absolute;
  bottom: var(--courses-cta-bottom);
  left: 50%;
  transform: translateX(-50%);
  background: var(--oasis);
  color: var(--gold-light);
  padding: 0.95rem 1.9rem;
  border-radius: var(--courses-cta-radius);
  font-weight: 600;
  font-size: 1.1rem;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.45);
  box-shadow: var(--shadow-blue);
  border: 1px solid var(--rule-gold);
  white-space: nowrap;
  transition: transform 200ms ease, background 200ms ease;
}
.section-courses .courses-cta:hover {
  background: var(--oasis-deep);
  transform: translateX(-50%) scale(1.04);
}


/* ============================================================
   8. USP — "stone wall" text box + principle card
   ============================================================ */

.section-usp .usp-stone {
  position: absolute;
  top: var(--usp-stone-top);
  left: var(--usp-stone-left);
  width: var(--usp-stone-width);
  /* Subtle stone-wall feel without breaking minimalist look */
  padding: 1.5rem 1.75rem;
}

.section-usp .usp-heading {
  margin: 0 0 1.1rem 0;
  font-size: var(--usp-heading-size);
  font-weight: 600;
  color: var(--c-soft-white);
  text-shadow: var(--c-soft-white-shadow);
  line-height: 1.3;
}

.section-usp .usp-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-usp .usp-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(245, 241, 234, 0.25);
  color: var(--c-soft-white);
  font-size: 1rem;
  line-height: 1.5;
  text-shadow: var(--c-soft-white-shadow);
}
.section-usp .usp-list li:last-child { border-bottom: 0; }

/* The principle card — green gradient, top-right to bottom-left */
.section-usp .usp-principle {
  position: absolute;
  right: var(--usp-principle-right);
  bottom: var(--usp-principle-bottom);
  width: var(--usp-principle-width);
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(225deg, #6ec07a 0%, #2f8f4d 55%, #1b5d33 100%);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.section-usp .usp-principle-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  margin-bottom: 0.4rem;
}
.section-usp .usp-principle-text {
  font-size: 1.05rem;
  line-height: 1.45;
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}


/* ============================================================
   9. HOW — heading box + staircase steps
   ============================================================ */

.section-how .how-heading {
  position: absolute;
  right: var(--how-heading-right);
  bottom: var(--how-heading-bottom);
  margin: 0;
  padding: 0.75rem 1.25rem;
  font-size: var(--how-heading-size);
  font-weight: 600;
  color: var(--c-soft-white);
  text-shadow: var(--c-soft-white-shadow);
  text-align: right;
}

.section-how .how-staircase {
  position: absolute;
  top: var(--how-stairs-top);
  left: var(--how-stairs-left);
  width: var(--how-stairs-width);
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-how .how-step {
  position: absolute;
  display: inline-block;
  width: auto;
  padding: 0.65rem 1.15rem;
  background: rgba(var(--how-step-bg-color), var(--how-step-bg-opacity));
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* Each step indented further on both axes — "staircase" */
.section-how .how-step-1 { left: calc(var(--how-step-stride-x) * 0); top: calc(var(--how-step-stride-y) * 0); }
.section-how .how-step-2 { left: calc(var(--how-step-stride-x) * 1); top: calc(var(--how-step-stride-y) * 1); }
.section-how .how-step-3 { left: calc(var(--how-step-stride-x) * 2); top: calc(var(--how-step-stride-y) * 2); }
.section-how .how-step-4 { left: calc(var(--how-step-stride-x) * 3); top: calc(var(--how-step-stride-y) * 3); }
.section-how .how-step-5 { left: calc(var(--how-step-stride-x) * 4); top: calc(var(--how-step-stride-y) * 4); }
.section-how .how-step-6 { left: calc(var(--how-step-stride-x) * 5); top: calc(var(--how-step-stride-y) * 5); }


/* ============================================================
   10. PHILOSOPHY — block on the sky, with inviting CTA
   ============================================================ */

.section-philosophy .philosophy-block {
  position: absolute;
  top: var(--phil-block-top);
  left: var(--phil-block-left);
  width: var(--phil-block-width);
}

.section-philosophy .philosophy-eyebrow {
  margin: 0 0 1.2rem 0;
  font-size: var(--phil-eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-soft-white);
  text-shadow: var(--c-soft-white-shadow);
}

.section-philosophy .philosophy-list {
  margin: 0 0 1.6rem 0;
  padding: 0;
  list-style: none;
}
.section-philosophy .philosophy-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(245, 241, 234, 0.25);
  color: var(--c-soft-white);
  font-size: 1rem;
  line-height: 1.5;
  text-shadow: var(--c-soft-white-shadow);
}
.section-philosophy .philosophy-list li:last-child { border-bottom: 0; }

/* Invite CTA — styled like the schatz button for consistency */
.section-philosophy .philosophy-invite-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.1rem 1.5rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  transition: transform 200ms ease, background 200ms ease;
}
.section-philosophy .philosophy-invite-cta:hover {
  background: var(--gold-light);
  transform: scale(1.02);
}
.section-philosophy .philosophy-invite-text {
  font-size: 1.05rem;
  font-weight: 600;
}
.section-philosophy .philosophy-invite-arrow {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gold-dark);
}


/* ============================================================
   11. MINI-FOOTER (replaces old big footer)
   ------------------------------------------------------------
   Anchored to the bottom of its parent (philosophy section on
   landing; static-bottom on other pages — JS handles placement).
   ============================================================ */

.site-footer-mini {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-mini-height);
  background: linear-gradient(180deg, var(--teal-night-2) 0%, var(--teal-night) 100%);
  color: var(--c-soft-white);
  font-size: 0.85rem;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  padding: 0 1.5rem var(--footer-mini-gold-offset) 1.5rem;
}

/* Gold line just below the top edge */
.site-footer-mini::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: var(--footer-mini-gold-offset);
  height: 1px;
  background: var(--gold);
  opacity: 0.85;
}

.site-footer-mini-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.site-footer-mini-meta {
  color: rgba(245, 241, 234, 0.75);
  font-size: 0.8rem;
}

.site-footer-mini-top {
  color: var(--gold-light);
  font-weight: 500;
  font-size: 0.85rem;
  transition: color 200ms ease;
  cursor: pointer;
}
.site-footer-mini-top:hover { color: var(--gold); }

/* When the mini-footer is on a regular (non-snap-scroll) page,
   it should sit at the page bottom in normal flow. */
body:not([data-snap-scroll]) .site-footer-mini {
  position: relative;
}

/* The slim empty footer (catalog / contact / courses) is pinned
   to the viewport bottom so the page background can align its
   bottom edge to the footer's top edge with no gap. */
body:not([data-snap-scroll]) .site-footer-mini-empty {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

/* ── Slim empty footer (catalog / contact / courses) ────────
   No content — just a thin blue strip with the gold line.
   Used on every page except the landing page. */
.site-footer-mini-empty {
  height: var(--footer-mini-height-slim);
  padding: 0;
}
.site-footer-mini-empty::before {
  /* Gold line nudged to sit nicely within the slim strip */
  top: var(--footer-mini-slim-gold-offset);
  left: 1.5rem;
  right: 1.5rem;
}


/* ============================================================
   12. HIDE THE OLD BIG FOOTER if it ever gets injected
   ============================================================ */
.site-footer { display: none !important; }


/* ============================================================
   ============================================================
   ★★★ MOBILE (≤ 760px) — knobs + structural overrides
   ============================================================
   Two-part block: knob overrides first, then structural rules.
   Each section's content must FIT inside one 100dvh-minus-nav
   viewport because snap-scroll stays mandatory.
   ============================================================ */
@media (max-width: 760px) {

  /* ──────────────────────────────────────────────────────────
     ★★★ MOBILE TUNING KNOBS ★★★
     Same variable names as desktop, mobile-specific values.
     ────────────────────────────────────────────────────────── */
  :root {

    /* ── HERO ────────────────────────────────────────────── */
    --hero-phrase1-top:   12vh;
    --hero-phrase1-left:  8vw;
    --hero-phrase2-top:   calc(var(--hero-phrase1-top) + 7vh);
    --hero-phrase2-left:  calc(var(--hero-phrase1-left) + 8vw);
    --hero-phrase-size:   1.65rem;


    /* ── SOLUTIONS ───────────────────────────────────────── */
    --sol-heading-top:    10vh;
    --sol-heading-size:   1.45rem;
    --sol-cards-scale:    1.0;
    --sol-cards-gap:      2.2rem;
    --sol-cards-width:    88%;
    /* card visuals same as desktop (knobs reused) */


    /* ── SCHATZ ──────────────────────────────────────────── */
    --schatz-heading-top:    10vh;
    --schatz-heading-size:   1.35rem;
    --schatz-lead-bottom:    10vh;
    --schatz-lead-width:     86%;
    --schatz-cta-bottom:     51%;
    --schatz-cta-scale:      1.5;


    /* ── TUTOR ───────────────────────────────────────────── */
    --tutor-block-top:        12vh;
    --tutor-text-size:        0.5rem;
    --tutor-signature-size:   1.6rem;


    /* ── TESTIMONIALS ────────────────────────────────────── */
    --tst-heading-top:        3vh;
    --tst-heading-size:       1.35rem;
    --tst-carousel-height:    55vh;     /* used as carousel height on mobile */
    --tst-cards-visible:      2;        /* repurposed: stacks visible vertically */
    --tst-card-gap:           3rem;
    --tst-loop-duration:      24s;


    /* ── COURSES ─────────────────────────────────────────── */
    --courses-heading-top:    3vh;
    --courses-heading-size:   1.35rem;
    --courses-cta-bottom:     16vh;


    /* ── USP ─────────────────────────────────────────────── */
    --usp-heading-size:       1.15rem;


    /* ── HOW ─────────────────────────────────────────────── */
    --how-heading-size:       1.35rem;


    /* ── PHILOSOPHY ──────────────────────────────────────── */
    --phil-eyebrow-size:      1.85rem;
  }


  /* ──────────────────────────────────────────────────────────
     STRUCTURAL OVERRIDES — sections stack vertically
     ────────────────────────────────────────────────────────── */


  /* ── 1. Hero: max-width tightened so phrases don't overrun ── */
  .hero-phrase { max-width: 86vw; }


  /* ── 2. Solutions: stack 4 cards vertically, tighter sizes ── */
  .section-solution .sol-heading {
    white-space: normal;
    line-height: 1.25;
    width: 90%;
  }
  .section-solution .sol-cards {
    top: 52%;
    /* No scale on mobile — column-stack is sized naturally */
    transform: translate(-50%, -50%);
    grid-template-columns: 1fr;
    width: var(--sol-cards-width);
  }
  .section-solution .solution-card {
    min-height: 0;
    padding: 0.7rem 0.9rem;
  }
  .section-solution .solution-card h4 {
    margin: 0 0 0.2rem 0;
    font-size: 0.95rem;
  }
  .section-solution .solution-card p {
    font-size: 0.82rem;
    line-height: 1.35;
  }


  /* ── 3. Schatz: heading wraps, lead card wider, button smaller ── */
  .section-schatz .schatz-heading {
    white-space: normal;
    line-height: 1.25;
    width: 92%;
  }
  .section-schatz .schatz-lead-card {
    padding: 0.9rem 1.05rem;
  }
  .section-schatz .schatz-lead-card p {
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .section-schatz .schatz-cta {
    padding: 0.7rem 1.3rem;
    font-size: 0.95rem;
  }


  /* ── 4. Tutor: text blocks stack vertically center-aligned ── */
  .section-tutor .section-overlay > .tutor-text-left,
  .section-tutor .section-overlay > .tutor-text-right {
    position: absolute;
    width: 86%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: left;
  }
  .section-tutor .section-overlay > .tutor-text-left {
    top: var(--tutor-block-top);
  }
  .section-tutor .section-overlay > .tutor-text-right {
    top: calc(var(--tutor-block-top) + 32vh);
  }
  .section-tutor .section-overlay > .tutor-text-left p,
  .section-tutor .section-overlay > .tutor-text-right p {
    margin: 0 0 0.55rem 0;
  }


  /* ── 5. Testimonials: VERTICAL carousel (changes axis) ── */
  .section-testimonials .testimonials-heading {
    white-space: normal;
    line-height: 1.25;
    width: 88%;
  }
  .section-testimonials .testimonials-carousel {
    /* Becomes a vertical strip: narrower width, taller height */
    top: 12vh;
    bottom: 4vh;
    left: 8vw;
    right: 8vw;
    height: auto;
    transform: none;
  }
  .section-testimonials .testimonials-track {
    flex-direction: column;
    width: 100%;
    height: max-content;
    animation: tst-loop-vertical var(--tst-loop-duration) linear infinite;
  }
  .section-testimonials .testimonial-card {
    /* Each card: fixed-ish height, full width of the strip */
    flex: 0 0 calc(
      (100% / var(--tst-cards-visible)) * (62vh / 100vh) * 1
    );
    /* simpler version that just works: explicit min-height */
    min-height: 18vh;
    width: 100%;
    padding: 0.85rem 1rem;
  }
  .section-testimonials .testimonial-card p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0 0 0.55rem 0;
  }
  .section-testimonials .testimonial-card footer {
    font-size: 0.78rem;
  }

  @keyframes tst-loop-vertical {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }


  /* ── 6. Courses: pills become a stacked vertical list ── */
  .section-courses .courses-heading {
    white-space: normal;
    line-height: 1.25;
    width: 90%;
  }
  .section-courses .courses-ellipse {
    /* Repurpose: becomes a vertical-stack container, not ellipse */
    position: absolute;
    top: 14vh;
    left: 50%;
    transform: translateX(-50%);
    width: 78%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: stretch;
  }
  /* Reset all per-pill ellipse offsets, stack normally */
  .section-courses .course-pill,
  .section-courses .course-pill-1,
  .section-courses .course-pill-2,
  .section-courses .course-pill-3,
  .section-courses .course-pill-4,
  .section-courses .course-pill-5,
  .section-courses .course-pill-6 {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    padding: 0.55rem 0.9rem;
    font-size: 0.88rem;
    text-align: center;
  }


  /* ── 7. USP: stone + principle stack vertically ── */
  .section-usp .usp-stone {
    position: absolute;
    top: 9vh;
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    padding: 0.5rem 0.5rem;
  }
  .section-usp .usp-heading {
    margin: 0 0 0.6rem 0;
    line-height: 1.25;
  }
  .section-usp .usp-list li {
    padding: 0.4rem 0;
    font-size: 0.85rem;
    line-height: 1.35;
  }
  .section-usp .usp-principle {
    position: absolute;
    right: auto;
    left: 50%;
    bottom: 5vh;
    transform: translateX(-50%);
    width: 88%;
    padding: 0.85rem 1rem;
  }
  .section-usp .usp-principle-text {
    font-size: 0.92rem;
    line-height: 1.35;
  }


  /* ── 8. How: heading on top, steps stack vertically ── */
  .section-how .how-heading {
    position: absolute;
    right: auto;
    bottom: auto;
    top: 3vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    padding: 0.4rem 0.6rem;
    line-height: 1.25;
  }
  .section-how .how-staircase {
    position: absolute;
    top: 14vh;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  /* Override staircase positioning → vertical stack */
  .section-how .how-step,
  .section-how .how-step-1,
  .section-how .how-step-2,
  .section-how .how-step-3,
  .section-how .how-step-4,
  .section-how .how-step-5,
  .section-how .how-step-6 {
    position: static;
    left: auto;
    top: auto;
    white-space: normal;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.35;
  }


  /* ── 9. Philosophy: full-width centered block ── */
  .section-philosophy .philosophy-block {
    position: absolute;
    top: var(--phil-block-top);
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
  }
  .section-philosophy .philosophy-eyebrow {
    margin: 0 0 0.6rem 0;
    line-height: 1.25;
  }
  .section-philosophy .philosophy-list li {
    padding: 0.4rem 0;
    font-size: 0.85rem;
    line-height: 1.35;
  }
  .section-philosophy .philosophy-invite-cta {
    padding: 0.7rem 1rem;
  }
  .section-philosophy .philosophy-invite-text {
    font-size: 0.9rem;
  }
  .section-philosophy .philosophy-invite-arrow {
    font-size: 0.82rem;
  }


  /* ── Mini-footer: hide the "Nach oben" link on mobile if too cramped ── */
  /* Keeping it for now — the meta block compresses neatly. */

}


/* ============================================================
   ============================================================
   ★ ROUND 5 — Catalog redesign (workspace + tile restyling)
   ============================================================
   Page locks to one viewport. Workspace beneath the nav holds
   the drill-down view and scrolls internally if content
   overflows. Mini-footer at viewport bottom.
   ============================================================ */


/* ============================================================
   ★★★ CATALOG TUNING KNOBS ★★★
   Same convention as the landing page — change a number here,
   the layout updates. Mobile overrides live further below
   under @media (max-width: 760px).
   ============================================================ */
:root {

  /* ── Workspace container ─────────────────────────────────── */
  --cat-workspace-pad-x:      2rem;
  --cat-workspace-pad-y:      1rem;

  /* ── Breadcrumb container (top-left of workspace) ──────── */
  --cat-bc-bg-color:          255, 255, 255;     /* RGB triplet */
  --cat-bc-bg-opacity:        0.70;              /* 0.0–1.0 */
  --cat-bc-text-color:        var(--oasis);      /* lighter blue (= sep colour) */
  --cat-bc-padding:           0.2rem 0.75rem;
  --cat-bc-radius:            8px;
  --cat-bc-font-size:         0.95rem;
  --cat-bc-border:            1.5px solid rgba(0, 119, 182, 1);

  /* ── Root tiles (Wissen + Übungen) ─────────────────────── */
  --cat-root-tile-height:     60vh;        /* ~3.5× the old 180px */
  --cat-root-tiles-gap:       3rem;
  --cat-root-tiles-width:     50%;         /* of workspace inner width */
  --cat-root-tile-radius:     var(--radius-xl);

  /* ── Mid-level tiles (programs + topics) ───────────────── */
  --cat-tile-text-color:      #000e14;            /* deep ink with blue undertone */
  --cat-tile-border-color:    var(--sand-2);      /* solid sand (#ead0ad) */
  --cat-tile-border-width:    4px;
  --cat-tile-bg-color:        255, 255, 255;      /* RGB triplet */
  --cat-tile-bg-opacity:      0.80;
  --cat-tile-radius:          var(--radius-lg);
  --cat-tile-min-height:      120px;

  /* ── Lesson cards (deepest level) ──────────────────────── */
  --cat-lesson-text-color:    #000e14;
  --cat-lesson-border-color:  var(--oasis-deep);  /* deep oasis (#023e8a) */
  --cat-lesson-border-width:  2px;
  --cat-lesson-bg-color:      255, 255, 255;      /* RGB triplet */
  --cat-lesson-bg-opacity:    0.90;
  --cat-lesson-radius:        var(--radius-md);
}


/* ============================================================
   1. PAGE LOCK + WORKSPACE LAYOUT
   ============================================================ */

/* Lock the catalog page to one viewport — body never scrolls;
   the workspace inside it does. */
html:has(body.catalog-body),
body.catalog-body {
  height: 100dvh;
  overflow: hidden;
}

/* The body becomes a fixed-frame stack: nav (fixed-pos), workspace, footer. */
body.catalog-body {
  display: block;
}

/* Workspace — the focused area between nav and footer.
   Catalog uses the slim empty footer, so the workspace bottom
   is offset by the slim height. */
.catalog-workspace {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: var(--footer-mini-height-slim);
  padding: var(--cat-workspace-pad-y) var(--cat-workspace-pad-x);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow: hidden;            /* the stage scrolls internally, not the workspace */
  z-index: 1;
}

/* The mini-footer on this page sits fixed at viewport bottom */
body.catalog-body .site-footer-mini {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}


/* ============================================================
   2. BREADCRUMB CONTAINER
   ------------------------------------------------------------
   Sits at top-left of the workspace. White at 90% opacity,
   text in the lighter oasis blue. Hidden at root view.
   ============================================================ */

.catalog-workspace .catalog-breadcrumb {
  /* Override the legacy centred layout */
  margin: 0;
  padding: var(--cat-bc-padding);
  align-self: flex-start;            /* top-left within workspace flex column */
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  background: rgba(var(--cat-bc-bg-color), var(--cat-bc-bg-opacity));
  border: var(--cat-bc-border);
  border-radius: var(--cat-bc-radius);
  font-size: var(--cat-bc-font-size);
  color: var(--cat-bc-text-color);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  /* Don't shrink when stage grows */
  flex-shrink: 0;
}

/* All breadcrumb text uses the lighter blue (matching the > sep) */
.catalog-workspace .catalog-breadcrumb-link,
.catalog-workspace .catalog-breadcrumb-current,
.catalog-workspace .catalog-breadcrumb-sep {
  color: var(--cat-bc-text-color);
  text-shadow: none;
  opacity: 1;
}

.catalog-workspace .catalog-breadcrumb-link {
  font-weight: 600;
}

.catalog-workspace .catalog-breadcrumb-link:hover {
  color: var(--oasis-deep);
}

.catalog-workspace .catalog-breadcrumb-current {
  font-weight: 700;
}

/* Empty-state: hide the container entirely at root view */
.catalog-workspace .catalog-breadcrumb.catalog-breadcrumb-empty {
  display: none;
}


/* ============================================================
   3. STAGE — scrollable inner region
   ============================================================ */

.catalog-workspace .catalog-stage {
  flex: 1;
  min-height: 0;                     /* allows the flex child to actually scroll */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0.25rem 1.5rem;
  /* Centre content horizontally; the view itself is the grid */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Custom scrollbar so it doesn't look like a default browser bar */
.catalog-workspace .catalog-stage::-webkit-scrollbar {
  width: 8px;
}
.catalog-workspace .catalog-stage::-webkit-scrollbar-thumb {
  background: rgba(0, 119, 182, 0.35);
  border-radius: 4px;
}
.catalog-workspace .catalog-stage::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 119, 182, 0.55);
}
.catalog-workspace .catalog-stage::-webkit-scrollbar-track {
  background: transparent;
}


/* ============================================================
   4. ROOT TILES (Wissen + Übungen) — big, hover-rises kept
   ============================================================ */

.catalog-view-root {
  width: var(--cat-root-tiles-width);
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cat-root-tiles-gap);
  align-content: center;
}

.catalog-tile-root {
  min-height: var(--cat-root-tile-height);
  height: var(--cat-root-tile-height);
  padding: 2rem 1.5rem;
  border-radius: var(--cat-root-tile-radius);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;       /* labels at the bottom; bg art lives above */
  align-items: flex-start;
  gap: 0.35rem;
  /* hover-rise effect intentionally kept — base .catalog-tile already
     transitions transform on hover. We override only the colors. */
}

.catalog-tile-root .catalog-tile-label {
  font-size: 1.6rem;
}


/* ============================================================
   5. PROGRAM / TOPIC TILES — sand border, translucent white
   ------------------------------------------------------------
   Targets mid-level views only (programs, topics), NOT root.
   ============================================================ */

.catalog-view-programs .catalog-tile,
.catalog-view-topics   .catalog-tile {
  background: rgba(var(--cat-tile-bg-color), var(--cat-tile-bg-opacity));
  border: var(--cat-tile-border-width) solid var(--cat-tile-border-color);
  border-radius: var(--cat-tile-radius);
  color: var(--cat-tile-text-color);
  min-height: var(--cat-tile-min-height);
  box-shadow: var(--shadow-sm);
}

.catalog-view-programs .catalog-tile-label,
.catalog-view-topics   .catalog-tile-label,
.catalog-view-programs .catalog-tile-sublabel,
.catalog-view-topics   .catalog-tile-sublabel {
  color: var(--cat-tile-text-color);
  text-shadow: none;
}

/* Defeat the inset gold ring that's on legacy .catalog-tile::after */
.catalog-view-programs .catalog-tile::after,
.catalog-view-topics   .catalog-tile::after {
  display: none;
}

/* Hover: keep subtle rise from base rule; just don't change colors */
.catalog-view-programs .catalog-tile:hover,
.catalog-view-topics   .catalog-tile:hover {
  border-color: var(--cat-tile-border-color);
  box-shadow: var(--shadow-md);
}


/* ============================================================
   6. LESSON CARDS — 90% opaque, deep-oasis border
   ============================================================ */

.catalog-view-lessons .catalog-lesson-card {
  background: rgba(var(--cat-lesson-bg-color), var(--cat-lesson-bg-opacity));
  border: var(--cat-lesson-border-width) solid var(--cat-lesson-border-color);
  border-radius: var(--cat-lesson-radius);
  color: var(--cat-lesson-text-color);
  box-shadow: var(--shadow-sm);
}

.catalog-view-lessons .catalog-lesson-title {
  color: var(--cat-lesson-text-color);
  text-shadow: none;
}

.catalog-view-lessons .catalog-lesson-desc {
  color: var(--cat-lesson-text-color);
  opacity: 0.78;
  text-shadow: none;
}

.catalog-view-lessons .catalog-lesson-card:hover {
  border-color: var(--cat-lesson-border-color);
  box-shadow: var(--shadow-md);
}


/* ============================================================
   7. MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 760px) {

  :root {
    /* Mobile-tuned knobs */
    --cat-workspace-pad-x:    1rem;
    --cat-workspace-pad-y:    0.75rem;

    --cat-bc-padding:         0.35rem 0.7rem;
    --cat-bc-font-size:       0.85rem;

    --cat-root-tile-height:   220%;        /* 25% of workspace height each */
    --cat-root-tiles-gap:     15rem;
    --cat-root-tiles-width:   92%;

    --cat-tile-border-width:  3px;        /* thinner on mobile */
    --cat-tile-min-height:    80px;

    --cat-lesson-border-width: 2px;
  }

  /* Stack the root tiles vertically; each takes 25% of workspace,
     distributed evenly with the gap. We use flex so we can centre
     vertically AND give equal top/bottom margins to the pair. */
  .catalog-view-root {
    width: var(--cat-root-tiles-width);
    grid-template-columns: 1fr;
    height: auto;
    align-self: center;             /* vertical centring within stage */
  }

  .catalog-tile-root {
    height: var(--cat-root-tile-height);
    min-height: 0;
    padding: 1.25rem 1rem;
  }

  .catalog-tile-root .catalog-tile-label {
    font-size: 1.3rem;
  }

  /* Stage on mobile: centre items vertically so the two stacked tiles
     have even space above and below */
  .catalog-workspace .catalog-stage {
    align-items: center;
  }

  /* Reduce mid-tile sizing on mobile */
  .catalog-view-programs .catalog-tile-label,
  .catalog-view-topics   .catalog-tile-label {
    font-size: 1.05rem;
  }

  /* Defeat the legacy .page-with-fixed-bg child override that
     forces all children to position: relative on mobile.
     The legacy selector has specificity (0,4,0) due to 3 negated
     classes inside :not(), so we use !important to win — this is
     a deliberate architectural override for catalog only. */
  body.catalog-body.page-with-fixed-bg > .catalog-workspace {
    position: fixed !important;
  }
  body.catalog-body.page-with-fixed-bg > .site-footer-mini {
    position: fixed !important;
  }
}


/* ============================================================
   ============================================================
   ★ ROUND 6 — Brand assets (hero Oase + reflection, nav logo)
   ============================================================
   Adds the stylized "Oase" composite to the hero and replaces
   the ◇ + text in the nav with the brand logo PNG and
   stylized "Mathe Oase" wordmark PNG.
   ============================================================ */


/* ============================================================
   ★★★ BRAND ASSETS TUNING KNOBS ★★★
   ============================================================ */
:root {

  /* ── Hero "Oase" PNG ─────────────────────────────────────
     Position values are anchored to the IMAGE's top-left,
     so "35vh from top, 35vw from left" means image top-left
     sits at (35vw, 35vh).
     ──────────────────────────────────────────────────────── */
  --hero-oase-top:        40vh;      /* image top edge from viewport top */
  --hero-oase-left:       23vw;      /* image left edge from viewport left */
  --hero-oase-width:      32vw;      /* image width (height auto-derived) */

  /* ── Reflection beneath the Oase image ──────────────────
     Reflects the bottom-third of the image, fades out toward
     bottom, light blur to simulate water surface ripple. */
  --hero-oase-reflect-gap:        35px;     /* vertical gap between image and reflection */
  --hero-oase-reflect-fraction:   0.33;    /* how much of image height to reflect (0–1) */
  --hero-oase-reflect-opacity:    0.4;
  --hero-oase-reflect-blur:       1px;


  /* ── Nav brand (logo + wordmark image) ──────────────────
     Both are sized as a fraction of nav height so they
     visually balance and never overflow the nav vertically.
     Values are UNITLESS so calc() multiplication works. */
  --nav-logo-height:      0.6;       /* 0–1, fraction of nav height */
  --nav-wordmark-height:  0.47;       /* 0–1, fraction of nav height */
  --nav-brand-gap:        0.85rem;   /* gap between logo and wordmark */
}


/* ============================================================
   1. NAV BRAND — logo + stylized wordmark image
   ============================================================ */

/* The brand anchor sits inside .site-nav-inner — already laid out
   as a row by existing styles. We add image children that respect
   nav-height proportionally. */
.site-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--nav-brand-gap);
}

.site-nav-brand-logo {
  display: inline-flex;
  align-items: center;
  height: calc(var(--nav-height) * var(--nav-logo-height));
}
.site-nav-brand-logo img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.site-nav-brand-text-img {
  display: inline-flex;
  align-items: center;
  height: calc(var(--nav-height) * var(--nav-wordmark-height));
}
.site-nav-brand-text-img img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Hide the legacy text styles in case they leak through any
   page that still has them (defensive). */
.site-nav-brand-mark { display: none; }
.site-nav-brand-text { display: none; }


/* ============================================================
   2. HERO "OASE" COMPOSITE (image + water reflection)
   ------------------------------------------------------------
   .hero-oase wraps:
     - .hero-oase-img         (upright image)
     - .hero-oase-reflection  (flipped, fade-masked, blurred)

   Reflection mechanics:
     - Wrapper has aspect-ratio that crops to bottom-fraction band
     - overflow:hidden clips the inner img
     - Inner img is flipped via scaleY(-1) — flip around image center,
       so the bottom of the original ends up at the top of the
       flipped image, which is what shows in the visible band
     - mask-image fades the bottom edge to transparent
   ============================================================ */

.hero-oase {
  position: absolute;
  top: var(--hero-oase-top);
  left: var(--hero-oase-left);
  width: var(--hero-oase-width);
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero-oase-img {
  display: block;
  width: 100%;
}
.hero-oase-img img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-oase-reflection {
  display: block;
  width: 100%;
  margin-top: var(--hero-oase-reflect-gap);
  overflow: hidden;
  /* Wrapper height = (1200 / (674 × fraction)) aspect from width.
     For text-oase 1200×674, this clips to the bottom fraction band. */
  aspect-ratio: calc(1200 / (674 * var(--hero-oase-reflect-fraction)));
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.7) 40%,
    rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.7) 40%,
    rgba(0, 0, 0, 0) 100%);
}

/* Inner img: full-size, flipped about its own center. With the
   wrapper clipping the top band, the flip exposes the BOTTOM
   of the original image — exactly the reflection we want. */
.hero-oase-reflection img {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleY(-1);
  opacity: var(--hero-oase-reflect-opacity);
  filter: blur(var(--hero-oase-reflect-blur));
}


/* ============================================================
   3. MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 760px) {
  :root {
    /* Hero Oase: smaller and more central on narrow viewports */
    --hero-oase-top:        38vh;
    --hero-oase-left:       30vw;
    --hero-oase-width:      40vw;

    /* Nav: slightly tighter spacing */
    --nav-brand-gap:        0.4rem;
  }
}

/* ============================================================
   ============================================================
   ★ ROUND 10 — Contact page redesign (single-viewport)
   ============================================================
   Mirrors the catalog page's single-viewport architecture:
   body locks to 100dvh, content fits between nav and footer.
   No page-bg-overlay (artwork shows through directly).
   ============================================================ */


/* ============================================================
   ★★★ CONTACT TUNING KNOBS ★★★
   ============================================================ */
:root {

  /* ── Workspace layout ────────────────────────────────────
     The block flows top→bottom inside the workspace. The first
     element (title) is pushed down by --contact-title-margin-top
     from the workspace top. The other elements sit relative to
     the previous one via their own --margin-top knobs. To use
     `auto` margins for "center vertically in remaining space",
     just leave a knob at `auto`. */
  --contact-inner-max-width:        720px;     /* cap on hero content width */
  --contact-inner-align-vertical:   center;    /* center | flex-start | flex-end */

  /* ── Title ──────────────────────────────────────────────── */
  --contact-title-size:             2.2rem;
  --contact-title-color:            var(--c-soft-white);
  --contact-title-shadow:           var(--c-soft-white-shadow);
  --contact-title-margin-top:       0;         /* push title down from above */

  /* ── Channels grid (the two cards) ──────────────────────── */
  --contact-cards-margin-top:       1.75rem;   /* gap above the cards */
  --contact-cards-max-width:        100%;      /* card row width within inner */

  /* ── Sub-text card (below cards) — styled like catalog topic tiles ── */
  --contact-sub-margin-top:         1.75rem;   /* gap above the sub card */
  --contact-sub-size:               1.05rem;
  --contact-sub-text-color:         #000e14;    /* dark ink (matches cat-tile) */
  --contact-sub-bg-color:           255, 255, 255;     /* RGB triplet */
  --contact-sub-bg-opacity:         0.80;
  --contact-sub-border-color:       var(--sand-2);     /* solid sand */
  --contact-sub-border-width:       4px;
  --contact-sub-radius:             var(--radius-lg);
  --contact-sub-padding:            0.95rem 1.25rem;
  --contact-sub-max-width:          580px;
}


/* ============================================================
   1. PAGE LOCK — single viewport, never scrolls
   ============================================================ */

html:has(body.contact-body),
body.contact-body {
  height: 100dvh;
  overflow: hidden;
}


/* ============================================================
   2. WORKSPACE — fills the space between nav and slim footer
   ============================================================ */

.contact-workspace {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: var(--footer-mini-height-slim);
  display: flex;
  align-items: var(--contact-inner-align-vertical);
  justify-content: center;
  padding: 1.5rem 1.5rem;
  z-index: 1;
}

.contact-inner {
  width: 100%;
  max-width: var(--contact-inner-max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* No 'gap' here — each child uses its own --margin-top knob
     so you can place them independently. */
}


/* ============================================================
   3. TITLE
   ============================================================ */

.contact-body .contact-hero-title {
  margin: var(--contact-title-margin-top) 0 0 0;
  font-size: var(--contact-title-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--contact-title-color);
  text-shadow: var(--contact-title-shadow);
  letter-spacing: -0.005em;
}


/* ============================================================
   4. SUB-TEXT CARD (below the channel cards)
   ------------------------------------------------------------
   Styled to match catalog topic tiles: translucent white bg,
   sand border, dark ink text — no text-shadow needed since the
   card's own background provides legibility.
   ============================================================ */

.contact-body .contact-sub {
  margin: var(--contact-sub-margin-top) 0 0 0;
  max-width: var(--contact-sub-max-width);
  font-size: var(--contact-sub-size);
  line-height: 1.55;
  color: var(--contact-sub-text-color);
  background: rgba(var(--contact-sub-bg-color), var(--contact-sub-bg-opacity));
  border: var(--contact-sub-border-width) solid var(--contact-sub-border-color);
  border-radius: var(--contact-sub-radius);
  padding: var(--contact-sub-padding);
  box-shadow: var(--shadow-sm);
  text-shadow: none;
}


/* ============================================================
   5. CHANNELS GRID — desktop side-by-side, mobile stacked.
   The base .channel-card / .channels-grid styles are already
   defined elsewhere; we only adjust spacing/width here so the
   pair sits nicely in the single-viewport workspace.
   ============================================================ */

.contact-body .channels-grid {
  width: 100%;
  max-width: var(--contact-cards-max-width);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: var(--contact-cards-margin-top) 0 0 0;
}


/* ============================================================
   6. DEFENSIVE — hide any legacy contact-page chrome that
   relied on the old section structure.
   ============================================================ */

.contact-body .section-eyebrow,
.contact-body .section-form,
.contact-body .section-contact-note {
  display: none !important;
}


/* ============================================================
   7. MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 760px) {
  :root {
    --contact-inner-max-width:        100%;
    --contact-title-size:             1.5rem;
    --contact-title-margin-top:       0;
    --contact-cards-margin-top:       1.1rem;
    --contact-sub-margin-top:         1.1rem;
    --contact-sub-size:               0.92rem;
    --contact-sub-max-width:          100%;
    --contact-sub-border-width:       3px;       /* match mobile catalog tile */
    --contact-sub-padding:            0.75rem 1rem;
  }

  /* Stack the two channel cards vertically */
  .contact-body .channels-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  /* Tighter workspace padding on mobile */
  .contact-workspace {
    padding: 1rem 1rem;
  }

  /* Defeat the legacy .page-with-fixed-bg > * mobile override
     that would force the workspace to position: relative. */
  body.contact-body.page-with-fixed-bg > .contact-workspace {
    position: fixed !important;
  }
}


/* ============================================================
   ============================================================
   ★ ROUND 12 — Courses page + global button softening
   ============================================================ */


/* ============================================================
   ★★★ GLOBAL BUTTON KNOBS (override base .btn rules)
   ============================================================ */
:root {
  /* Radius: reduce from pill (999px) to something more rectangular */
  --btn-radius-global:          12px;

  /* Primary button: soften the color to a lighter, less intense blue */
  --btn-primary-color-top:      #4da8c9;    /* lighter blue, warmer */
  --btn-primary-color-bottom:   #1a6b8a;    /* softer deep, not full oasis-deep */
  --btn-primary-shadow-color:   rgba(0, 100, 150, 0.28);
}

/* Apply the new radius globally */
.btn {
  border-radius: var(--btn-radius-global);
}

/* Soften the primary button colors */
.btn-primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 48%),
    linear-gradient(135deg, var(--btn-primary-color-top), var(--btn-primary-color-bottom));
  box-shadow: 0 8px 22px var(--btn-primary-shadow-color),
              inset 0 0 0 1px rgba(255,255,255,0.14);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px var(--btn-primary-shadow-color),
              inset 0 0 0 1px rgba(255,255,255,0.18);
}


/* ============================================================
   ★★★ COURSES TUNING KNOBS ★★★
   ============================================================ */
:root {

  /* ── Title — positioned absolutely from the nav-bottom.
     --courses-title-top: distance from workspace top (= nav-bottom).
     0 = flush against nav, 6vh = 6% of viewport below nav, etc. */
  --courses-title-top:              12vh;
  --courses-title-size:             2.2rem;
  --courses-title-color:            var(--c-soft-white);
  --courses-title-shadow:           var(--c-soft-white-shadow);

  /* ── Cards layout ───────────────────────────────────────── */
  --courses-cards-margin-top:       3rem;    /* gap between title and cards */
  --courses-cards-gap:              2.5rem;  /* gap BETWEEN the two cards */
  --courses-cards-max-width:        1000px;  /* total row width cap */

  /* ── Card visual styling (catalog-tile family) ──────────── */
  --courses-card-bg-color:          255, 255, 255;
  --courses-card-bg-opacity:        1;
  --courses-card-border-color:      var(--sand-2);
  --courses-card-border-width:      4px;
  --courses-card-radius:            var(--radius-lg);
  --courses-card-padding:           1.4rem 1.5rem;
  --courses-card-text-color:        #000e14;
  /* Shared min-height so both cards are the same height at rest.
     Set to the natural height of the taller card (currently card 2). */
  --courses-card-min-height:        263px;

  /* ── 15-Stunden-Paket badge ─────────────────────────────── */
  --courses-package-badge-bg:       #c96b0a;    /* warm orange */
  --courses-package-badge-color:    #fff8f0;    /* cream white */
  --courses-package-badge-radius:   6px;
  --courses-package-badge-padding:  0.25rem 0.6rem;

  /* ── Expand toggle strip ────────────────────────────────── */
  --courses-toggle-color:           var(--oasis-deep);
  --courses-toggle-bg:              rgba(0, 119, 182, 0.07);
  --courses-toggle-bg-hover:        rgba(0, 119, 182, 0.14);

  /* ── Expand animation ───────────────────────────────────── */
  --courses-expand-duration:        340ms;

  /* ── Inner content vertical alignment (cards row) ──────── */
  --courses-inner-align-vertical:   center;
}


/* ============================================================
   1. PAGE LOCK (desktop only — mobile scrolls)
   ============================================================ */

@media (min-width: 761px) {
  html:has(body.courses-body),
  body.courses-body {
    height: 100dvh;
    overflow: hidden;
  }
}


/* ============================================================
   2. WORKSPACE
   ============================================================ */

/* Desktop: fixed between nav and slim footer.
   position:relative so the absolutely-placed title can
   measure its top from workspace-top (= nav-bottom). */
@media (min-width: 761px) {
  .courses-workspace {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: var(--footer-mini-height-slim);
    display: flex;
    align-items: var(--courses-inner-align-vertical);
    justify-content: center;
    padding: 1.5rem 2rem;
    z-index: 1;
    /* Establish positioning context for the absolute title */
    isolation: isolate;
  }
}

/* Mobile: normal flow — fits content, footer in flow at bottom */
@media (max-width: 760px) {
  /* Body becomes a flex column spanning at least the full viewport.
     This ensures the footer is always at or below the viewport bottom —
     never floating up in the middle of the screen on short content. */
  body.courses-body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .courses-workspace {
    /* flex: 1 makes the workspace grow to fill remaining space between
       nav and footer, pushing the footer to viewport bottom when content
       is shorter than the viewport. When content is longer, the workspace
       grows naturally and the footer follows below it. */
    flex: 1;
    display: block;
    padding: calc(var(--nav-height) + 1.25rem) 1rem 1.5rem;
  }

  /* On mobile the slim footer must be in normal flow, NOT fixed */
  body.courses-body .site-footer-mini-empty {
    position: relative !important;
    left: auto;
    right: auto;
    bottom: auto;
  }
  body.courses-body.page-with-fixed-bg > .site-footer-mini {
    position: relative !important;
  }

  /* Mobile bg: extend to full viewport height so no gap shows
     below the in-flow footer at the bottom of scrolled content */
  body.courses-body .page-bg {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;   /* full viewport — footer sits on top, that's fine */
  }
  body.courses-body .page-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ============================================================
   3. INNER CONTENT COLUMN
   ============================================================ */

.courses-inner {
  width: 100%;
  max-width: calc(var(--courses-cards-max-width) + 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/* ============================================================
   4. TITLE — absolutely positioned from workspace top
   ============================================================ */

.courses-title {
  /* On desktop: sits at --courses-title-top below the workspace top
     (= nav-bottom). Change this one knob to move the title up/down. */
  margin: 0;
  font-size: var(--courses-title-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--courses-title-color);
  text-shadow: var(--courses-title-shadow);
  letter-spacing: -0.005em;
  text-align: center;
}

@media (min-width: 761px) {
  .courses-title {
    position: absolute;
    top: var(--courses-title-top);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(var(--courses-cards-max-width) + 4rem);
    z-index: 1;
    /* Smooth shift when a card expands */
    transition: top 340ms ease;
  }

  /* When any card is open, the workspace gets .courses-expanded
     and the title slides up to give the cards more room. */
  .courses-workspace.courses-expanded .courses-title {
    top: 4vh;
  }
}


/* ============================================================
   5. CARDS GRID
   ============================================================ */

.courses-cards {
  width: 100%;
  max-width: var(--courses-cards-max-width);
  margin: var(--courses-cards-margin-top) 0 0 0;
  display: flex;
  gap: var(--courses-cards-gap);
}

@media (min-width: 761px) {
  .courses-cards {
    flex-direction: row;
    /* align-items: flex-start is the key — each card heights itself
       independently so expanding one doesn't stretch the other */
    align-items: flex-start;
  }
  .courses-card {
    /* Each card takes equal share of the row width */
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .courses-cards {
    flex-direction: column;
  }
}


/* ============================================================
   6. INDIVIDUAL CARD
   ============================================================ */

.courses-card {
  background: rgba(var(--courses-card-bg-color), var(--courses-card-bg-opacity));
  border: var(--courses-card-border-width) solid var(--courses-card-border-color);
  border-radius: var(--courses-card-radius);
  padding: var(--courses-card-padding);
  color: var(--courses-card-text-color);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  /* Same resting height for both cards. */
  min-height: var(--courses-card-min-height);
}

/* Card header — always visible */
.courses-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.courses-card-title-block {
  flex: 1;
  min-width: 0;
}

.courses-card-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--courses-card-text-color);
  line-height: 1.2;
}

.courses-card-tagline {
  margin: 0;
  font-size: 0.88rem;
  color: var(--courses-card-text-color);
  opacity: 0.72;
  line-height: 1.35;
}

.courses-card-price {
  flex-shrink: 0;
  text-align: right;
}

.courses-price-amount {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--oasis-deep);
}

.courses-price-unit {
  font-size: 0.88rem;
  color: var(--courses-card-text-color);
  opacity: 0.7;
  margin-left: 0.1em;
}

.courses-price-meta {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--courses-package-badge-color);
  background: var(--courses-package-badge-bg);
  border-radius: var(--courses-package-badge-radius);
  padding: var(--courses-package-badge-padding);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(180, 80, 0, 0.28);
  white-space: nowrap;
}

/* On mobile: badge sits on its own line below the card title,
   avoiding collision with the heading text */
@media (max-width: 760px) {
  .courses-card:has(.courses-price-meta) .courses-card-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  .courses-card:has(.courses-price-meta) .courses-card-price {
    text-align: left;
  }
  .courses-price-meta {
    white-space: normal;   /* allow wrapping if very narrow */
    word-break: break-word;
  }
}


/* ============================================================
   7. EXPAND TOGGLE STRIP
   ============================================================ */

.courses-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.85rem -1.5rem 0;  /* bleed to card edges */
  padding: 0.5rem 1.5rem;
  background: var(--courses-toggle-bg);
  border-top: 1px solid rgba(var(--courses-card-border-color-raw, 234, 208, 173), 0.5);
  cursor: pointer;
  user-select: none;
  color: var(--courses-toggle-color);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 180ms ease;
}

.courses-expand-toggle:hover {
  background: var(--courses-toggle-bg-hover);
}

.courses-expand-chevron {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--courses-expand-duration) ease;
  transform: rotate(0deg);
}

/* When card is open, rotate the chevron 90° */
.courses-card-open .courses-expand-chevron {
  transform: rotate(90deg);
}


/* ============================================================
   8. SMOOTH EXPAND — CSS grid-row trick
   ------------------------------------------------------------
   .courses-expand-body wraps a .courses-expand-inner.
   Body: display:grid, grid-template-rows: 0fr (closed) or 1fr (open).
   Inner: overflow:hidden, min-height:0.
   Transition on grid-template-rows gives the smooth clip.
   ============================================================ */

.courses-expand-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--courses-expand-duration) ease;
}

.courses-card-open .courses-expand-body {
  grid-template-rows: 1fr;
}

.courses-expand-inner {
  overflow: hidden;
  min-height: 0;
}

/* Padding inside the inner so content doesn't clip at the top */
.courses-expand-inner > * {
  padding-top: 0.85rem;
}


/* ============================================================
   9. VARIANTS (inside card 1)
   ============================================================ */

.courses-variants {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.courses-variant {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(234, 208, 173, 0.45);
}

.courses-variant:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.courses-variant-title {
  margin: 0 0 0.18rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--courses-card-text-color);
}

.courses-variant-desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--courses-card-text-color);
  opacity: 0.78;
  line-height: 1.35;
}

.courses-variant-note {
  margin: 0.2rem 0 0 0;
  font-size: 0.8rem;
  color: var(--oasis-deep);
  font-weight: 500;
}

.courses-variant-highlight {
  /* Subtle tint for the Notfall variant */
  padding: 0.6rem 0.65rem;
  margin: 0 -0.65rem;
  background: rgba(0, 119, 182, 0.06);
  border-radius: var(--radius-sm);
}


/* ============================================================
   10. PRICE TABLE (inside card 2)
   ============================================================ */

.courses-card .price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--courses-card-text-color);
  margin-bottom: 0;
}

.courses-card .price-table th,
.courses-card .price-table td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid rgba(234, 208, 173, 0.45);
  text-align: left;
}

.courses-card .price-table th {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--courses-card-text-color);
  opacity: 0.65;
}

.courses-card .price-table tbody tr:last-child td {
  border-bottom: 0;
}

.courses-card .price-table td:last-child,
.courses-card .price-table th:last-child {
  text-align: right;
}

.courses-card .price-table strong {
  color: var(--oasis-deep);
  font-weight: 700;
}


/* ============================================================
   11. CTA BUTTON ROW
   ============================================================ */

.courses-card-cta {
  margin-top: auto;   /* pushes button to card bottom regardless of content above */
  padding-top: 1rem;  /* visual breathing room above the button */
  display: flex;
  justify-content: center;
}


/* ============================================================
   12. MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 760px) {
  :root {
    --courses-title-size:             1.5rem;
    --courses-title-top:              0;         /* not used (title in flow on mobile) */
    --courses-cards-margin-top:       1.25rem;
    --courses-cards-gap:              1rem;
    --courses-card-border-width:      3px;
    --courses-card-padding:           1.1rem 1.15rem;
  }

  /* Title: back in normal flow on mobile (not absolutely positioned) */
  .courses-title {
    position: static;
    transform: none;
    width: auto;
    max-width: 100%;
    margin-bottom: 0;
  }

  .courses-expand-toggle {
    margin-left: -1.15rem;
    margin-right: -1.15rem;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  /* Mobile footer: in normal document flow, not fixed */
  body.courses-body .site-footer-mini {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
}


/* ============================================================
   ============================================================
   ★ PRODUCTION — Contact page mobile overlay
   ============================================================
   Softens the background artwork on mobile by applying a
   low-opacity white wash over the page-bg image. Desktop is
   intentionally unaffected — the artwork shows fully there.

   To adjust intensity: change --contact-overlay-opacity.
   To extend to desktop: remove the @media wrapper.
   ============================================================ */

:root {
  --contact-overlay-opacity: 0.2;   /* 0 = invisible, 1 = fully white */
}

/* Desktop: no overlay at all — artwork shows fully. */
.contact-overlay {
  background: none;
}

/* Mobile: soft white wash to dim the artwork. */
@media (max-width: 760px) {
  .contact-overlay {
    background: rgba(255, 255, 255, var(--contact-overlay-opacity));
  }
}


/* ============================================================
   ============================================================
   ★ ROUND 20 — Catalog: root tiles, ad strip, breadcrumb ✵
   ============================================================ */


/* ============================================================
   ★★★ CATALOG TILE + AD STRIP TUNING KNOBS ★★★
   ============================================================ */
:root {

  /* ── Breadcrumb home icon (✵) ───────────────────────────── */
  --cat-bc-home-color:         var(--gold);          /* ✵ icon color */
  --cat-bc-home-size:          1.1rem;
  --cat-bc-home-hover:         var(--gold-light);

  /* ── Root tile cards (desktop) ──────────────────────────── */
  --cat-root-tile-width:       22vw;                 /* card width */
  /* Height auto-derived: 1.5 × width → aspect 2:3 (portrait) */
  --cat-root-tile-height:      calc(var(--cat-root-tile-width) * 1.5);
  --cat-root-tile-gap:         2.5rem;               /* gap between the two cards */
  --cat-root-tile-radius:      var(--radius-xl);
  /* Overlay — dark grey wash over the card artwork for text legibility */
  --cat-root-tile-overlay-color:   30, 30, 30;       /* RGB triplet — dark grey */
  --cat-root-tile-overlay-opacity: 0.50;             /* 0 = invisible, 1 = fully opaque */
  /* Text on the cards */
  --cat-root-tile-label-color: #ffffff;              /* card label color */
  --cat-root-tile-sub-color:   rgba(255,255,255,0.82); /* card sublabel color */
  --cat-root-tile-label-size:  1.6rem;
  --cat-root-tile-sub-size:    0.88rem;

  /* ── Ad strip (desktop) ──────────────────────────────────── */
  --cat-ad-strip-height:       4.5rem;               /* strip height */
  --cat-ad-strip-margin-top:   1.5rem;               /* gap above strip */
  --cat-ad-strip-radius:       var(--radius-lg);
  --cat-ad-strip-text-size:    1.0rem;
  --cat-ad-strip-text-color:   #ffffff;              /* ad strip text color */
  --cat-ad-strip-link-color:   var(--oasis);         /* "jetzt" link color */

  /* ── Content area (drill-down levels, scrollable) ───────── */
  --cat-content-area-gap:      0;                    /* inner tile gap override */

  /* ── Mobile root tiles ───────────────────────────────────── */
  --cat-root-tile-mobile-width:  84vw;
  /* 27% of (100dvh - nav 76px - footer 19px) ≈ 27% of 749px ≈ 202px.
     Expressed in vh for reliable resolution inside fixed containers. */
  --cat-root-tile-mobile-height: 24vh;
  --cat-ad-strip-mobile-height:  18vh;
}


/* ============================================================
   1. BREADCRUMB ✵ HOME ICON
   ============================================================ */

.catalog-workspace .catalog-breadcrumb-home {
  color: var(--cat-bc-home-color);
  font-size: var(--cat-bc-home-size);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: color 180ms ease;
}
.catalog-workspace .catalog-breadcrumb-home:hover {
  color: var(--cat-bc-home-hover);
}


/* ============================================================
   2. ROOT VIEW LAYOUT
   ============================================================ */

/* The root view is a flex column: tile row on top, ad strip below */
.catalog-view-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cat-ad-strip-margin-top);
}

.catalog-root-tiles {
  display: flex;
  flex-direction: row;
  gap: var(--cat-root-tile-gap);
  align-items: flex-start;
  justify-content: center;
}


/* ============================================================
   3. ROOT TILE CARD
   ============================================================ */

.catalog-root-tile {
  position: relative;
  width: var(--cat-root-tile-width);
  height: var(--cat-root-tile-height);
  border-radius: var(--cat-root-tile-radius);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.catalog-root-tile:not(.catalog-tile-disabled):hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,0.22));
}
.catalog-tile-disabled.catalog-root-tile {
  cursor: default;
  filter: grayscale(0.35) brightness(0.8);
}

/* Background image fills card */
.catalog-root-tile-bg {
  position: absolute;
  inset: 0;
  display: block;
}
.catalog-root-tile-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark grey overlay for text legibility */
.catalog-root-tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--cat-root-tile-overlay-color), var(--cat-root-tile-overlay-opacity));
  border-radius: inherit;
}

/* Centered text on top of overlay */
.catalog-root-tile-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  gap: 0.3rem;
}
.catalog-root-tile-label {
  font-size: var(--cat-root-tile-label-size);
  font-weight: 700;
  color: var(--cat-root-tile-label-color);
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  letter-spacing: 0.02em;
}
.catalog-root-tile-sublabel {
  font-size: var(--cat-root-tile-sub-size);
  font-weight: 500;
  color: var(--cat-root-tile-sub-color);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}


/* ============================================================
   4. AD STRIP
   ============================================================ */

.catalog-ad-strip {
  position: relative;
  /* Width matches the combined width of both tiles + gap */
  width: calc(var(--cat-root-tile-width) * 2 + var(--cat-root-tile-gap));
  height: var(--cat-ad-strip-height);
  border-radius: var(--cat-ad-strip-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* Background image fills strip */
.catalog-ad-strip-bg {
  position: absolute;
  inset: 0;
  display: block;
}
.catalog-ad-strip-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text centered over background */
.catalog-ad-strip-text {
  position: relative;
  z-index: 2;
  font-size: var(--cat-ad-strip-text-size);
  font-weight: 600;
  color: var(--cat-ad-strip-text-color);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  text-align: center;
  padding: 0 1.5rem;
  white-space: nowrap;
}

/* "jetzt" link */
.catalog-ad-link {
  color: var(--cat-ad-strip-link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
  transition: color 180ms ease;
}
.catalog-ad-link:hover {
  color: var(--oasis-light);
}


/* ============================================================
   5. DRILL-DOWN VIEWS — content area + persistent ad strip
   ============================================================ */

/* Views below root use a flex-column layout:
   content area (scrollable) on top, ad strip pinned below */
.catalog-view-programs,
.catalog-view-topics,
.catalog-view-lessons {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--cat-ad-strip-margin-top);
}

/* Content area fills remaining space and scrolls internally */
.catalog-content-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-right: 0.25rem;
}

/* Scrollbar styling matching the stage scrollbar */
.catalog-content-area::-webkit-scrollbar { width: 8px; }
.catalog-content-area::-webkit-scrollbar-thumb {
  background: rgba(0, 119, 182, 0.35);
  border-radius: 4px;
}
.catalog-content-area::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 119, 182, 0.55);
}
.catalog-content-area::-webkit-scrollbar-track { background: transparent; }

/* Ad strip inside drill-down views matches root strip width */
.catalog-view-programs .catalog-ad-strip,
.catalog-view-topics   .catalog-ad-strip,
.catalog-view-lessons  .catalog-ad-strip {
  width: 100%;
  height: var(--cat-ad-strip-height);
  flex-shrink: 0;
}


/* ============================================================
   6. STAGE — let it flex to fill workspace correctly
   ============================================================ */

/* The stage now needs to give its view children full height
   so the flex layout inside them works correctly. */
.catalog-workspace .catalog-stage {
  /* Override the existing align-items: flex-start if set */
  align-items: stretch;
}
.catalog-workspace .catalog-stage > .catalog-view {
  width: 100%;
  height: 100%;
}


/* ============================================================
   7. MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 760px) {

  /* Root tiles: stack vertically, each 27% workspace height */
  .catalog-root-tiles {
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    width: var(--cat-root-tile-mobile-width);
    height: auto;
  }

  .catalog-root-tile {
    width: 100%;
    height: var(--cat-root-tile-mobile-height);
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .catalog-root-tile:last-child {
    margin-bottom: 0;
  }

  .catalog-root-tile-label { font-size: 1.35rem; }

  /* Ad strip: full mobile width, 20% workspace height */
  .catalog-ad-strip {
    width: var(--cat-root-tile-mobile-width);
    height: var(--cat-ad-strip-mobile-height);
    margin-top: 2vh;
  }

  /* Ad strip text may wrap to 2 lines on mobile */
  .catalog-ad-strip-text {
    font-size: 0.82rem;
    white-space: normal;
    line-height: 1.4;
    padding: 0 1rem;
  }

  /* Ad strip link */
  .catalog-ad-link {
    color: var(--oasis-light);
  }

  /* Root view centered */
  .catalog-view-root {
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}