/* =====================================================================
   The letter chapters — shared by two inside pages
     joint-letter-from-shyam-s-bhartia-...-whole-time director.html
     ceo-and-managing-directors-message.html
   Both are set the same way (two-column hero, one column of running text,
   blue sub-heads, one outlined pull-quote), so they share this sheet
   rather than each carrying a near-identical copy.
   ---------------------------------------------------------------------
   Loaded AFTER main.css (tokens, nav/footer, #site-waves, [data-reveal])
   and about.css (the container/row/col grid and the shared .abt-hero
   furniture). Only what differs on this page lives here.

   TYPE SCALE — fixed px, as agreed for this chapter:
     30px  the letter's own title
     20px  salutation, every blue sub-heading, and the pull-quote
     16px  body copy
   ===================================================================== */

/* ---- 1. hero ---------------------------------------------------------
   Unlike the other inside pages this hero carries no banner photograph —
   the portrait sits beside the title in its own column instead. So every
   part of .abt-hero written to serve a full-bleed picture has to be
   undone: the min-height sized for a photo, the bottom alignment, the
   overflow clip and the white title that relied on the image for
   contrast. The section paints plain white and the title goes brand blue,
   the same correction .gf-hero makes. */
   .jl-hero .abt-label{
    max-width: 555px;
   }
.jl-hero {
  position: relative;
  min-height: 0;
  display: block;
  overflow: visible;
  /* top pad clears the fixed nav, which sits over the hero on every page */
  padding: 150px 0 0;
  background: #fff;
}
.jl-hero__row {
  align-items: center;
  row-gap: 2.4rem;
}
/* .abt-hero__inner is kept on the copy block so the markup matches the
   other pages, but inside a column it must not re-apply the page gutter
   or the centring max-width — the .container above it already does both. */
.jl-hero .abt-hero__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* The Joint Letter chip spells out both names and both titles, so unlike
   every other .abt-label it cannot sit on one line. A 999px radius only
   reads as a pill while the text is single-line — over two lines it turns
   into a lozenge — so the wrapping variant squares the corners off and
   opens the leading instead. */
.abt-label--wrap {
  display: block;
  width: fit-content;
  max-width: 46ch;
  border-radius: 14px;
  padding: 8px 14px;
  line-height: 1.45;
}

/* both lines of the title are the same size here — the break is an explicit
   <br>, so no max-width measure is needed to force one */
.jl-hero .abt-hero__title {
  color: var(--brand-blue);
  text-shadow: none;
  max-width: none;
}
.jl-hero__media {
  display: block;
  margin: 0 0 0 auto;
  max-width: 560px;
}
/* Joint Letter runs image-left (CEO Message keeps the right-hand default
   above), so its photo hugs the inner edge of the column rather than the
   outer one. */
.jl-hero__media--start {
  margin: 0 auto 0 0;
}
/* Fixed 8:9 box so both hero portraits come out identical in size. That
   is joint-letter-2.webp's own ratio (1920x2160), so it is a no-op there
   -- it exists for ceo-img.webp, which is 748x580 landscape and rendered
   noticeably shorter than the Joint Letter portrait beside it. cover
   crops that one's generous grey side margins rather than resizing the
   subject, so the file itself is untouched. */
.jl-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 9;
  object-fit: cover;
  border-radius: 18px;
}
/* portrait credit, as captioned under the photograph in the printed page */
.jl-hero__caption { margin-top: 0.9rem; }
/* the Joint Letter portrait holds two people, so its credit splits into two
   equal columns — one landing under each figure — instead of the single
   stack the CEO page uses */
.jl-hero__caption--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.4rem;
}
.jl-hero__caption-name {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-blue);
}
.jl-hero__caption-role {
  display: block;
  font-size: 16px;
  color: #2b2b2b;
}

/* ---- 2. the letter ---------------------------------------------------- */
.jl-section {
  padding: 40px 0 30px;
  background: #fff;
}
/* the letter is one column of running text — held short of the full
   1500px container so the 16px measure stays readable */

/* 30px — the letter's own title, the same block heading the other
   chapters open with */
.jl-letter__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--brand-blue);
  margin: 0 0 1.2rem;
}

/* 20px — "Dear Shareholders and Valued Stakeholders," */
.jl-letter__salutation {
  font-family: var(--font-display);
  font-size: 20px !important;
  font-weight: 500;
  line-height: 1.4;
  color: var(--brand-blue);
  margin: 0 0 1.4rem;
}

/* 20px — every blue sub-heading down the letter. These were bold lead-ins
   inside their paragraphs in the homepage overlay; on a full page they get
   to be real headings, which is what makes the letter scannable. */
.jl-letter__subhead {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-blue);
  margin: 10px 0px;
}

/* 16px — body copy */
.jl-letter p {
  font-size: 16px;
  line-height: 1.8;
  color: #2b2b2b;
  margin: 0 0 15px;
}
.jl-letter p:last-child { margin-bottom: 0; }
.jl-letter strong { color: var(--brand-blue); }

/* ---- the pull-quote ---------------------------------------------------
   A rounded outline box with the blue comma mark sitting above the copy,
   as drawn in the printed letter. The quote is 20px and brand blue so it
   reads as a lifted line rather than another paragraph. */
.jl-quote {
  margin: 15px 0px;
  padding: 1.6rem clamp(1.4rem, 3vw, 2.2rem) 1.8rem;
  border: 1.5px solid #7fd4f5;
  border-radius: 18px;
  background: #fff;
}
.jl-quote__mark {
  display: block;
  width: 44px;
  height: auto;
  margin: 0 0 1rem;
}
.jl-quote blockquote {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--brand-blue);
}

/* ---- sign-off --------------------------------------------------------- */
.jl-signoff { margin-top: 2.4rem; }
.jl-signoff p { margin-bottom: 0.6rem; }
.jl-signoff__name {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-blue);
}
.jl-signoff__role {
  display: block;
  font-size: 16px;
  color: #2b2b2b;
}
.jl-signoff__people {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3.5rem;
  margin-top: 1rem;
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 999px) {
  .jl-hero__media {
    margin: 0 auto;
    max-width: 460px;
  }
  /* Below about.css's xl breakpoint every column is full width, so Joint
     Letter's image-first source order would stack its photo above its own
     heading. Put the copy back on top here, so both hero pages read
     label -> title -> portrait on a phone. */
  .jl-hero__row--media-first > :first-child { order: 2; }
  .jl-hero__row--media-first > :last-child { order: 1; }
}

@media (max-width: 767px) {
  .jl-hero { padding-top: 120px; }
  /* the 55px line-height is a desktop value — at phone type sizes it leaves
     the two lines floating apart, so it scales with the title instead */
  .jl-hero .abt-hero__title { line-height: 1.14; }
  .jl-quote blockquote { font-size: 18px; }
  .jl-quote__mark { width: 36px; }
}