/* =====================================================================
   Ikigai — visual refresh layer
   Loaded LAST on every page, so it overrides the older stylesheets.
   To undo the whole redesign: remove the <link> to this file (and
   refresh.js) from the pages. Nothing else was changed in the originals.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --ik-green: #35502e;
  --ik-green-deep: #1d3120;
  --ik-green-soft: #e6ecd8;
  --ik-sage: #8fa68a;
  --ik-cream: #f9f2e3;      /* sandalwood */
  --ik-cream-2: #f1e6cc;
  --ik-gold: #c98a1c;       /* turmeric (decor, thin lines) */
  --ik-gold-soft: #f0d28c;
  --ik-saffron: #e6a02a;    /* the one bright accent: buttons, highlights */
  --ik-terra: #a8482a;      /* terracotta: italic accent words */
  --ik-ink: #2a2a1c;
  --ik-muted: #5b5a45;
  --ik-line: rgba(53, 80, 46, 0.15);

  --ik-radius: 20px;
  --ik-radius-sm: 12px;
  --ik-shadow-1: 0 2px 10px rgba(60, 45, 15, 0.07);
  --ik-shadow-2: 0 18px 46px rgba(60, 45, 15, 0.15);
  --ik-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  --header-height: 76px;
}

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--header-height) + 12px); }

body {
  background: var(--ik-cream);
  color: var(--ik-ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  line-height: 1.7;
}

h1, h2, h3 { letter-spacing: -0.01em; }

h1, h2,
.hero-text h1,
.quote-title,
.founder-text h2,
.testimonials h2,
.services h2,
.approach h2,
.mustang-section h2,
.our-story h2,
.focus-areas-section h2,
.pillars-section h2 {
  font-family: var(--ik-serif);
  font-weight: 600;
  color: var(--ik-green-deep);
}

p { color: var(--ik-muted); }

a:hover, a:focus { outline: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--ik-gold);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection { background: var(--ik-gold-soft); color: var(--ik-green-deep); }

/* Section backgrounds: replace flat mint with warm cream */
.section.active,
.approach,
.testimonials,
.our-story,
.founder-section,
.mustang-section,
.pillars-section,
.focus-areas-section,
.porsche-footer { background: transparent; }

/* ---------- Navigation ---------- */
.navbar {
  background: rgba(250, 247, 239, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ik-line);
  transition: box-shadow .3s ease, background .3s ease;
}
.navbar.is-scrolled { box-shadow: 0 6px 24px rgba(38, 58, 33, 0.09); background: rgba(250, 247, 239, 0.94); }

.nav-brand h2 {
  font-family: var(--ik-serif);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--ik-green-deep);
}

.nav-menu { gap: 0.4rem; }
.nav-menu > a:not(.interest-btn) {
  position: relative;
  color: var(--ik-ink);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  transition: color .25s ease, background .25s ease;
}
.nav-menu > a:not(.interest-btn):hover { background: var(--ik-green-soft); color: var(--ik-green-deep); }
.nav-menu > a.active:not(.interest-btn) { background: var(--ik-green-soft); color: var(--ik-green-deep); font-weight: 600; }

.interest-btn {
  margin-left: 0.6rem;
  background: var(--ik-green);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(58, 81, 50, 0.28);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.interest-btn:hover {
  background: var(--ik-green-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(58, 81, 50, 0.34);
}

@media (max-width: 768px) {
  .nav-menu { background: var(--ik-cream); }
  .nav-menu > a:not(.interest-btn) { font-size: 1.05rem; padding: 0.8rem 1rem; }
  .interest-btn { margin: 0.5rem 0 0; text-align: center; }
  .nav-brand h2 { font-size: 0.85rem; }
}

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; letter-spacing: 0.02em; }
.btn--primary,
.ferrari-btn {
  background: var(--ik-green);
  border-color: var(--ik-green);
  color: #fff;
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(58, 81, 50, 0.25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn--primary:hover,
.ferrari-btn:hover {
  background: var(--ik-green-deep);
  border-color: var(--ik-green-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(58, 81, 50, 0.32);
}

/* Second hero button (the brochure) becomes an outline button */
.hero-buttons a:nth-child(2) .btn--primary {
  background: transparent;
  color: var(--ik-green);
  border: 2px solid var(--ik-green);
  box-shadow: none;
}
.hero-buttons a:nth-child(2) .btn--primary:hover {
  background: var(--ik-green);
  color: #fff;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(185, 143, 74, 0.16), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(143, 166, 138, 0.22), transparent 60%),
    var(--ik-cream);
}

.hero-text h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  margin-bottom: 1.2rem;
}
.hero-text p {
  font-size: 1.1rem;
  max-width: 34rem;
  margin-bottom: 2rem;
  color: var(--ik-muted);
}
.hero-text::before {
  content: 'Ayurveda  ·  Integrative Medicine  ·  Metabolic Health';
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--ik-green-soft);
  color: var(--ik-green);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-buttons { gap: 0.9rem; }
.hero-buttons a { text-decoration: none; }

.hero-image { position: relative; }
.hero-image::before {
  content: '';
  position: absolute;
  inset: 22px -18px -18px 22px;
  border: 2px solid var(--ik-gold-soft);
  border-radius: 28px;
  z-index: 0;
}
.hero-image img {
  position: relative;
  z-index: 1;
  height: clamp(300px, 38vw, 460px);
  border-radius: 28px;
  box-shadow: var(--ik-shadow-2);
}

@media (max-width: 768px) {
  .hero-text::before { font-size: 0.64rem; }
  .hero-text p { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .hero-image::before { inset: 14px -8px -10px 14px; }
}

/* ---------- Section headings: gold accent bar ---------- */
.services h2,
.testimonials h2,
.focus-areas-section h2,
.pillars-section h2,
.approach h2,
.mustang-section h2,
.our-story h2 {
  text-decoration: none;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin-bottom: 2.4rem;
  position: relative;
  text-align: center;
}
.services h2::after,
.testimonials h2::after,
.focus-areas-section h2::after,
.pillars-section h2::after,
.approach h2::after,
.mustang-section h2::after,
.our-story h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 0.9rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ik-gold), var(--ik-gold-soft));
}
.testimonials h2 { margin-bottom: 1.2rem; }

.subtitle { color: var(--ik-muted); font-size: 1.02rem; }

/* ---------- Featured in Times of India ---------- */
.quote-wrapper {
  padding: clamp(2.5rem, 5vw, 4.5rem) 1.25rem;
  background: var(--ik-green-deep);
  background-image:
    radial-gradient(600px 300px at 10% 0%, rgba(185, 143, 74, 0.22), transparent 60%),
    radial-gradient(600px 300px at 100% 100%, rgba(143, 166, 138, 0.2), transparent 60%);
  gap: 2rem;
}
.quote-title {
  color: #fff !important;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  max-width: 46rem;
  margin: 0;
}
.quote-container { gap: 1.5rem; align-items: stretch; text-decoration: none; }
.quote-preview { flex: 0 0 min(400px, 42%); }
.quote-preview img {
  border-radius: var(--ik-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  transition: transform .4s ease;
}
.quote-container:hover .quote-preview img { transform: scale(1.02) rotate(-0.6deg); }
.quote-card {
  border-radius: var(--ik-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  text-align: left;
  position: relative;
}
.quote-card::before {
  content: '\201C';
  position: absolute;
  top: 6px; right: 22px;
  font-family: var(--ik-serif);
  font-size: 7rem;
  line-height: 1;
  color: var(--ik-gold-soft);
}
.quote-text { color: var(--ik-ink); font-size: 1.15rem; }
@media (max-width: 768px) {
  .quote-preview { flex: 0 0 auto; }
  .quote-card { margin: 0; }
}

/* ---------- Offering cards ---------- */
.services { padding: clamp(3rem, 6vw, 5.5rem) 5%; }
.services .card {
  max-width: none;
  background: #fff;
  border: 1px solid var(--ik-line);
  border-radius: var(--ik-radius);
  padding: 2rem 1.6rem;
  box-shadow: var(--ik-shadow-1);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position: relative;
  overflow: hidden;
}
.services .card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--ik-green), var(--ik-gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.services .card:hover { transform: translateY(-8px); box-shadow: var(--ik-shadow-2); border-color: var(--ik-gold-soft); }
.services .card:hover::before { transform: scaleX(1); }
.services .card h3 { font-family: var(--ik-serif); font-size: 1.45rem; color: var(--ik-green-deep); }
.services .card p { font-size: 0.95rem; }
.services .card img { width: 150px; }

/* ---------- Focus areas / pillars / features ---------- */
.focus-areas-section,
.pillars-section { padding: clamp(2.5rem, 5vw, 4.5rem) 1.25rem; }

.focus-area-card,
.pillar-card,
.feature,
.charger-card {
  background: #fff;
  border: 1px solid var(--ik-line);
  border-radius: var(--ik-radius);
  box-shadow: var(--ik-shadow-1);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.focus-area-card { padding: 1.6rem; }
.focus-area-card:hover,
.pillar-card:hover,
.feature:hover,
.charger-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ik-shadow-2);
  border-color: var(--ik-gold-soft);
}
.focus-area-card img { border-radius: var(--ik-radius-sm); width: 100%; height: 190px; object-fit: cover; background: var(--ik-green-soft); }
.focus-area-card h3,
.pillar-card h3,
.feature h3,
.charger-card h3 { font-family: var(--ik-serif); color: var(--ik-green-deep); font-weight: 600; }
.focus-area-card p,
.pillar-card p { color: var(--ik-muted); }

/* ---------- Testimonials ---------- */
.testimonials { padding: clamp(3rem, 6vw, 5.5rem) 6%; background: var(--ik-cream-2); }
.testimonial-grid { gap: 1.6rem; align-items: stretch; }
.testimonial-card {
  border: 1px solid var(--ik-line);
  border-left: 1px solid var(--ik-line);
  border-radius: var(--ik-radius);
  padding: 2rem 1.6rem;
  box-shadow: var(--ik-shadow-1);
  position: relative;
  text-align: left;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute; top: 10px; right: 20px;
  font-family: var(--ik-serif);
  font-size: 4.5rem; line-height: 1;
  color: var(--ik-gold-soft);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--ik-shadow-2); }
.testimonial-card img {
  width: 84px; height: 84px; max-width: none;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 0 1rem;
  border: 3px solid var(--ik-gold-soft);
}
.testimonial-card h3 { font-family: var(--ik-serif); margin: 0.2rem 0; color: var(--ik-green-deep); }
.testimonial-card span { color: var(--ik-gold); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; }
.testimonial-card p { color: var(--ik-muted); font-size: 0.95rem; line-height: 1.75; }

.carousel-dots button.active { background-color: var(--ik-green); }
.carousel-dot.active { background: var(--ik-green); }

/* ---------- Founder ---------- */
.founder-section { padding: clamp(3rem, 6vw, 5.5rem) 6%; }
.founder-content {
  background: #fff;
  border: 1px solid var(--ik-line);
  border-radius: 28px;
  padding: clamp(1.5rem, 4vw, 3rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--ik-shadow-2);
}
.founder-image img {
  max-width: 320px;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(38, 58, 33, 0.2);
}
.founder-text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); text-align: left; }
.founder-text .credentials {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--ik-green-soft);
  color: var(--ik-green);
  font-style: normal;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.founder-text p { color: var(--ik-muted); }
@media (max-width: 900px) { .founder-text h2 { text-align: center; } }

/* ---------- About page ---------- */
.our-story { max-width: 920px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem 1rem; }
.our-story h2 { text-align: left; }
.our-story h2::after { margin-left: 0; }
.our-story p { font-size: 1.05rem; line-height: 1.85; color: var(--ik-muted); }
.mustang-section { padding: clamp(2.5rem, 5vw, 4.5rem) 6%; background: var(--ik-cream-2); }
.camaro-grid { gap: 1.6rem; }
.charger-card { padding: 2rem; }
.charger-card:hover { transform: translateY(-6px); }
.supra-highlight { margin-top: 3rem; }
.supra-highlight p { font-family: var(--ik-serif); font-size: 1.5rem; color: var(--ik-green-deep); }
.supra-highlight strong { color: var(--ik-muted); font-weight: 500; max-width: 40rem; margin: 0.6rem auto 0; }
.ferrari-btn { margin-top: 1.6rem; }

