/* Each article sets its own photograph here inline; this is the cover for
   the stories that were published without one. */
.leap-header {
  background-image: url(../assets/images/news/leap-hero-bg.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 71rem;
}

/* The press photos range from a near-black exhibition stand to a bright
   signing ceremony, and the breadcrumb and section label are white over
   all of them, so the cover carries a scrim rather than trusting the
   photograph to be dark enough on its own. */
.leap-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 52, 0.78) 0%, rgba(20, 20, 52, 0.55) 100%);
}

/* A story with no press photo shows the brand gradient in its card, so the
   masthead carries the same gradient rather than an unrelated event photo. */
.leap-header.news-header-fallback {
  background-image: linear-gradient(135deg, #2e2e6e 0%, #5a5ab4 100%);
}

.leap-header.news-header-fallback::before {
  display: none;
}

/* The masthead content is lifted over the scrim by being positioned, not
   by a z-index on the container: the story card hangs off the bottom of
   the masthead, and a positioned .container would become its containing
   block and re-anchor it to the container's own foot instead. */
.leap-header > .container > nav,
.leap-header > .container > .news-breadcrumb,
.leap-header > .container > p {
  position: relative;
}

/* Anchored to the foot of the masthead, not to its middle: the card grows
   upward into the picture as the headline runs on, so the amount hanging
   below is always 12rem and the clearance under it can be exact. */
.news-header-overlay {
  background-color: var(--bs-gray-300);
  border-radius: 2.4rem;
  overflow: hidden;
  width: 85%;
  margin-left: 0;
  margin-right: 0;
  bottom: -12rem;
  z-index: 10;
}

/* The photo fills its half of the card whatever height the copy sets. Left
   in normal flow it sizes to its own aspect ratio instead, and the press
   photos are close to square, so at half the card's width they made the
   card far taller than its text needed. Only this element stretches — the
   calendar icon beside the dateline is an <img> in the same subtree and
   must keep its own size. */
.news-overlay-figure {
  position: relative;
  min-height: 32rem;
}

.news-overlay-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Only the very longest headlines are trimmed, and only where the column
   is narrow enough to run them past five lines — beyond that the card
   would climb into the section label above it. */
.news-overlay-title {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.strategic-list {
  list-style: disc;
}

.news-shot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 2.4rem;
  background-color: var(--bs-gray-100);
}

.news-article {
  /* the 12rem the card hangs below the masthead, plus a gap */
  padding-top: 15rem;
}

/* The backdrop is a plain element with an inline background-image rather
than a custom property: a relative url() inside a custom property is
resolved against the stylesheet, not the page that sets it. */
.news-shot-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(2rem) saturate(1.15);
  transform: scale(1.2);
}

.news-shot img {
  position: relative;
  width: auto;
  height: auto;
  max-width: min(100%, var(--news-shot-max, 100%));
  max-height: 100%;
}

.news-shot-hero .news-shot-blur,
.news-shot-card .news-shot-blur,
.news-shot-tab .news-shot-blur {
  display: none;
}

.news-shot-hero img,
.news-shot-card img,
.news-shot-tab img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
  object-position: var(--news-shot-pos, center);
}

