/* ==========================================================================
   CONTACT US — OFFICE LOCATIONS & WORK MODEL
   --------------------------------------------------------------------------
   The six published locations from the dmd-website Contact page, rebuilt in
   the About page's ledger idiom: a numbered rail on the left whose selected
   row IS the top-left edge of the panel beside it, mono keys, one accent, an
   accent full stop on the headline. Geometry, type ramp and the phone
   accordion are read off about/_c1.css (.c1-rx) so the two pages read as one
   family; nothing here is a new visual language.

   Loaded AFTER site/finish.css, so this file is the last word on .lx-*.
   Every token is prefixed --lx- — a bare --tint on .v05 already shadows the
   shell's, and a shared name behaves exactly like a shared class name.

   The tab behaviour is contact/_ui.js's existing [data-tabs] driver
   (role="tab" + aria-controls + [hidden]). No new script.
   ========================================================================== */

.lx{
  --lx-edge:  var(--line-b);
  --lx-rule:  var(--line-2, #EFF1F4);
  --lx-ease:  cubic-bezier(.4,0,.2,1);
  --lx-o:     0;
}

/* ==========================================================================
   THE SECTION HEADER
   site/finish.css gives our-management and legal-documents a two-part header —
   accent rule, headline held to a readable measure on the left, the standing
   paragraph pushed right on the headline's own cap-height — but skips
   contact-us, whose eyebrow and headline are bare children of the lane. This
   section wraps them, so it takes that treatment and the lane stops being
   half-empty above a full-width ledger. The rule before the eyebrow is
   re-declared here because .px-sec > .w > .px-eye no longer matches.
   ========================================================================== */
.lx-head{
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 10px clamp(28px, 3.4vw, 64px);
}
.lx-head > .px-eye{
  flex: 1 0 100%;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 clamp(10px, 1vw, 14px);
}
.lx-head > .px-eye::before{
  content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55;
}
.lx-head > .px-h2{ flex: 1 1 auto; min-width: 0; max-width: 17ch; margin: 0; }
.lx-subs{
  flex: 0 1 46ch; min-width: 0; max-width: 46ch; margin-left: auto;
  padding-top: .3em;
}
.lx-sub{
  font-size: var(--ds-sub, 16px); line-height: var(--ds-sub-lh, 1.58);
  color: var(--ink-2);
}
.lx-sub + .lx-sub{ margin-top: 12px; }

@media (max-width: 900px){
  .lx-head{ display: block; }
  .lx-head > .px-h2{ max-width: 22ch; }
  .lx-subs{ max-width: 68ch; margin: clamp(13px, 1.4vw, 18px) 0 0; padding-top: 0; }
}

/* ---- the ledger's own header rule: mono, over a 2px ink baseline -------- */
.lx-hd{
  margin-top: clamp(26px, 3vw, 42px);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 26px; flex-wrap: wrap;
  padding-bottom: 11px; border-bottom: 2px solid var(--ink);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
}
.lx-hd-s{ color: var(--ink-3); font-weight: 500; }

/* ==========================================================================
   THE LEDGER
   ========================================================================== */
.lx{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: stretch;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-m);
}

/* ---- the rail ---------------------------------------------------------- */
/* Rows are NOT stretched to fill the panel. About's ledger can stretch five
   rows against a 388px panel and land at 78px each; six rows against this
   panel landed at 177px, which is an empty row with a name floating in it.
   So rows take a human height and a flex filler carries the vertical seam the
   rest of the way down, keeping the rail the panel's left edge either way. */
.lx-rail{
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ground);
  border: 1px solid var(--lx-edge); border-right: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
/* the filler simply carries the ground down to the panel's foot, so the rail
   is the panel's left edge whether six rows fill it or not */
.lx-rail::after{ content: ""; flex: 1 1 auto; min-height: 0; }
.lx-rail :where(button){ font: inherit; }
.lx-r{
  -webkit-appearance: none; appearance: none;
  position: relative; z-index: 1;
  min-width: 0; cursor: pointer; text-align: left;
  display: grid; align-items: center;
  grid-template-columns: 26px minmax(0, 1fr) minmax(96px, .96fr);
  gap: 0 14px;
  flex: 1 1 auto; min-height: 66px; max-height: 104px;
  padding: 17px 18px;
  background: transparent; color: var(--ink-2);
  border: 0; border-bottom: 1px solid var(--lx-edge);
  border-radius: 0;
  transition: color .18s var(--lx-ease), background-color .18s var(--lx-ease);
}
.lx-r:hover{ color: var(--ink); background: rgba(255,255,255,.6); }
.lx-r:last-of-type{ border-bottom: 0; }
/* This column held 01-06. It holds the selection node instead: one accent,
   one filled ring, so the column says WHICH ONE IS OPEN rather than which
   number a place happens to be. */
