/* Hallmark · macrostructure: narrative-workflow · theme: olai-chuvadi (aged palm-leaf paper, kumkum maroon, turmeric gold — the guru's own gold-on-dark lineage) · nav: N2 (wordmark + single contact link, index rail below) · footer: Ft4 (statement + index) · imagery: Ravi Varma Shiva oleograph (PD), Agastya mural (CC BY 4.0), Koil tank (CC BY 3.0), guru's own leaf · contrast: pass · mobile: verified 390 */
:root {
  /* --script-serif/--script-sans are set per language on <html> by build.mjs; Latin stays Cormorant/Plex */
  --script-serif: "Noto Serif Tamil"; --script-sans: "IBM Plex Sans";
  --font-display: "Cormorant Garamond", var(--script-serif), "Iowan Old Style", "Times New Roman", serif;
  --font-body: "IBM Plex Sans", var(--script-sans), "Helvetica Neue", Arial, sans-serif;
  --font-tamil: "Noto Serif Tamil", "Tamil Sangam MN", "Latha", serif;
  /* aged palm leaf */
  --color-paper: oklch(91% 0.040 85);
  --color-paper-2: oklch(87% 0.046 82);
  --color-paper-3: oklch(81% 0.055 78);
  --color-rule: oklch(70% 0.065 75);
  --color-neutral: oklch(52% 0.05 65);
  --color-muted: oklch(38% 0.04 55);
  --color-ink: oklch(24% 0.035 50);
  --color-ink-deep: oklch(21% 0.055 35);
  --color-ink-deeper: oklch(16% 0.05 35);
  /* kumkum + turmeric */
  --color-accent: oklch(42% 0.16 28);
  --color-accent-ink: oklch(96% 0.02 85);
  --color-gold: oklch(76% 0.12 85);
  --color-gold-deep: oklch(60% 0.12 78);
  --color-leaf: oklch(42% 0.07 110);
  --color-wa: oklch(50% 0.15 150);
  --color-focus: oklch(55% 0.17 40);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.22 0 0 0 0 0.08 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --kolam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Cpath d='M0 6h6M22 6h6' stroke='%23a0762e' stroke-width='1'/%3E%3Cpath d='M14 1l5 5-5 5-5-5z' fill='none' stroke='%23a0762e' stroke-width='1.2'/%3E%3Ccircle cx='14' cy='6' r='1.3' fill='%238d2a1c'/%3E%3C/svg%3E");
  --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-s: 16px; --space-m: 24px; --space-l: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px;
  --text-sm: 0.875rem; --text-base: 1.0625rem; --text-md: 1.25rem; --text-lg: 1.5625rem; --text-xl: 1.953rem; --text-2xl: 2.441rem; --text-3xl: 3.052rem;
  --text-display: clamp(2.3rem, 4.2vw + 1rem, 4.4rem);
  --measure: 64ch;
  --banner-height: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; font-variant-numeric: oldstyle-nums; position: relative; isolation: isolate; }
