/* ===== Theme tokens =====
   Shares no value with sites/jayaram/styles.css. That site is saffron /
   maroon / gold on cream with soft 16px pills and a dark hero; this one is
   indigo / copper on sandalwood with sharp 5px corners and a light hero
   under a dark header. */
:root {
  --indigo: #2b2d6e;
  --indigo-deep: #1b1c4a;
  --indigo-night: #131437;
  --copper: #b4632a;
  --copper-deep: #8f4a1c;
  --copper-lit: #d98b4a;
  --brass: #c9a227;
  --brass-soft: #e8d49a;
  --sand: #f6f1e7;
  --sand-2: #ece3d2;
  --sand-3: #ded2bb;
  --ink: #221f1a;
  --ink-soft: #5a5348;
  --white: #ffffff;
  --wa: #25d366;
  --shadow: 0 2px 10px rgba(27, 28, 74, 0.07);
  --shadow-lg: 0 14px 38px rgba(27, 28, 74, 0.14);
  --radius: 5px;
  --maxw: 1140px;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Karla", "Helvetica Neue", system-ui, sans-serif;
  --h1: clamp(2.1rem, 4.4vw, 3.5rem);
  --h2: clamp(1.8rem, 3.3vw, 2.5rem);
  --lh: 1.7;
  --lh-head: 1.15;
  --track: .19em;
  --track-sm: .13em;
}

/* Per-language type. applyLanguage() sets <html lang>, and redefining the
   tokens there swaps every face at once — `html[lang]` (0,1,1) outranks
   `:root` (0,1,0). Cormorant Garamond has a small x-height and the Noto Serif
   Indic faces do not, so headings are stepped down and given more leading
   rather than reused at the Latin sizes. */
html[lang="kn"] { --display: "Noto Serif Kannada", Georgia, serif; --body: "Noto Serif Kannada", system-ui, sans-serif; }
html[lang="hi"] { --display: "Noto Serif Devanagari", Georgia, serif; --body: "Noto Serif Devanagari", system-ui, sans-serif; }
html[lang="te"] { --display: "Noto Serif Telugu", Georgia, serif; --body: "Noto Serif Telugu", system-ui, sans-serif; }

html[lang="kn"], html[lang="hi"], html[lang="te"] {
  --h1: clamp(1.6rem, 3.3vw, 2.5rem);
  --h2: clamp(1.4rem, 2.5vw, 1.95rem);
  --lh: 1.9;
  --lh-head: 1.45;
  /* Tracking is a Latin small-caps device. Applied to Kannada, Devanagari or
     Telugu it prises conjuncts apart and hurts legibility. */
  --track: 0;
  --track-sm: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--sand);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: var(--lh-head); color: var(--indigo-deep); }

a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ===== Buttons: square-ish, not pills ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.25rem; border-radius: 4px; font-weight: 600; font-size: .95rem;
  font-family: var(--body); letter-spacing: .01em;
  cursor: pointer; border: 1.5px solid transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn-lg { padding: .9rem 1.6rem; font-size: 1rem; }
.btn-call { background: var(--copper); color: var(--white); }
.btn-call:hover { background: var(--copper-deep); }
.btn-wa { border-color: var(--wa); color: #12703a; background: rgba(37, 211, 102, .08); }
.btn-wa:hover { background: rgba(37, 211, 102, .18); }
.btn-ghost { border-color: rgba(232, 212, 154, .5); color: var(--brass-soft); }
.btn-ghost:hover { background: rgba(232, 212, 154, .12); }

/* ===== Header: dark, unlike Jayaram's light sticky bar ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--indigo-deep);
  border-bottom: 2px solid var(--copper);
}
.nav-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding: .6rem 22px; }
/* min-width:0 lets the brand shrink below its text width, so a long name
   wraps to two lines instead of shoving the hamburger onto its own row. */
.brand { display: flex; align-items: center; gap: .65rem; margin-right: auto; min-width: 0; }
.brand-mark { width: 26px; height: 34px; flex: none; }   /* 32:42, the symbol's aspect */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-family: var(--display); color: var(--sand); font-size: 1.22rem; font-weight: 600; }
.brand-text small { color: var(--brass); font-size: .7rem; letter-spacing: var(--track-sm); text-transform: uppercase; }

