/* SECTION 1 — HERO
 *
 * Every value below was MEASURED off
 * 01_Home_Hero_Frozen_Master_1983x793.png, which is 1.377x a 1440px design.
 * Master pixels divided by 1.377 give the numbers used here.
 *
 *   copy starts        x = 81px
 *   eyebrow cap        10.2px   -> ~13px Inter 600, letter-spaced
 *   headline caps      50.1 / 35.6 / 37.8 / 49.4px  -> 46px, line-height 1.18
 *   body cap           16px     -> ~17px, line-height 1.62
 *   section height     576px
 *
 *   background         #ECF7FE
 *   eyebrow            #1A4093
 *   headline dark      #092D8B
 *   headline blue      #0A62FE
 *   body               #001C6B
 *
 * THE TWO HERO BUTTONS ARE DELIBERATELY ABSENT. The supplied copy says:
 * "The two Hero buttons were deliberately removed and must not be restored."
 */

.hero {
  background: #ECF7FE;
  position: relative;
  overflow: hidden;
}
.hero__grid {
  max-width: 1440px;
  margin-inline: auto;
  display: grid;
  /* 746px is where the photograph begins in the master; the copy sits left
     of it with the headline measured at 522px and the body at 590px. */
  /* The copy column is 665px, not 746: the grid starts after the 81px left
     padding, and 81 + 665 = 746, which is where the photograph begins in the
     master. */
  grid-template-columns: 665px minmax(0, 1fr);
  /* The master ALIGNS THE COPY TO THE TOP, at y=54 for the eyebrow -- it is
     not vertically centred. Centring put the whole block 45px low. */
  align-items: start;
  min-height: 576px;
  padding-inline: 80px 0;
}
.hero__copy { padding-top: 54px; }

.hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: #1A4093;
  /* 26px, so the headline lands at y=95 as the master has it. */
  margin: 0 0 26px;
}

