:root{
    --paper:transparent;
    --card:transparent;
    --ink:#F3F4EF;
    --ink-soft:#D3DAD4;
    --pine:#3E6657;
    --pine-dark:#1A2B26;
    --sage:#9FC2B2;
    --sage-light:#C7DACF;
    --brass:#E3B36B;
    --brass-dark:#B6873F;
    --line:rgba(243,244,239,0.35);
    --on-dark:#F3F4EF;
    --on-dark-soft:#D3DAD4;
    --radius-doc: 3px;
    --serif: 'Lora', serif;
    --sans: 'IBM Plex Sans', sans-serif;
    --shadow-card: 0 2px 18px rgba(0,0,0,0.35);
    --text-shadow: 0 1px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:#0c1210;
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-shadow:var(--text-shadow);
  }

  img,svg{max-width:100%;display:block;}
  a{color:inherit;}

  .container{
    max-width:1180px;
    margin:0 auto;
    padding:0 28px;
  }

  h1,h2,h3,h4{
    font-family:var(--serif);
    font-weight:600;
    line-height:1.15;
    margin:0;
    color:var(--on-dark);
    text-shadow:var(--text-shadow);
  }
  p{margin:0;}

  .visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  :focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

  .court-backdrop{
    position:fixed; inset:0; z-index:-2; width:100%; height:100%;
    overflow:hidden; background:#0c1210;
  }
  .court-backdrop img{
    width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block;
  }
  .court-scrim{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(6,10,9,0.62) 0%, rgba(6,10,9,0.42) 25%, rgba(6,10,9,0.48) 60%, rgba(6,10,9,0.68) 100%);
    pointer-events:none;
  }

  .frost, .frost-dark{ background:transparent; }

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:var(--radius-doc);
    font-family:var(--sans); font-weight:600; font-size:15px;
    text-decoration:none; border:1px solid transparent; cursor:pointer;
    transition:background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  .btn-primary{ background:var(--brass); color:var(--pine-dark); }
  .btn-primary:hover{ background:#c79a54; }
  .btn-secondary{ background:rgba(255,255,255,0.08); color:var(--on-dark); border-color:rgba(237,238,231,0.35); }
  .btn-secondary:hover{ border-color:var(--on-dark); }
  .btn-solid{ background:var(--pine); color:var(--on-dark); }
  .btn-solid:hover{ background:var(--pine-dark); }
  .btn-outline{ background:transparent; color:var(--pine-dark); border-color:var(--line); }
  .btn-outline:hover{ border-color:var(--pine); }
  .btn-block{ width:100%; justify-content:center; }

  header{
    position:sticky; top:0; z-index:40;
    background:transparent;
    border-bottom:1px solid rgba(243,244,239,0.18);
  }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; height:78px; }
  .logo{
    display:flex; align-items:baseline; gap:6px;
    font-family:var(--serif); font-weight:600; font-size:21px;
    color:var(--on-dark); text-decoration:none; letter-spacing:-0.01em;
  }
  .logo em{ font-style:italic; color:var(--brass); }
  .logo .locality-tag{
    font-family:var(--sans); font-style:normal; font-weight:500;
    font-size:12.5px; color:var(--on-dark-soft);
    padding-left:10px; margin-left:4px; border-left:1px solid rgba(237,238,231,0.25);
  }
  nav.primary-nav{ display:flex; align-items:center; gap:26px; }
  nav.primary-nav a{
    text-decoration:none; font-size:14.5px; color:var(--on-dark-soft);
    position:relative; padding:4px 0; white-space:nowrap;
  }
  nav.primary-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
    background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
  }
  nav.primary-nav a:hover{ color:var(--on-dark); }
  nav.primary-nav a:hover::after{ transform:scaleX(1); }
  .header-actions{ display:flex; align-items:center; gap:16px; }
  .phone-link{ font-size:14px; color:var(--on-dark-soft); text-decoration:none; display:none; }
  .menu-toggle{
    display:none; background:none; border:1px solid rgba(237,238,231,0.3); border-radius:var(--radius-doc);
    width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
    content:""; display:block; width:18px; height:2px; background:var(--on-dark); position:relative;
    transition:transform .2s ease;
  }
  .menu-toggle span::before{ position:absolute; top:-6px; }
  .menu-toggle span::after{ position:absolute; top:6px; }
  .menu-toggle[aria-expanded="true"] span{ background:transparent; }
  .menu-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

  /* ---------- Hero + Form ---------- */
  .hero{ padding:72px 0 96px; }
  .hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start; }
  .hero-inner{ max-width:640px; }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13.5px; color:var(--on-dark); font-weight:600;
    background:rgba(182,135,63,0.22); border:1px solid rgba(182,135,63,0.5);
    padding:7px 14px; border-radius:999px; margin-bottom:22px;
  }
  .hero h1{
    font-size:clamp(30px, 4vw, 46px);
    color:var(--on-dark);
    text-shadow:0 2px 18px rgba(0,0,0,0.35);
  }
  .hero p.lede{
    margin-top:20px; max-width:56ch; font-size:17px;
    color:var(--on-dark-soft);
    text-shadow:0 1px 12px rgba(0,0,0,0.3);
  }
  .hero-ctas{ margin-top:28px; display:flex; gap:16px; flex-wrap:wrap; }
  .hero-stats{ margin-top:44px; display:flex; gap:36px; flex-wrap:wrap; }
  .stat b{ display:block; font-family:var(--serif); font-size:24px; color:var(--on-dark); }
  .stat span{ font-size:13px; color:var(--on-dark-soft); }

  /* Lead form card, sits beside the hero copy */
  .lead-card{
    background:rgba(12,18,16,0.62);
    border:1px solid rgba(237,238,231,0.22);
    border-radius:var(--radius-doc);
    padding:30px 28px 28px;
    box-shadow:var(--shadow-card);
  }
  .lead-card h2{
    font-size:20px; color:var(--on-dark);
  }
  .lead-card .lead-sub{
    margin-top:8px; font-size:13.5px; color:var(--on-dark-soft); line-height:1.5;
  }
  .lead-form{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
  .field label{
    display:block; font-size:12.5px; font-weight:600; color:var(--on-dark-soft);
    margin-bottom:6px; text-transform:none;
  }
  .field input, .field select, .field textarea{
    width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(237,238,231,0.28);
    border-radius:var(--radius-doc); padding:11px 13px; font-family:var(--sans);
    font-size:14.5px; color:var(--on-dark); text-shadow:none;
  }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(211,218,212,0.55); }
  .field select{ appearance:none; }
  .field select{
  -webkit-appearance:none;
  color-scheme:dark;              /* dropdown list dark theme me khulegi */
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E3B36B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.field select option{
  background:#1A2B26;             /* --pine-dark */
  color:#F3F4EF;
  text-shadow:none;
}
  .field textarea{ resize:vertical; min-height:70px; }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--brass); }
  .lead-form .consent{
    font-size:12px; color:var(--on-dark-soft); line-height:1.5; margin-top:2px;
  }
  .lead-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

  /* ---------- Section shell ---------- */
  section{ padding:80px 0; }
  .section-head{ max-width:62ch; margin-bottom:48px; }
  .section-head .kicker{ color:var(--sage); font-weight:600; font-size:14px; margin-bottom:10px; }
  .section-head h2{ font-size:clamp(25px, 3vw, 34px); }
  .section-head p{ margin-top:14px; color:var(--ink-soft); font-size:15.5px; }
  .frost-dark .section-head h2{ color:var(--on-dark); }
  .frost-dark .section-head p{ color:var(--on-dark-soft); }
  .frost-dark .section-head .kicker{ color:var(--sage-light); }

  /* ---------- Local proximity strip ---------- */
  .proximity-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:var(--radius-doc); overflow:hidden;
  }
  .proximity-item{ background:transparent; padding:28px; }
  .proximity-item .icon{ width:30px; height:30px; color:var(--brass); margin-bottom:14px; filter:drop-shadow(0 1px 6px rgba(0,0,0,0.5)); }
  .proximity-item h3{ font-size:16.5px; color:var(--on-dark); margin-bottom:6px; }
  .proximity-item p{ font-size:14.5px; color:var(--ink-soft); }

  /* ---------- Services ---------- */
  .services-list{ border-top:1px solid var(--line); }
  .service-row{
    display:grid; grid-template-columns:60px 1fr; gap:24px;
    padding:30px 0; border-bottom:1px solid var(--line); align-items:start;
  }
  .service-row .glyph{
    width:48px; height:48px; border-radius:50%; background:var(--pine);
    display:flex; align-items:center; justify-content:center; color:var(--on-dark); flex:none;
  }
  .service-row h3{ font-size:19px; color:var(--on-dark); margin-bottom:6px; }
  .service-row p{ color:var(--ink-soft); font-size:15px; max-width:65ch; }

  /* ---------- About / credentials ---------- */
  .about-wrap{ display:grid; grid-template-columns:0.8fr 1fr 1fr; gap:40px; align-items:start; }
  .about-copy p + p{ margin-top:14px; }
  .about-copy p{ color:var(--ink-soft); font-size:15.5px; max-width:58ch; }
  .credentials-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
  .credentials-list li{
    display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft);
    border:1px solid var(--line); border-radius:var(--radius-doc); padding:14px 16px;
  }
  .credentials-list li b{ color:var(--on-dark); display:block; font-family:var(--serif); font-size:15.5px; margin-bottom:3px; }

  /* ---------- Advocate profile ---------- */
  .advocate-card{ display:flex; flex-direction:column; gap:18px; }
  .advocate-photo{
    width:100%; aspect-ratio:4/5; border-radius:var(--radius-doc);
    background:rgba(237,238,231,0.08); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .advocate-photo img{ width:100%; height:100%; object-fit:cover; }
  .advocate-photo .photo-placeholder{
    text-align:center; color:var(--ink-soft); font-size:13px; padding:20px;
  }
  .advocate-photo .photo-placeholder svg{ width:52px; height:52px; margin:0 auto 10px; color:var(--sage); }
  .advocate-name{ font-family:var(--serif); font-size:22px; color:var(--on-dark); }
  .advocate-title{ font-size:14px; color:var(--sage-light); margin-top:4px; }
  .advocate-meta{ font-size:13px; color:var(--ink-soft); margin-top:10px; line-height:1.6; }

  /* ---------- Process timeline ---------- */
  .timeline{ position:relative; margin-top:8px; }
  .timeline::before{
    content:""; position:absolute; left:23px; top:8px; bottom:8px; width:1px; background:var(--line);
  }
  .tl-step{ position:relative; display:grid; grid-template-columns:48px 1fr; gap:24px; padding-bottom:38px; }
  .tl-step:last-child{ padding-bottom:0; }
  .tl-num{
    width:48px; height:48px; border-radius:50%; background:transparent; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-style:italic;
    font-size:18px; color:var(--brass); z-index:1;
  }
  .tl-content h3{ font-size:17.5px; color:var(--on-dark); margin-bottom:6px; }
  .tl-content p{ color:var(--ink-soft); font-size:15px; max-width:60ch; }

  /* ---------- Fees ---------- */
  .fees-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius-doc); overflow:hidden; }
  .fees-table th, .fees-table td{ text-align:left; padding:16px 18px; border-bottom:1px solid var(--line); font-size:14.5px; }
  .fees-table th{ font-family:var(--serif); font-weight:600; color:var(--on-dark); font-size:15px; background:rgba(237,238,231,0.06); }
  .fees-table td{ color:var(--ink-soft); }
  .fees-table td.price{ color:var(--brass); font-weight:600; white-space:nowrap; }
  .fees-table tr:last-child td{ border-bottom:none; }
  .fees-note{ margin-top:16px; font-size:13.5px; color:var(--ink-soft); }

  /* ---------- Areas served ---------- */
  .areas-wrap{ display:flex; flex-direction:column; gap:26px; }
  .areas-group h3{ font-size:15px; color:var(--sage-light); font-weight:600; margin-bottom:14px; font-family:var(--sans); }
  .chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{
    font-size:13.5px; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px;
    padding:8px 15px; background:rgba(237,238,231,0.04);
  }

  /* ---------- Testimonials ---------- */
  .testi-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
  .testi-card{
    background:transparent; border:1px solid var(--line); border-radius:var(--radius-doc);
    padding:26px;
  }
  .testi-card p.quote{
    font-family:var(--serif); font-style:italic; font-size:16px; color:var(--on-dark); line-height:1.5;
  }
  .testi-rating{ display:flex; gap:3px; margin-bottom:14px; color:var(--brass); font-size:15px; letter-spacing:2px; }
  .testi-card cite{
    display:block; margin-top:16px; font-style:normal; font-size:13px; color:var(--ink-soft);
  }

  /* ---------- FAQ ---------- */
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item:first-child{ border-top:1px solid var(--line); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; padding:20px 4px;
    display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer;
    font-family:var(--serif); font-size:17px; color:var(--on-dark);
  }
  .faq-q .plus{ flex:none; width:20px; height:20px; position:relative; }
  .faq-q .plus::before, .faq-q .plus::after{
    content:""; position:absolute; background:var(--brass); transition:transform .25s ease;
  }
  .faq-q .plus::before{ left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%); }
  .faq-q .plus::after{ top:0; left:50%; height:100%; width:1.5px; transform:translateX(-50%); }
  .faq-item.open .faq-q .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .faq-a-inner{ padding:0 4px 22px; color:var(--ink-soft); font-size:15px; max-width:64ch; }

  /* ---------- Contact / map ---------- */
  .contact-wrap{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    background:transparent; border:1px solid var(--line); border-radius:var(--radius-doc); overflow:hidden;
  }
  .contact-info{ padding:44px; }
  .contact-info p{ margin-top:14px; color:var(--ink-soft); }
  .contact-detail{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft); }
  .contact-detail div{ margin-bottom:6px; }
  .contact-detail b{ color:var(--on-dark); }
  .map-panel{
    background:transparent;
    position:relative; min-height:340px;
    display:flex; align-items:center; justify-content:center;
    border-left:1px solid var(--line);
  }
  .map-panel svg{ width:60%; filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5)); }
  .map-caption{
    position:absolute; bottom:18px; left:18px; right:18px;
    background:rgba(6,10,9,0.55); border:1px solid var(--line); border-radius:var(--radius-doc);
    padding:12px 14px; font-size:13px; color:var(--ink-soft);
  }
  .map-caption b{ color:var(--on-dark); }

  /* ---------- Footer ---------- */
  footer{ padding:56px 0 28px; color:var(--on-dark-soft); }
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:36px; border-bottom:1px solid rgba(237,238,231,0.14);
  }
  .footer-grid .logo{ color:var(--on-dark); }
  .footer-grid .logo em{ color:var(--brass); }
  .footer-grid p{ margin-top:14px; font-size:14px; max-width:32ch; }
  .footer-col h4{ font-family:var(--sans); color:var(--on-dark); font-size:14px; font-weight:600; margin-bottom:14px; }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .footer-col a{ text-decoration:none; font-size:14.5px; color:var(--on-dark-soft); }
  .footer-col a:hover{ color:var(--on-dark); }
  .footer-bottom{ padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; }
  .disclaimer{ max-width:900px; margin:0 auto 24px; font-size:12.5px; color:var(--on-dark-soft); opacity:0.85; line-height:1.6; }

  /* ---------- Mobile ---------- */
  @media (max-width:980px){
    .hero-grid{ grid-template-columns:1fr; }
    .lead-card{ max-width:520px; }
    .about-wrap{ grid-template-columns:1fr; }
    .advocate-card{ max-width:280px; }
  }
  @media (max-width:900px){
    .proximity-grid{ grid-template-columns:1fr; }
    .testi-grid{ grid-template-columns:1fr; }
    .contact-wrap{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; row-gap:28px; }
    .fees-table{ font-size:13.5px; }
    .fees-table th, .fees-table td{ padding:12px; }
  }
  @media (max-width:760px){
    nav.primary-nav{
      position:fixed; top:78px; left:0; right:0; bottom:0;
      background:rgba(6,10,9,0.72);
      flex-direction:column; align-items:flex-start; padding:32px 28px; gap:6px;
      transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
    }
    nav.primary-nav.open{ transform:translateX(0); }
    nav.primary-nav a{ width:100%; padding:14px 0; font-size:18px; border-bottom:1px solid rgba(237,238,231,0.14); }
    .menu-toggle{ display:flex; }
    .header-actions .btn-secondary{ display:none; }
    .service-row{ grid-template-columns:1fr; gap:12px; }
    section{ padding:56px 0; }
    .footer-grid{ grid-template-columns:1fr; }
    .logo .locality-tag{ display:none; }
    .lead-form .form-row{ grid-template-columns:1fr; }
    .fees-table{ display:block; overflow-x:auto; white-space:nowrap; }
  }
  @media (min-width:761px){ .phone-link{ display:inline; } }



/* ---------- Floating WhatsApp button ---------- */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:50;                 /* header (40) ke upar */
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  text-decoration:none;
  text-shadow:none;           /* body ka text-shadow icon pe na aaye */
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  transition:transform .2s ease, background-color .2s ease;
}
.wa-float:hover{
  background:#1ebe5b;
  transform:scale(1.08);
}
.wa-float:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* halka pulse ring, sirf attention ke liye */
.wa-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  z-index:-1;
  animation:wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.6); opacity:0; }
}

@media (max-width:760px){
  .wa-float{ right:16px; bottom:16px; width:54px; height:54px; font-size:29px; }
}