/* ─────────────────────────────────────────────────────────
   Jilani Professional's Group of Company
   Direction: ledger-editorial. Parchment, ink, seal-maroon.
   Palette drawn from the firm's own signboard.
   ───────────────────────────────────────────────────────── */

:root{
  --paper:      #F5F1E9;
  --paper-2:    #EDE7DA;
  --ink:        #1B1614;
  --ink-2:      #423833;
  --ink-3:      #6E6259;
  --seal:       #8C1D18;
  --seal-2:     #B2453C;
  --gold:       #A67C2E;
  --rule:       rgba(27,22,20,.15);
  --rule-soft:  rgba(27,22,20,.07);

  --display: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:    "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.62; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
::selection{ background:var(--seal); color:var(--paper); }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--seal); outline-offset:3px;
}

.grain{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.26; mix-blend-mode:multiply;
  background-image: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── Nav ───────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:.85rem var(--pad);
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.brand{ display:block; flex:0 1 auto; min-width:0; }
.brand img{
  height:clamp(30px,5.2vw,42px); width:auto;
  mix-blend-mode:multiply;   /* drops the logo's white box onto the parchment */
}

.nav__links{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem); }
.nav__links a{
  color:var(--ink-2); text-decoration:none; white-space:nowrap;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav__links a:hover{ color:var(--ink); border-color:var(--seal); }
.nav__cta{
  color:var(--paper) !important; background:var(--seal);
  padding:.6rem 1rem !important; border:0 !important;
  font-weight:600;
}
.nav__cta:hover{ background:var(--ink); }

@media (max-width:820px){ .nav__links a:not(.nav__cta){ display:none; } }

/* ── Shared ────────────────────────────────────────────── */
.eyebrow{
  margin:0 0 1.3rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--seal); font-weight:700;
}
.eyebrow--light{ color:var(--seal-2); }

.section{ padding:clamp(4rem,8.5vw,8rem) var(--pad); }
.section--alt{ background:var(--paper-2); }
.section__head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vw,4.25rem); }
.section__title{
  font-family:var(--display);
  font-size:clamp(1.85rem,4.4vw,3.1rem);
  font-weight:600; line-height:1.08; letter-spacing:-.035em;
  margin:0; max-width:18ch; text-wrap:balance;
}
.section__title em{ font-style:normal; color:var(--seal); }
.section__note{ margin:1.2rem 0 0; max-width:52ch; color:var(--ink-3); }
.section__head--bare{ margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.section__head--bare .eyebrow{ margin-bottom:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.6rem; font-family:var(--body);
  font-size:.79rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  text-decoration:none; border:1px solid var(--ink); cursor:pointer;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--seal); border-color:var(--seal); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--full{ width:100%; }

/* ── Hero ──────────────────────────────────────────────── */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3rem,9vw,6.5rem) var(--pad) clamp(4rem,9vw,7rem);
}
.hero__title{
  font-family:var(--display);
  font-size:clamp(2.5rem,7.6vw,5.9rem);
  font-weight:600; line-height:1.02; letter-spacing:-.042em;
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  text-wrap:balance;
}
.hero__title span{ display:block; }
.hero__title em{ font-style:normal; color:var(--seal); }

.hero__lede{
  max-width:50ch; margin:0 0 2.4rem;
  font-size:clamp(1.02rem,1.5vw,1.25rem);
  color:var(--ink-2); line-height:1.55;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__rule{ height:1px; background:var(--rule); margin:clamp(3rem,6.5vw,5rem) 0 clamp(1.75rem,3vw,2.25rem); }

.stats{ display:grid; gap:1.6rem 2rem; margin:0; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.stat dt{ font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem; }
.stat dd{
  margin:0; font-family:var(--display);
  font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:600; line-height:1;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}

/* ── Partners ──────────────────────────────────────────── */
.people{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.person{
  padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--paper); border:1px solid var(--rule);
  border-top:3px solid var(--seal);
}
.person__role{ margin:0 0 1rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--seal); font-weight:700; }
.person__name{ margin:0; font-family:var(--display); font-size:clamp(1.35rem,2.3vw,1.75rem); font-weight:600; letter-spacing:-.03em; }
.person__quals{ margin:.35rem 0 1.1rem; font-size:.85rem; letter-spacing:.06em; color:var(--ink-3); }
.person__desc{ margin:0 0 1.4rem; color:var(--ink-2); font-size:.97rem; }
.person__contact{ list-style:none; margin:0; padding:1.1rem 0 0; border-top:1px solid var(--rule); display:grid; gap:.4rem; }
.person__contact a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); font-size:.94rem; }
.person__contact a:hover{ color:var(--seal); border-color:var(--seal); }

/* ── Practices ─────────────────────────────────────────── */
.practices{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid var(--rule);
}
.practice{
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1rem,2vw,1.75rem);
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  transition:background .35s;
}
.practice:hover{ background:var(--paper-2); }
.practice__head{ display:flex; align-items:baseline; gap:.85rem; margin-bottom:1.4rem; }
.practice__num{ font-family:var(--display); font-size:.8rem; letter-spacing:.02em; color:var(--seal); font-weight:700; font-variant-numeric:tabular-nums; }
.practice__head h3{
  margin:0; font-family:var(--display);
  font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:600; line-height:1.2; letter-spacing:-.025em;
}
.practice__list{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.practice__list li{
  position:relative; padding-left:1.1rem;
  font-size:.93rem; color:var(--ink-2); line-height:1.45;
}
.practice__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--seal);
}

