/* =============================================
   ADV. VINEET SOLANKI – LEX ASSOCIATES
   Additions layered on top of styles.css.
   styles.css is UNTOUCHED — all new components
   (disclaimer gate, inquiry form, hero sub-copy)
   live here so the original design system stays
   exactly as it was.
   ============================================= */


/* ══════════════════════════════════════════
   1 · DISCLAIMER GATE (Bar Council of India)
══════════════════════════════════════════ */

body.locked { overflow: hidden; }

.lex-gate {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(9,16,38, .93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: lexGateIn .5s ease both;
  overflow-y: auto;
}
.lex-gate.lex-gate-out {
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}

@keyframes lexGateIn { from { opacity: 0 } to { opacity: 1 } }

.lex-gate-box {
  width: 100%; max-width: 620px;
  margin: auto;
  background: linear-gradient(160deg, #0d1b3d 0%, #0d1b3d 100%);
  border: 1px solid rgba(200,155,44, .34);
  border-radius: 14px;
  padding: 40px 44px 38px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6),
              0 0 0 1px rgba(200,155,44, .07),
              inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: lexBoxIn .55s .08s cubic-bezier(.2, .7, .3, 1) both;
  position: relative;
}
.lex-gate-box::before {
  content: ''; position: absolute; inset: 0; border-radius: 14px;
  padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(224,190,106, .45), transparent 42%, transparent 62%, rgba(224,190,106, .28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

@keyframes lexBoxIn {
  from { opacity: 0; transform: translateY(26px) scale(.97) }
  to   { opacity: 1; transform: none }
}

.lex-gate-crest { margin-bottom: 20px; }
.lex-gate-crest img {
  height: 96px; width: auto; max-width: 100%;
  object-fit: contain;
  background: #F7F6F2;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid rgba(200,155,44, .28);
}

.lex-gate-tag { display: inline-block; margin-bottom: 14px; }

.lex-gate-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700; letter-spacing: .01em;
  color: #fff; margin-bottom: 16px;
}

.lex-gate-rule {
  width: 64px; height: 2px; margin: 0 auto 22px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.lex-gate-box p {
  font-family: 'DM Sans', sans-serif;
  font-size: .875rem; line-height: 1.75;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 16px;
  text-align: left;
}
.lex-gate-box p:last-of-type { margin-bottom: 28px; }

.lex-gate-btn { display: inline-block; }


/* ══════════════════════════════════════════
   2 · NAV + HERO ADJUSTMENTS
══════════════════════════════════════════ */

/* The Lex mark is a light-background logo, so it needs a
   cream plate rather than the transparent circle the old
   mark used. Same size + placement as before. */
.nav-logo-img {
  width: 38px; height: 38px;
  background: #F7F6F2;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid rgba(200,155,44, .45);
  object-fit: contain;
  filter: none;
}

.lex-hero-sub {
  max-width: 720px; margin: 22px auto 0;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(.9rem, 1.5vw, 1rem);
  line-height: 1.75;
  color: #000;
  animation: fadeUp .85s .12s ease both;
}

/* Hero now carries 4 services per column instead of 3 —
   tighten the vertical rhythm so it still fits one screen. */
.hero-content { gap: 62px; }


/* ══════════════════════════════════════════
   3 · SERVICES — FEATURED ROW (08 Retained)
══════════════════════════════════════════ */

.s2-row-featured {
  background: rgba(200,155,44, .07);
  border-left: 2px solid var(--gold);
  padding-left: 22px;
  margin-left: -24px;
  border-radius: 0 6px 6px 0;
}
.s2-row-featured .s2-row-num { color: var(--gold); opacity: 1; }


/* ══════════════════════════════════════════
   4 · SMALL TYPE BLOCKS
══════════════════════════════════════════ */

.lex-urgent-note {
  margin-top: 20px; padding: 14px 18px;
  border-left: 2px solid var(--gold);
  background: rgba(200,155,44, .1);
  border-radius: 0 6px 6px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem; line-height: 1.7;
  color: var(--ink-soft);
}

.lex-signature {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgba(200,155,44, .22);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem; line-height: 1.6;
  color: var(--gold);
  text-align: center;
}

.lex-contact-note {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid rgba(200,155,44, .25);
  font-family: 'DM Sans', sans-serif;
  font-size: .74rem; line-height: 1.65;
  color: var(--ink-soft);
}

.lex-contact-card {
  background: var(--white);
  border: 1px solid rgba(200,155,44, .28);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(13,27,61, .1);
  height: 100%;
  display: flex; flex-direction: column;
}
.lex-cc-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px;
  flex: 1; justify-content: center;
}
.lex-cc-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: 10px;
  background: var(--cream);
  border: 1px solid rgba(200,155,44,.2);
  text-decoration: none; color: inherit;
  transition: background .2s, border-color .2s, transform .2s;
}
a.lex-cc-row:hover { background: rgba(200,155,44,.12); border-color: rgba(200,155,44,.45); transform: translateY(-1px); }
.lex-cc-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(200,155,44,.14); border: 1px solid rgba(200,155,44,.35);
  color: var(--gold-d);
}
.lex-cc-row strong {
  display: block; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 3px;
}
.lex-cc-row p { font-size: .92rem; color: var(--ink-soft); line-height: 1.4; word-break: break-word; }
.lex-cc-static { cursor: default; }
.lex-cc-static:hover { background: var(--cream); }


