/* Layout concept: a bright, modern clinic page. White ground with warm peach bands,
   bold sans headings centred over each section, one saffron accent for every action,
   soft rounded cards. A single light look by design (no dark variant). */
:root {
  --paper: #ffffff;
  --paper-2: #fdf3ea;
  --card: #ffffff;
  --ink: #10261a;
  --ink-soft: #56645b;
  --leaf: #2f7a3a;
  --leaf-deep: #0f2e1d;
  --saffron: #b5450b;
  --saffron-ink: #ffffff;
  --line: #ece3d8;
  --shadow: 0 1px 2px rgb(16 38 26 / 0.04), 0 10px 30px -14px rgb(16 38 26 / 0.18);

  --f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-kn: "Noto Sans Kannada", "Tunga", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.55rem;
  --step-3: clamp(1.75rem, 1.3rem + 1.8vw, 2.4rem);
  --step-4: clamp(2.1rem, 1.5rem + 2.8vw, 3.3rem);

  --radius: 14px;
  --wrap: 74rem;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--f-body);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 30; background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--leaf); text-underline-offset: 0.18em; }
a:hover { color: var(--leaf-deep); }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0; max-width: 65ch; }
.kn { font-family: var(--f-kn); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.stack { display: grid; gap: 1rem; align-content: start; }
.stack-lg { display: grid; gap: 2rem; }
.eyebrow { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); }
.lede { font-size: var(--step-1); color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--card); padding: 0.5rem 1rem; }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.7rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand img { width: 38px; height: 38px; }
.brand-name { font-family: var(--f-display); font-size: 1.45rem; line-height: 1; }
.brand-name b { color: var(--leaf); font-weight: 400; }
.brand-sub { display: block; font-family: var(--f-body); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.25rem; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.98rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--leaf); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 0.5rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] .menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  display: grid; gap: 0.2rem;
  padding: 0.8rem var(--gutter-r) 1.2rem var(--gutter-l);
}
.menu-panel a { color: var(--ink); text-decoration: none; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-weight: 500; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.25rem; border-radius: var(--radius);
  font: 600 1rem/1.2 var(--f-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
}
.btn-primary { background: var(--saffron); color: var(--saffron-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--saffron) 88%, var(--ink)); color: var(--saffron-ink); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Sections */
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-alt { background: var(--paper-2); }
.section-head { display: grid; gap: 0.75rem; margin-bottom: 2.25rem; max-width: 46rem; }

/* Hero */
.hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); }
.hero h1 .accent { color: var(--leaf); }
.hero .kn-line { font-size: 1.05rem; color: var(--ink-soft); }
.hero-photo { position: relative; }
.hero-photo img { border-radius: var(--radius); aspect-ratio: 4 / 3.3; object-fit: cover; width: 100%; }
.hours-card {
  position: absolute; left: -1.25rem; bottom: -1.25rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; display: grid; gap: 0.15rem; min-width: 14rem;
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.45);
}
.status { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.status::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ink-soft); }
.status[data-open="true"]::before { background: #2f9e44; }
.status[data-open="false"]::before { background: #c0392b; }

.facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; padding: 0; margin: 0; list-style: none; color: var(--ink-soft); font-size: var(--step--1); }
.facts li { display: flex; gap: 0.4rem; align-items: baseline; }
.facts strong { color: var(--ink); font-size: 1rem; }

/* Specimen label cards (therapies, specialities) */
.labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.label {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.35rem; display: grid; gap: 0.5rem; align-content: start;
  text-decoration: none; color: var(--ink);
}
a.label:hover { border-color: var(--leaf); }
.label .sa { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.2; }
.label .gloss { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); font-weight: 600; }
.label p { color: var(--ink-soft); font-size: 0.98rem; }
.label .more { font-weight: 600; color: var(--leaf); font-size: 0.95rem; margin-top: 0.25rem; }

