/* =========================================================
   COMPONENTS — "INNER BLOOM"
   Warm organic / botanical-editorial
   (class names preserved — JS injects fixed names)
   ========================================================= */

/* ── Logo ── */
.logo {
  display: flex;
  align-items: baseline;
  gap: var(--logo-gap);
}

.logo-badge {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.10em;
  font-size: 1.15rem;
}

.logo-text {
  font-family: var(--font-base);
  font-weight: 600;
  color: var(--accent);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── Buttons — graphite + gold border ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--btn-radius-pill);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-base);
  font-size: var(--btn-font-size);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* travelling gold sheen on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: scale(.975); }

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border-hover);
  color: var(--btn-primary-text);
  transform: translateY(-2px);
  box-shadow: var(--btn-primary-shadow-hover);
}
.btn-primary:active { transform: translateY(0) scale(.975); }

.btn-ghost {
  background: transparent;
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-text);
}

.btn-ghost:hover {
  background: var(--btn-ghost-bg-hover);
  border-color: var(--btn-ghost-border-hover);
  color: var(--btn-ghost-text-hover);
  transform: translateY(-2px);
}

a.btn, button.btn { color: var(--text-primary); -webkit-text-fill-color: currentColor; }
a.btn.btn-primary, button.btn.btn-primary { color: var(--btn-primary-text) !important; -webkit-text-fill-color: var(--btn-primary-text) !important; }
a.btn.btn-primary *, button.btn.btn-primary * { color: var(--btn-primary-text) !important; -webkit-text-fill-color: var(--btn-primary-text) !important; }
a.btn.btn-ghost, button.btn.btn-ghost { color: var(--btn-ghost-text); -webkit-text-fill-color: var(--btn-ghost-text); }

/* ── Section typography ── */
.section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-section-title);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.55rem;
  margin-top: 0.25rem;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.section-subtitle {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: 300;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
  line-height: 1.8;
}

.section-link {
  color: var(--accent);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
  transition: gap .2s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}
.section-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .3s cubic-bezier(.22,1,.36,1);
}
.section-link:hover { gap: 0.6rem; }
.section-link:hover::after { width: 100%; }

/* ── Generic card ── */
.card {
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-soft);
}

/* ── Shared cards ── */
.track-card,
.course-card,
.resource-card {
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: var(--card-padding);
  box-shadow: var(--shadow-soft);
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  display: flex;
  flex-direction: column;
  position: relative;
}

.track-card:hover,
.course-card:hover,
.resource-card:hover {
  border-color: var(--accent-line);
  background: var(--surface-alt);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.track-title {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.45rem;
  color: var(--text-primary);
  font-family: var(--font-heading);
}

.track-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 0.65rem;
  line-height: 1.75;
}

/* ── Hero (inner page) ── */
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 500;
  font-family: var(--font-heading);
  color: var(--text-primary);
}

.hero-cta { margin-top: 2.2rem; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.8rem;
}

.hero-meta span  { font-size: var(--fs-xs); }
.hero-meta strong { font-weight: 600; color: var(--text-primary); }

.hero-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.hero-filename { color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.04em; }

/* ── Pills ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.34rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  font-family: var(--font-base);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pill-text);
}

.pill strong, .pill span { color: inherit; -webkit-text-fill-color: currentColor; }

.pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pill-dot);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Header / Nav (scoped: only the site header) ── */
body > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

.nav { min-height: var(--nav-height); }

.nav-links a {
  position: relative;
  padding-bottom: 4px;
  font-family: var(--font-base);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--nav-link-color);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color .25s;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%; height: 1px;
  background: var(--accent);
  transition: width .3s cubic-bezier(.22,1,.36,1);
}

.nav-links a:hover,
.nav-links a.active { color: var(--text-primary); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* ── CTA wrapper ── */
.cta { margin-top: 1.6rem; display: inline-block; }
.cta a.btn-primary { margin-top: 1.5rem; display: inline-block; }

/* ── Footer — darkest plane ── */
footer {
  background: var(--footer-bg);
  padding: 4rem 0 0;
  margin-top: 6rem;
  border-top: 1px solid var(--line);
  position: relative;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 2rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  border-bottom: 1px solid var(--line);
}

.footer-brand-col { min-width: 0; }

.footer-brand { display: flex; align-items: center; gap: 0.6rem; }

.footer-brand .logo-badge {
  font-size: 1.05rem;
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: var(--text-primary);
}

.footer-brand .logo-text {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
}

.footer-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 300px;
  line-height: 1.75;
  margin-top: 0.5rem;
}

