/* ============================================================================
   TELANGANA LAW FIRM  ·  BRAND LAYER
   Positioning: an advocates' office in Hyderabad. Informational, not
   promotional. Bar Council of India Rule 36 governs every decision here —
   no persuasion devices, no urgency, no proof-of-outcome components.
   Palette: ink-navy ground, ivory paper, muted antique gold used sparingly.
   Type: Libre Baskerville (display) + Inter (body). A legal journal, set well.
   ========================================================================== */

:root{
  --ink:#101a2c;
  --ink-2:#1a2740;
  --paper:#faf9f6;
  --paper-2:#f1efe9;
  --line:#ddd9cf;
  --accent:#8a6d3f;
  --accent-soft:#b39461;
  --muted:#5c5a54;

  --font-display:"Libre Baskerville",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --header-h:80px;
}
@media (max-width:800px){:root{--header-h:66px}}

/* ---------- 1. TYPE CORRECTION ------------------------------------------
   Libre Baskerville sets very large on the em and carries no light weight.
   Pull the display scale down a step and give it room to breathe.
------------------------------------------------------------------------- */
h1,h2,h3,h4,.display{font-weight:400;letter-spacing:-.006em;line-height:1.18}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
.display-xl{font-size:var(--step-6)}
.display-lg{font-size:var(--step-5)}
.display-md{font-size:var(--step-4)}
.display-sm{font-size:var(--step-3)}

body{line-height:1.72;font-size:var(--step-0);letter-spacing:.001em}
p{max-width:var(--measure)}
strong,b{font-weight:600}

/* The italic accent stays sober — no colour shift, no flourish. */
.script{font-style:italic;color:inherit}

.eyebrow{letter-spacing:.24em;font-weight:600;color:var(--accent)}
.lede{font-size:var(--step-1);line-height:1.62}

/* Indic + Perso-Arabic script sizing: both need a touch more size and leading
   than Latin at the same nominal step. */
[lang="te"]{line-height:1.85;font-size:1.04em}
[lang="ur"]{line-height:1.95;font-size:1.06em;font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif}
[lang="hi"]{line-height:1.85}

/* ---------- 2. RESTRAINT OVERRIDES --------------------------------------
   Core ships a persuasive button (sheen sweep, lift, glow shadow). An
   advocates' site should not sell. Square the corners, kill the motion.
------------------------------------------------------------------------- */
.btn{
  border-radius:2px;
  letter-spacing:.14em;font-weight:600;
  box-shadow:none;
  padding:1em 1.9em;
}
.btn::before{display:none}
.btn:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--btn-bg) 86%,#000)}
.btn:active{transform:none}
.btn--ghost{border-color:var(--hairline)}
.btn--ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn--light:hover{background:var(--paper-2);color:var(--ink)}

.card{border-radius:2px;transition:border-color var(--t-mid) var(--ease-out)}
.card--hover:hover{transform:none;box-shadow:none;border-color:var(--accent)}
.rounded,.ph{border-radius:2px}

/* Reveals are barely there. Nothing on this site should move much. */
[data-reveal]{transform:none;transition:opacity 520ms var(--ease-out)}

