/* Earnings Quality detail page --------------------------------------- */
.earnings-overview {
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 7vw, 6.5rem) 6vw;
  padding-top: 40px;

  background: #fff;
  color: #3f4146;
}

.earnings-overview__inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.earnings-overview__accent {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1.25rem;
}

.earnings-overview__accent span {
  display: block;
  height: 10px;
  border-radius: 999px;
}

.earnings-overview__accent span:nth-child(1) {
  width: 54px;
  background: #4fc3e7;
}

.earnings-overview__accent span:nth-child(2) {
  width: 14px;
  background: #8bc751;
}

.earnings-overview__accent span:nth-child(3) {
  width: 14px;
  background: #ffcb05;
}

.earnings-overview__copy p,
.earnings-metric__copy {
  font-family: var(--font-body);
  font-size: 16px;
}

.earnings-overview__copy p {
  margin: 0 0 1.4rem;
  line-height: 1.55;
}

.earnings-overview__copy p:last-child {
  margin-bottom: 0;
}

.earnings-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: 50px;
}

.earnings-metric {
  margin: 0;
}

.earnings-metric__value {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  color: #0754a5;
}

.earnings-metric__value small {
  font-size: 0.65em;
  font-weight: 700;
}

.earnings-metric__copy {
  margin: 0;
  line-height: 1.45;
}

.earnings-metric__copy strong {
  font-weight: 700;
}

.earnings-metric__heading {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: #0754a5;
}

.operational-recognitions {
  padding-top: 40px;
}

.operational-recognitions__title {
  margin: 0 0 2rem;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: #1b2733;
}

.operational-recognitions__grid {
  display: block;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
}

.operational-recognitions__grid p {
  position: relative;
  margin: 0;
  padding-top: 1rem;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  color: #3f4146;
  padding-bottom: 20px;
}

.operational-recognitions__grid p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 5px;
  border-radius: 999px;
  background: #4fc3e7;
}

.operational-recognitions__grid sup {
  font-size: 0.7em;
}

@media (max-width: 860px) {
  .earnings-metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
  }

  .operational-recognitions__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 560px) {
  .earnings-overview {
    padding-inline: 7vw;
  }
}

/* New Platforms page ---------------------------------------------------
   Only this page uses .np-split: banner and copy side by side in a
   col-xl-6 pair instead of the stacked hero + full-width overview the
   other report pages share. It carries its own top padding because it
   replaces .abt-hero as the first thing in <main>, and the site nav is
   fixed -- without it the heading would start underneath the nav pills.
   The grid classes themselves come from about.css, which this page
   already loads. */
.np-split {
  position: relative;
  z-index: 1;
  padding: clamp(110px, 13vh, 156px) 0 clamp(3.5rem, 7vw, 6rem);
  background: #fff;
  color: #3f4146;
}

.np-split__row {
  align-items: stretch;
  row-gap: 2.5rem;
}

.np-split__banner {
  position: relative;
  height: 100%;
  min-height: min(60vh, 520px);
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
}

.np-split__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* same off-centre framing .abt-hero__media used for this photo */
  object-position: 70% 30%;
}

/* graded from the bottom-left so the title has contrast without
   flattening the whole photograph -- mirrors .abt-hero__scrim */
.np-split__banner-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(75deg, rgba(12, 32, 24, 0.82) 0%, rgba(12, 32, 24, 0.45) 42%, rgba(12, 32, 24, 0.05) 72%),
    linear-gradient(0deg, rgba(12, 32, 24, 0.6) 0%, rgba(12, 32, 24, 0) 55%);
}

.np-split__banner-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.np-split__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* flat 28px, not a fluid clamp -- one size across every .np-split
     banner so these pages read as a set, and short enough that even the
     longest title still fits inside the photo at phone width. */
  font-size: 28px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.np-split__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.np-split__lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

.np-split__items {
  display: grid;
  gap: 1.6rem;
  margin-top: 2rem;
}

/* .earnings-metrics is a 3-across grid where it sits full width; inside a
   half-width column three tracks leave ~10 characters per line, so it
   stacks here instead. Same markup, different container. */