/* ══════════════════════════════════════════
   5 · INQUIRY FORM (Section 6)
══════════════════════════════════════════ */

.lex-form-block {
  background: var(--white);
  border: 1px solid rgba(200,155,44, .28);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(13,27,61, .1);
}

.lex-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  padding: 26px 24px 28px;
}

.lex-field { display: flex; flex-direction: column; gap: 7px; }
.lex-full { grid-column: 1 / -1; }

.lex-field label {
  font-family: 'Nunito Sans', sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.lex-field label span { color: #9a7521; }

.lex-field input[type="text"],
.lex-field input[type="email"],
.lex-field input[type="tel"],
.lex-field select,
.lex-field textarea {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem; color: var(--ink);
  background: var(--cream);
  border: 1px solid rgba(13,27,61, .16);
  border-radius: 6px;
  padding: 11px 13px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none; appearance: none;
  user-select: text; -webkit-user-select: text;
}

.lex-field textarea { resize: vertical; min-height: 118px; line-height: 1.6; }

.lex-field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
  cursor: pointer;
}

.lex-field input::placeholder,
.lex-field textarea::placeholder { color: rgba(13,27,61, .38); }

.lex-field input:focus,
.lex-field select:focus,
.lex-field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold-d);
  box-shadow: 0 0 0 3px rgba(200,155,44, .2);
}

/* Only flag invalid fields after a submit attempt */
.lex-form.was-validated :invalid {
  border-color: #b03a3a;
  box-shadow: 0 0 0 3px rgba(176, 58, 58, .12);
}