.lx-i{
  justify-self: center; width: 10px; height: 10px; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1.6px var(--lx-edge);
  transition: box-shadow .18s var(--lx-ease), background-color .18s var(--lx-ease);
}
.lx-r:hover .lx-i{ box-shadow: inset 0 0 0 1.6px var(--ink-4); }
.lx-n{
  min-width: 0; font-size: clamp(15px, 1.15vw, 17px); font-weight: 700;
  letter-spacing: -.03em; color: inherit;
}
.lx-k{
  min-width: 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; color: var(--ink-4); text-align: right;
  overflow-wrap: anywhere;
}
/* the open location IS the panel: white, edged, one pixel over the seam */
/* the open location IS the panel's lid: it takes the panel's own paper, keeps
   only its outer corners and reaches a pixel past the seam, so the content
   reads as having opened out of that row rather than beside it */
.lx-r[aria-selected="true"]{
  z-index: 3; color: var(--ink);
  background: var(--paper);
  border-bottom-color: transparent;
  border-radius: var(--r-md) 0 0 var(--r-md);
  margin-right: -1px;
}
.lx-r[aria-selected="true"]::before{
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  background: var(--ink); border-radius: 0 2px 2px 0;
}
.lx-r[aria-selected="true"] + .lx-r{ border-top: 0; }
.lx-r[aria-selected="true"] .lx-n{ font-weight: 800; }
.lx-r[aria-selected="true"] .lx-k{ color: var(--ink-3); }
.lx-r[aria-selected="true"] .lx-i{
  background: var(--ink); box-shadow: inset 0 0 0 1.6px var(--ink);
}

/* ---- the panel --------------------------------------------------------- */
.lx-pw{
  position: relative; z-index: 2; min-width: 0;
  background: var(--paper);
  border: 1px solid var(--lx-edge); border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: clamp(22px, 2.4vw, 34px);
}
.lx-p{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .74fr);
  column-gap: clamp(20px, 2.2vw, 34px);
  grid-template-areas:
    "hd  fig"
    "adr fig"
    "con fig"
    "des des"
    "use use"
    "fac fac";
  align-content: start;
}
.lx-p-hd{ grid-area: hd; min-width: 0; }
.lx-p-k{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.5;
}
.lx-p-n{
  margin-top: 10px;
  font-size: var(--ds-h3, 28px); line-height: var(--ds-h3-lh, 1.08);
  letter-spacing: var(--ds-h3-ls, -.04em); font-weight: 800; color: var(--ink);
}

