/* ============================================================
   Art Vidhyashram — Website stylesheet
   Self-contained: design tokens + component classes + layout.
   Built from the Art Vidhyashram design system.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Caveat:wght@500;600;700&display=swap');

/* ---------------- TOKENS ---------------- */
:root {
  /* Haldi / Gold (primary) */
  --gold-50:#FFF8E1; --gold-100:#FFECB3; --gold-200:#FFE082; --gold-300:#FFD54F;
  --gold-400:#FFCA28; --gold-500:#FFBA00; --gold-600:#F5A300; --gold-700:#DB8A00;
  --gold-800:#B36E00; --gold-900:#845000;
  /* Neel / Indigo (secondary) */
  --indigo-50:#EDF1FB; --indigo-100:#CFD9F2; --indigo-200:#A6B7E5; --indigo-300:#7290D4;
  --indigo-400:#3F62BE; --indigo-500:#1B3A8F; --indigo-600:#122B73; --indigo-700:#0C215C;
  --indigo-800:#0A1C4D; --indigo-900:#06122F;
  /* Jewel-tone accents */
  --sindoor-500:#E8412A; --sindoor-600:#C8331E;
  --marigold-500:#FF8A1F; --marigold-600:#E2730E;
  --cerulean-500:#0E8FD4; --cerulean-600:#0A72AC;
  --peacock-500:#188250; --peacock-600:#11663E;
  --rani-500:#CE2C7B; --rani-600:#A91F61;
  --royal-500:#1F4FB5; --royal-600:#173E92;
  /* Paper / warm neutrals */
  --paper-0:#FFFFFF; --paper-50:#FFFDF7; --paper-100:#FBF5E9; --paper-200:#F4EBD8;
  --paper-300:#E9DCC2; --paper-400:#D8C6A4;
  /* Ink / warm greys */
  --ink-900:#241B10; --ink-700:#463A28; --ink-500:#6E5F49; --ink-300:#9C8E76; --ink-200:#C2B49B;

  /* Semantic */
  --brand-primary:var(--gold-500); --brand-primary-hover:var(--gold-600); --brand-primary-press:var(--gold-700);
  --brand-secondary:var(--indigo-500); --brand-secondary-hover:var(--indigo-600);
  --bg-page:var(--paper-100); --surface-card:var(--paper-0); --surface-raised:var(--paper-50);
  --surface-sunken:var(--paper-200); --surface-ink:var(--indigo-900); --surface-ink-2:var(--indigo-800);
  --text-strong:var(--ink-900); --text-body:var(--ink-500); --text-muted:var(--ink-300);
  --text-on-gold:var(--indigo-900); --text-on-ink:var(--paper-50); --text-on-ink-muted:#B9C2DE;
  --border-soft:var(--paper-300); --border-strong:var(--paper-400); --border-gold:var(--gold-500); --border-ink:var(--indigo-200);
  --success:var(--peacock-500); --warning:var(--marigold-500); --danger:var(--sindoor-500); --info:var(--cerulean-500);
  --focus-ring:color-mix(in srgb, var(--gold-500) 55%, transparent);

  /* Type */
  --font-display:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,sans-serif;
  --font-accent:'Caveat','Comic Sans MS',cursive;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem;
  --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:2.875rem; --text-4xl:3.75rem; --text-5xl:4.75rem;
  --leading-tight:1.08; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-caps:0.14em;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:7rem; --space-16:10rem;
  --container-max:1200px; --container-text:720px; --gutter:var(--space-5); --section-y:var(--space-12);

  /* Effects */
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --radius-xl:30px; --radius-2xl:40px; --radius-pill:999px;
  --radius-blob:42% 58% 56% 44% / 50% 46% 54% 50%;
  --shadow-xs:0 1px 2px rgba(74,58,40,.06); --shadow-sm:0 2px 6px rgba(74,58,40,.08);
  --shadow-md:0 8px 20px rgba(74,58,40,.10); --shadow-lg:0 16px 38px rgba(74,58,40,.13);
  --shadow-xl:0 28px 60px rgba(74,58,40,.16); --shadow-gold:0 10px 26px rgba(255,186,0,.34);
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms; --transition:all var(--dur-base) var(--ease-out);
  --dot-grid:radial-gradient(circle, rgba(255,186,0,.18) 1.4px, transparent 1.6px);
  --dot-grid-size:22px 22px;
}

