/* CampusVoice — inner pages. Layout follows each page's approved design
   (1024px wide), scaled to the 1440 laptop view (x1.406). Headings use the
   Section 3 heading style from Home: Inter 700, tight spacing, navy #05206C
   and blue #0262F9. Text starts 83px from the page edge, as on Home. */

.pg { background: #fff; }
.pg img { display: block; max-width: 100%; height: auto; }

.pg-eyebrow { margin: 0 0 14px; font: 700 14px/1 Inter, 'Segoe UI', Arial, sans-serif;
  letter-spacing: .02em; text-transform: uppercase; color: #085CFB; }
.pg-h1, .pg-h2 { margin: 0; font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-weight: 700; letter-spacing: -.03em; line-height: .95; color: #05206C; }
.pg-h1 { font-size: 55px; }
.pg-h1 b { color: #0262F9; font-weight: 700; }
/* 36px: the section-heading size measured from the approved design at 1440. */
.pg-h2 { font-size: 36px; line-height: 1.02; color: #0262F9; }
.pg-h2--navy { color: #05206C; }
.pg-lede { margin: 24px 0 0; max-width: 520px; font-size: 17px; line-height: 1.55; color: #13249A; }
.pg-sub  { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: #13249A; }
.pg-body { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: #1B2B5E; }
/* An opening line in bold, so the section's promise lands first. */
.pg-body strong { font-weight: 700; color: #0B2A6B; }
.pg-link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 16px;
  color: #0A3FB8; text-decoration: none; }
.pg-link:hover, .pg-link:focus-visible { text-decoration: underline; }
.pg-btn { display: inline-block; margin-top: 22px; padding: 15px 30px; border-radius: 8px;
  background: #0A62FE; color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
.pg-btn:hover, .pg-btn:focus-visible { background: #0550D6; }

/* HERO: the designers' full-width photograph (2103 x 748, left 40% left
   calm for text), with the heading and paragraph as live text on the left.
   The section keeps the photograph's shape at every laptop width. */
.pg-hero { position: relative; aspect-ratio: 2103 / 748; overflow: hidden; background: #EDF7FE;
  display: flex; align-items: center; padding: 0 0 40px; container-type: inline-size; }
.pg .pg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: right center; }
/* The photograph scales with the screen, so the copy scales with it (as the
   Home artwork headings do): exact design sizes at 1440, and the text always
   stays inside the photograph's calm left side. The paragraph never drops
   below 15px. */
.pg-hero__copy { position: relative; z-index: 2; margin-left: calc(83 / 1440 * 100cqw);
  width: calc(560 / 1440 * 100cqw); }
.pg-hero .pg-eyebrow { font-size: calc(14 / 1440 * 100cqw); }
.pg-hero .pg-h1 { font-size: calc(55 / 1440 * 100cqw); white-space: nowrap; }
.pg-hero .pg-lede { max-width: none; font-size: calc(17 / 1440 * 100cqw);
  margin-top: calc(22 / 1440 * 100cqw); }

/* The five-item strip overlapping the bottom of the hero */
/* The strip lines up with the cards below it: both start and end 83px from
   the page edge. */
.pg-strip { position: relative; z-index: 3; margin: -44px 83px 0; padding: 18px 26px;
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-radius: 14px; box-shadow: 0 12px 34px rgba(10, 60, 140, .12); }
.pg-strip li { display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  font-weight: 700; font-size: 18px; line-height: 1.2; color: #0B2A8B; }
.pg-strip li + li { border-left: 1px solid #E2ECFA; }
.pg-strip img { width: 52px; height: auto; flex: none; }

/* Sections */
.pg-sec { padding: 56px 83px; }
/* The section under the hero starts close to the five-item strip. */
.pg-sec:has(.pg-cards--6) { padding-top: 30px; padding-bottom: 34px; }
.pg-cards { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pg-cards--6 { grid-template-columns: repeat(6, 1fr); }
.pg-cards li { padding: 22px 16px 24px; text-align: center; background: #FBFCFE;
  border: 1px solid #E4EDF8; border-radius: 14px; }
.pg-cards img { width: 56px; height: 50px; object-fit: contain; margin: 0 auto 12px; }
.pg-cards h3 { margin: 0; min-height: 2.3em; font-size: 19px; line-height: 1.15; font-weight: 700; color: #0A3FB8; }
/* On For Colleges the six titles are short enough for one line each, so no
   second line is reserved. */
/* Space for two lines is always reserved, so the paragraphs line up whether
   a title wraps or not -- on a narrow laptop window the cards are narrower and
   most titles take two lines. */
.pg-cards--colleges h3 { min-height: 2.3em; font-size: 18px; }
.pg-cards--colleges p { margin-top: 10px; }
.pg-cards p { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: #22335F; }

/* Progress in action: the picture fills the section and the copy sits on its
   calm left side, scaling with it exactly as the hero does. */
.pg-progress { position: relative; aspect-ratio: 2029 / 672; overflow: hidden;
  background: #E7F7FE; container-type: inline-size; display: flex; align-items: center; }
.pg .pg-progress__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: right center; }
/* The text block is centred in the band, so the blue above and below it
   matches. */
.pg-progress__copy { position: relative; z-index: 2; margin-left: calc(83 / 1440 * 100cqw);
  width: calc(330 / 1440 * 100cqw); }
.pg-progress .pg-h2 { font-size: calc(36 / 1440 * 100cqw); }
.pg-progress .pg-body { font-size: calc(16 / 1440 * 100cqw);
  margin-top: calc(14 / 1440 * 100cqw); }
/* The designers' handwritten note, lifted out of the picture so it sits
   directly under the paragraph instead of far out on the left. */
.pg-progress .pg-note { display: block; width: calc(250 / 1440 * 100cqw);
  margin: calc(18 / 1440 * 100cqw) auto 0; }

/* Built for your success */
.pg-built { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 40px; align-items: center;
  background: #F7FBFE; padding-top: 32px; }
.pg-flow { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pg-flow li { position: relative; padding: 16px 10px 18px; text-align: center; border-radius: 12px; }
.pg-flow li + li::before { content: "\2192"; position: absolute; left: -22px; top: 44%;
  color: #0A62FE; font-weight: 700; font-size: 18px; }
.pg-flow .t1 { background: #E8F4FE; } .pg-flow .t2 { background: #EEEDFE; }
.pg-flow .t3 { background: #E9F7F3; } .pg-flow .t4 { background: #FAF1F6; }
.pg-flow img { width: 44px; height: 36px; object-fit: contain; margin: 0 auto 8px; }
.pg-flow b { display: block; font-size: 17px; line-height: 1.15; color: #0A3FB8; }
.pg-flow span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: #31405F; }

/* Testimonials: tighter than the standard section, so the heading sits close
   to the section above it and to the quotes below it, as in the design. */
.pg-say { background: #FAFCFE; padding-top: 24px; padding-bottom: 36px; }
.pg-built { padding-bottom: 28px; }
.pg-quotes { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pg-quotes figure { margin: 0; display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: center;
  padding: 24px 28px; background: #fff; border: 1px solid #E4EDF8; border-radius: 14px; }
.pg-quotes img { width: 112px; border-radius: 50%; }
.pg-quotes blockquote { margin: 0; font-size: 16.5px; line-height: 1.5; color: #13249A; }
/* Quote marks as on the Home page: one before the first word and one after
   the last, on the same lines as the text. */
/* Georgia's comma-shaped marks match the Home artwork; the stroke thickens
   them to the same weight. */
.pg-quotes blockquote::before { content: "\201C"; font: 700 40px/0 Georgia, 'Times New Roman', serif;
  color: #0A62FE; -webkit-text-stroke: 1.6px #0A62FE; vertical-align: -.3em; margin-right: 5px; }
.pg-quotes blockquote::after { content: "\201D"; font: 700 40px/0 Georgia, 'Times New Roman', serif;
  color: #0A62FE; -webkit-text-stroke: 1.6px #0A62FE; vertical-align: -.3em; margin-left: 5px; }
.pg-quotes figcaption { grid-column: 2; font-weight: 700; font-size: 15.5px; color: #0B2A6B; }

/* Closing band: copy on the left, the photograph fading in on the right */
.pg-close { position: relative; min-height: 219px; overflow: hidden; background: #EAF3FB;
  padding: 28px 0 28px 83px; }
.pg-close__copy { position: relative; z-index: 2; max-width: 390px; }
.pg-close__copy .pg-body { margin-top: 10px; font-size: 16px; }
.pg-close__copy .pg-btn { margin-top: 14px; padding: 13px 28px; }
.pg .pg-close__photo { position: absolute; right: 0; top: 0; width: auto; max-width: none; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32%);
          mask-image: linear-gradient(to right, transparent 0, #000 32%); }

/* Narrower laptops */
@media (max-width: 1180px) {
  .pg-close { padding-left: 48px; }
  .pg-sec { padding-left: 48px; padding-right: 48px; }
  .pg-strip { margin-inline: 48px; }
  .pg-strip li { font-size: 16px; padding: 6px 8px; gap: 10px; }
}

/* Phones and small tablets: heading, text, picture, details -- as on Home */
@media (max-width: 1000px) {
  .pg-cards--6 { grid-template-columns: repeat(3, 1fr); }
  .pg-built { grid-template-columns: 1fr; }
  .pg-hero { aspect-ratio: auto; padding: 36px 24px 0; display: flex; flex-direction: column;
    align-items: stretch; container-type: normal; }
  .pg-hero__copy { margin-left: 0; width: auto; }
  .pg-hero .pg-eyebrow { font-size: 13px; }
  .pg-hero .pg-h1 { font-size: clamp(30px, 6.4vw, 44px); white-space: normal; }
  .pg-hero .pg-lede { font-size: 16px; margin-top: 18px; }
  /* On phones only the right-hand part of the photograph is shown: the girl
     and the handwritten note. The empty left side is not needed. */
  .pg .pg-hero__bg { position: static; order: 2; width: calc(100% + 48px); max-width: none;
    height: auto; aspect-ratio: 1262 / 748; margin: 24px -24px 0; object-position: right center; }
  .pg-h1 { font-size: clamp(30px, 6.4vw, 44px); }
  .pg-h2 { font-size: clamp(26px, 5.2vw, 34px); }
  .pg-lede, .pg-body, .pg-sub { font-size: 16px; }
  .pg-strip { margin: -24px 16px 0; padding: 8px 12px; grid-template-columns: 1fr 1fr; }
  .pg-strip li { font-size: 15.5px; padding: 12px 6px; }
  .pg-strip li + li { border-left: 0; }
  .pg-strip li:nth-child(n+3) { border-top: 1px solid #E2ECFA; }
  .pg-sec { padding: 40px 24px; }
  .pg-cards--6 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pg-cards h3 { font-size: 17px; }
  .pg-cards p { font-size: 14px; }
  .pg-progress { aspect-ratio: auto; display: flex; flex-direction: column;
    padding: 40px 24px 28px; container-type: normal; }
  .pg-progress__copy { margin-left: 0; padding-top: 0; width: auto; }
  .pg-progress .pg-h2 { font-size: clamp(26px, 5.2vw, 34px); }
  .pg-progress .pg-body { font-size: 16px; margin-top: 14px; }
  /* The handwritten note is left off phones -- Vijay's decision. */
  .pg-progress .pg-note { display: none; }
  /* Only the devices are shown on a phone; the empty left side is dropped. */
  .pg .pg-progress__bg { position: static; order: 2; width: calc(100% + 48px); max-width: none;
    height: auto; aspect-ratio: 1459 / 672; margin: 20px -24px 0; object-position: right center; }
  .pg-flow { grid-template-columns: 1fr 1fr; gap: 18px 28px; }
  .pg-flow li:nth-child(3)::before { display: none; }
  .pg-quotes { grid-template-columns: 1fr; }
  .pg-quotes figure { grid-template-columns: 72px 1fr; padding: 18px; gap: 16px; }
  .pg-quotes img { width: 72px; }
  .pg-close { padding: 36px 24px 0; min-height: 0; display: flex; flex-direction: column; }
  .pg .pg-close__photo { position: static; width: calc(100% + 48px); max-width: none; height: auto;
    margin: 24px -24px 0; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 560px) {
  .pg-strip { grid-template-columns: 1fr; }
  .pg-strip li:nth-child(n+2) { border-top: 1px solid #E2ECFA; }
  .pg-flow li::before { display: none; }
}

/* ---- FOR COLLEGES ------------------------------------------------------ */
/* The designers' full-width photograph (2125 x 740), with its left 30% left
   calm for the heading, paragraph and button, which scale with it. */
.pg-hero--col { background: #EEF8FE; aspect-ratio: 2125 / 740; min-height: 0;
  padding: 0 0 46px; display: flex; align-items: center; container-type: inline-size; }
.pg .pg-hero--col .pg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; object-position: right center; }
.pg-hero--col .pg-hero__copy { position: relative; z-index: 2;
  margin-left: calc(83 / 1440 * 100cqw); width: calc(455 / 1440 * 100cqw); max-width: none; }
/* A soft wash of the band colour over the left of the photograph, so the copy
   always sits on calm ground whatever the screen width. */
.pg-hero--col::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, #EEF8FE 0, #EEF8FE 26%, rgba(238,248,254,.85) 36%, rgba(238,248,254,0) 52%); }
.pg-hero--col .pg-eyebrow { font-size: calc(14 / 1440 * 100cqw); }
.pg-h1--col { font-size: calc(42 / 1440 * 100cqw); white-space: nowrap; }
.pg-hero--col .pg-lede { max-width: none; font-size: calc(16.5 / 1440 * 100cqw);
  margin-top: calc(18 / 1440 * 100cqw); }
.pg-hero--col .pg-btn { margin-top: calc(18 / 1440 * 100cqw);
  font-size: calc(16 / 1440 * 100cqw);
  padding: calc(13 / 1440 * 100cqw) calc(26 / 1440 * 100cqw); }
.pg-strip--4 { grid-template-columns: repeat(4, 1fr); }

/* The insights band: the designers' full-size picture (1983 x 793), with its
   calm left third free for the heading, paragraph and handwritten note. */
.pg-progress--col { position: relative; aspect-ratio: 1983 / 690; overflow: hidden;
  display: flex; align-items: flex-start; background: #F2FBFE;
  padding: calc(40 / 1440 * 100cqw) 0 0; container-type: inline-size; }
.pg .pg-progress--col .pg-progress__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; object-position: right center; }
.pg-progress--col .pg-progress__copy { position: relative; z-index: 2;
  margin-left: calc(83 / 1440 * 100cqw); width: calc(400 / 1440 * 100cqw); }
.pg-progress--col .pg-h2 { font-size: calc(36 / 1440 * 100cqw); }
.pg-progress--col .pg-body { font-size: calc(16 / 1440 * 100cqw);
  margin-top: calc(14 / 1440 * 100cqw); }
.pg-progress--col .pg-note { display: block; width: calc(285 / 1440 * 100cqw);
  margin: calc(14 / 1440 * 100cqw) auto 0; }

/* The two routes on from this page */
/* The two route cards sit close to the section above and below them. */
.pg-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; background: #FBFCFE;
  padding-top: 22px; padding-bottom: 20px; }
/* On this page the section above the route cards ends close to them, and the
   quotes heading follows closely too. */
.pg-built:has(+ .pg-promos) { padding-bottom: 16px; }
.pg-promos + .pg-say { padding-top: 16px; }
.pg-promo { display: grid; grid-template-columns: 176px 1fr; gap: 22px; align-items: center;
  padding: 18px 22px; background: #fff; border: 1px solid #E4EDF8; border-radius: 14px; }
/* Both pictures fill the same box, so neither looks larger than the other:
   the photograph fills it, the illustration sits inside it. */
.pg-promo img { width: 176px; height: 150px; border-radius: 10px; }
.pg-promo--photo img { object-fit: cover; }
.pg-promo--art img { object-fit: contain; background: #EAF4FD; }
.pg-promo h3 { margin: 0; font-size: 21px; font-weight: 700; color: #0A3FB8; letter-spacing: -.01em; }
.pg-promo p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: #22335F; }
.pg-btn--ghost { margin-top: 14px; padding: 11px 20px; background: #fff; color: #0A62FE;
  border: 1.5px solid #0A62FE; font-size: 15.5px; }
.pg-btn--ghost:hover, .pg-btn--ghost:focus-visible { background: #EAF2FF; }

/* Dark closing band */
.pg-close--dark { background: #00295B; }
.pg-close--dark .pg-close__copy { max-width: 470px; }
.pg-h2--white { color: #fff; }
.pg-close--dark .pg-body { color: #D8E6F8; }
.pg-btn--white { background: #fff; color: #0A62FE; }
.pg-btn--white:hover, .pg-btn--white:focus-visible { background: #E7F0FF; }
.pg .pg-close--dark .pg-close__photo {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%);
          mask-image: linear-gradient(to right, transparent 0, #000 34%); }

@media (max-width: 1000px) {
  /* Below this width the photograph's calm side is too small for the copy at
     its designed size, so the band keeps a fixed height and the picture is
     cropped rather than shrunk. */
  .pg-hero--col { aspect-ratio: auto; min-height: 430px; padding: 34px 0 62px 48px;
    container-type: normal; }
  .pg-hero--col::before { background: linear-gradient(to right, #EEF8FE 0, #EEF8FE 38%,
    rgba(238, 248, 254, .88) 50%, rgba(238, 248, 254, 0) 66%); }
  .pg-hero--col .pg-hero__copy { margin-left: 0; width: auto; max-width: 400px; }
  .pg-h1--col { font-size: 35px; white-space: normal; }
  .pg-hero--col .pg-lede { font-size: 16px; margin-top: 16px; }
  .pg-hero--col .pg-btn { font-size: 16px; padding: 13px 24px; margin-top: 16px; }
  .pg-promos { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .pg-hero--col::before { display: none; }
  .pg-hero--col { aspect-ratio: auto; min-height: 0; padding: 36px 24px 0; display: flex;
    flex-direction: column; align-items: stretch; container-type: normal; }
  .pg-hero--col .pg-hero__copy { margin-left: 0; width: auto; max-width: none; order: 1; }
  .pg-hero--col .pg-eyebrow { font-size: 13px; }
  .pg-hero--col .pg-lede { font-size: 16px; margin-top: 16px; }
  .pg-hero--col .pg-btn { font-size: 16px; padding: 14px 26px; margin-top: 18px; }
  .pg .pg-hero--col .pg-hero__bg { position: static; order: 2; width: calc(100% + 48px);
    max-width: none; height: auto; aspect-ratio: 1490 / 740; margin: 24px -24px 0;
    object-position: right center; }
  .pg-h1--col { font-size: clamp(28px, 6.1vw, 42px); white-space: normal; }
  .pg-strip--4 { grid-template-columns: 1fr 1fr; }
  .pg-progress--col { aspect-ratio: auto; flex-direction: column; align-items: stretch;
    padding: 40px 24px 28px; container-type: normal; }
  .pg-progress--col .pg-progress__copy { margin-left: 0; width: auto; }
  .pg-progress--col .pg-h2 { font-size: clamp(26px, 5.2vw, 34px); }
  .pg-progress--col .pg-body { font-size: 16px; margin-top: 14px; }
  /* On phones the whole picture is shown, handwriting included, rather than
     cropping to the devices. */
  /* On phones the whole picture is shown, handwriting included; only the
     empty strip on its left is trimmed, so the devices sit centred. */
  .pg .pg-progress--col .pg-progress__bg { position: static; order: 2; width: calc(100% + 48px);
    max-width: none; height: auto; aspect-ratio: 1778 / 690; margin: 20px -24px 0;
    object-fit: cover; object-position: right center; }
  .pg-promo { grid-template-columns: 1fr; gap: 14px; }
  .pg-promo img { width: 150px; height: 120px; }
}

/* ---- HOW IT WORKS ------------------------------------------------------ */
/* The designers' full-width photograph (2128 x 739), left 40% left calm for
   the copy, which scales with it exactly as on the other pages. */
.pg-hero--how { background: #F1F9FE; aspect-ratio: 2128 / 739; min-height: 0; padding: 0 0 20px;
  display: flex; align-items: center; container-type: inline-size; }
.pg .pg-hero--how .pg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; object-position: right center; }
.pg-hero--how .pg-hero__copy { position: relative; z-index: 2; margin-left: calc(83 / 1440 * 100cqw);
  width: calc(500 / 1440 * 100cqw); max-width: none; }
.pg-hero--how .pg-eyebrow { font-size: calc(14 / 1440 * 100cqw); }
.pg-hero--how .pg-h1 { font-size: calc(55 / 1440 * 100cqw); white-space: nowrap; }
.pg-hero--how .pg-lede { max-width: none; font-size: calc(17 / 1440 * 100cqw);
  margin-top: calc(20 / 1440 * 100cqw); }
.pg-hero--how .how-ctas { margin-top: calc(22 / 1440 * 100cqw); }
.pg-hero--how .how-ctas .pg-btn { font-size: calc(16 / 1440 * 100cqw);
  padding: calc(13 / 1440 * 100cqw) calc(24 / 1440 * 100cqw); }
.how-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.how-ctas .pg-btn { margin-top: 0; }

/* The same pale blue as the designers' picture, so the phones sit on it with
   no visible edge. */
@media (max-width: 1000px) {
  .pg-hero--how { aspect-ratio: auto; padding: 36px 24px 0; flex-direction: column;
    align-items: stretch; container-type: normal; }
  .pg-hero--how .pg-hero__copy { margin-left: 0; width: auto; order: 1; }
  .pg-hero--how .pg-eyebrow { font-size: 13px; }
  .pg-hero--how .pg-h1 { font-size: clamp(30px, 6.4vw, 44px); white-space: normal; }
  .pg-hero--how .pg-lede { font-size: 16px; margin-top: 16px; }
  .pg-hero--how .how-ctas { margin-top: 18px; }
  .pg-hero--how .how-ctas .pg-btn { font-size: 15.5px; padding: 13px 22px; }
  .pg .pg-hero--how .pg-hero__bg { position: static; order: 2; width: calc(100% + 48px); max-width: none;
    height: auto; aspect-ratio: 1300 / 739; margin: 24px -24px 0; object-position: right center; }
}




/* ---- HOW IT WORKS, sections 2-4: the designers' pictures used as supplied - */
.how-journey { background: #E9F6FE; padding-top: 40px; padding-bottom: 36px; }
/* The phones picture has wide empty margins either side; the frame shows the
   band with the phones, at the size they appear in the design. The file itself
   is untouched. */
.how-phones { position: relative; overflow: hidden; aspect-ratio: 1760 / 492; margin-top: 12px; }
.how-phones img { position: absolute; width: 163.64%; max-width: none; height: auto;
  left: -31.82%; top: -24.39%; }
/* Titles above and descriptions below, one column centred on each phone. */
.how-row { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
  margin-left: 2.5%; width: 94.9%; }
/* wider gaps between the titles, room for the arrows; the width and start are
   adjusted so each title stays centred on its phone */
.how-row--heads { margin-top: 26px; column-gap: 34px; width: calc(94.9% - 24px); margin-left: calc(2.5% + 16px); }
.how-row--heads li { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; }
.how-row--heads li:not(:last-child)::after { content: "\2192"; position: absolute; left: calc(100% + 5px); top: 50%;
  transform: translate(-50%, -50%); color: #3D7BF2; font-size: 24px; font-weight: 700; line-height: 1; }
.how-row--heads h3 { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 700; color: #0A3FB8; }
.how-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 16px; }
.how-row--heads .st1 .how-num { background: #1F6FEB; } .how-row--heads .st2 .how-num { background: #8B3DFF; }
.how-row--heads .st3 .how-num { background: #16A34A; } .how-row--heads .st4 .how-num { background: #F59E0B; }
.how-row--heads .st5 .how-num { background: #EF4461; } .how-row--heads .st6 .how-num { background: #8B3DFF; }
.how-row--descs { margin-top: 12px; }
.how-row--descs li { text-align: center; font-size: 14.5px; line-height: 1.45; color: #22335F; }
.how-mob { display: none; }

.how-together { background: #E9F6FE; padding-top: 10px; padding-bottom: 24px; }
/* The heading sits inside the picture's own panel: the band above the picture
   continues the panel's colours, and the picture is framed to its panel, so
   heading and picture read as one. The file itself is untouched. */
.how-panel { background: linear-gradient(to right, #F2F9FE 0%, #F1F8FE 10%, #EFF7FE 20%, #EDF7FE 30%, #ECF6FE 40%, #E9F5FE 50%, #E2F2FE 60%, #C1E3FD 70%, #DAEFFD 80%, #E0F2FE 90%, #DEF1FE 100%); }
.how-panel__head { padding: 20px 3.2% 8px; }
.how-panel__pic { position: relative; overflow: hidden; aspect-ratio: 2710 / 858; }
.how-panel__pic img { position: absolute; width: 106.27%; max-width: none; height: auto; left: -3.1%; top: -4.55%; }

/* The left side is kept narrower so the laptop picture, which is wide and
   short, can grow to the left side's height; it runs to the page's right edge. */
.how-impact { display: grid; grid-template-columns: 40% 1fr; gap: 28px; align-items: center;
  background: #E8F7FE; padding-top: 18px; padding-bottom: 18px; }
/* framed to the note and the four cards, so they sit close under the paragraph;
   the file itself is untouched */
.how-cards { position: relative; overflow: hidden; aspect-ratio: 2000 / 450; margin-top: 14px; }
.how-cards img { position: absolute; width: 108.6%; max-width: none; height: auto; left: -3%; top: -33.3%; }
.how-impact__art { position: relative; overflow: hidden; aspect-ratio: 1640 / 560; margin-right: -83px; }
/* framed to the laptop and its note -- the picture's empty margins are left
   out of view; the file itself is untouched */
.how-impact__art img { position: absolute; width: 120.9%; max-width: none; height: auto; left: -15.2%; top: -21.4%; }

@media (max-width: 1300px) { .how-row--heads h3 { font-size: 15px; } }
/* The last title is held to two lines, "Work towards / Interview Ready". It
   has nothing to its right, so it may use a little of the space beyond its
   column rather than wrapping to a third line. */
.how-row--heads .st6 { justify-content: flex-start; }
.how-row--heads .st6 h3 { white-space: nowrap; }
@media (max-width: 1180px) { .how-impact__art { margin-right: -48px; } }
@media (max-width: 1120px) { .how-row--heads li:not(:last-child)::after { font-size: 17px; } .how-row--heads h3 { font-size: 13px; } }
@media (max-width: 1180px) {
  .how-row--heads h3 { font-size: 14px; }
  .how-row--descs li { font-size: 13px; }
}
@media (max-width: 1000px) {
  .how-journey { padding: 36px 24px 22px; }
  .how-together { padding: 8px 24px 14px; }
  .how-impact { padding: 18px 24px 16px; }
  .how-phones { margin-left: -24px; margin-right: -24px; }
  .how-row { margin-left: 0; width: 100%; grid-template-columns: 1fr; gap: 12px; }
  .how-row--heads li::after { display: none; }
  .how-row--heads { width: 100%; margin-left: 0; }
  /* On phones each step is one row: number, title and description, under the
     picture. */
  .how-row--heads { order: 3; margin-top: 20px; gap: 16px; }
  .how-row--heads li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px;
    justify-content: stretch; align-items: start; }
  .how-row--heads h3 { font-size: 16px; align-self: center; text-align: left; }
  .how-row--heads h3 br { display: none; }
  .how-row--heads .st6 h3 { white-space: normal; }
  .how-mob { display: block; grid-column: 2; margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: #22335F; }
  .how-row--descs { display: none; }
  .how-journey { display: flex; flex-direction: column; }
  .how-journey .pg-h2 { order: 0; } .how-journey .pg-sub { order: 1; } .how-phones { order: 2; }
  .how-panel { margin: 0 -24px; }
  .how-panel__head { padding: 16px 24px 8px; }
  .how-impact { grid-template-columns: 1fr; }
  .how-impact__art { width: calc(100% + 48px); max-width: none; margin-left: -24px; }
  .how-impact__art { margin-top: 8px; margin-right: 0; }
}

/* How It Works closing band: the designers' photo (2079 x 756, left 45% calm)
   with the wording on its left, scaling with it as the top sections do. */
/* framed without the top 150px of sky, so the band is less tall; the note
   and the student stay fully in view. The file itself is untouched. */
.pg-close--how { aspect-ratio: 2079 / 606; min-height: 0; padding: 0; background: #E8F7FE;
  display: flex; align-items: center; container-type: inline-size; }
.pg .pg-close--how .pg-close__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: right bottom; }
.pg-close--how .pg-close__copy { position: relative; z-index: 2; max-width: none;
  margin-left: calc(83 / 1440 * 100cqw); width: calc(520 / 1440 * 100cqw); }
.pg-close--how .pg-h2 { font-size: calc(44 / 1440 * 100cqw); }
.pg-close--how .pg-body { font-size: calc(18 / 1440 * 100cqw); margin-top: calc(14 / 1440 * 100cqw); }
.pg-close--how .pg-btn { margin-top: calc(22 / 1440 * 100cqw); }
@media (max-width: 1000px) {
  .pg-close--how { aspect-ratio: auto; flex-direction: column; align-items: stretch;
    padding: 22px 24px 0; container-type: normal; }
  .pg-close--how .pg-close__copy { margin-left: 0; width: auto; }
  .pg-close--how .pg-h2 { font-size: clamp(26px, 5.2vw, 34px); }
  .pg-close--how .pg-body { font-size: 16px; margin-top: 12px; }
  .pg-close--how .pg-btn { margin-top: 18px; }
  .pg .pg-close--how .pg-close__bg { position: static; order: 2; width: calc(100% + 48px); max-width: none;
    height: auto; aspect-ratio: 1143 / 756; margin: 24px -24px 0; object-position: right center; }
}


/* ---- RECRUITMENT INTELLIGENCE ------------------------------------------ */
/* Hero: the designers' photo (2125 x 740). Its left 40% is calm deep navy
   (#022B73); the copy is white and sits in the top of that area, clear of the
   handwritten note in the lower-left corner (which starts 63% of the way
   down). The copy scales with the photo, as on the other pages. */
.pg-hero--ri { background: #022B73; aspect-ratio: 2125 / 740; min-height: 0; padding: 0;
  display: block; container-type: inline-size; }
.pg .pg-hero--ri .pg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: right center; }
.pg-hero--ri .pg-hero__copy { position: relative; z-index: 2; margin-left: calc(83 / 1440 * 100cqw);
  padding-top: calc(22 / 1440 * 100cqw); width: calc(545 / 1440 * 100cqw); max-width: none; }
.pg-hero--ri .pg-eyebrow { color: #8CC4FF; font-size: calc(14 / 1440 * 100cqw); margin-bottom: calc(10 / 1440 * 100cqw); }
.pg-hero--ri .pg-h1 { color: #fff; font-size: calc(41 / 1440 * 100cqw); white-space: nowrap; }
.pg-hero--ri .pg-h1 b { color: #4FA8FF; }
.pg-hero--ri .pg-lede { color: #E4EEFF; max-width: none; font-size: calc(17 / 1440 * 100cqw);
  line-height: 1.5; margin-top: calc(12 / 1440 * 100cqw); }
@media (max-width: 1000px) {
  .pg-hero--ri { aspect-ratio: auto; padding: 36px 24px 0; display: flex; flex-direction: column;
    container-type: normal; }
  .pg-hero--ri .pg-hero__copy { margin-left: 0; padding-top: 0; width: auto; order: 1; }
  .pg-hero--ri .pg-eyebrow { font-size: 13px; margin-bottom: 12px; }
  .pg-hero--ri .pg-h1 { font-size: clamp(28px, 6.1vw, 40px); white-space: normal; }
  .pg-hero--ri .pg-lede { font-size: 16px; margin-top: 16px; }
  /* on phones the photo follows the text: the student and his note, without
     the navy side (the file itself is untouched) */
  .pg .pg-hero--ri .pg-hero__bg { position: static; order: 2; width: calc(100% + 48px); max-width: none;
    height: auto; aspect-ratio: 1275 / 740; margin: 24px -24px 0; object-position: right center; }
}

/* Section 2, "Where real insight comes from": the designers' background with
   live text over it. On laptops the section keeps the background's shape and
   everything scales with it, so the text always clears the two handwritten
   notes (lower-left and upper-right) and the globe (top centre). */
.ri-insight { position: relative; overflow: hidden; aspect-ratio: 2125 / 740; background: #F4F9FE;
  container-type: inline-size; }
.pg .ri-insight__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ri-insight__copy { position: absolute; left: calc(83 / 1440 * 100cqw); top: calc(40 / 1440 * 100cqw);
  width: calc(455 / 1440 * 100cqw); }
.ri-insight .pg-eyebrow { font-size: calc(14 / 1440 * 100cqw); margin-bottom: calc(12 / 1440 * 100cqw); }
.ri-insight .pg-h2 { font-size: calc(36 / 1440 * 100cqw); }
.ri-insight .pg-body { font-size: calc(16.5 / 1440 * 100cqw); margin-top: calc(14 / 1440 * 100cqw); }
/* larger cards: they start higher, overlapping the faded lower part of the
   globe as in the designers' layout, and use more of the width */
.ri-cards { position: absolute; list-style: none; margin: 0; padding: 0;
  left: calc(570 / 1440 * 100cqw); right: calc(45 / 1440 * 100cqw); top: calc(140 / 1440 * 100cqw);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 / 1440 * 100cqw); }
.ri-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: calc(16 / 1440 * 100cqw) calc(9 / 1440 * 100cqw) calc(58 / 1440 * 100cqw);
  border-radius: calc(18 / 1440 * 100cqw); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 calc(14 / 1440 * 100cqw) calc(34 / 1440 * 100cqw) rgba(20, 70, 160, .16); }
/* the soft coloured wave along the bottom of each card */
.ri-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background: var(--wave) bottom / 100% 100% no-repeat; }
.ri-card__badge { display: grid; place-items: center; flex: none; width: calc(74 / 1440 * 100cqw);
  height: calc(74 / 1440 * 100cqw); border-radius: 50%; background: #fff;
  box-shadow: 0 calc(6 / 1440 * 100cqw) calc(16 / 1440 * 100cqw) rgba(20, 70, 160, .12); }
.ri-card__badge svg, .ri-card__badge img { width: 60%; height: 60%; object-fit: contain; }
/* every title is exactly two lines, so the four descriptions start level */
.ri-card h3 { margin: calc(14 / 1440 * 100cqw) 0 0; font-size: calc(18 / 1440 * 100cqw); line-height: 1.2;
  font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.ri-card p { position: relative; z-index: 1; margin: calc(10 / 1440 * 100cqw) 0 0;
  font-size: calc(15.5 / 1440 * 100cqw); line-height: 1.45; color: #1B2B5E; }
/* brighter tints, closer to the designers' cards */
.ri-card--blue   { background: linear-gradient(#EAF2FF, #D3E4FF); }
.ri-card--purple { background: linear-gradient(#F2ECFF, #E2D5FF); }
.ri-card--green  { background: linear-gradient(#E8FAF2, #CCF1E0); }
.ri-card--orange { background: linear-gradient(#FFF0E8, #FFDCCB); }
.ri-card--blue h3 { color: #1446D6; }   .ri-card--purple h3 { color: #6420D6; }
.ri-card--green h3 { color: #0F7A3A; }  .ri-card--orange h3 { color: #E23B12; }
.ri-card--blue   { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C60 45 110 8 200 0 V50Z' fill='%233B7EF5'/%3E%3Cpath d='M0 50 C70 40 120 20 200 14 V50Z' fill='%23A9C8FF' fill-opacity='.8'/%3E%3C/svg%3E"); }
.ri-card--purple { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C60 45 110 8 200 0 V50Z' fill='%239157F0'/%3E%3Cpath d='M0 50 C70 40 120 20 200 14 V50Z' fill='%23CDB6FF' fill-opacity='.8'/%3E%3C/svg%3E"); }
.ri-card--green  { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C60 45 110 8 200 0 V50Z' fill='%2322C98C'/%3E%3Cpath d='M0 50 C70 40 120 20 200 14 V50Z' fill='%23A5EACC' fill-opacity='.8'/%3E%3C/svg%3E"); }
.ri-card--orange { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C60 45 110 8 200 0 V50Z' fill='%23F9683F'/%3E%3Cpath d='M0 50 C70 40 120 20 200 14 V50Z' fill='%23FFC2AD' fill-opacity='.8'/%3E%3C/svg%3E"); }

/* Smaller laptops, tablets and phones: the section flows normally -- heading
   and paragraph, then the cards (four in a row, then two, then one) -- over the
   same background, so the card text stays at a comfortable size. */
@media (max-width: 1000px) {
  .ri-insight { aspect-ratio: auto; padding: 36px 83px 44px; container-type: normal; }

  .pg .ri-insight__bg { object-position: center top; }
  .ri-insight__copy, .ri-cards { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .ri-insight__copy { max-width: 640px; }
  .ri-insight .pg-eyebrow { font-size: 13px; margin-bottom: 12px; }
  .ri-insight .pg-h2 { font-size: clamp(26px, 4vw, 34px); }
  .ri-insight .pg-body { font-size: 16px; margin-top: 12px; }
  .ri-cards { margin-top: 26px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .ri-card { padding: 22px 16px 52px; border-radius: 18px; box-shadow: 0 12px 30px rgba(20, 70, 160, .14); }
  .ri-card__badge { width: 76px; height: 76px; box-shadow: 0 6px 16px rgba(20, 70, 160, .12); }
  .ri-card h3 { margin-top: 12px; font-size: 18px; }
  .ri-card p { margin-top: 10px; font-size: 15.5px; }
}
@media (max-width: 900px) { .ri-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ri-insight { padding: 32px 24px 36px; }
  .ri-cards { grid-template-columns: 1fr; }
}

/* Section 3, "Bridging the gap": a band above the designers' artwork continues
   the artwork's own top-edge colours, so heading and paragraph have room above
   the three circles; the two read as one picture. Everything scales with the
   width, like the other artwork sections. Text is sized as in the designers'
   version: big white heading, full-size paragraph, bold row titles. */
.ri-bridge { position: relative; container-type: inline-size; background: #01204E;
  padding-top: calc(56 / 1440 * 100cqw); }
.ri-bridge::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(58 / 1440 * 100cqw);
  background: linear-gradient(to right, #0063D4 0%, #004296 10%, #002E6D 20%, #01275F 30%, #012152 40%, #012052 50%, #002458 60%, #012255 70%, #002357 80%, #012358 90%, #01204E 100%); }
.ri-bridge__art { position: relative; }
.pg .ri-bridge__art img { display: block; width: 100%; height: auto; }
.ri-lbl, .ri-road { position: absolute; transform: translateX(-50%); text-align: center; color: #fff;
  font-weight: 700; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 10, 40, .6); white-space: nowrap; }
.ri-lbl { top: calc(468 / 740 * 100%); font-size: calc(19 / 1440 * 100cqw); }
.ri-lbl--campus { left: calc(290 / 2125 * 100%); }
.ri-lbl--career { left: calc(970 / 2125 * 100%); }
.ri-lbl--cv { left: calc(632 / 2125 * 100%); font-weight: 500; font-size: calc(17 / 1440 * 100cqw); color: #E6EEFF; }
.ri-lbl--cv b { display: block; font-size: calc(26 / 1440 * 100cqw); font-weight: 800; color: #fff; margin-bottom: calc(4 / 1440 * 100cqw); }
.ri-road { font-size: calc(15 / 1440 * 100cqw); letter-spacing: .14em; text-transform: uppercase; }
.ri-road--from { left: calc(335 / 2125 * 100%); top: calc(622 / 740 * 100%); color: #5CB6FF; }
.ri-road--to { left: calc(905 / 2125 * 100%); top: calc(606 / 740 * 100%); color: #45E3B5; }

.ri-bridge__copy { position: absolute; left: calc(83 / 1440 * 100cqw); top: calc(26 / 1440 * 100cqw);
  width: calc(640 / 1440 * 100cqw); }
.ri-bridge .pg-eyebrow { color: #36C0FF; font-size: calc(14 / 1440 * 100cqw); letter-spacing: .14em;
  margin-bottom: calc(10 / 1440 * 100cqw); }
.ri-bridge .pg-eyebrow::after { content: ""; display: block; width: calc(42 / 1440 * 100cqw); height: 3px;
  margin-top: calc(8 / 1440 * 100cqw); background: #36C0FF; border-radius: 2px; }
.ri-bridge .pg-h2 { color: #fff; font-size: calc(40 / 1440 * 100cqw); line-height: 1.02; }
.ri-bridge .pg-body { color: #E6EEFF; font-size: calc(17.5 / 1440 * 100cqw); line-height: 1.45;
  margin-top: calc(12 / 1440 * 100cqw); max-width: calc(620 / 1440 * 100cqw); }
.ri-bridge__path { display: none; }

/* the panel on the right, in the designers' glass style */
/* kept to the right so the city skyline beside the briefcase stays in view */
.ri-panel { position: absolute; right: calc(22 / 1440 * 100cqw); top: calc(46 / 1440 * 100cqw);
  width: calc(560 / 1440 * 100cqw); padding: calc(22 / 1440 * 100cqw) calc(20 / 1440 * 100cqw) calc(20 / 1440 * 100cqw);
  border-radius: calc(20 / 1440 * 100cqw); border: 1px solid rgba(120, 170, 255, .35);
  background: linear-gradient(160deg, rgba(30, 80, 190, .40), rgba(10, 40, 120, .40));
  backdrop-filter: blur(6px); box-shadow: 0 20px 50px rgba(0, 10, 50, .35); }
.ri-panel h3 { margin: 0 0 calc(14 / 1440 * 100cqw); color: #fff; font-size: calc(24 / 1440 * 100cqw);
  font-weight: 800; letter-spacing: -.015em; }
.ri-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(10 / 1440 * 100cqw); }
.ri-row { display: grid; grid-template-columns: calc(52 / 1440 * 100cqw) calc(206 / 1440 * 100cqw) 1fr;
  align-items: center; column-gap: calc(14 / 1440 * 100cqw);
  padding: calc(11 / 1440 * 100cqw) calc(14 / 1440 * 100cqw); border-radius: calc(14 / 1440 * 100cqw);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .06); }
.ri-row__icon { display: grid; place-items: center; width: calc(52 / 1440 * 100cqw); height: calc(52 / 1440 * 100cqw);
  border-radius: 50%; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.ri-row__icon svg { width: 58%; height: 58%; }
.ri-row__icon img { width: 100%; height: 100%; }
/* the designers' round icons carry their own colour, so the drawn backgrounds are off */
.ri-row .ri-row__icon:has(img) { background: none; }
.ri-row--blue .ri-row__icon   { background: radial-gradient(circle at 35% 30%, #4FC3FF, #0B7BE0); }
.ri-row--purple .ri-row__icon { background: radial-gradient(circle at 35% 30%, #B77CFF, #6A2BE0); }
.ri-row--orange .ri-row__icon { background: radial-gradient(circle at 35% 30%, #FFC24D, #F28A0C); }
.ri-row--blue2 .ri-row__icon  { background: radial-gradient(circle at 35% 30%, #5AA0FF, #1452E0); }
.ri-row b { color: #fff; font-size: calc(16.5 / 1440 * 100cqw); line-height: 1.25; font-weight: 700; }
.ri-row__desc { color: #D6E3FF; font-size: calc(14.5 / 1440 * 100cqw); line-height: 1.4;
  padding-left: calc(12 / 1440 * 100cqw); border-left: 1px solid rgba(255, 255, 255, .22); }

/* Smaller laptops, tablets and phones: heading and paragraph, then the
   artwork with its labels, then the panel -- each at a readable size. */
@media (max-width: 1000px) {
  /* order on smaller screens: heading and paragraph, then the artwork, then the panel */
  .ri-bridge { padding: 40px 0 32px; container-type: normal; background: #012052;
    display: flex; flex-direction: column; }
  .ri-bridge__copy { order: 1; } .ri-bridge__art { order: 2; } .ri-panel { order: 3; }
  .ri-bridge::before { display: none; }
  .ri-bridge__copy { position: static; width: auto; padding: 0 48px; }
  .ri-bridge .pg-eyebrow { font-size: 13px; margin-bottom: 12px; }
  .ri-bridge .pg-eyebrow::after { width: 40px; margin-top: 8px; }
  .ri-bridge .pg-h2 { font-size: clamp(26px, 4vw, 36px); }
  .ri-bridge .pg-body { font-size: 16.5px; margin-top: 12px; max-width: 680px; }
  .ri-bridge__art { margin-top: 10px; container-type: inline-size; }
  /* labels keep the same proportion to the artwork as on laptops, so they never
     crowd each other */
  .ri-lbl { font-size: calc(19 / 1440 * 100cqw); }
  .ri-lbl--cv { font-size: calc(17 / 1440 * 100cqw); }
  .ri-lbl--cv b { font-size: calc(26 / 1440 * 100cqw); }
  .ri-road { font-size: calc(15 / 1440 * 100cqw); }
  .ri-panel { position: static; width: auto; margin: 20px 48px 0;
    padding: 22px 20px 20px; border-radius: 20px; }
  .ri-panel h3 { font-size: 22px; margin-bottom: 14px; }
  .ri-panel ul { gap: 10px; }
  .ri-row { grid-template-columns: 56px 210px 1fr; column-gap: 16px; padding: 14px 16px; border-radius: 14px; }
  .ri-row__icon { width: 56px; height: 56px; }
  .ri-row b { font-size: 17px; }
  .ri-row__desc { font-size: 15px; padding-left: 14px; }
}
@media (max-width: 700px) {
  .ri-bridge__copy { padding: 0 24px; }
  /* the circle labels would be too small on a phone: the path is spelled out
     under the paragraph instead */
  .ri-lbl, .ri-road { display: none; }
  .ri-bridge__path { display: block; margin: 14px 0 0; color: #36C0FF; font-weight: 700; font-size: 15px; line-height: 1.4; }
  .ri-panel { margin: 20px 16px 0; padding: 18px 14px 14px; }
  .ri-row { grid-template-columns: 48px 1fr; row-gap: 6px; padding: 12px; }
  .ri-row__icon { width: 48px; height: 48px; grid-row: span 2; }
  .ri-row__desc { grid-column: 2; border-left: 0; padding-left: 0; font-size: 14.5px; }
  .ri-row b br { display: none; }
}

/* Last section, "Real recruitment context": the designers' background with the
   heading, paragraph and two cards as live text in its calm centre. On laptops
   the section keeps the background's shape and everything scales with it. */
.ri-gain { position: relative; overflow: hidden; aspect-ratio: 2126 / 740; background: #F0F9FE;
  container-type: inline-size; }
.pg .ri-gain__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ri-gain__inner { position: absolute; left: calc(392 / 1440 * 100cqw); right: calc(292 / 1440 * 100cqw);
  top: calc(34 / 1440 * 100cqw); text-align: center; }
.ri-gain .pg-h2 { font-size: calc(33 / 1440 * 100cqw); white-space: nowrap; }
.ri-gain .pg-body { font-size: calc(17 / 1440 * 100cqw); margin: calc(12 / 1440 * 100cqw) auto 0;
  max-width: calc(720 / 1440 * 100cqw); color: #1B2B5E; }
.ri-gain__cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(18 / 1440 * 100cqw);
  margin-top: calc(24 / 1440 * 100cqw); text-align: left; }
.ri-gain__card { background: rgba(255, 255, 255, .92); border: 1px solid #E3EDFA;
  border-radius: calc(18 / 1440 * 100cqw); padding: calc(20 / 1440 * 100cqw) calc(20 / 1440 * 100cqw) calc(12 / 1440 * 100cqw);
  box-shadow: 0 calc(16 / 1440 * 100cqw) calc(40 / 1440 * 100cqw) rgba(20, 70, 160, .14); }
.ri-gain__card h3 { margin: 0 0 calc(6 / 1440 * 100cqw); font-size: calc(19 / 1440 * 100cqw); font-weight: 800;
  color: #0A3FB8; letter-spacing: -.01em; }
.ri-gain__card ul { list-style: none; margin: 0; padding: 0; }
.ri-gain__card li { display: flex; align-items: center; gap: calc(12 / 1440 * 100cqw);
  padding: calc(9 / 1440 * 100cqw) 0; font-size: calc(15.5 / 1440 * 100cqw); line-height: 1.35; color: #1B2B5E; }
.ri-gain__card li + li { border-top: 1px solid #EDF2FA; }
.ri-gain__icon { flex: none; display: grid; place-items: center; width: calc(38 / 1440 * 100cqw);
  height: calc(38 / 1440 * 100cqw); border-radius: 50%; }
.ri-gain__icon svg, .ri-gain__icon img { width: 62%; height: 62%; object-fit: contain; }



@media (max-width: 1000px) {
  .ri-gain { aspect-ratio: auto; padding: 40px 48px 44px; container-type: normal; }
  .ri-gain__inner { position: relative; left: auto; right: auto; top: auto; max-width: 860px; margin: 0 auto; }
  .ri-gain .pg-h2 { font-size: clamp(26px, 3.4vw, 34px); white-space: normal; }
  .ri-gain .pg-body { font-size: 16.5px; margin-top: 12px; max-width: 680px; }
  .ri-gain__cards { gap: 18px; margin-top: 24px; }
  .ri-gain__card { border-radius: 18px; padding: 20px 20px 12px; box-shadow: 0 14px 34px rgba(20, 70, 160, .14); }
  .ri-gain__card h3 { font-size: 19px; margin-bottom: 6px; }
  .ri-gain__card li { gap: 12px; padding: 9px 0; font-size: 15.5px; }
  .ri-gain__icon { width: 38px; height: 38px; }
  /* behind the text, a soft wash keeps it readable over the photo */
  .ri-gain::after { content: ""; position: absolute; inset: 0; background: rgba(240, 249, 254, .72); }
  .ri-gain__inner { z-index: 1; }
}
@media (max-width: 700px) {
  .ri-gain { padding: 0 24px 34px; }
  .ri-gain::after { display: none; }
  /* on phones the student photo comes first, then the text and cards */
  .pg .ri-gain__bg { position: static; width: calc(100% + 48px); height: auto; margin: 0 -24px 22px;
    aspect-ratio: 1000 / 740; object-position: left center; }
  .ri-gain__cards { grid-template-columns: 1fr; }
}

/* Closing section: the designers' artwork with live text in the calm sky,
   positioned and sized as in their design (heading from 28% across, the
   button above the curved path). Everything scales with the artwork. */
.ri-close2 { position: relative; overflow: hidden; aspect-ratio: 2125 / 740; background: #E6F3FD;
  container-type: inline-size; }
.pg .ri-close2__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ri-close2__copy { position: absolute; left: calc(403 / 1440 * 100cqw); top: calc(70 / 1440 * 100cqw);
  width: calc(660 / 1440 * 100cqw); }
.ri-close2 h2 { margin: 0; color: #0A2A8F; font-size: calc(48 / 1440 * 100cqw); line-height: 1.04;
  font-weight: 800; letter-spacing: -.025em; }
.ri-close2 p { margin: calc(18 / 1440 * 100cqw) 0 0; color: #13249A; font-size: calc(18 / 1440 * 100cqw); line-height: 1.5;
  max-width: calc(640 / 1440 * 100cqw); }
.ri-close2 .pg-btn { margin-top: calc(24 / 1440 * 100cqw); font-size: calc(17 / 1440 * 100cqw);
  padding: calc(15 / 1440 * 100cqw) calc(34 / 1440 * 100cqw); border-radius: calc(8 / 1440 * 100cqw);
  box-shadow: 0 calc(10 / 1440 * 100cqw) calc(24 / 1440 * 100cqw) rgba(10, 98, 254, .28); }
@media (max-width: 1000px) {
  .ri-close2 { aspect-ratio: auto; display: flex; flex-direction: column; padding: 0 24px 34px; container-type: normal; }
  .pg .ri-close2__bg { position: static; width: calc(100% + 48px); height: auto; margin: 0 -24px 20px; }
  .ri-close2__copy { position: static; width: auto; }
  .ri-close2 h2 { font-size: clamp(26px, 5.4vw, 36px); }
  .ri-close2 p { font-size: 16px; margin-top: 12px; max-width: none; }
  .ri-close2 .pg-btn { margin-top: 18px; font-size: 16px; padding: 14px 26px; border-radius: 8px; }
}

/* ---- ABOUT --------------------------------------------------------------- */
/* Hero: same arrangement as Recruitment Intelligence (calm navy left, note in
   the lower-left corner), on this page's own navy. */
.pg-hero--about { background: #01245D; }
/* this page's heading is two lines, not three, so it can be set larger */
.pg-hero--about .pg-hero__copy { padding-top: calc(40 / 1440 * 100cqw); }
.pg-hero--about .pg-h1 { font-size: calc(41 / 1440 * 100cqw); }
.pg-hero--about .pg-lede { font-size: calc(18 / 1440 * 100cqw); margin-top: calc(16 / 1440 * 100cqw); }
@media (max-width: 1000px) {
  .pg-hero--about .pg-hero__copy { padding-top: 0; }
  .pg-hero--about .pg-h1 { font-size: clamp(28px, 6.1vw, 40px); }
  .pg-hero--about .pg-lede { font-size: 16px; }
}

/* Section 2, "Why CampusVoice?" */
.ab-why { display: grid; grid-template-columns: 30% 1fr; gap: 40px; align-items: center;
  background: #F5F9FF; padding-top: 44px; padding-bottom: 48px; }
.ab-why .pg-h2 { font-size: 40px; }
.ab-why .pg-body { margin-top: 14px; font-size: 17px; line-height: 1.55; color: #1B3A9B; }
.ab-why__cards { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ab-why__card { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 16px 26px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(20, 70, 160, .10); }
.ab-why__card img { width: 60px; height: 60px; }
.ab-why__card h3 { margin: 14px 0 0; font-size: 18px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em;
  min-height: 2.4em; display: flex; align-items: center; }
.ab-why__card p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #1B2B5E; }
.ab-why__card--blue   { background: linear-gradient(#EEF5FF, #E0ECFF); }
.ab-why__card--purple { background: linear-gradient(#F4EFFF, #E9E0FF); }
.ab-why__card--green  { background: linear-gradient(#ECFAF3, #DDF5E9); }
.ab-why__card--orange { background: linear-gradient(#FFF3EE, #FFE6DC); }
.ab-why__card--blue h3 { color: #1446D6; }  .ab-why__card--purple h3 { color: #6420D6; }
.ab-why__card--green h3 { color: #0F7A3A; } .ab-why__card--orange h3 { color: #E23B12; }
@media (max-width: 1180px) { .ab-why { gap: 28px; } .ab-why__card { padding: 22px 12px; } .ab-why__card p { font-size: 14.5px; } }
@media (max-width: 1000px) {
  .ab-why { grid-template-columns: 1fr; padding: 36px 24px 36px; }
  .ab-why .pg-h2 { font-size: clamp(28px, 6vw, 36px); }
  .ab-why .pg-h2 br { display: none; }
  .ab-why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: the four cards stay two across and are made more compact */
@media (max-width: 600px) {
  .ab-why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ab-why__card { padding: 16px 10px 16px; border-radius: 14px; }
  .ab-why__card img { width: 42px; height: 42px; }
  .ab-why__card h3 { margin-top: 10px; font-size: 15.5px; }
  .ab-why__card p { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
}

/* Section 3, "Born in recruitment. Built for campuses." -- the photo is shown
   whole (never cropped) at the page's left edge, and the whole section scales
   with the page, so every laptop sees the same arrangement. */
.ab-origin { display: grid; grid-template-columns: 38% 1fr; align-items: center; background: #F5F9FF;
  container-type: inline-size; }
.ab-origin__pic { align-self: stretch; }
.pg .ab-origin__pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 20% center; }
.ab-origin__pic { aspect-ratio: 1484 / 1060; }
.ab-origin__copy { padding: calc(30 / 1440 * 100cqw) calc(83 / 1440 * 100cqw) calc(30 / 1440 * 100cqw) calc(46 / 1440 * 100cqw); }
.ab-origin .pg-h2 { font-size: calc(36 / 1440 * 100cqw); }
.ab-origin .pg-body { margin-top: calc(12 / 1440 * 100cqw); font-size: calc(16.5 / 1440 * 100cqw); line-height: 1.5; color: #1B2B5E; }
.ab-origin__points { list-style: none; margin: calc(22 / 1440 * 100cqw) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-origin__points li { display: flex; align-items: center; gap: calc(12 / 1440 * 100cqw); padding: calc(4 / 1440 * 100cqw) calc(14 / 1440 * 100cqw);
  font-size: calc(14.5 / 1440 * 100cqw); line-height: 1.35; font-weight: 600; color: #0A3FB8; }
.ab-origin__points li:first-child { padding-left: 0; }
.ab-origin__points li + li { border-left: 1px solid #D5E2F5; }
.ab-origin__points svg { flex: none; width: calc(38 / 1440 * 100cqw); height: calc(38 / 1440 * 100cqw); color: #0A62FE; }
@media (max-width: 1000px) {
  .ab-origin { grid-template-columns: 1fr; }
  .ab-origin { container-type: normal; }
  .ab-origin__copy { padding: 30px 24px 36px; }
  .ab-origin .pg-body { margin-top: 12px; }
  .ab-origin__points { margin-top: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .ab-origin__points li { gap: 12px; padding: 4px 14px; font-size: 14.5px; }
  .ab-origin__points li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ab-origin__points svg { width: 38px; height: 38px; }
  .ab-origin__copy { padding: 30px 24px 36px; }
  .ab-origin .pg-h2 { font-size: clamp(26px, 5.4vw, 34px); }
  .ab-origin .pg-body { font-size: 16px; }
}
@media (max-width: 480px) {
  .ab-origin__points { grid-template-columns: 1fr; }
  .ab-origin__points li { padding-left: 0; border-left: 0 !important; }
}

/* Section 4, "Meet Vani": Vani (designers' image) on the left, the copy in the
   middle, the six-skills panel on the right. The section's background matches
   the image's own pale blue, and it scales as one unit on every laptop. */
.ab-vani { display: grid; grid-template-columns: 30% 1fr 31%; align-items: center; gap: calc(30 / 1440 * 100cqw);
  background: #EAF5FE; padding: calc(10 / 1440 * 100cqw) calc(56 / 1440 * 100cqw) calc(10 / 1440 * 100cqw) calc(30 / 1440 * 100cqw); container-type: inline-size; }
.ab-vani__art { width: 100%; height: auto; }
.ab-vani .pg-h2 { font-size: calc(34 / 1440 * 100cqw); }
.ab-vani .pg-body { margin-top: calc(14 / 1440 * 100cqw); font-size: calc(16.5 / 1440 * 100cqw); line-height: 1.55; color: #1B2B5E; }
.ab-vani__skills { background: rgba(255, 255, 255, .55); border: 1px solid #DCE9FA; border-radius: calc(18 / 1440 * 100cqw);
  padding: calc(20 / 1440 * 100cqw) calc(18 / 1440 * 100cqw) calc(18 / 1440 * 100cqw); }
.ab-vani__skills h3 { margin: 0 0 calc(14 / 1440 * 100cqw); font-size: calc(17 / 1440 * 100cqw); font-weight: 800; color: #0A3FB8; }
.ab-vani__skills ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 / 1440 * 100cqw); }
.ab-vani__skills li { display: flex; flex-direction: column; align-items: center; gap: calc(8 / 1440 * 100cqw);
  padding: calc(14 / 1440 * 100cqw) calc(8 / 1440 * 100cqw) calc(13 / 1440 * 100cqw); background: #fff; border-radius: calc(12 / 1440 * 100cqw);
  box-shadow: 0 calc(4 / 1440 * 100cqw) calc(14 / 1440 * 100cqw) rgba(20, 70, 160, .08); font-size: calc(14 / 1440 * 100cqw); font-weight: 500; color: #1B2B5E; text-align: center; }
/* larger icons, so each skill reads at a glance */
.ab-vani__skills svg { width: calc(48 / 1440 * 100cqw); height: calc(48 / 1440 * 100cqw); }
@media (max-width: 1000px) {
  .ab-vani { grid-template-columns: 1fr; gap: 20px; padding: 24px 24px 36px; container-type: normal; }
  .ab-vani__art { max-width: 460px; margin: 0 auto; }
  .ab-vani .pg-h2 { font-size: clamp(26px, 5.4vw, 34px); }
  .ab-vani .pg-body { margin-top: 12px; font-size: 16px; }
  .ab-vani__skills { border-radius: 18px; padding: 20px 16px 16px; }
  .ab-vani__skills h3 { margin-bottom: 14px; font-size: 17px; }
  .ab-vani__skills ul { gap: 10px; }
  .ab-vani__skills li { gap: 8px; padding: 16px 6px 14px; border-radius: 12px; box-shadow: 0 4px 14px rgba(20, 70, 160, .08); font-size: 14px; }
  .ab-vani__skills svg { width: 46px; height: 46px; }
}

/* Section 4, second row: three cards -- Privacy & Trust, the quote, and
   Let's Work Together -- spanning the full width under Vani. */
.ab-vani__cards { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr .9fr 1fr; gap: calc(20 / 1440 * 100cqw);
  margin: calc(6 / 1440 * 100cqw) 0 calc(26 / 1440 * 100cqw) calc(26 / 1440 * 100cqw); }
.ab-card { display: flex; gap: calc(18 / 1440 * 100cqw); align-items: flex-start; margin: 0; background: #fff; border-radius: calc(16 / 1440 * 100cqw);
  border: 1px solid #E3EDFA; padding: calc(22 / 1440 * 100cqw) calc(22 / 1440 * 100cqw); box-shadow: 0 calc(10 / 1440 * 100cqw) calc(26 / 1440 * 100cqw) rgba(20, 70, 160, .08); }
.ab-card > svg { flex: none; width: calc(52 / 1440 * 100cqw); height: calc(52 / 1440 * 100cqw); }
.ab-card--together > svg { width: calc(66 / 1440 * 100cqw); }
.ab-card h3 { margin: 0; font-size: calc(22 / 1440 * 100cqw); line-height: 1.15; font-weight: 800; color: #0A3FB8; letter-spacing: -.015em; }
.ab-card p { margin: calc(8 / 1440 * 100cqw) 0 0; font-size: calc(14.5 / 1440 * 100cqw); line-height: 1.5; color: #1B2B5E; }
.ab-card__link { display: inline-block; margin-top: calc(10 / 1440 * 100cqw); font-size: calc(15 / 1440 * 100cqw); font-weight: 700; color: #0A3FB8; }
.ab-card--quote { position: relative; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(#EAF8F1, #DDF3E8); border-color: #D2EEDF; }
.ab-q { position: absolute; left: calc(22 / 1440 * 100cqw); top: calc(6 / 1440 * 100cqw); font: 800 calc(52 / 1440 * 100cqw)/1 Inter, Arial, sans-serif; color: #16A34A; }
.ab-card--quote p { margin: 0; font-family: Kalam, 'Segoe Print', cursive; font-size: calc(19 / 1440 * 100cqw); line-height: 1.45; color: #0B2A6B; }
.ab-card--quote::after { content: ""; display: block; width: calc(84 / 1440 * 100cqw); height: 2px; margin-top: calc(12 / 1440 * 100cqw);
  background: #0A3FB8; border-radius: 2px; transform: rotate(-2deg); }
@media (max-width: 1000px) {
  .ab-vani__cards { grid-template-columns: 1fr; gap: 16px; margin: 6px 0 0; }
  .ab-card { gap: 16px; border-radius: 16px; padding: 20px; box-shadow: 0 10px 26px rgba(20, 70, 160, .08); }
  .ab-card > svg { width: 46px; height: 46px; }
  .ab-card--together > svg { width: 58px; }
  .ab-card h3 { font-size: 20px; }
  .ab-card p { margin-top: 8px; font-size: 15px; }
  .ab-card__link { margin-top: 10px; font-size: 15px; }
  .ab-card--quote { padding: 30px 20px 22px; }
  .ab-q { left: 18px; top: 6px; font-size: 46px; }
  .ab-card--quote p { font-size: 19px; }
  .ab-card--quote p br { display: none; }
  .ab-card--quote::after { width: 84px; margin-top: 12px; }
}

/* Section 4 cards, final: the designers' shield and handshake icons, and their
   quote card used as supplied in the middle, as tall as the two white cards. */
.ab-vani__cards { grid-template-columns: 1fr 1.12fr 1fr; align-items: stretch; }
.ab-card__icon { flex: none; width: calc(54 / 1440 * 100cqw); height: calc(54 / 1440 * 100cqw); object-fit: contain; }
.ab-quote { margin: 0; display: flex; align-items: center; justify-content: center; }
.ab-quote img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(10 / 1440 * 100cqw) calc(20 / 1440 * 100cqw) rgba(20, 120, 80, .10)); }
@media (max-width: 1000px) {
  .ab-vani__cards { grid-template-columns: 1fr; }
  .ab-card__icon { width: 48px; height: 48px; }
  .ab-quote img { height: auto; }
}

/* Closing band: framed to the picture band inside the designers' file; the
   heading and a white button sit on its calm blue left side. */
.ab-close { position: relative; overflow: hidden; aspect-ratio: 2170 / 368; background: #0A62FE;
  container-type: inline-size; display: flex; align-items: center; }
.pg .ab-close__bg { position: absolute; left: 0; width: 100%; max-width: none; height: auto;
  top: calc(-168 / 368 * 100%); }
.ab-close__copy { position: relative; z-index: 2; margin-left: calc(83 / 1440 * 100cqw); }
/* four short lines, so the heading stays on the calm blue, clear of the photo */
.ab-close h2 { margin: 0; color: #fff; font-size: calc(29 / 1440 * 100cqw); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.ab-close h2 b { color: #9FE0FF; font-weight: 800; }
.ab-close .pg-btn { margin-top: calc(14 / 1440 * 100cqw); font-size: calc(15 / 1440 * 100cqw); padding: calc(11 / 1440 * 100cqw) calc(24 / 1440 * 100cqw); }
@media (max-width: 1000px) {
  .ab-close { aspect-ratio: auto; flex-direction: column; align-items: stretch; container-type: normal;
    background: linear-gradient(180deg, #1F6BFF, #0A62FE); padding: 30px 24px 0; }
  .ab-close__copy { margin-left: 0; order: 1; }
  .ab-close h2 { font-size: clamp(24px, 5vw, 30px); }
  .ab-close h2 br { display: none; }
  .ab-close h2 b { display: block; }
  .ab-close .pg-btn { margin-top: 18px; font-size: 16px; padding: 13px 24px; }
  /* on phones the picture sits under the text, framed to its right-hand part
     (the banner, the students and the note); the file itself is untouched */
  .ab-close { padding-bottom: calc(100vw * 368 / 1250 + 22px); }
  .pg .ab-close__bg { position: absolute; width: calc(100vw * 2170 / 1250); left: calc(-100vw * 920 / 1250);
    top: auto; bottom: calc(-100vw * 190 / 1250);
    clip-path: inset(calc(168 / 725 * 100%) 0 calc(190 / 725 * 100%) 0); }
}

/* ---- CONTACT ------------------------------------------------------------- */
/* Hero: the designers' photo (2125 x 740), calm pale left 40%, with the copy
   and three quick links scaling with it, as on How It Works. */
.pg-hero--contact { background: #EDF7FE; aspect-ratio: 2125 / 740; min-height: 0; padding: 0;
  display: flex; align-items: center; container-type: inline-size; }
.pg .pg-hero--contact .pg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: right center; }
.pg-hero--contact .pg-hero__copy { position: relative; z-index: 2; margin-left: calc(83 / 1440 * 100cqw); width: calc(470 / 1440 * 100cqw); max-width: none; }
.pg-hero--contact .pg-eyebrow { font-size: calc(14 / 1440 * 100cqw); }
.pg-hero--contact .pg-h1 { font-size: calc(50 / 1440 * 100cqw); white-space: nowrap; }
.pg-hero--contact .pg-lede { max-width: none; font-size: calc(17 / 1440 * 100cqw); margin-top: calc(16 / 1440 * 100cqw); }
.ct-quick { list-style: none; margin: calc(22 / 1440 * 100cqw) 0 0; padding: 0; display: flex; }
.ct-quick li + li { border-left: 1px solid #C9DBF3; }
.ct-quick a { display: flex; align-items: center; gap: calc(10 / 1440 * 100cqw); padding: 0 calc(18 / 1440 * 100cqw); font-size: calc(14.5 / 1440 * 100cqw); font-weight: 600;
  line-height: 1.25; color: #0A3FB8; text-decoration: none; }
.ct-quick li:first-child a { padding-left: 0; }
.ct-quick svg { width: calc(34 / 1440 * 100cqw); height: calc(34 / 1440 * 100cqw); color: #0A62FE; flex: none; }

/* Form and contact card */
.ct-main { display: grid; grid-template-columns: 1fr 38%; gap: 28px; align-items: start;
  padding: 36px 83px 48px; background: #F5F9FF; }
.ct-form, .ct-card { background: #fff; border: 1px solid #E3EDFA; border-radius: 18px; padding: 28px 30px;
  box-shadow: 0 12px 30px rgba(20, 70, 160, .08); }
.ct-form .pg-h2, .ct-card .pg-h2 { font-size: 34px; }
.ct-form__sub, .ct-card__sub { margin: 6px 0 0; font-size: 16px; color: #1B3A9B; }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 20px; }
.ct-form label { display: block; font-size: 14.5px; font-weight: 500; color: #1B2B5E; }
.ct-form i { font-style: normal; color: #E5383B; }
.ct-form input[type=text], .ct-form input[type=email], .ct-form input[type=tel], .ct-form select, .ct-form textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; font: inherit; font-size: 15px; color: #1B2B5E; padding: 11px 13px; border: 1px solid #CFDCEF; border-radius: 8px; background: #fff; }
.ct-form textarea { resize: vertical; min-height: 96px; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: 2px solid #0A62FE; outline-offset: 1px; border-color: #0A62FE; }
.ct-form .is-bad { border-color: #E5383B; background: #FFF6F6; }
.ct-interest { border: 0; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ct-interest legend { padding: 0; margin-bottom: 8px; font-size: 14.5px; font-weight: 500; color: #1B2B5E; }
.ct-interest label { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ct-interest input { width: 18px; height: 18px; accent-color: #0A62FE; }
.ct-full { margin-top: 16px; }
.ct-form .pg-btn { margin-top: 18px; border: 0; cursor: pointer; font-size: 16px; }
.ct-form .pg-btn:disabled { opacity: .6; cursor: wait; }
.ct-form__status { margin: 12px 0 0; font-size: 15px; font-weight: 600; min-height: 1em; }
.ct-form__status.is-ok { color: #0F7A3A; } .ct-form__status.is-error { color: #C62828; }
.ct-privacy { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: #4A5A80; }
.ct-privacy b { color: #0A3FB8; }
.ct-lines { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.ct-lines li { display: flex; align-items: center; gap: 16px; }
.ct-lines img { width: 56px; height: 56px; flex: none; }
.ct-lines a, .ct-lines b { display: block; font-size: 18px; font-weight: 700; color: #0A3FB8; text-decoration: none; word-break: break-word; }
.ct-lines span { display: block; margin-top: 2px; font-size: 14.5px; color: #1B2B5E; }
.ct-follow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid #E3EDFA; }
.ct-follow h3 { margin: 0; font-size: 22px; font-weight: 800; color: #0A3FB8; }
.ct-follow p { margin: 4px 0 10px; font-size: 14.5px; color: #1B2B5E; }
.ct-social { display: flex; gap: 10px; justify-content: flex-start; margin: 0; }
.ct-note { width: 150px; height: auto; }
@media (max-width: 1180px) { .ct-main { padding: 30px 48px 40px; } .ct-form, .ct-card { padding: 24px; } }
@media (max-width: 1000px) {
  .pg-hero--contact { aspect-ratio: auto; padding: 36px 24px 0; flex-direction: column; align-items: stretch; container-type: normal; }
  .pg-hero--contact .pg-hero__copy { margin-left: 0; width: auto; order: 1; }
  .pg-hero--contact .pg-eyebrow { font-size: 13px; }
  .pg-hero--contact .pg-h1 { font-size: clamp(30px, 7vw, 44px); white-space: normal; }
  .pg-hero--contact .pg-lede { font-size: 16px; margin-top: 14px; }
  .ct-quick { margin-top: 18px; }
  .ct-quick a { gap: 8px; padding: 0 12px; font-size: 13.5px; }
  .ct-quick svg { width: 28px; height: 28px; }
  .pg .pg-hero--contact .pg-hero__bg { position: static; order: 2; width: calc(100% + 48px); max-width: none; height: auto;
    aspect-ratio: 1250 / 740; margin: 22px -24px 0; object-position: right center; }
  .ct-main { grid-template-columns: 1fr; padding: 28px 16px 36px; gap: 20px; }
  .ct-form, .ct-card { padding: 22px 18px; }
  .ct-form .pg-h2, .ct-card .pg-h2 { font-size: 28px; }
}
@media (max-width: 600px) {
  .ct-grid { grid-template-columns: 1fr; }
  /* the three quick links stay on one line on phones */
  .ct-quick { flex-wrap: nowrap; }
  .ct-quick a { gap: 6px; padding: 0 9px; font-size: 12.5px; }
  .ct-quick svg { width: 24px; height: 24px; }
  .ct-note { width: 120px; }
}

/* Frequently Asked Questions */
.ct-faq { background: #F5F9FF; padding-top: 8px; padding-bottom: 48px; }
.ct-faq .pg-h2 { font-size: 36px; }
.ct-faq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 20px; align-items: start; }
.ct-faq__cols > div { display: grid; gap: 12px; }
.ct-faq__item { background: #fff; border: 1px solid #E3EDFA; border-radius: 12px; box-shadow: 0 6px 18px rgba(20, 70, 160, .06); }
.ct-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; font-size: 15.5px; font-weight: 600; color: #0A3FB8; }
.ct-faq__item summary::-webkit-details-marker { display: none; }
.ct-faq__item summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: #0A62FE; }
.ct-faq__item[open] summary::after { content: "\2212"; }
.ct-faq__item summary:focus-visible { outline: 2px solid #0A62FE; outline-offset: 2px; border-radius: 12px; }
.ct-faq__item p { margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 1.55; color: #1B2B5E; }
.ct-faq__item p a { color: #0A3FB8; font-weight: 600; }
@media (max-width: 1000px) {
  .ct-faq { padding: 8px 16px 36px; }
  .ct-faq .pg-h2 { font-size: clamp(26px, 5.4vw, 32px); }
  .ct-faq__cols { grid-template-columns: 1fr; }
}

/* ---- ARTICLES, GUIDES AND THE TPO KNOWLEDGE CENTRE ------------------------ */
/* A calm reading page: one comfortable column, the site's heading styles, and
   a Request a Demo card at the end. */
.art, .kc-hero { max-width: 820px; margin: 0 auto; padding: 36px 24px 56px; }
.kc-hero { max-width: 1100px; }
.art-back { display: inline-block; margin-bottom: 18px; font-size: 15px; font-weight: 600; color: #0A62FE; text-decoration: none; }
.art-back:hover { text-decoration: underline; }
.art .pg-eyebrow, .kc-hero .pg-eyebrow { margin-bottom: 10px; }
.art h1.pg-h2, .kc-hero h1.pg-h2 { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.1; color: #05206C; }
.art .lede, .art-lede { margin: 14px 0 0; font-size: 19px; line-height: 1.5; color: #1B3A9B; }
.art h2 { margin: 30px 0 0; font-size: 22px; line-height: 1.25; font-weight: 800; color: #0A3FB8; letter-spacing: -.01em; }
.art > h2:first-of-type { margin-top: 20px; }
.art p { margin: 10px 0 0; font-size: 17px; line-height: 1.65; color: #1B2B5E; }
.art p b { color: #0B2A6B; }
.art-cta { margin-top: 40px; padding: 26px 28px; border-radius: 18px; background: linear-gradient(120deg, #EAF3FF, #DCEBFF);
  border: 1px solid #D3E3FA; }
.art-cta h2 { margin: 0 !important; font-size: 22px; font-weight: 800; color: #05206C; }
.art-cta p { margin: 8px 0 0 !important; font-size: 16px; color: #1B3A9B; }
.art-cta .pg-btn { margin-top: 16px; }
.kc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.kc-card { display: flex; flex-direction: column; padding: 24px; border-radius: 16px; background: #fff; border: 1px solid #E3EDFA;
  box-shadow: 0 10px 26px rgba(20, 70, 160, .08); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.kc-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 70, 160, .14); }
.kc-card__tag { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0A62FE; }
.kc-card h2 { margin: 8px 0 0; font-size: 21px; line-height: 1.25; font-weight: 800; color: #0A3FB8; }
.kc-card p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: #1B2B5E; flex: 1; }
.kc-card b { margin-top: 14px; font-size: 15px; color: #0A62FE; }
@media (max-width: 700px) { .kc-grid { grid-template-columns: 1fr; } .art p { font-size: 16.5px; } .art-cta { padding: 22px 20px; } }

/* ---- RESOURCES ------------------------------------------------------------ */
.pg-hero--rs { background: #012759; }
.pg-hero--rs .pg-hero__copy { padding-top: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.pg-hero--rs { display: flex; }
.pg-hero--rs .pg-hero__copy { width: calc(515 / 1440 * 100cqw); }
.pg-hero--rs .pg-h1 { font-size: calc(50 / 1440 * 100cqw); }
.pg-hero--rs .pg-lede { font-size: calc(17 / 1440 * 100cqw); margin-top: calc(16 / 1440 * 100cqw); }
.rs-points { list-style: none; margin: calc(24 / 1440 * 100cqw) 0 0; padding: 0; display: flex; }
.rs-points li { display: flex; align-items: center; gap: calc(10 / 1440 * 100cqw); padding: 0 calc(16 / 1440 * 100cqw);
  font-size: calc(13.5 / 1440 * 100cqw); line-height: 1.3; color: #E4EEFF; }
.rs-points li:first-child { padding-left: 0; }
.rs-points li + li { border-left: 1px solid rgba(255,255,255,.25); }
.rs-points svg { flex: none; width: calc(32 / 1440 * 100cqw); height: calc(32 / 1440 * 100cqw); color: #5CC2FF; }
.rs-aud, .rs-feat, .rs-ins, .rs-topic { background: #F5F9FF; }
.rs-aud { padding-top: 40px; padding-bottom: 20px; }
.rs-feat, .rs-ins { padding-top: 20px; padding-bottom: 20px; }
.rs-topic { padding-top: 20px; padding-bottom: 48px; }
.rs-aud .pg-h2, .rs-feat .pg-h2, .rs-ins .pg-h2 { font-size: 36px; }
.rs-aud__grid, .rs-feat__grid, .rs-ins__grid { display: grid; gap: 18px; margin-top: 20px; }
.rs-aud__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rs-feat__grid, .rs-ins__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-aud__card { display: block; padding: 24px 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.9); text-decoration: none;
  box-shadow: 0 12px 30px rgba(20, 70, 160, .08); transition: transform .15s ease; }
.rs-aud__card:hover { transform: translateY(-2px); }
.rs-aud__card img { width: 56px; height: 56px; object-fit: contain; }
.rs-aud__card h3 { margin: 14px 0 0; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.rs-aud__card p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: #1B2B5E; }
.rs-aud__card--blue   { background: linear-gradient(#EEF5FF, #E0ECFF); } .rs-aud__card--blue h3 { color: #1446D6; }
.rs-aud__card--purple { background: linear-gradient(#F4EFFF, #E9E0FF); } .rs-aud__card--purple h3 { color: #6420D6; }
.rs-aud__card--green  { background: linear-gradient(#ECFAF3, #DDF5E9); } .rs-aud__card--green h3 { color: #0F7A3A; }
.rs-aud__card--orange { background: linear-gradient(#FFF3EE, #FFE6DC); } .rs-aud__card--orange h3 { color: #E23B12; }
.rs-feat__card, .rs-ins__card { background: #fff; border: 1px solid #E3EDFA; border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 10px 26px rgba(20, 70, 160, .07); }
.rs-feat__card { display: flex; flex-direction: column; }
.rs-feat__card h3, .rs-ins__card h3 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800; color: #0A3FB8; }
.rs-feat__card p, .rs-ins__card p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: #1B2B5E; }
.rs-feat__card p { flex: 1; }
.rs-ins__card { display: flex; gap: 16px; align-items: flex-start; }
.rs-ins__card img { flex: none; width: 56px; height: 56px; }
.rs-read { display: inline-block; align-self: flex-start; margin-top: 16px; padding: 9px 20px; border: 1.5px solid #0A62FE;
  border-radius: 8px; font-size: 15px; font-weight: 700; color: #0A3FB8; text-decoration: none; }
.rs-read:hover { background: #0A62FE; color: #fff; }
.rs-topic__box { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px;
  border-radius: 18px; background: #fff; border: 1px solid #E3EDFA; box-shadow: 0 10px 26px rgba(20, 70, 160, .07); }
.rs-topic__box h2 { margin: 0; font-size: 24px; font-weight: 800; color: #0A3FB8; }
.rs-topic__box p { margin: 6px 0 0; font-size: 16px; color: #1B3A9B; }
.pg-btn--ghost { background: #fff; color: #0A3FB8; border: 1.5px solid #0A62FE; flex: none; margin-top: 0; }
@media (max-width: 1000px) {
  .pg-hero--rs { flex-direction: column; }
  .pg-hero--rs .pg-hero__copy { height: auto; }
  .pg-hero--rs .pg-h1 { font-size: clamp(30px, 7vw, 42px); }
  .pg-hero--rs .pg-lede { font-size: 16px; margin-top: 14px; }
  .rs-points { margin-top: 18px; }
  .rs-points li { gap: 8px; padding: 0 10px; font-size: 12.5px; }
  .rs-points svg { width: 26px; height: 26px; }
  .rs-aud, .rs-feat, .rs-ins, .rs-topic { padding-left: 16px; padding-right: 16px; }
  .rs-aud .pg-h2, .rs-feat .pg-h2, .rs-ins .pg-h2 { font-size: clamp(26px, 5.4vw, 32px); }
  .rs-aud__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-feat__grid, .rs-ins__grid { grid-template-columns: 1fr; }
  .rs-topic__box { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}
@media (max-width: 480px) {
  /* on phones the three points stack, one per line */
  .rs-points { flex-direction: column; gap: 10px; }
  .rs-points li { padding: 0; border-left: 0 !important; font-size: 14px; }
  .rs-points li br { display: none; }
}

/* Featured cards with the designers' photos: text on the left, photo filling
   the right half, as in the design. */
.rs-feat__card { display: grid; grid-template-columns: 1fr 44%; padding: 0; overflow: hidden; }
.rs-feat__body { display: flex; flex-direction: column; padding: 20px 18px 20px 22px; }
.rs-feat__ic { width: 44px; height: 44px; margin-bottom: 12px; }
.rs-feat__body p { flex: 1; }
.rs-feat__pic { position: relative; min-height: 100%; }
.pg .rs-feat__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.rs-feat__photo { object-position: center 35%; }
@media (max-width: 1180px) { .rs-feat__card { grid-template-columns: 1fr 40%; } .rs-feat__body h3 { font-size: 18px; } }
@media (max-width: 1000px) { .rs-feat__card { grid-template-columns: 1fr 42%; } }
@media (max-width: 480px) { .rs-feat__card { grid-template-columns: 1fr; } .rs-feat__pic { order: -1; aspect-ratio: 4 / 3; } }

/* "Have a topic": the designers' photo (with its note) filling the left half,
   the box on the right, as in the design */
.rs-topic { display: grid; grid-template-columns: 50% 1fr; align-items: center; gap: 0; padding: 0; background: #EAF3FE; }
.pg .rs-topic__photo { width: 100%; height: auto; display: block; }
.rs-topic .rs-topic__box { margin: 0 83px 0 40px; flex-direction: column; align-items: flex-start; }
.rs-topic .rs-topic__box .pg-btn { margin-top: 18px; }
.rs-ins__card img { width: 60px; height: 60px; }
@media (max-width: 1000px) {
  .rs-topic { grid-template-columns: 1fr; }
  .rs-topic .rs-topic__box { margin: 20px 16px 36px; }
}

/* Featured cards, final: the designers' card images fill each card, with the
   text on their faded left side. On laptops the three cards scale together
   with the page (same proportions on every laptop); all three are always the
   same height, and never shorter than the picture's own shape. */
.rs-feat__grid { container-type: inline-size; align-items: stretch; }
.rs-feat__card { position: relative; display: block; padding: 0; overflow: hidden;
  min-height: calc((100cqw - 36px) / 3 * 941 / 1672); }
.pg .rs-feat__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right center; }
.rs-feat__card .rs-feat__body { position: relative; z-index: 1; width: 49%; box-sizing: border-box; padding: calc(16 / 1274 * 100cqw) calc(8 / 1274 * 100cqw) calc(16 / 1274 * 100cqw) calc(20 / 1274 * 100cqw); }
.rs-feat__card .rs-feat__ic { width: calc(34 / 1274 * 100cqw); height: calc(34 / 1274 * 100cqw); margin-bottom: calc(8 / 1274 * 100cqw); }
.rs-feat__card h3 { font-size: calc(16.5 / 1274 * 100cqw); line-height: 1.22; }
.rs-feat__card p { margin-top: calc(6 / 1274 * 100cqw); font-size: calc(13.5 / 1274 * 100cqw); line-height: 1.45; }
.rs-feat__card .rs-read { margin-top: calc(12 / 1274 * 100cqw); padding: calc(7 / 1274 * 100cqw) calc(16 / 1274 * 100cqw); font-size: calc(14 / 1274 * 100cqw); background: rgba(255,255,255,.85); }
.rs-feat__pic { display: none; }
@media (max-width: 1000px) {
  .rs-feat__card { min-height: calc(100cqw * 941 / 1672); }
  .rs-feat__card .rs-feat__body { width: 56%; padding: 18px 10px 18px 20px; }
  .rs-feat__card .rs-feat__ic { width: 38px; height: 38px; margin-bottom: 10px; }
  .rs-feat__card h3 { font-size: 18px; }
  .rs-feat__card p { margin-top: 8px; font-size: 15px; }
  .rs-feat__card .rs-read { margin-top: 14px; padding: 8px 18px; font-size: 14.5px; }
}
@media (max-width: 480px) {
  .rs-feat__card .rs-feat__body { width: 60%; padding: 14px 8px 14px 16px; }
  .rs-feat__card .rs-feat__ic { width: 32px; height: 32px; margin-bottom: 8px; }
  .rs-feat__card h3 { font-size: 16px; }
  .rs-feat__card p { margin-top: 6px; font-size: 13.5px; }
  .rs-feat__card .rs-read { margin-top: 10px; padding: 7px 14px; font-size: 13.5px; }
}

/* Closing section: photo and box inside the page margins, like the sections above */
.rs-next { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; background: #F5F9FF; padding-top: 20px; padding-bottom: 48px; }
/* if the box is taller than the photo, trim from the right so the handwritten note on the left is never cut */
.pg .rs-next__photo { width: 100%; height: 100%; object-fit: cover; object-position: left center; border-radius: 18px; display: block; }
.rs-next__box { display: flex; flex-direction: column; justify-content: center; padding: 28px 32px; border-radius: 18px; background: #fff;
  border: 1px solid #E3EDFA; box-shadow: 0 10px 26px rgba(20, 70, 160, .07); }
.rs-next__box h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; color: #0A3FB8; letter-spacing: -.015em; }
.rs-next__box p { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: #1B2B5E; }
.rs-next__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.rs-next__btns .pg-btn { margin-top: 0; }
@media (max-width: 1000px) { .rs-next { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; } .pg .rs-next__photo { height: auto; } .rs-next__box { padding: 22px 20px; } .rs-next__box h2 { font-size: 24px; } }

.rs-next__more { margin-top: 22px; padding-top: 18px; border-top: 1px solid #E3EDFA; }
.rs-next__more p { margin: 0; font-size: 15.5px; color: #1B2B5E; }
.rs-next__more b { color: #0A3FB8; }
.rs-next__more .rs-read { margin-top: 12px; }
@media (max-width: 480px) { .rs-next__more .rs-read { white-space: nowrap; font-size: 13.5px; padding: 8px 14px; } }

/* Featured cards: the text column runs the full card height and the
   Read Article button sits at the bottom, so all three buttons line up */
.rs-feat__card .rs-feat__body { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
.rs-feat__card .rs-feat__body p { flex: 1; }
.rs-feat__card .rs-read { align-self: flex-start; }
.rs-feat__card { display: flex; }
.pg .rs-feat__bg { z-index: 0; }

/* Phones: the hero text uses the full width */
@media (max-width: 1000px) { .pg-hero--rs .pg-hero__copy { width: auto; } }

/* Phones: the four audience cards compact, two across */
@media (max-width: 600px) {
  .rs-aud__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rs-aud__card { padding: 14px 12px 16px; border-radius: 14px; }
  .rs-aud__card img { width: 38px; height: 38px; }
  .rs-aud__card h3 { margin-top: 8px; font-size: 15.5px; }
  .rs-aud__card p { margin-top: 5px; font-size: 13px; line-height: 1.45; }
}

/* Insights cards: the text column runs the full card height and the button
   sits at the bottom, so all three Read Article buttons line up */
.rs-ins__grid { align-items: stretch; }
.rs-ins__card > div { display: flex; flex-direction: column; align-self: stretch; }
.rs-ins__card > div p { flex: 1; }
.rs-ins__card .rs-read { align-self: flex-start; }

/* spam trap on the demo form: invisible to people */
.ct-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* the contact card keeps only the handwritten note; social links stay in the footer */
.ct-follow--note { justify-content: flex-end; }

/* Route cards (For Colleges, For Students): the buttons sit at the bottom of
   each card, so both line up. */
.pg-promo { align-items: stretch; }
.pg-promo > img { align-self: center; }
.pg-promo > div { display: flex; flex-direction: column; }
.pg-promo > div p { margin-bottom: 14px; }
.pg-promo > div .pg-btn { margin-top: auto; align-self: flex-start; }

/* Quote cards (For Students, For Colleges): the quote starts at the top and the
   name line sits at the bottom of each card, so both name lines line up. */
.pg-quotes { align-items: stretch; }
.pg-quotes figure { align-items: stretch; grid-template-rows: 1fr auto; }
.pg-quotes figure > img { grid-row: 1 / 3; align-self: center; }
.pg-quotes figure > blockquote { align-self: start; }
.pg-quotes figure > figcaption { align-self: end; }
/* On smaller laptops a longer name line wraps to two lines; both name lines
   then reserve two lines and start level. */
@media (min-width: 1001px) and (max-width: 1400px) {
  .pg-quotes figure > figcaption { align-self: start; line-height: 1.3; min-height: 2.6em; }
  .pg-quotes figure { grid-template-rows: 1fr auto; }
}