.news-shot.news-shot-fallback {
  background: linear-gradient(135deg, #2e2e6e 0%, #5a5ab4 100%);
  text-align: center;
  padding: 2.4rem;
}

.news-shot.news-shot-fallback .news-shot-blur {
  display: none;
}

.news-shot.news-shot-fallback img {
  width: 12.2rem;
  height: auto;
  max-width: 60%;
  object-fit: contain;
}

.news-shot-hero.news-shot-fallback {
  aspect-ratio: 5 / 2;
  max-height: 38rem;
}

.news-shot-fallback.news-overlay-media {
  border-radius: 0;
  height: 100%;
}

.news-shot-hero.news-shot-fallback img {
  width: 18rem;
}

/* ---------- the frame beside the copy in the home-page carousels ---------- */
.news-shot-tab {
  width: 53.1rem;
  max-width: 100%;
  aspect-ratio: 531 / 420;
  /* a long headline in the neighbouring column must not squeeze the photo */
  flex-shrink: 0;
}

/* ---------- the frame at the top of an article ---------- */
/* Full width of the figure, capped at what the supplied file can fill:
   --news-shot-max is twice the photo's natural width, and 78rem is the
   floor — the width of the copy below it, so the weakest photo still sits
   flush with the text rather than shrinking away from it. Replace a press
   photo with a higher-resolution original and the hero widens on its own;
   only the inline --news-shot-max needs raising. */
.news-shot-hero {
  width: 100%;
  max-width: min(100%, max(78rem, var(--news-shot-max, 100%)));
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  max-height: none;
  box-shadow: 0 1.6rem 4rem rgba(46, 46, 110, 0.12);
}

/* ---------- the frame filling a media-gallery slide ---------- */
/* home.css stretches a bare gallery image to the full band, which the
   smaller press photos cannot carry, so inside the frame they keep their
   own size instead. */
.news-shot-gallery {
  width: 100%;
  height: 51.8rem;
}

.media-gallery .carousel-item .news-shot img {
  width: auto;
  height: auto;
  max-width: min(100%, var(--news-shot-max, 100%));
  max-height: 100%;
  border-radius: 0;
}

/* ---------- the frame at the top of a card ---------- */
.news-shot-card {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 0;
  flex-shrink: 0;
}

/* ----------------------home-page carousel---------------------- */
.news-headline-link {
  color: inherit;
  transition: color 0.3s;
}

.news-headline-link:hover,
.news-headline-link:focus-visible {
  color: var(--bs-purple-dark);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

.news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-read-more {
  align-self: flex-start;
  transition: gap 0.3s;
}

/* The whole card is one click target (the headline carries .stretched-link),
   so the photo, the date, the excerpt and the "read more" cue all open the
   article. They must therefore all react as one on hover. */
.news-feature {
  cursor: pointer;
}

.news-feature:hover .news-headline-link,
.news-feature:focus-within .news-headline-link {
  color: var(--bs-purple-dark);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

.news-feature:hover .news-read-more {
  gap: 1.2rem !important;
}

.news-feature .news-shot img {
  transition: transform 0.4s ease;
}

.news-feature:hover .news-shot img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .news-feature .news-shot img {
    transition: none;
  }

  .news-feature:hover .news-shot img {
    transform: none;
  }
}

/* ---------- section headings that open their own landing page ---------- */
.section-heading-link,
.explore-more-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s, gap 0.3s;
}

.section-heading-link:hover,
.section-heading-link:focus-visible {
  color: var(--bs-purple-dark);
  text-decoration: underline;
  text-underline-offset: 0.6rem;
}

.explore-more-link {
  color: var(--bs-purple-dark);
}

.explore-more-link:hover,
.explore-more-link:focus-visible {
  gap: 1.2rem !important;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

/* ----------------------article header---------------------- */
.news-hero {
  padding-block: clamp(3.2rem, 4.5vw, 6.4rem);
  border-end-start-radius: 3.6rem;
  border-end-end-radius: 3.6rem;
}

/* Breadcrumb, category, headline and dateline are spaced by the column
   rather than by a margin on each one, so the rhythm holds however many
   lines the headline runs to. */
.news-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.news-breadcrumb a {
  color: var(--bs-gray-400);
  padding-block: 0.4rem;
  transition: color 0.3s;
}

.news-breadcrumb a:hover,
.news-breadcrumb a:focus-visible {
  color: var(--bs-white);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.news-breadcrumb span[aria-hidden] {
  color: var(--bs-gray-400);
}

.news-badge {
  border: 1px solid var(--bs-gray-400);
  border-radius: 5rem;
  padding: 0.6rem 1.8rem;
}

/* A long headline is the whole of the top of the page, so it is held to a
readable measure, set tighter than the body copy and balanced across
its lines instead of leaving one word stranded on the last one. */
.news-title {
  max-width: 86rem;
  font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.6rem) !important;
  line-height: 1.3;
  text-wrap: balance;
}

/* The calendar icon is drawn dark for the light sections. */
.news-date-icon {
  filter: brightness(0) invert(1);
}

/* ----------------------article body---------------------- */
/* White copy between the purple header and the grey related band: the
page reads as three distinct zones rather than one continuous scroll. */
.news-article-section {
  background-color: var(--bs-white);
  padding-block: clamp(3.2rem, 4vw, 5.6rem);
}

.news-figure {
  max-width: 96rem;
  margin-inline: auto;
}

.news-body {
  max-width: 78rem;
}

.news-body p {
  color: var(--bs-gray-900);
}

.news-body ul li {
  color: var(--bs-gray-900);
  list-style: disc;
  margin-inline-start: 2rem;
}

.news-body h2 {
  margin: 1.2rem 0 0;
}

.news-lead {
  color: var(--bs-purple-dark) !important;
}

.news-note {
  color: var(--bs-purple-dark) !important;
  background-color: var(--bs-gray-100);
  border-inline-start: 4px solid var(--bs-purple-dark);
  border-radius: 1.2rem;
  padding: 2.4rem;
  margin-top: 1.2rem;
}

/* ----------------------back to the media centre---------------------- */
/* Was a bare line of text that gave no sign of being clickable. It is now
   an outlined pill that fills on hover, with the arrow travelling in the
   reading direction of the page. */
.news-back {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 2.8rem;
  color: var(--bs-purple-dark);
  background-color: transparent;
  border: 1.5px solid var(--bs-purple-dark);
  border-radius: 5rem;
  line-height: 1.2;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.news-back:hover,
.news-back:focus-visible {
  color: var(--bs-white);
  background-color: var(--bs-purple-dark);
  box-shadow: 0 0.8rem 2rem rgba(46, 46, 110, 0.25);
}

.news-back-icon {
  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

.news-back:hover .news-back-icon,
.news-back:focus-visible .news-back-icon {
  /* the purple arrow is a flat single-colour SVG, so it inverts cleanly */
  filter: brightness(0) invert(1);
}

[dir='rtl'] .news-back:hover .news-back-icon,
[dir='rtl'] .news-back:focus-visible .news-back-icon {
  transform: translateX(0.4rem);
}

[dir='ltr'] .news-back:hover .news-back-icon,
[dir='ltr'] .news-back:focus-visible .news-back-icon {
  transform: translateX(-0.4rem);
}

/* ----------------------related cards---------------------- */
.news-related {
  background-color: var(--bs-gray-300);
  padding-block: clamp(4rem, 5vw, 6.4rem);
}

.news-related-head {
  margin-bottom: clamp(2.4rem, 3vw, 4rem);
}

/* Every card is built the same way whatever it carries: same photo
   shape, same padding, same category pill, headline held to three lines
   and the dateline pinned to the foot so the rows line up. */
.news-card {
  overflow: hidden;
  background-color: var(--bs-white);
  border: 1px solid transparent;
  border-radius: 2.4rem;
  color: inherit;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.news-card:hover,
.news-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--bs-purple-dark);
  box-shadow: 0 1.2rem 3rem rgba(46, 46, 110, 0.15);
}

.news-card-body {
  padding: 2.4rem;
}

.news-card-tag {
  align-self: flex-start;
  color: var(--bs-purple-dark);
  background-color: var(--bs-gray-100);
  border-radius: 5.5rem;
  padding: 1rem 2rem;
}

.news-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* three lines of headline in every card, so the datelines sit on one
  line across the row instead of stepping */
  min-height: calc(3 * 1.5em);
}

.news-card:hover .news-card-title {
  color: var(--bs-purple-dark);
}

/* .text-muted is too light for 15px type on white */
.news-card .text-muted {
  color: #55555f !important;
}

/* ----------------------small screens---------------------- */
@media (max-width: 991.98px) {
  .leap-header {
    min-height: 0;
  }

  /* In flow at the foot of the masthead rather than hung off it — but
     relative, not static, so z-index still counts and the card paints above
     the cover's scrim instead of under it. inset clears the offsets the
     absolute layout and Bootstrap's start-50 leave behind. */
  .news-header-overlay {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    margin-top: 4rem;
    margin-bottom: -6rem;
  }

  .news-article {
    padding-top: 10rem;
  }
}

@media (max-width: 767px) {
  /* stacked columns: the photo keeps a fixed shape instead of stretching */
  .news-overlay-figure {
    min-height: 0;
  }

  .news-header-overlay .news-overlay-media {
    position: static;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .news-hero {
    border-end-start-radius: 2.4rem;
    border-end-end-radius: 2.4rem;
  }

  .news-hero-inner {
    gap: 1.6rem;
  }

  /* the press photos are supplied at 3:2, so on a phone the hero shows
     them at their own shape and nothing is cropped away */
  .news-shot-hero {
    aspect-ratio: 3 / 2;
    border-radius: 1.6rem;
  }

  .news-shot-hero.news-shot-fallback {
    aspect-ratio: 3 / 2;
    max-height: 26rem;
  }

  .news-shot-hero.news-shot-fallback img {
    width: 14rem;
  }

  .news-shot-gallery {
    height: 30rem;
  }

  .news-note {
    padding: 1.8rem;
  }

  .news-back {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 575px) {
  .news-shot {
    border-radius: 1.6rem;
  }

  .news-card {
    border-radius: 1.6rem;
  }

  .news-card-body {
    padding: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-card,
  .news-read-more,
  .news-headline-link,
  .news-back,
  .news-back-icon {
    transition: none;
  }

  .news-card:hover,
  .news-back:hover .news-back-icon,
  .news-back:focus-visible .news-back-icon {
    transform: none;
  }
}

/* -------------------our-services------------------- */
.services-header {
  background: url(../assets/images/services-hero-bg.webp) no-repeat center center;
  background-size: cover;
  height: 25rem;
}

.line-x {
  border-top: 1px solid var(--bs-gray-700);
}

/* The same card as on the home page, but standing on its own rather than
   in the stack: home.css parks each one with position:sticky and a
   negative z-index so the next card slides over it, which on a page with
   a single card would only push it behind the background. */
.service-card {
  position: relative;
  z-index: 0;
  height: auto;
  min-height: 41rem;
}

/* The artwork sits on one side of every service render, so the copy keeps
   to the other half instead of running across the picture. */
.service-card .about-card-desc {
  max-width: min(100%, 55rem);
}

@media (max-width: 767px) {
  .service-card {
    min-height: 0;
    gap: 2.4rem;
    /* the extra foot is clearance for the artwork band home.css puts along the
       bottom edge at this width — see feedback item 40 */
    padding: 2.4rem 2.4rem 13rem !important;
  }

  .services-header {
    height: 20rem;
  }
}

/* ---------------------- certifications page ---------------------- */
.cert-card {
  border: 1px solid var(--bs-gray-600);
  border-radius: 2.4rem;
  background-color: var(--bs-white);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.cert-card:hover {
  transform: translateY(-4px);
  border-color: var(--bs-purple-dark);
  box-shadow: 0 1.2rem 3rem rgba(46, 46, 110, 0.15);
}

.cert-card img {
  width: 11rem;
  height: 11rem;
  object-fit: contain;
}

.cert-note {
  border: 1px solid var(--bs-gray-600);
  border-radius: 2.4rem;
  background-color: var(--bs-gray-100);
}

@media (prefers-reduced-motion: reduce) {
  .cert-card {
    transition: none;
  }

  .cert-card:hover {
    transform: none;
  }
}

@media (max-width: 575px) {
  .cert-note .submit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------- privacy policy, terms of use, FAQ ---------------------- */
.legal-content,
.faq-list,
.faq-note {
  max-width: 96rem;
}

.legal-section + .legal-section {
  margin-top: 4rem;
}

.legal-section h2 {
  margin-bottom: 1.6rem;
}

/* main.css strips list styling site-wide; running text needs its bullets back. */
.legal-section ul,
.faq-answer ul {
  list-style: disc;
  padding-inline-start: 2.4rem;
  margin-bottom: 1.6rem;
}

.legal-section li + li,
.faq-answer li + li {
  margin-top: 0.8rem;
}

/* Links default to white site-wide (they mostly sit on the purple header). */
.legal-section a,
.faq-answer a {
  color: var(--bs-purple-dark);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.faq-item {
  border: 1px solid var(--bs-gray-600);
  border-radius: 1.6rem;
  background-color: var(--bs-white);
  transition: border-color 0.3s ease;
}

.faq-item[open] {
  border-color: var(--bs-purple-dark);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 2rem 2.4rem;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../assets/icons/arrow-down.svg) center / contain no-repeat;
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 2.4rem 2.4rem;
}

.faq-answer > :last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item summary::after {
    transition: none;
  }
}

/* LEAP 2026 agreements: one story per signing, each with its own photo. */
.news-agreement + .news-agreement {
  padding-top: 4rem;
  border-top: 1px solid var(--bs-gray-300);
}

.news-article-figure img {
  width: 100%;
  height: auto;
  border-radius: 2.4rem;
}