.footer-address {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

.footer-column { display: flex; flex-direction: column; gap: 0.7rem; }

.footer-column h4 {
  font-family: var(--font-base);
  font-size: var(--fs-eyebrow);
  color: var(--accent);
  margin-bottom: 0.55rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.footer-column a {
  font-size: 0.86rem;
  color: var(--text-muted);
  transition: color .2s;
  width: fit-content;
}
.footer-column a:hover { color: var(--accent); }

.footer-copy {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.4rem 2rem;
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-copy a {
  color: var(--text-muted);
  transition: color .2s;
}
.footer-copy a:hover { color: var(--accent); }

@media (min-width: 600px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-brand-col { grid-column: 1 / -1; }
}

@media (min-width: 880px) {
  .footer-inner {
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 2rem;
  }
  .footer-brand-col { grid-column: auto; }
}

@media (max-width: 599px) {
  .footer-copy { flex-direction: column; text-align: center; }
}

/* ── Register / Contact ── */
.register-section { padding: 2.5rem 0 3rem; }
.register-grid { display: flex; flex-direction: column; gap: 1.75rem; }

.register-info-card {
  flex: 1;
  padding: 2rem;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.register-info-card h1 { font-size: 1.9rem; margin-bottom: 0.45rem; color: var(--text-primary); }

.register-subtitle { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1.1rem; }

.register-benefits { list-style: none; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 1.1rem; }
.register-benefits li { margin-bottom: 0.4rem; padding-left: 1rem; position: relative; }
.register-benefits li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 1px; background: var(--accent); }

.register-highlight {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.register-form-card {
  flex: 1;
  padding: 2rem;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.register-form-card h2 { font-size: 1.6rem; margin-bottom: 0.3rem; }
.register-form-desc { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.3rem; }

.form-row { display: flex; flex-direction: column; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.95rem; }
.form-field label {
  font-family: var(--font-base);
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Underlined transparent fields */
.register-form-card input,
.register-form-card select,
.register-form-card textarea {
  background-color: transparent;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--accent-line);
  padding: 0.6rem 0.1rem;
  font-size: 0.92rem;
  color: var(--text-primary);
  transition: border-color .25s, box-shadow .25s;
}

.register-form-card input::placeholder,
.register-form-card textarea::placeholder { color: var(--text-muted); opacity: 1; font-style: italic; }

.register-form-card select { cursor: pointer; }
.register-form-card select option { background: var(--surface); color: var(--text-primary); }

.register-form-card textarea {
  border-radius: 0;
  min-height: 120px;
  resize: vertical;
}

.register-form-card input:focus,
.register-form-card select:focus,
.register-form-card textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.field-hint  { font-size: 0.72rem; color: var(--text-muted); }
.field-error { display: block; color: #B3261E; font-size: 0.72rem; margin-top: 0.15rem; min-height: 1rem; }
.radio-group    { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.86rem; color: var(--text-muted); }
.checkbox-label { font-size: 0.86rem; color: var(--text-muted); }
.form-field-inline { align-items: flex-start; }
.form-actions { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.form-alt     { font-size: 0.84rem; color: var(--text-muted); }
.form-alt a   { color: var(--accent); font-weight: 500; }
.form-status  { margin-top: 0.85rem; font-size: 0.88rem; min-height: 1.2rem; font-weight: 500; color: var(--accent); }

@media (min-width: 880px) {
  .register-grid { flex-direction: row; }
  .form-row { flex-direction: row; }
  .form-row .form-field { flex: 1; }
}

/* ── Mobile menu ── */
.mobile-menu {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--mobile-menu-bg);
  border-bottom: 1px solid var(--mobile-menu-border);
  padding: var(--mobile-menu-padding-y) var(--mobile-menu-padding-x);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mobile-menu-item-gap);
  z-index: 80;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.mobile-menu.is-open { display: flex; }

.mobile-menu-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  margin-top: 0.6rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
}

.mobile-menu a:not(.btn) {
  display: block;
  width: 100%;
  padding: var(--mobile-menu-item-padding-y) 0;
  color: var(--mobile-menu-text);
  font-family: var(--font-base);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  transition: color .25s;
}

.mobile-menu a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 4px;
  width: 0%; height: 1px;
  background: var(--accent);
  transition: width .25s;
}

.mobile-menu a:not(.btn):hover,
.mobile-menu a:not(.btn).active { color: var(--text-primary); }
.mobile-menu a:not(.btn):hover::after,
.mobile-menu a:not(.btn).active::after { width: 28px; }

.mobile-toggle { background: none; border: none; cursor: pointer; padding: 0; }

.mobile-toggle span,
.mobile-toggle span::before,
.mobile-toggle span::after {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--text-primary);
  transition: .25s cubic-bezier(.22,1,.36,1);
  position: relative;
}

.mobile-toggle span::before,
.mobile-toggle span::after { content: ""; position: absolute; left: 0; }
.mobile-toggle span::before { top: -7px; }
.mobile-toggle span::after  { top: 7px; }
.mobile-toggle.is-open span { background: transparent; }
.mobile-toggle.is-open span::before { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.is-open span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ── Utilities ── */
.no-scroll { overflow: hidden; }

/* ── Modal ── */
.modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(51,61,33,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999;
  padding: 1rem;
}
.modal.open { display: flex; }

.modal-box {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--r-lg);
  max-width: 560px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-flat);
  border: 1px solid var(--line);
  animation: modalIn .4s var(--ease-spring);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  border: none; background: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  transition: color .15s, background .15s;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.modal-close:hover { color: var(--accent); background: var(--accent-soft); }

/* ── Course details ── */
.course-card-header { display: flex; justify-content: flex-start; align-items: flex-start; gap: 0.85rem; }

.course-avatar {
  width: 92px; height: 92px;
  flex: 0 0 92px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.course-avatar img { width: 110%; height: 110%; object-fit: cover; }
.course-head { flex: 1; min-width: 0; }

.course-details {
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.9rem 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.course-details dt {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.course-details dd { margin: 0; font-size: 0.92rem; color: var(--text-primary); font-family: var(--font-heading); }

@media (max-width: 520px) { .course-details { grid-template-columns: 1fr; } }

.profile-hero { display: flex; justify-content: center; margin: 1.25rem 0 1.5rem; }

.profile-hero-avatar {
  width: 200px; height: 224px;
  border-radius: var(--radius-portrait);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--accent-line);
  background: var(--surface);
}

.profile-hero-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 768px) { .profile-hero-avatar { width: 160px; height: 180px; } }

.course-title    { font-size: 1.3rem; font-weight: 500; color: var(--text-primary); font-family: var(--font-heading); }
.course-subtitle { font-size: 0.88rem; color: var(--text-muted); }

.course-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }

.course-badge {
  font-family: var(--font-base);
  font-size: var(--badge-font-size);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  border-radius: var(--r-sm);
  border: 1px solid var(--badge-border);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.course-badge--primary {
  border-color: var(--badge-primary-border);
  background: var(--badge-primary-bg);
  color: var(--badge-primary-text);
}

.course-meta { display: flex; flex-wrap: wrap; gap: 0.7rem; font-size: 0.82rem; color: var(--text-muted); }
.course-meta span { font-size: var(--fs-xs); }

.course-actions {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  padding-top: 1.25rem;
}

.course-actions .btn { margin-top: 0; padding-inline: 1.2rem; }

.course-rating { font-size: 0.82rem; color: var(--text-muted); }
.course-rating strong { color: var(--accent); font-weight: 500; font-family: var(--font-heading); font-size: 1rem; }

.empty-state {
  margin-top: 1.5rem;
  padding: 2.5rem 1.5rem;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px dashed var(--line);
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ── Team cards (legacy) ── */
.team-card { border-radius: var(--r-sm); }

.team-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.team-body { display: flex; flex-direction: column; gap: 0.5rem; }

.team-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text-primary);
}

.team-role {
  font-family: var(--font-base);
  font-size: var(--fs-eyebrow);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.team-meta { display: grid; gap: 0.3rem; font-size: 0.86rem; }
.team-meta dt { font-weight: 600; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.team-meta dd { margin: 0; color: var(--text-primary); }
.team-meta a { text-decoration: none; color: var(--text-primary); font-weight: 500; transition: color .15s; }
.team-meta a:hover { color: var(--accent); }

.team-bio { font-size: 0.9rem; color: var(--text-muted); line-height: 1.75; }

/* ── Tilt cards — RETIRED (no 3D tilt) ── */
.tilt-card {
  position: relative;
  transition: border-color .4s ease, background-color .4s ease;
}

body[data-page="home"] .tilt-card:hover {
  border-color: var(--accent-line);
}

/* ── Nav dropdown ── */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nav-link-color);
  font-family: var(--font-base);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color .25s;
  position: relative;
}

.nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 16px;
}

.nav-dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%; height: 1px;
  background: var(--accent);
  transition: width .3s cubic-bezier(.22,1,.36,1);
}

.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown-toggle.active { color: var(--text-primary); }
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown-toggle.active::after { width: 100%; }

.dropdown-chevron {
  display: inline-block;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s;
  flex-shrink: 0;
}

.nav-dropdown:hover .dropdown-chevron { transform: rotate(-135deg) translateY(2px); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-flat);
  padding: 0.4rem;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  z-index: 200;
  /* animated entry instead of a hard display swap */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-30%) translateY(-8px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-30%) translateY(0);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s;
}

.nav-dropdown-menu a { transform: translateY(2px); opacity: .85; }
.nav-dropdown:hover .nav-dropdown-menu a,
.nav-dropdown:focus-within .nav-dropdown-menu a { transform: translateY(0); opacity: 1; }

.nav-dropdown-menu a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active { background: var(--accent-soft); color: var(--accent); }
.nav-dropdown-menu a.active { font-weight: 600; }

/* Mobile nav group */
.mobile-nav-group { width: 100%; }

.mobile-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--mobile-menu-item-padding-y) 0;
  color: var(--mobile-menu-text);
  font-family: var(--font-base);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color .25s;
}
.mobile-nav-group-toggle:hover { color: var(--text-primary); }

.mobile-nav-group-items {
  display: none;
  flex-direction: column;
  padding-left: 1rem;
  border-left: 1px solid var(--accent-line);
  margin-bottom: 0.35rem;
}

.mobile-nav-group.is-open .mobile-nav-group-items { display: flex; }
.mobile-nav-group.is-open .mobile-nav-group-toggle .dropdown-chevron {
  transform: rotate(-135deg) translateY(2px);
}

.mobile-nav-group-items a {
  display: block;
  padding: 0.5rem 0;
  color: var(--mobile-menu-text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color .18s;
}
.mobile-nav-group-items a:hover,
.mobile-nav-group-items a.active { color: var(--accent); }

/* ── Scroll reveal ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* ── Links / wrappers ── */
.course-card-link { display: block; height: 100%; text-decoration: none; color: inherit; }

/* ── Book cards ── */
.book-card { height: 100%; text-decoration: none; color: inherit; display: block; }

.book-card-inner {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--surface);
  transition: border-color .4s ease;
}

.lp-card:hover .book-card-inner {
  border-color: var(--accent-line);
}

.book-card-cover {
  width: 100%; height: 100%;
  overflow: hidden;
}

.book-card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter .4s ease, transform .5s cubic-bezier(.22,1,.36,1);
}

.lp-card:hover .book-card-cover img {
  transform: scale(1.04);
}

.lp-card-title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.5rem 1.4rem 1.2rem;
  background: linear-gradient(to top, rgba(51,61,33,0.9) 35%, transparent);
}

.lp-card-title h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-on-dark);
  line-height: 1.25;
}