.np-split .earnings-metrics {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  margin-top: 2rem;
}

/* ...except these two, which go back to two-up inside the column. Their
   entries are a short number plus a one-line label (Operational) or a
   label plus a single revenue line (CDMO), so they don't need the full
   column width the earnings/investment pages' longer copy does -- and at
   five and four entries, a single stack ran far past the banner beside
   it. Keyed off the modifiers the markup already carried. */
.np-split .earnings-metrics--operational,
.np-split .earnings-metrics--cdmo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 1.8rem;
}

@media (max-width: 560px) {
  .np-split .earnings-metrics--operational,
  .np-split .earnings-metrics--cdmo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- pinned variant (Earnings Quality) --------------------------------
   The banner drops all the forced sizing the shared .np-split__banner
   applies -- no 100% height, no min-height, no cover crop -- and is just
   the image at its own aspect ratio. It then sticks in place while the
   column beside it scrolls past.

   Sticky works here because the two columns are flex siblings under
   .np-split__row's default `align-items: stretch`: the photo's COLUMN
   still stretches to the full row height (as tall as the copy), which is
   the travel the figure sticks within, while the figure itself is only
   as tall as the photo. Switching the row to flex-start would collapse
   that column and kill the effect. */
.np-split--pinned .np-split__banner {
  position: sticky;
  /* --nav-height is measured by setNavHeightVar() in hero.js; the 141px
     fallback is the same one .site-nav__mega uses */
  top: calc(var(--nav-height, 141px) + 24px);
  height: auto;
  min-height: 0;
}

.np-split--pinned .np-split__banner img {
  height: 480px;
}

/* copy starts level with the top of the photo rather than centring
   against it -- with the photo pinned there is no fixed pairing to
   centre against */
.np-split--pinned .np-split__content {
  justify-content: flex-start;
}

/* Enabling Pillars opts back into centring (it is the only page using
   this). Its column holds just the chip, the dots and one paragraph
   against a tall banner, so top-aligned it sat in the upper third with
   the rest of the column empty; centred, the block reads as paired with
   the photo. Pages with metric tiles below stay top-aligned -- they fill
   the column on their own. */
.np-split--center .np-split__content {
  justify-content: center;
}

/* The figures follow the copy immediately -- no reserved height. Earlier
   passes forced the intro to fill the viewport so the tiles started below
   the fold, but now that the banner has a set height that reservation is
   what produced the empty stretch under the paragraphs: the copy was
   being held a full screen tall against an image only as tall as its own
   height. Flowing naturally means the first few figures sit alongside the
   image, filling the column to roughly its height, and whatever runs past
   that arrives on scroll with the stagger below -- which is the same
   effect, without the hole. */
.np-split--pinned .earnings-metrics {
  margin-top: 2rem;
}

/* staggered so they arrive one after another rather than as a block --
   same per-item transition-delay approach used for the chip grids in
   main.css */
.np-split--pinned .earnings-metric:nth-child(1) { transition-delay: 0.05s; }
.np-split--pinned .earnings-metric:nth-child(2) { transition-delay: 0.18s; }
.np-split--pinned .earnings-metric:nth-child(3) { transition-delay: 0.31s; }
/* Operational carries five and CDMO four, so the ramp runs past three */
.np-split--pinned .earnings-metric:nth-child(4) { transition-delay: 0.44s; }
.np-split--pinned .earnings-metric:nth-child(5) { transition-delay: 0.57s; }
.np-split--pinned .earnings-metric:nth-child(6) { transition-delay: 0.70s; }

@media (max-width: 999px) {
  /* No positioning at all once the columns stack -- the figure is a plain
     block in normal flow, which is what makes overlap impossible: an
     unpositioned box cannot paint over the column below it.

     This is only safe because the caption and scrim below are taken out
     of absolute positioning at this width too. An earlier pass set
     `static` here while they were still absolute, and they fell back to
     the section as their containing block -- the scrim covered the whole
     column and the title landed on the metrics. Keep those three rules
     together: dropping `position` here depends on them. */
  .np-split--pinned .np-split__banner {
    position: static;
  }
  /* nothing to centre against once the columns stack -- the copy just
     follows the photo down the page */
  .np-split--center .np-split__content {
    justify-content: flex-start;
  }
}


/* Chapter chip at the head of the copy column (Enabling Pillars is the
   only page with one). It used to sit inside .np-split__banner-caption
   over the photo, directly above the title -- two stacked labels on one
   image, competing. Here it reads as the column's own heading, with the
   accent dots following it. */
.np-split__eyebrow {
  margin: 0 0 1.1rem;
}

/* The banner carries a second copy of the chip for the stacked layout
   (see the comment on it in the markup). Hidden by default -- on desktop
   the copy column's chip is the one that shows, and this one would sit
   back on the photograph where it used to compete with the title. */
.np-split__eyebrow--onmedia {
  display: none;
}

@media (max-width: 999px) {
  /* Below about.css's xl breakpoint both columns are full width, so the
     banner just stacks above the copy at the photo's own height. */
  .np-split__banner { height: auto; min-height: 0; aspect-ratio: auto; }
  .np-split__content { justify-content: flex-start; }

  /* The title drops out of the photo and sits under it once stacked.
     Overlaying it here was the whole source of the image-over-copy
     trouble: the caption is position:absolute on desktop, which needs the
     figure to be a positioned box of a known height, and any disagreement
     between that box and the image inside it put white text on white
     background or let the figure paint over the column below. Nothing in
     this stacked layout is positioned -- the photo takes its own height,
     the title follows it, the copy follows that. */
  /* the --pinned selector has to be repeated here: the desktop rule
     `.np-split--pinned .np-split__banner img { height: 480px }` is more
     specific than a bare `.np-split__banner img`, so a plain override
     loses and the photo stays 480px tall. At phone width that is a
     ~290px-wide box holding a 480px-tall image, and object-fit: cover
     crops the landscape shot down to a narrow portrait sliver. */
  .np-split__banner img,
  .np-split--pinned .np-split__banner img {
    height: auto;
  }

  .np-split__banner-scrim { display: none; }

  .np-split__banner-caption {
    position: static;
    padding: 16px 0;
  }

  /* dark type now that it is on the page background, not the photograph */
  .np-split__title {
    color: var(--brand-blue);
    text-shadow: none;
  }

  /* Chip ahead of the title: show the banner's copy, drop the copy
     column's. Swapping which one displays is what puts the label first
     without ever duplicating it on screen.

     Scoped to --chip-first rather than applied to every .np-split: About
     Us carries a chip in its copy column too but has no banner copy to
     swap in, so an unscoped rule would just delete its chip on mobile. */
  .np-split--chip-first .np-split__eyebrow--onmedia {
    display: inline-flex;
  }

  .np-split--chip-first .np-split__content .np-split__eyebrow {
    display: none;
  }
}

/* Enabling Pillars page ------------------------------------------------ */
.pillars-map {
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 7vw, 6rem) 6vw;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 40px;
}