.hero__title {
  margin: 0;
  /* 522px is the headline's measured width in the master -- wider and the
     four approved line breaks do not hold. */
  /* 58px. Found by rendering the master's second line, "know the answer.",
     at candidate sizes and matching its measured 409px width -- 58px gives
     408. Estimating from cap height had put this at 41px. */
  max-width: 660px;
  /* Inter 700 at 50px. Measured: the master's second line is 409px wide and
     50/700 reproduces it exactly. 800 is too heavy -- stem ratio 0.180
     against the master's 0.150. */
  font-size: 50px;
  line-height: 1.005;
  font-weight: 700;
  letter-spacing: -.018em;
  color: #092D8B;
}
/* The master sets the second sentence in CampusVoice blue. */
.hero__title b { color: #0A62FE; font-weight: 700; }

.hero__body {
  margin: 22px 0 0;
  max-width: 590px;
  font-size: 17px;
  line-height: 1.62;
  color: #001C6B;
}

/* THE STAT BAR. A white card that sits across the lower third, overlapping
   the photograph's left edge in the master. */
.hero__stats {
  position: absolute;
  /* EXACTLY the master's card: x 81..1260, y 465..537. It has to match,
     because the right third of the master's own card is baked into the
     photograph crop -- at this geometry the live card covers it. */
  /* x 81..984 -- 903px. The first measurement said 1179 because it scanned
     for white across the full row and caught the GOOD MINDS sign inside the
     photograph. The extra width is what overlapped Vani. */
  /* The master's own card: x 81..985, y 462..540. */
  /* Measured at seven columns: the card is 905 x 94 at (81, 444). */
  left: 81px;
  top: 444px;
  width: 905px;
  height: 94px;
  z-index: 2;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(9, 45, 139, .10);
  padding: 0 8px;
}
.hero__stat { display: flex; align-items: center; gap: 12px; padding-inline: 20px; }
.hero__stat + .hero__stat { border-left: 1px solid #E4EDF9; }
.hero__stat img { width: 45px; height: 45px; flex: 0 0 45px; }
.hero__stat b {
  font-size: 27px; font-weight: 800; color: #0A62FE; letter-spacing: -.02em;
  line-height: 1;
}
.hero__stat span {
  /* 22ch, not 15: at 15 the labels broke to three lines where the master
     has two, which made the card taller than 72px. */
  /* The master wraps every label to TWO lines. 13.5px over about 172px does
     that for the longest of them, "Insightful practice conversations per
     year". */
  font-size: 13.5px; line-height: 1.34; color: #123A86; width: 172px;
}

/* THE PHOTOGRAPH.
   Cropped from the frozen master, so it is the designers' own artwork rather
   than a substitute. It carries the scripted annotation, the campus
   background, the student, Vani and the GOOD MINDS sign -- all composited in
   the master with no separate layers available. */
.hero__art { position: relative; justify-self: stretch; height: 576px;
             overflow: hidden; }
/* The crop is 956x793 for a 694x576 slot. cover keeps its proportions and
   anchors left, so the student and Vani stay where the master puts them. */
.hero__art img { width: 100%; height: 100%; object-fit: cover;
                 object-position: left center; }

/* ---- responsive ---------------------------------------------------------
   The master is a desktop design. Below 1000px the copy takes the full width
   and the photograph sits beneath it, so nothing is cropped away -- which is
   what the stitched build did to every section. */

@media (max-width: 1180px) {
  .hero__grid { padding-inline: 48px 0; grid-template-columns: minmax(0, 48%) minmax(0, 1fr); }
  .hero__stats { left: 48px; }
  .hero__title { font-size: 40px; }
}

@media (max-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 44px 24px 0;
    gap: 26px;
  }
  .hero__title { font-size: clamp(30px, 5.4vw, 42px); }
  .hero__body { font-size: 16px; max-width: none; }
  /* Out of absolute flow, so it cannot sit on top of the photograph. */
  .hero__stats {
    position: static; margin-top: 26px; padding: 6px 4px;
    box-shadow: 0 6px 18px rgba(9, 45, 139, .08);
  }
  .hero__stat { padding-inline: 16px; gap: 10px; }
  .hero__stat b { font-size: 23px; }
  .hero__stat span { font-size: 12.5px; }
  .hero__art { height: auto; justify-self: stretch; }
  .hero__art img { width: 100%; height: auto; }
}

@media (max-width: 620px) {
  /* Three stats side by side leaves each about 100px. They stack. */
  .hero__stats { flex-direction: column; align-items: stretch; margin-inline: 0; }
  .hero__stat { padding: 11px 14px; }
  .hero__stat + .hero__stat { border-left: 0; border-top: 1px solid #E4EDF9; }
  .hero__stat span { max-width: none; }
}

/* ======================================================================
   SECTIONS 2 TO 7
   Same principle as the hero: live Inter text, the designers' artwork
   cropped from their own frozen masters, and a phone layout that stacks
   rather than crops.
   ====================================================================== */

.sec { position: relative; overflow: hidden; }
.sec__grid {
  /* Full width with an 80px inset, so the copy starts 80px from the PAGE
     edge -- the same as the headings baked into sections 1 and 2. A centred
     1320px grid was adding 60px before the padding. */
  max-width: none; margin-inline: 0;
  display: grid; grid-template-columns: 690px minmax(0, 1fr);
  align-items: start; padding-inline: 83px 0;
}
.sec__copy { padding-block: 54px; }
.sec__art { justify-self: stretch; overflow: hidden; }
.sec__art img { width: 100%; height: 100%; object-fit: cover;
                object-position: left center; }

/* EVERY SECTION HEADING USES THE SECTION 3 HEADING STYLE -- Vijay's rule.
   Measured from Section 3's own baked heading by fitting Inter against it at
   1440: Inter 700, 55px, line-height 0.95, letter-spacing -0.03em, navy
   #05206C and blue #0262F9, text starting 84px from the page edge. (The
   earlier 53-54px / 1.06 settings were close but did not sit on the artwork.) */
.sec h2 {
  margin: 0; font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: 55px; line-height: .95; font-weight: 700;
  letter-spacing: -.03em; color: #05206C;
}
.sec h2 b { color: #0262F9; font-weight: 700; }
/* 24px: gives a 27px gap from heading ink to paragraph ink -- the same as
   Section 3's own heading and paragraph. */
.sec__lede { margin: 24px 0 0; max-width: 540px;
             font-size: 16px; line-height: 1.62; color: #001C6B; }

/* The four feature rows in Meet Vani. */
.feat { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.feat li { display: grid; grid-template-columns: 44px minmax(0, 1fr);
           gap: 4px 15px; align-items: center; }
.feat .fi { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 11px;
            background: #E8F0FF; display: grid; place-items: center; }
.feat b { align-self: end; font-size: 16px; font-weight: 700; color: #092D8B; }
.feat span { align-self: start; font-size: 14.5px; color: #3B4A73; }

/* SECTION 3 and the closing band use the master whole -- their composition
   is one piece rather than copy beside art. */
.sec--full { display: block; }
.sec--full img { width: 100%; height: auto; display: block; }

/* THE FIVE-STEP ROW in section 4. */
.steps { list-style: none; margin: 30px 0 0; padding: 0;
         display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.steps li { text-align: center; }
/* Masked to a circle rather than cropped again: three crops still left the
   master's own background showing at the corners. */
.steps .sd { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
             overflow: hidden; display: block; background: transparent; }
.steps .sd img { width: 100%; height: 100%; object-fit: cover; display: block; }
.steps b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .05em;
           color: #092D8B; margin-bottom: 4px; }
.steps span { font-size: 12.5px; line-height: 1.45; color: #3B4A73; }

/* Links: bold and not underlined, per the designers' build rule 10. */
.lnkb { display: inline-block; margin-top: 26px; font-size: 15.5px;
        font-weight: 700; color: #0A62FE; }

/* The three audience cards. */
.aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 16px; margin-top: 34px; }
.aud article { background: #fff; border: 1px solid #E2ECFA; border-radius: 14px;
               padding: 22px; }
.aud h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; color: #092D8B; }
.aud p  { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #3B4A73; }
.aud a  { font-size: 14px; font-weight: 700; color: #0A62FE; }

@media (max-width: 1180px) {
  .sec__grid { padding-inline: 48px 0; grid-template-columns: minmax(0,46%) minmax(0,1fr); }
  .sec h2 { font-size: 38px; }
}
@media (max-width: 1000px) {
  .sec__grid { grid-template-columns: minmax(0, 1fr); padding: 0 24px; gap: 26px; }
  .sec__copy { padding-block: 44px 0; }
  .sec h2 { font-size: clamp(27px, 4.6vw, 36px); }
  .sec__lede { max-width: none; font-size: 16px; }
  .sec__art { margin-inline: -24px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .aud { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps li { display: grid; grid-template-columns: 48px minmax(0,1fr);
              gap: 2px 14px; text-align: left; padding: 13px 0;
              align-items: center; }
  .steps li + li { border-top: 1px solid #E2ECFA; }
  .steps .sd { grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; }
  .steps b { align-self: end; margin-bottom: 0; }
  .steps span { align-self: start; }
}

/* SECTION 3 — measured from the new frozen master (1983x793 at 1.377x).
   Section 576px tall, background #E7F5FD, copy from x=84. */
.s3 { position: relative; height: 576px; overflow: hidden; background: #E7F5FD; }
.s3__copy { position: absolute; left: 80px; top: 40px; width: 500px; z-index: 2; }
.s3 h2 { margin: 0; font-size: 54px; line-height: 1.04; font-weight: 800;
         letter-spacing: -.018em; color: #0B2A6B; }
.s3 h2 b { color: #1268F5; font-weight: 800; }
.s3__lede { margin: 20px 0 0; font-size: 19px; line-height: 1.45; color: #22335F; }
.s3__feat { list-style: none; margin: 26px 0 0; padding: 0; display: grid;
            gap: 11px; }
.s3__feat li { display: grid; grid-template-columns: 50px minmax(0, 1fr);
               gap: 2px 15px; align-items: center; }
.s3__feat img { grid-row: 1 / 3; width: 50px; height: 50px; }
.s3__feat b { align-self: end; font-size: 16.5px; font-weight: 700; color: #0B2A6B; }
.s3__feat span { align-self: start; font-size: 15px; color: #31405F; }
/* The annotation sits TOP RIGHT in this master, not bottom left. */
/* The annotation is now erased from the devices crop, so it appears once. */
/* Positioned to sit EXACTLY over the copy baked into the devices image, so
   it reads as one annotation rather than two. */
.s3__ann { position: absolute; left: 1025px; top: 52px; width: 314px;
           height: auto; z-index: 2; }
/* 880px, not 985: at full width the laptops crowded the section and ran to
   the page edge. Positioned to match the master's own placement. */
.s3__devices { position: absolute; left: 520px; top: 28px; width: 880px; }
.s3__devices img { width: 100%; height: auto; }

@media (max-width: 1180px) {
  .s3 { height: auto; padding-bottom: 24px; }
  .s3__copy, .s3__ann, .s3__devices { position: static; }
  .s3__copy { width: auto; padding: 40px 24px 0; }
  .s3__ann { display: block; margin: 20px auto 0; width: 260px; }
  .s3__devices { width: 100%; margin-top: 8px; }
  .s3 h2 { font-size: clamp(30px, 5vw, 44px); }
  .s3__lede { font-size: 16.5px; }
  .s3__lede br { display: none; }
}

/* SECTION 5. */
/* Less space above, and the heading aligned with the insight cards to its
   right rather than sitting below them. */
.s5__grid { align-items: start; padding-block: 30px 0;
            /* 616px: "Recruitment intelligence" at the Section 3 heading size
               is 614px wide, so the heading sets in three lines rather than
               four. The insight artwork gives up 60px to make the room. */
            grid-template-columns: minmax(0, 616px) minmax(0, 1fr); column-gap: 24px; }
.s5__insights { justify-self: end; padding-top: 0; }
.s5__insights img { width: 100%; max-width: 720px; height: auto; }

/* The three audience cards: full width, tinted, icon beside the copy. */
.s5__aud {
  max-width: none; margin-inline: 0; padding: 26px 83px 54px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.s5__aud article {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px;
  align-items: center; border-radius: 14px; padding: 18px 20px;
  border: 1px solid #E2ECFA; background: #fff;
}
.s5__aud .aud--blue  { background: #F3F8FF; border-color: #DCEAFF; }
.s5__aud .aud--green { background: #F2FBF6; border-color: #D6EFE1; }
.s5__aud .aud--amber { background: #FFFaf0; border-color: #F6E7C8; }
/* Circular, as the master draws them, and with the icon centred inside so
   none is cut at its left edge. */
.s5__aud img { width: 56px; height: 56px; border-radius: 50%;
               object-fit: cover; object-position: center; background: #fff; }
.s5__aud h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; color: #092D8B; }
.s5__aud p  { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; color: #3B4A73; }
.s5__aud a  { font-size: 13.5px; font-weight: 700; color: #0A62FE; }

@media (max-width: 1000px) {
  .s3__grid, .s5__grid { grid-template-columns: minmax(0, 1fr); }
  .s3__devices, .s5__insights { justify-self: stretch; }
  .s5__aud { grid-template-columns: minmax(0, 1fr); padding: 20px 24px 40px; }
}

/* THE FOOTER, continuing the navy of the band above.
   The approved CampusVoice lockup replaces the one baked into the master, and
   "Worc Consultancy Pvt Ltd" is set larger than "Powered by". */
.ftr { background: #143A72; color: #D6E2F5;
       font-family: Inter, 'Segoe UI', Arial, sans-serif; }
/* Full width with the same 83px inset as every section, so the footer lines
   up with the page at all widths (it was centred in a 1320px box). */
.ftr__in { max-width: none; margin-inline: 0; padding: 34px 83px 20px;
           display: flex; align-items: center; justify-content: space-between;
           gap: 40px; flex-wrap: wrap; }
.ftr__brand img { width: 248px; height: auto; filter: brightness(0) invert(1); }
.ftr__social { text-align: right; }
.ftr__social > p { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #fff; }
.ftr__icons { display: flex; gap: 12px; justify-content: flex-end; }
.ftr__icons span { width: 42px; height: 42px; border-radius: 9px;
                   display: grid; place-items: center; }
.ftr__icons .ic-li { background: #0A66C2; }
.ftr__icons .ic-yt { background: #FF0000; }
.ftr__icons .ic-ig { background: linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7); }
.ftr__icons svg { width: 21px; height: 21px; }

.ftr__base { max-width: none; margin-inline: 0; padding: 8px 83px 34px;
             display: flex; justify-content: space-between; gap: 16px;
             flex-wrap: wrap; align-items: baseline; }
/* "Powered by" is the quieter half; the company name carries the weight. */
.ftr__powered { margin: 0; color: #D6E2F5; }
.ftr__powered span { font-size: 14px; font-weight: 400; color: #A8BEDD; }
.ftr__powered b { font-size: 18px; font-weight: 700; color: #fff;
                  margin-left: 5px; }
.ftr__rights { margin: 0; font-size: 14.5px; color: #C2D2EC; }

@media (max-width: 900px) {
  .ftr__in { flex-direction: column; align-items: flex-start; gap: 24px;
             padding: 28px 24px 16px; }
  .ftr__social { text-align: left; }
  .ftr__icons { justify-content: flex-start; }
  .ftr__base { padding: 6px 24px 28px; flex-direction: column; gap: 8px; }
}

/* Copy composited into artwork still has to reach search engines and screen
   readers. This keeps it in the document without showing it.
   (Lost once when the footer block was rewritten -- the hidden text then
   printed itself on the page.) */
.a11y { position: absolute !important; width: 1px; height: 1px; margin: -1px;
        padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
        border: 0; }

/* THE HERO is now the approved master, used whole. */
.hero-img img { width: 100%; height: auto; display: block; }

/* "See how it brings real-world perspective" is a HEADING for the three cards
   beneath it, not a link -- no arrow, no link colour, and the gap to the cards
   closes so the two read as one block. */
.s5__head {
  margin: 26px 0 0; font-size: 19px; font-weight: 700;
  color: #0B2A6B; letter-spacing: -.01em;
}
.s5__grid { padding-block: 48px 0; }
.s5 .s5__aud { padding-top: 30px; }

/* ---- SPACING CORRECTIONS ----------------------------------------------

   The heading and its three cards read as one block, so the gap between them
   closes to almost nothing. */
.s5__head { margin-bottom: 0; }
/* The heading and its cards are one block: the copy column's own bottom
   padding was putting 54px between them. */
/* A clear line of space between the heading and the three cards. */
.s5 .s5__aud { padding-top: 30px; }
/* The heading aligns with the insight cards to its right: the copy column's
   own top padding was pushing it 54px below them. */
.s5 .sec__copy { padding-top: 0; padding-bottom: 0; }

/* The hero master carries its own pale margin at the bottom, which was adding
   to the space before "Meet Vani". The section pulls up to absorb it. */
/* The 151px of empty space below the stat card is now cropped OUT of the
   image rather than pulled up with a negative margin, so the section ends
   where its content ends. No margin needed. */
.hero-img { margin-bottom: 0; }
.hero-img img { margin-bottom: 0; }

/* THE CLOSING BAND. The artwork sits behind; the copy is live so the headline
   can change without reissuing the master. */
.s7 { position: relative; overflow: hidden; }
.s7__bg { width: 100%; height: auto; display: block; }
.s7__copy { position: absolute; left: 83px; top: 0; bottom: 0;
            display: flex; flex-direction: column; justify-content: center;
            max-width: 520px; }
.s7 h2 { margin: 0; font-size: 34px; line-height: 1.16; font-weight: 700;
         letter-spacing: -.018em; color: #fff; }
.s7 p  { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: #CFE0F5; }
.s7__cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
           align-self: flex-start; background: #fff; color: #0A62FE;
           font-size: 16px; font-weight: 700; padding: 14px 28px;
           border-radius: 999px; }
.s7__cta:hover { background: #EAF2FF; }

@media (max-width: 1000px) {
  .s7 { background: #012E60; }
  .s7__bg { opacity: .40; }
  .s7__copy { position: absolute; left: 24px; right: 24px; max-width: none; }
  .s7 h2 { font-size: clamp(21px, 4.4vw, 30px); }
  .s7 h2 br { display: none; }
  .s7 p { font-size: 15px; }
}
@media (max-width: 620px) {
  .s7__bg { height: 300px; object-fit: cover; }
  .s7__copy { padding-block: 26px; }
}


/* ---- LIVE HEADINGS OVER THE SECTION 1 AND 2 ARTWORK --------------------
   The artwork scales with the page, so the heading scales with it: every
   size and position is a fraction of the section's width (cqw), equal to
   the Section 3 style exactly at 1440. Positions were measured on the
   designers' headline-free files so the gap to the paragraph below is 27px,
   the same as in Section 3. */
.art-sec { position: relative; container-type: inline-size; }
.sec .art-h {
  position: absolute; margin: 0; white-space: nowrap;
  font-family: Inter, 'Segoe UI', Arial, sans-serif; font-weight: 700;
  font-size: calc(55 / 1440 * 100cqw); line-height: .95;
  letter-spacing: -.03em; color: #05206C;
}
.sec .art-h b { color: #0262F9; font-weight: 700; }
.sec .art-h--s1 { left: calc(83.4 / 1440 * 100cqw); top: calc(98.8 / 1440 * 100cqw); }
.sec .art-h--s2 { left: calc(84 / 1440 * 100cqw);   top: calc(43 / 1440 * 100cqw); }

/* Section 5's heading ends in "relevant.", which has no descending letters,
   so the same margin would leave 37px of visible space. 14px brings the
   visible gap to 27px, the same as every other section. */
.s5 .sec__lede { margin-top: 14px; }


/* Footer inset follows the sections at the smaller widths too. */
@media (max-width: 1180px) {
  .ftr__in { padding-inline: 48px; }
  .ftr__base { padding-inline: 48px; }
}
@media (max-width: 1000px) {
  .ftr__in { padding-inline: 24px; }
  .ftr__base { padding-inline: 24px; }
}

/* ---- SECTIONS 1-3 ON PHONES AND SMALL TABLETS (1000px and below) --------
   Approved mockup: heading, paragraph, the photograph alone, then the
   details, all as real text. The .mob block that is visually hidden on
   laptops is shown here, and display:contents lets its children be ordered
   around the heading and the photograph. */
@media (max-width: 1000px) {
  .art-sec { display: flex; flex-direction: column; padding: 36px 24px 34px;
             container-type: normal; }
  .art-sec--s1 { background: #E8F5FD; }
  .art-sec--s2 { background: #F1F9FE; }
  .art-sec--s3 { background: #E8F5FE; }

  .art-sec .mob { display: contents; position: static !important; width: auto;
                  height: auto; margin: 0; overflow: visible; clip: auto;
                  white-space: normal; }

  .mob-eb   { order: 1; }
  .art-h, .mob-h { order: 2; }
  .mob-lede { order: 3; }
  .art-pic  { order: 4; }
  .mob-card, .mob-list { order: 5; }

  /* The headings: the Section 3 heading style at the phone size sections 4
     and 5 already use. */
  .sec .art-h, .sec .mob-h {
    position: static; white-space: normal; margin: 0;
    font-family: Inter, 'Segoe UI', Arial, sans-serif; font-weight: 700;
    font-size: clamp(27px, 4.6vw, 36px); line-height: .95;
    letter-spacing: -.03em; color: #05206C;
  }
  .sec .art-h b, .sec .mob-h b { color: #0262F9; font-weight: 700; }

  .mob-eb { margin: 0 0 14px; font-size: 13px; font-weight: 700;
            letter-spacing: .01em; color: #085CFB; text-transform: uppercase; }
  .mob-lede { margin: 16px 0 0; font-size: 16px; line-height: 1.55; color: #13249A; }
  .art-sec--s3 .mob-lede { color: #22335F; }

  /* The photograph runs the full width of the screen. */
  .art-pic { display: block; margin: 24px -24px 0; }
  .sec--full .art-pic img { width: 100%; height: auto; }

  .mob-card { margin: 20px 0 0; padding: 6px 18px; list-style: none;
              background: #fff; border-radius: 16px;
              box-shadow: 0 10px 30px rgba(10, 60, 140, .10); }
  .mob-card li { display: grid; grid-template-columns: 44px minmax(0, 1fr);
                 gap: 14px; align-items: center; padding: 14px 0; }
  .mob-card li + li { border-top: 1px solid #E2ECFA; }
  .mob-feat li { grid-template-columns: 52px minmax(0, 1fr); padding: 13px 0; }
  .art-sec .mob img { width: 44px; height: auto; }
  .art-sec .mob-feat img { width: 52px; border-radius: 12px; }
  .mob-card p, .mob-list p { margin: 0; }
  .mob-card b, .mob-list b { display: block; }
  .mob-stats b { font-size: 24px; font-weight: 700; line-height: 1.1; color: #0A62FE; }
  .mob-stats span { font-size: 15px; color: #13249A; }
  .mob-feat b { font-size: 16px; font-weight: 700; color: #0B2A8B; }
  .mob-feat span { font-size: 14.5px; color: #31405F; }

  .mob-list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
  .mob-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr);
                 gap: 14px; align-items: center; }
  .art-sec .mob-list img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
  .mob-list b { font-size: 16px; font-weight: 700; color: #0B2A6B; }
  .mob-list span { font-size: 14.5px; color: #31405F; }
}