/* drdilipsmms.com — "Kanjivaram" edition (Nov 2026)
   Layout: jewel-tone silk bands (indigo, peacock, rani, marigold) over a jasmine-white page.
   Portraits sit in temple-arch frames; a gold temple border closes each silk band; the heartbeat
   runs as a gold zari thread. Colour = section: peacock for patients, rani for students, marigold for about. */
:root {
  --bg: #F7F6FB;
  --surface: #FFFFFF;
  --ink: #1C1940;
  --muted: #5E5A7D;
  --line: #E6E3F1;
  --line-strong: #CFCBE2;

  --peacock: #0B6E75;
  --peacock-ink: #075A60;
  --peacock-soft: #E1F2F1;
  --rani: #B5175B;
  --rani-ink: #9A124D;
  --rani-soft: #FBE7F0;
  --marigold: #E39A0E;
  --marigold-ink: #8A5A00;
  --marigold-soft: #FDF2DA;
  --indigo-ink: #2E2875;
  --indigo-soft: #ECEAFB;
  --gold: #C9952F;
  --leaf: #1E8A5A;

  /* silk bands stay deep in both themes */
  --silk-indigo: #1F1A4D;
  --silk-peacock: #0A5A62;
  --silk-rani: #9C1450;
  --silk-marigold: #C77B00;
  --zari: #E8BE62;
  --on-silk: #FFFFFF;
  --on-silk-muted: rgba(255, 255, 255, 0.8);

  --alarm-bg: #FDECEA;
  --alarm-ink: #A1281D;
  --alarm-line: #F3BDB5;
  --shadow: 0 1px 2px rgba(28, 25, 64, 0.06), 0 22px 44px -26px rgba(28, 25, 64, 0.38);

  --display: "Bodoni Moda", Didot, "Bodoni 72", "Times New Roman", serif;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tamil: "Noto Serif Tamil", "Tamil Sangam MN", "Latha", serif;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --wrap: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100E24;
    --surface: #1A1738;
    --ink: #F2F0FA;
    --muted: #B4AFD2;
    --line: #2C2853;
    --line-strong: #3E3972;
    --peacock: #43C2C0;
    --peacock-ink: #86DEDA;
    --peacock-soft: #12302F;
    --rani: #FF5C9A;
    --rani-ink: #FF92BC;
    --rani-soft: #3A1428;
    --marigold: #FFB938;
    --marigold-ink: #FFD27A;
    --marigold-soft: #3A2A0C;
    --indigo-ink: #B6AEFF;
    --indigo-soft: #241F52;
    --gold: #E6BC5C;
    --leaf: #4CC48C;
    --alarm-bg: #2E1714;
    --alarm-ink: #FFB2A8;
    --alarm-line: #5B2A24;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 44px -26px rgba(0, 0, 0, 0.75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #100E24;
  --surface: #1A1738;
  --ink: #F2F0FA;
  --muted: #B4AFD2;
  --line: #2C2853;
  --line-strong: #3E3972;
  --peacock: #43C2C0;
  --peacock-ink: #86DEDA;
  --peacock-soft: #12302F;
  --rani: #FF5C9A;
  --rani-ink: #FF92BC;
  --rani-soft: #3A1428;
  --marigold: #FFB938;
  --marigold-ink: #FFD27A;
  --marigold-soft: #3A2A0C;
  --indigo-ink: #B6AEFF;
  --indigo-soft: #241F52;
  --gold: #E6BC5C;
  --leaf: #4CC48C;
  --alarm-bg: #2E1714;
  --alarm-ink: #FFB2A8;
  --alarm-line: #5B2A24;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 44px -26px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--peacock-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.06; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5.2rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.32rem; line-height: 1.2; }
h1 em, h2 em { font-style: italic; font-weight: 500; }
p { margin: 0; }
.ta { font-family: var(--tamil); font-weight: 600; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); color: var(--ink); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 12px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; flex: none; }
.lede { font-size: clamp(1.06rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 60ch; }
.note { font-size: 0.9rem; color: var(--muted); }
.c-peacock { color: var(--peacock-ink); }
.c-rani { color: var(--rani-ink); }
.c-marigold { color: var(--marigold-ink); }

/* ---------- header ---------- */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
@media (min-width: 760px) { .site-head { position: sticky; top: env(safe-area-inset-top, 0px); } }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-block: 12px; }
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 12px; }
.brand .pencils { height: 30px; }
.brand .bt { display: grid; gap: 1px; }
.brand b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.brand small { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.97rem; padding: 8px 12px; border-radius: 999px; }
.nav a:not(.btn):hover { background: var(--indigo-soft); }
.nav a[aria-current="page"] { background: var(--indigo-soft); color: var(--indigo-ink); }
.nav .btn { margin-left: 6px; }
@media (max-width: 759px) {
  .nav { width: 100%; justify-content: space-between; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; flex-wrap: nowrap; }
  .nav a:not(.btn) { padding: 6px 7px; font-size: 0.9rem; }
  .nav .btn { margin-left: 0; padding: 8px 12px; font-size: 0.88rem; white-space: nowrap; }
}
.pencils { display: inline-flex; gap: 3px; align-items: flex-end; height: 26px; }
.pencils i { width: 6px; border-radius: 3px 3px 1px 1px; }
.pencils i:nth-child(1) { height: 100%; background: #3D8BD9; }
.pencils i:nth-child(2) { height: 80%; background: #3FAE74; }
.pencils i:nth-child(3) { height: 92%; background: #F2C230; }
.pencils i:nth-child(4) { height: 70%; background: #EE8A3A; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-weight: 700; font-size: 0.97rem;
  padding: 12px 20px; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; line-height: 1.2; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-peacock { background: var(--peacock); color: #fff; }
.btn-rani { background: var(--rani); color: #fff; }
.btn-gold { background: var(--zari); color: #2A1E00; }
.btn-line { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.btn-line:hover { border-color: var(--ink); }
.btn-glass { border-color: rgba(255, 255, 255, 0.45); color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-peacock, :root:not([data-theme="light"]) .btn-rani { color: #10121F; } }
:root[data-theme="dark"] .btn-peacock, :root[data-theme="dark"] .btn-rani { color: #10121F; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* ---------- silk bands ---------- */
.silk { position: relative; overflow: hidden; color: var(--on-silk); background-color: var(--silk-indigo); }
.silk.home {
  background-image:
    radial-gradient(55% 75% at 88% 18%, rgba(181, 23, 91, 0.55), transparent 62%),
    radial-gradient(45% 60% at 62% 100%, rgba(227, 154, 14, 0.42), transparent 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(11, 110, 117, 0.75), transparent 65%),
    linear-gradient(135deg, var(--silk-indigo) 0%, #2A1F66 55%, var(--silk-indigo) 100%);
}
.silk.peacock {
  background-image:
    radial-gradient(50% 70% at 90% 10%, rgba(227, 154, 14, 0.35), transparent 60%),
    radial-gradient(60% 80% at 10% 100%, rgba(31, 26, 77, 0.65), transparent 65%),
    linear-gradient(135deg, var(--silk-peacock) 0%, #0D7680 100%);
}
.silk.rani {
  background-image:
    radial-gradient(50% 70% at 88% 12%, rgba(227, 154, 14, 0.38), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(31, 26, 77, 0.7), transparent 65%),
    linear-gradient(135deg, var(--silk-rani) 0%, #C21C66 100%);
}
.silk.marigold {
  background-image:
    radial-gradient(55% 75% at 90% 15%, rgba(181, 23, 91, 0.45), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(31, 26, 77, 0.55), transparent 65%),
    linear-gradient(135deg, #B36A00 0%, var(--silk-marigold) 100%);
}
.silk .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px 56px; align-items: center; padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px); }
.silk .copy { display: grid; gap: 18px; min-width: 0; }
.silk .eyebrow { color: var(--zari); }
.silk h1 { color: #fff; }
.silk h1 em { color: var(--zari); }
.silk .lede { color: var(--on-silk-muted); }
.silk .ta-line { color: #fff; font-size: 1.1rem; }
.creds { display: flex; flex-wrap: wrap; gap: 8px; }
.creds span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; background: rgba(255, 255, 255, 0.07); }
.silk .actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) {
  .silk .wrap { grid-template-columns: 1fr; }
  .silk .arch-frame { order: -1; }
}

/* temple-arch portrait */
.arch-frame {
  justify-self: center; width: min(100%, 420px); padding: 10px; position: relative;
  border: 1.5px solid var(--zari); border-radius: 999px 999px 36px 36px;
}
.arch-frame::after {
  content: ""; position: absolute; inset: -9px; border-radius: 999px 999px 44px 44px;
  border: 1px solid rgba(232, 190, 98, 0.45); pointer-events: none;
}
.arch-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 999px 999px 28px 28px; }
.arch-frame.sm { width: min(100%, 340px); }
@media (max-width: 860px) { .arch-frame { width: min(78%, 320px); } .arch-frame.sm { width: min(70%, 280px); } }

/* doors (home hero) */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.door {
  display: grid; gap: 6px; align-content: start; padding: 20px 20px 18px; border-radius: 20px; text-decoration: none;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); border-top: 5px solid var(--peacock);
  transition: transform 0.2s ease;
}
.door.rani { border-top-color: var(--rani); }
.door:hover { transform: translateY(-3px); text-decoration: none; }
.door .eyebrow { color: var(--peacock-ink); }
.door.rani .eyebrow { color: var(--rani-ink); }
.door strong { font-family: var(--display); font-size: 1.45rem; font-weight: 600; line-height: 1.15; }
.door span.d { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.door i { font-style: normal; font-weight: 700; font-size: 0.9rem; color: var(--peacock-ink); margin-top: 6px; }
.door.rani i { color: var(--rani-ink); }
@media (prefers-reduced-motion: reduce) { .door { transition: none; } .door:hover { transform: none; } }
@media (max-width: 540px) { .doors { grid-template-columns: 1fr; } }

/* gold heartbeat thread */
.zari-lead { position: relative; height: 70px; overflow: hidden; }
.zari-lead svg { display: block; width: 100%; height: 70px; }
.zari-lead .base { fill: none; stroke: var(--zari); stroke-width: 1.6; stroke-opacity: 0.55; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.zari-lead .sweep { fill: none; stroke: #FFF3D1; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 60 940; animation: sweep 6s linear infinite; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px var(--zari)); }
@keyframes sweep { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .zari-lead .sweep { display: none; } }
@media (max-width: 600px) { .zari-lead svg { width: 200%; } }

/* temple border */
.temple {
  height: 16px; background-color: var(--silk-rani);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Cpolygon points='0,13 9,3 18,13' fill='%23E8BE62'/%3E%3Crect y='14' width='18' height='2' fill='%23E8BE62'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: left bottom;
}
.temple.peacock { background-color: var(--silk-peacock); }
.temple.indigo { background-color: var(--silk-indigo); }
.temple.marigold { background-color: var(--silk-marigold); }

/* ---------- sections ---------- */
.section { padding-block: clamp(52px, 7vw, 96px); }
.section.tint { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(26px, 3vw, 40px); max-width: 68ch; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* diagnostician grid */
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.why article { background: var(--surface); border-radius: 20px; padding: 24px 22px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow); border-top: 4px solid var(--peacock); min-width: 0; }
.why article:nth-child(2) { border-top-color: var(--rani); }
.why article:nth-child(3) { border-top-color: var(--marigold); }
.why article:nth-child(4) { border-top-color: var(--indigo-ink); }
.why h3 { font-size: 1.22rem; font-style: italic; font-weight: 500; }
.why p { color: var(--muted); font-size: 0.96rem; }
@media (max-width: 980px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } }

/* OPD strip & board */
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 16px; }
.strip > div { background: var(--surface); border-radius: 20px; padding: 22px 24px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow); min-width: 0; }
.strip .cta { align-content: center; justify-items: start; gap: 12px; background: var(--peacock-soft); box-shadow: none; }
.strip.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .strip, .strip.pair { grid-template-columns: 1fr; } }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.days span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; font-size: 0.76rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line-strong); }
.days span.on { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.hours { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.where { color: var(--muted); font-size: 0.95rem; }

.board { background: var(--surface); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.board-top { background: var(--silk-indigo); color: #fff; padding: 20px 26px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; }
.board-top b { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 1.8rem); }
.board-top span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.04em; }
.venue { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 14px 30px; align-items: center; padding: 24px 26px; }
.venue + .venue { border-top: 1px dashed var(--line-strong); }
.venue .role { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--peacock-ink); display: block; margin-bottom: 6px; }
.venue h3 { font-size: 1.45rem; }
.venue .where { margin-top: 4px; }
.venue-actions { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) { .venue { grid-template-columns: 1fr; } .venue-actions { flex-direction: row; flex-wrap: wrap; } }

.contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.contact { background: var(--surface); border-radius: 20px; padding: 20px 24px; display: grid; gap: 6px; border: 1px solid var(--line); min-width: 0; }
.contact .num { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 1.9rem); user-select: all; font-variant-numeric: lining-nums; }
.contact .links { display: flex; gap: 8px 16px; flex-wrap: wrap; font-weight: 600; }
.contact p.note { margin-top: 4px; }
@media (max-width: 700px) { .contacts { grid-template-columns: 1fr; } }

/* services */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc article { background: var(--peacock-soft); border-radius: 22px; padding: 24px 24px 26px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.svc article:nth-child(3n+2) { background: var(--rani-soft); }
.svc article:nth-child(3n) { background: var(--marigold-soft); }
.svc .tag { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--peacock-ink); }
.svc article:nth-child(3n+2) .tag { color: var(--rani-ink); }
.svc article:nth-child(3n) .tag { color: var(--marigold-ink); }
.svc ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 0.96rem; display: grid; gap: 4px; }
@media (max-width: 900px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .svc { grid-template-columns: 1fr; } }

/* two-up, checklist, charts */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.checklist li::before { content: ""; width: 20px; height: 20px; margin-top: 4px; border-radius: 6px; border: 2px solid var(--peacock); background: var(--peacock-soft); }
.charts { display: grid; gap: 12px; }
.chart-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); text-decoration: none; }
.chart-card:hover { border-color: var(--peacock); text-decoration: none; }
.chart-card .doc { width: 42px; height: 52px; border-radius: 6px; background: var(--rani-soft); position: relative; border: 1.5px solid var(--rani); }
.chart-card .doc::after { content: "PDF"; position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 0.62rem; font-weight: 800; color: var(--rani-ink); }
.chart-card strong { display: block; font-weight: 700; }
.chart-card small { color: var(--muted); font-size: 0.9rem; }
.chart-card .go { font-weight: 700; font-size: 0.88rem; color: var(--peacock-ink); white-space: nowrap; }

/* emergency */
.alarm { background: var(--alarm-bg); border: 1px solid var(--alarm-line); border-radius: 24px; padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; }
.alarm .eyebrow, .alarm h2 { color: var(--alarm-ink); }
.alarm ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; }
.alarm li { padding-left: 24px; position: relative; }
.alarm li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 9px; height: 9px; transform: rotate(45deg); background: var(--alarm-ink); }
.alarm .sub { font-weight: 700; color: var(--alarm-ink); }
@media (max-width: 700px) { .alarm ul { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; max-width: 860px; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; font-family: var(--display); font-weight: 600; font-size: 1.25rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 14px; font-size: 1.6rem; color: var(--rani); font-family: var(--body); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 22px; color: var(--muted); max-width: 68ch; display: grid; gap: 10px; }

/* about row */
.about-row { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-row .copy { display: grid; gap: 16px; max-width: 62ch; }
.about-row .arch-frame { border-color: var(--gold); }
.about-row .arch-frame::after { border-color: var(--gold); opacity: 0.45; }
@media (max-width: 760px) { .about-row { grid-template-columns: 1fr; } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stats > div { background: var(--surface); border-radius: 20px; padding: 22px 22px 20px; box-shadow: var(--shadow); display: grid; gap: 4px; align-content: start; }
.stats b { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--peacock-ink); font-variant-numeric: lining-nums; }
.stats > div:nth-child(2) b { color: var(--rani-ink); }
.stats > div:nth-child(3) b { color: var(--marigold-ink); }
.stats > div:nth-child(4) b { color: var(--indigo-ink); }
.stats span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* learn */
.exam-row { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-row span { font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.platform { background: var(--surface); border-radius: 22px; padding: 26px; display: grid; gap: 12px; align-content: start; min-width: 0; box-shadow: var(--shadow); border-top: 5px solid var(--rani); }
.platform:nth-child(3) { border-top-color: var(--peacock); }
.platform:nth-child(4) { border-top-color: var(--marigold); }
.platform:nth-child(5) { border-top-color: var(--indigo-ink); }
.platform .eyebrow { color: var(--rani-ink); }
.platform .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.platform.lead {
  grid-column: 1 / -1; border-top: 0; color: #fff; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 32px;
  background: radial-gradient(60% 90% at 100% 0%, rgba(227, 154, 14, 0.4), transparent 60%), linear-gradient(135deg, var(--silk-indigo), #3A2C86);
}
.platform.lead h3 { color: #fff; font-size: 2rem; }
.platform.lead p { color: var(--on-silk-muted); }
.platform.lead .eyebrow { color: var(--zari); }
.platform.lead .inner { display: grid; gap: 12px; }
@media (max-width: 760px) { .platforms { grid-template-columns: 1fr; } .platform.lead { grid-template-columns: 1fr; } }

.highlights { display: flex; flex-wrap: wrap; gap: 18px 14px; }
.hl-item { display: grid; justify-items: center; gap: 8px; width: 92px; text-decoration: none; color: var(--ink); text-align: center; font-size: 0.8rem; font-weight: 600; line-height: 1.25; }
.hl-item .ring { width: 74px; height: 74px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--rani), var(--marigold), var(--peacock), var(--rani)); }
.hl-item .ring span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); border: 3px solid var(--surface); font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--rani-ink); }
.hl-item:nth-child(3n+2) .ring span { color: var(--peacock-ink); }
.hl-item:nth-child(3n) .ring span { color: var(--marigold-ink); }
.hl-item:hover { text-decoration: none; }
.hl-item:hover .ring { transform: rotate(8deg); }
.series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.series > div { border-radius: 20px; padding: 22px 24px; background: var(--rani-soft); display: grid; gap: 8px; }
.series > div:nth-child(2) { background: var(--peacock-soft); }
.series .eyebrow { color: var(--rani-ink); }
.series > div:nth-child(2) .eyebrow { color: var(--peacock-ink); }
@media (max-width: 700px) { .series { grid-template-columns: 1fr; } }

.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.rules > div { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 3px solid var(--rani); }
.rules > div:nth-child(2) { border-top-color: var(--peacock); }
.rules > div:nth-child(3) { border-top-color: var(--marigold); }
.rules h3 { font-style: italic; font-weight: 500; font-size: 1.4rem; }
.rules p { color: var(--muted); }
@media (max-width: 800px) { .rules { grid-template-columns: 1fr; } }
.signoff { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; color: var(--rani-ink); }

/* about page */
.timeline { list-style: none; margin: 0 0 0 6px; padding: 0; border-left: 2px solid var(--line-strong); }
.timeline li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 11px 0 11px 22px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 19px; width: 11px; height: 11px; transform: rotate(45deg); background: var(--marigold); }
.timeline li:nth-child(3n+2)::before { background: var(--rani); }
.timeline li:nth-child(3n)::before { background: var(--peacock); }
.timeline .yr { font-family: var(--display); font-weight: 700; font-size: 1.15rem; font-variant-numeric: lining-nums; }
.timeline small { display: block; color: var(--muted); font-size: 0.9rem; }
.pubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pubs li { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pubs li:last-child { border-bottom: 0; }
.pubs a { font-weight: 600; text-decoration: none; color: var(--ink); }
.pubs a:hover { text-decoration: underline; color: var(--peacock-ink); }
.pubs small { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 2px; }

/* footer */
.site-foot { background: var(--silk-indigo); color: rgba(255, 255, 255, 0.78); font-size: 0.93rem; }
.site-foot .wrap { padding-block: 44px 30px; display: grid; gap: 26px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 48px; }
.foot-top b { color: #fff; font-family: var(--display); font-size: 1.4rem; font-weight: 700; }
.foot-top p { margin-top: 4px; }
.reg { display: inline-block; margin-top: 10px; padding: 4px 12px; border: 1px solid var(--zari); color: var(--zari); border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-content: start; }
.foot-links a { color: #fff; text-decoration: none; font-weight: 600; }
.foot-links a:hover { text-decoration: underline; }
.disclaimer { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 18px; font-size: 0.85rem; line-height: 1.6; max-width: 92ch; }
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr; } }

/* colour helpers win over component defaults */
.eyebrow.c-peacock, .role.c-peacock { color: var(--peacock-ink); }
.eyebrow.c-rani, .role.c-rani { color: var(--rani-ink); }
.eyebrow.c-marigold, .role.c-marigold { color: var(--marigold-ink); }

/* =====================================================================
   v3 — "more colour" pass (home page first)
   ===================================================================== */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* header: short name, phone pill */
.brand b { font-size: 1.45rem; letter-spacing: -0.01em; }
.brand b em { font-style: italic; font-weight: 600; color: var(--rani-ink); }
.nav .phone {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 0.95rem;
  padding: 10px 16px; border-radius: 999px; color: #fff; letter-spacing: 0.02em;
  background: linear-gradient(120deg, #B5175B, #E2477F 55%, #E39A0E);
  box-shadow: 0 8px 22px -10px rgba(181, 23, 91, 0.7);
}
.nav .phone svg { width: 16px; height: 16px; }
.nav .phone:hover { text-decoration: none; filter: brightness(1.06); }
/* phone pill removed from header in v4 */

/* hero: drifting colour glows */
.silk .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; pointer-events: none; will-change: transform; }
.silk .orb.o1 { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: #E2477F; top: -18%; right: -8%; animation: drift1 16s ease-in-out infinite alternate; }
.silk .orb.o2 { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; background: #F2B033; bottom: -30%; left: 38%; opacity: 0.45; animation: drift2 19s ease-in-out infinite alternate; }
.silk .orb.o3 { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; background: #13A0A0; bottom: -25%; left: -12%; animation: drift3 22s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-8vw, 10vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-10vw, -8vh) scale(0.9); } }
@keyframes drift3 { to { transform: translate(9vw, -6vh) scale(1.1); } }
.silk .wrap { z-index: 1; }
.silk h1.name { font-size: clamp(3.6rem, 10vw, 7.4rem); line-height: 0.95; letter-spacing: -0.02em; }
.silk h1.name em { background: linear-gradient(100deg, #FFD27A, #FFB938 40%, #FF8DB8); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; }
.creds span:nth-child(5n+1) { border-color: rgba(67, 194, 192, 0.7); }
.creds span:nth-child(5n+2) { border-color: rgba(255, 92, 154, 0.7); }
.creds span:nth-child(5n+3) { border-color: rgba(255, 185, 56, 0.7); }
.creds span:nth-child(5n+4) { border-color: rgba(182, 174, 255, 0.7); }
.creds span:nth-child(5n) { border-color: rgba(76, 196, 140, 0.7); }
.btn-wa { background: #1FA855; color: #fff; }
.btn-wa:hover { filter: brightness(1.06); }

/* arch portrait: rotating silk ring */
.arch-frame.ring { border-color: transparent; }
.arch-frame.ring::before {
  content: ""; position: absolute; inset: -2px; border-radius: 999px 999px 38px 38px; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--ang), #FF5C9A, #FFB938, #43C2C0, #B6AEFF, #FF5C9A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: ring-spin 9s linear infinite;
}
.arch-frame.ring img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
@keyframes ring-spin { to { --ang: 360deg; } }

/* heartbeat monitor strip */
.monitor { position: relative; height: 96px; overflow: hidden; z-index: 1; }
.monitor > svg { position: absolute; left: 0; bottom: 6px; width: 100%; height: 76px; display: block; }
.monitor .base { fill: none; stroke: url(#ecgGrad); stroke-width: 1.6; opacity: 0.45; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.monitor .bright { fill: none; stroke: url(#ecgGrad); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.monitor .halo { fill: none; stroke: url(#ecgGrad); stroke-width: 9; opacity: 0.35; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.monitor .readout {
  position: absolute; top: 10px; display: flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
.monitor .readout.l { left: var(--gutter-l); }
.monitor .readout.r { right: var(--gutter-r); color: #FF8DB8; }
.monitor .readout b { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0; color: #fff; font-variant-numeric: lining-nums; }
.monitor .heart { width: 18px; height: 18px; color: #FF5C9A; animation: beat 0.833s ease-in-out infinite; filter: drop-shadow(0 0 6px #FF5C9A); }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.28); } 24% { transform: scale(0.96); } 36% { transform: scale(1.12); } 50% { transform: scale(1); } }
@media (max-width: 600px) { .monitor > svg { width: 200%; } .monitor .readout.l { display: none; } }

/* temple border: travelling gold shimmer */
.temple { position: relative; overflow: hidden; }
.temple::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 214, 0.85), transparent);
  transform: translateX(-120%); animation: shimmer 4.5s ease-in-out infinite; mix-blend-mode: screen;
}
@keyframes shimmer { 0% { transform: translateX(-120%); } 70%, 100% { transform: translateX(560%); } }

/* colour-washed sections */
.section.wash {
  background:
    radial-gradient(42% 55% at 0% 0%, rgba(226, 71, 127, 0.14), transparent 62%),
    radial-gradient(40% 55% at 100% 20%, rgba(242, 176, 51, 0.16), transparent 62%),
    radial-gradient(45% 60% at 60% 100%, rgba(19, 160, 160, 0.14), transparent 65%),
    var(--bg);
}

/* help cards */
.help { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.help article {
  grid-column: span 2; position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 28px 26px 30px;
  color: #fff; min-height: 260px; display: grid; align-content: start; gap: 12px; min-width: 0;
  background: var(--g); box-shadow: 0 26px 50px -30px var(--gs); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.help article:nth-child(4), .help article:nth-child(5) { grid-column: span 3; min-height: 230px; }
.help article:nth-child(1) { --g: linear-gradient(145deg, #9C1450 0%, #D9336F 60%, #F0679A 100%); --gs: rgba(181, 23, 91, 0.75); }
.help article:nth-child(2) { --g: linear-gradient(145deg, #084A52 0%, #0B7A82 55%, #19A9A6 100%); --gs: rgba(11, 110, 117, 0.75); }
.help article:nth-child(3) { --g: linear-gradient(145deg, #9A5000 0%, #C97A00 55%, #E59C12 100%); --gs: rgba(199, 123, 0, 0.75); }
.help article:nth-child(4) { --g: linear-gradient(145deg, #231C66 0%, #3E2F9C 55%, #6A4FD6 100%); --gs: rgba(62, 47, 156, 0.75); }
.help article:nth-child(5) { --g: linear-gradient(145deg, #0B5A3B 0%, #0F7A4F 55%, #23A56B 100%); --gs: rgba(15, 122, 79, 0.75); }
.help article::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 45%, transparent 60%);
  transform: translateX(-100%); transition: transform 0.7s ease;
}
.help article:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px var(--gs); }
.help article:hover::after { transform: translateX(100%); }
.help .ico { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.32); backdrop-filter: blur(4px); }
.help .ico svg { width: 30px; height: 30px; }
.help .wm { position: absolute; right: -18px; bottom: -22px; width: 170px; height: 170px; opacity: 0.13; transform: rotate(-10deg); z-index: -1; }
.help .tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.help h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); color: #fff; }
.help p { color: rgba(255, 255, 255, 0.9); font-size: 1rem; line-height: 1.55; max-width: 46ch; }
@media (max-width: 980px) {
  .help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help article, .help article:nth-child(4) { grid-column: span 1; }
  .help article:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .help { grid-template-columns: 1fr; } .help article, .help article:nth-child(5) { grid-column: auto; min-height: 0; } }

/* appointments band */
.callband { position: relative; overflow: hidden; color: #fff; text-align: center;
  background:
    radial-gradient(50% 90% at 10% 0%, rgba(242, 176, 51, 0.55), transparent 60%),
    radial-gradient(50% 90% at 90% 100%, rgba(19, 160, 160, 0.45), transparent 60%),
    linear-gradient(120deg, #7E1043, #B5175B 45%, #3A2C86);
}
.callband .wrap { padding-block: clamp(40px, 6vw, 70px); display: grid; gap: 14px; justify-items: center; }
.callband .eyebrow { color: #FFD27A; }
.callband .big { font-family: var(--display); font-weight: 700; font-size: clamp(2.8rem, 8vw, 5.4rem); line-height: 1; letter-spacing: 0.01em; user-select: all; font-variant-numeric: lining-nums; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.25); }
.callband p { color: rgba(255, 255, 255, 0.85); max-width: 54ch; }
.callband .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.callband .btn { font-size: 1.05rem; padding: 14px 26px; }
.callband .small { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.callband .small a { color: #FFD27A; }

/* coloured OPD cards */
.strip.vivid > div:not(.cta) { border-top: 5px solid var(--peacock); }
.strip.vivid > div:nth-child(2):not(.cta) { border-top-color: var(--rani); }
.strip.vivid .cta { background: linear-gradient(145deg, var(--peacock-soft), var(--marigold-soft)); }

/* about panel */
.about-panel {
  border-radius: 34px; padding: clamp(26px, 4vw, 52px); position: relative; overflow: hidden;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(242, 176, 51, 0.28), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(226, 71, 127, 0.24), transparent 60%),
    linear-gradient(135deg, var(--rani-soft), var(--marigold-soft));
  border: 1px solid var(--line);
}
.about-panel h2 em { color: var(--rani-ink); }
.about-panel .arch-frame { border-color: transparent; }

/* floating call + WhatsApp */
.fab-stack { position: fixed; right: max(18px, calc(env(safe-area-inset-right, 0px) + 12px)); bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px)); display: grid; gap: 12px; z-index: 40; }
.fab { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; text-decoration: none; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45); position: relative; }
.fab svg { width: 26px; height: 26px; }
.fab.wa { background: #1FA855; }
.fab.call { background: linear-gradient(135deg, #B5175B, #E39A0E); }
.fab.wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(31, 168, 85, 0.55); animation: ping 2.4s ease-out infinite; }
.fab .tip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--surface); color: var(--ink); font-size: 0.82rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.fab:hover .tip, .fab:focus-visible .tip { opacity: 1; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(31, 168, 85, 0.55); } 80%, 100% { box-shadow: 0 0 0 16px rgba(31, 168, 85, 0); } }

/* footer phone */
.foot-phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.foot-phone small { font-family: var(--body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zari); }

@media (prefers-reduced-motion: reduce) {
  .silk .orb, .arch-frame.ring::before, .monitor .heart, .temple::after, .fab.wa::before { animation: none; }
  .monitor .bright, .monitor .halo { display: none; }
  .monitor .base { opacity: 0.9; }
  .help article { transition: none; }
  .help article:hover { transform: none; }
}

/* v3 fixes: header pill colour, phone numbers in a sturdy face */
.nav a.phone:not(.btn) { color: #fff; padding: 10px 16px; font-weight: 800; }
.nav a.phone:not(.btn):hover { background: linear-gradient(120deg, #B5175B, #E2477F 55%, #E39A0E); }
@media (max-width: 759px) { .nav a.phone:not(.btn) { padding: 8px 12px; font-size: 0.86rem; } }
.callband .big, .tel-num, .foot-phone { font-family: var(--body); font-weight: 800; letter-spacing: 0.02em; }
.tel-num { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; color: var(--ink); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.tel-num:hover { color: var(--rani-ink); }

/* =====================================================================
   v4 — modern waves (replace temple border) + modern portrait
   ===================================================================== */
.waves { position: relative; display: block; width: 100%; height: clamp(46px, 7vw, 92px); margin-top: -1px; --front: var(--bg); }
.silk > .waves { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; }
.silk.has-waves { padding-bottom: clamp(46px, 7vw, 92px); }
.waves svg { display: block; width: 100%; height: 100%; }
.waves .w1 { fill: rgba(255, 92, 154, 0.55); animation: wave-move 11s cubic-bezier(.55,.5,.45,.5) infinite; }
.waves .w2 { fill: rgba(255, 185, 56, 0.5); animation: wave-move 15s cubic-bezier(.55,.5,.45,.5) infinite; animation-delay: -3s; }
.waves .w3 { fill: rgba(67, 194, 192, 0.55); animation: wave-move 19s cubic-bezier(.55,.5,.45,.5) infinite; animation-delay: -6s; }
.waves .w4 { fill: var(--front); animation: wave-move 24s cubic-bezier(.55,.5,.45,.5) infinite; animation-delay: -4s; }
@keyframes wave-move { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
.waves.to-footer { --front: var(--silk-indigo); background: transparent; }

/* modern portrait */
.portrait { position: relative; width: min(100%, 430px); justify-self: center; margin: 0; isolation: isolate; }
.portrait::before {
  content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; z-index: -2;
  background: radial-gradient(circle, rgba(255, 92, 154, 0.65), rgba(255, 185, 56, 0.35) 45%, transparent 70%); filter: blur(42px);
}
.portrait .backdrop {
  position: absolute; inset: 6% -6% -6% 6%; border-radius: 42px; z-index: -1;
  background: linear-gradient(140deg, #FF5C9A 0%, #FFB938 52%, #43C2C0 100%);
  transform: rotate(4deg); animation: tilt 9s ease-in-out infinite alternate;
}
.portrait.alt .backdrop { background: linear-gradient(140deg, #FFB938 0%, #FF5C9A 50%, #8C6CF0 100%); }
.portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 36px;
  box-shadow: 0 40px 80px -42px rgba(10, 8, 30, 0.75); border: 1px solid rgba(255, 255, 255, 0.18);
}
@keyframes tilt { to { transform: rotate(7deg) translate(6px, -8px); } }
.portrait .tagf {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.94); color: #1C1940; font-weight: 700; font-size: 0.88rem; line-height: 1.2;
  box-shadow: 0 18px 36px -16px rgba(10, 8, 30, 0.6); animation: bob 5.5s ease-in-out infinite;
}
.portrait .tagf b { font-family: var(--display); font-size: 1.55rem; font-weight: 700; color: #B5175B; font-variant-numeric: lining-nums; }
.portrait .tagf .dot { width: 10px; height: 10px; border-radius: 50%; background: #1FA855; box-shadow: 0 0 0 5px rgba(31, 168, 85, 0.18); }
.portrait .t1 { left: -8%; bottom: 13%; }
.portrait .t2 { right: -7%; top: 9%; animation-delay: -2.7s; }
@keyframes bob { 50% { transform: translateY(-9px); } }
@media (max-width: 860px) {
  .portrait { width: min(82%, 330px); }
  .portrait .t1 { left: -6%; } .portrait .t2 { right: -5%; }
  .portrait .tagf { font-size: 0.8rem; padding: 8px 12px; }
  .portrait .tagf b { font-size: 1.25rem; }
}
.about-panel .portrait { width: min(100%, 340px); }

@media (prefers-reduced-motion: reduce) {
  .waves .w1, .waves .w2, .waves .w3, .waves .w4, .portrait .backdrop, .portrait .tagf { animation: none; }
}
.portrait .tagf b { font-family: var(--body); font-weight: 800; font-size: 1.5rem; }
@media (max-width: 860px) { .silk .portrait { order: -1; margin-bottom: 8px; } .portrait .tagf b { font-size: 1.2rem; } }

/* v5/v7 — classy name: gold italic "Dr." + ivory upright "Dilip", fine gold rule; hero figures */
.silk h1.name { font-size: clamp(4.2rem, 10.5vw, 8.2rem); line-height: 0.92; letter-spacing: -0.025em; font-weight: 700; color: #FBF7EF; margin-top: 4px; text-shadow: 0 12px 40px rgba(10, 8, 30, 0.35); }
.silk h1.name .dr { font-size: 0.62em; font-style: italic; font-weight: 500; color: #E8BE62; }
.silk h1.name .first { font-style: normal; font-weight: 700; color: #FBF7EF; }
.silk h1.name::after { content: ""; display: block; width: 88px; height: 2px; margin-top: 0.18em; background: linear-gradient(90deg, #E8BE62, rgba(232, 190, 98, 0)); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 12px 30px; margin-top: 2px; }
.hero-stats div { display: grid; gap: 4px; padding-left: 14px; border-left: 3px solid #43C2C0; min-width: 0; }
.hero-stats div:nth-child(2) { border-left-color: #FF5C9A; }
.hero-stats div:nth-child(3) { border-left-color: #FFB938; }
.hero-stats b { font-family: var(--body); font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.15rem); line-height: 1; color: #fff; letter-spacing: -0.01em; }
.hero-stats span { font-size: 0.86rem; line-height: 1.35; color: var(--on-silk-muted); max-width: 17ch; }
@media (max-width: 520px) { .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; } .hero-stats div { padding-left: 10px; } .hero-stats span { font-size: 0.78rem; } }

/* v6 — pencil mark header, four hero figures */
.brand.mark { gap: 0; padding: 2px 0; }
.brand.mark img { height: 46px; width: auto; filter: drop-shadow(0 6px 10px rgba(28, 25, 64, 0.18)); transition: transform 0.25s ease; }
.brand.mark:hover img { transform: rotate(-8deg) translateY(-2px); }
.hero-stats { grid-template-columns: repeat(4, minmax(0, max-content)); gap: 12px 26px; }
.hero-stats div:nth-child(4) { border-left-color: #B6AEFF; }
@media (max-width: 640px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .brand.mark img { transition: none; } .brand.mark:hover img { transform: none; } }

/* v8 — header ticker, animated figures, About creed */
.site-head .wrap { flex-wrap: wrap; }
.ticker {
  flex: 1 1 0; min-width: 0; overflow: hidden; margin: 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker 55s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; flex: none; }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 22px 0 0; font-size: 0.86rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.ticker-item b { color: var(--ink); font-weight: 700; }
.ticker-item::before { content: ""; width: 7px; height: 7px; flex: none; transform: rotate(45deg); background: #F2B33D; }
.ticker-item:nth-child(6n+2)::before { background: #3D8BD9; }
.ticker-item:nth-child(6n+3)::before { background: #3FAE74; }
.ticker-item:nth-child(6n+4)::before { background: #F07FA6; }
.ticker-item:nth-child(6n+5)::before { background: #E39A0E; }
.ticker-item:nth-child(6n)::before { background: #8C6CF0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 759px) { .ticker { margin: 0 0 0 4px; } .ticker-item { font-size: 0.8rem; padding-right: 18px; gap: 10px; } }

.hero-stats div { position: relative; overflow: hidden; }
.hero-stats div::after {
  content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: 45%; pointer-events: none;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.95), transparent);
  animation: bar-glow 3.4s ease-in-out infinite; opacity: 0;
}
.hero-stats div:nth-child(2)::after { animation-delay: 0.5s; }
.hero-stats div:nth-child(3)::after { animation-delay: 1s; }
.hero-stats div:nth-child(4)::after { animation-delay: 1.5s; }
@keyframes bar-glow { 0% { transform: translateY(-110%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(240%); opacity: 0; } }
.hero-stats.is-pre div { opacity: 0; transform: translateY(16px); }
.hero-stats.is-in div { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hero-stats.is-in div:nth-child(2) { transition-delay: 0.14s; }
.hero-stats.is-in div:nth-child(3) { transition-delay: 0.28s; }
.hero-stats.is-in div:nth-child(4) { transition-delay: 0.42s; }
.hero-stats b { font-variant-numeric: tabular-nums; display: inline-block; }
.hero-stats b.pop { animation: num-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes num-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); text-shadow: 0 0 18px rgba(255, 210, 122, 0.8); } 100% { transform: scale(1); } }

.creed { display: grid; gap: 4px; margin: 6px 0 4px; }
.creed .line { font-family: var(--display); font-weight: 600; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.18; color: var(--ink); letter-spacing: -0.01em; }
.creed .line em { font-style: italic; font-weight: 500; padding: 0 0.06em; }
.hl-gold { background: linear-gradient(transparent 60%, rgba(242, 179, 61, 0.45) 60%, rgba(242, 179, 61, 0.45) 92%, transparent 92%); }
.hl-rani { background: linear-gradient(transparent 60%, rgba(240, 127, 166, 0.45) 60%, rgba(240, 127, 166, 0.45) 92%, transparent 92%); }
.hl-teal { font-weight: 700; background: linear-gradient(transparent 62%, rgba(67, 194, 192, 0.4) 62%, rgba(67, 194, 192, 0.4) 94%, transparent 94%); }
.about-panel .copy a:not(.btn) { color: var(--rani-ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .hero-stats div::after, .hero-stats b.pop { animation: none; }
  .hero-stats.is-pre div { opacity: 1; transform: none; }
}

/* =====================================================================
   v7 — search-friendly service pages (sp-*)
   ===================================================================== */
.sp-crumbs { font-size: 0.85rem; color: var(--on-silk-muted); display: flex; flex-wrap: wrap; gap: 6px; }
.sp-crumbs a { color: #fff; text-decoration: none; opacity: 0.85; }
.sp-crumbs a:hover { text-decoration: underline; opacity: 1; }
.sp-card {
  background: rgba(255, 255, 255, 0.96); color: #1C1940; border-radius: 26px; padding: 26px 26px 24px; display: grid; gap: 12px;
  box-shadow: 0 30px 60px -32px rgba(10, 8, 30, 0.7); align-self: center; min-width: 0;
}
.sp-card .eyebrow { color: #075A60; }
.sp-card h2 { font-size: 1.6rem; color: #1C1940; }
.sp-card .row { display: grid; gap: 2px; padding: 10px 0; border-top: 1px dashed #CFCBE2; }
.sp-card .row b { font-weight: 700; }
.sp-card .row span { color: #5E5A7D; font-size: 0.95rem; }
.sp-card .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sp-byline { font-size: 0.86rem; color: var(--on-silk-muted); }
.sp-cond { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-cond article { border-radius: 22px; padding: 22px 22px 24px; display: grid; gap: 8px; align-content: start; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--peacock); }
.sp-cond article:nth-child(3n+2) { border-top-color: var(--rani); }
.sp-cond article:nth-child(3n) { border-top-color: var(--marigold); }
.sp-cond h3 { font-size: 1.25rem; }
.sp-cond p { color: var(--muted); font-size: 0.97rem; }
@media (max-width: 900px) { .sp-cond { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .sp-cond { grid-template-columns: 1fr; } }
.sp-prose { display: grid; gap: 14px; max-width: 70ch; }
.sp-prose p { color: var(--ink); }
.sp-prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink); }
.sp-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; list-style: none; margin: 0; padding: 0; }
.sp-signs li { padding-left: 26px; position: relative; }
.sp-signs li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); background: var(--peacock); }
@media (max-width: 700px) { .sp-signs { grid-template-columns: 1fr; } }
.sp-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sp-related a { display: grid; gap: 4px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.sp-related a:hover { border-color: var(--rani); text-decoration: none; }
.sp-related a b { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.sp-related a span { color: var(--muted); font-size: 0.9rem; }
@media (max-width: 800px) { .sp-related { grid-template-columns: 1fr; } }
.sp-areas { color: var(--muted); font-size: 0.95rem; }
.help article a.more { margin-top: auto; color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; opacity: 0.95; }
.help article a.more:hover { text-decoration: underline; opacity: 1; }
.silk h1.sp-h1 { font-size: clamp(2.3rem, 4.8vw, 3.7rem); line-height: 1.05; }

/* v9 — Tamil page + lang-bar */
.lang-bar {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; text-align: center; text-decoration: none;
  padding-block: 8px; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: linear-gradient(90deg, #8A1147 0%, #B5175B 30%, #C77B00 65%, #0A5A62 100%); color: #fff;
  font-family: "Noto Sans Tamil", var(--body); font-size: 0.92rem; line-height: 1.4; position: relative; z-index: 21;
}
.lang-bar span { opacity: 0.9; }
.lang-bar b { font-weight: 700; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.4); }
.lang-bar:hover b { background: rgba(255, 255, 255, 0.3); }
.lang-bar[lang="en"] { font-family: var(--body); }
@media (max-width: 520px) { .lang-bar span { display: none; } }

html[lang="ta"] body { font-family: "Noto Sans Tamil", var(--body); }
html[lang="ta"] h1, html[lang="ta"] h2, html[lang="ta"] h3, html[lang="ta"] .faq summary, html[lang="ta"] .board-top b, html[lang="ta"] .foot-top b { font-family: "Noto Serif Tamil", var(--display); letter-spacing: 0; line-height: 1.32; }
html[lang="ta"] h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
html[lang="ta"] h3 { font-size: 1.18rem; }
html[lang="ta"] h1 em, html[lang="ta"] h2 em { font-style: normal; color: var(--rani-ink); }
html[lang="ta"] .silk h2 em, html[lang="ta"] .silk h1 em { color: #FFD27A; }
html[lang="ta"] .silk h1.name { font-size: clamp(2.8rem, 8vw, 5.4rem); line-height: 1.15; letter-spacing: 0; }
html[lang="ta"] .silk h1.name .dr { font-style: normal; font-weight: 600; font-size: 0.55em; }
html[lang="ta"] .eyebrow { letter-spacing: 0.04em; font-size: 0.82rem; }
html[lang="ta"] .lede { line-height: 1.75; }
html[lang="ta"] .hours { font-family: "Noto Serif Tamil", var(--display); font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
html[lang="ta"] .days span { font-family: "Noto Sans Tamil", var(--body); font-size: 0.72rem; }
html[lang="ta"] .ticker-item { font-size: 0.84rem; }
html[lang="ta"] .nav a:not(.btn) { font-size: 0.92rem; }
html[lang="ta"] .svc .tag, html[lang="ta"] .venue .role { letter-spacing: 0.04em; }
html[lang="ta"] .creds, html[lang="ta"] [lang="en"] { font-family: var(--body); }
@media (max-width: 759px) { html[lang="ta"] .nav a:not(.btn) { padding: 6px 4px; font-size: 0.84rem; } }