.main-nav { display: flex; gap: 1.5rem; margin-left: auto; }
.main-nav a { font-size: .9rem; font-weight: 500; color: var(--brass-soft); padding-bottom: 2px; border-bottom: 1.5px solid transparent; }
.main-nav a:hover { color: var(--white); border-bottom-color: var(--copper-lit); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 40px; height: 40px; margin-left: auto; padding: 0;
  background: transparent; border: 1px solid rgba(232, 212, 154, .45); border-radius: 4px; cursor: pointer;
}
.nav-toggle span { display: block; width: 19px; height: 1.5px; background: var(--brass-soft); margin: 0 auto; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-call-mobile { display: none; }
.nav-actions { display: flex; align-items: center; gap: .75rem; margin-left: 1.1rem; }

.lang-switch { display: inline-flex; border: 1px solid rgba(232, 212, 154, .4); border-radius: 4px; overflow: hidden; }
.lang-switch button {
  border: 0; background: transparent; padding: .32rem .55rem; cursor: pointer;
  font-family: var(--body); font-size: .8rem; color: var(--brass-soft); transition: background .15s;
}
.lang-switch button:hover { background: rgba(232, 212, 154, .14); }
.lang-switch button.active { background: var(--copper); color: var(--white); }

/* ===== Hero: light and split, not dark and centred ===== */
.hero { background: linear-gradient(180deg, var(--sand) 0%, var(--sand-2) 100%); }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem;
  align-items: center; padding: 4.2rem 22px 4.4rem;
}
.hero-eyebrow {
  font-size: .76rem; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--copper-deep); font-weight: 700; margin-bottom: 1.1rem;
}
.hero h1 { font-size: var(--h1); margin-bottom: 1.2rem; }
.hero-lead { font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--ink-soft); max-width: 36em; margin-bottom: 1.9rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.hero-note { font-size: .88rem; color: var(--ink-soft); padding-left: .9rem; border-left: 2px solid var(--brass); }

/* Motif panel: stands in for a portrait. Sized at the final photo's ratio so
   swapping in <img> is a one-line change. */
.hero-motif {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius);
  background: radial-gradient(circle at 50% 40%, #33356f 0%, var(--indigo-deep) 62%, var(--indigo-night) 100%);
  border: 1px solid rgba(201, 162, 39, .3);
  box-shadow: var(--shadow-lg);
  overflow: hidden; display: grid; place-items: center;
}
.hero-motif::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 165%; aspect-ratio: 1;
  background: repeating-radial-gradient(circle, transparent 0 25px, rgba(201, 162, 39, .14) 25px 26px);
}
.hero-motif::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(201, 162, 39, .2), transparent 58%);
}
.hero-motif img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* ===== Credentials strip ===== */
.strip { background: var(--indigo-night); }
/* Dividers come from borders, not a grid-gap background: this element is also
   .container, so a background would paint across its 22px side padding too. */
/* Two stats, capped and centred rather than stretched across the full band —
   at 1fr each they'd sit marooned at opposite edges. */
.strip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 330px)); justify-content: center; }
.stat { padding: 1.7rem 1.4rem; text-align: center; }
.stat + .stat { border-left: 1px solid rgba(232, 212, 154, .16); }
.stat b {
  display: block; font-family: var(--display); font-size: 2.3rem; font-weight: 600;
  color: var(--copper-lit); line-height: 1.1; overflow-wrap: anywhere;
}
.stat span { display: block; font-size: .84rem; color: var(--brass-soft); margin-top: .3rem; }