.pillars-map__inner {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
      padding: 50px 10px;
  border: 1.5px solid #0754a5;
  border-radius: 60px;
}

/* the title is a pill notched into the top edge of the outlined box */
.pillars-map__title {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: min(440px, 70%);
  margin: 0;
  padding: 0.7rem 2rem;
  border: 1.5px solid #0754a5;
  border-radius: 999px;
  background: #fff;
  color: #0754a5;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* six tracks, each item spanning two: 3 across the first row, then items
   4 and 5 offset one track in on each side so the short second row
   centres under the first */
/* All five in one row. This was a 6-track grid with each item spanning
   two, which wrapped 3 + 2 with the second row offset to centre it --
   five equal columns instead, so they read as one set.
   gap: 0 because the dividers below do the separating; a gutter would
   leave each rule floating in the middle of empty space rather than
   marking the edge between two items. */
.pillars-map__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pillars-map__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(0.5rem, 1.5vw, 1.2rem) clamp(0.5rem, 1.2vw, 1rem);
  border-left: 1px solid rgba(7, 84, 165, 0.22);
}

/* the divider sits on each item's leading edge, so whichever item starts
   a row drops it -- otherwise the grid picks up a stray rule down its
   outer left side. One row here, so that is just the first. */
.pillars-map__item:first-child {
  border-left: none;
}


