/* About page layout: company story, Mission & Vision (+ condensed values
   restate), MD's Desk spotlight, Our Team grid. Component-level styling
   (buttons, nav, hero slideshow, mosaic reveal, footer, CTA band) lives in
   components.css — this file is purely about-page arrangement. */

/* Anchor targets for the nav's About dropdown (js/main.js#initNavDropdowns
   links to these ids) — offset so the fixed nav doesn't cover a section's
   heading when a dropdown link jumps straight to it. */
#mission-vision,
#md-desk,
#our-team {
  scroll-margin-top: calc(var(--nav-height) + var(--space-md));
}

/* ---------- Company story ----------
   section--dark (set in about.html) puts this on the same background as
   MD's Desk further down — the two dark sections bookend the light
   Mission & Vision section between them. Two-column pull-quote + prose
   layout gives it real visual weight; it used to be two short paragraphs
   on a plain light background and read as filler. */

.story-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-top: var(--space-lg);
}

.story__quote {
  margin: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--color-white);
}

.story__body {
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
}

.story__services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.story__services li {
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Milestones ----------
   Third distinct visualization of the same five-year turnover/manpower
   figures used on projects.html (bars) and index.html (line) — bars
   again here, but each paired with a person-icon manpower count above
   it, closer to a classic "milestones" chart. Two-column intro/chart
   shape matches the other two growth sections; see
   js/animations.js#initMilestoneBars / #initMilestoneTooltip for the
   scroll-triggered grow-in and hover/focus tooltip this sets states up
   for. */

.milestones__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
}

.milestones__lead {
  margin-top: var(--space-sm);
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.82);
}

.milestones__chart {
  width: 100%;
  position: relative;
}

.milestone-chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.milestone-chart__baseline {
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 1;
}

/* Muted for the four earlier years, current year in full accent —
   same convention the other two growth charts use. */
.milestone-bar__rect {
  fill: var(--color-blue-300);
}

.milestone-bar--current .milestone-bar__rect {
  fill: var(--color-accent);
}

.milestone-bar__value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--color-white);
}

.milestone-bar__icon {
  fill: rgba(255, 255, 255, 0.85);
}

.milestone-bar__manpower {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
  fill: rgba(255, 255, 255, 0.85);
}

.milestone-bar__year {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-anchor: middle;
  fill: rgba(255, 255, 255, 0.55);
}

/* Each .milestone-bar (rect + value + icon + manpower + year) fades in
   as one unit while js/animations.js#initMilestoneBars grows the rect
   itself via its height/y attributes — same split responsibility as the
   growth-trend chart's points (group opacity vs. an attribute tween on
   one child), and for the same reason: a CSS transform/scale on this
   group would hit the identical transform-origin unreliability noted
   there, since some of these groups mix a rect with wide text too. */
.milestone-bar {
  opacity: 0;
}

.milestone-bar__hit {
  fill: transparent;
  cursor: pointer;
  outline: none;
}

.milestone-bar__hit:focus-visible {
  fill: rgba(255, 255, 255, 0.06);
}

.milestone-chart__legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.55);
}

.milestone-chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.milestone-chart__legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-accent);
}

.milestone-chart__legend-icon svg {
  fill: rgba(255, 255, 255, 0.7);
}

/* Same pattern as .trend-tooltip on Home — plain HTML, positioned over
   the SVG by measuring the hovered bar's real on-screen box rather than
   doing that math in SVG user-space. */
.milestone-tooltip {
  position: absolute;
  z-index: 5;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(20, 33, 61, 0.35);
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-10px);
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.milestone-tooltip.is-visible {
  opacity: 1;
}

/* ---------- Mission & Vision ---------- */

.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.mission-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-blue-100);
}

.mission-card h3 {
  color: var(--color-blue-700);
}

.mission-card p {
  margin-top: var(--space-sm);
  color: var(--color-ink-soft);
}

/* Condensed restate of Home's full Core Values mosaic rows — same four
   values, one line each, no mosaic-reveal treatment. Repeating Home's
   full-bleed pixel-dissolve version here would be redundant; this page
   just needs enough for "About" to feel complete on its own. */