/* ===== Sections ===== */
.section { padding: 4.4rem 0; }
.section-alt { background: var(--sand-2); }
.section-head { max-width: 46em; margin-bottom: 2.6rem; }   /* left-aligned, not centred */
.eyebrow { font-size: .75rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--copper-deep); font-weight: 700; margin-bottom: .55rem; }
.section h2 { font-size: var(--h2); margin-bottom: .7rem; }
.section h2::after { content: ""; display: block; width: 54px; height: 2px; background: var(--copper); margin-top: .85rem; }
.section-sub { color: var(--ink-soft); }

/* ===== About ===== */
.about-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3.2rem; align-items: start; }
.about-body p { color: var(--ink-soft); margin-bottom: 1.1rem; }
.about-body p:first-of-type { font-size: 1.1rem; color: var(--ink); }
.about-aside {
  background: var(--white); border: 1px solid var(--sand-3);
  border-left: 3px solid var(--copper); border-radius: var(--radius);
  padding: 1.6rem 1.7rem; box-shadow: var(--shadow);
}
.about-aside h3 { font-size: 1.15rem; margin-bottom: .9rem; }
.about-points { list-style: none; display: grid; gap: .8rem; }
.about-points li { position: relative; padding-left: 1.5rem; font-size: .94rem; color: var(--ink-soft); }
.about-points li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
}

/* ===== Services: grouped accordion, not a card grid ===== */
.svc-groups { display: grid; gap: 2.4rem; }
.svc-group-head { margin-bottom: .9rem; }
.svc-group-head h3 { font-size: 1.45rem; }
.svc-group-head p { font-size: .92rem; color: var(--ink-soft); margin-top: .25rem; }
.svc-list { border-top: 1px solid var(--sand-3); }
details.svc { border-bottom: 1px solid var(--sand-3); background: transparent; }
details.svc summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.4rem 1.05rem .2rem;
  font-family: var(--display); font-size: 1.18rem; font-weight: 600; color: var(--indigo-deep);
  position: relative; transition: color .15s;
}
details.svc summary::-webkit-details-marker { display: none; }
details.svc summary:hover { color: var(--copper-deep); }
details.svc summary::after {
  content: ""; position: absolute; right: .55rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--copper); border-bottom: 1.5px solid var(--copper);
  transform: rotate(45deg); transition: transform .2s ease;
}
details.svc[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.svc p { padding: 0 2.4rem 1.2rem .2rem; color: var(--ink-soft); max-width: 62em; }
details.svc .btn { margin: 0 0 1.3rem .2rem; }

/* ===== Process: vertical timeline, not side-by-side cards ===== */
.timeline { list-style: none; position: relative; max-width: 45em; padding-left: 3.2rem; }
.timeline::before {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px;
  width: 1px; background: var(--sand-3);
}
.tl-item { position: relative; padding-bottom: 2.1rem; counter-increment: tl; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: counter(tl); position: absolute; left: -3.2rem; top: 0;
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--sand); border: 1.5px solid var(--copper); color: var(--copper-deep);
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  display: grid; place-items: center;
}
.timeline { counter-reset: tl; }
.tl-item h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.tl-item p { color: var(--ink-soft); }

/* ===== Photographs =====
   Dark band, echoing the credentials strip. Tiles are 3/4 because seven of the
   nine photographs are portrait; the two landscape frames take .g-wide so they
   span two columns at 3/2 instead of being cropped to a slot that doesn't suit
   them. */
.gallery { background: var(--indigo-night); padding: 4.4rem 0; }
.gallery .eyebrow { color: var(--brass); }
.gallery h2 { color: var(--sand); }
.gallery h2::after { background: var(--brass); }
.gallery .section-sub { color: var(--brass-soft); }
/* dense: a .g-wide tile that won't fit the columns left on a row wraps and
   leaves a hole behind it. Dense packing lets a later single tile backfill
   that slot, so the grid stays flush at every column count. */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-auto-flow: dense; gap: 12px;
}
.gallery-grid figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--indigo-deep); }
.gallery-grid img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3 / 4; transition: transform .4s ease;
}
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid .g-wide { grid-column: span 2; }
.gallery-grid .g-wide img { aspect-ratio: 3 / 2; }