/* ---------- Footer ---------- */
.porsche-footer {
  background: var(--ik-green-deep);
  color: rgba(255, 255, 255, 0.82);
  border-top: none;
  padding: 2.4rem 8%;
  margin-top: 2rem;
}
.porsche-footer .logo { font-family: var(--ik-serif); font-size: 1.2rem; letter-spacing: 0.08em; color: #fff; max-height: none; }
.porsche-footer p { color: rgba(255, 255, 255, 0.7); margin: 0; }
.porsche-footer a { color: #fff; }
.porsche-footer a:hover { color: var(--ik-gold-soft); }
.footer-right a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-left: 10px;
  border-radius: 50%;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transition: background .3s ease, transform .3s ease, color .3s ease;
}
.footer-right a:hover { background: var(--ik-gold); color: #fff; transform: translateY(-3px); }

/* ---------- Floating consultation button ---------- */
.floating-btn {
  background: linear-gradient(135deg, var(--ik-green), var(--ik-green-deep));
  box-shadow: 0 10px 26px rgba(38, 58, 33, 0.38);
  letter-spacing: 0.04em;
}

/* ---------- Scroll reveal (driven by refresh.js) ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Polish pass ---------- */
.testimonial-card img { object-position: center top; }
.focus-area-card p, .pillar-card p { margin-top: 0; }
.services .card img { background: transparent; }

/* Testimonial photos are before/after collages: show them whole, not as circles */
.testimonial-card img {
  width: 100%; max-width: 260px; height: auto;
  border-radius: 14px; border: 0;
  object-fit: contain;
  margin: 0 auto 1.2rem;
  box-shadow: var(--ik-shadow-1);
}

/* ---------- Program page: plan cards ---------- */
.apple-hero { margin-bottom: 2.5rem; }
.nokia-grid { gap: 1.6rem; align-items: stretch; }
@media (min-width: 1000px) { #samsung .nokia-grid { grid-template-columns: repeat(3, 1fr); } }

.xiaomi-card {
  border: 1px solid var(--ik-line);
  border-radius: var(--ik-radius);
  box-shadow: var(--ik-shadow-1);
  transition: transform .35s ease, box-shadow .35s ease;
}
.xiaomi-card:hover { transform: translateY(-6px); box-shadow: var(--ik-shadow-2); }

.oneplus-header { padding: 1.8rem 1.4rem 1.5rem; color: #fff !important; }
.oneplus-header h3 {
  font-family: var(--ik-serif);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: 0.4rem;
}
.vivo-phase {
  display: inline-block;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.oppo-platinum .oneplus-header { background: linear-gradient(135deg, #2f4429, #587a4d); }
.oppo-gold .oneplus-header     { background: linear-gradient(135deg, #a47a36, #d3b274); }
.oppo-lite .oneplus-header     { background: linear-gradient(135deg, #6f5470, #a07fa0); }

.motorola-content { padding: 1.6rem 1.5rem 1.8rem; }
.motorola-content strong { color: var(--ik-green-deep); }
.sony-ideal, .asus-meal, .lenovo-features { margin-top: 1rem; }
.lenovo-features li::marker { color: var(--ik-gold); }
.btn.infinix-platinum, .btn.infinix-gold, .btn.infinix-lite { border-radius: 999px; }

/* ---------- Blog listing ---------- */
.blog-header { padding-top: 1rem; }
.blog-header h1 {
  font-family: var(--ik-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ik-green-deep);
  padding-top: 2rem;
}
.blog-header h1::after {
  content: ''; display: block; width: 64px; height: 3px; margin: 0.9rem auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--ik-gold), var(--ik-gold-soft));
}
.blog-header p { color: var(--ik-muted); font-size: 1.02rem; }

.card-link { border-radius: var(--ik-radius); height: 100%; }
.card-link:hover { transform: none; }
.card-link .card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--ik-line);
  border-radius: var(--ik-radius);
  box-shadow: var(--ik-shadow-1);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card-link:hover .card { transform: translateY(-6px); box-shadow: var(--ik-shadow-2); border-color: var(--ik-gold-soft); }
.card-link .card img {
  width: 100%; height: 220px; object-fit: cover;
  transition: transform .6s ease;
}
.card-link:hover .card img { transform: scale(1.05); }
.card-link .card-content { padding: 1.4rem 1.5rem 1.7rem; text-align: left; }
.card-category {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--ik-green-soft);
  color: var(--ik-green);
  font-size: 0.7rem; letter-spacing: 0.08em;
}
.card-title {
  font-family: var(--ik-serif);
  font-size: 1.3rem; line-height: 1.35; font-weight: 600;
  color: var(--ik-green-deep);
}

/* ---------- Individual blog posts (blogdata/*.html) ---------- */
.big-card {
  background: #fff;
  border: 1px solid var(--ik-line);
  border-radius: 24px;
  box-shadow: var(--ik-shadow-2);
}
.big-card .category {
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--ik-green-soft);
  color: var(--ik-green);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}
.big-card h1 {
  font-family: var(--ik-serif);
  color: var(--ik-green-deep);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.2;
}
.big-card h1::after {
  content: ''; display: block; width: 56px; height: 3px; margin-top: 1rem;
  border-radius: 3px; background: linear-gradient(90deg, var(--ik-gold), var(--ik-gold-soft));
}
.big-card .date { color: var(--ik-muted); font-style: normal; margin-top: 1rem; letter-spacing: 0.03em; }
.big-card .article { color: var(--ik-ink); line-height: 1.85; }
.big-card .article p { color: var(--ik-ink); }
.big-card .article h2, .big-card .article h3 { margin-top: 2rem; }

/* Mobile carousels: keep each card exactly one screen wide */
@media (max-width: 768px) {
  .services .card { max-width: 100%; min-width: 100%; flex: 0 0 100%; }
}


/* =====================================================================
   v2 — Ayurvedic editorial look
   ===================================================================== */

/* Paper grain over everything (very subtle, never blocks clicks) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: url('refresh-assets/grain.svg');
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}
.navbar, main, footer, .floating-btn { position: relative; z-index: 1; }
.navbar { position: fixed; z-index: 1000; }
.floating-btn { position: fixed; z-index: 999; }

em { font-style: italic; }
h1 em, h2 em { font-family: var(--ik-serif); font-style: italic; font-weight: 500; color: var(--ik-terra); }

.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ik-terra);
}

/* ---------- Buttons: saffron primary, forest outline ---------- */
.btn--primary, .ferrari-btn {
  background: var(--ik-saffron);
  border-color: var(--ik-saffron);
  color: var(--ik-green-deep);
  box-shadow: 0 10px 24px rgba(201, 138, 28, .35);
}
.btn--primary:hover, .ferrari-btn:hover {
  background: #f0b043; border-color: #f0b043; color: var(--ik-green-deep);
  box-shadow: 0 14px 30px rgba(201, 138, 28, .45);
}
.hero-buttons a:nth-child(2) .btn--primary {
  background: transparent; color: var(--ik-green); border: 2px solid var(--ik-green); box-shadow: none;
}
.hero-buttons a:nth-child(2) .btn--primary:hover { background: var(--ik-green); color: #fff; border-color: var(--ik-green); }
.interest-btn { background: var(--ik-green); }

/* ---------- Hero ---------- */
.hero {
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(230, 160, 42, .26), transparent 62%),
    radial-gradient(700px 500px at -5% 105%, rgba(143, 166, 138, .30), transparent 60%),
    linear-gradient(180deg, var(--ik-cream) 0%, var(--ik-cream-2) 100%);
}
/* slowly turning mandala */
.hero::before {
  content: '';
  position: absolute;
  width: min(780px, 90vw); aspect-ratio: 1;
  right: -14%; top: 50%;
  margin-top: calc(min(780px, 90vw) / -2);
  background: url('refresh-assets/mandala.svg') center / contain no-repeat;
  opacity: .16;
  animation: ik-spin 140s linear infinite;
  pointer-events: none;
}
/* botanical sprig, left edge */
.hero::after {
  content: '';
  position: absolute;
  left: -30px; bottom: -40px;
  width: 190px; height: 380px;
  background: url('refresh-assets/sprig.svg') center / contain no-repeat;
  opacity: .5;
  transform: rotate(-12deg);
  pointer-events: none;
}
@keyframes ik-spin { to { transform: rotate(360deg); } }

.hero .container { position: relative; z-index: 2; }
.hero-content { grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 5rem); }

.hero-text h1 {
  font-family: var(--ik-serif);
  font-size: clamp(2.5rem, 5.6vw, 4.7rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ik-green-deep);
  margin-bottom: 1.4rem;
}
.hero-text p { font-size: 1.12rem; max-width: 33rem; color: var(--ik-muted); }

.hero-trust {
  list-style: none; margin: 2.4rem 0 0; padding: 1.4rem 0 0;
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem;
  border-top: 1px solid var(--ik-line);
}
.hero-trust li { display: flex; flex-direction: column; line-height: 1.25; }
.hero-trust strong { font-family: var(--ik-serif); font-size: 1.45rem; font-weight: 600; color: var(--ik-green-deep); }
.hero-trust span { font-size: .78rem; color: var(--ik-muted); letter-spacing: .02em; }

/* arch-framed photo */
.hero-image { position: relative; justify-self: center; width: 100%; max-width: 460px; }
.hero-image::before {
  content: ''; position: absolute; inset: 16px -16px -16px 16px;
  border: 2px solid var(--ik-gold);
  border-radius: 999px 999px 28px 28px;
  opacity: .55; z-index: 0;
}
.hero-image img {
  position: relative; z-index: 1;
  width: 100%; height: clamp(380px, 46vw, 580px);
  border-radius: 999px 999px 28px 28px;
  object-fit: cover; object-position: 60% 30%;
  box-shadow: 0 30px 60px rgba(60, 45, 15, .28);
}
.hero-image::after {
  content: 'Rooted in Ayurveda.\A Backed by modern science.';
  white-space: pre;
  position: absolute; z-index: 2;
  left: -34px; bottom: 36px;
  padding: .95rem 1.25rem;
  border-radius: 16px;
  background: rgba(255, 250, 238, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--ik-line);
  box-shadow: var(--ik-shadow-2);
  font-family: var(--ik-serif); font-size: 1rem; font-weight: 500; font-style: italic;
  line-height: 1.35; color: var(--ik-green-deep);
}

@media (max-width: 768px) {
  .hero { padding-top: 2rem; }
  .hero::before { right: -45%; opacity: .13; }
  .hero::after { display: none; }
  .hero-content { grid-template-columns: 1fr; }
  .hero-trust { justify-content: center; text-align: center; gap: 1rem 1.6rem; }
  .hero-trust li { align-items: center; }
  .hero-text::before { margin-left: auto; margin-right: auto; }
  .hero-image { max-width: 340px; }
  .hero-image::after { left: 50%; transform: translateX(-50%); bottom: 18px; white-space: pre; font-size: .86rem; text-align: center; width: max-content; max-width: 92%; }
  .hero-image img { height: 400px; }
}

/* ---------- Scrolling strip ---------- */
.marquee {
  overflow: hidden;
  background: var(--ik-green-deep);
  color: var(--ik-gold-soft);
  border-block: 3px solid var(--ik-saffron);
  padding: 1rem 0;
}
.marquee-track { display: flex; width: max-content; animation: ik-marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; flex-shrink: 0; }
.marquee-group span {
  font-family: var(--ik-serif); font-style: italic; font-size: 1.25rem; white-space: nowrap;
  padding: 0 1.6rem; position: relative;
}
.marquee-group span::after {
  content: '\2740'; /* flower */
  position: absolute; right: -.45rem; top: 50%; transform: translateY(-52%);
  font-style: normal; font-size: .9rem; color: var(--ik-saffron);
}
@keyframes ik-marquee { to { transform: translateX(-50%); } }

/* ---------- Featured in Times of India: rounded forest panel ---------- */
.quote-wrapper {
  margin: clamp(2rem, 5vw, 4rem) clamp(.75rem, 3vw, 2.5rem) 0;
  border-radius: clamp(28px, 4vw, 56px);
  background-color: var(--ik-green-deep);
  background-image:
    radial-gradient(520px 320px at 8% 0%, rgba(230, 160, 42, .26), transparent 62%),
    url('refresh-assets/mandala.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% + 140px) 50%;
  background-size: auto, 520px;
  box-shadow: var(--ik-shadow-2);
}
.quote-title em { color: var(--ik-gold-soft); }
.quote-card::before { color: var(--ik-gold-soft); }

/* ---------- Section headings: serif + saffron rule ---------- */
.services h2, .testimonials h2, .focus-areas-section h2, .pillars-section h2,
.approach h2, .mustang-section h2, .our-story h2, .dosha-section h2 {
  font-family: var(--ik-serif); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.8vw, 3rem);
}
.services h2::after, .testimonials h2::after, .focus-areas-section h2::after, .pillars-section h2::after,
.approach h2::after, .mustang-section h2::after, .our-story h2::after, .dosha-section h2::after,
.blog-header h1::after, .big-card h1::after {
  background: linear-gradient(90deg, var(--ik-saffron), var(--ik-terra));
  width: 72px;
}

/* ---------- Dosha section ---------- */
.dosha-section {
  position: relative; overflow: hidden;
  margin: clamp(2rem, 5vw, 4rem) clamp(.75rem, 3vw, 2.5rem);
  padding: clamp(3rem, 7vw, 6rem) 1.5rem;
  border-radius: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(600px 360px at 100% 0%, rgba(230, 160, 42, .28), transparent 60%),
    linear-gradient(160deg, #f6e7c6, #f0d9a8);
  text-align: center;
}
.dosha-section::before {
  content: ''; position: absolute; left: -160px; top: -160px; width: 520px; height: 520px;
  background: url('refresh-assets/mandala.svg') center / contain no-repeat;
  opacity: .13; animation: ik-spin 160s linear infinite reverse; pointer-events: none;
}
.dosha-inner { position: relative; max-width: 1040px; margin: 0 auto; }
.dosha-section h2 { margin-bottom: 1.1rem; }
.dosha-lead { max-width: 40rem; margin: 0 auto 2.6rem; font-size: 1.08rem; color: var(--ik-ink); }
.dosha-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: 2.8rem; }
.dosha-card {
  background: rgba(255, 252, 244, .86);
  border: 1px solid rgba(53, 80, 46, .14);
  border-radius: 140px 140px 22px 22px; /* arch */
  padding: 2.4rem 1.4rem 2rem;
  box-shadow: var(--ik-shadow-1);
  transition: transform .4s ease, box-shadow .4s ease, background .4s ease;
}
.dosha-card:hover { transform: translateY(-10px); box-shadow: var(--ik-shadow-2); background: #fffdf7; }
.dosha-card i {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto 1.1rem;
  border-radius: 50%; font-size: 1.5rem;
  color: #fff; background: linear-gradient(135deg, var(--ik-green), #587a4d);
}
.dosha-card:nth-child(2) i { background: linear-gradient(135deg, var(--ik-terra), #d27a3f); }
.dosha-card:nth-child(3) i { background: linear-gradient(135deg, #8a6a1f, var(--ik-gold)); }
.dosha-card h3 { font-family: var(--ik-serif); font-size: 1.7rem; font-weight: 500; margin: 0 0 .15rem; color: var(--ik-green-deep); }
.dosha-card span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ik-terra); margin-bottom: .8rem; }
.dosha-card p { margin: 0; font-size: .97rem; color: var(--ik-muted); }
@media (max-width: 768px) {
  .dosha-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* ---------- Cards pick up the new palette ---------- */
.services .card::before { background: linear-gradient(90deg, var(--ik-saffron), var(--ik-terra)); }
.focus-area-card:hover, .pillar-card:hover, .feature:hover, .charger-card:hover,
.services .card:hover, .card-link:hover .card { border-color: var(--ik-gold-soft); }
.testimonials { background: var(--ik-cream-2); }
.testimonial-card::before { color: var(--ik-gold-soft); }
.testimonial-card span { color: var(--ik-terra); }
.card-category, .founder-text .credentials, .big-card .category { background: var(--ik-green-soft); }
.lenovo-features li::marker { color: var(--ik-saffron); }

/* ---------- Founder: arch portrait ---------- */
.founder-image img {
  border-radius: 999px 999px 24px 24px;
  max-width: 340px; width: 100%;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
  box-shadow: 0 24px 50px rgba(60, 45, 15, .25);
}
.founder-content { border-radius: 36px; }

/* ---------- Footer ---------- */
.porsche-footer { background: var(--ik-green-deep); border-top: 4px solid var(--ik-saffron); }
.footer-right a:hover { background: var(--ik-saffron); color: var(--ik-green-deep); }
.porsche-footer a:hover { color: var(--ik-gold-soft); }

/* ---------- Plans (Program) ---------- */
.oppo-gold .oneplus-header { background: linear-gradient(135deg, #b9731a, #e6a02a); }
.oppo-lite .oneplus-header { background: linear-gradient(135deg, #8f3f25, #c26a3c); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .dosha-section::before, .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- v2 fixes ---------- */
#home.section { padding-top: 0; padding-bottom: 0; }
body::before { z-index: 5; opacity: .3; }
.floating-btn { background: linear-gradient(135deg, #f0b043, var(--ik-saffron)); color: var(--ik-green-deep); box-shadow: 0 12px 28px rgba(201, 138, 28, .45); }
.oppo-gold .oneplus-header { background: linear-gradient(135deg, #8f5509, #c07f16); } /* darker for readable white text */


/* =====================================================================
   v3 — Brand-faithful premium look (matches the Ikigai brochure:
   deep forest green, cream line-art logo, wide-tracked wordmark)
   ===================================================================== */
:root {
  --ik-green: #2f3f26;
  --ik-green-deep: #22301b;
  --ik-green-soft: #e7eadb;
  --ik-cream: #f7f4e8;
  --ik-cream-2: #efe9d4;
  --ik-gold: #b8975a;
  --ik-gold-soft: #e3d2a6;
  --ik-saffron: #b8975a;      /* name kept so older rules pick up champagne gold */
  --ik-terra: #8a6d34;        /* bronze: accent text on light backgrounds */
  --ik-ink: #25301f;
  --ik-muted: #55604a;
  --ik-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --header-height: 84px;
}
body::before { opacity: .16; }
body { background: var(--ik-cream); }

/* Cormorant has a small x-height: give headings more size */
h1, h2, .hero-text h1, .quote-title, .founder-text h2, .testimonials h2, .services h2, .approach h2,
.mustang-section h2, .our-story h2, .focus-areas-section h2, .pillars-section h2, .dosha-section h2,
.blog-header h1, .big-card h1 { font-family: var(--ik-serif); font-weight: 600; letter-spacing: -0.005em; }
.services h2, .testimonials h2, .focus-areas-section h2, .pillars-section h2, .approach h2,
.mustang-section h2, .our-story h2, .dosha-section h2 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); line-height: 1.08; }
.card-title, .focus-area-card h3, .charger-card h3, .dosha-card h3, .testimonial-card h3,
.services .card h3, .pillar-card h3, .feature h3, .oneplus-header h3, .hero-trust strong, .supra-highlight p {
  font-family: var(--ik-serif); font-weight: 600;
}
.dosha-card h3 { font-size: 2rem; }
.services .card h3 { font-size: 1.75rem; }
.focus-area-card h3, .charger-card h3, .pillar-card h3 { font-size: 1.4rem; }
.card-title { font-size: 1.55rem; }

/* ---------- Navigation: forest green, cream logo ---------- */
.navbar {
  background: var(--ik-green-deep);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(227, 210, 166, .22);
}
.navbar.is-scrolled { background: var(--ik-green-deep); box-shadow: 0 10px 30px rgba(10, 18, 8, .35); }
.nav-brand { gap: 1rem; }
.nav-brand .logo { height: 54px; width: auto; max-height: none; object-fit: contain; }
.nav-brand h2 { margin: 0; display: flex; flex-direction: column; font-family: 'Montserrat', sans-serif; line-height: 1; color: var(--ik-cream); }
.brand-name { font-weight: 300; font-size: 1.55rem; letter-spacing: .36em; padding-left: .02em; }
.brand-sub {
  margin-top: .42rem; padding-top: .42rem;
  border-top: 1px solid rgba(227, 210, 166, .5);
  font-size: .55rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ik-gold-soft); white-space: nowrap;
}
.nav-menu > a:not(.interest-btn) { color: rgba(247, 244, 232, .86); font-weight: 500; letter-spacing: .02em; }
.nav-menu > a:not(.interest-btn):hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-menu > a.active:not(.interest-btn) { background: transparent; color: #fff; box-shadow: inset 0 -2px 0 var(--ik-gold); border-radius: 0; }
.interest-btn { background: var(--ik-cream) !important; color: var(--ik-green-deep) !important; box-shadow: none; border: 1px solid var(--ik-cream); }
.interest-btn:hover { background: var(--ik-gold-soft) !important; border-color: var(--ik-gold-soft); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.nav-toggle span { background: var(--ik-cream); }

/* Collapse to the menu button on tablets and small laptops so nothing is cramped */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed; top: var(--header-height); left: -100%; width: 100%;
    height: calc(100vh - var(--header-height));
    flex-direction: column; justify-content: flex-start; align-items: center;
    gap: .4rem; padding: 2.2rem 1.5rem;
    background: var(--ik-green-deep); box-shadow: none;
    transition: left .3s ease;
  }
  .nav-menu.active { left: 0; display: flex; }
  .nav-menu > a:not(.interest-btn) { font-size: 1.2rem; padding: .9rem 1.2rem; }
  .nav-menu > a.active:not(.interest-btn) { box-shadow: inset 0 -2px 0 var(--ik-gold); }
  .interest-btn { margin: 1rem 0 0; }
}
@media (max-width: 560px) {
  .nav-brand .logo { height: 44px; }
  .brand-name { font-size: 1.2rem; letter-spacing: .3em; }
  .brand-sub { font-size: .47rem; letter-spacing: .24em; }
  .nav-brand { gap: .75rem; }
}

/* ---------- Buttons ---------- */
.btn--primary, .ferrari-btn {
  background: var(--ik-green); border-color: var(--ik-green); color: var(--ik-cream);
  box-shadow: 0 10px 24px rgba(34, 48, 27, .28);
}
.btn--primary:hover, .ferrari-btn:hover {
  background: var(--ik-green-deep); border-color: var(--ik-green-deep); color: #fff;
  box-shadow: 0 14px 30px rgba(34, 48, 27, .38);
}
.floating-btn { background: var(--ik-green-deep); color: var(--ik-cream); border: 1px solid var(--ik-gold); box-shadow: 0 12px 28px rgba(10, 18, 8, .4); }

/* ---------- Hero: deep forest, like the brochure cover ---------- */
.hero {
  background:
    radial-gradient(760px 520px at 84% 24%, rgba(184, 151, 90, .20), transparent 62%),
    linear-gradient(160deg, #2c3b24 0%, #22301b 100%);
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6.5rem);
}
.hero::before {
  width: min(860px, 100vw); right: -12%; margin-top: calc(min(860px, 100vw) / -2);
  background: url('images/logo-mark-cream.png') center / contain no-repeat;
  opacity: .05; animation: none;
}
.hero::after { display: none; }
.hero-content { gap: clamp(2rem, 5vw, 5.5rem); }
.hero-text h1 { color: var(--ik-cream); font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1.02; font-weight: 500; letter-spacing: -.01em; }
.hero-text h1 em { color: var(--ik-gold-soft); font-weight: 500; }
.hero-text p { color: rgba(247, 244, 232, .82); font-size: 1.1rem; }
.hero-text::before {
  background: rgba(255, 255, 255, .06); color: var(--ik-gold-soft);
  border: 1px solid rgba(227, 210, 166, .32); letter-spacing: .18em;
}
.hero .btn--primary { background: var(--ik-cream); border-color: var(--ik-cream); color: var(--ik-green-deep); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
.hero .btn--primary:hover { background: var(--ik-gold-soft); border-color: var(--ik-gold-soft); color: var(--ik-green-deep); }
.hero .hero-buttons a:nth-child(2) .btn--primary { background: transparent; color: var(--ik-cream); border: 1px solid rgba(247, 244, 232, .6); box-shadow: none; }
.hero .hero-buttons a:nth-child(2) .btn--primary:hover { background: var(--ik-cream); color: var(--ik-green-deep); border-color: var(--ik-cream); }
.hero-trust { border-top-color: rgba(227, 210, 166, .25); }
.hero-trust strong { color: var(--ik-cream); font-size: 1.7rem; }
.hero-trust span { color: rgba(247, 244, 232, .68); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }

.hero-image::before { border-color: rgba(227, 210, 166, .55); opacity: 1; inset: 18px -18px -18px 18px; }
.hero-image img {
  height: clamp(420px, 44vw, 620px);
  object-position: center 8%;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .45);
}
.hero-image::after {
  content: 'Dr. Priyanka Gavhane (Anurati)\A Founder  ·  B.A.M.S.';
  background: rgba(34, 48, 27, .78); color: var(--ik-cream);
  border: 1px solid rgba(227, 210, 166, .4);
  font-style: normal; font-size: 1.15rem; font-weight: 600; letter-spacing: .01em;
  left: -40px; bottom: 44px;
}
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-text p { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .hero-trust { justify-content: center; text-align: center; }
  .hero-trust li { align-items: center; }
  .hero-text::before { margin-left: auto; margin-right: auto; }
  .hero-image { max-width: 360px; }
  .hero-image img { height: 440px; }
  .hero-image::after { left: 50%; transform: translateX(-50%); bottom: 20px; width: max-content; max-width: 92%; text-align: center; font-size: 1rem; }
}

/* ---------- Strip & panels recoloured to the brand ---------- */
.marquee { background: var(--ik-cream-2); color: var(--ik-green); border-block: 1px solid var(--ik-line); }
.marquee-group span { font-size: 1.45rem; font-weight: 500; }
.marquee-group span::after { color: var(--ik-gold); }
.quote-wrapper {
  background-color: var(--ik-green-deep);
  background-image: radial-gradient(520px 320px at 8% 0%, rgba(184, 151, 90, .22), transparent 62%);
  background-size: auto; background-position: 0 0;
}
.dosha-section {
  background: radial-gradient(600px 360px at 100% 0%, rgba(184, 151, 90, .22), transparent 60%), linear-gradient(160deg, #e9edde, #dce3ca);
}
.dosha-section::before { background: url('images/logo-mark-green.png') center / contain no-repeat; opacity: .07; animation: none; }
.dosha-card i { background: linear-gradient(135deg, var(--ik-green), #4d6640); }
.dosha-card:nth-child(2) i { background: linear-gradient(135deg, #6f5626, var(--ik-gold)); }
.dosha-card:nth-child(3) i { background: linear-gradient(135deg, #3e5a52, #6f8a76); }
.oppo-gold .oneplus-header { background: linear-gradient(135deg, #6f5626, #a88748); }
.oppo-lite .oneplus-header { background: linear-gradient(135deg, #40594a, #6f8a76); }
.porsche-footer { border-top: 1px solid rgba(227, 210, 166, .3); }
.footer-right a:hover { background: var(--ik-gold); color: var(--ik-green-deep); }
.hero-trust { flex-wrap: nowrap; gap: 1.2rem; }
.hero-trust li { flex: 1 1 0; min-width: 0; }
.hero-trust strong { font-size: 1.55rem; }
@media (max-width: 560px) { .hero-trust { flex-wrap: wrap; } .hero-trust li { flex: 1 1 40%; } }


/* =====================================================================
   v3 continued — hero line, journey, founder, CTA band, footer
   ===================================================================== */
.hero-online {
  display: flex; align-items: center; gap: .6rem;
  margin: 1.6rem 0 0 !important;
  font-size: .8rem !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ik-gold-soft) !important;
}
.hero-online i { font-size: 1rem; }
@media (max-width: 900px) { .hero-online { justify-content: center; } }

/* eyebrow labels above section headings */
.services h2::before, .focus-areas-section h2::before, .testimonials h2::before, .mustang-section h2::before,
.pillars-section h2::before, .our-story h2::before {
  display: block; margin-bottom: .9rem;
  font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ik-terra);
}
.services h2::before { content: 'Three phases of care'; }
.focus-areas-section h2::before { content: 'What we treat'; }
.testimonials h2::before { content: 'Real stories'; }
.mustang-section h2::before { content: 'Our difference'; }
.our-story h2::before { content: 'About Ikigai'; }

/* ---------- Journey: typography leads, art is secondary ---------- */
.services .carousel-track { counter-reset: phase; }
.services .card { counter-increment: phase; padding: 2.4rem 1.8rem 2.2rem; text-align: center; }
.services .card img { width: 92px; height: auto; margin: 0 auto 1rem; opacity: .92; }
.services .card h3::before {
  content: 'Phase 0' counter(phase);
  display: block; margin-bottom: .55rem;
  font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ik-terra);
}
.services .card h3 { font-size: 2rem; margin-bottom: .8rem; }
.services .card p { color: var(--ik-muted); }

/* ---------- Founder: editorial two-column ---------- */
.founder-content {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start;
  padding: clamp(2rem, 5vw, 4rem); text-align: left;
  background: #fffdf6; border-radius: 32px;
}
.founder-quote {
  margin: 0 0 2rem; padding: 0;
  font-family: var(--ik-serif); font-style: italic; font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.12; color: var(--ik-green-deep);
}
.founder-id { display: flex; align-items: center; gap: 1.1rem; padding-top: 1.6rem; border-top: 1px solid var(--ik-line); }
.founder-id img {
  width: 88px; height: 88px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: center 12%;
  border: 3px solid var(--ik-gold-soft); box-shadow: var(--ik-shadow-1);
}
.founder-id h2 { font-size: 1.7rem; margin: 0 0 .35rem; text-align: left; line-height: 1.1; }
.founder-id h2::after { display: none; }
.founder-id .credentials { margin: 0; font-size: .74rem; }
.founder-text p { font-size: 1.04rem; line-height: 1.85; }
@media (max-width: 900px) {
  .founder-content { grid-template-columns: 1fr; text-align: left; }
  .founder-text { text-align: left; }
}

/* ---------- Closing call to action ---------- */
.cta-band {
  margin: clamp(1.5rem, 4vw, 3rem) clamp(.75rem, 3vw, 2.5rem) 0;
  padding: clamp(3.5rem, 8vw, 6.5rem) 1.5rem;
  border-radius: clamp(28px, 4vw, 56px);
  text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(640px 380px at 50% 0%, rgba(184, 151, 90, .22), transparent 62%),
    linear-gradient(160deg, #2c3b24, #22301b);
}
.cta-band::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; transform: translate(-50%, -50%);
  background: url('images/logo-mark-cream.png') center / contain no-repeat; opacity: .05; pointer-events: none;
}
.cta-inner { position: relative; max-width: 700px; margin: 0 auto; }
.cta-band .eyebrow { color: var(--ik-gold-soft); }
.cta-band h2 { color: var(--ik-cream); font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.05; margin-bottom: 1.2rem; }
.cta-band p { color: rgba(247, 244, 232, .8); font-size: 1.08rem; }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2rem; }
.cta-band .btn--primary { background: var(--ik-cream); border-color: var(--ik-cream); color: var(--ik-green-deep); }
.cta-band .btn--primary:hover { background: var(--ik-gold-soft); border-color: var(--ik-gold-soft); }
.btn--ghost {
  border-radius: 999px; padding: .85rem 1.9rem; font-weight: 600; gap: .55rem;
  color: var(--ik-cream); border: 1px solid rgba(247, 244, 232, .55); background: transparent;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn--ghost:hover { background: var(--ik-cream); color: var(--ik-green-deep); transform: translateY(-2px); }

/* ---------- Footer ---------- */
.site-footer { display: block; padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 6vw, 6%) 1.6rem; margin-top: clamp(2rem, 5vw, 4rem); text-align: left; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); max-width: 1200px; margin: 0 auto; }
.footer-lockup { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.footer-mark { height: 50px; width: auto; }
.footer-wordmark { display: flex; flex-direction: column; line-height: 1; }
.site-footer .brand-name { color: var(--ik-cream); font-size: 1.4rem; }
.site-footer .footer-brand p { color: rgba(247, 244, 232, .7); max-width: 24rem; font-size: .95rem; line-height: 1.7; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.footer-col h4 {
  margin: 0 0 .5rem; font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ik-gold-soft);
}
.site-footer .footer-col a { color: rgba(247, 244, 232, .86); font-weight: 500; font-size: .95rem; word-break: break-word; }
.site-footer .footer-col a:hover { color: var(--ik-gold-soft); }
.footer-col i { width: 1.3rem; color: var(--ik-gold); }
.footer-note { margin-top: .4rem; font-size: .82rem; color: rgba(247, 244, 232, .6); font-style: italic; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  max-width: 1200px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding-top: 1.4rem;
  border-top: 1px solid rgba(227, 210, 166, .22);
}
.footer-bottom p { font-size: .85rem; color: rgba(247, 244, 232, .65); }
.footer-bottom p strong { color: rgba(247, 244, 232, .85); font-weight: 600; }
.site-footer .footer-bottom a { color: rgba(247, 244, 232, .85); }
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .site-footer .footer-brand p { max-width: none; }
}


/* =====================================================================
   v3 — Offerings · Transformation Tales (hero-style feature) · Focus areas
   ===================================================================== */

/* ---------- What are we offering? ---------- */
.services { padding: clamp(3.5rem, 7vw, 6rem) 5% clamp(2.5rem, 5vw, 4rem); }
.services .card { position: relative; overflow: hidden; background: #fffdf6; border-radius: 26px; box-shadow: var(--ik-shadow-1); }
.services .card::after {                          /* large gold numeral watermark */
  content: '0' counter(phase);
  position: absolute; top: .4rem; right: 1.2rem;
  font-family: var(--ik-serif); font-weight: 600; font-size: 5.2rem; line-height: 1;
  color: var(--ik-gold-soft); opacity: .55; pointer-events: none;
}
.services .card img {
  width: 112px; height: 112px; padding: 14px; object-fit: contain;
  border-radius: 50%; background: var(--ik-green-soft);
  margin: .4rem auto 1.2rem; opacity: 1;
}
.services .card:hover { transform: translateY(-8px); box-shadow: var(--ik-shadow-2); }

/* ---------- Transformation Tales: the showpiece ---------- */
.testimonials {
  position: relative; overflow: hidden;
  margin: clamp(2rem, 5vw, 4rem) clamp(.75rem, 3vw, 2.5rem);
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  border-radius: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(720px 420px at 50% -5%, rgba(184, 151, 90, .28), transparent 62%),
    radial-gradient(600px 400px at 100% 100%, rgba(184, 151, 90, .12), transparent 60%),
    linear-gradient(165deg, #2c3b24, #1f2c19);
  box-shadow: 0 30px 70px rgba(31, 44, 25, .35);
}
.testimonials::before {                           /* brand mark watermark */
  content: ''; position: absolute; left: -140px; bottom: -160px; width: 560px; height: 560px;
  background: url('images/logo-mark-cream.png') center / contain no-repeat; opacity: .05; pointer-events: none;
}
.testimonials > * { position: relative; }
.testimonials h2 { color: var(--ik-cream); font-size: clamp(2.8rem, 6.5vw, 5rem); line-height: 1; margin-bottom: 1.4rem; }
.testimonials h2::before { color: var(--ik-gold-soft); letter-spacing: .3em; }
.testimonials h2::after { background: linear-gradient(90deg, var(--ik-gold), var(--ik-gold-soft)); }
.testimonials .subtitle { color: rgba(247, 244, 232, .8); font-size: 1.1rem; max-width: 40rem; margin-bottom: 3.5rem; }

@media (min-width: 769px) {
  .testimonial-grid { display: block; column-count: 2; column-gap: 1.8rem; }
}
@media (min-width: 1100px) { .testimonial-grid { column-count: 3; } }

.testimonial-card {
  background: #fbf8ee;
  border: 1px solid rgba(227, 210, 166, .5);
  border-radius: 26px;
  padding: 1rem 1rem 1.8rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  text-align: left;
}
@media (min-width: 769px) {
  .testimonial-card { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 1.8rem; }
}
.testimonial-card::before { top: 1rem; right: 1.4rem; font-size: 0; }   /* replace the old quote mark */
.testimonial-card img {
  width: 100%; max-width: none; height: auto;
  border-radius: 18px; margin: 0 0 1.3rem; border: 0; box-shadow: none;
  object-fit: cover;
}
.testimonial-card h3, .testimonial-card span, .testimonial-card p { margin-left: .7rem; margin-right: .7rem; }
.testimonial-card h3 { font-family: var(--ik-serif); font-size: 1.7rem; color: var(--ik-green-deep); margin-top: 0; margin-bottom: .1rem; }
.testimonial-card span { color: var(--ik-terra); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.testimonial-card p {
  position: relative; padding-top: 1.1rem; margin-bottom: 0;
  border-top: 1px solid var(--ik-line);
  font-size: 1.02rem; line-height: 1.75; color: var(--ik-ink);
}
.testimonial-card p::before {
  content: '\201C'; display: block; height: 1.6rem; margin: -.2rem 0 .2rem;
  font-family: var(--ik-serif); font-size: 4rem; line-height: 1; color: var(--ik-gold);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(0, 0, 0, .38); }

.testimonials .carousel-dots { margin-top: 1rem; }
.testimonials .carousel-dots button { background: rgba(247, 244, 232, .35); }
.testimonials .carousel-dots button.active { background: var(--ik-gold); }

.tales-cta { text-align: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.tales-cta p {
  font-family: var(--ik-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--ik-cream); margin-bottom: 1.4rem;
}
.tales-cta .btn--primary { background: var(--ik-cream); border-color: var(--ik-cream); color: var(--ik-green-deep); }
.tales-cta .btn--primary:hover { background: var(--ik-gold-soft); border-color: var(--ik-gold-soft); }

/* ---------- Therapeutic Focus Areas ---------- */
.focus-areas-section { padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3rem); }
.focus-areas-grid { gap: 1.7rem; max-width: 1200px; }
.focus-area-card {
  padding: 0; overflow: hidden; border-radius: 24px; background: #fffdf6; text-align: left;
}
.focus-area-card img {
  width: 100%; height: 200px; margin: 0; border-radius: 0; object-fit: cover; background: var(--ik-green-soft);
  transition: transform .7s ease;
}
.focus-area-card:hover img { transform: scale(1.06); }
.focus-area-card h3 { margin: 0; padding: 1.4rem 1.5rem .8rem; font-size: 1.55rem; line-height: 1.15; }
.focus-area-card { position: relative; }
.chips { list-style: none; margin: 0; padding: 0 1.5rem 1.7rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li {
  padding: .32rem .75rem; border-radius: 999px;
  background: var(--ik-green-soft); color: var(--ik-green);
  font-size: .76rem; font-weight: 500; line-height: 1.3; letter-spacing: .01em;
  border: 1px solid transparent; transition: background .25s ease, border-color .25s ease;
}
.focus-area-card:hover .chips li { background: #fff; border-color: var(--ik-gold-soft); }
.services .card::after { font-size: 3.6rem; top: .7rem; right: 1rem; opacity: .6; }
.testimonials h2 { font-size: clamp(2.1rem, 9vw, 5rem); overflow-wrap: anywhere; }
@media (min-width: 769px) { .testimonials h2 { font-size: clamp(2.8rem, 6.5vw, 5rem); } }


/* =====================================================================
   Phase wheel — "What are we offering?"  (circular, animated)
   ===================================================================== */
.phases { padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); text-align: center; }
.phases h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.phase-stage {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center;
  max-width: 1120px; margin: 0 auto; text-align: left;
}

/* the wheel */
.phase-wheel { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; margin: 0 auto; }
.wheel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel-svg .track { fill: none; stroke: var(--ik-gold-soft); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.wheel-svg .spin {
  fill: none; stroke: var(--ik-green); stroke-opacity: .22; stroke-width: 1.2; stroke-dasharray: 1 7; stroke-linecap: round;
  transform-origin: 200px 210px; animation: ik-spin 60s linear infinite;
}
.wheel-svg .arc { fill: none; stroke: var(--ik-gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.4, .1, .2, 1); }
.phase-wheel[data-step="2"] .arc1, .phase-wheel[data-step="3"] .arc1,
.phase-wheel[data-step="3"] .arc2 { stroke-dashoffset: 0; }
.wheel-svg .arc3 { stroke: var(--ik-green); stroke-opacity: .35; stroke-dasharray: 1; }
.phase-wheel[data-step="3"] .arc3 { stroke-dashoffset: .55; transition-delay: .9s; }
.wheel-svg .chev { fill: none; stroke: var(--ik-gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wheel-mark { position: absolute; left: 50%; top: 52.5%; width: 21%; transform: translate(-50%, -50%); opacity: .9; }

.phase-node {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(62px, 18%, 84px); aspect-ratio: 1; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #fffdf6; color: var(--ik-green-deep);
  border: 2px solid var(--ik-gold-soft);
  box-shadow: 0 10px 26px rgba(34, 48, 27, .14);
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.phase-node:hover { transform: translate(-50%, -50%) scale(1.07); border-color: var(--ik-gold); }
.node-num { font-family: var(--ik-serif); font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1; }
.node-label {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ik-terra); transition: color .35s ease;
}
.lab-top .node-label { bottom: calc(100% + .7rem); }
.lab-bottom .node-label { top: calc(100% + .7rem); }
.phase-node.is-active { background: var(--ik-green); color: var(--ik-cream); border-color: var(--ik-gold); box-shadow: 0 14px 34px rgba(34, 48, 27, .35); }
.phase-node.is-active .node-label { color: var(--ik-green-deep); }
.phase-node.is-active::after {                       /* soft pulse ring */
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 2px solid var(--ik-gold); opacity: 0; animation: ik-pulse 2.4s ease-out infinite;
}
@keyframes ik-pulse { 0% { transform: scale(.88); opacity: .75; } 100% { transform: scale(1.35); opacity: 0; } }

/* the panel */
.phase-panels {
  position: relative; display: grid; overflow: hidden;
  background: #fffdf6; border: 1px solid var(--ik-line); border-radius: 30px;
  box-shadow: var(--ik-shadow-2); padding: clamp(1.5rem, 3.2vw, 2.6rem);
}
.phase-panel { grid-area: 1 / 1; display: grid; grid-template-columns: 170px 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center; }
.phase-art {
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf6 0%, var(--ik-green-soft) 100%);
  box-shadow: inset 0 0 0 1px var(--ik-line);
}
.art { width: 100%; height: 100%; display: block; }
.art .s { fill: none; stroke: var(--ik-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art .a { stroke: var(--ik-gold); }
.art .dash { stroke-dasharray: 1 7; stroke-width: 2; }
.art .f { fill: var(--ik-green); }
.art .fa { fill: var(--ik-gold); stroke: none; }
.phase-eyebrow { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ik-terra); }
.phase-copy h3 { font-family: var(--ik-serif); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1.05; margin: 0 0 1rem; color: var(--ik-green-deep); }
.phase-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.phase-points li { position: relative; padding-left: 1.5rem; color: var(--ik-ink); font-size: .98rem; line-height: 1.5; }
.phase-points li::before {
  content: ''; position: absolute; left: 0; top: .5em; width: .75rem; height: .75rem;
  background: url('images/logo-mark-green.png') center / contain no-repeat;
}

/* autoplay progress */
.phase-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--ik-gold), var(--ik-gold-soft)); transform-origin: left; transform: scaleX(0); }
.phase-stage.is-playing .phase-progress { animation: ik-progress var(--phase-dur, 7s) linear forwards; }
@keyframes ik-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* JS on: only the active panel shows, with a draw-in animation */
.js-phases .phase-panel { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.js-phases .phase-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .15s, transform .6s ease .15s; }
.js-phases .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-phases .art .dash { stroke-dasharray: 1 7; stroke-dashoffset: 0; }
.js-phases .art .f, .js-phases .art .fa { fill-opacity: 0; }
.js-phases .phase-panel.is-active .draw:not(.dash) { animation: ik-draw 1.5s cubic-bezier(.4, .1, .2, 1) forwards; animation-delay: calc(var(--i) * .06s + .2s); }
.js-phases .phase-panel.is-active .f { animation: ik-fill-leaf 1s ease forwards; animation-delay: calc(var(--i) * .06s + .9s); }
.js-phases .phase-panel.is-active .fa { animation: ik-fill-glow 1.2s ease forwards; animation-delay: calc(var(--i) * .06s + .4s); }
.js-phases .phase-panel.is-active .dash { animation: ik-fade 1.2s ease .8s both; }
@keyframes ik-draw { to { stroke-dashoffset: 0; } }
@keyframes ik-fill-leaf { to { fill-opacity: .16; } }
@keyframes ik-fill-glow { to { fill-opacity: .3; } }
@keyframes ik-fade { from { opacity: 0; } to { opacity: 1; } }
/* the list items rise in one by one */
.js-phases .phase-panel .phase-points li { opacity: 0; transform: translateX(-10px); }
.js-phases .phase-panel.is-active .phase-points li { animation: ik-rise .6s ease forwards; animation-delay: calc(.45s + var(--n, 0) * .1s); }
@keyframes ik-rise { to { opacity: 1; transform: none; } }

/* tablet / phone: stack */
@media (max-width: 900px) {
  .phase-stage { grid-template-columns: 1fr; gap: 3.2rem; }
  .phase-wheel { max-width: 380px; }
}
@media (max-width: 560px) {
  .phase-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .phase-art { width: 150px; }
  .phase-points { text-align: left; }
  .node-label { font-size: .62rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-svg .spin, .phase-node.is-active::after { animation: none; }
  .js-phases .phase-panel, .js-phases .phase-panel.is-active { transition: none; }
  .js-phases .draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .js-phases .art .f { fill-opacity: .16 !important; animation: none !important; }
  .js-phases .art .fa { fill-opacity: .3 !important; animation: none !important; }
  .js-phases .phase-panel .phase-points li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .wheel-svg .arc { transition: none; }
}
.phase-art { overflow: hidden; }
.art { transform: scale(1.28); transform-origin: 50% 52%; }
@media (min-width: 901px) { .phase-panel { grid-template-columns: 190px 1fr; } }

/* Without JS the three phases simply stack; with JS they overlap and cross-fade */
.phase-panels { gap: 2rem; }
.phase-panel { grid-area: auto; }
.js-phases .phase-panels { gap: 0; }
.js-phases .phase-panel { grid-area: 1 / 1; }


/* =====================================================================
   Phase wheel v2 — travelling guide + icons that act out each bullet
   ===================================================================== */
/* JS now drives the arcs and progress bar */
.wheel-svg .arc { transition: none; stroke-opacity: 1; stroke: var(--ik-gold); stroke-dasharray: 1; stroke-dashoffset: 1; }
.phase-wheel.arcs-fade .arc { opacity: 0; transition: opacity .7s ease; }
.phase-stage .phase-progress { animation: none !important; transform: scaleX(0); }

/* ---- traveller on the ring ---- */
.traveler {
  position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none;
  width: clamp(38px, 10%, 50px); aspect-ratio: 1; border-radius: 50%;
  background: #fffdf6; border: 2px solid var(--ik-gold);
  box-shadow: 0 0 0 6px rgba(184, 151, 90, .16), 0 10px 24px rgba(34, 48, 27, .22);
  display: grid; place-items: center;
  opacity: 0; transform: translate(-50%, -50%) scale(.6);
  --p: 0;
}
.traveler .tr { grid-area: 1 / 1; width: 78%; height: 78%; display: none; }
.traveler .tr svg { width: 100%; height: 100%; display: block; overflow: visible; }
.traveler[data-leg="0"] .tr-seed, .traveler[data-leg="1"] .tr-bud, .traveler[data-leg="2"] .tr-leaf { display: block; }
.ts { fill: none; stroke: var(--ik-green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tf { fill: var(--ik-gold); }
.tr-seed .seed { transform-origin: 20px 34px; transform: scale(calc(.45 + .55 * var(--p))); }
.tr-seed .tl { transform-origin: 20px 25px; transform: rotate(calc(-55deg * (1 - var(--p)))); fill: var(--ik-green); fill-opacity: .15; }
.tr-seed .trr { transform-origin: 20px 21px; transform: rotate(calc(55deg * (1 - var(--p)))); fill: var(--ik-green); fill-opacity: .15; }
.tr-bud .petal { transform-origin: 20px 20px; transform: rotate(calc(var(--r) * var(--p) * 1deg)) scale(calc(.5 + .5 * var(--p))); fill: var(--ik-gold); fill-opacity: .28; }
.tr-bud .flower { transform-origin: 20px 20px; transform: rotate(calc(var(--p) * 18deg)); }
.tr-leaf .drift { transform-origin: 20px 20px; transform: rotate(calc(-18deg + var(--p) * 36deg)) translateY(calc(sin(var(--p) * 3.14159rad) * -2px)); fill: var(--ik-green); }
.tr-leaf .drift path:first-child { fill: var(--ik-green); fill-opacity: .15; }
.trail {
  position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none; border-radius: 50%;
  background: var(--ik-gold); opacity: 0; transform: translate(-50%, -50%);
}
.trail[data-k="0"] { width: 9px; height: 9px; } .trail[data-k="1"] { width: 7px; height: 7px; }
.trail[data-k="2"] { width: 5px; height: 5px; } .trail[data-k="3"] { width: 3.5px; height: 3.5px; }
.phase-node.is-next { border-color: var(--ik-gold); box-shadow: 0 0 0 7px rgba(184, 151, 90, .22), 0 12px 28px rgba(34, 48, 27, .18); }


/* ---- bullets: tiny animated icons ---- */
.phase-points li { padding-left: 2.35rem; min-height: 24px; }
.phase-points li::before { display: none; }
.mi { position: absolute; left: 0; top: -.05em; width: 24px; height: 24px; }
.mi svg { width: 24px; height: 24px; display: block; overflow: visible; }
.mi svg * { fill: none; stroke: var(--ik-green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mi .t { stroke: var(--ik-terra); }
.mi .g { stroke: var(--ik-gold); }
.mi .base { opacity: .35; }
.mi .fillg { fill: var(--ik-gold); fill-opacity: .4; stroke: var(--ik-gold); }
.mi svg *{ transform-box: fill-box; }
.mi .beam, .mi .rays { transform-box: view-box; transform-origin: 12px 12px; }

.phase-panel.is-active .mi-spark .a   { transform-origin: center; animation: mi-spark 2.8s ease-in-out infinite; }
.phase-panel.is-active .mi-wave .a    { transform-origin: center; animation: mi-wave 3.2s ease-in-out infinite; }
.phase-panel.is-active .mi-flame .a   { transform-origin: 50% 100%; animation: mi-flame 1.5s ease-in-out infinite; }
.phase-panel.is-active .mi-link .lk   { stroke-dasharray: 1; animation: mi-link 2.8s ease-in-out infinite; }
.phase-panel.is-active .mi-drop .dp   { animation: mi-drop 2.4s ease-in infinite; }
.phase-panel.is-active .mi-drop .rip  { transform-origin: center; animation: mi-rip 2.4s ease-out infinite; }
.phase-panel.is-active .mi-pulse .pl  { stroke-dasharray: .3 .7; animation: mi-pulse 1.9s linear infinite; }
.phase-panel.is-active .mi-streak circle { fill: var(--ik-green); fill-opacity: 0; animation: mi-fill 3.4s ease-in-out infinite; }
.phase-panel.is-active .mi-streak .c2 { animation-delay: .55s; } .phase-panel.is-active .mi-streak .c3 { animation-delay: 1.1s; }
.phase-panel.is-active .mi-bowl .bl   { animation: mi-bob 2.2s ease-in-out infinite; }
.phase-panel.is-active .mi-compass .nd{ transform-origin: center; animation: mi-needle 4s ease-out infinite; }
.phase-panel.is-active .mi-align .d1  { animation: mi-al1 3.6s ease-in-out infinite; }
.phase-panel.is-active .mi-align .d2  { animation: mi-al2 3.6s ease-in-out infinite; }
.phase-panel.is-active .mi-align .d3  { animation: mi-al3 3.6s ease-in-out infinite; }
.phase-panel.is-active .mi-align .al  { animation: mi-alline 3.6s ease-in-out infinite; }
.phase-panel.is-active .mi-balance .beam { animation: mi-balance 4s ease-out infinite; }
.phase-panel.is-active .mi-shield .ck { stroke-dasharray: 1; animation: mi-link 2.8s ease-in-out infinite; }
.phase-panel.is-active .mi-season .rays { animation: ik-spin 9s linear infinite; }
.phase-panel.is-active .mi-season .sc { transform-origin: center; animation: mi-breathe 3s ease-in-out infinite; }
.phase-panel.is-active .mi-dial .kn   { animation: mi-dial 4s ease-in-out infinite; }
.mi-link .lk, .mi-shield .ck { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mi-pulse .pl { stroke-dashoffset: 1; }
@keyframes mi-spark   { 0% { opacity: 0; transform: scale(.3); } 18%, 50% { opacity: 1; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(.15); } }
@keyframes mi-wave    { 0%, 10% { transform: scaleY(1); } 55%, 82% { transform: scaleY(.05); } 100% { transform: scaleY(1); } }
@keyframes mi-flame   { 0%, 100% { transform: scale(1, 1) rotate(0); } 25% { transform: scale(.93, 1.08) rotate(-3deg); } 50% { transform: scale(1.05, .95) rotate(2.5deg); } 75% { transform: scale(.97, 1.05) rotate(-1.5deg); } }
@keyframes mi-link    { 0%, 10% { stroke-dashoffset: 1; } 45%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes mi-drop    { 0% { transform: translateY(-3px); opacity: 0; } 15% { opacity: 1; } 62% { transform: translateY(8px); opacity: 1; } 72%, 100% { transform: translateY(9px); opacity: 0; } }
@keyframes mi-rip     { 0%, 58% { transform: scale(.2); opacity: 0; } 66% { opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes mi-pulse   { from { stroke-dashoffset: .3; } to { stroke-dashoffset: -.7; } }
@keyframes mi-fill    { 0%, 8% { fill-opacity: 0; } 22%, 78% { fill-opacity: .85; } 100% { fill-opacity: 0; } }
@keyframes mi-bob     { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-2px); } }
@keyframes mi-needle  { 0% { transform: rotate(-55deg); } 18% { transform: rotate(38deg); } 36% { transform: rotate(-20deg); } 54% { transform: rotate(9deg); } 72%, 100% { transform: rotate(0); } }
@keyframes mi-al1     { 0%, 12% { transform: translateY(-6px); } 48%, 85% { transform: translateY(0); } 100% { transform: translateY(-6px); } }
@keyframes mi-al2     { 0%, 12% { transform: translateY(6px); } 48%, 85% { transform: translateY(0); } 100% { transform: translateY(6px); } }
@keyframes mi-al3     { 0%, 12% { transform: translateY(-3px); } 48%, 85% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
@keyframes mi-alline  { 0%, 30% { opacity: .15; } 50%, 85% { opacity: 1; } 100% { opacity: .15; } }
@keyframes mi-balance { 0% { transform: rotate(15deg); } 22% { transform: rotate(-10deg); } 42% { transform: rotate(5deg); } 62%, 90% { transform: rotate(0); } 100% { transform: rotate(15deg); } }
@keyframes mi-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes mi-dial    { 0% { transform: translateX(-7px); } 25% { transform: translateX(6px); } 45% { transform: translateX(-3px); } 65%, 88% { transform: translateX(0); } 100% { transform: translateX(-7px); } }

/* the big illustrations keep breathing after they have drawn */
.phase-panel.is-active .sway     { animation: art-sway 4.5s ease-in-out 2.6s infinite alternate; }
.phase-panel.is-active .spin-sun { animation: ik-spin 40s linear infinite; }
.phase-panel.is-active .spin-slow{ animation: ik-spin 60s linear infinite; }
.phase-panel.is-active .breathe  { animation: art-breathe 5s ease-in-out 2.8s infinite alternate; }
.phase-panel.is-active .ripple   { animation: art-ripple 6s ease-in-out 2.6s infinite alternate; }
.phase-panel.is-active .twinkle  { animation: art-twinkle 2.6s ease-in-out infinite alternate; }
@keyframes art-sway    { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
@keyframes art-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes art-ripple  { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
@keyframes art-twinkle { from { opacity: .25; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .mi *, .art * { animation: none !important; }
  .mi-link .lk, .mi-shield .ck { stroke-dashoffset: 0 !important; }
  .mi-pulse .pl { stroke-dasharray: none; stroke-dashoffset: 0 !important; }
  .mi-streak circle { fill-opacity: .85 !important; }
  .traveler, .trail { display: none; }
}

.phase-wheel { margin-bottom: 0; }
.phase-wheel .wheel-svg .arc { transition: opacity .5s ease; }
.phase-wheel.arcs-fade .wheel-svg .arc { opacity: 0; transition: opacity .6s ease; }


/* =====================================================================
   Therapeutic Focus Areas — selector list + feature card
   ===================================================================== */
.focus-tabs { padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 4rem); text-align: center; }
.focus-tabs h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.ft-stage {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 1180px; margin: 0 auto; text-align: left; align-items: stretch;
}
.ft-list { display: flex; flex-direction: column; gap: .6rem; }
.ft-tab {
  position: relative; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 1rem;
  padding: .85rem 1.15rem; border-radius: 20px; cursor: pointer; overflow: hidden; text-align: left;
  background: transparent; border: 1px solid var(--ik-line); color: var(--ik-green-deep); font: inherit;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.ft-tab:hover { background: #fffdf6; border-color: var(--ik-gold-soft); transform: translateX(4px); }
.ft-tab.is-active { background: var(--ik-green); color: var(--ik-cream); border-color: var(--ik-green); box-shadow: 0 16px 34px rgba(34, 48, 27, .28); transform: translateX(8px); }
.ft-icon {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ik-green-soft); color: var(--ik-green); transition: background .35s ease, color .35s ease;
}
.ft-tab.is-active .ft-icon { background: rgba(255, 255, 255, .12); color: var(--ik-gold-soft); }
.ft-icon svg { width: 26px; height: 26px; display: block; overflow: visible; }
.ft-icon svg * { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; }
.ft-icon .dt, .ft-icon .ht { fill: currentColor; fill-opacity: .2; }
.ft-name { font-family: var(--ik-serif); font-weight: 600; font-size: 1.32rem; line-height: 1.15; }
.ft-num { font: 700 .7rem 'Montserrat', sans-serif; letter-spacing: .2em; opacity: .55; }
.ft-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--ik-gold), var(--ik-gold-soft)); transform-origin: left; transform: scaleX(0); }

/* each active tab's icon acts out its name */
.ft-tab.is-active .ni-hormone .wv   { stroke-dasharray: .22 .08; animation: ni-flow 2.2s linear infinite; }
.ft-tab.is-active .ni-hormone .dt   { animation: ni-bob 2.2s ease-in-out infinite; }
.ft-tab.is-active .ni-metabolic .lvl{ animation: ni-level 2.4s ease-in-out infinite; }
.ft-tab.is-active .ni-gut .sp       { transform-origin: 50% 50%; animation: ik-spin 7s linear infinite; }
.ft-tab.is-active .ni-immune .pl    { transform-origin: center; animation: ni-pulse 1.9s ease-in-out infinite; }
.ft-tab.is-active .ni-women .lt     { transform-origin: 50% 100%; animation: ni-bloom 3s ease-in-out infinite; }
.ft-tab.is-active .ni-heart .ht     { transform-origin: center; animation: ni-beat 1.4s ease-in-out infinite; }
@keyframes ni-flow  { to { stroke-dashoffset: -.3; } }
@keyframes ni-bob   { 0%, 100% { transform: translate(-7px, 4px); } 50% { transform: translate(7px, -4px); } }
@keyframes ni-level { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
@keyframes ni-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
@keyframes ni-bloom { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.08); } }
@keyframes ni-beat  { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.16); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } 56% { transform: scale(1); } }

/* the feature card */
.ft-panels { align-self: stretch; }
.focus-tabs .phase-panel { grid-template-columns: minmax(0, 230px) 1fr; align-items: center; }
.focus-tabs .phase-art { aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px; background: radial-gradient(circle at 50% 36%, #fffdf6 0%, var(--ik-green-soft) 100%); overflow: hidden; }
.focus-tabs .art { transform: scale(1.08); transform-origin: 50% 55%; }
.art .tube { stroke-width: 16; stroke: var(--ik-green); stroke-opacity: .13; }
.focus-copy h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 0; line-height: 1.08; }
.focus-copy .chips { padding: 0; gap: .55rem; margin-top: 1.3rem; }
.focus-copy .chips li { font-size: .88rem; padding: .42rem .9rem; background: var(--ik-green-soft); border-color: rgba(53, 80, 46, .08); }
.js-phases .focus-tabs .chips li { opacity: 0; transform: translateY(10px) scale(.96); }
.js-phases .focus-tabs .phase-panel.is-active .chips li { animation: ik-chip .55s ease forwards; animation-delay: calc(.45s + var(--n, 0) * .09s); }
@keyframes ik-chip { to { opacity: 1; transform: none; } }
/* extra gentle loops for the new drawings */
.phase-panel.is-active .flicker { animation: art-flicker 1.6s ease-in-out infinite; }
.phase-panel.is-active .beat    { animation: art-beat 1.5s ease-in-out infinite; }
@keyframes art-flicker { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(.93, 1.08) rotate(-2.5deg); } 60% { transform: scale(1.05, .95) rotate(2deg); } }
@keyframes art-beat    { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.05); } 28% { transform: scale(1); } 42% { transform: scale(1.035); } 56% { transform: scale(1); } }

@media (max-width: 960px) {
  .ft-stage { grid-template-columns: 1fr; }
  .ft-list { flex-direction: row; overflow-x: auto; gap: .5rem; padding: .3rem .2rem .7rem; scroll-snap-type: x proximity; scrollbar-width: none; }
  .ft-list::-webkit-scrollbar { display: none; }
  .ft-tab { flex: 0 0 auto; grid-template-columns: 38px auto; padding: .6rem 1rem .6rem .7rem; gap: .65rem; scroll-snap-align: center; }
  .ft-tab:hover, .ft-tab.is-active { transform: none; }
  .ft-icon { width: 38px; height: 38px; }
  .ft-num { display: none; }
  .ft-name { font-size: 1.08rem; white-space: nowrap; }
}
@media (max-width: 640px) {
  .focus-tabs .phase-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .focus-tabs .phase-art { width: min(220px, 70%); }
  .focus-copy .chips { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-icon *, .phase-panel .art * { animation: none !important; }
  .js-phases .focus-tabs .chips li { opacity: 1 !important; transform: none !important; animation: none !important; }
}


/* ---- fills must fade in together with the outline draw (both are animations on the same element) ---- */
.art .fa.s { stroke: var(--ik-green); }
.js-phases .phase-panel.is-active .draw.f:not(.dash) {
  animation: ik-draw 1.5s cubic-bezier(.4, .1, .2, 1) forwards, ik-fill-leaf 1s ease forwards;
  animation-delay: calc(var(--i) * .06s + .2s), calc(var(--i) * .06s + .9s);
}
.js-phases .phase-panel.is-active .draw.fa:not(.dash) {
  animation: ik-draw 1.5s cubic-bezier(.4, .1, .2, 1) forwards, ik-fill-glow 1.2s ease forwards;
  animation-delay: calc(var(--i) * .06s + .2s), calc(var(--i) * .06s + .5s);
}
@keyframes ik-fill-glow { to { fill-opacity: .24; } }


/* =====================================================================
   Transformation Tales — world map + story cards
   ===================================================================== */
.tm-wrap { display: none; }
.js-tales .tm-wrap { display: block; }
.js-tales .tales-fallback { display: none; }
.testimonials .subtitle { margin-bottom: 1.6rem; }

.tm-hint {
  display: flex; justify-content: center; align-items: center; gap: .7rem;
  margin: 0 0 1.2rem; font: 700 .72rem 'Montserrat', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ik-gold-soft);
}
.tm-hint-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ik-gold); box-shadow: 0 0 0 0 rgba(184, 151, 90, .6); animation: tm-hint 2s ease-out infinite; }
@keyframes tm-hint { to { box-shadow: 0 0 0 14px rgba(184, 151, 90, 0); } }

.tm-map {
  position: relative; width: 100%; max-width: 1120px; margin: 0 auto; aspect-ratio: 2.35 / 1; overflow: hidden;
  border-radius: 28px; border: 1px solid rgba(227, 210, 166, .16);
  background: radial-gradient(60% 70% at 50% 45%, rgba(184, 151, 90, .10), transparent 70%), rgba(255, 255, 255, .02);
}
.tm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tm-svg path { fill: none; stroke-linecap: round; }
.tm-dots-world path { stroke: rgba(247, 244, 232, .32); stroke-width: 3.3; }
.tm-dots-region path { stroke: rgba(247, 244, 232, .36); stroke-width: 1.5; }
.tm-dots-world, .tm-dots-region { transition: opacity .9s ease; }
.tm-dots-region { opacity: 0; }
.tm-map[data-view="region"] .tm-dots-region { opacity: 1; }
.tm-map[data-view="region"] .tm-dots-world { opacity: 0; }

.tm-pins { position: absolute; inset: 0; }
.tm-pin {
  position: absolute; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.tm-pin.is-on { opacity: 1; pointer-events: auto; }
.tm-dot {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: linear-gradient(135deg, #f0d28c, var(--ik-gold)); border: 2px solid #fffdf6;
  box-shadow: 0 0 0 4px rgba(184, 151, 90, .35), 0 6px 14px rgba(0, 0, 0, .4); transition: transform .3s ease;
}
.tm-pulse { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--ik-gold-soft); opacity: 0; animation: tm-ripple 2.6s ease-out infinite; }
.tm-pin:nth-child(2n) .tm-pulse { animation-delay: .9s; }
.tm-pin:nth-child(3n) .tm-pulse { animation-delay: 1.7s; }
@keyframes tm-ripple { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
.tm-pin:hover .tm-dot, .tm-pin:focus-visible .tm-dot { transform: scale(1.3); }
.tm-pin:focus-visible { outline: 2px solid var(--ik-cream); outline-offset: 2px; border-radius: 50%; }
.tm-badge {
  position: absolute; right: 3px; top: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center; background: var(--ik-cream); color: var(--ik-green-deep);
  font: 700 .66rem 'Montserrat', sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.tm-label {
  position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font: 700 .66rem 'Montserrat', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ik-cream);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.tm-pin[data-side="right"] .tm-label { left: calc(50% + 15px); }
.tm-pin[data-side="left"] .tm-label { right: calc(50% + 15px); }

.tm-back {
  position: absolute; left: 14px; top: 14px; z-index: 3; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(227, 210, 166, .45); background: rgba(34, 48, 27, .75); color: var(--ik-cream);
  font: 600 .72rem 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; transition: background .25s ease, color .25s ease;
}
.tm-back:hover { background: var(--ik-cream); color: var(--ik-green-deep); }

.tm-chips { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.tm-chip {
  display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 1rem .35rem .35rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(227, 210, 166, .35); background: rgba(255, 255, 255, .06); color: var(--ik-cream);
  font: 500 .86rem 'Montserrat', sans-serif; transition: background .25s ease, color .25s ease, transform .25s ease;
}
.tm-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--ik-green-soft); }
.tm-chip small { opacity: .7; font-size: .74rem; letter-spacing: .06em; }
.tm-chip:hover { background: var(--ik-cream); color: var(--ik-green-deep); transform: translateY(-2px); }

@media (max-width: 700px) {
  .tm-map { aspect-ratio: 1.3 / 1; border-radius: 22px; }
  .tm-label { font-size: .58rem; letter-spacing: .1em; }
  .tm-hint { font-size: .64rem; letter-spacing: .16em; }
}

/* ---------- the story card ---------- */
.tm-lock { overflow: hidden; }
.tm-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: clamp(.6rem, 3vw, 2rem); opacity: 0; transition: opacity .35s ease; }
.tm-modal[hidden] { display: none !important; }
.tm-modal.is-open { opacity: 1; }
.tm-backdrop { position: absolute; inset: 0; background: rgba(18, 28, 14, .76); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.tm-bloom { position: absolute; left: 50%; top: 50%; width: min(1100px, 160vw); aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%) scale(.4); opacity: 0; }
.tm-bloom img { width: 100%; height: 100%; display: block; animation: ik-spin 150s linear infinite; }
.tm-modal.is-open .tm-bloom { animation: tm-bloom 1.6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes tm-bloom { to { transform: translate(-50%, -50%) scale(1); opacity: .42; } }

.tm-card {
  position: relative; width: min(1010px, 100%); max-height: min(92vh, 900px); overflow: auto;
  padding: clamp(1.3rem, 3vw, 2.5rem); border-radius: 32px;
  background: radial-gradient(520px 260px at 100% 0%, rgba(184, 151, 90, .14), transparent 65%), #fbf7ea;
  border: 1px solid var(--ik-gold-soft);
  box-shadow: 0 0 0 7px rgba(251, 247, 234, .08), 0 40px 90px rgba(0, 0, 0, .5);
  transform: translateY(28px) scale(.93) rotate(-.6deg); opacity: 0;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}
.tm-modal.is-open .tm-card { transform: none; opacity: 1; }
.tm-card::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(184, 151, 90, .4); border-radius: 24px; pointer-events: none; }
.tm-close {
  position: absolute; right: 16px; top: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ik-line); background: #fffdf6; color: var(--ik-green-deep); font-size: 1.5rem; line-height: 1;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.tm-close:hover { background: var(--ik-green); color: var(--ik-cream); transform: rotate(90deg); }

.tm-people { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 3.2rem 1.2rem 0; }
.tm-people:empty { display: none; }
.tm-person {
  display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .95rem .3rem .3rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ik-line); background: transparent; color: var(--ik-green-deep); font: 600 .82rem 'Montserrat', sans-serif; transition: background .25s ease, color .25s ease;
}
.tm-person img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.tm-person[aria-selected="true"] { background: var(--ik-green); color: var(--ik-cream); border-color: var(--ik-green); }

.tm-body { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(1.3rem, 3vw, 2.8rem); align-items: start; }
.tm-arch {
  position: relative; border-radius: 150px 150px 26px 26px; overflow: hidden; background: var(--ik-green-soft);
  box-shadow: 0 0 0 4px #fffdf6, 0 0 0 6px var(--ik-gold), 0 26px 50px rgba(34, 48, 27, .3);
}
.tm-arch img { width: 100%; height: auto; display: block; }
.tm-photo { position: sticky; top: 0; }
.tm-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font: 700 .72rem 'Montserrat', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ik-terra); }
.tm-kicker svg { width: 14px; height: 14px; fill: var(--ik-gold); }
.tm-text h3 { font-family: var(--ik-serif); font-weight: 600; font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.02; margin: .5rem 0 .2rem; color: var(--ik-green-deep); }
.tm-role { margin: 0; font-size: .9rem; color: var(--ik-muted); }
.tm-quote {
  position: relative; margin: 1.2rem 0 0; padding: .2rem 0 .2rem 1.3rem; border-left: 2px solid var(--ik-gold);
  font-family: var(--ik-serif); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--ik-ink);
}
.tm-quote p { margin: 0 0 .7rem; color: inherit; }
.tm-translation { margin: 1rem 0 0; padding: .85rem 1.1rem; border-radius: 16px; background: var(--ik-green-soft); font-size: .9rem; line-height: 1.65; color: var(--ik-muted); }
.tm-translation strong { display: block; margin-bottom: .25rem; font: 700 .66rem 'Montserrat', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ik-terra); }

.tm-changed { margin-top: 1.5rem; padding: 1.2rem 1.3rem 1.3rem; border-radius: 24px; background: linear-gradient(160deg, #eef2e1, #e5ebd5); border: 1px solid var(--ik-line); }
.tm-clabel { margin: 0 0 .9rem; font: 700 .7rem 'Montserrat', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ik-terra); }
.tm-changed-grid { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 1.3rem; align-items: center; }
.tm-sig { width: 148px; height: 148px; }
.tm-outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.tm-outcomes li { position: relative; padding-left: 1.6rem; font-size: .96rem; line-height: 1.45; color: var(--ik-ink); opacity: 0; transform: translateX(-10px); }
.tm-outcomes li::before { content: ''; position: absolute; left: 0; top: .32em; width: .85rem; height: .85rem; background: url('images/logo-mark-green.png') center / contain no-repeat; }
.tm-modal.is-open .tm-outcomes li { animation: ik-rise .6s ease forwards; animation-delay: calc(.9s + var(--n, 0) * .35s); }
.tm-fine { margin: 1rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--ik-muted); opacity: .85; }

@media (max-width: 800px) {
  .tm-body { grid-template-columns: 1fr; }
  .tm-photo { position: static; max-width: 270px; margin: 0 auto; }
  .tm-changed-grid { grid-template-columns: 1fr; justify-items: center; text-align: left; }
}

/* ---------- "what changed" signature animations ---------- */
.sg { width: 100%; height: 100%; display: block; overflow: visible; }
.sg * { fill: none; stroke: var(--ik-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sg .tk { stroke-opacity: .16; stroke-width: 9; }
.sg .go { stroke: var(--ik-gold); }
.sg .fg { fill: var(--ik-gold); fill-opacity: .3; stroke: var(--ik-gold); }
.sg .fl { fill: var(--ik-green); fill-opacity: .16; }
.sg-ring, .sg-fill { stroke: var(--ik-gold); stroke-width: 9; stroke-dasharray: 1; }
/* weight: needle swings down, gold arc follows */
.sg-fill { stroke-dashoffset: .82; }
.sg-needle { transform-origin: 80px 100px; transform: rotate(58deg); stroke-width: 4; }
.tm-modal.is-open .sg-needle { animation: sg-needle 2.6s cubic-bezier(.25, .75, .2, 1) .5s forwards; }
.tm-modal.is-open .sg-fill { animation: sg-fill 2.6s cubic-bezier(.25, .75, .2, 1) .5s forwards; }
@keyframes sg-needle { to { transform: rotate(-48deg); } }
@keyframes sg-fill { to { stroke-dashoffset: .23; } }
.sg-leafy { transform-origin: 80px 124px; }
.tm-modal.is-open .sg-leafy { animation: art-sway 3s ease-in-out infinite alternate; }
/* energy: ring fills, sun spins, sparks twinkle */
.sg-ring { stroke-dashoffset: 1; }
.tm-modal.is-open .sg-ring { animation: sg-ring 2.4s cubic-bezier(.3, .7, .2, 1) .5s forwards; }
@keyframes sg-ring { to { stroke-dashoffset: 0; } }
.sg-sun { transform-origin: 80px 80px; }
.tm-modal.is-open .sg-sun { animation: ik-spin 14s linear infinite; }
.sg .sp { fill: var(--ik-gold); stroke: none; transform-box: fill-box; transform-origin: center; }
.tm-modal.is-open .sg .sp { animation: sg-twinkle 1.8s ease-in-out infinite alternate; }
.sg .sp:nth-of-type(2) { animation-delay: .5s; } .sg .sp:nth-of-type(3) { animation-delay: 1s; }
@keyframes sg-twinkle { from { opacity: .2; transform: scale(.6); } to { opacity: 1; transform: scale(1.2); } }
/* cycle: the moon phases light up one after another, steadily */
.sg-ph { fill: var(--ik-gold); fill-opacity: .25; stroke: none; transform-box: fill-box; transform-origin: center; }
.tm-modal.is-open .sg-ph { animation: sg-ph 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * .3s); }
@keyframes sg-ph { 0% { fill-opacity: 1; transform: scale(1.7); } 18% { fill-opacity: .8; transform: scale(1.3); } 34%, 100% { fill-opacity: .25; transform: scale(1); } }
/* number: counts up inside a filling ring */
.sg-count { position: relative; width: 100%; height: 100%; }
.sg-count .sg-ring { stroke-dashoffset: 1; }
.tm-modal.is-open .sg-count .sg-ring { animation: sg-ring75 2.2s cubic-bezier(.3, .7, .2, 1) .5s forwards; }
@keyframes sg-ring75 { to { stroke-dashoffset: .22; } }
.sg-numwrap { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; font-family: var(--ik-serif); color: var(--ik-green-deep); }
.sg-num { font-size: 2.7rem; font-weight: 700; }
.sg-minus { font-size: 1.8rem; font-weight: 600; margin-right: .1rem; }
.sg-unit { display: block; margin-top: .2rem; font: 700 .7rem 'Montserrat', sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--ik-terra); }
.sg-numrow { display: flex; justify-content: center; align-items: baseline; }
/* growth: stem draws, leaves open, then little sprouts follow */
.sg .gr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tm-modal.is-open .sg .gr { animation: ik-draw 1.4s cubic-bezier(.4, .1, .2, 1) forwards; animation-delay: calc(.4s + var(--d, 0) * 1s); }
.sg .lf { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); }
.tm-modal.is-open .sg .lf { animation: sg-grow .9s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: calc(1s + var(--d, 0) * 1s); }
@keyframes sg-grow { to { transform: scale(1); } }
/* rest: stars twinkle, a feather floats up */
.sg-feather { transform-origin: 50% 100%; }
.tm-modal.is-open .sg-feather { animation: sg-float 6s ease-in-out infinite alternate; }
@keyframes sg-float { from { transform: translate(0, 14px) rotate(-8deg); } to { transform: translate(-6px, -10px) rotate(8deg); } }
.sg-moon { transform-origin: 80px 70px; }
.tm-modal.is-open .sg-moon { animation: art-breathe 5s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .tm-modal, .tm-card, .tm-bloom { transition: none; }
  .tm-modal.is-open .tm-bloom { animation: none; transform: translate(-50%, -50%) scale(1); opacity: .35; }
  .tm-pulse, .tm-hint-dot, .tm-bloom img { animation: none; }
  .sg-needle { transform: rotate(-48deg) !important; animation: none !important; }
  .sg-fill { stroke-dashoffset: .23 !important; animation: none !important; }
  .sg-ring { stroke-dashoffset: 0 !important; animation: none !important; }
  .sg-count .sg-ring { stroke-dashoffset: .22 !important; }
  .sg .gr { stroke-dashoffset: 0 !important; animation: none !important; }
  .sg .lf { transform: none !important; animation: none !important; }
  .sg-ph { fill-opacity: .6; animation: none !important; }
  .tm-outcomes li { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- map polish ---- */
.tm-dots-region path { stroke: rgba(247, 244, 232, .26); stroke-width: 1.05; }
.tm-dots-world path { stroke: rgba(247, 244, 232, .3); stroke-width: 3; }
.tm-label { padding: .18rem .55rem; border-radius: 999px; background: rgba(24, 36, 20, .78); text-shadow: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* dots keep the same on-screen size at every zoom level and screen size */
.tm-svg path { vector-effect: non-scaling-stroke; }
.tm-dots-world path  { stroke-width: 3.4px; stroke: rgba(247, 244, 232, .32); }
.tm-dots-region path { stroke-width: 6.5px; stroke: rgba(247, 244, 232, .3); }
@media (max-width: 700px) {
  .tm-dots-world path  { stroke-width: 2.2px; }
  .tm-dots-region path { stroke-width: 3.6px; stroke: rgba(247, 244, 232, .42); }
}


/* =====================================================================
   "Featured in The Times of India" — slim band (was a tall panel)
   ===================================================================== */
.quote-wrapper {
  margin: clamp(1rem, 2.5vw, 1.8rem) clamp(.75rem, 3vw, 2.5rem) 0;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 3vw, 2rem) clamp(1.1rem, 2vw, 1.5rem);
  gap: .8rem; border-radius: 28px;
}
.quote-title { font-size: clamp(1.05rem, 1.8vw, 1.45rem) !important; line-height: 1.25; max-width: 44rem; margin: 0 !important; }
.quote-container { flex-direction: row !important; align-items: center; gap: clamp(.8rem, 2vw, 1.4rem); max-width: 960px; }
.quote-preview { flex: 0 0 auto !important; width: clamp(84px, 11vw, 116px); }
.quote-preview img { height: clamp(84px, 11vw, 116px); object-fit: cover; object-position: top; border-radius: 16px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.quote-card { flex: 1 1 auto; padding: clamp(.85rem, 1.6vw, 1.15rem) clamp(1rem, 2vw, 1.5rem); border-radius: 20px; height: auto; margin: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.quote-card::before { display: none; }
.quote-card .profile { margin-bottom: .55rem; gap: .7rem; }
.quote-card .profile img { width: 34px; height: 34px; }
.quote-card .name { font-size: 1rem; }
.quote-card .handle { font-size: .78rem; }
.quote-text { font-size: clamp(.92rem, 1.3vw, 1.05rem); line-height: 1.5; margin-bottom: .45rem; }
.quote-date { font-size: .78rem; }
@media (max-width: 560px) {
  .quote-container { gap: .7rem; }
  .quote-preview { width: 70px; align-self: flex-start; }
  .quote-preview img { height: 70px; border-radius: 12px; }
  .quote-card { padding: .85rem 1rem; }
  .quote-text { font-size: .88rem; }
}
@media (max-width: 560px) {
  .quote-preview { display: none; }
  .quote-card .profile img { width: 32px !important; height: 32px !important; }
  .quote-card .name { font-size: .95rem; }
  .quote-text { font-size: .92rem !important; line-height: 1.5; }
  .quote-wrapper { padding: 1rem 1rem 1.1rem; }
}

/* ---- larger article preview ---- */
.quote-container { align-items: center; max-width: 1020px; }
.quote-preview { width: clamp(150px, 19vw, 210px); }
.quote-preview img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 18px; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); transition: transform .4s ease; }
.quote-container:hover .quote-preview img { transform: scale(1.03) rotate(-.6deg); }
@media (max-width: 560px) {
  .quote-container { flex-direction: column !important; align-items: stretch; gap: .8rem; }
  .quote-preview { display: block; width: 100%; }
  .quote-preview img { aspect-ratio: auto; height: 170px; border-radius: 16px; }
}


/* =====================================================================
   One consistent vertical rhythm between the home page sections
   (before: 90px / 141px / 64px / 141px depending on the pair)
   ===================================================================== */
:root { --sec-gap: clamp(2.2rem, 4.6vw, 3.6rem); }

.phases.services              { padding-top: var(--sec-gap); padding-bottom: var(--sec-gap); }
.testimonials                 { margin-top: 0; margin-bottom: 0; }
.dosha-section                { margin-top: var(--sec-gap); margin-bottom: 0; }
.focus-areas-section.focus-tabs { padding-top: var(--sec-gap); padding-bottom: var(--sec-gap); }
.founder-section              { padding-top: 0; }


/* =====================================================================
   Meet your doctor — doctor-first layout
   ===================================================================== */
.founder-section.doctor { padding-left: clamp(.75rem, 3vw, 2.5rem); padding-right: clamp(.75rem, 3vw, 2.5rem); }
.doc-card {
  position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 4.5vw, 4.5rem); align-items: start;
  max-width: 1180px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.4rem); border-radius: 40px; text-align: left;
  background: radial-gradient(640px 340px at 0% 0%, rgba(184, 151, 90, .16), transparent 62%), radial-gradient(520px 320px at 100% 100%, rgba(143, 166, 138, .22), transparent 62%), #fffdf6;
  border: 1px solid var(--ik-line); box-shadow: var(--ik-shadow-2);
}
.doc-card::before {                               /* brand-mark watermark behind the portrait */
  content: ''; position: absolute; left: -90px; top: 8%; width: 520px; height: 520px; pointer-events: none;
  background: url('images/logo-mark-green.png') center / contain no-repeat; opacity: .05;
}
.doc-portrait { position: sticky; top: calc(var(--header-height) + 24px); }
.doc-arch {
  position: relative; border-radius: 999px 999px 32px 32px; overflow: hidden; aspect-ratio: 4 / 5.1;
  box-shadow: 0 0 0 6px #fffdf6, 0 0 0 8px var(--ik-gold), 0 34px 60px rgba(34, 48, 27, .3); background: var(--ik-green-soft);
}
.doc-arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; transition: transform 1.2s ease; }
.doc-card:hover .doc-arch img { transform: scale(1.04); }
.doc-badge {
  position: absolute; z-index: 2; padding: .8rem 1.1rem; border-radius: 18px; line-height: 1.2;
  background: rgba(255, 253, 246, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--ik-line); box-shadow: 0 16px 34px rgba(34, 48, 27, .2); animation: doc-float 6s ease-in-out infinite alternate;
}
.doc-badge strong { display: block; font-family: var(--ik-serif); font-size: 1.7rem; font-weight: 700; color: var(--ik-green-deep); }
.doc-badge span { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ik-muted); }
.doc-badge-a { left: -26px; bottom: 16%; }
.doc-badge-b { right: -22px; top: 14%; animation-delay: -3s; }
@keyframes doc-float { from { transform: translateY(-5px); } to { transform: translateY(6px); } }

.doc-info .eyebrow { margin-bottom: .8rem; }
.doc-info h2 {
  font-family: var(--ik-serif); font-weight: 600; font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1.02; margin: 0 0 .7rem;
  color: var(--ik-green-deep); text-align: left; letter-spacing: -.01em;
}
.doc-info h2::after { display: none; }
.doc-info h2 em { display: block; font-size: .62em; font-weight: 500; margin-top: .1em; }
.doc-role {
  display: inline-block; margin: 0 0 1.6rem; padding: .4rem 1rem; border-radius: 999px; background: var(--ik-green-soft); color: var(--ik-green);
  font: 700 .74rem 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.doc-lead { font-family: var(--ik-serif); font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.45; font-weight: 500; color: var(--ik-green-deep); margin: 0 0 1.6rem; padding-left: 1.2rem; border-left: 3px solid var(--ik-gold); }

.doc-approach {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin: 0 0 1.8rem; padding: 1.1rem 1.3rem;
  border-radius: 22px; background: linear-gradient(160deg, #eef2e1, #e6ecd8); border: 1px solid var(--ik-line);
}
.doc-approach-label { margin: 0 0 .5rem; font: 700 .68rem 'Montserrat', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ik-terra); }
.doc-approach ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.doc-approach li { padding: .32rem .8rem; border-radius: 999px; background: #fffdf6; border: 1px solid var(--ik-line); font-size: .85rem; font-weight: 500; color: var(--ik-green-deep); }
.doc-plus { font-family: var(--ik-serif); font-size: 2rem; line-height: 1; color: var(--ik-gold); }

.doc-statements { display: grid; gap: 1.15rem; }
.doc-statements p { position: relative; margin: 0; padding-left: 1.5rem; font-size: 1.02rem; line-height: 1.8; color: var(--ik-muted); }
.doc-statements p::before { content: ''; position: absolute; left: 0; top: .5em; width: .85rem; height: .85rem; background: url('images/logo-mark-green.png') center / contain no-repeat; }
.doc-statements strong { display: block; font-family: var(--ik-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.25; color: var(--ik-green-deep); margin-bottom: .15rem; }
.doc-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.doc-cta .btn { gap: .55rem; }

@media (max-width: 920px) {
  .doc-card { grid-template-columns: 1fr; }
  .doc-portrait { position: relative; top: 0; max-width: 360px; width: 100%; margin: 0 auto; }
  .doc-badge-a { left: -8px; } .doc-badge-b { right: -8px; }
  .doc-info { text-align: left; }
}
@media (max-width: 560px) {
  .doc-approach { grid-template-columns: 1fr; text-align: left; }
  .doc-plus { display: none; }
  .doc-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .doc-badge { animation: none; } .doc-card:hover .doc-arch img { transform: none; } }
.doc-card { overflow: clip; }                      /* keeps the watermark inside the card; clip (unlike hidden) still allows the sticky portrait */
@media (max-width: 920px) { .doc-card::before { left: -60px; width: 380px; height: 380px; } }
@media (max-width: 920px) {
  .doc-portrait { display: flex; flex-wrap: wrap; gap: .7rem; }
  .doc-arch { width: 100%; }
  .doc-badge, .doc-badge-a, .doc-badge-b { position: static; flex: 1 1 0; animation: none; min-width: 0; padding: .7rem .9rem; text-align: center; }
  .doc-badge strong { font-size: 1.45rem; }
  .doc-badge span { font-size: .62rem; }
}

/* ---- badges: keep clear of the face (lower half of the portrait) ---- */
.doc-badge-a { left: -30px; bottom: 21%; top: auto; right: auto; }
.doc-badge-b { right: -28px; bottom: 7%; top: auto; left: auto; }

/* ---- highlighted key words (soft marker, text unchanged) ---- */
.doc-info mark.hl {
  color: inherit; font-weight: 600; padding: 0 .15em; margin: 0 -.05em; border-radius: 3px;
  background: linear-gradient(180deg, transparent 56%, rgba(232, 200, 120, .62) 56%, rgba(232, 200, 120, .62) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.doc-lead mark.hl { font-weight: 700; color: var(--ik-green-deep); }
.doc-statements p mark.hl { color: var(--ik-green-deep); }

/* ---- Ayurveda-first highlights: gold marker for Ayurvedic terms, quieter green underline for the rest ---- */
.doc-info mark.hl-ay {
  color: var(--ik-green-deep); font-weight: 700; padding: 0 .16em; margin: 0 -.05em; border-radius: 3px;
  background: linear-gradient(180deg, transparent 50%, rgba(232, 190, 96, .8) 50%, rgba(232, 190, 96, .8) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.doc-info mark.hl {
  color: var(--ik-green-deep); font-weight: 600; padding: 0 .12em; margin: 0 -.04em; border-radius: 3px;
  background: linear-gradient(180deg, transparent 80%, rgba(53, 80, 46, .28) 80%, rgba(53, 80, 46, .28) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.doc-approach .doc-terms { display: grid; gap: .35rem; }
.doc-approach .doc-terms li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; border-radius: 14px; padding: .4rem .85rem; }
.doc-approach .doc-terms b { font-family: var(--ik-serif); font-size: 1.15rem; font-weight: 700; color: var(--ik-green-deep); }
.doc-approach .doc-terms small { font-size: .74rem; letter-spacing: .04em; color: var(--ik-terra); text-transform: lowercase; }
.doc-approach-label span { font-family: 'Noto Sans Devanagari', 'Kohinoor Devanagari', system-ui, sans-serif; letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: .86rem; color: var(--ik-gold); }
.doc-badge span { max-width: 11rem; display: block; }

/* =====================================================================
   Therapeutic Focus Areas — photos instead of animated drawings
   ===================================================================== */
.focus-tabs .phase-panel { grid-template-columns: 1fr; align-items: start; gap: 0; }
.ft-photo {
  position: relative; width: 100%; aspect-ratio: 2.05 / 1; margin: 0 0 1.5rem; border-radius: 26px; overflow: hidden;
  background: var(--ik-green-soft); box-shadow: 0 0 0 3px #fffdf6, 0 0 0 4.5px var(--ik-gold), 0 20px 40px rgba(34, 48, 27, .22);
}
.ft-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.03); }
.ft-photo::after {                                   /* brand-green tint + soft vignette so every photo sits in the same palette */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(53, 80, 46, .10) 0%, rgba(34, 48, 27, 0) 40%, rgba(34, 48, 27, .38) 100%);
}
/* the small tab icons stay, but no longer loop */
.ft-icon *, .ft-tab.is-active .ft-icon * { animation: none !important; }
.ft-photo img { filter: saturate(.95) contrast(1.02); }
.ft-photo { aspect-ratio: 2.05 / 1; }


/* =====================================================================
   Vata · Pitta · Kapha — small living scenes (air · fire · earth & water)
   ===================================================================== */
.dosha-art {
  display: block; width: 104px; height: 104px; margin: 0 auto 1.1rem; border-radius: 50%; overflow: hidden; position: relative;
  box-shadow: 0 12px 26px rgba(34, 48, 27, .25), inset 0 0 0 3px rgba(255, 253, 246, .35);
}
.dosha-art svg { width: 100%; height: 100%; display: block; }
.da-vata   { background: linear-gradient(160deg, #35502e, #5a7d52); }
.da-pitta  { background: linear-gradient(160deg, #7c3a1e, #c9801f); }
.da-kapha  { background: linear-gradient(160deg, #314f49, #6f9a8a); }

/* VATA — air & space: wind streams drift, a leaf rides them, motes twinkle */
.da-vata .w { fill: none; stroke: #f7f4e8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 44 104; animation: da-flow 3.4s linear infinite; }
.da-vata .w2 { animation-duration: 4.2s; animation-delay: -1.2s; stroke-opacity: .85; }
.da-vata .w3 { animation-duration: 3.8s; animation-delay: -2.1s; stroke-opacity: .7; }
@keyframes da-flow { from { stroke-dashoffset: 148; } to { stroke-dashoffset: 0; } }
.da-vata .leaf { fill: #e3d2a6; stroke: none; transform-box: fill-box; transform-origin: center; animation: da-leaf 4.4s ease-in-out infinite alternate; }
@keyframes da-leaf { from { transform: translate(-16px, 8px) rotate(-26deg); } to { transform: translate(16px, -8px) rotate(30deg); } }
.da-vata .mote { fill: #f7f4e8; animation: da-twinkle 2.2s ease-in-out infinite alternate; }
.da-vata .m2 { animation-delay: -.6s; } .da-vata .m3 { animation-delay: -1.1s; } .da-vata .m4 { animation-delay: -1.7s; }
@keyframes da-twinkle { from { opacity: .15; } to { opacity: .95; } }

/* PITTA — fire & water: a flame flickers, embers rise, the glow breathes */
.da-pitta .glow { fill: #ffd98a; opacity: .28; transform-box: fill-box; transform-origin: center; animation: da-glow 2.6s ease-in-out infinite alternate; }
@keyframes da-glow { from { transform: scale(.88); opacity: .18; } to { transform: scale(1.12); opacity: .38; } }
.da-pitta .flame { transform-origin: 60px 106px; animation: da-flicker 1.7s ease-in-out infinite; }
@keyframes da-flicker { 0%, 100% { transform: scale(1, 1) rotate(0); } 25% { transform: scale(.95, 1.07) rotate(-2.5deg); } 55% { transform: scale(1.04, .95) rotate(2deg); } 80% { transform: scale(.98, 1.04) rotate(-1deg); } }
.da-pitta .f-out { fill: #ffe7b0; }
.da-pitta .f-in { fill: #e8892b; }
.da-pitta .ember { fill: #ffe7b0; animation: da-ember 2.8s ease-in infinite; }
.da-pitta .e2 { animation-delay: -.9s; } .da-pitta .e3 { animation-delay: -1.8s; }
@keyframes da-ember { 0% { transform: translateY(14px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }

/* KAPHA — earth & water: steady mountain, rolling waves, a drop and its ripple */
.da-kapha .hill { fill: rgba(247, 244, 232, .22); stroke: #f7f4e8; stroke-width: 2.4; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; animation: da-breathe 5s ease-in-out infinite alternate; }
@keyframes da-breathe { from { transform: scaleY(1); } to { transform: scaleY(1.04); } }
.da-kapha .snow { fill: #f7f4e8; }
.da-kapha .wv { fill: none; stroke: #f7f4e8; stroke-width: 3; stroke-linecap: round; animation: da-wave 4s linear infinite; }
.da-kapha .wv2 { animation-duration: 5.5s; animation-direction: reverse; stroke-opacity: .6; }
@keyframes da-wave { from { transform: translateX(0); } to { transform: translateX(40px); } }
.da-kapha .drop { fill: #e3f1ee; animation: da-drop 3s ease-in infinite; }
@keyframes da-drop { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 55% { transform: translateY(38px); opacity: 1; } 62%, 100% { transform: translateY(40px); opacity: 0; } }
.da-kapha .ripple { fill: none; stroke: #f7f4e8; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; opacity: 0; animation: da-ripple 3s ease-out infinite; }
@keyframes da-ripple { 0%, 52% { transform: scale(.3); opacity: 0; } 60% { opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }

.dosha-card:hover .dosha-art { transform: scale(1.06); transition: transform .4s ease; }
.dosha-art { transition: transform .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .dosha-art * { animation: none !important; }
  .da-vata .w { stroke-dasharray: none; }
}

/* ---- clients without a story card yet: quiet, non-clickable markers ---- */
.tm-reach { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.tm-reach.is-on { opacity: 1; }
.tm-rdot {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  border: 2px solid var(--ik-gold-soft); background: rgba(184, 151, 90, .28); animation: tm-breathe 3.4s ease-in-out infinite alternate;
}
.tm-reach:nth-child(odd) .tm-rdot { animation-delay: -1.2s; }
@keyframes tm-breathe { from { box-shadow: 0 0 0 0 rgba(227, 210, 166, .0); } to { box-shadow: 0 0 0 7px rgba(227, 210, 166, .22); } }
.tm-reach .tm-label { font-size: .58rem; letter-spacing: .12em; opacity: .9; background: rgba(24, 36, 20, .66); }
.tm-reach[data-side="right"] .tm-label { left: calc(50% + 11px); }
.tm-reach[data-side="left"] .tm-label { right: calc(50% + 11px); }

.tm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; margin: 1rem 0 0; font: 600 .7rem 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 244, 232, .8); }
.tm-leg { display: inline-flex; align-items: center; gap: .55rem; }
.tm-leg-pin { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, #f0d28c, var(--ik-gold)); border: 2px solid #fffdf6; box-shadow: 0 0 0 3px rgba(184, 151, 90, .35); }
.tm-leg-ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ik-gold-soft); background: rgba(184, 151, 90, .28); }
.tm-reach-note { max-width: 46rem; margin: 1rem auto 0; text-align: center; font-size: .95rem; line-height: 1.6; color: rgba(247, 244, 232, .78); }
.tm-reach-note strong { color: var(--ik-gold-soft); font-weight: 600; }
@media (max-width: 700px) { .tm-reach .tm-label { font-size: .52rem; padding: .12rem .4rem; } .tm-legend { font-size: .62rem; letter-spacing: .08em; } }
@media (prefers-reduced-motion: reduce) { .tm-rdot { animation: none; } }
.tm-reach[data-side="below"] .tm-label { top: calc(50% + 17px); left: 50%; transform: translateX(-50%); }


/* =====================================================================
   One system across every page: banner, content width, spacing
   ===================================================================== */
:root { --page-max: 1180px; --page-gutter: clamp(.75rem, 3vw, 2.5rem); }

/* ---- shared page banner (About · Program · Blog) ---- */
.page-banner {
  position: relative; overflow: hidden; text-align: center; color: var(--ik-cream);
  padding: clamp(3rem, 7vw, 5.2rem) 1.5rem clamp(3rem, 6vw, 4.4rem);
  background:
    radial-gradient(760px 420px at 84% 20%, rgba(184, 151, 90, .20), transparent 62%),
    linear-gradient(160deg, #2c3b24 0%, #22301b 100%);
}
.page-banner::before {
  content: ''; position: absolute; right: -8%; top: 50%; width: min(620px, 90vw); aspect-ratio: 1; transform: translateY(-50%);
  background: url('images/logo-mark-cream.png') center / contain no-repeat; opacity: .05; pointer-events: none;
}
.page-banner-inner { position: relative; max-width: 52rem; margin: 0 auto; }
.page-banner .eyebrow { color: var(--ik-gold-soft); margin-bottom: 1rem; }
.page-banner h1 {
  font-family: var(--ik-serif); font-weight: 500; color: var(--ik-cream); text-align: center; margin: 0 0 1.1rem;
  font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.01em;
}
.page-banner .page-lead { margin: 0 auto; max-width: 42rem; color: rgba(247, 244, 232, .82); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.75; }
.page-banner-cta { margin-top: 1.8rem; }
.page-banner-cta a { text-decoration: none; }
.page-banner .buttonDownload {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; cursor: pointer;
  padding: .85rem 1.9rem; border-radius: 999px; border: 0; background: var(--ik-cream); color: var(--ik-green-deep);
  font: 600 .95rem 'Montserrat', sans-serif; letter-spacing: .02em; box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
  transition: background .25s ease, transform .25s ease;
}
.page-banner .buttonDownload:hover { background: var(--ik-gold-soft); transform: translateY(-2px); }

/* ---- blog posts ---- */
.post-back {
  display: inline-block; margin: 0 0 1rem; padding: .45rem 1rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--ik-line); background: #fffdf6; color: var(--ik-green); font: 600 .74rem 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.post-back:hover { background: var(--ik-green); color: var(--ik-cream); }

/* ---- identical navigation bar on every page ---- */
.navbar .container { max-width: 1240px !important; width: 100% !important; margin: 0 auto !important; padding: 0 clamp(1rem, 3vw, 2rem) !important; }

/* ---- blog posts: normal page flow so the footer spans the full width like the other pages ---- */
body:has(> main.page) { display: block !important; padding: 0 !important; height: auto; }
html:has(main.page) { height: auto; }
main.page { width: 100%; max-width: calc(var(--page-max) + 40px); margin: 0 auto; padding: calc(var(--header-height) + clamp(1.4rem, 3vw, 2.4rem)) 20px clamp(2.2rem, 5vw, 3.6rem); }
main.page .big-card { max-width: 900px; }
.post-back { margin-left: max(0px, calc((100% - 900px) / 2)); }

/* ---- inner-page content blocks follow the home page pattern: same width, inset rounded panels, same gaps ---- */
.about-panel-width, .mustang-section, #samsung { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin-left: auto; margin-right: auto; }

/* About */
.our-story { padding-top: var(--sec-gap); padding-bottom: 0; }
.mustang-section { margin-top: var(--sec-gap); margin-bottom: 0; border-radius: clamp(28px, 4vw, 48px); padding: clamp(2.4rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem); }
.mustang-section h2 { margin-bottom: 2.2rem; }

/* Program */
.approach { padding-top: var(--sec-gap); padding-bottom: var(--sec-gap); }
.pillars-section { padding-top: 0; padding-bottom: var(--sec-gap); }
#samsung { background: var(--ik-cream-2); border-radius: clamp(28px, 4vw, 48px); margin-top: 0; margin-bottom: 0; padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1rem, 3vw, 2.4rem); }
#samsung .container { max-width: none; padding-left: 0; padding-right: 0; }

/* Blog list */
body > .container { max-width: calc(var(--page-max) + 2 * var(--page-gutter)) !important; width: 100%; margin: var(--sec-gap) auto 0 !important; padding-left: var(--page-gutter) !important; padding-right: var(--page-gutter) !important; padding-bottom: 0 !important; }
.page-banner { padding: clamp(2.6rem, 6vw, 4rem) 1.5rem clamp(2.6rem, 5vw, 3.6rem); }
.page-banner h1 { font-size: clamp(2.3rem, 4.7vw, 3.7rem); margin-bottom: .9rem; }
.page-banner .page-lead { font-size: clamp(.98rem, 1.35vw, 1.08rem); line-height: 1.7; max-width: 44rem; }
.page-banner-cta { margin-top: 1.4rem; }


/* =====================================================================
   Program page — Ayurvedic line icons + animated pillars
   ===================================================================== */
.page-banner + #samsung { margin-top: var(--sec-gap); }
.approach-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); }
.approach-head h2 { margin-bottom: .2rem; }

/* line icons (drawn in as they scroll into view) */
.ico { width: 100%; height: 100%; display: block; overflow: visible; }
.ico .dr { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ico .gl { stroke: var(--ik-gold); }
.ico .dash { stroke-width: 2; }
.ico .lf { fill: currentColor; fill-opacity: .14; }
.js-icons .ico .dr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-icons .ico .dr.lf { fill-opacity: 0; }
.js-icons .ico .dr.dash { stroke-dasharray: 1 7; stroke-dashoffset: 0; opacity: 0; }
.js-icons .in-view .ico .dr { animation: ik-draw 1.5s cubic-bezier(.4, .1, .2, 1) forwards; animation-delay: calc(var(--i) * .06s + .15s); }
.js-icons .in-view .ico .dr.lf { animation: ik-draw 1.5s cubic-bezier(.4, .1, .2, 1) forwards, ico-fill 1s ease forwards; animation-delay: calc(var(--i) * .06s + .15s), calc(var(--i) * .06s + .9s); }
.js-icons .in-view .ico .dr.dash { animation: ik-fade 1.2s ease .9s forwards; }
@keyframes ico-fill { to { fill-opacity: .2; } }
.in-view .ico .sw { animation: art-sway 4.5s ease-in-out 2.2s infinite alternate; }
.in-view .ico .br { animation: art-breathe 5s ease-in-out 2.4s infinite alternate; }

.plan-ico {
  display: block; width: 78px; height: 78px; margin: 0 auto .8rem; padding: 11px; border-radius: 50%; color: #fffdf6;
  background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3), 0 8px 18px rgba(0, 0, 0, .18);
}
.plan-ico .gl { stroke: var(--ik-gold-soft); }
.sec-ico { display: block; width: 88px; height: 88px; margin: 0 auto 1rem; color: var(--ik-green); }
.sec-ico-sm { width: 76px; height: 76px; }

/* Foundational Pillars of Care — numbered cards, gold line draws across, illustrations float */
.pillars-grid { counter-reset: pillar; }
.pillar-card { counter-increment: pillar; position: relative; overflow: hidden; }
.pillar-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 1;
  background: linear-gradient(90deg, var(--ik-gold), var(--ik-terra)); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.3, .7, .2, 1) .3s;
}
.pillar-card.is-visible::before, .pillar-card:hover::before { transform: scaleX(1); }
.pillar-card::after {
  content: '0' counter(pillar); position: absolute; top: .55rem; right: 1.2rem; z-index: 1; pointer-events: none;
  font-family: var(--ik-serif); font-weight: 600; font-size: 3.2rem; line-height: 1; color: var(--ik-gold-soft); opacity: 0; transform: translateY(8px);
  transition: opacity .8s ease .5s, transform .8s ease .5s;
}
.pillar-card.is-visible::after { opacity: .7; transform: none; }
.pillar-card img { animation: pillar-float 6.5s ease-in-out infinite alternate; }
.pillar-card:nth-child(2) img { animation-delay: -1.4s; } .pillar-card:nth-child(3) img { animation-delay: -2.8s; }
.pillar-card:nth-child(4) img { animation-delay: -4.2s; } .pillar-card:nth-child(5) img { animation-delay: -.7s; } .pillar-card:nth-child(6) img { animation-delay: -3.5s; }
@keyframes pillar-float { from { transform: translateY(-5px) rotate(-.7deg) scale(1); } to { transform: translateY(6px) rotate(.7deg) scale(1.02); } }
.pillar-card:hover img { animation-play-state: paused; }
.pillar-card h3 { transition: color .3s ease; }
.pillar-card:hover h3 { color: var(--ik-terra); }
@media (prefers-reduced-motion: reduce) {
  .pillar-card img, .in-view .ico .sw, .in-view .ico .br { animation: none !important; }
  .js-icons .ico .dr { stroke-dashoffset: 0 !important; animation: none !important; }
  .js-icons .ico .dr.lf { fill-opacity: .2 !important; }
  .js-icons .ico .dr.dash { opacity: 1 !important; }
}
.plan-ico { width: 88px; height: 88px; padding: 9px; }
.pillar-card::after {
  top: .9rem; right: .9rem; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.2rem; color: var(--ik-green-deep); background: rgba(255, 253, 246, .94); box-shadow: 0 6px 16px rgba(34, 48, 27, .28);
  transform: scale(.6);
}
.pillar-card.is-visible::after { opacity: 1; transform: scale(1); }


/* =====================================================================
   Flip cards — front: an animation that acts out the card · back: the image
   ===================================================================== */
.flip-card {
  perspective: 1500px; cursor: pointer; display: block; height: 100%; text-align: left; -webkit-tap-highlight-color: transparent;
  background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; overflow: visible !important;
}
.flip-card::before, .flip-card::after { display: none !important; }
.flip-card:focus-visible { outline: 3px solid var(--ik-gold); outline-offset: 5px; border-radius: 24px; }
.flip-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; position: relative; overflow: hidden; border-radius: 24px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.flip-front {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.8rem 1.5rem 3.2rem;
  background: #fffdf6; border: 1px solid var(--ik-line); box-shadow: var(--ik-shadow-1);
  transition: box-shadow .35s ease, border-color .35s ease;
}
.flip-card:hover .flip-front { box-shadow: var(--ik-shadow-2); border-color: var(--ik-gold-soft); }
.flip-front::before {                                   /* gold line draws across the top as the card appears */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--ik-gold), var(--ik-terra));
  transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.3, .7, .2, 1) .3s;
}
.flip-card.is-visible .flip-front::before, .flip-card:hover .flip-front::before { transform: scaleX(1); }
.flip-num {
  position: absolute; top: .9rem; right: .9rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--ik-green-soft); color: var(--ik-green-deep); font-family: var(--ik-serif); font-size: 1.1rem; font-weight: 700;
}
.flip-front h3 { font-family: var(--ik-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.15; margin: 0 0 .7rem; color: var(--ik-green-deep); transition: color .3s ease; }
.flip-card:hover .flip-front h3 { color: var(--ik-terra); }
.flip-front p { margin: 0; font-size: .94rem; line-height: 1.65; color: var(--ik-muted); }
.flip-hint { font: 700 .62rem 'Montserrat', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ik-terra); }
.flip-front .flip-hint { position: absolute; left: 0; right: 0; bottom: 1.05rem; text-align: center; }
.flip-front .flip-hint::before { content: '\21BB\00a0'; }

.flip-back { transform: rotateY(180deg); background: var(--ik-green-deep); box-shadow: var(--ik-shadow-2); }
.flip-back img { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; object-fit: cover; display: block; background: var(--ik-green-soft); animation: none !important; }
.flip-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: .8rem; padding: 3rem 1.2rem 1.05rem; color: var(--ik-cream); background: linear-gradient(180deg, rgba(34, 48, 27, 0), rgba(34, 48, 27, .9)); }
.flip-cap-title { font-family: var(--ik-serif); font-size: 1.3rem; font-weight: 600; line-height: 1.15; }
.flip-cap .flip-hint { color: var(--ik-gold-soft); white-space: nowrap; }

/* the animated disc on the front */
.fc-art { width: 128px; height: 128px; flex: none; margin: 0 auto 1.2rem; border-radius: 50%; background: radial-gradient(circle at 50% 34%, #fffdf6 0%, var(--ik-green-soft) 100%); box-shadow: inset 0 0 0 1px var(--ik-line); }
.fc { width: 100%; height: 100%; display: block; overflow: visible; }
.fc .s { fill: none; stroke: var(--ik-green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fc .g { stroke: var(--ik-gold); }
.fc .fl { fill: var(--ik-green); fill-opacity: .14; }
.fc .fg { fill: var(--ik-gold); fill-opacity: .3; }
.fc *, .fc { transform-box: fill-box; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
@keyframes fc-bob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes fc-breathe { from { transform: scale(.92); } to { transform: scale(1.07); } }
@keyframes fc-pulse { from { transform: scale(1); } to { transform: scale(1.6); } }

/* P1 Diagnostics: a scan sweeps a leaf while lab bars rise and fall */
.c-diag .bar { fill: var(--ik-gold); fill-opacity: .6; transform-origin: 50% 100%; animation: fc-bar 2.8s ease-in-out infinite alternate; }
.c-diag .b2 { animation-delay: -.8s; } .c-diag .b3 { animation-delay: -1.6s; }
@keyframes fc-bar { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.c-diag .scan { fill: var(--ik-terra); opacity: .85; animation: fc-scan 3.6s ease-in-out infinite alternate; }
@keyframes fc-scan { from { transform: translateX(0); } to { transform: translateX(92px); } }
/* P2 Nutrition: steam rises off a bowl, spices drift */
.c-nutri .st { stroke: var(--ik-gold); stroke-width: 2.2; animation: fc-steam 3.2s ease-in-out infinite; }
.c-nutri .st2 { animation-delay: -1.1s; } .c-nutri .st3 { animation-delay: -2.2s; }
@keyframes fc-steam { 0% { transform: translateY(10px); opacity: 0; } 30% { opacity: .95; } 100% { transform: translateY(-12px); opacity: 0; } }
.c-nutri .spice { fill: var(--ik-terra); animation: fc-bob 3.2s ease-in-out infinite alternate; }
.c-nutri .sp2 { animation-delay: -1s; } .c-nutri .sp3 { animation-delay: -2s; }
/* P3 Monitoring: a trend line draws upward, the latest reading pings */
.c-monitor .trend { stroke: var(--ik-green); stroke-width: 3.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fc-trend 4s ease-in-out infinite; }
@keyframes fc-trend { 0% { stroke-dashoffset: 1; } 55%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.c-monitor .dotp { fill: var(--ik-terra); animation: fc-dotp 4s ease-in-out infinite; }
@keyframes fc-dotp { 0%, 50% { opacity: 0; transform: scale(.3); } 62%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.c-monitor .ring { fill: none; stroke: var(--ik-gold); stroke-width: 2; transform-origin: center; animation: fc-ping 2.2s ease-out infinite; }
@keyframes fc-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
/* P4 Cycle phases: eight moon phases light up in turn around a lotus */
.c-cycle .ph { fill: var(--ik-gold); fill-opacity: .25; stroke: none; transform-origin: center; animation: fc-ph 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * .4s); }
@keyframes fc-ph { 0% { fill-opacity: 1; transform: scale(1.6); } 18% { fill-opacity: .8; transform: scale(1.3); } 36%, 100% { fill-opacity: .25; transform: scale(1); } }
.c-cycle .lot { transform-origin: 50% 100%; animation: fc-breathe 4s ease-in-out infinite alternate; }
/* P5 Autonomy: a ball climbs the steps and a sprout takes root at the top */
.c-steps .ball { fill: var(--ik-terra); animation: fc-climb 5.4s ease-in-out infinite; }
@keyframes fc-climb { 0%, 8% { transform: translate(0, 0); opacity: 1; } 18%, 30% { transform: translate(20px, -16px); } 40%, 52% { transform: translate(40px, -32px); } 62%, 90% { transform: translate(60px, -48px); opacity: 1; } 100% { transform: translate(60px, -48px); opacity: 0; } }
.c-steps .sprout { transform-origin: 50% 100%; animation: fc-sprout 5.4s ease-in-out infinite; }
@keyframes fc-sprout { 0%, 62% { transform: scale(0); } 74% { transform: scale(1.12); } 80%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
/* P6 Personalization: three dials each settle somewhere different */
.c-sliders .knob { fill: var(--ik-gold); stroke: #fffdf6; stroke-width: 2.5; animation: fc-slide 3.2s ease-in-out infinite alternate; }
.c-sliders .k1 { --a: -14px; --b: 38px; } .c-sliders .k2 { --a: -38px; --b: 22px; animation-duration: 4.1s; } .c-sliders .k3 { --a: -26px; --b: 36px; animation-duration: 2.7s; }
@keyframes fc-slide { from { transform: translateX(var(--a)); } to { transform: translateX(var(--b)); } }
.c-sliders .spk { fill: var(--ik-terra); animation: fc-bob 2s ease-in-out infinite alternate; }
/* A1 Integrative: two circles (Ayurveda + modern science) slide together and the overlap glows */
.c-merge .ml { animation: fc-ml 3.6s ease-in-out infinite alternate; } .c-merge .mr { animation: fc-mr 3.6s ease-in-out infinite alternate; }
@keyframes fc-ml { from { transform: translateX(-15px); } to { transform: translateX(0); } }
@keyframes fc-mr { from { transform: translateX(15px); } to { transform: translateX(0); } }
.c-merge .lens { fill: var(--ik-gold); fill-opacity: 0; animation: fc-lens 3.6s ease-in-out infinite alternate; }
@keyframes fc-lens { from { fill-opacity: 0; } to { fill-opacity: .55; } }
.c-merge .orb { transform-origin: center; animation: fc-spin 6s linear infinite; }
/* A2 Personalization: concentric rings turn at different speeds around one centre */
.c-print .rg { fill: none; stroke: var(--ik-green); stroke-width: 2.4; stroke-linecap: round; transform-origin: center; }
.c-print .r1 { stroke-dasharray: 46 30; animation: fc-spin 7s linear infinite; }
.c-print .r2 { stroke: var(--ik-gold); stroke-dasharray: 90 48; animation: fc-spin 9s linear infinite reverse; }
.c-print .r3 { stroke-dasharray: 120 80; animation: fc-spin 11s linear infinite; }
.c-print .r4 { stroke: var(--ik-gold); stroke-dasharray: 160 104; animation: fc-spin 13s linear infinite reverse; }
.c-print .core { fill: var(--ik-terra); transform-origin: center; animation: fc-pulse 2s ease-in-out infinite alternate; }
/* A3 Sustainable change: a sprout keeps growing while the seasons orbit */
.c-grow .sp { transform-origin: 50% 100%; animation: fc-grow 4.6s ease-in-out infinite; }
@keyframes fc-grow { 0% { transform: scale(.15); } 55%, 85% { transform: scale(1); } 100% { transform: scale(.15); } }
.c-grow .orbit { fill: none; stroke: var(--ik-gold); stroke-width: 2; stroke-dasharray: 2 7; transform-origin: center; animation: fc-spin 24s linear infinite; }
.c-grow .sun { fill: var(--ik-gold); transform-box: view-box; transform-origin: 60px 60px; animation: fc-spin 9s linear infinite; }
/* A4 Therapeutic nutrition: the scale tips, then finds balance */
.c-balance .beam { transform-box: view-box; transform-origin: 60px 54px; animation: fc-balance 5s ease-out infinite; }
@keyframes fc-balance { 0% { transform: rotate(14deg); } 22% { transform: rotate(-9deg); } 42% { transform: rotate(5deg); } 62%, 88% { transform: rotate(0); } 100% { transform: rotate(14deg); } }
.c-balance .piv { fill: var(--ik-terra); }
/* A5 Mind-body: slow breath rings spread from a still figure under the moon */
.c-calm .br { fill: none; stroke: var(--ik-gold); stroke-width: 1.8; transform-origin: center; opacity: 0; animation: fc-breath 4.4s ease-out infinite; }
.c-calm .b2 { animation-delay: 1.5s; } .c-calm .b3 { animation-delay: 3s; }
@keyframes fc-breath { 0% { transform: scale(.7); opacity: .85; } 100% { transform: scale(3.2); opacity: 0; } }
.c-calm .moon { fill: var(--ik-gold); fill-opacity: .4; stroke: var(--ik-gold); stroke-width: 1.6; transform-origin: center; animation: fc-breathe 5s ease-in-out infinite alternate; }
.c-calm .twk { fill: var(--ik-gold); animation: fc-twk 2s ease-in-out infinite alternate; } .c-calm .t2 { animation-delay: -1s; }
@keyframes fc-twk { from { opacity: .15; } to { opacity: 1; } }

/* layout: equal-height cards; the carousel on phones keeps working */
.pillars-grid { align-items: stretch; }
.features .feature.flip-card { height: auto; }
@media (max-width: 768px) { .features .feature.flip-card { flex: 0 0 100%; } }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .fc *, .fc { animation: none !important; }
  .c-monitor .trend { stroke-dashoffset: 0 !important; } .c-monitor .dotp { opacity: 1 !important; }
  .c-steps .sprout { transform: scale(1) !important; } .c-grow .sp { transform: scale(1) !important; }
}

/* ---- Our Approach: five cards fill the width, no empty cell (3 on top, 2 wider below) ---- */
@media (min-width: 1025px) {
  .approach .features { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6rem; max-width: var(--page-max); margin-left: auto; margin-right: auto; align-items: stretch; }
  .approach .features .feature:nth-child(-n+3) { grid-column: span 2; }
  .approach .features .feature:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .approach .features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
  .approach .features .feature:last-child { grid-column: 1 / -1; }
}
.approach .features .feature.flip-card { margin: 0; max-width: none; width: auto; }

/* the back image fills whatever height the front needs, so it never stretches the card */
.flip-back img { position: absolute !important; inset: 0; }
.flip-back { min-height: 100%; }
@media (min-width: 1025px) { .approach .features .feature:nth-child(n+4) .flip-front { padding-top: 1.5rem; } }


/* =====================================================================
   About + Blog use the very same card system as the Program page
   ===================================================================== */
/* identical grid on all three pages: 3 columns, same gap, same maximum width, same side gutters */
.pillars-section, .mustang-section, body > .container {
  width: 100%; max-width: calc(var(--page-max) + 2 * var(--page-gutter)); margin-left: auto; margin-right: auto;
  padding-left: var(--page-gutter); padding-right: var(--page-gutter);
}
.pillars-section, .mustang-section { background: none; border-radius: 0; padding-top: var(--sec-gap); padding-bottom: var(--sec-gap); }
.pillars-grid, .camaro-grid, body > .container {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem !important; align-items: stretch;
}
.pillars-grid, .camaro-grid { max-width: none; width: 100%; margin: 0 auto; }
body > .container { margin-top: 0 !important; padding-top: var(--sec-gap); padding-bottom: var(--sec-gap) !important; }
@media (max-width: 1024px) { .pillars-grid, .camaro-grid, body > .container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pillars-grid, .camaro-grid, body > .container { grid-template-columns: minmax(0, 1fr); } }
.mustang-section .sec-ico { margin-bottom: 1rem; }
.supra-highlight { padding-top: 0; }

/* long-text cards (About) */
.flip-text { font-size: .94rem; line-height: 1.65; color: var(--ik-muted); text-align: center; }
.flip-text p { margin: 0 0 .6rem; font-size: inherit; color: inherit; }
.flip-text ul { margin: .4rem 0 0; padding: 0; list-style: none; text-align: left; display: grid; gap: .55rem; }
.flip-text li { position: relative; padding-left: 1.2rem; }
.flip-text li::before { content: ''; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; background: url('images/logo-mark-green.png') center / contain no-repeat; }
.flip-text strong { color: var(--ik-green-deep); }

/* blog cards */
.blog-card { height: 100%; }
.flip-cat { margin: 0 0 .5rem; padding: .28rem .8rem; border-radius: 999px; background: var(--ik-green-soft); color: var(--ik-green); font: 700 .66rem 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.blog-card .flip-front h3 { font-size: 1.45rem; }
.flip-cap-col { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.flip-cap-row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: .8rem; }
.flip-read {
  display: inline-block; padding: .5rem 1.1rem; border-radius: 999px; text-decoration: none; background: var(--ik-cream); color: var(--ik-green-deep);
  font: 700 .74rem 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; transition: background .25s ease, transform .25s ease;
}
.flip-read:hover, .flip-read:focus-visible { background: var(--ik-gold-soft); transform: translateY(-2px); }

/* ---------- ABOUT — animations that match each card ---------- */
.c-root .rt { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fc-roots 4.2s ease-in-out infinite; }
.c-root .r2 { animation-delay: .25s; } .c-root .r3 { animation-delay: .5s; } .c-root .r4 { animation-delay: .8s; }
@keyframes fc-roots { 0% { stroke-dashoffset: 1; } 50%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.c-root .pulse { fill: var(--ik-terra); animation: fc-rootpulse 4.2s ease-in-out infinite; }
@keyframes fc-rootpulse { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 60% { transform: translate(-8px, 40px); opacity: 1; } 75%, 100% { transform: translate(-8px, 40px); opacity: 0; } }

.c-phases .prog { stroke: var(--ik-gold); stroke-width: 4.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fc-prog 5.4s ease-in-out infinite; }
@keyframes fc-prog { 0% { stroke-dashoffset: 1; } 70%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.c-phases .nd { fill: #fffdf6; stroke: var(--ik-green); stroke-width: 2.6; animation: fc-nd 5.4s ease-in-out infinite; transform-origin: center; }
.c-phases .n2 { animation-delay: 1.7s; } .c-phases .n3 { animation-delay: 3.4s; }
@keyframes fc-nd { 0%, 12% { fill: #fffdf6; transform: scale(1); } 20%, 60% { fill: var(--ik-gold); transform: scale(1.18); } 80%, 100% { fill: #fffdf6; transform: scale(1); } }

.c-prakriti .orb3 { transform-box: view-box; transform-origin: 60px 60px; animation: fc-spin 14s linear infinite; }
.c-prakriti .c3 { fill-opacity: .32; stroke-width: 2.4; }
.c-prakriti .cv { fill: var(--ik-green); stroke: var(--ik-green); } .c-prakriti .cp { fill: var(--ik-terra); stroke: var(--ik-terra); } .c-prakriti .ck { fill: var(--ik-gold); stroke: var(--ik-gold); }
.c-prakriti .core { fill: var(--ik-gold); transform-origin: center; animation: fc-pulse 2s ease-in-out infinite alternate; }

.c-women .lotus { transform-origin: 50% 100%; animation: fc-bloom 4.6s ease-in-out infinite alternate; }
@keyframes fc-bloom { from { transform: scale(.82); } to { transform: scale(1.06); } }
.c-women .dr { fill: var(--ik-gold); animation: fc-drop 3.4s ease-in infinite; }
@keyframes fc-drop { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 60% { transform: translateY(58px); opacity: 1; } 68%, 100% { transform: translateY(62px); opacity: 0; } }
.c-women .rip { fill: none; stroke: var(--ik-gold); stroke-width: 1.8; transform-origin: center; opacity: 0; animation: fc-rip 3.4s ease-out infinite; }
@keyframes fc-rip { 0%, 58% { transform: scale(.3); opacity: 0; } 66% { opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.c-women .moon, .c-herb .moon { fill: var(--ik-gold); fill-opacity: .4; stroke: var(--ik-gold); stroke-width: 1.6; transform-origin: center; animation: fc-breathe 5s ease-in-out infinite alternate; }

.c-system .gear { fill: none; stroke: var(--ik-green); stroke-width: 6; transform-origin: center; }
.c-system .ga { stroke-dasharray: 6.28 6.28; animation: fc-spin 12s linear infinite; }
.c-system .gb { stroke: var(--ik-gold); stroke-dasharray: 5.5 5.5; animation: fc-spin 8.4s linear infinite reverse; }
.c-system .gcore { fill: var(--ik-terra); }

.c-support .bb { transform-origin: center; animation: fc-pop 5.6s ease-in-out infinite; }
.c-support .b2 { animation-delay: 1.4s; }
@keyframes fc-pop { 0%, 4% { transform: scale(0); opacity: 0; } 14%, 80% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(1); opacity: 0; } }
.c-support .td { fill: var(--ik-terra); animation: fc-bounce 1s ease-in-out infinite alternate; }
.c-support .d2 { animation-delay: .2s; } .c-support .d3 { animation-delay: .4s; }
@keyframes fc-bounce { from { transform: translateY(2px); opacity: .4; } to { transform: translateY(-3px); opacity: 1; } }
.c-support .hand { transform-box: view-box; transform-origin: 98px 22px; animation: fc-spin 6s linear infinite; }

/* ---------- BLOG — animations that match each article ---------- */
.c-plate .pr { fill: none; stroke: var(--ik-gold); stroke-width: 2; stroke-dasharray: 2 7; transform-origin: center; animation: fc-spin 24s linear infinite; }
.c-plate .leafb { transform-origin: 50% 100%; animation: fc-bob 3s ease-in-out infinite alternate; }
.c-herb .hl { transform-origin: 0 100%; animation: fc-leafin 4.4s ease-in-out infinite; }
.c-herb .h2 { animation-delay: .15s; } .c-herb .h3 { animation-delay: .6s; } .c-herb .h4 { animation-delay: .75s; } .c-herb .h5 { animation-delay: 1.2s; } .c-herb .h6 { animation-delay: 1.35s; }
@keyframes fc-leafin { 0% { transform: scale(0); } 25%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
.c-atom .at { transform-origin: center; animation: fc-spin 16s linear infinite; }
.c-atom .nuc { fill: var(--ik-terra); transform-origin: center; animation: fc-pulse 1.8s ease-in-out infinite alternate; }
.c-pie .sg { fill: var(--ik-green); fill-opacity: .14; stroke: var(--ik-green); stroke-width: 2.4; stroke-linejoin: round; transform-origin: 60px 60px; animation: fc-seg 4s ease-in-out infinite; }
.c-pie .sg2 { animation-delay: 1s; } .c-pie .sg3 { animation-delay: 2s; } .c-pie .sg4 { animation-delay: 3s; }
@keyframes fc-seg { 0%, 4% { fill: var(--ik-gold); fill-opacity: .6; transform: scale(1.1); } 22%, 100% { fill: var(--ik-green); fill-opacity: .14; transform: scale(1); } }
.c-pie .hub { fill: #fffdf6; stroke: var(--ik-gold); stroke-width: 2; }
.c-mark .mk { transform-origin: center; animation: fc-breathe 4.6s ease-in-out infinite alternate; }
.c-mark .orbit2 { fill: none; stroke: var(--ik-gold); stroke-width: 2; stroke-dasharray: 2 7; transform-origin: center; animation: fc-spin 26s linear infinite; }
.c-mark .core2 { fill: var(--ik-terra); transform-origin: center; animation: fc-pulse 2s ease-in-out infinite alternate; }
.c-symph .wv { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 8; animation: fc-wave 2.4s linear infinite; }
.c-symph .w1 { stroke: var(--ik-green); } .c-symph .w2 { stroke: var(--ik-gold); animation-delay: -1.2s; }
@keyframes fc-wave { to { stroke-dashoffset: -40; } }
.c-plate .twk, .c-herb .twk, .c-atom .twk { fill: var(--ik-gold); animation: fc-twk 2s ease-in-out infinite alternate; }
.c-plate .t2, .c-herb .t2, .c-atom .t2 { animation-delay: -.7s; } .c-plate .t3, .c-atom .t3 { animation-delay: -1.3s; } .c-atom .t4 { animation-delay: -1.8s; }
@media (prefers-reduced-motion: reduce) {
  .c-root .rt, .c-phases .prog { stroke-dashoffset: 0 !important; } .c-support .bb { opacity: 1 !important; transform: none !important; } .c-herb .hl { transform: none !important; }
}

/* shapes with a manual rotate(...) attribute keep the normal SVG reference box; discs clip anything that strays */
.fc [transform] { transform-box: view-box; transform-origin: 0 0; }
.fc-art { overflow: hidden; }
.flip-cat { padding: .24rem .75rem; font-size: .6rem; letter-spacing: .09em; }

/* every row the same height; the shorter pages match Program's card height */
.pillars-grid, .camaro-grid, body > .container { grid-auto-rows: 1fr; }
.pillars-grid .flip-card, .camaro-grid .flip-card, .blog-card { min-height: 420px; }
.camaro-grid .flip-front { padding: 1.5rem 1.3rem 3rem; }
.camaro-grid .fc-art { width: 104px; height: 104px; margin-bottom: .9rem; }
.camaro-grid .flip-front h3 { font-size: 1.38rem; margin-bottom: .55rem; }
.camaro-grid .flip-text { font-size: .875rem; line-height: 1.55; }
.camaro-grid .flip-text ul { gap: .4rem; margin-top: .3rem; }

/* ---- country flags (hero + footer) ---- */
.flag-row { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem .8rem; margin: .8rem 0 0; padding: 0; }
.flag-row li { display: inline-flex; align-items: center; gap: .4rem; animation: flBob 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.42s); }
.fl { position: relative; display: block; width: 26px; height: 17.5px; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.18); transform-origin: left center; animation: flWave 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
.fl svg { display: block; width: 100%; height: 100%; }
.fl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateX(-120%); animation: flSheen 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
.fl-name { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,244,232,.82); }
.flags-hero { margin-top: .8rem; gap: .55rem .7rem; }
.flags-foot { margin-top: .8rem; gap: .5rem .55rem; }
.flags-hero .fl-name, .flags-foot .fl-name { display: none; }
@keyframes flBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes flWave { 0%,100% { transform: perspective(160px) rotateY(0deg) skewY(0deg); } 35% { transform: perspective(160px) rotateY(-14deg) skewY(2.5deg); } 70% { transform: perspective(160px) rotateY(10deg) skewY(-2deg); } }
@keyframes flSheen { 0%,55% { transform: translateX(-120%); } 85%,100% { transform: translateX(120%); } }
@media (max-width: 900px) { .flags-hero { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .flag-row li, .fl, .fl::after { animation: none; } }

/* ---- Times of India band: tidy mobile layout ---- */
.quote-title { text-wrap: balance; }
.quote-title .qt-b { white-space: nowrap; }
@media (max-width: 560px) {
  .quote-container { display: flex !important; flex-direction: column !important; align-items: center; gap: 1rem; }
  .quote-preview { display: block !important; width: min(240px, 68%) !important; align-self: center; flex: 0 0 auto !important; }
  .quote-preview img { width: 100% !important; height: auto !important; aspect-ratio: 1167 / 1440; object-fit: cover; object-position: top; border-radius: 14px; }
  .quote-card { width: 100%; box-sizing: border-box; }
  .quote-title { font-size: 1.25rem !important; padding: 0 .25rem; }
}

/* ---- Instagram preview band ---- */
.ig-band { padding: clamp(1.6rem, 4vw, 2.6rem) var(--page-gutter) 0; }
.ig-card { max-width: 820px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap;
  padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1.1rem, 3vw, 2rem); border-radius: 26px; background: var(--ik-cream-2, #efeadb);
  border: 1px solid rgba(184, 151, 90, .35); box-shadow: 0 14px 34px rgba(34, 48, 27, .1); }
.ig-profile { display: flex; align-items: center; gap: 1.1rem; text-decoration: none; color: inherit; min-width: 0; }
.ig-ring { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; padding: 3px; display: block;
  background: conic-gradient(from 0deg, var(--ik-gold), var(--ik-green), var(--ik-gold-soft), var(--ik-gold)); animation: igSpin 9s linear infinite; }
.ig-ring img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--ik-cream, #f7f4e8); box-sizing: border-box; animation: igSpin 9s linear infinite reverse; }
.ig-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ig-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ik-terra); }
.ig-handle { font-family: var(--ik-serif); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; color: var(--ik-green-deep); line-height: 1.1; }
.ig-sub { font-size: .82rem; color: var(--ik-muted, #5c6652); line-height: 1.4; }
.ig-follow { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; background: var(--ik-green); color: var(--ik-cream) !important; border: 0; border-radius: 999px; padding: .85rem 1.5rem; font-weight: 600; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.ig-follow:hover, .ig-follow:focus-visible { background: var(--ik-green-deep); transform: translateY(-2px); }
@keyframes igSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .ig-card { justify-content: center; text-align: center; } .ig-profile { flex-direction: column; } .ig-meta { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .ig-ring, .ig-ring img { animation: none; } }

/* ---- Socials page ---- */
.socials-page { max-width: calc(var(--page-max) + 2 * var(--page-gutter)); margin: 0 auto; padding: var(--sec-gap) var(--page-gutter) calc(var(--sec-gap) * 1.2); }
.soc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.soc-card { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1.5rem 1.4rem; border-radius: 22px; text-decoration: none; color: var(--ik-green-deep);
  background: var(--ik-cream-2, #efeadb); border: 1px solid rgba(184, 151, 90, .35); box-shadow: 0 10px 26px rgba(34, 48, 27, .08); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; min-width: 0; flex: 1 1 230px; max-width: 360px; box-sizing: border-box; }
.soc-card:hover, .soc-card:focus-visible { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(34, 48, 27, .16); background: #fff; }
.soc-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ik-green); color: var(--ik-cream); font-size: 1.3rem; margin-bottom: .5rem; transition: transform .35s ease; }
.soc-card:hover .soc-ico { transform: rotate(-8deg) scale(1.08); }
.soc-name { font-family: var(--ik-serif); font-size: 1.55rem; font-weight: 600; line-height: 1.1; }
.soc-handle { font-size: .88rem; color: var(--ik-muted, #5c6652); overflow-wrap: anywhere; }
.soc-cta { margin-top: auto; padding-top: .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ik-terra); }
.soc-cta i { transition: transform .25s ease; }
.soc-card:hover .soc-cta i { transform: translateX(4px); }
.soc-insta { margin-top: calc(var(--sec-gap) * .9); text-align: center; }
.soc-insta-head h2 { font-family: var(--ik-serif); font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--ik-green-deep); margin: .2rem 0 .4rem; }
.soc-insta-head p:last-child { color: var(--ik-muted, #5c6652); margin: 0 0 1.4rem; }
.soc-insta-frame { max-width: 540px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(184, 151, 90, .35); box-shadow: 0 18px 44px rgba(34, 48, 27, .14); }
.soc-insta-frame { aspect-ratio: 540 / 592; }
.soc-insta-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.soc-insta-open { margin: 1.4rem 0 0; }
.soc-insta-frame { position: relative; }
.soc-insta-frame::before { content: "Loading Instagram…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ik-muted, #5c6652); font-size: .9rem; letter-spacing: .08em; }
.soc-insta-frame iframe { position: relative; }

/* ---- story card: extra photos / readings ---- */
.tm-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0 0; }
.tm-gallery figure { margin: 0; }
.tm-gallery img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(184, 151, 90, .35); }
.tm-gallery figcaption { margin-top: .35rem; font-size: .74rem; color: var(--ik-muted, #5c6652); letter-spacing: .03em; }
@media (max-width: 520px) { .tm-gallery { grid-template-columns: 1fr; } }
.tm-gallery figure:only-child { grid-column: 1 / -1; max-width: 420px; }
.tm-photo-extra { margin: .9rem 0 0; }
.tm-photo-extra img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(184, 151, 90, .45); box-shadow: 0 10px 24px rgba(34, 48, 27, .15); }
/* equal framed photos (Tiji): same square frame, same ring */
.tm-arch--frame { border-radius: 22px; background: #c0c0da; }
.tm-photo-extra a { display: block; border-radius: 22px; overflow: hidden; background: #c0c0da; box-shadow: 0 0 0 4px #fffdf6, 0 0 0 6px var(--ik-gold), 0 26px 50px rgba(34, 48, 27, .3); }
.tm-photo-extra { margin-top: 1.5rem; }
.tm-photo-extra img { border: 0; border-radius: 0; box-shadow: none; }
/* two photos side by side (Tiji) */
.tm-body--pair { grid-template-columns: 1fr; }
.tm-body--pair .tm-photo { position: static; width: 100%; max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.7rem, 1.6vw, 1.1rem); align-items: start; }
.tm-body--pair .tm-photo-extra { margin-top: 0; }
@media (max-width: 860px) { .tm-body--pair { grid-template-columns: 1fr; } .tm-body--pair .tm-photo { position: static; max-width: 520px; width: 100%; margin: 0 auto; } }
/* centre the readings image under the feedback */
.tm-gallery figure:only-child { margin-left: auto; margin-right: auto; text-align: center; width: 100%; }
.tm-gallery figure:only-child img { margin: 0 auto; }
/* single framed photo */
.tm-body--solo .tm-photo { grid-template-columns: minmax(0, 1fr); max-width: 380px; }

/* keep the inner outline fixed to the card: only the story body scrolls */
.tm-card { display: flex; flex-direction: column; overflow: hidden; }
.tm-card .tm-people, .tm-card .tm-close { flex: 0 0 auto; }
.tm-card .tm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: .3rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(184, 151, 90, .6) transparent; }
@media (max-width: 640px) {
  .tm-card .tm-people { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .tm-card .tm-people .tm-person { flex: 0 0 auto; }
}
.tm-card .tm-scroll { padding-top: 12px; padding-left: 10px; padding-bottom: 4px; }

/* ---- hero: small world map (replaces the long countries line) ---- */
.hero-map { display: block; margin: 1.4rem 0 0; max-width: 34rem; padding: .9rem 1.1rem 1rem; border-radius: 20px; text-decoration: none; color: var(--ik-cream);
  background: rgba(247, 244, 232, .07); border: 1px solid rgba(227, 210, 166, .28); transition: background .25s ease, transform .25s ease, border-color .25s ease; }
.hero-map:hover, .hero-map:focus-visible { background: rgba(247, 244, 232, .12); border-color: rgba(227, 210, 166, .6); transform: translateY(-2px); }
.hm-head { display: flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ik-gold-soft); }
.hm-svg { display: none; width: 100%; height: auto; margin: .5rem 0 .2rem; }
.hero-map.is-ready .hm-svg { display: block; }
.hm-svg path { fill: none; stroke: rgba(247, 244, 232, .34); stroke-width: 3.6; stroke-linecap: round; }
.hm-live { fill: var(--ik-gold-soft); stroke: #fff6d8 !important; stroke-width: 1.5 !important; }
.hm-quiet { fill: rgba(247, 244, 232, .75); }
.hm-pulse { fill: none; stroke: var(--ik-gold-soft) !important; stroke-width: 2 !important; transform-box: fill-box; transform-origin: center; animation: hmPulse 2.4s ease-out infinite; }
.hm-svg circle:nth-of-type(3n) { animation-delay: .8s; }
@keyframes hmPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }
.hm-foot { display: block; margin: .2rem 0 .1rem; font-size: .68rem; letter-spacing: .06em; line-height: 1.5; color: rgba(247, 244, 232, .72); }
.flags-map { margin: .55rem 0 0; }
.hm-cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ik-gold-soft); }
.hm-cta i { animation: hmBounce 1.8s ease-in-out infinite; }
@keyframes hmBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (max-width: 900px) { .hero-map { margin-left: auto; margin-right: auto; text-align: center; } .hm-head, .hm-cta { justify-content: center; } .flags-map { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .hm-pulse, .hm-cta i { animation: none; } }
.hero-map { max-width: 29rem; padding: .75rem 1rem .85rem; margin-top: 1.1rem; }
.hm-svg { margin: .3rem 0 0; }
.hm-cta { margin-top: .45rem; }
.hero-map { margin: 1.2rem 0 0; }
.hero-map + .hero-buttons { margin-top: 1.3rem; }
/* hero map card: centred in the left column */
.hero-map { margin-left: auto; margin-right: auto; max-width: 31rem; text-align: center; }
.hm-head, .hm-cta { justify-content: center; }
.flags-map { justify-content: center; }
.hm-foot { text-align: center; }

/* =====================================================================
   Story-card animations, one per person (see SIG in tales.js)
   ===================================================================== */
.sg .tx { fill: var(--ik-gold); stroke: none; font: 700 26px 'Cormorant Garamond', serif; }
.sg .s2d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tm-modal.is-open .sg .s2d { animation: ik-draw 1.2s cubic-bezier(.4, .1, .2, 1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.sg .s2p { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.tm-modal.is-open .sg .s2p { animation: s2-pop .7s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.sg .s2f { opacity: 0; }
.tm-modal.is-open .sg .s2f { animation: s2-in .5s ease forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes s2-pop { to { transform: scale(1); } }
@keyframes s2-in { to { opacity: 1; } }
@keyframes s2-out { to { opacity: 0; } }

/* heartbeat settles */
.tm-modal.is-open .sg .hb-wild { animation: ik-draw 1.3s linear forwards .3s, s2-out .5s ease forwards 1.9s; }
.sg .hb-heart { transform-box: fill-box; transform-origin: center; }
.tm-modal.is-open .sg .hb-heart { animation: s2-beat 1.7s ease-in-out infinite 2.2s; }
@keyframes s2-beat { 0%, 100% { transform: scale(1); } 28% { transform: scale(1.16); } 44% { transform: scale(.96); } }
/* capsule set aside */
.tm-modal.is-open .sg .pl-cap { animation: s2-dim 1.2s ease forwards 1.2s; }
@keyframes s2-dim { to { opacity: .28; } }
/* lotus */
.sg .lo-p { transform-origin: 50% 100%; }
/* applause around the plate */
/* questions become amazement */
.sg .am-q, .sg .am-e { opacity: 0; }
.tm-modal.is-open .sg .am-q { animation: s2-q 4.6s ease-in-out infinite 1.4s; }
.tm-modal.is-open .sg .am-e { animation: s2-e 4.6s ease-in-out infinite 1.4s; }
@keyframes s2-q { 0%, 38% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes s2-e { 0%, 42% { opacity: 0; } 54%, 88% { opacity: 1; } 100% { opacity: 0; } }
/* two places, one pulse */
.sg .br-ring { stroke: var(--ik-gold); transform-box: fill-box; transform-origin: center; opacity: 0; }
.tm-modal.is-open .sg .br-ring { animation: s2-ring 2.4s ease-out infinite; }
@keyframes s2-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
/* clock hand */
.sg .ck-hand { transform-origin: 80px 80px; }
.tm-modal.is-open .sg .ck-hand { animation: ik-spin 7s linear infinite; }
/* yo-yo settles */
.sg .yo-toy { transform-origin: center; }
.tm-modal.is-open .sg .yo-toy { animation: s2-yo 4.4s ease-in-out forwards .3s; }
.sg .yo-str { transform-origin: 80px 16px; transform: scaleY(.44); stroke: var(--ik-green); }
.tm-modal.is-open .sg .yo-str { animation: s2-yostr 4.4s ease-in-out forwards .3s; }
@keyframes s2-yo { 0% { transform: translateY(0); } 15% { transform: translateY(48px); } 30% { transform: translateY(12px); } 45% { transform: translateY(40px); } 60% { transform: translateY(20px); } 75% { transform: translateY(32px); } 100% { transform: translateY(28px); } }
@keyframes s2-yostr { 0% { transform: scaleY(.44); } 15% { transform: scaleY(.92); } 30% { transform: scaleY(.56); } 45% { transform: scaleY(.84); } 60% { transform: scaleY(.64); } 75% { transform: scaleY(.76); } 100% { transform: scaleY(.72); } }
/* cycle finds its rhythm */
.sg .cy-d { transform-origin: 80px 80px; transform: rotate(var(--j)); }
.tm-modal.is-open .sg .cy-d { animation: s2-cy 2.6s cubic-bezier(.3, .8, .2, 1) forwards .5s; }
@keyframes s2-cy { to { transform: rotate(0deg); } }
.sg .cy-drop { transform-origin: 50% 70%; }
/* sun over the climb */
.sg .st-sun { transform-origin: 126px 36px; }
.tm-modal.is-open .sg .st-sun { animation: ik-spin 16s linear infinite; }
/* scale levels out */
.sg .ba-beam { transform-origin: 80px 50px; transform: rotate(-16deg); }
.sg .ba-l { transform: translateY(12.7px); }
.sg .ba-r { transform: translateY(-12.7px); }
.tm-modal.is-open .sg .ba-beam { animation: s2-beam 2.4s cubic-bezier(.3, 1.3, .5, 1) forwards .5s; }
.tm-modal.is-open .sg .ba-l { animation: s2-pl 2.4s cubic-bezier(.3, 1.3, .5, 1) forwards .5s; }
.tm-modal.is-open .sg .ba-r { animation: s2-pr 2.4s cubic-bezier(.3, 1.3, .5, 1) forwards .5s; }
@keyframes s2-beam { to { transform: rotate(0deg); } }
@keyframes s2-pl { to { transform: translateY(0); } }
@keyframes s2-pr { to { transform: translateY(0); } }
/* the loop carries on */
.sg .lp-run { stroke-width: 7; stroke-dasharray: .22 .78; stroke-dashoffset: 0; }
.tm-modal.is-open .sg .lp-run { animation: s2-run 4.2s linear infinite; }
@keyframes s2-run { to { stroke-dashoffset: -1; } }

@media (prefers-reduced-motion: reduce) {
  .sg .s2d { stroke-dashoffset: 0 !important; animation: none !important; }
  .sg .s2p { transform: none !important; animation: none !important; }
  .sg .s2f { opacity: 1 !important; animation: none !important; }
  .sg .hb-wild { display: none; }
  .sg .am-q { opacity: 0; animation: none !important; } .sg .am-e { opacity: 1; animation: none !important; }
  .sg .cy-d, .sg .ba-beam, .sg .ba-l, .sg .ba-r, .sg .yo-toy, .sg .ck-hand { transform: none !important; animation: none !important; }
  .sg .yo-toy { transform: translateY(28px) !important; } .sg .yo-str { transform: scaleY(.72) !important; animation: none !important; }
  .sg .hb-heart, .sg .br-ring, .sg .st-sun, .sg .lp-run { animation: none !important; }
  .sg .lp-run { stroke-dasharray: 1 !important; }
}

/* =====================================================================
   Story card: every patient of a place stacked in one scroll
   ===================================================================== */
.tm-card { --tm-accent: #2f3f26; }
.tm-card .tm-scroll { scroll-behavior: auto; position: relative; }
.tm-card .tm-story.tm-body { flex: none; overflow: visible; padding: 0; min-height: 0; }
.tm-card .tm-story { padding-top: 8px; }
.tm-sep { display: flex; align-items: center; justify-content: center; margin: clamp(1.8rem, 4vw, 2.8rem) 0; color: var(--ik-gold); }
.tm-sep::before, .tm-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 151, 90, .6), transparent); }
.tm-sep i { width: 10px; height: 10px; margin: 0 1rem; transform: rotate(45deg); border: 1.5px solid var(--ik-gold); background: rgba(184, 151, 90, .25); }
/* tab row: one line, swipe or scroll to reach the last person */
.tm-card .tm-people { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: .5rem; padding: .15rem .2rem .55rem; margin-right: 2.4rem; scrollbar-width: thin; scrollbar-color: rgba(184, 151, 90, .6) transparent; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%); }
.tm-card .tm-people .tm-person { flex: 0 0 auto; scroll-snap-align: center; transition: background-color .9s ease, border-color .9s ease, color .6s ease, box-shadow .9s ease, transform .5s ease; }
.tm-card .tm-people .tm-person[aria-selected="true"] { background: var(--tc, var(--ik-green)); border-color: var(--tc, var(--ik-green)); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transform: translateY(-1px); }
.tm-card .tm-people[hidden] { display: none; }
/* thin progress line that fills as you read down and slowly changes colour */
.tm-progress { flex: 0 0 auto; height: 3px; margin: 0 0 .7rem; border-radius: 3px; background: rgba(184, 151, 90, .2); overflow: hidden; }
.tm-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--tm-accent); transition: transform .25s ease-out, background-color 1s ease; }
@media (max-width: 640px) { .tm-card .tm-people { margin-right: 2.6rem; } }
@media (prefers-reduced-motion: reduce) { .tm-card .tm-people .tm-person, .tm-progress i { transition: none; } }

/* patient list under the map: an even grid, every chip the same size */
.tm-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; max-width: 1080px; margin-left: auto; margin-right: auto; }
.tm-chips li { display: flex; min-width: 0; }
.tm-chip { width: 100%; height: 100%; min-height: 54px; justify-content: flex-start; align-items: center; gap: .6rem; padding: .45rem .8rem .45rem .5rem; box-sizing: border-box; text-align: left; }
.tm-chip img { flex: 0 0 auto; }
.tm-chip > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tm-chip > span small { display: block; margin-top: .1rem; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .tm-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tm-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .tm-chip { padding-right: .5rem; } }
/* four patients per row on desktop; a short last row stays centred, every chip the same size */
@media (min-width: 1001px) {
  .tm-chips { display: flex; flex-wrap: wrap; justify-content: center; max-width: 900px; gap: .75rem; }
  .tm-chips li { flex: 0 0 calc((100% - 3 * .75rem) / 4); }
}