.pillars-map__item h3 {
  margin: 0.9rem 0 0;
  color: #1b2733;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
}

.pillar-icon-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 2px dashed #0754a5;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  color: #0754a5;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.pillar-icon-placeholder--large {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  font-size: 18px;
}

.pillar-icon {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.pillar-icon--large {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
}

/* --- the five pillars, tabbed ------------------------------------------
   Replaces five stacked .pillar-detail sections (the markup that fed this
   is gone; the .pillar-detail__* rules below still style what is now the
   panel BODY -- subheadings, copy, figures -- so they stay). */
.pillar-tabs {
  position: relative;
  z-index: 1;
  padding: 0 6vw 40px;
  background: #fff;
}

.pillar-tabs__inner {
  max-width: 1500px;
  margin: 0 auto;
}

/* the strip wraps rather than scrolls -- five labels of very different
   lengths ("Sustainability" against "World-Class Safe Operations") would
   need horizontal scrolling to stay on one line, and a scrolled tab strip
   hides its own options */
.pillar-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

/* The strip (pills on desktop, the select on phones) pins to the top while
   its panel scrolls, so the other four pillars stay one click away anywhere
   in a panel -- the longest of them runs several screens. Offset by the
   JS-measured --nav-height so it parks under the fixed nav rather than
   behind it; the .site-nav--hidden rule closes that gap when the nav
   auto-hides on scroll down. z-index stays under the nav's own 20 and the
   mega panels' 19 so an open dropdown still covers it. */
.pillar-tabs__bar {
  position: sticky;
  top: calc(var(--nav-height, 141px) + 10px);
  z-index: 6;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: clamp(0.8rem, 2vw, 1.3rem) 0;
  transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* panel content scrolls behind the strip, so it needs an opaque backdrop.
   A 100vw pseudo-element gives it a full-bleed one without breaking the
   max-width inner it sits in. */
.pillar-tabs__bar::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: -1;
}

/* nav gone (scrolling down) -- the strip takes its place at the top edge */
.site-nav--hidden ~ main .pillar-tabs__bar {
  top: 10px;
}

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

/* same outlined pill the section headings used, so the set reads as the
   same device it replaced. Label only -- the icon moved into the panel,
   which also evens out the pill widths. */
.pillar-tabs__tab {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.6rem;
  border: 1.5px solid #0754a5;
  border-radius: 999px;
  background: #fff;
  color: #0754a5;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pillar-tabs__tab:hover {
  background: #eff9ff;
}

.pillar-tabs__tab.is-active {
  background: #0754a5;
  color: #fff;
  box-shadow: 0 8px 20px rgba(7, 84, 165, 0.18);
}

/* The pillar's icon opens its panel, above the accent dots -- it used to
   sit inside the tab button, which made the five pills very different
   widths and needed inverting to stay visible on the filled one. At panel
   size the line art actually reads. */
.pillar-detail__icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 1.1rem;
  object-fit: contain;
}

.pillar-tabs__panel {
  display: none;
}

.pillar-tabs__panel.is-active {
  display: block;
}

/* the phone control -- hidden until the pills give way to it below */
.pillar-tabs__select {
  display: none;
  width: 100%;
  padding: 0.85rem 2.6rem 0.85rem 1.3rem;
  border: 1.5px solid #0754a5;
  border-radius: 999px;
  background-color: #fff;
  /* chevron drawn inline rather than pulled from a file, so this needs no
     new asset and inherits nothing from the UA's own select styling */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230754a5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 18px 18px;
  color: #0754a5;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
}

@media (max-width: 760px) {
  /* five pills wrap to three ragged rows at this width and eat most of the
     first screen, so the strip gives way to the select */
  .pillar-tabs__list {
    display: none;
  }

  .pillar-tabs__select {
    display: block;
  }
}