/* Feature split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split > * { min-width: 0; }
.split img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split.flip > :first-child { order: 2; }

/* Steps (a real sequence: the consultation process) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: step; padding: 0; margin: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; gap: 0.4rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--leaf); min-width: 0; }
.steps li::before { content: "Step " counter(step); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); font-weight: 600; }
.steps h3 { font-size: 1.15rem; }
.steps p { color: var(--ink-soft); font-size: 0.98rem; }

/* Doctors */
.doctors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.doctor { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.doctor img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 60% 30%; }
.doctor-body { padding: 1.4rem; display: grid; gap: 0.8rem; align-content: start; }
.doctor .quals { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leaf); font-weight: 600; }
.schedule { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.schedule th, .schedule td { text-align: left; padding: 0.4rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.schedule th { font-weight: 600; width: 45%; padding-right: 0.75rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; list-style: none; }
.tags li { font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 99px; background: var(--paper-2); color: var(--ink); }

/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.quote { margin: 0; display: grid; gap: 0.9rem; align-content: start; padding: 1.4rem; border-left: 3px solid var(--leaf); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; min-width: 0; }
.quote blockquote { margin: 0; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.45; }
.quote figcaption { font-size: 0.92rem; color: var(--ink-soft); }
.quote figcaption strong { color: var(--ink); display: block; }

/* Long-form content pages */
.page-head { padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line); }
.page-head .stack { max-width: 48rem; }
.crumbs { font-size: var(--step--1); color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.prose { display: grid; gap: 1.1rem; max-width: 46rem; }
.prose h2 { margin-top: 1.5rem; font-size: var(--step-2); }
.prose h3 { margin-top: 0.75rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; max-width: 62ch; }
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.aside { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 5.5rem); display: grid; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.aside h2 { font-size: 1.3rem; }

.therapy-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.therapy { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0.4rem 2rem; padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
.therapy .sa { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.2; }
.therapy .gloss { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); font-weight: 600; margin-top: 0.3rem; font-family: var(--f-body); }
.therapy p { color: var(--ink-soft); }

.cond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.cond { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; display: grid; gap: 0.55rem; align-content: start; }
.cond h3 { font-size: 1.2rem; }
.cond p { color: var(--ink-soft); font-size: 0.97rem; }

.note { border: 1px solid var(--line); border-left: 3px solid var(--saffron); background: var(--card); padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.95rem; color: var(--ink-soft); max-width: 46rem; }

/* FAQ */
.faq { display: grid; gap: 0; max-width: 48rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding-block: 1rem; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-display); font-size: 1.4rem; line-height: 1; color: var(--leaf); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-top: 0.75rem; color: var(--ink-soft); display: grid; gap: 0.6rem; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.gallery figure { margin: 0; display: grid; gap: 0.4rem; min-width: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.gallery figcaption { font-size: 0.88rem; color: var(--ink-soft); }

/* Contact + form */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.form { display: grid; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 2rem); }
.field { display: grid; gap: 0.35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field .hint { font-size: 0.85rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.8rem; width: 100%;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--leaf); outline-offset: 0; border-color: var(--leaf); }
.form-msg { font-size: 0.95rem; color: var(--ink-soft); }
.form-msg[data-state="error"] { color: #b3261e; }
.nap { display: grid; gap: 1.25rem; }
.nap address { font-style: normal; line-height: 1.7; }
.nap .big { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.3; }
.copy-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.copy-btn { font: 600 0.82rem var(--f-body); padding: 0.25rem 0.6rem; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); border-radius: 99px; cursor: pointer; }

/* CTA band */
.cta-band { background: var(--leaf-deep); color: var(--paper); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 2.5rem; }
.cta-band h2 { color: var(--paper); font-size: var(--step-2); }
.cta-band p { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.cta-band .btn-ghost { border-color: var(--paper); color: var(--paper); }
.cta-band .btn-ghost:hover { background: var(--paper); color: var(--leaf-deep); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 3rem 6rem; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
.footer-grid > * { min-width: 0; }
.footer-grid h2 { font-family: var(--f-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); margin-bottom: 0.75rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.footer-grid a { color: var(--ink); text-decoration: none; }
.footer-grid a:hover { color: var(--leaf); text-decoration: underline; }
.footer-grid address { font-style: normal; }
.hours-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table td { padding: 0.15rem 1rem 0.15rem 0; }
.footer-base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: var(--ink-soft); font-size: 0.85rem; }

/* Mobile action bar */
.action-bar { display: none; }

@media (max-width: 960px) {
  .nav { display: none; }
  .menu { display: block; }
  .site-header .wrap { position: relative; }
  .hero-grid, .split, .contact-grid, .with-aside { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .aside { position: static; }
  .steps { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hours-card { left: 0.75rem; bottom: 0.75rem; }
}
@media (max-width: 640px) {
  .doctors, .gallery { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .therapy { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
  .hours-card { position: static; margin-top: 0.75rem; min-width: 0; box-shadow: none; }
  .action-bar {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--paper); border-top: 1px solid var(--line);
    padding: 0.6rem var(--gutter-r) calc(0.6rem + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  }
  .action-bar a { text-align: center; padding: 0.65rem 0.25rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 0.95rem; border: 1px solid var(--line); color: var(--ink); }
  .action-bar a.primary { background: var(--saffron); color: var(--saffron-ink); border-color: var(--saffron); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Design pass 2: brand mark, botanical detail, richer home sections ---------- */
.mark { width: 40px; height: 40px; flex: none; }
.mark-leaf { fill: var(--leaf); }
.mark-vein { fill: none; stroke: var(--paper); stroke-width: 1.8; stroke-linecap: round; }
.brand-name { font-size: 1.55rem; }

/* Hero: faint leaf watermark and an overlapping photo pair */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--leaf) 10%, transparent), transparent 70%), var(--paper); }
.hero::before {
  content: ""; position: absolute; width: 34rem; height: 34rem; left: -9rem; bottom: -14rem; opacity: 0.07; pointer-events: none;
  background: var(--leaf);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat; mask: url("../img/mark.svg") center / contain no-repeat;
  transform: rotate(-18deg);
}
.hero-grid { position: relative; }
.hero-photo img.main { aspect-ratio: 4 / 4.2; border-radius: 180px 180px var(--radius) var(--radius); }
.hero-photo .inset {
  position: absolute; right: -0.75rem; top: 1.5rem; width: 38%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 6px solid var(--paper); box-shadow: 0 12px 30px -16px rgb(0 0 0 / 0.5);
}
.hero-photo img { filter: saturate(0.92) contrast(1.03); }
@media (prefers-reduced-motion: no-preference) {
  .hero .stack-lg > *, .hero-photo { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
  .hero .stack-lg > :nth-child(2) { animation-delay: 0.08s; }
  .hero .stack-lg > :nth-child(3) { animation-delay: 0.16s; }
  .hero-photo { animation-delay: 0.12s; }
  @keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
}

/* Concern chips */
.concerns { display: grid; gap: 0.9rem; padding-block: 1.6rem; border-block: 1px solid var(--line); }
.concerns h2 { font-family: var(--f-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.chips a {
  display: inline-block; padding: 0.5rem 0.95rem; border-radius: 99px; text-decoration: none;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 500; font-size: 0.95rem;
}
.chips a:hover { border-color: var(--leaf); color: var(--leaf); }

/* Credentials ribbon */

/* Featured specialities: two large with photos, the rest compact */
.featured { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.feature {
  display: grid; grid-template-columns: 42% 1fr; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0;
}
.feature:hover { border-color: var(--leaf); }
.feature img { width: 100%; height: 100%; object-fit: cover; min-height: 14rem; filter: saturate(0.92); }
.feature .body { padding: 1.4rem; display: grid; gap: 0.55rem; align-content: start; }
.feature .sa { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.15; }
.feature p { color: var(--ink-soft); font-size: 0.98rem; }

/* Doshas */
.doshas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.dosha { display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); min-width: 0; }
.dosha .glyph { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.3rem; color: var(--paper); }
.dosha.vata .glyph { background: #6f7f99; }
.dosha.pitta .glyph { background: #c0622b; }
.dosha.kapha .glyph { background: #4f7f5a; }
.dosha h3 { font-size: 1.45rem; }
.dosha .el { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
.dosha p { color: var(--ink-soft); font-size: 0.98rem; }

/* Ritu (season) strip */
.ritu { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.season { display: grid; gap: 0.35rem; align-content: start; padding: 1rem 0.9rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); min-width: 0; }
.season .months { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.season h3 { font-size: 1.25rem; }
.season p { font-size: 0.9rem; color: var(--ink-soft); }
.season .now { display: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron); }
.season[data-current="true"] { border-color: var(--saffron); box-shadow: inset 0 3px 0 var(--saffron); }
.season[data-current="true"] .now { display: block; }
.ritu-note { margin-top: 1rem; font-size: 1.05rem; }
.ritu-note strong { color: var(--saffron); font-weight: 600; }

/* Testimonials, larger */
.quote { position: relative; padding-top: 2.6rem; }
.quote::before { content: "\201C"; position: absolute; top: 0.4rem; left: 1.2rem; font-family: var(--f-display); font-size: 3.4rem; line-height: 1; color: var(--leaf); opacity: 0.55; }
.quote .who { display: flex; align-items: center; gap: 0.7rem; }
.quote .initial { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--leaf-deep); font-weight: 600; flex: none; }

/* Deep green CTA + footer */
.cta-band { position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; right: -4rem; top: -6rem; width: 22rem; height: 22rem; opacity: 0.1; pointer-events: none;
  background: var(--paper); -webkit-mask: url("../img/mark.svg") center / contain no-repeat; mask: url("../img/mark.svg") center / contain no-repeat; transform: rotate(24deg);
}
.cta-band .wrap { position: relative; z-index: 1; padding-block: 3.25rem; }
.site-footer { background: var(--paper-2); }

@media (max-width: 960px) {
  .featured { grid-template-columns: 1fr; }
  .doshas { grid-template-columns: 1fr; }
  .ritu { grid-template-columns: repeat(3, 1fr); }
  .hero-photo .inset { right: 0.5rem; }
}
@media (max-width: 640px) {
  .feature { grid-template-columns: 1fr; }
  .feature img { min-height: 0; aspect-ratio: 16 / 9; }
  .ritu { grid-template-columns: 1fr 1fr; }
  .hero-photo img.main { border-radius: 120px 120px var(--radius) var(--radius); }
}

/* Inner page headers share the hero's botanical treatment */
.page-head { position: relative; overflow: hidden; background:
  radial-gradient(50rem 22rem at 90% -20%, color-mix(in srgb, var(--leaf) 11%, transparent), transparent 70%), var(--paper); }
.page-head::after {
  content: ""; position: absolute; right: -5rem; bottom: -9rem; width: 22rem; height: 22rem; opacity: 0.07; pointer-events: none;
  background: var(--leaf); -webkit-mask: url("../img/mark.svg") center / contain no-repeat; mask: url("../img/mark.svg") center / contain no-repeat; transform: rotate(16deg);
}
.page-head .wrap { position: relative; z-index: 1; }
.split img, .doctor img, .gallery img { filter: saturate(0.92) contrast(1.03); }
.doctor { transition: border-color .2s; }
.doctor:hover { border-color: var(--leaf); }
.label, .feature, .chips a { transition: border-color .2s, color .2s; }
@media (prefers-reduced-motion: reduce) { .label, .feature, .chips a, .doctor { transition: none; } }

/* ---------- Pass 3: old-site structure (logo, dropdown menu, long-form content) ---------- */
.brand-logo { height: 52px; width: auto; display: block; }

.nav { gap: 1.1rem; }
.nav > a, .nav .drop > button { font: 500 0.95rem var(--f-body); color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0.4rem 0; cursor: pointer; }
.drop { position: relative; }
.drop > button::after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.2em) rotate(45deg); }
.drop-panel {
  position: absolute; top: 100%; left: -1rem; min-width: 15rem; padding: 0.5rem; display: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.4);
}
.drop:hover .drop-panel, .drop:focus-within .drop-panel { display: grid; }
.drop-panel a { padding: 0.5rem 0.7rem; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.drop-panel a:hover, .drop-panel a[aria-current="page"] { background: var(--paper-2); color: var(--leaf); }
.drop.active > button, .nav > a[aria-current="page"] { color: var(--leaf); }
.menu-panel .group { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); font-weight: 600; padding-top: 0.8rem; }
.menu-panel a.sub { padding-left: 0.8rem; }
@media (max-width: 1100px) { .nav { display: none; } .menu { display: block; } .site-header .wrap { position: relative; } }
.menu[open] .menu-panel { max-height: 75vh; overflow-y: auto; }

/* Long-form content */
.prose > img, .fig-right { float: right; width: min(300px, 42%); margin: 0.3rem 0 1rem 1.5rem; border-radius: var(--radius); }
.prose .clear { clear: both; }
.prose h2 { clear: both; }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 0; padding: 0.8rem 1.1rem; border-left: 3px solid var(--leaf); background: var(--card); font-family: var(--f-display); font-size: 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; }
.prose ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; }
.term { font-family: var(--f-display); font-size: 1.25rem; color: var(--ink); }
.therapy-list .therapy img { width: 100%; max-width: 220px; border-radius: var(--radius); margin-top: 0.6rem; }
.cond img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.cond ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.15rem; color: var(--ink-soft); font-size: 0.97rem; columns: 1; }
video { width: 100%; border-radius: var(--radius); background: #000; display: block; }
.videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.videos figure { margin: 0; display: grid; gap: 0.5rem; min-width: 0; }
.videos figcaption { font-weight: 600; }
.before-after { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; }
.before-after figure { margin: 0; display: grid; gap: 0.3rem; }
.before-after img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.before-after figcaption { font-size: 0.85rem; color: var(--ink-soft); }
.gallery.dense { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .gallery.dense { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .prose > img, .fig-right { float: none; width: 100%; margin: 0 0 1rem; }
  .videos { grid-template-columns: 1fr; }
  .gallery.dense { grid-template-columns: 1fr 1fr; }
  .brand-logo { height: 44px; }
}

/* ---------- Pass 4: bright modern clinic styling ---------- */
body { -webkit-font-smoothing: antialiased; }
p { line-height: 1.65; }
.eyebrow { color: var(--saffron); letter-spacing: 0.1em; }
.lede { color: var(--ink-soft); }

/* Header */
.site-header { background: rgb(255 255 255 / 0.94); border-bottom-color: var(--line); }
.nav > a, .nav .drop > button { font-weight: 600; font-size: 0.93rem; }
.drop-panel { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Buttons: pills */
.btn { border-radius: 999px; padding: 0.85rem 1.5rem; font-weight: 600; }
.btn-primary { background: var(--saffron); color: #fff; box-shadow: 0 8px 20px -10px rgb(200 76 12 / 0.7); }
.btn-primary:hover { background: #ad3f07; color: #fff; }
.btn-ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--saffron); }

/* Section headings centred, like a modern clinic site */
.section-head { margin-inline: auto; text-align: center; justify-items: center; }
.section-head p { margin-inline: auto; }
.section-alt { background: var(--paper-2); }

/* Hero: warm band, rounded photo */
.hero { background: linear-gradient(180deg, var(--paper-2) 0%, #fff 100%); }
.hero::before { opacity: 0.05; }
.hero h1 .accent { color: var(--saffron); }
.hero-photo img.main { border-radius: 28px; aspect-ratio: 4 / 3.6; }
.hero-photo .inset { border-color: #fff; }
.hours-card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
.facts strong { color: var(--leaf-deep); }

/* Chips */
.concerns { border: 0; padding-block: 2rem 0.5rem; justify-items: center; text-align: center; }
.chips { justify-content: center; }
.chips a { border-radius: 999px; background: #fff; border-color: var(--line); box-shadow: 0 1px 2px rgb(16 38 26 / 0.05); font-weight: 500; }
.chips a:hover { border-color: var(--saffron); color: var(--saffron); }

/* Credentials: from a dark strip to a "standards" grid of tiles */

/* Cards */
.label, .feature, .cond, .doctor, .season, .dosha, .quote, .aside, .form, .note, .before-after img { border-radius: var(--radius); }
.label, .feature, .cond, .doctor, .season, .dosha, .aside, .form { border-color: var(--line); box-shadow: var(--shadow); background: #fff; }
.label:hover, .feature:hover { border-color: var(--saffron); transform: translateY(-2px); }
.label, .feature { transition: transform .2s, border-color .2s; }
.label .gloss, .therapy .gloss, .doctor .quals { color: var(--saffron); }
.label .sa, .feature .sa, .therapy .sa, .term { font-weight: 700; letter-spacing: -0.01em; }
.label .more { color: var(--saffron); }
.feature img { filter: none; }
.quote { background: #fff; border-left: 0; box-shadow: var(--shadow); border-radius: var(--radius); }
.quote blockquote { font-family: var(--f-body); font-size: 1.02rem; line-height: 1.6; }
.quote::before { color: var(--saffron); opacity: 0.8; }
.dosha .glyph { font-family: var(--f-display); font-weight: 800; }
.season[data-current="true"] { border-color: var(--saffron); box-shadow: inset 0 3px 0 var(--saffron), var(--shadow); }
.split img, .doctor img, .gallery img, .hero-photo img { border-radius: var(--radius); }
.therapy-list { border-top-color: var(--line); }
.therapy { border-bottom-color: var(--line); }
.tags li { background: var(--paper-2); color: var(--leaf-deep); font-weight: 500; }
.steps li { border-top: 3px solid var(--saffron); }
.steps li::before { color: var(--saffron); }

/* Page headers on inner pages */
.page-head { background: linear-gradient(180deg, var(--paper-2) 0%, #fff 100%); border-bottom: 0; }
.crumbs a { color: var(--ink-soft); }

/* FAQ */
.faq summary::after { color: var(--saffron); }

/* CTA band and footer: deep forest green */
.cta-band { background: var(--leaf-deep); }
.cta-band .btn-ghost { background: transparent; border-color: rgb(255 255 255 / 0.6); color: #fff; }
.cta-band .btn-ghost:hover { background: #fff; color: var(--leaf-deep); }
.site-footer { background: var(--leaf-deep); color: rgb(255 255 255 / 0.82); border-top: 0; }
.site-footer a, .footer-grid a { color: #fff; }
.footer-grid h2 { color: #f4a46d; }
.footer-base { border-top-color: rgb(255 255 255 / 0.15); color: rgb(255 255 255 / 0.6); }
.site-footer .muted { color: rgb(255 255 255 / 0.65); }

/* Floating WhatsApp pill on larger screens (phones keep the bottom action bar) */
.float-chat {
  position: fixed; z-index: 24; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.2rem; border-radius: 999px;
  background: var(--saffron); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 12px 28px -12px rgb(200 76 12 / 0.8);
}
.float-chat:hover { background: #ad3f07; color: #fff; }
@media (max-width: 640px) { .float-chat { display: none; } }

@media (prefers-reduced-motion: reduce) { .label, .feature { transition: none; } .label:hover, .feature:hover { transform: none; } }
.cta-band { background: var(--saffron); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgb(255 255 255 / 0.9); }
.cta-band .btn-primary { background: #fff; color: var(--saffron); box-shadow: none; }
.cta-band .btn-primary:hover { background: var(--paper-2); color: #ad3f07; }
.cta-band::after { background: #fff; opacity: 0.12; }
.brand .brand-logo { width: auto; height: 54px; flex: none; }
@media (max-width: 640px) { .brand .brand-logo { height: 46px; } }

/* Inner-page header: full-width container, only the text is narrowed */
.page-head .wrap.stack { max-width: var(--wrap); }
.page-head .stack > * { max-width: 48rem; }

/* Copy buttons: comfortable tap size on phones */
.copy-btn { min-height: 36px; padding: 0.4rem 0.9rem; }

/* Clean inner-page headers: no watermark */
.page-head::after { display: none; }

/* Hydra facial page */
.steps.ten { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 2rem; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.checks li { position: relative; padding-left: 2rem; font-weight: 500; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--leaf); -webkit-mask: none; }
.checks li::after { content: ""; position: absolute; left: 0.42rem; top: 0.42em; width: 0.4rem; height: 0.65rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips.plain { justify-content: flex-start; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips.plain span { display: inline-block; padding: 0.5rem 1rem; border-radius: 999px; background: var(--paper-2); color: var(--leaf-deep); font-weight: 500; }
.page-head .tags { margin-top: 0.25rem; }
@media (max-width: 960px) { .steps.ten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps.ten { grid-template-columns: 1fr; } .checks.two { grid-template-columns: 1fr; } }

/* Header: solid white bar, menu centred. The logo's word "AyuRemedy" sits in the lower
   part of the image (the leaf rises above it), so the logo is lifted until the word, not the
   image box, lines up with the menu text. The bar is a little taller to give the leaf room. */
.site-header { background: #fff; backdrop-filter: none; }
.site-header .wrap { align-items: center; min-height: 108px; padding-block: 0.5rem; }
.brand { display: flex; align-items: center; line-height: 0; }
.brand .brand-logo { height: 60px; width: auto; transform: translateY(var(--logo-lift, -17px)); }
.nav, .menu summary { transform: none; }
@media (max-width: 640px) {
  .site-header .wrap { min-height: 84px; }
  .brand .brand-logo { height: 46px; --logo-lift: -12px; }
}

/* Google rating */
.g-rating { color: var(--ink); text-decoration: none; }
.g-rating strong { color: #935600; }
.g-rating:hover { color: var(--saffron); }
.g-band { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.g-score { font: 800 2.4rem/1 var(--f-display); color: var(--ink); }
.g-stars { color: #f4a100; letter-spacing: 0.1em; font-size: 1.1rem; }
.g-band .btn { margin-left: auto; }
@media (max-width: 640px) { .g-band .btn { margin-left: 0; width: 100%; } }

/* Social icons (footer) */
.social { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; gap: 0.6rem; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 0.1); color: #fff; }
.social a:hover { background: var(--saffron); color: #fff; }
.social svg { width: 20px; height: 20px; }

/* Instagram follow band (home) */
.ig-band { background: #fff; }
.ig-band .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; padding-block: 2.5rem; }
.ig-band .stack { flex: 1 1 18rem; gap: 0.4rem; }
.ig-band h2 { font-size: var(--step-2); }
.ig-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; color: #fff; flex: none;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.ig-mark svg { width: 34px; height: 34px; }
.follow-marks { display: flex; gap: 0.5rem; flex: none; }
.fb-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; color: #fff; background: #1877f2; }
.fb-mark svg { width: 34px; height: 34px; }
.ig-band .btn svg { width: 18px; height: 18px; flex: none; }
.btn-fb { border-color: #1877f2; color: #1877f2; }
.btn-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
@media (max-width: 640px) { .ig-band .btn-row, .ig-band .btn { width: 100%; } .follow-marks .ig-mark, .follow-marks .fb-mark { width: 52px; height: 52px; border-radius: 14px; } }


/* Dosha illustrations: a picture panel across the top of each card, letter badge overlapping it */
.dosha { overflow: hidden; padding-top: 0; }
.dosha-art { display: block; width: calc(100% + 3rem); max-width: none; height: auto; aspect-ratio: 8 / 3; object-fit: cover; margin: 0 -1.5rem; }
.dosha .glyph { margin-top: -1.9rem; position: relative; border: 4px solid #fff; width: 3.4rem; height: 3.4rem; box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.4); }
/* Footer social icons sit in one row (overrides the footer's stacked list style) */
.footer-grid .social { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
/* Facebook videos: poster + play button; Facebook's player loads only on tap (site.js initReels) */
.reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.25rem; }
.reel-card { margin: 0; display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.reel-card figcaption { font-weight: 600; font-size: 0.92rem; line-height: 1.35; }
.reel, .reel-frame { display: block; position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: #000; border: 0; }
.reel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.reel:hover img { transform: scale(1.03); }
.reel:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.reel-play { position: absolute; inset: 0; margin: auto; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgb(255 255 255 / 0.92); box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.5); }
.reel-play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: 1.05rem solid var(--saffron); border-block: 0.65rem solid transparent; }
.reel-len { position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 6px; background: rgb(0 0 0 / 0.65); color: #fff; font-size: 0.78rem; font-weight: 600; }
.reel-strip { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(var(--n, 1), minmax(0, 220px)); gap: 1.5rem; align-items: center; justify-content: center; max-width: 880px; margin-inline: auto; }
.reel-strip > .reel-card { align-self: start; }
@media (max-width: 640px) {
  .reels { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .reel-strip { grid-template-columns: repeat(var(--n, 1), minmax(0, 200px)); }
  .reel-strip > .stack { grid-column: 1 / -1; }
}
/* Home: swipeable row of doctor videos (arrows wired in site.js initRails) */
.reel-rail-wrap { margin-top: 3rem; }
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.rail-head .stack { max-width: 34rem; }
.rail-head h3 { font-size: var(--step-2); }
.rail-nav { display: flex; align-items: center; gap: 0.5rem; }
.rail-btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.6rem; line-height: 1; display: grid; place-items: center; padding-bottom: 0.15rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.rail-btn:hover:not(:disabled) { border-color: var(--saffron); color: var(--saffron); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
.rail-all { margin-left: 0.5rem; font-weight: 600; white-space: nowrap; }
.reel-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 1.25rem) / 5.4); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0.4rem 0.2rem 0.75rem; }
.reel-rail::-webkit-scrollbar { display: none; }
.reel-rail:focus-visible { outline: 3px solid var(--saffron); outline-offset: 4px; border-radius: var(--radius); }
.reel-rail > .reel-card { scroll-snap-align: start; }
.reel { box-shadow: 0 10px 24px -16px rgb(0 0 0 / 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.reel:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.6); }
.reel::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(transparent, rgb(0 0 0 / 0.55)); pointer-events: none; }
.reel-tag, .reel-len { z-index: 1; }
.reel-tag { position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--paper); color: var(--leaf-deep); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 960px) { .reel-rail { grid-auto-columns: calc((100% - 2 * 1.25rem) / 3.3); } }
@media (max-width: 640px) {
  .reel-rail { grid-auto-columns: 44%; gap: 0.9rem; }
  .rail-btn { display: none; }
  .rail-all { margin-left: 0; }
}
/* Dosha initials: a classical serif italic, subset to just V, P and K (layout.html) */
.dosha .glyph { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 600; font-size: 2.15rem; line-height: 1; padding: 0 0.12rem 0.1rem 0; background-image: radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.28), transparent 60%); text-shadow: 0 1px 2px rgb(0 0 0 / 0.18); }
/* YouTube cards: same tap-to-play facade, landscape */
.reel.wide, .reel-frame.wide { aspect-ratio: 16 / 9; }
.videos.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .videos.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .videos.three { grid-template-columns: 1fr; } }
/* Video gallery: stroke rehabilitation stages (portrait videos, labelled by stage) */
.stages { display: grid; grid-template-columns: minmax(0, 250px) auto minmax(0, 250px) minmax(0, 250px); gap: 1.25rem; align-items: start; justify-content: start; }
.stages .reel-card { position: relative; }
.reel video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: #000; }
.stage-tag { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; pointer-events: none; }
.stage-tag.during { background: #8a5a12; }
.stage-tag.after { background: var(--leaf-deep); }
.stage-arrow { align-self: center; margin-top: -2.5rem; font-size: 1.8rem; color: var(--saffron); }
@media (max-width: 760px) {
  .stages { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .stage-arrow { display: none; }
  .stages .reel-card:first-child { grid-column: 1 / -1; width: min(100%, 250px); justify-self: center; }
}
/* Home: where the physicians trained and worked. One credentials card per doctor, side by side. */
.creds { background: #fff; }
.creds .wrap { display: grid; gap: 1.75rem; padding-block: 3rem 2.75rem; }
.creds h2 { text-align: center; font-size: var(--step-2); }
.cred-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.cred-card { display: flex; flex-direction: column; padding: 0 1.75rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.cred-top { display: flex; align-items: center; gap: 1.1rem; margin: 0 -1.75rem 1.4rem; padding: 1.4rem 1.75rem; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.cred-top img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 4px #fff; }
.cred-top h3 { font-size: 1.3rem; }
.cred-role { margin-top: 0.2rem; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.45; }
.cred-h { max-width: none; margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.cred-list, .cred-work, .cred-chips { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.cred-list { display: grid; gap: 0.85rem; }
.cred-list li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.9rem; align-items: center; }
.cred-deg { display: grid; place-items: center; height: 3rem; border-radius: 10px; background: var(--paper-2); color: var(--saffron); font: 800 0.95rem/1 var(--f-display); letter-spacing: 0.02em; }
.cred-list strong { display: block; font: 700 1rem/1.3 var(--f-display); color: var(--ink); }
.cred-place { display: block; margin-top: 0.1rem; color: var(--ink-soft); font-size: 0.86rem; }
.cred-work { display: grid; gap: 0.45rem; }
.cred-work li { position: relative; padding-left: 1.1rem; color: var(--ink-soft); font-size: 0.92rem; }
.cred-work li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--leaf); }
.cred-work strong { color: var(--ink); font-weight: 600; }
.cred-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cred-chips li { padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--leaf) 25%, var(--line)); color: var(--leaf-deep); font-size: 0.82rem; font-weight: 500; }
.cred-btn { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 0.4rem; padding: 0.6rem 1.1rem; border-radius: 999px; border: 1px solid var(--leaf); color: var(--leaf); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background 0.2s, color 0.2s; }
.cred-btn:hover { background: var(--leaf); color: #fff; }
.cred-btn:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
@media (max-width: 900px) { .cred-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .creds .wrap { padding-block: 2.25rem 2rem; }
  .cred-card { padding: 0 1.1rem 1.25rem; }
  .cred-top { margin: 0 -1.1rem 1.2rem; padding: 1.1rem; gap: 0.9rem; }
  .cred-top img { width: 64px; height: 64px; }
  .cred-top h3 { font-size: 1.15rem; }
  .cred-list li { grid-template-columns: 3.1rem minmax(0, 1fr); gap: 0.75rem; }
  .cred-deg { height: 2.6rem; font-size: 0.85rem; }
}