/* ==========================================================================
   OUR MANAGEMENT — THE LEADERSHIP BOARD
   --------------------------------------------------------------------------
   Loaded last, after assets/management/shell.css, assets/shared/design/system.css and assets/shared/design/finish.css.
   It changes the page's ARCHITECTURE, not its identity: every token, colour,
   type step, header, footer and section-header composition still comes from
   the three sheets above. Nothing here introduces a new visual language.

   WHAT IT REPLACES
   The three levels were three full-lane bands stacked vertically — a heading
   on the left, one or two capped tiles anchored to the right, and 280px of
   empty paper under every heading. 1885px of section for five people, and
   the profile opened INSIDE one band, so picking a director split the
   Directors level away from Ownership and Executive.

   WHAT IT DOES
   One board. Each level is a GROUP OF ONE ROW, sized to the number of
   people it holds, so all three cards are the same width and every level
   heading sits directly over its own people. The profile opens in the
   board's own detail region, full width under every group, with the
   pointer aimed at the card that opened it. Nothing is open on load.

   The cards are equal because the row is one grid of --pr-n equal columns
   with --ldb-cg between them, so a person joining or leaving needs no new
   CSS — only the --pr-n on the row.
   ========================================================================== */

/* ---- hero -------------------------------------------------------------- */
/* kept verbatim from the page's own v03 block */
.hero{ background: radial-gradient(120% 78% at 50% 0%, #EEF4FF 0%, #FFFFFF 62%); }
.fs-proof{ border-radius: 16px; box-shadow: var(--shadow-s); }
@media (min-width: 861px){
  .fs-proof{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .fs-proof{ grid-template-columns: minmax(0, 1fr); }
  .fs-pf{ display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px; align-items: baseline; padding: 12px 15px 13px; }
  .fs-pv{ grid-column: 1; grid-row: 1 / 3; }
  .fs-pk{ grid-column: 2; grid-row: 1; margin-top: 0; }
  .fs-pn{ grid-column: 2; grid-row: 2; }
}

/* --------------------------------------------------------------------------
   THE HERO ROSTER
   Was five large photo cards — the same five people, the same plates and the
   same designations that the board 700px below shows again. Two copies of
   one row is the repetition on this page, and it also made the hero the
   most image-heavy thing on a page about accountability.

   It stays complete — all five, still clickable, still the jump into the
   profile — but at the register it actually occupies: a roster line.
   -------------------------------------------------------------------------- */
.hr{ margin-top: clamp(20px, 2.8vh, 34px); width: 100%; }
.hr .hp-lab{ text-align: center; margin-bottom: 12px; }
.hr-list{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px clamp(4px, .6vw, 10px);
}
.hr-b{
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 7px 14px 7px 8px; border: 1px solid transparent; border-radius: 999px;
  background: none; font: inherit; color: inherit; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.hr-b:hover{ background: var(--paper); border-color: var(--line); }
.hr-fig{
  flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: var(--hs, var(--ground)); display: block;
}
/* the plates are full busts in an 800px square, so a 42px circle of the
   whole figure is a person-shaped speck. The head sits at ~24% of the
   frame; scaling about 50% 2% lands it in the middle of the circle. */
.hr-fig img{ width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.5); transform-origin: 50% 0%; }
.hr-t{ min-width: 0; }
.hr-n{ display: block; font-size: 13.6px; font-weight: 700; letter-spacing: -.028em;
  line-height: 1.2; color: var(--ink); }
.hr-d{ display: block; font-style: normal; margin-top: 2px; font-size: 11.6px; line-height: 1.25;
  color: var(--ink-3); }
.hr-b.is-on{ background: var(--paper); border-color: var(--hd, var(--accent)); }
.hr-b.is-on .hr-n{ color: var(--hd, var(--accent)); }

/* where the page still carries a micro-line it keeps its words and closes the
   hero, rather than echoing the proof strip it used to stand under */
.hero .ctaRow{ margin-top: clamp(18px, 2.4vh, 26px); }
.hero .microline{ margin-top: clamp(11px, 1.5vh, 15px); }

/* The phone journey marker now carries the section's own name, which is the
   same phrase as the hero eyebrow directly under it. assets/management/shell.css already
   suppresses the eyebrow wherever a journey marker states it
   (`.mj-bar ~ .w .eyebrow`); the hero is the one place that rule cannot
   reach, so the same rule is stated for it. */
@media (max-width: 760px){
  .hero .mj-here + .eyebrow{ display: none; }
}


/* ==========================================================================
   THE SECTION
   ========================================================================== */
/* the section's ground and its block padding belong to assets/shared/design/shelf.css */
.fs-who .fs-h{ margin-bottom: clamp(22px, 2.4vw, 34px); }


/* ==========================================================================
   THE BOARD
   ========================================================================== */
.ldb{
  --ldb-cg: clamp(12px, 1.2vw, 18px);        /* between two cards of a level */
  --ldb-pad: clamp(16px, 2.1vw, 32px);
  position: relative;
  padding: var(--ldb-pad);
  /* The board is the FIGURE and the section is its ground. It was tinted
     while #who was white; assets/shared/design/shelf.css (2026-09-08) makes #who a shelf at
     #F4F7FC, three points off the board's own #F1F5FC, and a tinted board on
     a tinted shelf stopped reading as one object at all — the frame became a
     stray outline. Paper on the shelf restores the figure/ground, and holds
     on a white section too because of the hairline and the lift. */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 1.6vw, 24px);
  box-shadow: var(--shadow-s);
  scroll-margin-top: calc(var(--barh) + 80px);
}

/* ---- the roster, one row ------------------------------------------------ */
/* It was three named levels side by side, each with its own heading over its
   own people. With the directors gone the split had nothing left to explain,
   so the board is what it always was underneath: every seat in one row, the
   cards equal, and the profile opening full width below them. */
.ldb-grid{ display: block; }

/* ---- the cards ---------------------------------------------------------- */
.fs-who .ldb .pr-row{
  display: grid;
  grid-template-columns: repeat(var(--pr-n, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--pr-rows, 4), auto);
  gap: 0 var(--ldb-cg);
  overflow: visible;                       /* the ring and the lift are outside */
  padding: 0;
}
/* each person owns a column, so a hidden neighbour leaves a gap rather than
   handing its width over */
.fs-who .ldb .pr{ grid-column: var(--i, auto); }
.fs-who .ldb .pr{
  background: var(--paper); border: 1px solid var(--line-b); border-radius: 15px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.fs-who .ldb .pr-b{ align-content: start; }
.fs-who .ldb .pr-fig{ border-radius: 0; background: var(--hs, var(--ground)); }
.fs-who .ldb .pr-img{ aspect-ratio: 3 / 4;
  object-position: 50% var(--py, 50%); scale: var(--z, 1); transform-origin: var(--ox, 50%) var(--oy, 50%); }
/* ---- one face size for all five portraits (2026-10-13) -------------------
   The five photos were shot at different distances (Gitashri half-length,
   Ankit and Vaibhav close head shots), so under one shared crop the faces came
   out at very different sizes. Each portrait carries its own zoom and focus,
   measured from the eye line and eye-to-mouth distance of its 233x333
   original, so every face is the same size at the same height. Nobody is
   zoomed out; the closer shots stay at 1.
     --py/--z/--ox/--oy           the card (desktop)
     --py-r/--z-r/--ox-r/--oy-r   the phone/tablet row (max-width 1119px)
     --py-c/--z-c/--ox-c/--oy-c   the hero "Leadership Team" chip
     --py-p/--z-p/--ox-p/--oy-p   the open profile's square photo
     --py-s/--z-s/--ox-s/--oy-s   the phone profile sheet's header thumbnail
   The files are 3x (699x999) Lanczos rebuilds of the originals, same shape
   and composition, so the hero cards on About, Contact and Careers that use
   them as backgrounds are unchanged apart from being sharper. */
img[src$="ld-gitashri.webp"]{ --py:0%; --z:1.469; --ox:84.3%; --oy:0%;
  --py-r:0%; --z-r:1.919; --ox-r:72.9%; --oy-r:7.5%;
  --py-c:0%; --z-c:1.487; --ox-c:83.4%; --oy-c:49.6%;
  --py-p:0%; --z-p:1.371; --ox-p:90.5%; --oy-p:20%;
  --py-s:0%; --z-s:1.815; --ox-s:74.4%; --oy-s:8.4%; }
img[src$="ld-ankit.webp"]{ --py:100%; --z:1; --ox:50%; --oy:50%;
  --py-r:0%; --z-r:1.208; --ox-r:48.8%; --oy-r:64.1%;
  --py-c:45.1%; --z-c:1; --ox-c:50%; --oy-c:50%;
  --py-p:52.1%; --z-p:1; --ox-p:50%; --oy-p:50%;
  --py-s:0%; --z-s:1.142; --ox-s:48.3%; --oy-s:93.6%; }
img[src$="ld-swasthi.webp"]{ --py:0%; --z:1.281; --ox:47.1%; --oy:0%;
  --py-r:0%; --z-r:1.673; --ox-r:48.4%; --oy-r:0%;
  --py-c:0%; --z-c:1.297; --ox-c:47.2%; --oy-c:39.5%;
  --py-p:0%; --z-p:1.195; --ox-p:46.1%; --oy-p:0%;
  --py-s:0%; --z-s:1.582; --ox-s:48.2%; --oy-s:0%; }
img[src$="ld-shanti.webp"]{ --py:0%; --z:1.254; --ox:84.9%; --oy:65.6%;
  --py-r:0%; --z-r:1.517; --ox-r:70.8%; --oy-r:38.6%;
  --py-c:20%; --z-c:1.302; --ox-c:80.5%; --oy-c:95.7%; }
img[src$="ld-vaibhav.webp"]{ --py:7.8%; --z:1; --ox:50%; --oy:50%;
  --py-r:0%; --z-r:1.305; --ox-r:50.9%; --oy-r:26%;
  --py-c:30%; --z-c:1.011; --ox-c:68.9%; --oy-c:0%; }
/* the hero chip: replaces the one-size scale(1.22) of inner-hero.css with the
   portrait's own crop (the extra [src] outranks rail.css's object-position) */
html body #overview#overview#overview #q7#q7#q7.cc .mp-i > .mp-m.ih-pic > img[src]{ transform: none;
  object-position: 50% var(--py-c, 20%); scale: var(--z-c, 1.22); transform-origin: var(--ox-c, 50%) var(--oy-c, 8%); }
/* the open profile and the phone sheet header (management.js wraps the sheet's
   thumbnail in .fs-sfig so the zoom is clipped to its rounded box) */
.ldb .fs-panel .pf-fig img{ scale: var(--z-p, 1); transform-origin: var(--ox-p, 50%) var(--oy-p, 50%); }
.fs-shead .fs-sfig{ width: 46px; height: 58px; flex: none; border-radius: 10px; overflow: hidden;
  background: var(--ground); }
.fs-shead .fs-sfig img{ display: block; width: 100%; height: 100%; border-radius: 0;
  object-position: 50% var(--py-s, 22%); scale: var(--z-s, 1); transform-origin: var(--ox-s, 50%) var(--oy-s, 50%); }
/* Shanti Saxena and Vaibhav Mittal: photo + name only, no profile to open */
.fs-who .ldb .pr:has(> .pr-b:not(button)){ cursor: default; }
.fs-who .ldb .pr:has(> .pr-b:not(button)):hover{ transform: none; box-shadow: none; border-color: var(--line-b); }
.fs-who .ldb .pr-n{ margin-top: 14px; padding-inline: clamp(12px, 1.1vw, 16px); }
.fs-who .ldb .pr-d{ padding-inline: clamp(12px, 1.1vw, 16px);
  min-height: 2.8em; }
.fs-who .ldb .pr-go{
  margin-top: 12px; padding: 0 clamp(12px, 1.1vw, 16px) clamp(14px, 1.3vw, 17px);
  color: var(--hd, var(--accent));
}
.fs-who .ldb .pr:hover{ border-color: var(--line-b); box-shadow: var(--shadow-m);
  transform: translateY(-3px); }
.fs-who .ldb .pr.is-on{
  border-color: var(--hd, var(--accent));
  box-shadow: 0 0 0 1.5px var(--hd, var(--accent)), var(--shadow-m);
  transform: none;
}
.fs-who .ldb .pr.is-on .pr-n{ color: var(--hd, var(--accent)); }


/* ==========================================================================
   THE DETAIL REGION — inside the board, under all three levels
   ========================================================================== */
.ldb-detail{ margin-top: clamp(18px, 2vw, 28px); }
.ldb-detail:empty{ display: none; margin: 0; }

.ldb .fs-panel{
  margin-top: 0; padding: 0; overflow: visible;
  border: 1px solid var(--line-b); border-radius: 18px;
  box-shadow: var(--shadow-l);
}
/* the pointer that ties the panel to the card that opened it. Every card is
   in one row now, so it reaches every one of them — it used to only ever point
   inside the level it was born in. */
.ldb .fs-panel::before{
  content: ""; position: absolute; top: -8px; left: var(--arrow, 80px);
  width: 15px; height: 15px; background: var(--pale);
  border-left: 1px solid var(--line-b); border-top: 1px solid var(--line-b);
  transform: rotate(45deg); transition: left .2s ease;
}
.ldb .fs-panel.is-off::before{ opacity: 0; }
.ldb .fs-panel .fs-x{ top: 18px; right: 18px; }

/* head band, body, foot — three grounds, so the identity, the record and the
   way out of it are three readable parts of one card */
.ldb .fs-panel .pf-id{
  padding: clamp(22px, 2.5vw, 36px);
  background: var(--pale); border-bottom: 1px solid var(--line-2);
  border-radius: 17px 17px 0 0;
  display: grid;
  grid-template-columns: clamp(148px, 12vw, 186px) minmax(0, 1fr);
  column-gap: clamp(20px, 2.4vw, 34px); row-gap: 0;
  align-items: start;
}
/* The plate is 186px tall and the four identity lines beside it about 150, so
   the shell's plain two-column split left ~180px of empty ground under the
   plate: the facts were nested inside the text column and could not cross
   under it. `display:contents` dissolves that wrapper, so the four lines keep
   column 2 and the three facts take the whole width below both. */
.ldb .fs-panel .pf-who{ display: contents; }
.ldb .fs-panel .pf-fig{ grid-column: 1; grid-row: 1 / span 4; }
.ldb .fs-panel .pf-code{ grid-column: 2; grid-row: 1; padding-right: 54px; }
.ldb .fs-panel .pf-n{ grid-column: 2; grid-row: 2; }
.ldb .fs-panel .pf-t{ grid-column: 2; grid-row: 3; }
.ldb .fs-panel .pf-r{ grid-column: 2; grid-row: 4; }
.ldb .fs-panel .pf-facts{ grid-column: 1 / -1; grid-row: 5; }
.ldb .fs-panel .pf-fig{ border-radius: 14px; background: var(--hs, var(--ground)); }
.ldb .fs-panel .pf-fig img{ aspect-ratio: 1 / 1; object-position: 50% var(--py-p, 50%); }
.ldb .fs-panel .pf-code i{ background: var(--hs); color: var(--hd); }
.ldb .fs-panel .pf-r{ max-width: 52ch; }

/* three facts, and one of the three publishes no reporting line — auto-flow
   columns give exactly as many equal columns as there are facts */
.ldb .fs-panel .pf-facts{
  margin-top: clamp(22px, 2.3vw, 30px);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 0; background: none;
  border-top: 1px solid var(--line-b);
}
.ldb .fs-panel .pf-facts div{ background: none; padding: 14px 22px 2px 0; }
.ldb .fs-panel .pf-facts div + div{
  padding-left: 22px; border-left: 1px solid var(--line-b);
}

/* the summary is three real paragraphs; it takes a column of its own and the
   two short blocks stack beside it, which is what balances the two heights */
.ldb .fs-panel .pf-grid{
  margin-top: 0; padding: clamp(22px, 2.5vw, 36px);
  grid-template-columns: 1.12fr 1fr;
  gap: clamp(22px, 2.4vw, 38px);
}
.ldb .fs-panel .pf-b--wide{ grid-row: span 2; }
.ldb .fs-panel .fs-nav{
  margin: 0; padding: 15px clamp(22px, 2.5vw, 36px);
  background: var(--pale); border-top: 1px solid var(--line-2);
  border-radius: 0 0 17px 17px;
}


/* ==========================================================================
   THE SCOPE NOTE
   ========================================================================== */
.fs-who .scope-note{ margin-top: clamp(22px, 2.4vw, 32px); max-width: none; }


@media (max-width: 1119px){
  .hr .hp-lab{ text-align: left; }
  .hr-list{
    flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hr-list::-webkit-scrollbar{ display: none; }
  .hr-list li{ scroll-snap-align: start; }
  .hr-b{ background: var(--paper); border-color: var(--line); white-space: nowrap; }
}

/* ==========================================================================
   BELOW 1120px — THE SAME SYSTEM AS ROWS
   --------------------------------------------------------------------------
   Five cards across need ~180px each before the plates stop reading. Rather
   than shrink them, the board keeps its structure and changes its unit: each
   level becomes a heading over ONE surface of hairline-separated rows, which
   fills the lane at every width and can never strand a one-person level.
   The same layout carries all the way down to the smallest phone.
   ========================================================================== */
@media (max-width: 1119px){
  /* the row becomes one surface of hairline-separated rows, and that surface
     is then the board's only frame — the board's own card around a single
     list was a frame inside a frame once the level headings went */
  .ldb{
    padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .fs-who .ldb .pr-row{
    display: block; background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; overflow: hidden; gap: 0;
  }
  .fs-who .ldb .pr{
    display: block; border: 0; border-radius: 0; background: none;
    box-shadow: none; transform: none;
  }
  .fs-who .ldb .pr + .pr{ border-top: 1px solid var(--line-2); }
  .fs-who .ldb .pr:hover{ background: var(--pale); box-shadow: none; transform: none; }
  .fs-who .ldb .pr.is-on{
    box-shadow: none; background: var(--hs);
    border-color: transparent;
  }

  .fs-who .ldb .pr-b{
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto; align-items: center;
    column-gap: clamp(12px, 1.6vw, 16px);
    padding: clamp(11px, 1.3vw, 14px) clamp(12px, 1.5vw, 16px);
  }
  .fs-who .ldb .pr-fig{
    grid-column: 1; grid-row: 1 / 3; width: clamp(56px, 7vw, 66px);
    border-radius: 12px;
  }
  /* the head sits in the top ~60% of the plate; at 60px the whole bust is a
     speck, so the row shows the same crop the hero roster does */
  /* the crop is the separate `scale` property, not `transform`: the portrait's transform transition (the desktop hover zoom) animated
     this crop for half a second whenever the width crossed this breakpoint (2026-09-16). Same picture, no hover zoom here. */
  .fs-who .ldb .pr-img, .fs-who .ldb .pr-b:hover .pr-img{ transform: none;
    object-position: 50% var(--py-r, 50%); scale: var(--z-r, 1.5); transform-origin: var(--ox-r, 50%) var(--oy-r, 0%); }
  .fs-who .ldb .pr-n{ grid-column: 2; grid-row: 1; margin: 0; padding: 0;
    font-size: clamp(15px, 1.8vw, 16.5px); }
  .fs-who .ldb .pr-d{ grid-column: 2; grid-row: 2; margin-top: 3px; padding: 0;
    font-size: clamp(12px, 1.4vw, 13px); }
  .fs-who .ldb .pr-go{
    grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0;
    align-self: center; gap: 8px;
  }
  .fs-who .ldb .pr.is-on .pr-go svg{ transform: rotate(90deg); }

  /* the panel is still the board's own detail region, so it still opens
     under the level it belongs to and never inside it */
  .ldb .fs-panel .pf-grid{ grid-template-columns: minmax(0, 1fr); }
  .ldb .fs-panel .pf-b--wide{ grid-row: auto; }
}

@media (max-width: 900px){
  .ldb .fs-panel .pf-id{ grid-template-columns: clamp(120px, 17vw, 160px) minmax(0,1fr); }
  .ldb .fs-panel .pf-facts{ grid-auto-flow: row; grid-auto-columns: auto; }
  .ldb .fs-panel .pf-facts div{ padding: 13px 0 3px; }
  .ldb .fs-panel .pf-facts div + div{ padding-left: 0; border-left: 0;
    border-top: 1px solid var(--line-2); }
}

/* ==========================================================================
   THE PHONE
   --------------------------------------------------------------------------
   One ground for the section, one board on it, two named groups, three
   rows. The whole management structure is inside the first screen and a
   half, and the profile still arrives as the bottom sheet, so a thumb never
   travels to find what it just tapped.
   ========================================================================== */
@media (max-width: 760px){
  /* assets/management/shell.css orders the phone hero: mj-here -1, eyebrow 0, h1 1, lede 2,
     proof 3, microline 4, people 5, ctaRow 6. An un-ordered child defaults to
     0 and lands above the headline, so both of these state their own place. */
  .hr{ order: 5; margin-top: clamp(18px, 5vw, 26px); }
  .hero .microline{ order: 7; }
  /* the rail runs edge to edge on a phone, so the first chip starts on the
     gutter and the last one can be scrolled clear of it */
  .hr-list{ margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }

  /* the section owns its ground, the board sits on it as one object */
  /* on a phone the shelf IS the board: a card inside a full-bleed tinted
     block only adds a second frame at the one width with none to spare */
  .ldb{ scroll-margin-top: calc(var(--barh) + 52px); }
  .fs-who .ldb .pr-go i{ display: none; }
  .fs-who .ldb .pr-go svg{ width: 17px; height: 17px; }
  .fs-who .scope-note{ margin-top: 20px; }
}