/*
  FuelChief look, layer 4 (FC-1; map sections 3.A and 7): section touches from the old site's CSS bundle (capture
  raw/bundle.css): the grey shield beside the capabilities (.bg-grey-shield: 609 px, 152 px off the left, half strength
  and centred below 1200 px, gone below 576 px), the red shield behind the 9 steps (.bg-red-shield: 609 x 690 px at the
  bottom right, clipped so nothing scrolls sideways, plan answer 2; centred at half strength below 992 px, gone below
  768 px), small red shields as list ticks, and the sticky intro 150 px from the top (MB-112 hooks: header 80 px + gap 70 px).
*/
.feature-grid__artwork {
  inset: 0 auto 0 -152px;
  width: 609px;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: url("/images/site/shield-large.svg") left center / contain no-repeat;
}
@media (max-width: 1199.98px) {
  .feature-grid__artwork { inset: 0 30px; width: calc(100% - 60px); background-position: center; opacity: 0.5; }
}
@media (max-width: 575.98px) { .feature-grid__artwork { display: none; } }

.steps--sticky-intro {
  --steps-sticky-gap: 70px; /* under the 80 px header: the intro holds 150 px from the top, as the old site */
  position: relative;
  overflow: clip; /* clips the shield without breaking the sticky intro (hidden would) */
}
.steps--sticky-intro::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -152px;
  bottom: 0;
  width: 609px;
  height: 690px;
  background: url("/images/site/shield-red.svg") right bottom / contain no-repeat;
  pointer-events: none;
}
.steps--sticky-intro .steps__inner { position: relative; z-index: 1; }
@media (max-width: 991.98px) {
  .steps--sticky-intro::before { inset: 0; width: 100%; height: 100%; background-position: center; background-size: 609px 690px; opacity: 0.5; }
}
@media (max-width: 767.98px) { .steps--sticky-intro::before { display: none; } }

/* Red shield ticks (16 x 14 px, the old site's artwork) instead of dots; 30 px in, no space between the lines. */
.image-text__bullets li::before, .rich-text ul li::before {
  top: 3px;
  width: 16px;
  height: 14px;
  border-radius: 0;
  background: url("/images/site/small-shield.svg") center / contain no-repeat;
}
.image-text__bullets li { padding-left: 30px; }
.image-text__bullets li + li, .image-text--long-list .image-text__bullets li + li { margin-top: 0; }
.image-text--long-list .image-text__bullets { line-height: 1.25; }

/* Image and text (capture: .panel-text-image, 1440 px): photo 570 x 386 px, 100 px gap, the text column 570 px; label
   navy, heading 35 px, text in near-black; the button 25 px under the list. */
@media (min-width: 1024px) {
  .image-text .image-text__inner { gap: 100px; }
}
/* the old 960 x 650 crop is master's Photo shape (MB-148) on the sections that had it; the rest keep the old box */
.image-text :is(.image-text__media img, .image-text__img) { border-radius: 0; }
.image-text:not([class*="image-text--shape-"]) :is(.image-text__media img, .image-text__img) { aspect-ratio: 570 / 386; }
.image-text .image-text__text { color: var(--c-black); }
.image-text .image-text__bullets { color: var(--c-black); }

/* Timed hero (capture: the old .block--timed-banner): the slide fills the window under the fixed header; title 65 px
   (46 px below 576 px) weight 800 in light grey across 960 px, the lead text 20 px (19 px below 1200, 18 px below 576)
   in a 580 px column, the button 40 px below it. */
