:root {
  --about-navy: #051a3a;
  --about-gold: #cc8b2a;
}

body {
  background:
    radial-gradient(circle at 92% 3%, rgba(198, 228, 249, .82), transparent 32rem),
    linear-gradient(135deg, #fbfaf8 2%, #fff 42%, #edf7fc 100%);
}
.about-page { color: var(--about-navy); overflow: clip; }
.about-page > primary-menu {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.about-hero {
  align-items: flex-start;
  /*
   * The artwork is placed rather than `cover`ed, so the runner sits clear of
   * the floating menu and right of the copy at every width, with its trailing
   * foot still inside the section.
   *
   * --about-art-w is the artwork's painted width. The floor keeps it tall
   * enough to fill the section (1205 px wide is 678 px tall: 660 plus the
   * 18 px the bottom offset trims); the cap stops a wide screen from scaling
   * the runner up until its head disappears behind the menu.
   *
   * --about-art-x is its left edge: the runner's head (two thirds across the
   * artwork) is put 56 px right of where `cover` used to put it, or further
   * right if that is what it takes for the artwork to reach the right edge.
   */
  --about-art-w: clamp(1205px, 97.8vw, 1404px);
  --about-art-x: calc(max(.667 * max(100vw, 1173px) + 56px, 100vw - .333 * var(--about-art-w) + 44px) - .667 * var(--about-art-w));
  background-color: #edf7fc;
  /* Two layers of the same file, so it is fetched once. The second is the
     artwork's leftmost column stretched sideways: it fills whatever the first
     leaves uncovered on the left with the same sky and orange band, row for
     row, so the band runs unbroken to the edge of the screen. */
  background-image: url('/images/generated/aboutUsBanner-1280.webp'), url('/images/generated/aboutUsBanner-1280.webp');
  background-image: image-set(url('/images/generated/aboutUsBanner-1280.avif') type('image/avif'),
      url('/images/generated/aboutUsBanner-1280.webp') type('image/webp')),
    image-set(url('/images/generated/aboutUsBanner-1280.avif') type('image/avif'),
      url('/images/generated/aboutUsBanner-1280.webp') type('image/webp'));
  background-position: left var(--about-art-x) bottom -18px, left bottom -18px;
  background-repeat: no-repeat;
  background-size: var(--about-art-w) auto, 100000px calc(var(--about-art-w) * .5625);
  display: flex;
  height: 660px;
  isolation: isolate;
  overflow: hidden;
  /* The copy starts 72 px left of the shared hero inset, a little further
     out than the home page's landing banner copy (48 px), but never closer
     than 24 px to the edge. */
  padding: var(--public-page-label-top) 7vw 18px max(24px, calc(var(--public-hero-copy-left) - 72px));
  position: relative;
}

@media (min-width: 1400px) {
  .about-hero {
    background-image: url('/images/generated/aboutUsBanner-1920.webp'), url('/images/generated/aboutUsBanner-1920.webp');
    background-image: image-set(url('/images/generated/aboutUsBanner-1920.avif') type('image/avif'),
        url('/images/generated/aboutUsBanner-1920.webp') type('image/webp')),
      image-set(url('/images/generated/aboutUsBanner-1920.avif') type('image/avif'),
        url('/images/generated/aboutUsBanner-1920.webp') type('image/webp'));
  }
}

.hero-copy {
  position: relative;
  width: min(670px, 49vw);
  z-index: 2;
}
/* The heading and the line under it are set exactly like the home page's
   landing banner (`.advance-flight-copy` in styles/landing.css): the same
   ink, faces, sizes, weights, tracking and leading, and no text shadow. */
.hero-copy h1 {
  color: #080b1a;
  font: 700 clamp(42px, 4.2vw, 64px)/.98 var(--font-serif);
  letter-spacing: -.045em;
  /* The heading is a full sentence; balance its lines rather than hand-break
     them, so no width leaves a single word stranded on a line. */
  text-wrap: balance;
  /* Sits 20 px higher than the copy did before its badge was removed. */
  margin: 30px 0 16px;
}
.hero-copy p {
  color: #344260;
  /* The landing banner's face, weight and leading, a size up from its 13 px. */
  font: 600 15px/1.55 var(--font-body);
  margin: 0;
}
.hero-divider { align-items: center; display: flex; gap: 13px; margin: 0 0 22px; width: 520px; }
.hero-divider > span { background: linear-gradient(90deg, #d18d28, #ead4b0); height: 1px; flex: 1; }
.hero-divider img { display: block; height: 27px; object-fit: contain; width: 34px; }

.hero-orbit { border: 1px solid rgba(214, 147, 46, .42); border-radius: 50%; pointer-events: none; position: absolute; }
.hero-orbit--left { bottom: -124px; height: 350px; left: -255px; width: 350px; }
.hero-orbit--left::before, .hero-orbit--left::after { border: inherit; border-radius: inherit; content: ''; inset: 17px; position: absolute; }
.hero-orbit--left::after { inset: 34px; }
.hero-orbit--right { height: 250px; right: -126px; top: 277px; width: 250px; }
.hero-orbit--right i { background: #fff; border-radius: 50%; bottom: -4px; box-shadow: 0 0 8px 3px rgba(239, 170, 65, .8); height: 7px; left: 41px; position: absolute; width: 7px; }

.values { background: #fdfcfb; padding: 25px 5vw 42px; }
.section-heading { align-items: center; display: flex; gap: 22px; margin: 0 auto 17px; max-width: 1188px; }
.section-heading span { background: #d89b47; height: 1px; flex: 1; }
.section-heading h2 { font: 400 27px/1.2 var(--font-display); margin: 0; white-space: nowrap; }
.values-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin: 0 auto; max-width: 1188px; }
.value-card {
  align-items: center;
  background: rgba(255, 255, 255, .55);
  border: 1px solid #e9e5df;
  border-radius: 12px;
  box-shadow: 0 2px 7px rgba(19, 38, 66, .045);
  display: flex;
  flex-direction: column;
  min-height: 208px;
  padding: 16px 12px 20px;
  text-align: center;
}
.value-icon { border-radius: 50%; display: grid; height: 76px; place-items: center; width: 76px; }
.value-icon svg { fill: none; height: 54px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 54px; }
.value-icon--blue { background: #eeeffa; color: #12245a; }
.value-icon--gold { background: #fbf0dd; color: #c48320; }
.value-icon--green { background: #e6f2e8; color: #08652f; }
.value-icon--violet { background: #ededfa; color: #303b94; }
.value-card h3 { font: 400 19px/1.2 var(--font-display); margin: 12px 0 7px; }
.value-card p { color: #0e2141; font: 500 14px/1.55 var(--font-body); margin: 0; }
.about-page .modal-content { color: #0f172a; }
.stand-heading { margin-top: 28px; }
.stand-grid {
  background: linear-gradient(100deg, #fbf8f2, #fffdf9 48%, #faf7f1);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(92, 66, 29, .045);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
  max-width: 1188px;
  padding: 28px 22px;
}
.stand-item { align-items: flex-start; display: flex; gap: 16px; min-height: 106px; padding: 0 20px; }
.stand-item + .stand-item { border-left: 1px solid #e8e2d9; }
.stand-icon {
  background: rgba(255, 255, 255, .9);
  border: 1px solid #eee7dc;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(95, 64, 20, .06);
  color: #d2912f;
  display: grid;
  flex: 0 0 52px;
  height: 52px;
  place-items: center;
  width: 52px;
}
.stand-icon svg { fill: none; height: 34px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 34px; }
.stand-item h3 { font: 400 18px/1.35 var(--font-display); margin: 0 0 8px; }
.stand-item p { color: #233451; font: 500 11px/1.7 var(--font-body); margin: 0; }

@media (max-width: 1050px) {
  .hero-copy { width: 58vw; }
  .hero-copy p br { display: none; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .stand-grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .stand-item:nth-child(3) { border-left: 0; }
}
@media (max-width: 900px) {
  .about-hero { height: 640px; padding-top: var(--public-page-label-top); }
}
@media (max-width: 680px) {
  .about-hero {
    align-items: flex-start;
    background-image: url('/images/generated/aboutUsBanner-768.webp');
    background-image: image-set(url('/images/generated/aboutUsBanner-768.avif') type('image/avif'),
        url('/images/generated/aboutUsBanner-768.webp') type('image/webp'));
    background-position: 57% 24px;
    background-size: auto 88%;
    height: 690px;
    padding: var(--public-page-label-top) 22px 34px var(--public-hero-copy-left);
  }
  /* On a phone the copy sits over the runner and the orange band, so it gets
     a soft white panel whose glow feathers into the artwork. The panel's top
     margin stands in for the heading's, keeping the copy where it was. */
  .hero-copy {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 18px;
    box-shadow: 0 0 28px 14px rgba(255, 255, 255, .6);
    margin-top: 34px;
    padding: 20px 18px 22px;
    transform: none;
    width: 100%;
  }
  /* The landing banner's phone sizes, centred as it centres them. */
  .hero-copy { text-align: center; }
  .hero-copy h1 { font-size: clamp(36px, 11.5vw, 44px); line-height: .96; margin: 0 0 22px; }
  .hero-copy p { font-size: 13px; line-height: 1.45; }
  .hero-divider { max-width: 100%; }
  .values { padding: 24px 18px 30px; }
  .values-grid { grid-template-columns: 1fr; }
  .value-card { min-height: 200px; }
  .stand-grid { grid-template-columns: 1fr; padding: 24px 18px; }
  .stand-item { padding: 0; }
  .stand-item + .stand-item { border-left: 0; border-top: 1px solid #e8e2d9; padding-top: 24px; }
}

/* ── Who builds Vestmind ─────────────────────────────────────────────────── */

/*
 * The founder section. It is the element `https://vestmind.in/about/#harshadip-das`
 * resolves to — the `Person` the entity graph names as founder and every
 * knowledge page names as author — so it is a real, readable part of the page
 * rather than an anchor hidden for a crawler's benefit.
 */
.team {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

.team-member h3 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: -0.015em;
}

.team-role {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.team-member p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
}

.team-member a { color: var(--brand-blue); }
.team-member a:hover { text-decoration: underline; }

/* Where else the founder can be found. The same profiles are the Person
   node's sameAs; showing them is what makes that claim checkable. */
.team-member .team-profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 20px;
}

.team-member .team-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border: 1px solid #D7E7F5;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0F172A;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

.team-member .team-profile svg { width: 15px; height: 15px; fill: currentColor; }
.team-member .team-profile:hover,
.team-member .team-profile:focus-visible { text-decoration: none; border-color: currentColor; }
.team-member .team-profile--linkedin:hover,
.team-member .team-profile--linkedin:focus-visible { color: #0A66C2; }
.team-member .team-profile--instagram:hover,
.team-member .team-profile--instagram:focus-visible { color: #E4405F; }
.team-member .team-profile:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

@media (max-width: 640px) {
  .team { padding: 32px 16px 0; }
}