/* the leaf: grain + faint ruling lines over the whole page, fixed so it never scrolls with content */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain), repeating-linear-gradient(180deg, transparent 0 27px, oklch(40% 0.06 60 / 0.06) 27px 28px); opacity: 0.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-ink); text-decoration-color: var(--color-gold-deep); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--color-accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; color: var(--color-ink-deep); }
h1 { font-size: var(--text-display); font-weight: 600; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-s); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
[lang="ta"] { font-family: var(--font-tamil); }
html:not([lang="en"]) body { line-height: 1.75; font-variant-numeric: normal; }
html:not([lang="en"]) h1, html:not([lang="en"]) h2, html:not([lang="en"]) h3 { line-height: 1.3; letter-spacing: 0; overflow-wrap: normal; word-break: keep-all; }
html:not([lang="en"]) .contact__line { overflow-wrap: normal; word-break: keep-all; font-size: var(--text-lg); line-height: 1.35; }
html:not([lang="en"]) h1 { font-size: clamp(1.9rem, 2.6vw + 1rem, 3.3rem); }
html:not([lang="en"]) h2 { font-size: var(--text-xl); }
html:not([lang="en"]) h3, html:not([lang="en"]) .faq summary, html:not([lang="en"]) .next a { font-size: var(--text-md); }
html:not([lang="en"]) .section__kicker, html:not([lang="en"]) .hero__eyebrow, html:not([lang="en"]) .rule__tag { letter-spacing: 0; text-transform: none; }
html:not([lang="en"]) .hero__ta { display: none; }
.wrap { width: min(100% - 2 * var(--space-m), 72rem); margin-inline: auto; }
.prose { max-width: var(--measure); }
.prose h2 { margin: var(--space-2xl) 0 var(--space-s); }
.prose h3 { margin: var(--space-l) 0 var(--space-2xs); }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 var(--space-s); }
.prose li { margin-bottom: var(--space-2xs); }
.prose blockquote { margin: var(--space-l) 0; padding-left: var(--space-m); border-left: 2px solid var(--color-gold-deep); font-family: var(--font-display); font-size: var(--text-md); color: var(--color-muted); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-m) 0; font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: left; padding: var(--space-xs) var(--space-2xs); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.prose th { font-weight: 600; font-size: var(--text-sm); color: var(--color-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.tablewrap { overflow-x: auto; }

/* Ornament — a kolam chain, used under kickers and as section seams */
.ornament { display: block; height: 12px; width: 8.75rem; background: var(--kolam) left center / 28px 12px repeat-x; margin: var(--space-xs) 0 0; }
.ornament--center { margin-inline: auto; }

/* Masthead — dark maroon, gold wordmark (his own site's lineage) */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding: var(--space-s) var(--space-m); min-height: var(--banner-height); background: var(--color-ink-deep); color: var(--color-paper); border-bottom: 2px solid var(--color-gold-deep); }
.wordmark { text-decoration: none; display: flex; flex-direction: column; line-height: 1; color: var(--color-gold); min-width: 0; }
.wordmark__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: 0.01em; color: var(--color-gold); }
.wordmark__desc { font-size: var(--text-sm); color: oklch(78% 0.03 80); margin-top: var(--space-3xs); }
.masthead__actions { display: flex; align-items: center; gap: var(--space-s); }
.masthead__call, .masthead__wa { display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; font-weight: 600; font-size: var(--text-sm); text-decoration: none; line-height: 1; min-height: 40px; }
.masthead__call { color: var(--color-paper); }
.masthead__call:hover { color: var(--color-gold); }
.masthead__wa { color: var(--color-ink-deeper); background: var(--color-gold); padding: 0 var(--space-s); border-radius: 999px; }
.masthead__wa:hover { background: oklch(82% 0.12 85); }
.masthead svg { flex: none; }
.langs { position: relative; }
.langs__code { display: none; }
.langs summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-xs); border: 1px solid oklch(48% 0.08 60); border-radius: 999px; color: var(--color-paper); font-size: var(--text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.langs[open] summary::before { content: ""; position: fixed; inset: 0; z-index: 399; cursor: default; }
.langs[open] summary, .langs summary:hover { border-color: var(--color-gold); color: var(--color-gold); }
.langs ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 400; list-style: none; margin: 0; padding: var(--space-2xs) 0; min-width: 11rem; background: var(--color-paper); border: 1px solid var(--color-gold-deep); border-radius: 6px; box-shadow: 0 18px 40px -16px oklch(20% 0.06 40 / 0.55); }
.langs li a { display: block; padding: var(--space-2xs) var(--space-s); color: var(--color-ink-deep); text-decoration: none; font-size: var(--text-base); }
.langs li a:hover { background: var(--color-paper-2); color: var(--color-accent); }
.langs li a[aria-current="true"] { color: var(--color-accent); font-weight: 600; }
.langs li a[aria-current="true"]::after { content: " ✓"; }
.index { padding: 0 var(--space-m); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
.index ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-m); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.index ul::-webkit-scrollbar { display: none; }
.index a { display: block; padding: var(--space-xs) 0; font-size: var(--text-sm); white-space: nowrap; text-decoration: none; color: var(--color-muted); border-bottom: 2px solid transparent; }
.index a:hover { color: var(--color-ink); }
.index a[aria-current="page"] { color: var(--color-accent); border-color: var(--color-accent); font-weight: 600; }