/* ── Video / Hero media ── */
.hero-media {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.hero-media video { display: block; width: 100%; height: 400px; object-fit: cover; }

@media (max-width: 880px) { .hero-media video { height: 300px; } }

.video-card {
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  max-width: 420px;
}

.video-card video,
.video-card iframe {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
}

/* ── Bibliography card ── */
.course-details-right { display: flex; flex-direction: column; gap: 1.2rem; }

.biblio-card {
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.biblio-card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1.3rem;
  font-family: var(--font-base);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.biblio-links { display: flex; flex-direction: column; }

.biblio-link {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.3rem;
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.biblio-link:last-child { border-bottom: none; }
.biblio-link:hover { background: var(--accent-soft); }

.biblio-link-icon { font-size: 1.2rem; line-height: 1; flex-shrink: 0; color: var(--accent-alt); }

.biblio-link > span:not(.biblio-link-icon) {
  display: flex; flex-direction: column;
  gap: 0.15rem; flex: 1;
}

.biblio-link strong { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); font-family: var(--font-heading); }
.biblio-link small  { font-size: 0.7rem; color: var(--text-muted); }

.biblio-arrow { color: var(--accent); flex-shrink: 0; transition: transform .2s; }
.biblio-link:hover .biblio-arrow { transform: translateX(4px); }

/* ── PDF viewer ── */
.pdf-card {
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  width: 100%;
  margin-top: 1.5rem;
}

.pdf-card-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.3rem;
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}

.pdf-card-title { flex: 1; }

.pdf-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border-radius: var(--r-sm);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  border: 1px solid var(--accent-line);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s, background .25s, color .25s;
}
.pdf-open-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.pdf-iframe-wrap { overflow: hidden; background: var(--bg-alt); }

.pdf-iframe-wrap iframe {
  display: block;
  width: calc(100% + 80px);
  margin-left: -40px;
  height: 780px;
  border: 0;
}

@media (max-width: 600px) { .pdf-iframe-wrap iframe { height: 480px; } }

/* ── Profile details hero (contents-spread masthead) ── */
.profile-details-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
.profile-details-hero-main { min-width: 0; }
.profile-details-hero-side { display: flex; justify-content: center; }

@media (min-width: 720px) {
  .profile-details-hero { grid-template-columns: 1fr auto; }
  .profile-details-hero-side { justify-content: flex-end; }
}

/* ── Hero prompt image (legacy) ── */
.hero-code-img {
  display: block;
  width: 140%;
  max-width: none !important;
  transform: translateX(-11%) scale(0.8);
  transform-origin: center;
}

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

/* ── Global typography ── */
p { color: var(--text-muted); }
h1, h2, h3 { color: var(--text-primary); }

/* ── Reveal animations (slowed, no overshoot) ── */
.reveal-left {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

.reveal-left.is-visible,
.reveal-right.is-visible { opacity: 1; transform: translateY(0); }

/* ── Marquee bar — stately crawl, thin band ── */
.marquee-bar {
  overflow: hidden;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
  white-space: nowrap;
  width: 100%;
}

.lt-marquee-bar {
  background: var(--bg-alt);
}

.marquee-track {
  display: inline-flex;
  animation: marquee-scroll 40s linear infinite;
  will-change: transform;
}

.marquee-content {
  flex-shrink: 0;
  font-family: var(--font-base);
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 2.5rem;
}
.lt-marquee-bar .marquee-content { color: var(--text-muted); }
.lt-marquee-bar .marquee-content::after { content: "•"; margin-left: 5rem; color: var(--accent); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Search / filter bar (inline variant) ── */
.search-filter-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-soft);
}

.search-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.search-input-wrap { flex: 1; min-width: 170px; }

.filter-input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.filter-input::placeholder { color: var(--text-muted); opacity: 1; font-style: italic; }
.filter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.filter-select {
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  outline: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.filter-select option { background: var(--surface); color: var(--text-primary); }
.filter-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.sort-buttons { display: flex; gap: 0.4rem; flex-shrink: 0; }

.sort-btn {
  padding: 0.55rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-base);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
  position: relative;
}

.sort-btn:hover { color: var(--text-primary); border-color: var(--accent-line); }

/* active sort = gold underline */
.sort-btn.active {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}
.sort-btn.active::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: 4px;
  height: 1px;
  background: var(--accent);
}

.filter-no-results { padding: 3rem; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

@media (max-width: 600px) {
  .search-filter-row { flex-direction: column; }
  .sort-buttons { width: 100%; }
}

/* =========================================================
   TEAM — PHOTO CARDS (arched portrait grid)
   ========================================================= */

.team-photo-card {
  position: relative;
  border-radius: 999px 999px 18px 18px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  max-width: 320px;
  margin: 0 auto;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  transition: border-color .4s ease;
}

.team-photo-card:hover {
  border-color: var(--accent-line);
}

.team-photo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}

.team-photo-card:hover .team-photo-card__img {
  transform: scale(1.03);
}

.team-photo-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.4rem 1.2rem;
  background: linear-gradient(to top, rgba(51,61,33,0.88) 12%, rgba(51,61,33,0.5) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
  text-align: left;
}

.team-photo-card__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-on-dark);
  margin: 0;
  line-height: 1.25;
}

.team-photo-card__position {
  font-family: var(--font-base);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FDE68A;
  margin: 0.35rem 0 0;
  line-height: 1.4;
}

@keyframes teamCardFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.team-photo-card.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
}

.team-photo-card.reveal-on-scroll.is-visible {
  animation: teamCardFadeIn 0.7s cubic-bezier(.22,1,.36,1) forwards;
}

.team-photo-card.reveal-on-scroll.is-visible:nth-child(1) { animation-delay: 0s; }
.team-photo-card.reveal-on-scroll.is-visible:nth-child(2) { animation-delay: 0.07s; }
.team-photo-card.reveal-on-scroll.is-visible:nth-child(3) { animation-delay: 0.14s; }
.team-photo-card.reveal-on-scroll.is-visible:nth-child(4) { animation-delay: 0.21s; }
.team-photo-card.reveal-on-scroll.is-visible:nth-child(5) { animation-delay: 0.28s; }
.team-photo-card.reveal-on-scroll.is-visible:nth-child(6) { animation-delay: 0.35s; }
.team-photo-card.reveal-on-scroll.is-visible:nth-child(7) { animation-delay: 0.42s; }
.team-photo-card.reveal-on-scroll.is-visible:nth-child(8) { animation-delay: 0.49s; }

@media (max-width: 599px) {
  .team-photo-card {
    aspect-ratio: 3 / 4;
    max-width: 340px;
    margin: 0 auto;
  }
}

/* =========================================================
   HOMEPAGE — INNER BLOOM
   Light botanical hero · Soul-Mind-Body cycle · pillar portals
   ========================================================= */

/* ── Hero — cream light, copy left, breathing cycle right ── */
.ib-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vh, 5.5rem) 0 clamp(2.5rem, 6vh, 4.5rem);
}

/* soft organic washes behind the hero (paint once, GPU-light) */
.ib-hero::before {
  content: "";
  position: absolute;
  top: -22%; right: -14%;
  width: 58vw; height: 58vw;
  max-width: 860px; max-height: 860px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(168,178,126,0.28) 0%, rgba(168,178,126,0.10) 45%, rgba(168,178,126,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.ib-hero::after {
  content: "";
  position: absolute;
  bottom: -30%; left: -12%;
  width: 44vw; height: 44vw;
  max-width: 640px; max-height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(161,98,7,0.14) 0%, rgba(161,98,7,0.05) 45%, rgba(161,98,7,0) 70%);
  pointer-events: none;
  z-index: 0;
}

.ib-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.ib-hero-copy { max-width: 620px; }

.ib-hero-title {
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-top: 0.4rem;
}

.ib-hero-title em {
  font-style: italic;
  color: var(--terra-deep);
}

.ib-hero-sub {
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.8;
  max-width: 54ch;
}

.ib-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.4rem;
}

.ib-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.ib-hero-name {
  font-family: var(--font-heading);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ib-hero-role {
  font-family: var(--font-base);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-alt);
}

.ib-hero-meta .lt-hero-pill { margin-left: auto; margin-bottom: 0; }

/* quiet underline link (shared with sections) */
.lt-hero-link {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  font-weight: 600;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}
.lt-hero-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 4px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .3s cubic-bezier(.22,1,.36,1);
}
.lt-hero-link:hover { background: transparent; color: var(--accent); }
.lt-hero-link:hover::after { width: 100%; }

.lt-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: rgba(168,178,126,0.12);
  margin-bottom: 1.25rem;
  font-family: var(--font-base);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.pill-dot,
.lt-hero-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra);
  flex-shrink: 0;
}

/* ── The Cycle — Soul · Mind · Body ring (inline SVG) ── */
.ib-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ib-cycle {
  width: min(100%, 460px);
  aspect-ratio: 1 / 1;
  position: relative;
}