/* Consent checkbox */
.lex-consent {
  flex-direction: row; align-items: flex-start; gap: 11px;
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid rgba(200,155,44, .3);
  border-radius: 8px;
}
.lex-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin-top: 2px;
  accent-color: var(--gold-d);
  cursor: pointer;
}
.lex-consent label {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  line-height: 1.65;
  color: var(--ink-soft);
  cursor: pointer;
}
.lex-form.was-validated .lex-consent input:invalid { outline: 2px solid #b03a3a; outline-offset: 2px; }

.lex-submit-row { display: flex; justify-content: flex-start; }
.lex-submit-row button { cursor: pointer; border: none; font: inherit; }

.lex-form-status {
  grid-column: 1 / -1;
  margin: 0; min-height: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem; line-height: 1.65;
}
.lex-form-status.ok {
  padding: 13px 16px;
  background: rgba(200,155,44, .14);
  border-left: 2px solid var(--gold-d);
  border-radius: 0 6px 6px 0;
  color: var(--ink);
}
.lex-form-status.err {
  padding: 13px 16px;
  background: rgba(176, 58, 58, .09);
  border-left: 2px solid #b03a3a;
  border-radius: 0 6px 6px 0;
  color: #7d2727;
}


/* ══════════════════════════════════════════
   6 · FOOTER DISCLAIMER
══════════════════════════════════════════ */

.lex-foot-disclaimer {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 60px 26px;
  font-family: 'DM Sans', sans-serif;
  font-size: .73rem; line-height: 1.7;
  color: rgba(255, 255, 255, .45);
  text-align: center;
  border-top: 1px solid rgba(200,155,44, .14);
  padding-top: 18px;
}


/* ══════════════════════════════════════════
   7 · RESPONSIVE
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .lex-form { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .lex-gate { padding: 16px; align-items: flex-start; }
  .lex-gate-box { padding: 28px 22px 26px; border-radius: 12px; }
  .lex-gate-crest img { height: 68px; padding: 8px 12px; }
  .lex-gate-box p { font-size: .82rem; line-height: 1.7; }

  .nav-logo-img { width: 32px; height: 32px; }
  .lex-hero-sub { font-size: .86rem; margin-top: 18px; }

  .s2-row-featured { margin-left: 0; padding-left: 16px; }

  .lex-foot-disclaimer { padding: 18px 24px 22px; font-size: .69rem; }
  .lex-signature { font-size: 1.02rem; }
}


/* ══════════════════════════════════════════
   8 · MOBILE NAV FIX
   The firm name is long enough to wrap to four
   lines in the nav bar, inflating it from ~82px
   to ~240px and pushing the hero eyebrow behind
   it. Below 700px the emblem carries the brand
   on its own. Desktop is untouched.
══════════════════════════════════════════ */

@media (max-width: 700px) {
  .nav-logo {
    font-size: 0;
    gap: 0;
    flex: 0 0 auto;
  }
  .nav-logo-img { font-size: 1rem; }
  .nav-logo-divider { display: none; }

  /* Shrink the inquiry button so nav stays one row */
  .nav-inquiry-btn {
    padding: 7px 12px !important;
    font-size: .68rem !important;
    margin-right: 10px !important;
  }
}

@media (max-width: 420px) {
  .nav-inquiry-btn { padding: 6px 10px !important; font-size: .62rem !important; }
}


/* ══════════════════════════════════════════
   9 · HERO FIT ON SMALL SCREENS
   The hero carries 8 services now instead of 6.
   styles.css already stacks the grid to one
   column below 900px; these rules just tighten
   the rhythm and add clearance so the 8th item
   is not hidden behind the fixed footer bar.
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .hero-content { gap: 28px; padding-bottom: 76px; }
  .hero-service-divider { margin: 20px 0; }
  .lex-hero-sub { margin-top: 16px; }
}

@media (max-width: 700px) {
  .hero-section { padding-top: 56px; }
  .hero-content { gap: 22px; padding: 24px 22px 80px; }
  .hero-service-divider { margin: 16px 0; }
}

/* ══════════════════════════════════════════
   10 · READABLE TYPE ON PHONES
   The desktop design uses very small type for
   labels (.5–.7rem, ~8–11px) and body copy
   (.7–.9rem, ~11–14px). On a phone that is too
   small to read. Below 700px this section lifts
   labels to at least 12px and reading text to
   ~15px. Form fields go to 16px so iOS Safari
   does not zoom in when a field is tapped.
   Desktop and tablet sizes are untouched.
══════════════════════════════════════════ */

@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Small uppercase / mono labels → ≥12px */
  .s1-portrait-role,
  .s2-stat p,
  .s3-card-num,
  .s3-card-tag,
  .s3-flow-node,
  .s3-card-foot span,
  .s3-pillar > span,
  .s4-ms-l,
  .s4-tl-circle span,
  .s4-tc-step,
  .s5-fw-label,
  .s5-sm-label,
  .s6-layer-title,
  .s6-sb-num { font-size: 0.75rem; }
  .s1-ls-label,
  .s1-stat,
  .s2-row-num,
  .s2-docs-label,
  .s4-obl-label { font-size: 0.76rem; }
  .s5-metric p { font-size: 0.77rem; }
  .gold-tag,
  .dark-tag,
  .s1-section-label,
  .s1-gc-num,
  .s2-pillars-row,
  .s2-doc-code { font-size: 0.79rem; }

  /* Secondary text: tags, notes, footer → ~13–15px */
  .s5-warn,
  .s5-warn-lo,
  .s6-ln { font-size: 0.82rem; }
  .s1-lg-head,
  .s5-sof-n { font-size: 0.84rem; }
  .hero-eyebrow,
  .s1-doc-num,
  .s6-tools span,
  .lex-field label { font-size: 0.86rem; }
  .s3-pillar p,
  .footer-links { font-size: 0.88rem; }
  .contact-bubble-btn,
  .lex-foot-disclaimer { font-size: 0.89rem; }
  .hero-bottom-links,
  .s6-layer p,
  .lex-cc-row strong { font-size: 0.92rem; }
  .s2-tags span,
  .s2-doc-item p,
  .s4-disc-item p { font-size: 0.93rem; }
  .lex-contact-note { font-size: 0.94rem; }

  /* Reading text: paragraphs, lists, buttons → ~15px */
  .btn-gold-solid,
  .btn-gold-outline,
  .btn-black-solid,
  .btn-black-outline,
  .btn-white-outline,
  .s1-exp-text p,
  .s1-gc li,
  .s1-doc-body strong,
  .s1-doc-body p,
  .s1-lg-pills span,
  .s2-row-right p,
  .s2-doc-item strong,
  .s3-card-lead,
  .s3-card-list li,
  .s3-risk,
  .s3-pillar strong,
  .s4-tc-body li,
  .s4-disc-item strong,
  .s4-obl,
  .s5-sof-badges span,
  .s5-sof-step strong,
  .s5-sof-step p,
  .s5-list li,
  .s6-layer strong,
  .s6-sb-list li,
  .contact-bubble-option,
  .lex-gate-box p,
  .lex-hero-sub,
  .lex-urgent-note,
  .lex-cc-row p,
  .lex-consent label,
  .lex-form-status { font-size: 0.95rem; }

  /* Form fields 16px (prevents iOS zoom); serif headings nudged up */
  .s6-sb-head,
  .lex-field input[type="text"],
  .lex-field input[type="email"],
  .lex-field input[type="tel"],
  .lex-field select,
  .lex-field textarea { font-size: 1rem; }
  .footer-logo { font-size: 1.02rem; }
  .s1-gc-desc,
  .s5-frost-sm h3 { font-size: 1.07rem; }

  /* Nav button: keep on one row, but legible */
  .nav-inquiry-btn { font-size: .74rem !important; }

  /* Seal and flow-diagram micro text */
  .s3-flow-node span { font-size: .72rem; }
  .s4-seal-inner span { font-size: .76rem; }

  /* Larger text needs the full width: stack the
     "Core Filings & Deliverables" grid (it was
     already overflowing on 320px phones) */
  .s2-docs-grid { grid-template-columns: 1fr; }

  /* The pinned bottom bar on the hero would wrap
     to 3–4 lines at the larger size. Drop the
     copyright from the pinned copy only (it is
     still shown in the page footer at the end). */
  .hero-bottom .hero-bottom-links > span:last-child,
  .hero-bottom .hero-bottom-links > span:nth-last-child(2) { display: none; }
  .hero-bottom .hero-bottom-links { padding: 12px 16px; gap: 8px 10px; }

  /* Wide tracking + larger size wrapped the hero
     eyebrow to 3 lines; tighten it slightly */
  .hero-eyebrow { letter-spacing: .12em; line-height: 1.6; }

  /* Keep the Bar Council disclaimer clear of the
     floating Contact Us button, and lift the very
     faint footer text so it can be read */
  .lex-foot-disclaimer { padding-bottom: 88px; }
  .page-footer .hero-bottom-links { color: rgba(255,255,255,.6); }
  .page-footer .hero-bottom-links a { color: rgba(255,255,255,.75); }
  .page-footer .hero-bottom-links > span:last-child,
  .page-footer .hero-bottom-links > span:last-child span { color: rgba(255,255,255,.6); }
}