/* Hero — the leaf: watermark of the guru's own leaf, deity in a temple arch, gold glow */
.hero { position: relative; padding: var(--space-xl) 0 var(--space-2xl); background: radial-gradient(120% 80% at 85% 20%, oklch(88% 0.09 85 / 0.7), transparent 60%), var(--color-paper-2); border-bottom: 1px solid var(--color-rule); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: url("/images/palm-leaf-strip.jpg") center / cover no-repeat; opacity: 0.13; mix-blend-mode: multiply; pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--kolam) center bottom / 28px 12px repeat-x; opacity: 0.75; pointer-events: none; }
.hero > .wrap { position: relative; }
@media (min-width: 56rem) { .hero { padding: var(--space-2xl) 0 var(--space-3xl); } }
/* mobile: head + small arch side by side, lede + CTA full width below; desktop: text column left, arch right spanning both rows */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; grid-template-areas: "head art" "body body"; gap: var(--space-m) var(--space-s); align-items: start; }
.hero__head { grid-area: head; min-width: 0; }
.hero__body { grid-area: body; min-width: 0; }
.hero__art { grid-area: art; width: 100%; align-self: start; margin-top: var(--space-2xs); }
.hero__eyebrow { font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-xs); font-weight: 600; }
.hero__ta { font-family: var(--font-tamil); font-size: var(--text-lg); color: var(--color-leaf); font-weight: 600; margin: 0 0 var(--space-xs); line-height: 1.3; }
.hero__lede { font-size: var(--text-md); max-width: 46ch; color: var(--color-muted); margin: 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; margin-top: var(--space-m); }
.hero__note { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-xs) 0 0; }
.hero__more { margin: var(--space-s) 0 0; font-size: var(--text-sm); font-weight: 600; }
.hero__trust { list-style: none; margin: var(--space-m) 0 0; padding: var(--space-s) 0 0; border-top: 1px solid var(--color-rule); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-deep); }
.hero__trust li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.hero__trust li::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-paper-2), 0 0 0 3px var(--color-gold-deep); flex: none; }
/* the arch: a gopuram niche — gold double line, deep shadow, the image sits inside */
.hero__frame { position: relative; margin: 0; padding: 6px; border-radius: 999px 999px 10px 10px; background: linear-gradient(180deg, var(--color-gold), var(--color-gold-deep) 70%, oklch(48% 0.1 70)); box-shadow: 0 18px 40px -18px oklch(20% 0.06 40 / 0.55), 0 0 0 1px oklch(48% 0.1 70 / 0.5); }
.hero__frame::before { content: ""; position: absolute; inset: 11px; border-radius: 999px 999px 6px 6px; border: 1px solid oklch(96% 0.03 85 / 0.7); pointer-events: none; z-index: 1; }
.hero__frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 993px 993px 5px 5px; background: var(--color-paper-3); }
.hero__frame figcaption { display: none; position: absolute; left: 0; right: 0; bottom: -1.6rem; text-align: center; font-size: 0.75rem; color: var(--color-neutral); }
@media (max-width: 35rem) { .hero__head h1 { font-size: clamp(1.9rem, 8vw, 2.3rem); } }
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "head art" "body art"; grid-template-rows: auto 1fr; gap: var(--space-m) var(--space-2xl); align-items: start; align-content: center; }
  .hero__head { align-self: end; }
  .hero__art { width: min(100%, 22rem); margin: 0; justify-self: end; align-self: center; }
  .hero__frame figcaption { display: block; }
  .hero__frame { padding: 8px; }
  .hero__frame::before { inset: 14px; }
}