.ib-cycle svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* three 120° arcs — separate paths so each is its own hover/click target */
.ib-arc {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.55;
  transition: stroke-width var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.ib-arc--soul { stroke: var(--pillar-soul); }
.ib-arc--mind { stroke: var(--pillar-mind); }
.ib-arc--body { stroke: var(--pillar-body); }

.ib-cycle a:hover .ib-arc,
.ib-cycle a:focus-visible .ib-arc { stroke-width: 14; opacity: 1; }

/* node circles at the arc gaps */
.ib-node circle {
  fill: var(--surface);
  stroke-width: 1.5;
  transition: transform var(--dur) var(--ease-spring);
  transform-origin: center;
  transform-box: fill-box;
}
.ib-node--soul circle { stroke: var(--pillar-soul); }
.ib-node--mind circle { stroke: var(--pillar-mind); }
.ib-node--body circle { stroke: var(--pillar-body); }
.ib-cycle a:hover .ib-node circle { transform: scale(1.12); }

.ib-node text {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--text-primary);
}
.ib-node .ib-node-icon { fill: none; stroke-width: 1.6; }
.ib-node--soul .ib-node-icon { stroke: var(--pillar-soul); }
.ib-node--mind .ib-node-icon { stroke: var(--pillar-mind); }
.ib-node--body .ib-node-icon { stroke: var(--pillar-body); }

/* rotating word-ring: ΨΥΧΗ • ΝΟΥΣ • ΣΩΜΑ • */
.ib-cycle-rotor {
  animation: ibSpin 70s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.ib-cycle:hover .ib-cycle-rotor { animation-play-state: paused; }
.ib-ringtext {
  font-family: var(--font-base);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  fill: var(--text-muted);
  text-transform: uppercase;
}

@keyframes ibSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* breathing centre — calm 8s tempo */
.ib-cycle-center {
  animation: ibBreath var(--breath) ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.ib-cycle-center circle {
  fill: rgba(168,178,126,0.22);
}
.ib-cycle-center .ib-center-core { fill: rgba(168,178,126,0.35); }
.ib-cycle-center text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 19px;
  fill: var(--accent-ink, #49572A);
}

@keyframes ibBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.055); }
}

/* tiny flow arrows on the ring */
.ib-arrow { fill: var(--text-faint); opacity: 0.7; }

/* ── Services — three pillar portals (arched), staggered wave ── */
.lt-services {
  padding: var(--section-gap) 0 calc(var(--section-gap) - 2rem);
  position: relative;
}

.lt-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  max-width: 1060px;
  margin: 3.25rem auto 0;
  align-items: start;
}

/* gentle arch "wave": stagger the portal cards vertically */
.lt-services-grid > .lt-service-card:nth-child(1) { margin-top: 2.4rem; }
.lt-services-grid > .lt-service-card:nth-child(2) { margin-top: 0; }
.lt-services-grid > .lt-service-card:nth-child(3) { margin-top: 3.2rem; }

@media (max-width: 980px) {
  .lt-services-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  .lt-services-grid > .lt-service-card { margin-top: 0; }
  .lt-services-grid > .lt-service-card:nth-child(2) { margin-top: 2.2rem; }
}
@media (max-width: 560px) {
  .lt-services-grid { grid-template-columns: 1fr; max-width: 380px; }
  .lt-services-grid > .lt-service-card { margin-top: 0 !important; }
}

.lt-service-card {
  --pillar: var(--accent-alt);
  --pillar-soft: rgba(92,110,51,0.10);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px 999px 22px 22px;   /* arched portal top */
  padding: 3.1rem 1.8rem 2.3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  box-shadow: var(--shadow-soft);
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease, box-shadow .45s ease;
}

.lt-service-card--soul { --pillar: var(--pillar-soul); --pillar-soft: rgba(161,98,7,0.10); }
.lt-service-card--mind { --pillar: var(--pillar-mind); --pillar-soft: rgba(63,113,89,0.10); }
.lt-service-card--body { --pillar: var(--pillar-body); --pillar-soft: rgba(92,110,51,0.12); }

.lt-service-card:hover {
  border-color: var(--pillar);
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}

/* soft pillar-tinted halo blooming at the crown of the arch on hover */
.lt-service-card::before {
  content: "";
  position: absolute;
  top: -36%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, var(--pillar-soft) 0%, transparent 58%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0;
}
.lt-service-card:hover::before { opacity: 1; }

.lt-service-tag {
  display: inline-block;
  font-family: var(--font-base);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pillar);
  position: relative;
  z-index: 2;
}

.lt-service-card h3 {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0.55rem 0 0.9rem;
  line-height: 1.12;
  position: relative;
  z-index: 2;
}

.lt-service-card p {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 26ch;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* the three reflective questions inside each pillar portal */
.ib-qs {
  list-style: none;
  margin: 1.1rem auto 0;
  padding: 0;
  max-width: 27ch;
  text-align: left;
  display: grid;
  gap: 0.55rem;
  position: relative;
  z-index: 2;
}
.ib-qs li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.ib-qs li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50% 50% 50% 0;      /* tiny leaf */
  background: var(--pillar, var(--accent-alt));
  opacity: 0.7;
  transform: rotate(-45deg);
}

/* questions rendered inside a page masthead (pillar pages) */
.ib-qs--header {
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem 2.25rem;
  margin: 1.5rem 0 0.5rem;
  text-align: left;
}
@media (max-width: 880px) {
  .ib-qs--header { grid-template-columns: 1fr; }
}

.lt-more {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 1.7rem;
  color: var(--text-muted);
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
}
.lt-service-card:hover .lt-more { color: var(--text-primary); }

.lt-circle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--pillar, var(--accent));
  color: var(--pillar, var(--accent));
  font-size: 0.8rem;
}
.lt-service-card:hover .lt-circle-arrow {
  background: var(--pillar);
  color: #F4F1E8;
  transform: translate(2px, -2px);
}

/* ── Philosophy — the one deep-forest "exhale" band ── */
.ib-philosophy {
  position: relative;
  background: var(--forest);
  padding: clamp(4rem, 9vh, 6.5rem) 0;
  overflow: hidden;
}
/* faint concentric bloom rings in the band corner */
.ib-philosophy::before {
  content: "";
  position: absolute;
  top: -40%; right: -8%;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(241,239,227,0.08);
  box-shadow: 0 0 0 60px rgba(241,239,227,0.03), 0 0 0 130px rgba(241,239,227,0.02);
  pointer-events: none;
}
.ib-philosophy::after {
  content: "";
  position: absolute;
  bottom: -46%; left: -6%;
  width: 420px; height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(168,178,126,0.14);
  box-shadow: 0 0 0 50px rgba(168,178,126,0.05);
  pointer-events: none;
}

.ib-philosophy .eyebrow { color: var(--sage); }

.ib-philosophy-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.35;
  color: var(--text-on-dark);
  max-width: 820px;
  margin: 0;
}

.ib-philosophy-text {
  margin-top: 1.5rem;
  color: var(--text-on-dark-muted);
  font-size: 1.02rem;
  line-height: 1.85;
  max-width: 70ch;
}

.ib-philosophy .lt-hero-link { color: #FDE68A; margin-top: 1.75rem; display: inline-flex; }
.ib-philosophy .lt-hero-link::after { background: #FDE68A; }

/* ── About / Journal spreads ── */
.lt-about {
  padding: var(--section-gap) 0;
}

.lt-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

.lt-section-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-section-title);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1.1rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.lt-about-desc {
  color: var(--text-muted);
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.8;
  margin-bottom: 1.9rem;
  max-width: 520px;
}

/* credential chips — trust layer */
.ib-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.9rem;
  padding: 0;
  list-style: none;
}
.ib-chips li {
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent);
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: rgba(168,178,126,0.12);
  white-space: nowrap;
}

/* stat strip */
.lt-stats-row {
  display: flex;
  gap: 0;
  margin-top: 2.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}

.lt-stat {
  background: transparent;
  border-radius: 0;
  padding: 0 1.75rem;
  text-align: left;
  min-width: 110px;
  flex: 1;
  position: relative;
}
.lt-stat:first-child { padding-left: 0; }
.lt-stat + .lt-stat { border-left: 1px solid var(--line); }