/* ── Dark band / credentials ───────────────────────────── */
.section--dark{
  background:var(--ink); color:var(--paper);
  --rule:rgba(245,241,233,.18); --ink-2:rgba(245,241,233,.72); --ink-3:rgba(245,241,233,.6);
}
.section--dark .section__title{ color:var(--paper); }
.section--dark .section__title em{ color:var(--seal-2); }

.creds{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.cred{ margin:0; }
.cred img{
  width:100%; aspect-ratio:4/3;
  object-fit:contain;            /* documents must stay readable, never cropped */
  background:var(--paper);
  padding:.75rem;
  border:1px solid rgba(245,241,233,.2);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.cred:hover img{ transform:translateY(-3px); }
.cred figcaption{
  margin-top:1rem; font-size:.88rem; color:rgba(245,241,233,.62); line-height:1.5;
}
.cred figcaption strong{
  display:block; margin-bottom:.3rem;
  font-family:var(--display); font-size:.98rem; font-weight:600;
  color:var(--paper); letter-spacing:-.02em;
}

/* ── Office shots ──────────────────────────────────────── */
.shots{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:1rem;
  grid-template-columns:.8fr 1.2fr;   /* portrait frontage | two stacked interiors */
  grid-template-rows:auto auto;
}
.shot{
  margin:0; overflow:hidden; border:1px solid var(--rule);
  background:var(--paper-2);
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.shot:hover img{ transform:scale(1.04); }
.shot--tall{ grid-row:1 / span 2; }
.shot--tall img{ height:100%; aspect-ratio:9/16; }
.shots > .shot:not(.shot--tall) img{ aspect-ratio:16/9; }

@media (max-width:760px){
  .shots{ grid-template-columns:1fr; }
  .shot--tall{ grid-row:auto; }
  .shot--tall img{ aspect-ratio:3/4; }
}

/* ── Contact ───────────────────────────────────────────── */
.section--contact{ background:var(--paper-2); }
.contact{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr;
}
@media (min-width:960px){ .contact{ grid-template-columns:1fr .8fr; } }

.locs{
  display:grid; gap:1.75rem; margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.loc h3{
  margin:0 0 .7rem; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--seal); font-weight:700;
}
.loc address{ font-style:normal; color:var(--ink-2); font-size:.95rem; margin-bottom:.5rem; }
.loc a{ color:var(--ink); font-size:.9rem; text-decoration:none; border-bottom:1px solid var(--seal); word-break:break-all; }
.loc a:hover{ color:var(--seal); }

.phones{
  list-style:none; margin:2.25rem 0 0; padding:1.25rem 0 0;
  border-top:1px solid var(--rule); display:grid; gap:.7rem;
}
.phones li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.9rem; }
.phones span{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); min-width:7rem; }
.phones a{
  font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--ink);
  text-decoration:none; letter-spacing:-.025em; font-variant-numeric:tabular-nums;
}
.phones a:hover{ color:var(--seal); }

/* Form */
.form{
  display:grid; gap:1.05rem; align-content:start;
  background:var(--paper); padding:clamp(1.4rem,3vw,2.25rem);
  border:1px solid var(--rule);
}
.field{ display:grid; gap:.35rem; }
.field--pair{ grid-template-columns:1fr 1fr; gap:.9rem; }
.field--pair > div{ display:grid; gap:.35rem; min-width:0; }
@media (max-width:480px){ .field--pair{ grid-template-columns:1fr; } }

.field label{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.opt{ text-transform:none; letter-spacing:0; opacity:.7; }
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:0;
  padding:.75rem .85rem; width:100%;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field textarea{ resize:vertical; min-height:6.5rem; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:var(--paper);
  border-color:var(--seal); box-shadow:0 0 0 3px rgba(140,29,24,.13);
}
.form__note{ margin:0; font-size:.82rem; color:var(--ink-3); text-align:center; }
.form__note a{ color:var(--seal); }
.hp{ position:absolute; left:-9999px; }

/* ── Footer ────────────────────────────────────────────── */
.foot{
  display:flex; flex-wrap:wrap; gap:1.25rem;
  align-items:flex-end; justify-content:space-between;
  padding:2.25rem var(--pad); border-top:1px solid var(--rule);
}
.foot__mark{ margin:0; font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:-.025em; }
.foot__meta{ margin:.2rem 0 0; font-size:.86rem; color:var(--ink-3); }
.foot__reg{ margin:0; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }

/* ── WhatsApp float ────────────────────────────────────── */
.wa{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  z-index:60; display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  background:#1FA855; color:#fff; text-decoration:none;
  box-shadow:0 6px 22px rgba(27,22,20,.28);
  transition:transform .3s, box-shadow .3s;
}
.wa:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 10px 28px rgba(27,22,20,.34); }

/* ── Motion ────────────────────────────────────────────── */
.reveal,.js-r{ opacity:0; transform:translateY(18px); }
.reveal{ animation:rise .9s cubic-bezier(.2,.7,.25,1) forwards; animation-delay:var(--d,0ms); }
.js-r.in{ animation:rise .85s cubic-bezier(.2,.7,.25,1) forwards; animation-delay:var(--d,0ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.js-r{ opacity:1 !important; transform:none !important; animation:none !important; }
  *{ transition-duration:.01ms !important; }
}