.hero--slides-own .hero__slide-body { max-width: 960px; padding: 64px 0; }
@media (max-width: 1199.98px) { .hero--slides-own .hero__slide-body { max-width: none; padding-inline: 50px; } }
@media (max-width: 575.98px) { .hero--slides-own .hero__slide-body { padding-inline: 25px; } }
.hero--slides-own .hero__slide-title { color: #eeeeee; font-weight: 800; letter-spacing: -2%; line-height: 1.15; }
.hero--slides-own .hero__slide-text {
  max-width: 580px;
  margin-top: 47px;
  color: #eeeeee;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -1%;
}
@media (max-width: 1199.98px) { .hero--slides-own .hero__slide-text { font-size: 1.1875rem; } }
@media (max-width: 575.98px) { .hero--slides-own .hero__slide-text { max-width: none; font-size: 1.125rem; } }
.hero--slides-own .hero__slide .hero__action { margin-top: 44px; }
.hero--slides-own .hero__slide-title .hero__highlight { display: block; }
/* The old navy layer over each slide (rgba(45, 48, 63, 0.8)) and its progress tabs: 16 px capitals weight 800, grey,
   the current one light grey; the bar fills red. */
.hero.hero { --hero-overlay: rgba(45, 48, 63, 0.8); }
.hero .carousel.hero__carousel.has-tabs { --carousel-tab-text: #7c868d; --carousel-tab-current-text: #eeeeee; --carousel-tab-line: #eeeeee; }
.hero .carousel__tab-label { font-size: 1rem; font-weight: 800; letter-spacing: -2%; }

/* Big number panel (capture: .panel-sticky-content.large-number and its columns, 1440 px): the intro in a 370 px column at
   the left, "500+" 190 px weight 800 with its caption and red rule in a 370 px column at the right; the case-study card
   470 x 282 px under the intro, the four numbers (65 px) two by two under "500+"; 150 px between the rows. */
.stats--big {
  --stats-big-heading-fs: 1.25rem;
  --stats-big-heading-fw: 500;
  --stats-big-heading-lh: 1.25;
  --stats-big-heading-ls: -1%;
  --stats-big-text-space: 20px;
  --stats-big-para-space: 20px;
  --stats-big-para-lh: 1.25;
  --stats-big-figure-fs: 190px;
  --stats-big-figure-fs-mid: 190px;
  --stats-big-figure-fs-phone: 125px;
  --stats-big-stat-fs-phone: 2.8125rem;
  --stats-big-heading-fs-phone: 1.125rem;
  --stats-big-figure-lh: 0.93;
  --stats-big-figure-ls: -2%;
  --stats-big-stat-fs: 4.0625rem;
  --stats-big-stat-lh: 1.15;
  --stats-big-card-h: 282px;
  --stats-big-card-w: 470px;
  --stats-big-card-pad: 30px;
  --stats-big-card-label-fs: 0.8125rem;
  --stats-big-card-text-fs: 1.625rem;
  --stats-big-card-text-lh: 1.15;
  --stats-big-card-text-ls: -4%;
  --stats-big-rule: var(--fc-red);
  color: #e1dfdf;
}
.stats--big .stats__big-heading,
.stats--big .stats__big-figure,
.stats--big .stats__big-stat-figure { color: #e1dfdf; }
.stats--big .stats__big-figure,
.stats--big .stats__big-stat-figure,
.stats--big .stats__big-card-text { font-weight: 800; }
.stats--big .stats__big-figure-text { padding: 40px 0 30px; }
.stats--big .stats__big-stat { gap: 6px; padding-bottom: 30px; }
@media (min-width: 1200px) {
  .stats--big .stats__big-inner {
    grid-template-columns: 370px minmax(0, 1fr) 370px;
    grid-template-areas: "intro . number" "card . list";
    gap: 150px 0; /* row 2 at the old 605 px under the 288 px number block */
  }
  .stats--big .stats__big-list { gap: 50px; }
}

/* Client logo row (capture: .gallery-image-marquee): white, 15 px above and below an 80 px row (the logos keep their size). */
.logo-strip.logo-strip { padding: 15px 0; --logo-strip-logo-height: 80px; } /* FC-FIX2: the old logos up to 80 px tall (120 x 80) */
.logo-strip .logo-strip__item { height: 80px; }

/* Industry Solutions photo cards (capture: .panel-content-featurebox.industry-solutions): pale grey band, 60 px above the
   centred heading, cards 210 px high with 25 px between, the photo under a 30 % black layer, the industry's white icon
   (40 px, the old site's artwork, matched by the card's link), its name 22 px weight 800 and LEARN MORE in capitals on a
   150 px light underline, 30 px in from the edges. */
.feature-grid--photo-cards { padding-top: 60px; background: var(--c-grey-100); }
.feature-grid--photo-cards .feature-grid__head { max-width: none; margin-bottom: 50px; text-align: center; }
.feature-grid--photo-cards .feature-grid__list { gap: 25px 25px; }
.feature-grid--photo-cards .feature-grid__item { min-height: 210px; height: 210px; aspect-ratio: auto; }
/* from 1200 px the old cards are 211.6 px high (their content's height; edges 150/361 and 386/598 at 1440), and the
   wide Infrastructure card's photo sits 1 px lower than a centred cover (the old site's crop point) */
@media (min-width: 1200px) {
  .feature-grid--photo-cards .feature-grid__item { min-height: 211.6px; height: 211.6px; }
  .feature-grid--photo-cards .feature-grid__item:has(a[href$="/infrastructure/"]) .feature-grid__media-image { object-position: 50% calc(50% + 1px); }
}
.feature-grid--photo-cards .feature-grid__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.feature-grid--photo-cards .feature-grid__body {
  align-self: stretch;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 30px;
  background: none;
}
.feature-grid--photo-cards .feature-grid__body::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 22px; /* the old title 104 px under the card's top (FC-SYNC1 measure) */
  background: center / contain no-repeat;
}
.feature-grid--photo-cards .feature-grid__item:has(a[href$="/health/"]) .feature-grid__body::before { background-image: url("/images/site/industry-health.svg"); }
.feature-grid--photo-cards .feature-grid__item:has(a[href$="/data-centres/"]) .feature-grid__body::before { background-image: url("/images/site/industry-data.svg"); }
.feature-grid--photo-cards .feature-grid__item:has(a[href$="/infrastructure/"]) .feature-grid__body::before { background-image: url("/images/site/industry-infrastructure.svg"); }
/* FC-CHANGES2 (answer 4 b): "Shade behind the words" (master FC-MFIX10) on these Industry photo cards. Master's shade layer
   is the words box's ::before, which this site uses for the industry icon above; with a shade level set, the icon moves to
   ::after in the same place (30 px in, 40 px square, the title 22 px under it) and ::before is master's layer again.
   Off (no shade class): unchanged. */
.feature-grid--photo-cards:is(.feature-grid--shade-light, .feature-grid--shade-medium, .feature-grid--shade-strong) .feature-grid__body { padding-top: 92px; }
.feature-grid--photo-cards:is(.feature-grid--shade-light, .feature-grid--shade-medium, .feature-grid--shade-strong) .feature-grid__item .feature-grid__body::before,
.feature-grid--photo-cards:is(.feature-grid--shade-light, .feature-grid--shade-medium, .feature-grid--shade-strong) .feature-grid__item:has(a[href]) .feature-grid__body::before {
  display: block; inset: 0; width: auto; height: auto; margin: 0; /* inside the card: these cards don't clip */
  background: linear-gradient(to top, var(--fg-text-shade) calc(100% - var(--fg-shade-fade, 3rem)), transparent);
}
.feature-grid--photo-cards:is(.feature-grid--shade-light, .feature-grid--shade-medium, .feature-grid--shade-strong) .feature-grid__body::after {
  content: ""; position: absolute; top: 30px; left: 30px; width: 40px; height: 40px; background: center / contain no-repeat;
}
.feature-grid--photo-cards:is(.feature-grid--shade-light, .feature-grid--shade-medium, .feature-grid--shade-strong) .feature-grid__item:has(a[href$="/health/"]) .feature-grid__body::after { background-image: url("/images/site/industry-health.svg"); }
.feature-grid--photo-cards:is(.feature-grid--shade-light, .feature-grid--shade-medium, .feature-grid--shade-strong) .feature-grid__item:has(a[href$="/data-centres/"]) .feature-grid__body::after { background-image: url("/images/site/industry-data.svg"); }
.feature-grid--photo-cards:is(.feature-grid--shade-light, .feature-grid--shade-medium, .feature-grid--shade-strong) .feature-grid__item:has(a[href$="/infrastructure/"]) .feature-grid__body::after { background-image: url("/images/site/industry-infrastructure.svg"); }
.feature-grid--photo-cards .feature-grid__title { color: #eeeeee; font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: -3%; }
.feature-grid--photo-cards .feature-grid__more {
  align-self: flex-start;
  justify-content: space-between;
  width: 150px;
  margin-top: 34px;
  padding: 0 0 12px;
  border-bottom: 1px solid #eeeeee;
  color: #eeeeee;
  font-size: 0.8125rem;
  text-transform: uppercase;
}
.feature-grid--photo-cards .feature-grid__more-text { font-size: 0.8125rem; font-weight: 700; line-height: 1; }
.feature-grid--photo-cards .feature-grid__arrow { width: 18px; height: 18px; }

/* Capabilities (capture: .content-columns.bg-grey-shield): the intro in a 390 px column, 50 px gap, three cards a row
   (256 px, 16 px apart) in #e1dfdf, centred: the red icon (32 px) 40 px from the top, the name 18 px weight 800, the
   text 14/17.5 px; 55 px below the text. */
.feature-grid--icons.feature-grid--intro-beside { --fg-beside-intro: 390px; --fg-beside-items: 1fr; --fg-beside-gap: 50px; }
.feature-grid--icons .feature-grid__list { gap: 16px; }
.feature-grid--icons .feature-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 20px 55px;
  background: #e1dfdf;
  text-align: center;
}
.feature-grid--icons .feature-grid__icon { --fg-icon-size: 32px; margin: 0; }
.feature-grid--icons .feature-grid__body { margin-top: 4px; gap: 4px; }
.feature-grid--icons .feature-grid__title { font-size: 1.125rem; line-height: 1.15; letter-spacing: -3%; }
.feature-grid--icons .feature-grid__text { font-size: 0.875rem; line-height: 1.25; letter-spacing: -2%; }
.feature-grid--intro-beside .feature-grid__eyebrow + .feature-grid__heading { margin-top: 9px; }
.feature-grid--intro-beside .feature-grid__intro { margin-top: 25px; }
.feature-grid--intro-beside .feature-grid__intro p { margin: 0 0 20px; }

/* Integrated approach (capture: .content-columns.bg-blue.vertical-content.hidden-buttons): the head centred in 960 px,
   the three cards (#ebebeb, navy words, 24 px / 30 px padding, icon 44 px) 11 px apart inside a 1 px red frame, 16 px
   in from it; no Read more line (the old "hidden buttons": the whole card stays the link). */
.feature-grid--icons-bordered .feature-grid__head { max-width: 960px; margin-inline: auto; text-align: center; }
.feature-grid--icons-bordered .feature-grid__eyebrow + .feature-grid__heading { margin-top: 7px; }
.feature-grid--icons-bordered .feature-grid__intro { margin-top: 23px; color: #e1dfdf; }
.feature-grid--icons-bordered .feature-grid__list {
  gap: 11px;
  margin-top: 51px;
  padding: 16px;
  border: 1px solid var(--fc-red);
}
.feature-grid--icons-bordered .feature-grid__item {
  --color-heading: var(--fc-navy);
  --color-text: var(--fc-navy);
  --color-focus: var(--fc-navy);
  --fg-icon-size: 46px; /* FC-FIX5: the old icon is 46 x 46 (capture), the title 13 px under it */
  padding: 24px 30px 22px;
  border: 0;
  background: #ebebeb;
  color: var(--fc-navy);
}
.feature-grid--icons-bordered .feature-grid__body { margin-top: -3px; gap: 21px; }
.feature-grid--icons-bordered .feature-grid__title { color: var(--fc-navy); font-size: 1.125rem; line-height: 1.15; letter-spacing: -3%; }
.feature-grid--icons-bordered .feature-grid__text { font-size: 0.875rem; line-height: 1.25; letter-spacing: -2%; }
.feature-grid--icons-bordered .feature-grid__more { display: none; }
/* old .box-text-title 18/17/16 px (below 992 / 576 px); on phones the old card ends 7 px sooner under its text */
@media (max-width: 991.98px) { .feature-grid--icons-bordered .feature-grid__title { font-size: 17px; } }
@media (max-width: 575.98px) {
  .feature-grid--icons-bordered .feature-grid__title { font-size: 16px; }
  .feature-grid--icons-bordered .feature-grid__item { padding-bottom: 15px; }
}

/* Nine steps (capture: .panel-sticky-content.bg-red-shield, 1440 px): the head in a 430 px column, 50 px gap, the groups
   in a 1 px red frame (15 px / 16 px inside); each group title (40 px icon, 26 px weight 800, pale) 16 px above its row of
   three #ebebeb cards (231 px, 17 px apart, 30 px padding): "1 Assess" on one line (number and name 18 px weight 800,
   numbers without a leading zero), the text 14/17.5 px. */
.steps--sticky-intro {
  --steps-sticky-intro-width: 430px;
  --steps-sticky-column-gap: 50px;
  --steps-number-zero: none;
  --steps-group-space: 18px;
  --steps-group-title-fs: 1.625rem;
  --steps-group-icon-size: 40px;
  --steps-title-fs: 1.125rem;
}
.steps--sticky-intro .steps__eyebrow + .steps__heading { margin-top: 9px; }
.steps--sticky-intro .steps__intro { font-size: 1rem; line-height: 1.25; }
.steps--sticky-intro .steps__groups { padding: 15px 16px 14px; border: 1px solid var(--fc-red); }
.steps--sticky-intro .steps__group-title { gap: 15px; margin-bottom: 16px; color: #fafafa; letter-spacing: -4%; }
.steps--sticky-intro .steps__list { gap: 17px; }
.steps--sticky-intro.steps--numbered .steps__step {
  --color-heading: var(--fc-navy);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: baseline;
  gap: 0;
  padding: 35px 28px 27px 30px;
  border: 0;
  border-radius: 3px;
  background: #ebebeb;
  color: var(--fc-navy);
}
.steps--sticky-intro.steps--numbered .steps__number {
  flex: none;
  margin-right: 5px;
  color: var(--fc-navy);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -3%;
}
.steps--sticky-intro .steps__title { flex: 1 1 0; color: var(--fc-navy); line-height: 1.15; letter-spacing: -3%; }
.steps--sticky-intro .steps__text { flex: 0 0 100%; margin-top: 24px; font-size: 0.875rem; line-height: 1.25; letter-spacing: -2%; }
.steps--sticky-intro .steps__text p { margin: 0; }

/* Case studies (capture: .block__article-slider.single-item): pale grey band, 75 px above the label (18 px), the card in a
   1 px #e1dfdf frame on the band's grey, 20 px inside; the photo beside the text. */
.article-cards { padding-top: 75px; background: var(--c-grey-100); }
.article-cards .article-cards__eyebrow { font-size: 1.125rem; }
.article-cards .article-cards__eyebrow + .article-cards__heading { margin-top: 5px; }
.article-cards .article-cards__head { margin-bottom: 23px; }
.article-cards .article-cards__item:only-child { flex-basis: 100%; width: 100%; max-width: none; }
.article-cards .page-card { border: 1px solid #e1dfdf; border-radius: 0; background: transparent; }
.article-cards .page-card__title { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -4%; }
.article-cards .page-card__more { color: var(--fc-red); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; }
/* The one featured card (old .single-item .card): #fafafa, 6 px corners; from 1200 px photo and text in two equal columns
   100 px apart (50 px below 1400 px), the photo 20 px in from the top, bottom and left; below 1200 px the photo on top,
   20 px in from the top and sides. Over the photo a red fade from halfway down (85 %) with the grey shield at 90 %; the
   title navy 35/32/30/26 px, the text and the link 30 px apart in 30 px of padding. */
.article-cards--count-1 .article-card--photo-beside { border-radius: 6px; background: #fafafa; }
.article-cards--count-1 .article-card--photo-beside .page-card__media { position: relative; flex: none; padding: 20px 20px 0; border-radius: 0; }
.article-cards--count-1 .article-card--photo-beside .page-card__media :where(picture, img) { display: block; width: 100%; height: auto; border-radius: 3px; }
.article-cards--count-1 .article-card--photo-beside .page-card__media::before,
.article-cards--count-1 .article-card--photo-beside .page-card__media::after {
  content: ""; position: absolute; z-index: 1; inset: 20px 20px 0; border-radius: 3px; pointer-events: none;
}
.article-cards--count-1 .article-card--photo-beside .page-card__media::before {
  background: linear-gradient(180deg, rgba(218, 32, 49, 0) 50%, #da2031 100%); opacity: 0.85;
}
.article-cards--count-1 .article-card--photo-beside .page-card__media::after {
  background: url("/images/site/shield-grey.svg") center 90% / 26px 30px no-repeat;
}
.article-cards--count-1 .article-card--photo-beside .page-card__body { display: flex; flex-direction: column; gap: 30px; padding: 30px; }
.article-cards--count-1 .article-card--photo-beside :is(.page-card__title, .page-card__title a, .page-card__link) {
  margin: 0; color: #2d3141; font-size: 35px; font-weight: 800; line-height: 1.15; letter-spacing: -4%;
}
.article-cards--count-1 .article-card--photo-beside :is(.page-card__text, .page-card__more) { margin: 0; }
@media (min-width: 1200px) {
  .article-cards--count-1 .article-card--photo-beside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 100px; }
  .article-cards--count-1 .article-card--photo-beside .page-card__media { padding: 20px 0 20px 20px; }
  .article-cards--count-1 .article-card--photo-beside .page-card__media :where(picture, img) { height: 100%; object-fit: cover; }
  .article-cards--count-1 .article-card--photo-beside .page-card__media::before,
  .article-cards--count-1 .article-card--photo-beside .page-card__media::after { inset: 20px 0 20px 20px; }
  .article-cards--count-1 .article-card--photo-beside .page-card__body { padding-left: 0; }
  .article-cards--count-1 .article-card--photo-beside .page-card__more { margin-top: auto; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) { .article-cards--count-1 .article-card--photo-beside { gap: 50px; } }
@media (max-width: 1199.98px) {
  .article-cards--count-1 .article-card--photo-beside { flex-direction: column; }
  .article-cards--count-1 .article-card--photo-beside :is(.page-card__title, .page-card__title a, .page-card__link) { font-size: 32px; }
}
@media (max-width: 991.98px) { .article-cards--count-1 .article-card--photo-beside :is(.page-card__title, .page-card__title a, .page-card__link) { font-size: 30px; } }
/* Case-study sliders with several cards (old .block__article-slider .card): #eee with the #e1dfdf line, the photo 12 px in
   from the top and sides with 3 px corners, 30 px padding and 30 px between title, text and link; title 18/17/16 px
   weight 800 navy on 1.15, text 16/20 px navy. On hover (0.3 s linear) the card turns #fafafa with a soft shadow. */
.article-cards--slider:not(.article-cards--count-1) .page-card { background: #eeeeee; border-color: #e1dfdf; transition: all 0.3s linear; }
.article-cards--slider:not(.article-cards--count-1) .page-card:hover { background: #fafafa; border-color: #fafafa; box-shadow: 0 0 25px 0 rgba(34, 33, 35, 0.15); }
.article-cards--slider:not(.article-cards--count-1) .page-card__media { padding: 12px 12px 0; border-radius: 0; }
.article-cards--slider:not(.article-cards--count-1) .page-card__media :where(picture, img) { display: block; border-radius: 3px; }
.article-cards--slider:not(.article-cards--count-1) .page-card__body { display: flex; flex-direction: column; gap: 30px; padding: 30px; }
.article-cards--slider:not(.article-cards--count-1) :is(.page-card__title, .page-card__title a, .page-card__link) {
  margin: 0; color: #2d3141; font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -3%;
}
.article-cards--slider:not(.article-cards--count-1) .page-card__text { margin: 0; color: #2d3141; font-size: 16px; font-weight: 500; line-height: 1.25; }
.article-cards--slider:not(.article-cards--count-1) .page-card__more { margin-top: auto; }
@media (max-width: 991.98px) { .article-cards--slider:not(.article-cards--count-1) :is(.page-card__title, .page-card__title a, .page-card__link) { font-size: 17px; } }
@media (max-width: 575.98px) { .article-cards--slider:not(.article-cards--count-1) :is(.page-card__title, .page-card__title a, .page-card__link) { font-size: 16px; } }
/* Phones: the old slide sat 15 px further in on each side (card 30 px from the screen's edges at 390 px). */
@media (max-width: 767.98px) { .article-cards--count-1 .article-card--photo-beside { margin-inline: 15px; } }
/* The old featured block's space above: 60 px below 992 px, 30 px below 576 px. */
@media (max-width: 991.98px) { .article-cards.article-cards--count-1 { padding-top: 60px; } }
@media (max-width: 575.98px) { .article-cards.article-cards--count-1 { padding-top: 30px; } }
@media (max-width: 575.98px) { .article-cards--count-1 .article-card--photo-beside :is(.page-card__title, .page-card__title a, .page-card__link) { font-size: 26px; } }

/* Contact strip (capture: .contact-form.contact-form-title-top): grey #eee band, 150 px above and below, the heading in
   620 px over two 570 px columns 100 px apart (contact details | the form, no card of its own). */
.form-block--panel { background: var(--fc-grey); }
.form-block--panel .form-block__inner { padding-block: var(--section-space); }
@media (min-width: 1024px) {
  .form-block--panel .form-block__inner { column-gap: 100px; padding-block: var(--section-space); }
}
.form-block--panel .form-block__heading { letter-spacing: -4%; }
@media (min-width: 1200px) { .form-block--panel .form-block__heading { width: 620px; max-width: none; } }
.form-block--panel .form-block__card { --form-panel-card-bg: transparent; padding: 0; border-radius: 0; }
@media (min-width: 1024px) { .form-block--panel .form-block__card { padding: 0; } }
/* Below 1200 px the old panel stacks: the text centred on top (list centred too), the photo full width under it. */
@media (max-width: 1199.98px) {
  .image-text .image-text__inner { display: flex; flex-direction: column; gap: 50px; }
  .image-text .image-text__body { order: -1; text-align: center; }
  .image-text .image-text__bullets { display: flex; flex-direction: column; align-items: center; }
  .image-text .image-text__action { display: flex; justify-content: center; }
  .image-text .image-text__media { width: 100%; }
}
.stats--big .stats__big-heading { font-weight: 500; }
@media (max-width: 1199.98px) {
  .feature-grid--icons-bordered .feature-grid__item { padding-inline: 20px; }
}
@media (max-width: 1199.98px) { .steps--sticky-intro { --steps-sticky-intro-width: 390px; } }
@media (max-width: 575.98px) {
  .stats--big { --stats-big-pad-top: 30px; }
  .stats--big .stats__big-stat { gap: 21px; }
  .stats--big .stats__big-list { gap: 30px; }
}
/* Phones (below 768 px): card texts 16/20 px, cards 20 px in; the steps head centred above the steps. */
@media (max-width: 767.98px) {
  .feature-grid--icons .feature-grid__text,
  .feature-grid--icons-bordered .feature-grid__text,
  .steps--sticky-intro .steps__text { font-size: 1rem; line-height: 1.25; }
  .feature-grid--icons-bordered .feature-grid__item,
  .steps--sticky-intro.steps--numbered .steps__step { padding-inline: 20px; }
}
@media (max-width: 991.98px) { .steps--sticky-intro .steps__head { text-align: center; } }
@media (max-width: 767.98px) {
  .feature-grid--photo-cards .feature-grid__head { margin-bottom: 24px; }
  .feature-grid--photo-cards .feature-grid__title { font-size: 1.125rem; }
}
@media (max-width: 575.98px) {
  .image-text .image-text__bullets { align-items: stretch; text-align: start; }
  .image-text .image-text__bullets li + li { margin-top: 4px; }
}
@media (max-width: 767.98px) {
  .steps--sticky-intro.steps--numbered .steps__step { padding-top: 30px; padding-bottom: 22px; }
  .steps--sticky-intro .steps__text { margin-top: 20px; }
  .feature-grid--icons .feature-grid__item { padding-bottom: 30px; }
}
@media (min-width: 576px) and (max-width: 1199.98px) {
  .stats--big { --stats-big-list-before: 45px; }
  .stats--big .stats__big-figure-text { padding-top: 31px; }
}
@media (max-width: 575.98px) {
  .hero--slides-own .hero__slide-text { margin-top: 29px; line-height: 1.25; }
  .hero--slides-own .hero__slide .hero__action { margin-top: 28px; }
}

/* FC-FIX1 (QC B1, B3, M3): the contact strip as the old .panel.contact-form (computed at 1440 on the capture). Labels
   16 px 800 #222123 capitals (-2 %) over a 1 px #7c868d rule 10 px below; the value 30 px under the rule; boxes 260 px
   with 50 px between columns and rows. The intro over a 1 px rule (5 px under, 20 px above the form). The form: no
   labels on screen (the form's Labels inside the boxes, MB-152 M-FIX-2: kept for screen readers, the words are placeholders), boxes
   52 px #fafafa with a 1 px #7c868d border and 3 px corners, 6 px apart, the message box 150 px; "Send Enquiry" a navy
   170 x 45 button, 13 px 700 capitals, 20 px under the box, with the old chevron. */
.form-block--panel .form-block__contacts { gap: 50px; }
@media (min-width: 1200px) { .form-block--panel .form-block__contacts { grid-template-columns: 260px 260px; } }
.form-block--panel .form-block__contact { gap: 30px; }
.form-block--panel .form-block__contact-label {
  padding-bottom: 10px;
  border-bottom: 1px solid #7c868d;
  color: #222123;
  font-weight: 800;
  letter-spacing: -2%;
}
.form-block--panel .form-block__intro { margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px solid #7c868d; }
.form-block--panel .form-block__card .site-form__fields { gap: 6px; }
.form-block--panel .form-block__card .site-form__field { margin: 0; }
.form-block--panel .form-block__card :is(input:not([type=hidden]):not([type=checkbox]), textarea) {
  box-sizing: border-box;
  height: 52px;
  padding: 0 15px;
  border: 1px solid #7c868d;
  border-radius: 3px;
  background: #fafafa;
  color: #222123;
  font: 500 1rem/20px var(--font-body);
}
.form-block--panel .form-block__card textarea { height: 150px; padding-block: 15px; resize: vertical; }
.form-block--panel .form-block__card :is(input, textarea)::placeholder { color: #222123; opacity: 1; }
.form-block--panel .form-block__card :is(input, textarea):focus { border-color: var(--fc-red); outline: none; }
.form-block--panel .form-block__card .site-form__actions { margin-top: 20px; }
.form-block--panel .form-block__card .site-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 170px;
  height: 45px;
  padding: 0 15px 0 25px;
  border: 1px solid var(--fc-navy);
  border-radius: 3px;
  background: var(--fc-navy);
  color: #eeeeee;
  font: 700 0.8125rem/1 var(--font-body);
  text-transform: uppercase;
}
.form-block--panel .form-block__card .site-form__submit::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
/* Below 1200 px the old labels are 13 px (115 % lines), the value 10 px under the rule, 25 px between the rows. */
@media (max-width: 1199.98px) {
  .form-block--panel .form-block__contacts { row-gap: 25px; }
  .form-block--panel .form-block__contact { gap: 10px; }
  .form-block--panel .form-block__contact-label { font-size: 0.8125rem; line-height: 1.15; }
}

/* FC-FIX2 (QC spacing/style rows, contact strip): the old .contact-form .container gaps per width (bundle.css): under
   the heading 75 px and 100 px between the columns from 1400 px, 50 / 50 px below; the heading half the container
   from 992 px; the detail rows 25 px apart from 1200 to 1399 px; on phones 50 px under the heading and 25 px between
   the form and the details. The intro 20 px over the form, the boxes with 15 px inside, the message box 150 px, the
   button 15 px top and bottom (25 px left), 20 px under the message box. */
.form-block--panel.form-block--contacts .form-block__inner { row-gap: 50px; }
@media (min-width: 768px) { .form-block--panel.form-block--contacts .form-block__inner { column-gap: 50px; } }
@media (min-width: 992px) { .form-block--panel.form-block--contacts .form-block__panel { width: calc(100% + 25px); } }
@media (min-width: 1200px) and (max-width: 1399.98px) { .form-block--panel.form-block--contacts .form-block__contacts { gap: 25px; } }
@media (min-width: 1400px) {
  .form-block--panel.form-block--contacts .form-block__inner { row-gap: 75px; column-gap: 100px; }
  .form-block--panel.form-block--contacts .form-block__panel { width: calc(100% + 50px); }
}
@media (max-width: 767.98px) { .form-block--panel.form-block--contacts .form-block__contacts { margin-top: -25px; } }
.form-block--panel .form-block__card .form-block__intro { margin-bottom: 20px; }
.form-block--panel .form-block__card .site-form { gap: 0; }
.form-block--panel .form-block__card .site-form__control :is(input:not([type=hidden]):not([type=checkbox]), textarea) { padding-block: 15px; }
.form-block--panel .form-block__card .site-form__control textarea:not([hidden]) { display: block; height: 150px; min-height: 150px; }
.form-block--panel .form-block__card .site-form__submit { padding: 15px 15px 15px 25px; }
@media (max-width: 767.98px) { .form-block--panel .form-block__card .site-form__control textarea:not([hidden]) { height: 100px; min-height: 100px; } }
/* The old address is one box holding the pin and the words (.contact-content-item.location, its text 32 px in after
   the 22 px pin and 10 px gap); the words' box here starts under the pin the same way (look unchanged). */
.form-block--panel .form-block__contact-address > span { margin-left: -32px; padding-left: 32px; }
.form-block--panel .form-block__contact-address > .form-block__contact-icon { position: relative; z-index: 1; }
/* FC-FIX2 (QC style rows): the old .content-columns texts (intro and the icon cards' words) are navy #2d3141. */
.feature-grid--icons :is(.feature-grid__intro, .feature-grid__text) { color: #2d3141; }

/* FC-FIX6 (FC-QC5 E6; lead, 26 Oct 2026: "Logo row when motion is off: one still row at the old height"): with reduced
   motion the client logo row stays the moving row's single line at rest (the first logos in their slots, the rest cut off
   at the edges), not master's wrapped grid; nothing moves. Same slots and widths as the moving row (logoStrip.css). */
@media (prefers-reduced-motion: reduce) {
  .logo-strip--in-view.logo-strip--full { overflow-x: clip; }
  .logo-strip--in-view.logo-strip--full .logo-strip__viewport { overflow: hidden; margin-inline: calc(50% - 50vw); container-type: inline-size; }
  .logo-strip--in-view.logo-strip--full .logo-strip__track { display: flex; width: max-content; animation: none; }
  .logo-strip--in-view.logo-strip--full .logo-strip__track > .logo-strip__list { display: flex; flex: none; flex-wrap: nowrap; gap: 0; max-width: none; margin: 0; }
  .logo-strip--in-view.logo-strip--full { --logo-strip-gap: var(--space-10); --logo-strip-in-view: var(--logo-strip-view-5); }
  .logo-strip--in-view.logo-strip--full .logo-strip__track .logo-strip__item {
    --logo-strip-slot: calc(100cqw / var(--logo-strip-in-view));
    flex: 0 0 var(--logo-strip-slot); width: var(--logo-strip-slot); max-width: none; margin-right: 0;
    padding-inline: calc(min(var(--logo-strip-gap), var(--logo-strip-slot) / 4) / 2);
  }
  .logo-strip--in-view.logo-strip--full .logo-strip__track .logo-strip__item--shaped .logo-strip__logo { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 577px) { .logo-strip--in-view.logo-strip--full { --logo-strip-in-view: var(--logo-strip-view-4); } }
@media (prefers-reduced-motion: reduce) and (min-width: 769px) { .logo-strip--in-view.logo-strip--full { --logo-strip-in-view: var(--logo-strip-view-3); } }
@media (prefers-reduced-motion: reduce) and (min-width: 993px) { .logo-strip--in-view.logo-strip--full { --logo-strip-in-view: var(--logo-strip-view-2); } }
@media (prefers-reduced-motion: reduce) and (min-width: 1201px) { .logo-strip--in-view.logo-strip--full { --logo-strip-in-view: var(--logo-strip-view-1); } }

/* FC-FIX6 (FC-QC5 R1): the Tanks photo cards (light #eee cards, photo-landscape-4-3) keep the old dark link line: the old
   .box-text .btn-primary, navy capitals 13 px weight 700 on a 13 px line, 15 px above and below, a 1 px navy line under it
   as wide as its words, the 20 x 18 px arrow 10 px after them, 45 px under the text. (The industry tiles' #eee line on
   their photos above stays.) */
.feature-grid--photo-cards.feature-grid--photo-landscape-4-3 .feature-grid__more {
  width: auto; gap: 10px; justify-content: flex-start; margin-top: 45px; padding: 15px 0;
  border-bottom-color: #2d3141; color: #2d3141; line-height: 13px;
}
.feature-grid--photo-cards.feature-grid--photo-landscape-4-3 .feature-grid__more-text { margin-right: 0; line-height: 13px; }
.feature-grid--photo-cards.feature-grid--photo-landscape-4-3 .feature-grid__arrow { width: 20px; height: 18px; margin-block: -2.5px; }
/* FC-FIX6 (FC-QC5 R2): the Tanks intro list as the old .content-columns-content ul: a 480 px block centred in the column,
   each line 30 px in with the small red shield (16 x 18, 3 px down), the words centred (left on phones), 20 px above and
   below; no bullets. */
.feature-grid--photo-cards.feature-grid--photo-landscape-4-3:has(.feature-grid__intro ul) .feature-grid__intro ul { display: inline-block; width: 480px; max-width: 100%; margin: 0 0 20px; padding: 0; list-style: none; }
.feature-grid--photo-cards.feature-grid--photo-landscape-4-3:has(.feature-grid__intro ul) .feature-grid__intro li { position: relative; margin: 0; padding-left: 30px; text-align: center; }
.feature-grid--photo-cards.feature-grid--photo-landscape-4-3:has(.feature-grid__intro ul) .feature-grid__intro li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 18px; background: url("/images/site/small-shield.svg") center / contain no-repeat; }
@media (max-width: 575.98px) { .feature-grid--photo-cards.feature-grid--photo-landscape-4-3:has(.feature-grid__intro ul) .feature-grid__intro li { text-align: left; } }
/* The old h6 under it ("Explore the SuperVaults"): 20 px (16 px on phones) weight 800 on 1.2, black, no letter-spacing,
   10 px under it; the list lines 5 px apart on phones. */
.feature-grid--photo-cards.feature-grid--photo-landscape-4-3:has(.feature-grid__intro ul) .feature-grid__intro h3 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: normal; color: #000000; }
@media (max-width: 575.98px) {
  .feature-grid--photo-cards.feature-grid--photo-landscape-4-3:has(.feature-grid__intro ul) .feature-grid__intro h3 { font-size: 16px; }
  .feature-grid--photo-cards.feature-grid--photo-landscape-4-3:has(.feature-grid__intro ul) .feature-grid__intro li { padding-bottom: 5px; }
}
.feature-grid--photo-cards.feature-grid--photo-landscape-4-3:has(.feature-grid__intro ul) .feature-grid__intro { padding-bottom: 10px; } /* the h6's 10 px under it (its margin ends the intro) */
/* FC-FIX6 (FC-QC5 R2): red-tick boxes as the old .panel-node-list: three boxes are two columns 25 px apart with the third
   across both (data-items="3"; one column under 768 px); the paragraphs 20 px apart (10 px on phones); the link at the
   box's foot as the old .btn: capitals 13 px weight 700 on a 13 px line, 150 px wide, 15 px above and below its words,
   a 1 px #eee line under it, 10 px under the text at least. */
.feature-grid--icons.band--deep .feature-grid__list:has(> .feature-grid__item:nth-child(3):last-child) { gap: 25px; }
@media (min-width: 768px) {
  .feature-grid--icons.band--deep .feature-grid__list:has(> .feature-grid__item:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid--icons.band--deep .feature-grid__list > .feature-grid__item:nth-child(3):last-child { grid-column: 1 / -1; }
}
.feature-grid--icons.band--deep .feature-grid__text--paragraphs p + p { margin-top: 20px; }
@media (max-width: 575.98px) { .feature-grid--icons.band--deep .feature-grid__text--paragraphs p + p { margin-top: 10px; } }
.feature-grid--icons.band--deep .feature-grid__body { display: flex; flex-direction: column; flex: 1 1 auto; align-self: stretch; }
.feature-grid--icons.band--deep .feature-grid__more {
  justify-content: space-between; width: 150px; margin-top: auto; padding: 15px 0; border-bottom: 1px solid #eeeeee;
  font-size: 13px; font-weight: 700; line-height: 13px; text-transform: uppercase; color: #eeeeee;
}
.feature-grid--icons.band--deep .feature-grid__more-text { margin-right: 0; line-height: 13px; }
.feature-grid--icons.band--deep .feature-grid__arrow { width: 20px; height: 18px; margin-block: -2.5px; }
/* FC-FIX6 (FC-QC5 R8): the Capabilities cards as the old .content-columns-item: the icon in a 50 px box 30 px from the
   top, the name 5 px under it, the words 30 px in from each side. */
.feature-grid--icons.feature-grid--intro-beside .feature-grid__item { min-height: 200px; padding: 30px 30px 40px; } /* old: at least 200 px, 40 px under the words */
.feature-grid--icons.feature-grid--intro-beside .feature-grid__icon { --fg-icon-size: 50px; }
.feature-grid--icons.feature-grid--intro-beside .feature-grid__body { margin-top: -11px; }
@media (max-width: 575.98px) { .feature-grid--icons.feature-grid--intro-beside .feature-grid__item { min-height: 180px; padding-bottom: 30px; } }