/* ---------- 3. THE DISCLAIMER GATE --------------------------------------
   Not a `.modal`: core.js closes `.modal` on backdrop click and on Escape,
   and this gate must be dismissible only by an explicit choice. It is
   visible by default and hidden only once the acknowledgement is recorded,
   so a scripting failure fails closed rather than open.
------------------------------------------------------------------------- */
.gate{
  position:fixed;inset:0;z-index:2000;
  display:grid;place-items:center;
  padding:var(--gutter);
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  overflow-y:auto;
}
.gate__panel{
  width:min(100%,720px);
  max-height:92dvh;overflow-y:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  padding:clamp(1.5rem,4vw,3rem);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
.gate__mark{width:44px;height:44px;color:var(--accent);margin-bottom:var(--s-md)}
.gate__panel h2{font-size:var(--step-2);margin-bottom:var(--s-sm)}
.gate__panel p{
  font-size:var(--step--1);line-height:1.75;color:var(--muted);
  max-width:none;
}
.gate__panel p+p{margin-top:.9em}
.gate__acts{
  display:flex;flex-wrap:wrap;gap:var(--s-sm);
  margin-top:var(--s-lg);padding-top:var(--s-md);
  border-top:1px solid var(--line);
}
.gate__acts .btn{flex:1 1 190px}
html[data-gate="accepted"] .gate{display:none}
html:not([data-gate="accepted"]) body{overflow:hidden}

/* ---------- 4. HEADER ---------- */
.header__in{border-bottom:1px solid transparent}
.brand{font-size:var(--step-1);gap:.75rem}
.brand__mark{width:36px;height:36px;color:var(--accent)}
.brand b{font-weight:400;display:block;line-height:1.1}
.brand small{letter-spacing:.26em;font-size:9px;margin-top:4px}
.nav a{letter-spacing:.02em}
.nav a::after{background:var(--accent)}
/* The contact link is a link, never a conversion button. */
.nav-contact{
  font-size:var(--step--1);font-weight:500;text-decoration:none;
  padding-block:.35em;border-bottom:1px solid var(--accent);
  transition:color var(--t-fast);
}
.nav-contact:hover{color:var(--accent)}
@media (max-width:960px){
  .header__cta .nav-contact{display:none}
}

/* ---------- 5. HERO ---------- */
.hero{
  padding-top:calc(var(--header-h) + clamp(3rem,7vw,6rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  border-bottom:1px solid var(--line);
  position:relative;
}
.hero__rule{width:72px;height:2px;background:var(--accent);margin-bottom:var(--s-lg)}
.hero h1{margin-bottom:var(--s-md)}
.hero__te{
  font-family:var(--font-body);
  font-size:var(--step-1);color:var(--muted);
  margin-top:-.4em;margin-bottom:var(--s-md);
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  margin-top:var(--s-lg);padding-top:var(--s-md);
  border-top:1px solid var(--line);
  font-size:var(--step--1);color:var(--muted);
}
.hero__meta span{display:inline-flex;align-items:center;gap:.5em}
.hero__meta svg{width:16px;height:16px;color:var(--accent);flex:none}

/* ---------- 6. SECTION HEADS ---------- */
.sec-head{margin-bottom:clamp(2rem,4vw,3.25rem);max-width:var(--measure)}
.sec-head h2{margin-bottom:var(--s-sm)}
.sec-head p{color:var(--fg-muted)}

/* ---------- 7. PRACTICE INDEX -------------------------------------------
   A ruled two-column index rather than a card grid — closer to a set of
   chamber notes than to a product page. Grid rows keep the hairlines
   aligned across both columns.
------------------------------------------------------------------------- */
.pa{display:grid;border-bottom:1px solid var(--hairline)}
@media (min-width:920px){
  .pa{grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,5vw,5rem)}
}
.pa__item{
  border-top:1px solid var(--hairline);
  padding:clamp(1.4rem,2.6vw,1.9rem) 0;
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-md);
  align-content:start;
}
.pa__ico{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  color:var(--accent);border-radius:2px;margin-top:.2em;
}
.pa__ico svg{width:18px;height:18px}
.pa__item h3{font-size:var(--step-1);margin-bottom:.45em;line-height:1.3}
.pa__item p{font-size:var(--step--1);color:var(--fg-muted);line-height:1.7;max-width:52ch}
.pa__where{
  display:block;margin-top:.7em;
  font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}

/* ---------- 8. INSIGHT NOTES ---------- */
.note{
  display:flex;flex-direction:column;
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:clamp(1.4rem,3vw,1.9rem);
  text-decoration:none;
  transition:border-color var(--t-mid) var(--ease-out);
}
.note:hover{border-color:var(--accent)}
.note__kind{
  font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s-sm);display:block;
}
.note h3{font-size:var(--step-1);line-height:1.32;margin-bottom:.55em}
.note p{font-size:var(--step--1);color:var(--fg-muted);line-height:1.68;margin-bottom:var(--s-md)}
.note__more{
  margin-top:auto;font-family:var(--font-body);
  font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg);display:inline-flex;align-items:center;gap:.5em;
}
.note__more svg{width:14px;height:14px;transition:translate var(--t-mid) var(--ease-out)}
.note:hover .note__more svg{translate:3px 0}

/* ---------- 9. FACT LISTS ---------- */
.facts{display:grid;border-bottom:1px solid var(--hairline)}
.facts>div{
  display:grid;gap:.35rem var(--s-lg);
  padding:1rem 0;border-top:1px solid var(--hairline);
}
@media (min-width:640px){.facts>div{grid-template-columns:minmax(150px,24%) 1fr}}
.facts dt{
  font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;
  color:var(--fg-muted);font-weight:600;padding-top:.25em;
}
.facts dd{font-size:var(--step--1);margin:0;line-height:1.7}
.facts dd ul{list-style:none;padding:0;display:grid;gap:.3rem}