/* the address: label above, lines beneath, mono label like the fact keys */
.lx-adr{
  grid-area: adr; min-width: 0;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding-top: 13px; border-top: 1px solid var(--lx-rule);
}
.lx-adr dt{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.lx-adr dd{
  margin: 7px 0 0; font-size: 14.6px; line-height: 1.52; color: var(--ink);
  font-weight: 600; letter-spacing: -.015em;
}
.lx-adr dd + dd{ margin-top: 2px; font-weight: 500; color: var(--ink-2); }
.lx-adr .lx-adr-note{ font-weight: 500; color: var(--ink-3); font-size: 13.6px; }

.lx-des{
  grid-area: des; min-width: 0; align-self: start; max-width: 78ch;
  margin-top: clamp(16px, 1.8vw, 22px);
}
.lx-des p{
  margin-top: 12px; font-size: 14.5px; line-height: 1.58; color: var(--ink-2);
}
.lx-des p:first-child{ margin-top: 0; }
/* connectivity is a fact, not prose, so it takes its own tinted cell under the
   address rather than sitting inside the description */
.lx-conn{
  grid-area: con; min-width: 0; align-self: start;
  margin-top: 14px; padding: 12px 14px;
  background: var(--ground, #F4F7FC); border-radius: var(--r-sm, 12px);
}
.lx-conn dt{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.lx-conn dd{
  margin: 6px 0 0; font-size: 13.4px; line-height: 1.5; color: var(--ink-2);
}
.lx-conn dd b{ color: var(--ink); font-weight: 700; }

/* the photograph */
.lx-fig{
  grid-area: fig; min-width: 0; align-self: start;
  margin: clamp(16px, 1.8vw, 22px) 0 0;
}
.lx-fig img{
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--lx-edge);
  background: var(--ground-2);
}
.lx-fig figcaption{
  margin-top: 9px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
}

/* "This office is used for" */
.lx-use{ grid-area: use; min-width: 0; margin-top: clamp(18px, 2vw, 26px); }
.lx-use-h{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.lx-l{
  margin-top: 4px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 30px);
}
.lx-l li{
  position: relative; padding: 10px 0 10px 20px;
  border-top: 1px solid var(--lx-rule);
  font-size: 13.2px; line-height: 1.45; font-weight: 550; color: var(--ink-2);
}
.lx-l li::before{
  content: ""; position: absolute; left: 0; top: 18px;
  width: 9px; height: 1.5px; border-radius: 1px; background: var(--accent);
}

/* office type · manpower · visits */
.lx-f{
  grid-area: fac; min-width: 0;
  margin-top: clamp(18px, 2vw, 26px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
}
.lx-f > div{ min-width: 0; padding-top: 12px; border-top: 1px solid var(--ink); }
.lx-f dt{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.lx-f dd{
  margin: 5px 0 0; font-size: 13.5px; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); line-height: 1.4;
}

/* ==========================================================================
   NARROW DESKTOP / TABLET — the panel goes one column, the ledger stays split
   ========================================================================== */
@media (max-width: 1040px){
  .lx{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .lx-p{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hd" "fig" "adr" "con" "des" "use" "fac";
  }
  .lx-fig{ margin-top: clamp(16px, 1.8vw, 22px); }
  .lx-fig img{ aspect-ratio: 16 / 9; }
  /* the key is NOT dropped here: three of the six rows read "Delhi NCR", and
     the building name is the only thing that tells them apart. It moves under
     the name instead, the way it does on a phone. */
  .lx-r{
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: "i n" ". k";
    max-height: 124px;
  }
  .lx-i{ grid-area: i; align-self: center; }
  .lx-n{ grid-area: n; }
  .lx-k{ grid-area: k; text-align: left; margin-top: 4px; }
  .lx-f{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   PHONE — one surface. The rail and the panels interleave: the open row is
   the lid of its own panel and every other row is a flat line under it.
   `display:contents` drops the two wrappers and `order` re-sequences what is
   left; grid-area names survive the collapse, so the row keeps its own areas.
   ========================================================================== */
@media (max-width: 760px){
  .lx-hd{ margin-top: 22px; padding-bottom: 10px; font-size: 9.5px; letter-spacing: .14em; }
  .lx-hd-s{ display: none; }

  .lx{ display: flex; flex-direction: column; align-items: stretch;
       border-radius: 0; box-shadow: none; }
  .lx-rail, .lx-pw{ display: contents; }
  /* `display:contents` drops the rail's box but NOT its ::after, which would
     otherwise sit in the column as a stray bordered strip */
  .lx-rail::after{ display: none; }
  .lx-r{ max-height: none; }
  .lx-r:last-of-type{ border-bottom: 1px solid var(--lx-edge); }

  .lx-r{
    order: var(--lx-o);
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: "i n" ". k";
    gap: 0 12px; padding: 14px 2px;
    border: 0; border-bottom: 1px solid var(--lx-edge);
    border-radius: 0; box-shadow: none; background: transparent;
  }
  .lx-i{ grid-area: i; align-self: center; }
  .lx-n{ grid-area: n; font-size: 16px; }
  .lx-k{ grid-area: k; display: block; text-align: left; margin-top: 4px; }

  .lx-r[aria-selected="true"]{
    padding: 15px 16px 13px; margin: 8px 0 0;
    background: var(--paper);
    border: 1px solid var(--lx-edge); border-bottom: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
  .lx-r[aria-selected="true"]::before{
    left: 16px; right: 16px; top: 0; bottom: auto; width: auto; height: 3px;
    border-radius: 0 0 2px 2px;
  }

  .lx-p{
    order: var(--lx-o);
    margin-bottom: 8px; padding: 2px 16px 18px;
    background: var(--paper);
    border: 1px solid var(--lx-edge); border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hd" "fig" "adr" "con" "des" "use" "fac";
  }
  /* the open row already names the location, so the panel leads with the one
     thing the row does not say — what the place is for */
  .lx-p-n{ display: none; }
  .lx-p-k{ margin-top: 12px; }
  .lx-fig{ margin-top: 12px; }
  .lx-fig img{ aspect-ratio: 3 / 2; }
  .lx-adr{ margin-top: 14px; }
  .lx-adr dd{ font-size: 14px; }
  .lx-des p{ margin-top: 11px; font-size: 14px; }
  .lx-use{ margin-top: 16px; }
  .lx-l{ grid-template-columns: minmax(0, 1fr); }
  .lx-l li{ font-size: 12.8px; padding: 9px 0 9px 18px; }
  .lx-l li::before{ top: 16px; }
  .lx-f{ margin-top: 16px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lx-f > div{
    /* label at its own width, value takes the rest and wraps (right-aligned). 2026-09-16: the value used to be sized to its full
       line (auto) and the label squeezed to what was left, so at 320px "OFFICE TYPE" ran into its value */
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 14px; align-items: baseline; padding: 10px 0;
    border-top: 1px solid var(--lx-rule);
  }
  .lx-f dd{ margin: 0; text-align: right; font-size: 12.8px; }
}

/* ==========================================================================
   THE MAP BLOCK, UNDER THE LEDGER
   The map keeps the one office a visitor actually travels to — location 01 —
   and stays directly above the Google reviews it is the listing for. Its old
   Address and Landmark rows are gone: they are location 01 of the ledger, and
   an address printed twice on one screen reads as two different offices.
   ========================================================================== */
.lx-visit{
  margin-top: clamp(30px, 3.4vw, 52px);
  padding-top: clamp(26px, 3vw, 44px);
  border-top: 1px solid var(--line-b);
}
.lx-vh{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.lx-visit .px-off-l{ margin-top: 16px; }
@media (max-width: 760px){
  .lx-visit{ margin-top: 26px; padding-top: 24px; }
  .lx-visit .px-off-l li{ grid-template-columns: minmax(0, 1fr); gap: 5px; }
}