.pillar-detail {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 8vw, 7rem) 6vw;
  padding-top: 0px;
  padding-bottom: 40px;
  background: #fff;
}


.pillar-detail__inner {
  max-width: 1500px;
  margin: 0 auto;
}

.pillar-detail__header {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-bottom: 1.5rem;
}

.pillar-detail__title {
  display: inline-block;
  min-width: fit-content;
  margin: 0;
  padding: 0.7rem 2rem;
  border: 1.5px solid #0754a5;
  border-radius: 999px;
  color: #0754a5;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
}

.pillar-detail__content {
  margin-top: 2rem;
}

.pillar-detail__subheading {
  margin: 2.2rem 0 0.45rem;
  color: #0754a5;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.pillar-detail__subheading:first-child { margin-top: 0; }

.pillar-detail__content p {
  margin: 0 0 1.25rem;
  color: #252d35;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

/* Lightweight WOW-compatible entrance behavior. The HTML uses the
   requested `wow fadeInUp` classes; hero.js adds `animated` on entry. */
html.js .wow {
  visibility: hidden;
  opacity: 0;
}

html.js .wow.animated {
  visibility: visible;
}

html.js .wow.animated.fadeInUp {
  animation: pillarFadeInUp 0.8s ease both;
}

@keyframes pillarFadeInUp {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}

/* zoom entrance for the pillar icons -- scales up from 60% as it fades,
   using the `scale` property to match how pillarFadeInUp uses `translate`
   (neither touches `transform`, so the two could be combined on one
   element without one clobbering the other) */
html.js .wow.animated.zoomIn {
  animation: pillarZoomIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pillarZoomIn {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}

/* left-to-right ripple rather than five icons popping at once -- the
   observer marks them all `animated` in the same frame, so the stagger
   has to come from the delay */
.pillars-map__item:nth-child(1) .pillar-icon { animation-delay: 0.05s; }
.pillars-map__item:nth-child(2) .pillar-icon { animation-delay: 0.15s; }
.pillars-map__item:nth-child(3) .pillar-icon { animation-delay: 0.25s; }
.pillars-map__item:nth-child(4) .pillar-icon { animation-delay: 0.35s; }
.pillars-map__item:nth-child(5) .pillar-icon { animation-delay: 0.45s; }

@media (max-width: 760px) {
  .pillars-map,
  .pillar-detail {
    padding-inline: 7vw;
  }

  .pillars-map__inner {
    padding-top: 4.5rem;
    border-radius: 34px;
  }

  .pillars-map__title {
    min-width: 80%;
    padding-inline: 1rem;
  }

  /* five tracks are far too narrow for a two-word label on a phone, so it
     drops to two per row */
  .pillars-map__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 1, 3 and 5 start a row now, so they lose the left divider; everything
     from the second row down gains a top one. The fifth sits alone, so it
     takes the full width rather than half a row beside an empty cell --
     and with no neighbour to its left it needs no rule either. */
  .pillars-map__item:nth-child(odd) { border-left: none; }
  .pillars-map__item:nth-child(even) { border-left: 1px solid rgba(7, 84, 165, 0.22); }
  .pillars-map__item:nth-child(n + 3) { border-top: 1px solid rgba(7, 84, 165, 0.22); }
  .pillars-map__item:last-child { grid-column: 1 / -1; }

  .pillar-detail__header {
    align-items: flex-start;
  }

  .pillar-detail__title {
    min-width: 0;
    width: 100%;
    padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .wow,
  html.js .wow.animated {
    visibility: visible;
    opacity: 1;
    animation: none;
    transform: none;
    /* the two keyframe sets animate `translate` and `scale` rather than
       `transform`, so resetting transform alone would leave an icon
       stuck at 0.6 scale here */
    translate: none;
    scale: none;
  }
}

/* Exact section rhythm requested for the Safe Operations block. The
   section owns no horizontal padding; alignment stays on its inner box. */
.pillar-detail.pillar-detail--compact {
  padding: 0 0 40px;
}

.pillar-detail--compact .pillar-detail__inner {
  padding-inline: 6vw;
}

.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 22px;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* image on top, caption underneath -- the card used to be a fixed-height
   box with the photo absolutely filling it and the caption floated over
   the bottom of the shot. Normal flow now, so the caption sits below the
   image and the card grows to whatever its text needs. */
.facility-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #eef3f6;
}

.facility-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  /* the photo keeps the proportions the old fixed 290px box gave it,
     rather than each card being a different height by image */
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1.5px dashed rgba(7, 84, 165, 0.45);
  background:
    linear-gradient(135deg, rgba(79, 195, 231, 0.12), rgba(139, 199, 81, 0.12)),
    #edf3f6;
  color: rgba(7, 84, 165, 0.72);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facility-card__media--image {
  border: 0;
  background: #edf3f6;
}

.facility-card__media--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* flex:1 so every caption in a row matches height, keeping the gradient
   blocks aligned even where one facility's description wraps to an extra
   line. The rounded right end goes with it -- that shape read as a tag
   pinned to a photo; below the image a full-width band sits better. */
.facility-card__caption {
  flex: 1;
  padding: 0.8rem 1.1rem 0.9rem;
  background: linear-gradient(90deg, rgba(255, 203, 5, 0.95) 0%, rgba(77, 197, 224, 0.9) 100%);
}

.facility-card__caption h3 {
  margin: 0 0 0.18rem;
  color: #111;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.facility-card__caption p {
  margin: 0;
  color: #111;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
}

.pillar-detail__content--continued {
  margin-top: 40px;
}

@media (max-width: 980px) {
  .facilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .facilities-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* one per row, so the photo can be shallower without looking cropped */
  .facility-card__media {
    aspect-ratio: 16 / 9;
  }
}

/* ESG highlights and ratings ----------------------------------------- */
.esg-highlights {
  margin-top: 40px;
}

.esg-highlights__title {
  display: inline-block;
  margin: 0 0 2rem;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd54a 0%, #73d4ee 100%);
  color: #111;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.esg-highlights__band-title {
  margin: 0 0 0.25rem;
  color: #111;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.esg-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: 2rem;
  padding: clamp(1.6rem, 3vw, 2.5rem) 0.2rem 1.6rem 0;
  border-top: 2px solid #79c84b;
  border-right: 2px solid #79c84b;
  border-radius: 0 28px 0 0;
}

.esg-band--social {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-color: #f5bd00;
}

.esg-band--ratings {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.esg-stat { min-width: 0; }
.esg-stat--wide { grid-column: 1 / -1; }

.esg-stat__value {
  margin: 0 0 0.45rem;
  color: #0754a5;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
}

.esg-stat__value small { font-size: 0.55em; }

.esg-stat__label,
.esg-stat__kicker,
.esg-stat__award {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
}

.esg-stat__label,
.esg-stat__kicker {
  color: #111;
  font-weight: 600;
}

.esg-stat__kicker { margin-bottom: 0.7rem; }

.esg-stat__award {
  margin-bottom: 0.2rem;
  color: #0754a5;
  font-size: 20px;
  font-weight: 700;
}

.esg-rating h4 {
  margin: 0 0 0.7rem;
  color: #c773b4;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.esg-rating p {
  margin: 0 0 0.3rem;
  color: #111;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
}

.esg-rating__score {
  padding-bottom: 0.35rem;
  border-bottom: 4px solid #c773b4;
  color: #c773b4 !important;
  font-size: 24px !important;
  font-weight: 700;
}

.esg-rating__percentile {
  padding-bottom: 0.45rem;
  border-bottom: 4px solid #c773b4;
  text-align: right;
}

.esg-rating sup { font-size: 0.68em; }

.esg-highlights__note {
  margin: -0.4rem 0 0;
  color: #111;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .esg-band,
  .esg-band--social,
  .esg-band--ratings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .esg-band,
  .esg-band--social,
  .esg-band--ratings {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}
.np-split.np-split--pinned.np-split--center.pb20{
  padding-bottom: 20px;
}