@media (max-width: 420px) {
  .nav-inquiry-btn { font-size: .7rem !important; }
}


/* ══════════════════════════════════════════
   11 · TAG MEANINGS (TOOLTIPS)
   Hovering, tapping or tabbing onto a tag such
   as BOCW or SARFAESI shows a one-line meaning.
   The text lives in js/glossary.js.
══════════════════════════════════════════ */

.has-tip { cursor: help; }
.has-tip:focus { outline: none; }
.has-tip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.lex-tip {
  position: fixed; top: 0; left: 0; z-index: 1200;
  max-width: 280px;
  padding: 12px 14px 13px;
  background: #0d1b3d;
  border-top: 2px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(13,27,61,.32), 0 2px 6px rgba(13,27,61,.2);
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem; line-height: 1.5;
  color: rgba(255,255,255,.88);
  text-align: left; text-transform: none; letter-spacing: normal;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.lex-tip.on {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease;
}
.lex-tip-term {
  display: block; margin-bottom: 3px;
  font-family: 'DM Mono', monospace; font-weight: 500;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-l);
}
/* little arrow pointing at the tag */
.lex-tip::after {
  content: ''; position: absolute; left: var(--arrow-x, 50%); bottom: -6px;
  width: 12px; height: 12px; margin-left: -6px;
  background: #0d1b3d; transform: rotate(45deg); border-radius: 2px;
}
.lex-tip.below::after { bottom: auto; top: -7px; background: var(--gold); }