/* ---------------- BASE ---------------- */
*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--bg-page); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5 { font-family:var(--font-display); color:var(--text-strong); line-height:var(--leading-tight); margin:0 0 .4em; font-weight:var(--fw-bold); }
h1 { font-size:var(--text-3xl); font-weight:var(--fw-extra); }
h2 { font-size:var(--text-2xl); }
h3 { font-size:var(--text-xl); }
h4 { font-size:var(--text-lg); }
p { margin:0 0 1em; text-wrap:pretty; }
a { color:var(--brand-secondary); text-decoration:none; }
a:hover { color:var(--brand-secondary-hover); }
img { max-width:100%; display:block; }
:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
::selection { background:var(--gold-200); color:var(--ink-900); }

.container { width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow { font-family:var(--font-body); font-weight:var(--fw-extra); font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--brand-secondary); }
.script { font-family:var(--font-accent); font-weight:700; color:var(--brand-primary-press); }
.dotgrid { background-image:var(--dot-grid); background-size:var(--dot-grid-size); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------------- BUTTON ---------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; font-family:var(--font-body); font-weight:var(--fw-extra);
  font-size:var(--text-base); line-height:1.1; border-radius:var(--radius-lg);
  cursor:pointer; border:0; text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-spring), filter var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn--sm { padding:8px 16px; font-size:var(--text-sm); gap:6px; border-radius:var(--radius-md); }
.btn--lg { padding:16px 34px; font-size:var(--text-md); gap:10px; border-radius:var(--radius-pill); }
.btn--block { width:100%; }
.btn--primary { background:var(--gold-500); color:var(--text-on-gold); box-shadow:var(--shadow-gold); }
.btn--secondary { background:var(--indigo-500); color:var(--paper-50); box-shadow:var(--shadow-sm); }
.btn--outline { background:transparent; color:var(--indigo-600); border:2px solid var(--indigo-200); }
.btn--ghost { background:transparent; color:var(--indigo-600); }
.btn:hover { filter:brightness(1.04); transform:translateY(-1px); }
.btn:active { transform:translateY(1px) scale(.98); }
.btn .arrow { font-weight:900; }