/* Buttons — 8 states */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 48px; padding: 0 var(--space-m); border-radius: 4px; font-weight: 600; font-size: var(--text-base); line-height: 1; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; cursor: pointer; }
.btn--primary { background: var(--color-wa); color: var(--color-accent-ink); box-shadow: 0 1px 0 oklch(40% 0.12 150); }
.btn--primary:hover { background: oklch(46% 0.15 150); }
.btn--primary:active { background: oklch(42% 0.15 150); }
.btn--quiet { background: oklch(96% 0.025 85 / 0.6); color: var(--color-ink-deep); border-color: var(--color-gold-deep); }
.btn--quiet:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--quiet:active { background: var(--color-paper-3); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Photo band — gold hairlines top and bottom */
.band { margin: 0; border-top: 1px solid var(--color-gold-deep); border-bottom: 1px solid var(--color-gold-deep); }
.band img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--color-paper-3); }
.band figcaption { font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-xs) var(--space-m); background: var(--color-paper-2); }
@media (min-width: 56rem) { .band img { aspect-ratio: 4 / 1; } }

/* Workflow steps — numerals carry meaning (the order of a reading) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-s); padding: var(--space-l) 0; border-top: 1px solid var(--color-rule); }
.step:last-child { border-bottom: 1px solid var(--color-rule); }
.step__n { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1; color: var(--color-accent); font-variant-numeric: lining-nums tabular-nums; }
.step h3 { margin-bottom: var(--space-2xs); }
.step p { max-width: var(--measure); color: var(--color-muted); }
.step p:last-child { margin: 0; }
@media (min-width: 56rem) { .step { grid-template-columns: 6rem minmax(0, 1fr); } }

/* Section rhythm — kicker + kolam, colour shift on the trust block */
.section { padding: var(--space-2xl) 0; }
.section__head { display: block; margin-bottom: var(--space-l); }
.section__kicker { display: block; font-size: var(--text-sm); color: var(--color-accent); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-2xs); }
.section__head h2::after { content: ""; display: block; height: 12px; width: 8.75rem; background: var(--kolam) left center / 28px 12px repeat-x; margin-top: var(--space-s); }
.section--tone { background: var(--color-paper-2); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.section--dark { background: var(--color-ink-deep); color: var(--color-paper); position: relative; }
.section--dark::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.35; pointer-events: none; }
.section--dark .wrap { position: relative; }
.section--dark h2, .section--dark h3 { color: var(--color-gold); }
.section--dark a { color: var(--color-paper); text-decoration-color: var(--color-gold-deep); }
.section--dark .section__kicker { color: var(--color-gold-deep); }
.section--dark p { color: oklch(84% 0.03 85); }
.section--dark .step { border-color: oklch(32% 0.04 40); }
.section--dark .step__n { color: var(--color-gold); }
.section--dark .step h3 { color: var(--color-paper); }