@media (max-width: 700px) {
  .lex-tip { max-width: min(300px, calc(100vw - 24px)); font-size: .92rem; }
  .lex-tip-term { font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lex-tip, .lex-tip.on { transition: none; transform: none; }
}


/* ══════════════════════════════════════════
   12 · "OUR SERVICES" HEADER BAND
   - The heading column took half the width but
     the heading only needs about a third, leaving
     a big empty gap and squeezing the text side.
   - The dot separators were separate elements, so
     when the row wrapped a dot was left dangling
     at the end of a line and "Arbitration" sat
     alone below. Dots are now drawn before each
     item and any dot that lands at the start of
     a line is clipped away, so wrapping is clean
     at every width.
   - The lead paragraph is a little larger and
     darker here so it reads comfortably.
══════════════════════════════════════════ */

.s2-top-band {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 40px 72px;
}
.s2-top-right { gap: 22px; }
.s2-top-right .sec-lead {
  font-size: 1.24rem;
  color: var(--ink-soft);
  max-width: 640px;
}

/* clean-wrapping separator row
   Every item gets a 22px slot on its left with a
   gold dot in it. The row is pulled 22px left and
   its first 18px are clipped, so the dot in front
   of whichever item starts a line is never seen. */
.s2-pillars-row {
  margin-left: -22px;
  clip-path: inset(-6px -6px -6px 18px);
  gap: 10px 0;
  font-size: .7rem;
}
.s2-pillars-row .s2-dot { display: none; }
.s2-pillars-row span:not(.s2-dot) {
  position: relative;
  margin-left: 22px;
  white-space: nowrap;
}
.s2-pillars-row span:not(.s2-dot)::before {
  content: '';
  position: absolute; left: -13px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%;
  background: var(--gold);
}

@media (max-width: 1100px) {
  .s2-top-band { grid-template-columns: 1fr; gap: 24px; }
  .s2-h2 br { display: none; }   /* one-line heading once stacked */
}

@media (max-width: 700px) {
  .s2-top-right .sec-lead { font-size: 1.12rem; }
  .s2-pillars-row { font-size: .8rem; }
}