/* ---------------- BADGE ---------------- */
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; font-family:var(--font-body); font-weight:var(--fw-bold); font-size:var(--text-xs); line-height:1.4; border-radius:var(--radius-pill); white-space:nowrap; }
.badge--gold   { background:var(--gold-100);  color:var(--gold-900); }
.badge--indigo { background:var(--indigo-100); color:var(--indigo-700); }
.badge--red    { background:#FBDAD3; color:var(--sindoor-600); }
.badge--orange { background:#FFE6CC; color:var(--marigold-600); }
.badge--blue   { background:#D2ECF8; color:var(--cerulean-600); }
.badge--green  { background:#D2EADE; color:var(--peacock-600); }
.badge--pink   { background:#F7D7E7; color:var(--rani-600); }
.badge--solid.badge--gold   { background:var(--gold-500);     color:var(--indigo-900); }
.badge--solid.badge--pink   { background:var(--rani-500);     color:#fff; }
.badge--solid.badge--green  { background:var(--peacock-500);  color:#fff; }
.badge--solid.badge--indigo { background:var(--indigo-500);   color:#fff; }

/* ---------------- TAG ---------------- */
.tag { display:inline-flex; align-items:center; gap:8px; padding:7px 15px; font-family:var(--font-body); font-weight:var(--fw-bold); font-size:var(--text-sm); line-height:1.3; border-radius:var(--radius-pill); border:2px solid var(--border-soft); background:var(--surface-card); color:var(--text-body); cursor:pointer; transition:var(--transition); white-space:nowrap; }
.tag .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.tag.is-active { border-color:var(--gold-500); background:var(--gold-50); color:var(--gold-900); }
.tag:hover { border-color:var(--border-strong); }

/* ---------------- CARD ---------------- */
.card { background:var(--surface-card); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); border:1px solid var(--border-soft); padding:var(--space-5); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card--sm { padding:var(--space-4); }
.card--lg { padding:var(--space-6); }
.card--hover:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* ---------------- SECTION HEADING ---------------- */
.section-heading { display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; max-width:640px; margin-inline:auto; }
.section-heading--left { align-items:flex-start; text-align:left; max-width:none; margin-inline:0; }
.section-heading h2 { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:var(--text-2xl); color:var(--text-strong); line-height:var(--leading-tight); margin:0; }
.section-heading .accent { font-family:var(--font-accent); color:var(--brand-primary-press); font-weight:700; }
.section-heading .sub { font-family:var(--font-body); font-size:var(--text-md); color:var(--text-body); margin:0; line-height:var(--leading-relaxed); }

/* ---------------- AVATAR ---------------- */
.avatar { width:44px; height:44px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:17px; border:2px solid var(--surface-card); box-shadow:var(--shadow-sm); }

/* ---------------- RATING ---------------- */
.rating { display:inline-flex; align-items:center; gap:3px; }
.rating .star { font-size:18px; line-height:1; color:var(--gold-500); }
.rating .star.off { color:var(--paper-400); }

/* ---------------- BLOB ROW ---------------- */
.blob-row { display:inline-flex; gap:8px; }
.blob-row .blob { width:14px; height:14px; border-radius:50%; box-shadow:inset 0 -2px 3px rgba(0,0,0,.18), inset 0 2px 2px rgba(255,255,255,.4); }

/* ---------------- ART TILE (photo placeholder) ---------------- */
.art-tile { margin:0; display:flex; flex-direction:column; gap:8px; }
.art-tile .frame { aspect-ratio:1/1; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--surface-sunken); }
.art-tile .frame::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 45%); pointer-events:none; }
.art-tile.photo .frame::before { content:none; }
.art-tile .frame img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.art-tile.photo .frame { aspect-ratio:4/5; }
.art-tile .label { position:relative; font-family:var(--font-accent); font-weight:700; font-size:26px; color:rgba(255,255,255,.9); }
.art-tile figcaption { font-family:var(--font-accent); font-weight:600; font-size:17px; color:var(--text-muted); text-align:center; }

/* ---------------- FORM FIELDS ---------------- */
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-family:var(--font-body); font-weight:var(--fw-bold); font-size:var(--text-sm); color:var(--text-strong); }
.field label .req { color:var(--danger); margin-left:3px; }
.field .hint { font-family:var(--font-body); font-size:var(--text-xs); font-weight:600; color:var(--text-muted); }
.input, .textarea, .select-el {
  width:100%; padding:12px 15px; font-family:var(--font-body); font-size:var(--text-base);
  font-weight:var(--fw-medium); color:var(--text-strong); background:var(--surface-card);
  border:2px solid var(--border-soft); border-radius:var(--radius-md); outline:none;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.textarea { resize:vertical; min-height:96px; }
.input:focus, .textarea:focus, .select-el:focus { border-color:var(--gold-500); box-shadow:0 0 0 4px var(--focus-ring); }
.select-wrap { position:relative; width:100%; }
.select-el { appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer; }
.select-wrap .caret { position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--indigo-500); font-weight:900; font-size:12px; }

/* ---------------- HEADER ---------------- */
.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper-100) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft); }
.site-header .bar { max-width:var(--container-max); margin:0 auto; padding:12px var(--gutter); display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:11px; background:none; border:0; cursor:pointer; padding:0; text-decoration:none; flex-shrink:0; }
.brand img { width:46px; height:46px; object-fit:contain; flex-shrink:0; }
.brand .name { display:block; font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--text-strong); line-height:1.05; white-space:nowrap; }
.brand .tag-line { display:block; font-family:var(--font-accent); font-weight:600; font-size:14px; color:var(--brand-primary-press); line-height:1; margin-top:4px; white-space:nowrap; }
.site-nav { display:flex; gap:4px; margin-left:auto; }
.site-nav a { padding:8px 16px; background:none; border:0; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:15px; color:var(--text-body); border-radius:var(--radius-pill); position:relative; }
.site-nav a:hover { color:var(--text-strong); }
.site-nav a.is-active { color:var(--brand-secondary); }
.site-nav a.is-active::after { content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:var(--gold-500); }
.nav-toggle { display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-card); cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav-toggle span { display:block; width:20px; height:2px; background:var(--text-strong); border-radius:2px; }