/* Two-column facts */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
@media (min-width: 56rem) { .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.facts h3 { margin-bottom: var(--space-2xs); }

/* Rules list — authentic vs fake */
.rules { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
.rule { padding: var(--space-m); border: 1px solid var(--color-rule); border-radius: 4px; background: var(--color-paper); box-shadow: inset 0 0 0 1px oklch(96% 0.02 85 / 0.6); }
.rule__tag { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-2xs); }
.rule--yes { border-color: oklch(60% 0.08 110); }
.rule--yes .rule__tag { color: var(--color-leaf); }
.rule--no { border-color: oklch(62% 0.12 30); }
.rule--no .rule__tag { color: var(--color-accent); }
.rule p { margin: 0; color: var(--color-muted); }
@media (min-width: 56rem) { .rules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Fees table */
.fees { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.fees th, .fees td { text-align: left; padding: var(--space-s) var(--space-2xs); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.fees th { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.fees td:last-child { white-space: nowrap; font-weight: 600; }
@media (max-width: 35rem) {
  .fees thead { display: none; }
  .fees tr { display: block; padding: var(--space-s) 0; border-bottom: 1px solid var(--color-rule); }
  .fees td { display: block; border: 0; padding: var(--space-3xs) 0; }
  .fees td[data-label]::before { content: attr(data-label) ": "; color: var(--color-muted); font-weight: 400; }
}

/* FAQ — details */
.faq { max-width: var(--measure); }
.faq details { border-top: 1px solid var(--color-rule); }
.faq details:last-child { border-bottom: 1px solid var(--color-rule); }
.faq summary { cursor: pointer; padding: var(--space-s) 0; font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--space-s); color: var(--color-ink-deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); font-family: var(--font-body); }
.faq details[open] summary::after { content: "–"; }
.faq .faq__a { padding: 0 0 var(--space-m); color: var(--color-muted); max-width: var(--measure); }

/* Portrait block — the guru, framed like the deity */
.portrait { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: start; }
.portrait img { width: min(100%, 20rem); border-radius: 999px 999px 8px 8px; background: var(--color-paper-3); padding: 6px; box-shadow: 0 0 0 1px var(--color-gold-deep), inset 0 0 0 1px var(--color-gold-deep); }
@media (min-width: 56rem) { .portrait { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

/* Deity plate — full-width devotional image with its name, used between sections */
.plate { margin: 0; position: relative; background: var(--color-ink-deep); border-top: 2px solid var(--color-gold-deep); border-bottom: 2px solid var(--color-gold-deep); }
.plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.92; }
.plate figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-m); font-family: var(--font-display); font-size: var(--text-md); color: var(--color-gold); background: linear-gradient(180deg, transparent, oklch(16% 0.05 35 / 0.85)); text-shadow: 0 1px 2px oklch(10% 0.03 35); }
.plate figcaption small { display: block; font-family: var(--font-body); font-size: 0.75rem; color: oklch(80% 0.03 85); margin-top: var(--space-3xs); }
@media (min-width: 56rem) { .plate img { aspect-ratio: 3 / 1; } }

/* Read next */
.next { padding: var(--space-2xl) 0; }
.next ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }
.next a { display: block; padding: var(--space-s) 0; border-top: 1px solid var(--color-gold-deep); text-decoration: none; font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; color: var(--color-ink-deep); }
.next a:hover { color: var(--color-accent); }
.next a small { display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); margin-top: var(--space-3xs); }
@media (min-width: 56rem) { .next ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* Contact panel — three ways to reach the centre, on every page */
.contact { background: var(--color-ink-deep); color: var(--color-paper); padding: var(--space-2xl) var(--space-m); border-top: 2px solid var(--color-gold-deep); position: relative; }
.contact::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.35; pointer-events: none; }
.contact__inner { position: relative; width: min(100%, 72rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: center; }
.contact .section__kicker { color: var(--color-gold-deep); }
.contact__line { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; color: var(--color-gold); margin: 0 0 var(--space-xs); max-width: 24ch; }
.contact__sub { color: oklch(84% 0.03 85); margin: 0; }
.contact__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.way { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "icon label" "icon value"; column-gap: var(--space-s); align-items: center; padding: var(--space-s) var(--space-m); min-height: 64px; border: 1px solid oklch(45% 0.08 60); border-radius: 6px; background: oklch(26% 0.05 38); color: var(--color-paper); text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
.way svg { grid-area: icon; width: 22px; height: 22px; color: var(--color-gold); }
.way__label { grid-area: label; font-weight: 600; line-height: 1.3; }
.way__value { grid-area: value; font-size: var(--text-sm); color: oklch(80% 0.03 85); overflow-wrap: anywhere; line-height: 1.4; }
.way:hover { border-color: var(--color-gold); background: oklch(29% 0.055 38); }
.way--wa { background: var(--color-wa); border-color: var(--color-wa); }
.way--wa svg, .way--wa .way__value { color: var(--color-accent-ink); }
.way--wa:hover { background: oklch(46% 0.15 150); border-color: oklch(46% 0.15 150); }
@media (min-width: 56rem) { .contact__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-2xl); } }
.footer { padding: var(--space-2xl) var(--space-m) var(--space-4xl); background: var(--color-ink-deeper); color: oklch(80% 0.03 85); font-size: var(--text-sm); border-top: 1px solid oklch(32% 0.04 40); }
.footer a { color: var(--color-paper); text-decoration-color: var(--color-gold-deep); }
.footer__grid { width: min(100%, 72rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
.footer__name { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-gold); font-weight: 700; margin-bottom: var(--space-2xs); }
.footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.footer__langs { width: min(100%, 72rem); margin: var(--space-l) auto 0; padding-top: var(--space-m); border-top: 1px solid oklch(30% 0.04 40); }
.footer__langs p { margin: 0 0 var(--space-2xs); color: var(--color-gold-deep); }
.footer__langs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); font-size: var(--text-base); }
.footer__legal { width: min(100%, 72rem); margin: var(--space-l) auto 0; color: oklch(62% 0.03 80); }
@media (min-width: 56rem) { .footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* Floating WhatsApp — modest */
.wa-float { position: fixed; right: var(--space-s); bottom: var(--space-s); z-index: 300; display: inline-flex; align-items: center; gap: var(--space-2xs); background: var(--color-wa); color: var(--color-accent-ink); padding: 0 var(--space-s); height: 44px; border-radius: 22px; text-decoration: none; font-weight: 600; font-size: var(--text-sm); line-height: 1; box-shadow: 0 2px 8px oklch(20% 0.02 60 / 0.35); }
.wa-float:hover { background: oklch(46% 0.15 150); }
.wa-float:active { background: oklch(42% 0.15 150); }
@media (min-width: 56rem) { .wa-float { display: none; } }
@media (max-width: 40rem) {
  .masthead { padding: var(--space-xs) var(--space-s); gap: var(--space-xs); }
  .wordmark__name { font-size: 1.125rem; white-space: nowrap; }
  .wordmark__desc { display: none; }
  .masthead__actions { gap: var(--space-2xs); }
  .langs__native { display: none; }
  .langs__code { display: inline; font-size: 0.8125rem; letter-spacing: 0.04em; }
  .masthead__num, .masthead__wa span { display: none; }
  .masthead__call, .masthead__wa { width: 40px; justify-content: center; padding: 0; border-radius: 999px; }
  .masthead__call { border: 1px solid oklch(48% 0.08 60); }
  .langs summary { padding: 0 10px; }
}
@media (max-width: 22rem) { .wordmark__name { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 35rem) {
  .hero__cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .hero__cta .btn { min-height: 52px; padding: 0 var(--space-s); }
  /* 2: headings never outrank the H1 on a phone */
  .section h2, .prose h2 { font-size: clamp(1.45rem, 6vw, 1.75rem); }
  .contact__line { font-size: clamp(1.4rem, 6vw, 1.7rem); }
  html:not([lang="en"]) .section h2, html:not([lang="en"]) .prose h2, html:not([lang="en"]) .contact__line { font-size: 1.3rem; }
  html:not([lang="en"]) .hero__head h1 { font-size: 1.7rem; }
  /* 1: Indic H1s get the full width; the arch moves above as a small medallion */
  html:not([lang="en"]) .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "head" "body"; }
  html:not([lang="en"]) .hero__art { width: 5.5rem; margin: 0; }
  body { padding-bottom: 72px; }
  .section__cta .btn { width: 100%; }
}
.section__cta { margin: var(--space-l) 0 0; }
.section--dark .section__cta .btn--primary { box-shadow: none; }
.wa-float { bottom: max(var(--space-s), env(safe-area-inset-bottom)); }