/* ===== Preparation guide ===== */
.prep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.prep-col {
  background: var(--white); border: 1px solid var(--sand-3); border-radius: var(--radius);
  padding: 1.6rem 1.7rem; box-shadow: var(--shadow);
}
.prep-col h3 { font-size: 1.2rem; padding-bottom: .8rem; margin-bottom: .95rem; border-bottom: 1px solid var(--sand-2); }
.prep-col ul { list-style: none; display: grid; gap: .7rem; }
.prep-col li { position: relative; padding-left: 1.45rem; font-size: .93rem; color: var(--ink-soft); }
.prep-col li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 8px; height: 5px; border-left: 1.5px solid var(--copper); border-bottom: 1.5px solid var(--copper);
  transform: rotate(-45deg);
}

/* ===== FAQ ===== */
/* The list is narrow for readability, but the heading keeps the same left edge
   as every other section — constraining .container itself would indent both. */
.faq-list { max-width: 47em; border-top: 1px solid var(--sand-3); }
.faq-item { border-bottom: 1px solid var(--sand-3); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.2rem 1.1rem 0;
  font-weight: 600; font-size: 1rem; color: var(--indigo-deep); position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A "+" that loses its upright to become "−". Both strokes share a centre at
   6.4px + 11px/2 = 11.9px from the right edge. */
.faq-item summary::after {
  content: ""; position: absolute; right: 6.4px; top: 50%; width: 11px; height: 1.5px;
  margin-top: -.75px; background: var(--copper);
}
.faq-item summary::before {
  content: ""; position: absolute; right: 11.15px; top: 50%; width: 1.5px; height: 11px;
  margin-top: -5.5px; background: var(--copper); transition: opacity .2s ease;
}
.faq-item[open] summary::before { opacity: 0; }
.faq-item p { padding: 0 0 1.25rem; color: var(--ink-soft); }

/* ===== Contact: full-width dark call band ===== */
.call-band { background: linear-gradient(160deg, var(--indigo) 0%, var(--indigo-deep) 60%, var(--indigo-night) 100%); color: var(--sand); }
.call-band .eyebrow { color: var(--brass); }
.call-band h2 { color: var(--sand); }
.call-band h2::after { background: var(--brass); }
.band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.band-copy > p { color: var(--brass-soft); margin-bottom: 1.8rem; }
.band-number {
  font-family: var(--display); font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 600;
  color: var(--white); display: inline-block; margin-bottom: .3rem;
  border-bottom: 2px solid var(--copper-lit); overflow-wrap: anywhere;
}
.band-number-label { font-size: .74rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--brass); display: block; margin-bottom: .45rem; }
.band-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.6rem 0 1.7rem; }
.band-meta { display: grid; gap: .55rem; font-size: .9rem; }
.band-meta div { color: var(--brass-soft); }
.band-meta strong { color: var(--sand); font-weight: 600; }
.band-map iframe { width: 100%; min-height: 330px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* ===== Footer ===== */
.site-footer { background: var(--indigo-night); color: var(--brass-soft); padding: 2.2rem 0; border-top: 1px solid rgba(232, 212, 154, .14); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: .6rem; }
.footer-brand svg { width: 20px; height: 26px; flex: none; }
.footer-brand span { font-family: var(--display); font-size: 1.1rem; color: var(--sand); }
.footer-links { display: flex; gap: 1.2rem; font-size: .9rem; }
.footer-links a { color: var(--brass); }
.footer-links a:hover { color: var(--white); }
.footer-copy { font-size: .8rem; opacity: .7; width: 100%; }

/* ===== Floating call button (no pulse — Jayaram's WhatsApp FAB has one) ===== */
.fab-call {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%; background: var(--copper);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(143, 74, 28, .45);
  transition: background .16s ease;
}
.fab-call:hover { background: var(--copper-deep); }
.fab-call svg { width: 23px; height: 23px; fill: var(--white); }

/* ===== Responsive =====
   The nav collapses earlier than the page layout does. Six nav labels, four
   language buttons and a CTA fit on one row in English down to ~860px, but the
   Kannada, Telugu and Hindi labels are wider and wrap the header into two rows
   well before that. Collapsing at 1080px keeps one rule set for all four
   languages instead of an Indic-only duplicate of the whole mobile nav. */
@media (max-width: 1080px) {
  /* Drop the brand's auto margin here: it and .nav-actions' auto left margin
     both absorb the free space, leaving none for the toggle, which then
     wraps to a row of its own. One auto margin is enough to push the
     controls right. */
  .brand { margin-right: 0; }
  .nav-toggle { display: flex; order: 3; margin-left: .6rem; }
  .nav-actions { order: 2; margin-left: auto; }
  .main-nav {
    order: 4; flex-basis: 100%; flex-direction: column; gap: 0;
    margin-left: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .main-nav.open { max-height: 460px; }
  .main-nav a { padding: .85rem .2rem; border-bottom: 1px solid rgba(232, 212, 154, .18); font-size: 1rem; }
  .nav-call-mobile { display: inline-flex; margin: .85rem 0 .5rem; align-self: flex-start; border-bottom: 0; }
  .nav-call-desktop { display: none; }
}

@media (max-width: 860px) {
  /* Copy first, motif demoted to a band so the CTAs stay above the fold */
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 22px 3.2rem; }
  /* Square, not the old 16/7 band: that ratio was for the drawn motif and
     decapitates a portrait. The panel sits after the CTAs in source order,
     so its height costs nothing above the fold. */
  .hero-motif { aspect-ratio: 1 / 1; order: 2; }

  .strip-grid { grid-template-columns: 1fr; }
  .stat { padding: 1.3rem 1.4rem; display: flex; align-items: baseline; gap: .8rem; text-align: left; }
  .stat + .stat { border-left: 0; border-top: 1px solid rgba(232, 212, 154, .16); }
  .stat b, .stat span { min-width: 0; }   /* let both shrink; flex defaults to min-content */
  .stat b { font-size: 1.8rem; }
  .stat span { margin-top: 0; }

  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .prep-grid { grid-template-columns: 1fr; }
  .band-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer-inner { justify-content: center; text-align: center; }
  .footer-copy { text-align: center; }
}

@media (max-width: 540px) {
  .brand-text small { display: none; }
  /* Brand, language switch and hamburger have to share one row. The brand is
     capped so its text wraps rather than forcing the toggle onto a row of its
     own, and the gaps tighten to buy the room back. */
  .nav-inner { gap: .5rem; }
  .brand { max-width: 52%; }
  .brand-text strong { font-size: .95rem; line-height: 1.22; }
  .lang-switch button { padding: .26rem .4rem; font-size: .72rem; }
}

@media (max-width: 420px) {
  .brand { max-width: 44%; }
  .brand-text strong { font-size: .85rem; }
  .lang-switch button { padding: .24rem .32rem; font-size: .68rem; }
  .lang-switch button { padding: .28rem .42rem; font-size: .74rem; }
  .section { padding: 3.1rem 0; }
  .timeline { padding-left: 2.7rem; }
  .tl-item::before { left: -2.7rem; width: 27px; height: 27px; font-size: .95rem; }
  .timeline::before { left: 13px; }
  .hero-cta .btn, .band-actions .btn { width: 100%; }
  .about-aside, .prep-col { padding: 1.3rem 1.35rem; }
}