.values-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}

.values-strip__index {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-accent);
}

.values-strip__item h4 {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
}

.values-strip__item p {
  margin-top: var(--space-3xs);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

/* ---------- MD's Desk ---------- */

.md-desk {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  /* start, not center — with the text column now sized up to better match
     the portrait's height, top-aligning both reads as one deliberate
     block instead of a mismatched pairing. */
  align-items: start;
  gap: var(--space-2xl);
}

/* position: relative + overflow: hidden are required by the mosaic-reveal
   host contract (js/animations.js#initMosaicReveal draws its cell grid as
   an inset: 0 absolutely-positioned overlay) — same as .service-block__
   panel. The div's own background-image (set inline in about.html) is
   what the script auto-detects and slices instead of generating a texture. */
.md-desk__portrait {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center top;
  /* Fallback tone if JS/canvas can't run, or briefly while the photo loads. */
  background-color: var(--color-blue-900);
}

/* Inter 600 + uppercase, matching .team-card__name — see that rule's
   comment for why (Forum has no bold weight to synthesize from). */
.md-desk__name {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}

.md-desk__title {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-body-lg);
  color: var(--color-accent);
}

.md-desk__bio {
  margin-top: var(--space-lg);
  font-size: var(--fs-body-lg);
  /* .section--dark's own color (--color-text-inverse, solid white) is a bit
     stark for a multi-line bio paragraph — same softened-white treatment
     .hero__lead uses on the equally-dark hero card. */
  color: rgba(255, 255, 255, 0.82);
}

.md-desk__bio p+p {
  margin-top: var(--space-sm);
}

.md-desk__signoff {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Our team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Soft-blue card against the section's off-white background — same shade
   .mission-card uses, so the page's two card types read as one family. */
.team-card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-blue-100);
  box-shadow: 0 10px 24px -16px rgba(20, 33, 61, 0.22);
  text-align: center;
}

/* Inset within the card's own padding (was edge-to-edge/flush before,
   which read as sitting adjacent to the card rather than inside it) —
   its own border-radius on all four corners now, not just the top two,
   since it's no longer relying on a parent overflow:hidden crop to look
   rounded. position: relative + overflow: hidden are required by the
   mosaic-reveal host contract — see .md-desk__portrait's comment above,
   same deal here. */
.team-card__photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center top;
  background-color: var(--color-blue-300);
}

.team-card__body {
  padding-top: var(--space-md);
}

/* Inter 600 (already loaded — see index.html's Google Fonts link), not
   --font-display: Forum only ships weight 400, so a bold heading here
   would force the browser to synthesize a fake-bold, which the rest of
   the site deliberately avoids (see variables.css --font-display comment). */
.team-card__name {
  font-family: var(--font-mono);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.team-card__title {
  margin-top: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-accent);
}

.team-card__bio {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  text-align: justify;
}

/* ---------- Heads of Department ---------- */
/* Second tier below the leadership cards above — same card family
   (mosaic-reveal photo, mono name, accent-colored title) but deliberately
   smaller and lighter: white card + hairline border instead of the
   leadership cards' saturated blue-100 fill + shadow, smaller photo, no
   bio, h3 not h2 — still reads as a card, just a visibly lighter one, so
   it lands as reporting into the leadership above rather than a fourth
   peer. */
.hod-head {
  margin-top: var(--space-xl);
  text-align: center;
}

.hod-head h3 {
  margin-top: var(--space-3xs);
}

.hod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.hod-card {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  text-align: center;
}

.hod-card__photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center top;
  background-color: var(--color-blue-300);
}

.hod-card__name {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}

.hod-card__title {
  margin-top: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-accent);
}

@media (max-width: 860px) {

  .story-grid,
  .mission-grid,
  .values-strip,
  .team-grid,
  .hod-grid,
  .milestones__grid {
    grid-template-columns: 1fr;
  }

  .story__quote {
    font-size: var(--fs-body-lg);
  }

  .md-desk {
    grid-template-columns: 1fr;
  }

  .md-desk__portrait {
    max-width: 320px;
  }
}