/* ---------------- FOOTER ---------------- */
.site-footer { background:var(--surface-ink); color:var(--text-on-ink); margin-top:var(--space-12); }
.site-footer .cols { max-width:var(--container-max); margin:0 auto; padding:var(--space-10) var(--gutter) var(--space-7); display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.site-footer .brand .name { color:var(--text-on-ink); }
.site-footer p { color:var(--text-on-ink-muted); }
.site-footer h4 { color:var(--gold-400); font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; font-family:var(--font-display); }
.site-footer .flinks a { display:block; color:var(--text-on-ink-muted); font-family:var(--font-body); font-weight:600; font-size:15px; padding:5px 0; }
.site-footer .flinks a:hover { color:var(--gold-400); }
.socials { display:flex; gap:10px; }
.socials a { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--text-on-ink); font-weight:800; font-size:13px; text-decoration:none; border:1px solid rgba(255,255,255,.14); }
.socials a:hover { background:rgba(255,255,255,.16); color:#fff; }
.footer-base { border-top:1px solid rgba(255,255,255,.1); padding:18px var(--gutter); text-align:center; color:var(--text-on-ink-muted); font-size:13px; }

/* ---------------- LAYOUT HELPERS ---------------- */
/* padding-block, not the shorthand — the shorthand would reset .container's
   padding-inline to 0 and run content to the screen edge on mobile. */
.section { padding-block:var(--space-10); }
.section--sunken { background:var(--surface-sunken); }
.grid { display:grid; }
.grid-3 { grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-4 { grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-6 { grid-template-columns:repeat(6,1fr); gap:14px; }
.section-top { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap; }

/* ---------------- HERO ---------------- */
.hero { position:relative; overflow:hidden; }
.hero .dots { position:absolute; inset:0; background-image:var(--dot-grid); background-size:var(--dot-grid-size); opacity:.55; }
.hero .inner { max-width:var(--container-max); margin:0 auto; padding:var(--space-10) var(--gutter); display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative; }
.hero h1 { font-size:var(--text-4xl); line-height:1.05; margin:0 0 6px; }
.hero .deva { font-family:var(--font-accent); font-weight:600; font-size:24px; color:var(--brand-secondary); margin:0 0 16px; }
.hero .lead { font-size:var(--text-md); color:var(--text-body); line-height:1.7; max-width:460px; margin:0 0 28px; }
.hero .cta-row { display:flex; gap:14px; flex-wrap:wrap; }
.hero .stats { display:flex; gap:28px; margin-top:34px; }
.hero .stats .n { font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--text-strong); }
.hero .stats .l { font-size:13px; color:var(--text-muted); font-weight:600; }
.hero .collage { position:relative; }
.hero .collage .tiles { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero .float-card { position:absolute; left:-18px; bottom:26px; background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:12px 16px; display:flex; align-items:center; gap:10px; }
.hero .float-card .ic { width:38px; height:38px; border-radius:50%; background:var(--gold-500); display:grid; place-items:center; font-size:20px; }
.hero .float-card .t { font-family:var(--font-display); font-weight:800; color:var(--text-strong); line-height:1.2; }
.hero .float-card .s { font-size:12px; color:var(--text-muted); font-weight:600; }

/* ---------------- COURSE CARD ---------------- */
.course-card { background:var(--surface-card); border-radius:var(--radius-xl); border:1px solid var(--border-soft); box-shadow:var(--shadow-md); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.course-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.course-card .cover { position:relative; height:140px; }
.course-card .cover .medium { position:absolute; right:14px; bottom:12px; font-family:var(--font-accent); font-weight:700; font-size:30px; color:rgba(255,255,255,.92); }
.course-card .cover .badge { position:absolute; left:12px; top:12px; }
.course-card .body { padding:var(--space-5); display:flex; flex-direction:column; gap:12px; flex:1; }
.course-card .tags { display:flex; gap:7px; flex-wrap:wrap; }
.course-card h3 { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:var(--text-lg); color:var(--text-strong); margin:0; line-height:1.15; }
.course-card .sched { font-family:var(--font-body); font-size:var(--text-sm); color:var(--text-muted); font-weight:600; display:flex; align-items:center; gap:6px; }
.course-card .sched .ic { color:var(--brand-primary-press); }
.course-card .foot { margin-top:auto; padding-top:6px; }
/* Secondary action in the card body — opens the course plan PDF. Sits above the
   book button so every card's button still lines up across a row. */
.pdf-link { display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-family:var(--font-body); font-weight:var(--fw-bold); font-size:var(--text-sm); color:var(--brand-secondary); text-decoration:none; transition:color var(--dur-base) var(--ease-out); }
.pdf-link svg { width:15px; height:15px; flex:none; }
.pdf-link:hover { color:var(--brand-secondary-hover); text-decoration:underline; }

.course-empty { border:2px dashed var(--border-strong); border-radius:var(--radius-xl); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; color:var(--text-muted); gap:8px; }
.course-empty .big { font-size:28px; }
.course-empty .t { font-family:var(--font-display); font-weight:800; color:var(--text-body); }

/* ---------------- WORKSHOPS (home) ---------------- */
.workshops { background:color-mix(in srgb, var(--marigold-500) 6%, var(--bg-page)); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:var(--space-10) 0; }
.wk-meta { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:var(--font-body); font-weight:700; font-size:13.5px; color:var(--text-body); }
.wk-meta .ic { opacity:.85; }
.spotlight { display:grid; grid-template-columns:.92fr 1.08fr; background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-md); }
.spotlight .visual { position:relative; min-height:280px; }
.spotlight .visual::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 28% 22%, rgba(255,255,255,.32), transparent 48%); }
.spotlight .visual .tags { position:absolute; left:18px; top:18px; display:flex; gap:8px; }
.spotlight .visual .medium { position:absolute; right:20px; bottom:16px; font-family:var(--font-accent); font-weight:700; font-size:38px; color:rgba(255,255,255,.92); }
.spotlight .visual .seats { position:absolute; left:18px; bottom:16px; background:rgba(0,0,0,.28); backdrop-filter:blur(4px); border-radius:var(--radius-pill); padding:7px 14px; display:inline-flex; align-items:center; gap:7px; color:#fff; font-family:var(--font-body); font-weight:800; font-size:13.5px; }
.spotlight .visual .seats .dot { width:8px; height:8px; border-radius:50%; background:var(--gold-400); }
.spotlight .info { padding:var(--space-7); display:flex; flex-direction:column; gap:14px; }
.spotlight .info .tags { display:flex; gap:8px; flex-wrap:wrap; }
.spotlight .info h3 { font-family:var(--font-display); font-weight:800; font-size:var(--text-2xl); color:var(--text-strong); margin:0; line-height:1.12; }
.spotlight .info p { font-size:var(--text-md); color:var(--text-body); line-height:1.65; margin:0; }
.spotlight .info .metas { display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:2px; }
.spotlight .info .foot { margin-top:auto; padding-top:8px; }

.rail-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rail-head h3 { font-family:var(--font-display); font-weight:800; font-size:var(--text-lg); color:var(--text-strong); margin:0; }
.rail-nav { display:flex; gap:8px; }
.rail-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface-card); color:var(--text-strong); font-size:18px; font-weight:800; cursor:pointer; display:grid; place-items:center; line-height:1; }
.rail { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail-card { flex:0 0 300px; scroll-snap-align:start; background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.rail-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.rail-card .cover { position:relative; height:116px; }
.rail-card .cover .badge { position:absolute; left:12px; top:12px; }
.rail-card .cover .medium { position:absolute; right:13px; bottom:9px; font-family:var(--font-accent); font-weight:700; font-size:24px; color:rgba(255,255,255,.92); }
.rail-card .body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.rail-card h4 { font-family:var(--font-display); font-weight:800; font-size:var(--text-md); color:var(--text-strong); margin:0; line-height:1.2; }
.rail-card .row { display:flex; flex-wrap:wrap; gap:6px 14px; }
.rail-card .foot { margin-top:auto; padding-top:4px; }

/* ---------------- HELPER PANEL (indigo) ---------------- */
.helper { background:linear-gradient(120deg, var(--indigo-600), var(--indigo-800)); border-radius:var(--radius-2xl); padding:var(--space-9) var(--space-8); color:#fff; position:relative; overflow:hidden; }
.helper .blob-row { position:absolute; right:30px; top:26px; opacity:.9; }
.helper h2 { font-family:var(--font-display); font-weight:800; font-size:var(--text-3xl); margin:10px 0 8px; max-width:620px; color:#fff; }
.helper h2 .accent { font-family:var(--font-accent); color:var(--gold-400); }
.helper p { color:var(--text-on-ink-muted); font-size:var(--text-md); max-width:540px; line-height:1.7; margin:0 0 26px; }
.helper .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.helper select { padding:13px 18px; border-radius:var(--radius-pill); border:0; font-family:var(--font-body); font-weight:700; font-size:15px; color:var(--text-strong); }

/* ---------------- PAGE HEAD ---------------- */
.page-head { background:var(--surface-sunken); border-bottom:1px solid var(--border-soft); }
.page-head .inner { max-width:var(--container-max); margin:0 auto; padding:var(--space-9) var(--gutter) var(--space-7); }
.page-head h1 { font-size:var(--text-3xl); color:var(--text-strong); margin:8px 0; }
.page-head h1 .accent { font-family:var(--font-accent); color:var(--brand-primary-press); }
.page-head p { font-size:var(--text-md); color:var(--text-body); max-width:560px; margin:0; line-height:1.7; }

/* ---------------- GALLERY TABS ---------------- */
.gtabs { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.gtab { padding:9px 18px; border:0; cursor:pointer; border-radius:var(--radius-pill); font-family:var(--font-body); font-weight:800; font-size:14px; background:var(--surface-card); color:var(--text-body); box-shadow:var(--shadow-xs); }
.gtab.is-active { background:var(--indigo-500); color:#fff; }
.gpanel { display:none; }
.gpanel.is-active { display:block; }
.ba-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gnote { text-align:center; margin-top:30px; color:var(--text-muted); font-family:var(--font-accent); font-size:18px; }

/* ---------------- ABOUT ---------------- */
.about-bio { max-width:var(--container-max); margin:0 auto; padding:var(--space-10) var(--gutter); display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; }
.about-bio .photo { position:relative; }
.about-bio .photo .chip { position:absolute; right:-16px; bottom:24px; background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:12px 18px; text-align:center; }
.about-bio .photo .chip .b { font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--brand-primary-press); }
.about-bio .photo .chip .s { font-size:12px; color:var(--text-muted); font-weight:700; }
.about-bio p { font-size:var(--text-md); color:var(--text-body); line-height:1.8; margin:0 0 14px; }
.about-bio h1 .accent { font-family:var(--font-accent); color:var(--rani-500); }
.mission { background:var(--surface-ink); color:#fff; padding:var(--space-10) 0; }
.mission .inner { max-width:760px; margin:0 auto; padding:0 var(--gutter); text-align:center; }
.mission .blob-row { justify-content:center; margin-bottom:18px; }
.mission p { font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl); line-height:1.45; margin:14px 0 0; color:#fff; }
.mission .hl { color:var(--gold-400); }
.approach { max-width:var(--container-max); margin:0 auto; padding:var(--space-10) var(--gutter); }
.approach .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.step { position:relative; padding-top:36px; }
.step .num { position:absolute; top:-22px; left:24px; width:48px; height:48px; border-radius:50%; color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:22px; box-shadow:var(--shadow-md); }
.step h3 { font-family:var(--font-display); font-weight:800; font-size:var(--text-xl); color:var(--text-strong); margin:0 0 8px; }
.step p { font-size:15px; color:var(--text-body); line-height:1.65; margin:0; }

/* ---------------- TESTIMONIALS ---------------- */
.tcard .quote { font-size:16px; color:var(--text-strong); line-height:1.65; margin:14px 0 18px; font-weight:500; }
.tcard .who { display:flex; align-items:center; gap:10px; }
.tcard .who .n { font-family:var(--font-display); font-weight:800; color:var(--text-strong); }
.tcard .who .r { font-size:13px; color:var(--text-muted); font-weight:600; }

/* ---------------- BOOKING ---------------- */
.booking { max-width:var(--container-max); margin:0 auto; padding:var(--space-9) var(--gutter); display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; }
.booking h1 .accent { font-family:var(--font-accent); color:var(--brand-primary-press); }
.preselect { display:flex; align-items:center; gap:12px; background:var(--surface-sunken); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:12px 16px; margin-bottom:22px; }
.preselect .ic { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.preselect .k { font-size:12.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.preselect .v { font-family:var(--font-display); font-weight:800; color:var(--text-strong); font-size:16px; }
.type-toggle { display:inline-flex; background:var(--surface-sunken); border-radius:var(--radius-pill); padding:4px; margin-bottom:28px; }
.type-toggle button { padding:9px 22px; border:0; cursor:pointer; border-radius:var(--radius-pill); font-family:var(--font-body); font-weight:800; font-size:14.5px; background:transparent; color:var(--text-body); transition:var(--transition); }
.type-toggle button.is-active { background:var(--gold-500); color:var(--indigo-900); box-shadow:var(--shadow-sm); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.col-span { grid-column:1 / -1; }
.summary { position:sticky; top:96px; }
.summary .head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.summary .head img { width:44px; height:44px; object-fit:contain; }
.summary .head .t { font-family:var(--font-display); font-weight:800; color:var(--text-strong); font-size:18px; }
.summary ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.summary li { display:flex; gap:10px; align-items:center; font-size:14.5px; color:var(--text-body); font-weight:600; }
.summary li .ic { font-size:18px; }
.summary .fee { border-top:1px solid var(--border-soft); margin-top:18px; padding-top:16px; display:flex; align-items:baseline; justify-content:space-between; }
.summary .fee .k { font-size:14px; color:var(--text-muted); font-weight:700; }
.summary .fee .v { font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--peacock-600); }
.success { max-width:640px; margin:0 auto; padding:var(--space-12) var(--gutter); text-align:center; }
.success .icon { width:84px; height:84px; border-radius:50%; background:var(--gold-500); display:grid; place-items:center; margin:0 auto 24px; font-size:40px; box-shadow:var(--shadow-gold); }
.success p { font-size:var(--text-md); color:var(--text-body); line-height:1.7; margin:0 0 28px; }
.hidden { display:none !important; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:920px) {
  .hero .inner { grid-template-columns:1fr; gap:32px; }
  .hero h1 { font-size:var(--text-3xl); }
  .spotlight { grid-template-columns:1fr; }
  .spotlight .visual { min-height:200px; }
  .about-bio { grid-template-columns:1fr; gap:32px; }
  .booking { grid-template-columns:1fr; }
  .summary { position:static; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-6 { grid-template-columns:repeat(3,1fr); }
  .site-footer .cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  :root { --text-3xl:2.25rem; --text-4xl:2.75rem; --text-2xl:1.875rem; }
  .site-nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--paper-50); border-bottom:1px solid var(--border-soft); padding:8px var(--gutter) 16px; box-shadow:var(--shadow-md); display:none; }
  .site-header.nav-open .site-nav { display:flex; }
  .site-nav a { padding:12px 8px; font-size:16px; border-radius:var(--radius-md); }
  .site-nav a.is-active::after { display:none; }
  .nav-toggle { display:flex; }
  .header-cta { display:none; }
  .grid-3 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .approach .steps { grid-template-columns:1fr; gap:40px; }
  .form-grid { grid-template-columns:1fr; }
  .site-footer .cols { grid-template-columns:1fr; gap:28px; }
  .hero .stats { gap:18px; }
  .section-top { flex-direction:column; align-items:flex-start; }
}

/* ---------------- TESTIMONIAL MARQUEE (additive; composes existing .tcard) ---------------- */
.tmarquee { overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.tmarquee::-webkit-scrollbar { display:none; }
.tmarquee-track { display:flex; width:max-content; }
.tmarquee-track > .tcard { flex:0 0 360px; max-width:82vw; margin-right:22px; display:flex; flex-direction:column; }
.tmarquee-track > .tcard .who { margin-top:auto; }
.tmarquee.is-animated { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.tmarquee.is-animated .tmarquee-track { animation:tmarquee-scroll 55s linear infinite; }
.tmarquee.is-animated:hover .tmarquee-track,
.tmarquee.is-animated:focus-within .tmarquee-track { animation-play-state:paused; }
@keyframes tmarquee-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tmarquee.is-animated { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .tmarquee.is-animated .tmarquee-track { animation:none; }
}

/* ---------------- HAPPENING RIBBON + HERO WORKSHOP (additive) ---------------- */
@keyframes av-pulse { 0% { transform:scale(1); opacity:1; } 70% { transform:scale(1.5); opacity:.35; } 100% { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .happening .dot, .hero-wk .dot { animation:none !important; } }

.happening { background:var(--indigo-600); color:var(--text-on-ink); }
.happening .inner { max-width:var(--container-max); margin:0 auto; padding:11px var(--gutter); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.happening .live { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-weight:800; font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color:#fff; }
.happening .dot { width:9px; height:9px; border-radius:50%; background:var(--gold-400); animation:av-pulse 1.6s var(--ease-out) infinite; }
.happening .what { font-family:var(--font-body); font-weight:700; font-size:var(--text-sm); opacity:.96; }
.happening .what b { color:var(--gold-400); font-weight:800; }
.happening .cta { margin-left:auto; border:1px solid rgba(255,255,255,.5); border-radius:var(--radius-pill); padding:7px 18px; font-family:var(--font-body); font-weight:800; font-size:var(--text-sm); color:#fff; text-decoration:none; white-space:nowrap; }
.happening .cta:hover { background:rgba(255,255,255,.12); border-color:#fff; }
@media (max-width:680px) {
  .happening .inner { flex-direction:column; align-items:stretch; gap:10px; }
  .happening .what { line-height:1.5; }
  .happening .cta { margin-left:0; text-align:center; }
}

.hero-wk { background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.hero-wk .cover { position:relative; min-height:158px; padding:16px 18px; }
.hero-wk .cover::after { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 26% 22%, rgba(255,255,255,.30), transparent 50%); }
.hero-wk .live { position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--radius-pill); background:rgba(0,0,0,.30); backdrop-filter:blur(4px); font-family:var(--font-body); font-weight:800; font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.hero-wk .live .dot { width:8px; height:8px; border-radius:50%; background:var(--sindoor-500); animation:av-pulse 1.6s var(--ease-out) infinite; }
.hero-wk .medium { position:absolute; right:18px; bottom:14px; z-index:1; font-family:var(--font-accent); font-weight:700; font-size:34px; color:rgba(255,255,255,.94); }
.hero-wk .body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; }
.hero-wk .tags { display:flex; gap:8px; flex-wrap:wrap; }
.hero-wk h3 { font-family:var(--font-display); font-weight:800; font-size:var(--text-xl); color:var(--text-strong); margin:0; line-height:1.15; }
.hero-wk .metas { display:flex; flex-wrap:wrap; gap:8px 20px; }

.hero-wk-eyebrow { display:block; letter-spacing:.1em; margin-bottom:12px; }
.hero-wk-more { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.wk-seeall { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:var(--font-body); font-weight:800; font-size:13.5px; color:var(--indigo-600); text-decoration:none; }
.wk-seeall:hover { color:var(--brand-primary-press); }
.wkrow { display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); text-decoration:none; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.wkrow:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.wkrow .sw { width:34px; height:34px; border-radius:10px; flex-shrink:0; }
.wkrow .txt { flex:1; min-width:0; }
.wkrow .t { display:block; font-family:var(--font-display); font-weight:800; font-size:14.5px; color:var(--text-strong); line-height:1.2; }
.wkrow .s { display:block; font-family:var(--font-body); font-weight:700; font-size:12.5px; color:var(--text-muted); }
.wkrow .left { font-family:var(--font-body); font-weight:800; font-size:12.5px; white-space:nowrap; }
.wkrow .arrow { color:var(--text-muted); font-weight:900; }

/* ---------------- SITE BANNER (additive; existing tokens only) ---------------- */
.site-banner { position:relative; background-color:var(--paper-50); background-image:url("../assets/banner-bg.jpg"); background-size:cover; background-position:right center; background-repeat:no-repeat; border-bottom:1px solid var(--border-soft); }
.site-banner .inner { position:relative; max-width:var(--container-max); margin:0 auto; min-height:clamp(220px, 24vw, 330px); padding:var(--space-6) 24% var(--space-6) var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
.site-banner .mark { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); flex-shrink:0; text-decoration:none; }
.site-banner .mark img { display:block; width:clamp(150px, 20vw, 240px); height:auto; }
.site-banner .msme { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--gold-400); background:color-mix(in srgb, var(--paper-0) 55%, transparent); font-family:var(--font-body); font-weight:800; font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-strong); white-space:nowrap; }
.site-banner .reach { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); flex-shrink:0; }
.site-banner .phone-wrap { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); }
.site-banner .eyebrow { font-weight:700; color:var(--text-muted); }
.site-banner .phone { display:inline-flex; align-items:center; gap:12px; padding:10px 26px; border-radius:var(--radius-md); border:1px solid var(--gold-400); background:color-mix(in srgb, var(--paper-0) 55%, transparent); font-family:var(--font-body); font-weight:800; font-size:clamp(1.375rem, 2.4vw, 2rem); letter-spacing:.02em; color:var(--indigo-600); text-decoration:none; }
.site-banner .phone:hover { background:var(--paper-0); border-color:var(--gold-500); }
.site-banner .links { display:flex; align-items:center; gap:var(--space-4); }
.site-banner .links a { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; border:1px solid var(--border-soft); background:color-mix(in srgb, var(--paper-0) 62%, transparent); transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.site-banner .links a:hover { transform:translateY(-2px); border-color:var(--gold-500); background:var(--paper-0); }
.site-banner .links svg { display:block; }
@media (max-width:920px) {
  .site-banner { background-position:center; }
  .site-banner::before { content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--paper-50) 78%, transparent); }
  .site-banner .inner { flex-direction:column; text-align:center; padding:var(--space-6) var(--gutter); min-height:0; gap:var(--space-5); }
  .site-banner .reach { align-items:center; margin:0; }
  .site-banner .mark { align-items:center; }
  .site-banner .mark img { width:clamp(160px, 44vw, 220px); }
}
/* Small phones: two-up grids get too narrow to read, so go single/·2-up and
   trim the headings that were sized for a wider column. */
@media (max-width:520px) {
  /* text cards need the full width to read; photo grids stay two-up */
  .whyus-grid { grid-template-columns:1fr; gap:14px; }
  .grid-6 { grid-template-columns:1fr 1fr; }
  .section { padding-block:var(--space-9); }
  .section-heading h2, .page-head h1 { font-size:var(--text-xl); }
  .section-heading .sub { font-size:var(--text-base); }
  .hero .inner { padding-block:var(--space-8); }
  .hero h1 { font-size:var(--text-3xl); }
  .hero .lead { font-size:var(--text-base); margin-bottom:22px; }
  .hero .deva { font-size:20px; }
  .hero .cta-row .btn { width:100%; }
  .hero .stats { gap:14px; margin-top:26px; }
}

/* Phones: keep the banner compact — logo and contact stay side by side,
   scaled down, rather than stacking into a tall column. */
@media (max-width:680px) {
  .site-banner .inner { flex-direction:row; align-items:center; justify-content:center; text-align:left; gap:var(--space-4); padding:var(--space-5) var(--gutter); }
  .site-banner .mark { align-items:center; gap:var(--space-2); flex:0 1 auto; min-width:0; }
  .site-banner .mark img { width:clamp(88px, 26vw, 124px); }
  .site-banner .msme { white-space:normal; text-align:center; font-size:9.5px; letter-spacing:.04em; gap:5px; padding:4px 9px; }
  .site-banner .msme svg { width:11px; height:11px; }
  .site-banner .reach { gap:var(--space-3); flex:0 1 auto; min-width:0; }
  .site-banner .phone-wrap { gap:2px; }
  .site-banner .eyebrow { font-size:9.5px; letter-spacing:.1em; }
  .site-banner .phone { gap:8px; padding:7px 14px; font-size:1.125rem; }
  .site-banner .phone svg { width:16px; height:16px; }
  .site-banner .links { gap:10px; }
  .site-banner .links a { width:38px; height:38px; }
  .site-banner .links svg { width:19px; height:19px; }
}