/* ---------- 10. ADVOCATE PLACEHOLDER BLOCKS ---------- */
.person{
  border:1px solid var(--hairline);border-radius:2px;
  padding:clamp(1.25rem,3vw,1.75rem);
}
.person .ph{aspect-ratio:4/5;margin-bottom:var(--s-md)}
.person h3{font-size:var(--step-1);margin-bottom:.2em}
.person__role{
  display:block;font-size:var(--step--2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-sm);
}
.person dl{display:grid;gap:.5rem;margin-top:var(--s-sm);font-size:var(--step--2)}
.person dl>div{display:grid;gap:.15rem}
.person dt{color:var(--fg-muted);letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.person dd{margin:0;line-height:1.55}

/* ---------- 11. CONTACT ---------- */
.contact-list{list-style:none;padding:0;display:grid;gap:var(--s-md)}
.contact-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-sm);align-items:start}
.contact-list svg{width:18px;height:18px;color:var(--accent);margin-top:.35em;flex:none}
.contact-list a{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.contact-list a:hover{color:var(--accent)}
.contact-list dt,.contact-list .k{
  display:block;font-size:var(--step--2);text-transform:uppercase;
  letter-spacing:.14em;color:var(--fg-muted);margin-bottom:.15em;
}
.ph--map{aspect-ratio:16/9;width:100%}

.form-card{
  border:1px solid var(--hairline);border-radius:2px;
  padding:clamp(1.4rem,3.5vw,2.25rem);
  background:var(--bg);
}
.input,.textarea,.select{border-radius:2px}
.form-note{
  font-size:var(--step--2);color:var(--fg-muted);line-height:1.65;
  margin-top:var(--s-md);padding-top:var(--s-md);
  border-top:1px solid var(--hairline);
}

/* ---------- 12. ACCORDION TONE ---------- */
.acc__btn{font-size:var(--step-1);line-height:1.35;padding:1.2em 0}
.acc__panel p{font-size:var(--step--1);line-height:1.72}

/* ---------- 13. DISCLAIMER BLOCK (footer) ---------- */
.disclaimer{
  margin-top:var(--s-2xl);
  padding-top:var(--s-lg);
  border-top:1px solid var(--hairline);
}
.disclaimer h5{margin-bottom:var(--s-sm)}
.disclaimer p{
  font-size:var(--step--2);line-height:1.75;
  color:var(--fg-muted);max-width:none;
}
.disclaimer p+p{margin-top:.85em}

/* ---------- 14. INSTALLER — understated ---------- */
.installer{border-radius:2px}
.installer .btn{padding:.75em 1.2em;font-size:var(--step--2)}

/* ---------- 15. FOOTER ---------- */
.footer h5{letter-spacing:.18em}
.footer__bottom{font-size:var(--step--2)}

/* ---------- 16. PRINT ---------- */
@media print{
  .gate{display:none!important}
  html:not([data-gate="accepted"]) body{overflow:visible}
}

/* ---------- 17. INSIGHTS · PROCEDURE NOTES ----------
   The long-form pages under /insights/, plus publications.html, reuse the .doc
   scaffold declared in each document's <head> (the same block as disclaimer.html
   and privacy.html). Only what that scaffold does not cover is added here, so
   that every note shares one definition rather than drifting per page. */
.doc ol{padding-left:1.35em;display:grid;gap:.55rem;margin:var(--s-sm) 0}
.doc ol li{color:var(--fg-muted);padding-left:.25em;max-width:68ch}
.doc ol li strong{color:var(--fg)}
.doc h3{font-size:var(--step-0);margin:var(--s-lg) 0 var(--s-sm)}

/* Breadcrumb. The <ol> carries .cluster, so it is already a wrapping flex row
   with no markers; these rules only set the quiet tone and the separator. */
.crumbs{margin-bottom:var(--s-md)}
.crumbs ol{padding:0;margin:0;display:flex;gap:.4rem}
.crumbs li{color:var(--fg-muted);max-width:none;padding-left:0;display:flex;gap:.4rem}
.crumbs li span[aria-hidden]{opacity:.45}
.crumbs [aria-current="page"]{color:var(--fg)}

/* Note cards sit inside .doc on the index and at the foot of each note, where
   the .doc paragraph rules would otherwise cap and mis-space them. */
.doc .grid{margin-top:var(--s-lg)}
.doc .note p{max-width:none}
.doc .note h3{margin:0 0 .55em;font-size:var(--step-1)}