.lt-stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--accent-alt);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.lt-stat span {
  display: block;
  font-family: var(--font-base);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* ── Botanical bloom panel (replaces photos; arch-framed, light) ── */
.lt-about-photo {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 999px 999px 26px 26px;
  overflow: hidden;
  min-height: 420px;
  background-color: var(--surface-alt);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23A8B27E'%3E%3Ccircle cx='200' cy='200' r='52' stroke-opacity='0.55' stroke-width='1.2'/%3E%3Ccircle cx='200' cy='200' r='90' stroke-opacity='0.4' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='128' stroke-opacity='0.28' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='166' stroke-opacity='0.18' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='198' stroke-opacity='0.1' stroke-width='1'/%3E%3C/g%3E%3Cg stroke='%235C6E33' stroke-width='1.3' fill='none' stroke-linecap='round'%3E%3Cpath d='M200 260 C200 220 200 190 200 150' stroke-opacity='0.7'/%3E%3Cpath d='M200 230 C185 215 172 208 158 204 C166 220 180 230 200 233' stroke-opacity='0.65'/%3E%3Cpath d='M200 230 C215 215 228 208 242 204 C234 220 220 230 200 233' stroke-opacity='0.65'/%3E%3Cpath d='M200 196 C188 184 178 178 166 175 C173 189 185 197 200 199' stroke-opacity='0.6'/%3E%3Cpath d='M200 196 C212 184 222 178 234 175 C227 189 215 197 200 199' stroke-opacity='0.6'/%3E%3C/g%3E%3Cg fill='%23CA8A04'%3E%3Ccircle cx='200' cy='142' r='7' fill-opacity='0.85'/%3E%3Ccircle cx='188' cy='132' r='4' fill-opacity='0.55'/%3E%3Ccircle cx='212' cy='132' r='4' fill-opacity='0.55'/%3E%3Ccircle cx='200' cy='122' r='4' fill-opacity='0.45'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(70% 60% at 50% 30%, rgba(168,178,126,0.25) 0%, rgba(168,178,126,0) 70%),
    radial-gradient(60% 50% at 50% 85%, rgba(161,98,7,0.10) 0%, rgba(161,98,7,0) 65%);
  background-repeat: no-repeat;
  background-position: center 58%, center, center;
  background-size: 82% auto, cover, cover;
}

/* hide any leftover <img> inside the panel; opt back in with .has-photo */
.lt-about-photo img { display: none !important; }
.lt-about-photo.has-photo img {
  display: block !important;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lt-about-photo.has-photo { background-image: none; }
.lt-about-photo::after { display: none; }

/* ── Divider band (inner pages) — quiet forest breath ── */
.lt-divider {
  position: relative;
  min-height: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: clamp(3.5rem, 8vh, 5.5rem) 1.5rem;
  border-radius: 26px;
  background-color: var(--forest);
  background-image:
    radial-gradient(60% 90% at 18% 20%, rgba(168,178,126,0.16) 0%, rgba(168,178,126,0) 60%),
    radial-gradient(55% 80% at 85% 80%, rgba(161,98,7,0.10) 0%, rgba(161,98,7,0) 62%);
  background-repeat: no-repeat;
  background-size: cover;
}
.lt-divider .lt-divider-bg,
.lt-divider > img { display: none !important; }
.lt-divider::before { display: none; }

.lt-divider-quote {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  color: var(--text-on-dark);
  text-align: center;
  max-width: 900px;
  padding: 0 2rem;
}

/* ── CTA — warm sand band with breathing button ── */
.lt-cta {
  padding: var(--section-gap) 0;
  position: relative;
  background: var(--bg-alt);
}

.lt-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

.lt-cta-desc {
  color: var(--text-muted);
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.8;
  margin-bottom: 1.75rem;
  max-width: 460px;
}

/* the CTA button breathes gently */
.lt-cta .btn-primary {
  animation: ibBreath var(--breath) ease-in-out infinite;
}
.lt-cta .btn-primary:hover { animation-play-state: paused; }

.lt-trusted {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.lt-trusted > span {
  font-family: var(--font-base);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lt-trusted strong {
  color: var(--accent);
  font-weight: 700;
}

/* CTA decoration — three pillar rings */
.lt-cta-deco {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lt-team-photos {
  position: relative;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  height: auto;
  width: 100%;
  background: none;
}

.lt-team-photo {
  position: relative;
  top: auto !important;
  left: auto !important;
  width: clamp(96px, 12vw, 150px) !important;
  height: clamp(96px, 12vw, 150px) !important;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: var(--surface);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lt-team-photo--1 { border-color: rgba(161,98,7,0.5); }
.lt-team-photo--2 { border-color: rgba(63,113,89,0.5); transform: translateY(-14px); }
.lt-team-photo--3 { border-color: rgba(92,110,51,0.5); }

.lt-team-photo img {
  width: 66%; height: 66%;
  object-fit: contain;
}

/* pillar glyphs drawn in CSS when no image is used */
.lt-team-photo .ib-glyph {
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lt-team-photo--1 .ib-glyph { color: var(--pillar-soul); }
.lt-team-photo--2 .ib-glyph { color: var(--pillar-mind); }
.lt-team-photo--3 .ib-glyph { color: var(--pillar-body); }

/* ── Footer on deep forest — light text overrides ── */
footer { border-top: none; }
footer .logo-badge { color: var(--text-on-dark); }
footer .logo-text  { color: var(--sage); }
footer .footer-desc,
footer .footer-address { color: var(--text-on-dark-muted); }
footer .footer-column h4 { color: var(--sage); }
footer .footer-column a { color: var(--text-on-dark-muted); }
footer .footer-column a:hover { color: var(--text-on-dark); }
footer .footer-inner { border-bottom: 1px solid var(--footer-border); }
footer .footer-copy,
footer .footer-copy a { color: var(--text-on-dark-muted); }
footer .footer-copy a:hover { color: var(--text-on-dark); }
footer .footer-brand .logo-badge { color: var(--text-on-dark); -webkit-text-fill-color: var(--text-on-dark); }
footer .footer-brand .logo-text { color: var(--sage); -webkit-text-fill-color: var(--sage); }

/* ── Responsive ── */
@media (max-width: 980px) {
  .ib-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ib-hero-copy { max-width: 100%; text-align: center; margin: 0 auto; }
  .ib-hero-sub { margin-left: auto; margin-right: auto; }
  .ib-hero-actions { justify-content: center; }
  .ib-hero-meta { justify-content: center; }
  .ib-hero-meta .lt-hero-pill { margin-left: 0; }
  .ib-cycle { width: min(86vw, 400px); }
}

@media (max-width: 879px) {
  .lt-about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .lt-about-photo { min-height: 320px; }
  .lt-cta-grid { grid-template-columns: 1fr; }
  .lt-cta-deco { min-height: 0; margin-top: 1rem; }
}

@media (max-width: 599px) {
  .ib-hero-actions { flex-direction: column; gap: 0.85rem; align-items: stretch; }
  .lt-service-card { min-height: 0; padding: 2.4rem 1.5rem 2rem; }
  .lt-stats-row { flex-direction: column; border-top: 1px solid var(--line); gap: 1.5rem; }
  .lt-stat { min-width: 0; padding: 0; }
  .lt-stat + .lt-stat { border-left: none; padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .lt-team-photos { gap: 0.6rem; }
  .lt-divider { border-radius: 18px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-left,
  .reveal-right { transform: none !important; transition: opacity .5s ease; }
  .marquee-track { animation: none; }
  .team-photo-card.reveal-on-scroll.is-visible { animation: none; opacity: 1; transform: none; }
  .ib-cycle-rotor,
  .ib-cycle-center,
  .lt-cta .btn-primary { animation: none !important; }
}

/* =========================================================
   MODERN UPGRADE — micro-interactions, depth & polish
   (applies the design-skill rules: 150–300ms motion, visible
   focus, hover lift, custom controls, staggered reveals)
   ========================================================= */

/* ── Custom checkbox & radio — gold, on-brand (replaces raw browser UI) ── */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  border: 1px solid var(--accent-line);
  background: var(--bg-alt);
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  vertical-align: -3px;
}
input[type="checkbox"] { border-radius: var(--r-xs); }
input[type="radio"]    { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked,
input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { box-shadow: var(--focus-ring); }

/* ── Filter / search inputs — softer fill, clearer focus ── */
.filter-input,
.filter-select {
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.filter-input:hover,
.filter-select:hover { border-color: var(--accent-line); }

/* ── Sort & PDF buttons — press feedback ── */
.sort-btn:active,
.pdf-open-btn:active { transform: scale(.97); }
.sort-btn { transition: color var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out),
                        transform var(--dur-fast) var(--ease-out); }

/* ── Search-filter bar — lift on hover ── */
.search-filter-bar { border-radius: var(--r-md); transition: box-shadow var(--dur) var(--ease-out); }

/* ── Book / team / generic cards — modern radius + lift ── */
.book-card-inner,
.team-photo-card,
.card,
.register-info-card,
.register-form-card,
.contact-card,
.about-block,
.biblio-card,
.pdf-card,
.video-card { border-radius: var(--r-md); }

.lp-card:hover .book-card-inner { box-shadow: var(--shadow-lift); }
.lp-card { transition: transform var(--dur) var(--ease-out); }
.lp-card:hover { transform: translateY(-4px); }

.team-photo-card {
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.team-photo-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }

/* ── Biblio rows — clearer affordance ── */
.biblio-link { transition: background var(--dur-fast) var(--ease-out), padding-left var(--dur) var(--ease-out); }
.biblio-link:hover { padding-left: 1.6rem; }

/* ── Eyebrow — subtle leading tick for editorial signal ── */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 1px;
  margin-right: .7em;
  vertical-align: middle;
  background: var(--accent);
  opacity: .8;
}
/* hero/section eyebrows that sit centered on mobile keep the tick balanced */

/* ── Staggered grid reveal (JS adds .stagger-in to a container) ── */
.stagger-in > * {
  opacity: 0;
  transform: translateY(18px);
}
.stagger-in.is-visible > * {
  animation: staggerUp .6s var(--ease-out) forwards;
}
.stagger-in.is-visible > *:nth-child(1) { animation-delay: .04s; }
.stagger-in.is-visible > *:nth-child(2) { animation-delay: .10s; }
.stagger-in.is-visible > *:nth-child(3) { animation-delay: .16s; }
.stagger-in.is-visible > *:nth-child(4) { animation-delay: .22s; }
.stagger-in.is-visible > *:nth-child(5) { animation-delay: .28s; }
.stagger-in.is-visible > *:nth-child(6) { animation-delay: .34s; }
.stagger-in.is-visible > *:nth-child(n+7) { animation-delay: .40s; }

@keyframes staggerUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Count-up stats — gentle pop when they enter ── */
.lt-stat strong { transition: color var(--dur) var(--ease-out); }
.lt-stat.is-counting strong { color: var(--accent); }

/* ── Marquee — pause on hover (lets the eye read) ── */
.marquee-bar:hover .marquee-track { animation-play-state: paused; }

/* ── Service portal cards — gold number watermark + smoother arrow ── */
.lt-service-card::first-letter { color: inherit; }
.lt-circle-arrow { transition: background-color var(--dur) var(--ease-out),
                               color var(--dur) var(--ease-out),
                               transform var(--dur) var(--ease-spring); }

/* ── Header — hairline grows to gold seam once scrolled ── */
body > header { transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
body > header.is-scrolled { border-bottom-color: var(--accent-line); }

/* ── Language / ghost toggle — press feedback ── */
[data-language-toggle] { transition: color var(--dur-fast) var(--ease-out),
                                     border-color var(--dur-fast) var(--ease-out),
                                     transform var(--dur-fast) var(--ease-out); }
[data-language-toggle]:active { transform: scale(.97); }

/* ── Header action pair — pill-shaped CTA + language toggle (not boxy) ── */
.nav-cta { gap: 0.6rem; align-items: center; }
.nav-cta .btn,
.mobile-menu-actions .btn {
  border-radius: var(--r-pill);
  padding-block: 0.62rem;
}
/* the language toggle reads as a quieter companion pill next to the CTA */
.nav-cta [data-language-toggle],
.mobile-menu-actions [data-language-toggle] {
  letter-spacing: 0.14em;
  padding-inline: 1.25rem;
}

/* ── Respect reduced motion for every new effect ── */
@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
  .btn:hover, .btn-primary:hover, .btn-ghost:hover,
  .track-card:hover, .course-card:hover, .resource-card:hover,
  .team-photo-card:hover, .lp-card:hover { transform: none; }
  .stagger-in > * { opacity: 1; transform: none; animation: none; }
  .nav-dropdown-menu { transition: opacity var(--dur) var(--ease-out); transform: translateX(-30%); }
  .scroll-progress { transition: none; }
}


/* =========================================================
   MODERN POLISH II — architecture & UI/UX refinements
   Editorial mastheads · per-pillar accents · sticky filters ·
   arch cards everywhere · reading typography · footer arch
   ========================================================= */

/* ── Per-page pillar accent (ink = AA text tone, accent = graphic tone) ── */
body { --page-accent: var(--accent); --page-ink: var(--accent); }
body[data-page="soul"]  { --page-accent: var(--pillar-soul);  --page-ink: #A16207; }
body[data-page="mind"]  { --page-accent: var(--pillar-mind);  --page-ink: #065F46; }
body[data-page="body"]  { --page-accent: var(--pillar-body);  --page-ink: #5C6E33; }
body[data-page="books"],
body[data-page="books-details"],
body[data-page="decisions"],
body[data-page="decisions-details"],
body[data-page="publications"],
body[data-page="publications-details"] { --page-accent: var(--pillar-soul); --page-ink: #A16207; }

/* ── Editorial masthead — bigger voice, quiet bloom ring backdrop ── */
.courses-page-header {
  position: relative;
  margin-top: 2.75rem;
  padding-bottom: 2rem;
  overflow: visible;
}
.courses-page-header .section-title {
  font-size: clamp(2.4rem, 4.6vw, 3.5rem);
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.courses-page-header .section-subtitle {
  max-width: 62ch;
  font-size: 1.05rem;
}
.courses-page-header .eyebrow { color: var(--page-ink); }
.courses-page-header::after {
  content: "";
  position: absolute;
  top: -3.5rem; right: -2rem;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 46px rgba(168,178,126,0.10), 0 0 0 100px rgba(168,178,126,0.05);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 900px) { .courses-page-header::after { right: 0; width: 240px; height: 240px; } }
@media (max-width: 700px) { .courses-page-header::after { display: none; } }

.accent-rule { background: var(--page-accent); height: 2px; }
.ib-qs--header li::before { background: var(--page-accent); }

/* ── Sticky glass filter bar (desktop) + pill inputs ── */
.search-filter-bar {
  border-radius: 999px;
  padding: 0.7rem 0.85rem;
  background: rgba(252,251,245,0.85);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}
@media (min-width: 880px) {
  .search-filter-bar {
    position: sticky;
    top: calc(var(--nav-height) + 10px);
    z-index: 40;
  }
}
.filter-input {
  border-radius: 999px;
  padding: 0.62rem 1.15rem;
  background: var(--bg);
}
.filter-select {
  border-radius: 999px;
  padding: 0.62rem 1.05rem;
  background: var(--bg);
}
.sort-btn { border-radius: 999px; }
.sort-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.sort-btn.active::after { display: none; }
@media (max-width: 600px) {
  .search-filter-bar { border-radius: 22px; }
}

/* ── News / teachings rows — soft hover surface, arch thumb ── */
.news-item {
  border-radius: 22px;
  padding-inline: 1.1rem;
  margin-inline: -1.1rem;
  transition: background var(--dur) var(--ease-out);
}
.news-item:hover { background: rgba(252,251,245,0.85); }
.news-thumb img { border-radius: 999px 999px 16px 16px; }

/* ── Readings / library card grids — portal windows ── */
.book-card-inner { border-radius: 999px 999px 18px 18px; }
.lp-card:hover .book-card-inner { border-color: var(--page-accent); }

/* ── Offer / milestone cards — leaf marker + pillar hover ── */
.track-card { border-radius: 22px; }
.track-card:hover { border-color: var(--page-accent); }
.track-title { position: relative; padding-top: 1.1rem; }
.track-title::before {
  content: "";
  position: absolute;
  top: 0; left: 1px;
  width: 12px; height: 12px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--page-accent);
  opacity: 0.85;
}

/* ── Detail pages — calm editorial reading, no boxed card ── */
body[data-page="news-details"] .course-card,
body[data-page="decisions-details"] .course-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.5rem 0 0;
  max-width: 760px;
  margin: 0 auto;
}
body[data-page="news-details"] .course-details-layout,
body[data-page="decisions-details"] .course-details-layout { display: block; }
body[data-page="news-details"] .course-card:hover,
body[data-page="decisions-details"] .course-card:hover { transform: none; box-shadow: none; }
.article-content > p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-size: 3.1em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.14em 0 0;
  color: var(--accent);
}
.article-content p { font-size: 1.09rem; }

/* ── Contact — rounder, calmer ── */
.contact-card { border-radius: 22px; }
.contact-card.contact-map { border-radius: 22px; }
.contact-card.contact-map iframe { height: 420px; }
.contact-details dd a:hover { color: var(--accent); }

/* ── Empty state — soft, on-brand ── */
.empty-state {
  border-radius: 22px;
  background: var(--surface-alt);
  border: 1.5px dashed var(--line-strong);
  padding: 3rem 1.5rem;
}

/* ── Header & footer architecture ── */
body > header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(51,61,33,0.18); }
footer {
  border-radius: 32px 32px 0 0;
  margin-top: var(--section-gap);
}
@media (max-width: 600px) { footer { border-radius: 20px 20px 0 0; } }

/* ── Rhythm & anchors ── */
main > .container > section { scroll-margin-top: calc(var(--nav-height) + 16px); }
.lp-grid-section { margin-top: 1.5rem; }

/* ── Reduced motion for polish layer ── */
@media (prefers-reduced-motion: reduce) {
  .news-item { transition: none; }
}


/* ── REVIEW FIXES — contrast inks, touch targets, rhythm, reduced motion ── */

/* Mind pillar: darker ink for small text (emerald #3F7159 fails 4.5:1 on white) */
.lt-service-card--mind .lt-service-tag { color: #2F5D48; }
.lt-team-photo--2 .ib-glyph { color: #2F5D48; }
.lt-service-card--mind:hover .lt-circle-arrow { background: #2F5D48; border-color: #2F5D48; }

/* Accent text on tinted fills — use the darker ink */
.lt-cta .eyebrow,
.lt-trusted strong { color: var(--accent-ink); }
.lt-hero-pill,
.ib-chips li { color: var(--accent-ink); }

/* Sort controls — proper touch targets in the sticky bar */
.sort-btn { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.72rem; }

/* Article measure — keep body copy at a readable ~66ch */
.article-content { max-width: 66ch; margin-inline: auto; }

/* Pillar pages: shared section margin owns the rhythm (no double spacing) */
main > .container > section.lt-about { padding-block: 0; }

/* Long Greek words in big headings must never force horizontal scroll */
.ib-hero-title, .section-title, .lt-section-heading, .lt-divider-quote { overflow-wrap: break-word; }
.ib-hero-title { hyphens: auto; }

/* Reduced-motion coverage for the polish layers */
@media (prefers-reduced-motion: reduce) {
  .lt-service-card:hover { transform: none; }
  .lt-service-card::before { transition: none; }
  .biblio-link { transition: background var(--dur-fast) var(--ease-out); }
  .biblio-link:hover { padding-left: 1.3rem; }
  .lt-circle-arrow { transition: none; }
}


/* ── ABOUT PAGE — modern editorial biography ── */
.ab-hero .ab-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ab-hero .lt-about-photo { min-height: 400px; }
.ab-hero .ib-chips { margin: 1.4rem 0 0; }
.ab-hero .ib-hero-actions { margin-top: 1.9rem; }
.ab-hero { padding-bottom: 0.5rem; border-bottom: none; }
@media (max-width: 880px) {
  .ab-hero .ab-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ab-hero .lt-about-photo { min-height: 300px; }
}

/* the story — calm reading column with a drop cap */
.ab-story { max-width: 68ch; margin-inline: auto; }
.ab-story p {
  color: var(--text-muted);
  font-size: 1.07rem;
  line-height: 1.88;
  margin-bottom: 1.35rem;
}
.ab-story > p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-size: 3.1em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.14em 0 0;
  color: var(--accent);
}
.ab-pull {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.45;
  color: var(--text-primary);
  border-left: 3px solid var(--sage);
  padding-left: 1.4rem;
  margin: 2.4rem 0;
}

/* the path — numbered vertical timeline, pillar-tinted steps */
.ab-timeline {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  position: relative;
}
.ab-timeline::before {
  content: "";
  position: absolute;
  left: 27px; top: 10px; bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--line-strong), var(--accent-line));
}
.ab-timeline li { position: relative; padding: 0 0 2.4rem 4.8rem; }
.ab-timeline li:last-child { padding-bottom: 0.25rem; }
.ab-tl-num {
  position: absolute;
  left: 0; top: -4px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}
.ab-timeline li:nth-child(2) .ab-tl-num { color: var(--pillar-body); border-color: rgba(92,110,51,0.35); }
.ab-timeline li:nth-child(3) .ab-tl-num { color: #2F5D48; border-color: rgba(63,113,89,0.35); }
.ab-timeline li:nth-child(4) .ab-tl-num { color: var(--pillar-soul); border-color: rgba(161,98,7,0.35); }
.ab-timeline h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0.15rem 0 0.4rem;
}
.ab-timeline p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
  max-width: 58ch;
  margin: 0;
}

/* philosophy — big quote + two calm text columns on wide screens */
.ab-phil-cols { margin-top: 1.6rem; }
@media (min-width: 980px) {
  .ab-phil-cols { column-count: 2; column-gap: 3.5rem; }
  .ab-phil-cols p { break-inside: avoid; max-width: none; }
}


/* =========================================================
   INNOVATION LAYER — scroll-settle, word reveals, sticky CTA,
   trust strip, steps, FAQ, 404
   ========================================================= */

/* ── Media panels "settle" as they enter (scroll-driven, compositor-only).
      Falls back to the existing IntersectionObserver reveal elsewhere. ── */
@supports (animation-timeline: view()) {
  .lt-about-photo, .lt-team-photo {
    opacity: 1 !important;
    transform: none;
    transition: none;
    animation: ibSettle both var(--ease-out);
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }
}
@keyframes ibSettle {
  from { opacity: .55; transform: scale(1.05) translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Word-by-word reveals (split by motion.js; aria-label holds full text) ── */
.wmask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word {
  display: inline-block;
  transform: translateY(112%);
  transition: transform .7s var(--ease-out) calc(var(--i, 0) * 45ms);
}
.split-run .word { transform: none; }
/* the philosophy quote lights up instead of rising */
.ib-philosophy-quote .wmask { overflow: visible; }
.ib-philosophy-quote .word {
  transform: none;
  opacity: .18;
  transition: opacity .6s ease calc(var(--i, 0) * 40ms);
}
.ib-philosophy-quote.is-lit .word { opacity: 1; }

/* ── Sticky mobile booking pill (injected by app.js) ── */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.9rem 1.9rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #F4F1E8;
  font-family: var(--font-base);
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--btn-primary-shadow);
  transform: translate(-50%, 140%);
  transition: transform var(--dur) var(--ease-out);
}
.sticky-cta.is-on:not(.is-off) { transform: translate(-50%, 0); }
@media (max-width: 720px) { .sticky-cta { display: inline-flex; } }

/* ── Trust strip (home hero) ── */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.85rem;
}
.trust-strip li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terra);
  flex: none;
}

/* ── CTA microcopy ── */
.cta-note {
  margin-top: 0.65rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* ── Steps — 3 numbered cards with dotted connectors ── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  list-style: none;
  margin: 1.75rem 0 2rem;
  padding: 0;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-xs);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: rgba(161,98,7,0.08);
  color: var(--terra);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}
.step h3 { font-family: var(--font-heading); font-size: 1.14rem; margin-bottom: 0.4rem; }
.step p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px; right: -1.4rem;
  width: 1.4rem;
  border-top: 2px dotted var(--line-strong);
}
@media (max-width: 880px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
}

/* ── FAQ — native details/summary, exclusive open via name="faq" ── */
.faq { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  color: var(--text-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron {
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.faq-item[open] .faq-chevron { transform: rotate(225deg); }
.faq-item > p {
  color: var(--text-muted);
  max-width: 62ch;
  padding: 0 0 1.25rem;
  margin: 0;
  animation: fadeUp .35s var(--ease-out);
}

/* ── Contact quick actions + promise ── */
.contact-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.contact-promise { font-size: var(--fs-sm); color: var(--text-muted); max-width: 52ch; margin-bottom: 1.5rem; }

/* ── 404 ── */
.nf { padding: clamp(3rem, 9vh, 6rem) 0; text-align: center; }
.nf-code {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(3.4rem, 9vw, 6rem);
  line-height: 1;
  color: var(--accent-alt);
  border: 2px solid var(--accent-line);
  border-radius: 999px 999px 22px 22px;
  padding: 1.4rem 2.6rem 1rem;
  margin-bottom: 1.5rem;
}
.nf-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1.75rem 0; }
.nf-links { color: var(--text-muted); font-size: var(--fs-sm); }
.nf-links a { color: var(--accent); font-weight: 600; }

/* ── Empty state internals (used by app.js emptyStateHTML) ── */
.empty-state { display: grid; justify-items: center; gap: 0.5rem; text-align: center; color: var(--text-muted); }
.empty-state svg { width: 44px; height: 44px; color: var(--sage); }
.empty-state p:first-of-type { font-family: var(--font-heading); font-size: 1.15rem; color: var(--text-primary); margin: 0; }
.empty-state .empty-sub { font-size: var(--fs-sm); margin: 0 0 0.5rem; }

/* ── Reduced motion for the innovation layer ── */
@media (prefers-reduced-motion: reduce) {
  .lt-about-photo, .lt-team-photo { animation: none !important; }
  .word, .faq-chevron, .sticky-cta { transition: none !important; }
  .word { transform: none; opacity: 1; }
  .faq-item > p { animation: none; }
}


/* =========================================================
   AWARD LAYER II — editorial numbering, living details
   ========================================================= */

/* ── Smart header: hides on scroll down, returns on scroll up ── */
body > header {
  transition: transform .35s var(--ease-out),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
body > header.is-hidden { transform: translateY(-101%); }
body > header:focus-within { transform: none !important; }

/* ── Cursor light swells over interactive elements ── */
.cursor-glow {
  scale: 1;
  transition: scale .3s var(--ease-out), opacity .45s var(--ease-out);
}
.cursor-glow.is-link { scale: 1.35; }

/* ── Editorial section numbering on the home page (pure CSS counters,
      survives EL/EN toggling untouched) ── */
body[data-page="home"] main { counter-reset: ibsec; }
body[data-page="home"] main section:not(.ib-hero) .eyebrow::after {
  counter-increment: ibsec;
  content: " · 0" counter(ibsec);
  color: var(--terra);
  letter-spacing: 0.12em;
}

/* ── The eyebrow tick draws in as its section reveals ── */
.eyebrow::before {
  transform-origin: left center;
  transition: transform .6s var(--ease-out) .12s;
}
.reveal-on-scroll:not(.is-visible) .eyebrow::before,
.reveal-left:not(.is-visible) .eyebrow::before,
.reveal-right:not(.is-visible) .eyebrow::before { transform: scaleX(0); }

/* ── Hero blobs drift apart slightly as you scroll (compositor-only) ── */
@supports (animation-timeline: scroll()) {
  .ib-hero::before {
    animation: ibDriftDown linear both;
    animation-timeline: scroll();
    animation-range: 0 120vh;
  }
  .ib-hero::after {
    animation: ibDriftUp linear both;
    animation-timeline: scroll();
    animation-range: 0 120vh;
  }
}
@keyframes ibDriftDown { to { transform: translateY(70px); } }
@keyframes ibDriftUp   { to { transform: translateY(-50px); } }

/* ── Reduced motion for the award layer ── */
@media (prefers-reduced-motion: reduce) {
  body > header { transition: none; }
  body > header.is-hidden { transform: none; }
  .cursor-glow { transition: none; }
  .eyebrow::before { transition: none; transform: none !important; }
  .ib-hero::before, .ib-hero::after { animation: none !important; }
}


/* =========================================================
   NATURE LAYER — pillar pages, artwork panels, the sparrow
   ========================================================= */

/* ── Checklists (the ✔ lists from the owner's texts) ── */
.check-list {
  list-style: none;
  margin: 1.25rem 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  max-width: 68ch;
}
.check-list li {
  position: relative;
  padding-left: 2.1rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Logistics note (online · 60′) ── */
.pillar-note {
  display: block;
  margin: 1.6rem 0;
  padding: 0.95rem 1.25rem;
  border-left: 3px solid var(--terra);
  background: rgba(161,98,7,0.06);
  border-radius: 0 14px 14px 0;
  color: var(--text-muted);
  font-size: 0.96rem;
  max-width: 68ch;
}

/* ── Invitation paragraphs around the quote band ── */
.invite-text {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 68ch;
  margin: 1.1rem auto 0;
  text-align: center;
}
section > .lt-divider { margin: 1.25rem 0; }

/* ── Pillar artwork panels — the owner's line-art on its own cream ── */
.pillar-art { background-color: #F2EFE9; }
.pillar-art.has-photo img {
  object-fit: contain;
  padding: 4%;
  background: #F2EFE9;
}

.section--flush { padding-block: 0; }
.pillar-cta { text-align: center; }

/* ── Home CTA circles carry the three artworks ── */
.lt-team-photo > img.pillar-tile {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── The sparrow — occasionally glides across, like a garden visitor ── */
.ib-bird {
  position: fixed;
  left: 0;
  top: 20vh;
  z-index: 60;
  width: 54px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-10vw);
  will-change: transform, opacity;
}
.ib-bird.fly { animation: birdFly var(--bird-dur, 18s) linear forwards; }
@keyframes birdFly {
  0%   { opacity: 0; transform: translate(-8vw, 0) rotate(2deg); }
  6%   { opacity: 1; }
  25%  { transform: translate(24vw, -3.5vh) rotate(-3deg); }
  50%  { transform: translate(52vw, 1.5vh) rotate(2.5deg); }
  75%  { transform: translate(80vw, -2.5vh) rotate(-2deg); }
  94%  { opacity: 1; }
  100% { opacity: 0; transform: translate(112vw, -4vh) rotate(0deg); }
}
.ib-bird .wing {
  transform-origin: 30px 15px;
  animation: birdFlap 0.5s ease-in-out infinite alternate;
}
.ib-bird .wing--far { animation-delay: 0.25s; opacity: 0.65; }
@keyframes birdFlap {
  from { transform: rotate(16deg); }
  to   { transform: rotate(-24deg); }
}
@media (max-width: 880px) { .ib-bird { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ib-bird { display: none !important; } }


/* =========================================================
   SPARROW v2 — flock flight on a curved motion path
   Banking follows the curve (offset-rotate:auto); wings beat
   in a flap-flap-glide rhythm with a lagging feather tip.
   ========================================================= */
.ib-bird {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 56px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  offset-rotate: auto;
  offset-distance: 0%;
  will-change: transform, opacity;
}
.ib-bird-inner {
  display: block;
  transform: scale(var(--bird-scale, 1)) scaleY(var(--bird-flip, 1));
  transform-origin: center;
}
.ib-bird.fly {
  animation: birdTravel var(--bird-dur, 16s) linear forwards;
}
@keyframes birdTravel {
  0%   { offset-distance: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* fallback for browsers without motion paths: the old straight glide */
@supports not (offset-path: path("M0 0 L10 10")) {
  .ib-bird.fly { animation: birdFly var(--bird-dur, 16s) linear forwards; }
}

/* wing beat: three beats, a long glide, then beats again */
.ib-bird .wing {
  transform-origin: 29px 15px;
  animation: birdBeat var(--flap-dur, 2.4s) ease-in-out infinite;
}
.ib-bird .wing--far {
  transform-origin: 31px 14px;
  animation-delay: 0.12s;
  opacity: 0.6;
}
/* the outer feathers lag a touch behind the wing — organic whip */
.ib-bird .feathers {
  transform-origin: 44px 12px;
  animation: birdFeather var(--flap-dur, 2.4s) ease-in-out infinite;
}
@keyframes birdBeat {
  0%   { transform: rotate(16deg); }
  7%   { transform: rotate(-26deg); }
  14%  { transform: rotate(12deg); }
  21%  { transform: rotate(-24deg); }
  28%  { transform: rotate(8deg); }
  36%  { transform: rotate(-10deg); }
  54%  { transform: rotate(-4deg); }   /* glide */
  66%  { transform: rotate(-8deg); }
  74%  { transform: rotate(14deg); }
  82%  { transform: rotate(-24deg); }
  90%  { transform: rotate(10deg); }
  100% { transform: rotate(16deg); }
}
@keyframes birdFeather {
  0%   { transform: rotate(-6deg); }
  7%   { transform: rotate(10deg); }
  14%  { transform: rotate(-5deg); }
  21%  { transform: rotate(9deg); }
  28%  { transform: rotate(-3deg); }
  36%  { transform: rotate(4deg); }
  54%  { transform: rotate(2deg); }
  66%  { transform: rotate(3deg); }
  74%  { transform: rotate(-5deg); }
  82%  { transform: rotate(9deg); }
  90%  { transform: rotate(-4deg); }
  100% { transform: rotate(-6deg); }
}
@media (max-width: 880px) { .ib-bird { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ib-bird { display: none !important; } }

/* map replaced by outbound link (GDPR: no auto third-party load) */
.map-link-card { padding: 2rem; display: grid; gap: 0.9rem; justify-items: start; align-content: center; min-height: 300px; }