/*
 * engineering.css — page-scoped styles for the standalone Engineering pages
 * (src/components/engineering/EngineeringPage.jsx). Everything else the
 * page needs (svc-eyebrow, svc-h2, svc-om-body, ds-h1, page-banner__*,
 * breadcrumb__*) already exists in assets/content.css; this file only adds
 * what's new here.
 *
 * Every section runs at the full .ie-container width — no section-specific
 * width cap. Key Benefits used to have its own 840px-capped wrapper while
 * every section around it ran full width; that read as broken and was
 * removed. If a section genuinely needs a narrower measure (long body
 * prose, say), cap it consistently across every sibling section on the
 * page, not just one.
 */

/* content.css's shared .section defaults to 96px block padding (80px at
   tablet, 57.6px at mobile). First tightened to match Home's own values
   (48/64) exactly, then halved again on top of that per direct request —
   so these run noticeably tighter than Home/Careers now, not matched to
   them. Specificity (.eng-page .section) beats the shared class's own
   tiers regardless of viewport, so this doesn't need to fight content.css's
   media-query ordering. */
.eng-page .section {
  padding-block: 24px;
}

@media (min-width: 1024px) {
  .eng-page .section {
    padding-block: 32px;
  }
}

/* FeatureBlock's shared .svc-feature-list is a fixed 2-column grid — fine
   for the 4-item parts checklists it was built for, but every Engineering
   page has exactly 3 benefits, so the 2-col grid always orphans the third
   card alone on its own row. Scoped to this page family only — OM and
   Consumables & Spares keep the shared default. Same fix applies inside
   leaf pages' narrower content column (.eng-leaf-content) — the "why this
   step" block is 3 items there too, and svc-om-layout collapses to one
   column at the same 1024px breakpoint, so it's guarded identically. */
@media (min-width: 1025px) {
  .eng-benefits .svc-feature-list,
  .eng-leaf-content .svc-feature-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Icon stacked above the title, not beside it — same page family scoping as
   the 3-column grid above. OM and Consumables & Spares keep the shared
   left-aligned icon default. Centered to match — a stacked icon with
   left-aligned text under it reads unbalanced. */
.eng-benefits .svc-feature-item,
.eng-leaf-content .svc-feature-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/*
 * Overview — the section right after the banner. Eyebrow + svc-h2 + lede
 * opposite a real photo (or, for icon-tile pages with no equipment photo,
 * a large icon treatment) — a left-aligned two-column layout, not the
 * centred narrow column the rest of this file uses, so it reads as a
 * proper lead section rather than another block of body copy.
 */
.eng-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-48);
  align-items: center;
}

@media (max-width: 900px) {
  .eng-overview__grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
}

.eng-overview__copy {
  display: flex;
  flex-direction: column;
}

/* Matched to Home's own lead-paragraph role — confirmed against two
   independent Home sections (.ie-section-lead AND the R&D Leadership
   "Six decades..." paragraph, .rdl__lead): clamp(15px,1.4vw,17px) /
   regular(400) / 1.6. An earlier pass here mistakenly matched a
   14px/light(300) reading that didn't hold up against a second Home
   section — this is the corrected, cross-checked value. */
.eng-overview__lede {
  margin: var(--space-16) 0 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.eng-overview__more {
  margin: var(--space-16) 0 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.eng-overview__visual {
  border-radius: var(--radius-large);
  overflow: hidden;
  background: var(--color-surface-neutral-light);
  border: 1px solid var(--color-border-light);
}

.eng-overview__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.eng-overview__icon-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  aspect-ratio: 4 / 3;
  padding: var(--space-32);
  text-align: center;
}

.svc-icon-box--lg {
  width: 84px;
  height: 84px;
}

.svc-icon-box--lg svg {
  width: 34px;
  height: 34px;
}

.eng-overview__icon-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.eng-tiles__heading {
  margin: 0;
}

/*
 * Tiles carousel — 4 visible at desktop, 2 tablet, 1 mobile. Markup is
 * server-rendered in full (progressive enhancement, same approach as
 * country-carousel.js); assets/engineering-carousel.js drives the track
 * transform, arrow disabled/hidden states and pagination dots, and clamps
 * visible count to the page's actual tile count so a page with 4 or fewer
 * tiles never shows dead space or non-functional arrows.
 */
.eng-carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin: 0 0 var(--space-32);
}

.eng-carousel__arrows {
  display: flex;
  gap: var(--space-12);
  flex: none;
}

.eng-carousel__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-brand-primary);
  background: var(--color-surface-card);
  color: var(--color-brand-primary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.eng-carousel__arrow:hover:not(:disabled) {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

/* Water Treatment sibling pages keep whichever direction is currently
   available visibly active, matching the filled control treatment used in
   the approved reference. Disabled directions remain outlined below. */
.eng-page--water-treatment .eng-carousel__arrow:not(:disabled),
.eng-page--water-treatment .soltrain__btn:not(:disabled) {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.eng-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.eng-carousel__arrow--prev svg {
  transform: rotate(180deg);
}

.eng-carousel__viewport {
  overflow: hidden;
}

.eng-carousel__track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  margin: 0 calc(var(--space-8) * -1);
}

.eng-carousel__item {
  flex: none;
  width: 100%;
  padding: 0 var(--space-8);
}

/* The Process Water Treatment cards share the height of the tallest visible
   card while retaining their existing media and content dimensions. */
.eng-page--process-water-treatment .eng-carousel__item {
  display: flex;
}

.eng-page--process-water-treatment .eng-tile {
  width: 100%;
  height: 100%;
}

@media (min-width: 640px) {
  .eng-carousel__item {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .eng-carousel__item {
    width: 25%;
  }
}

/* Leaf pages share their width with EngineeringSidebar (no room for 4
   across, unlike the standalone Engineering pages this carousel was built
   for) — pre-JS fallback matches the 2-up count engineering-carousel.js
   applies at runtime once it detects .eng-leaf-content. */
@media (min-width: 640px) {
  .eng-leaf-content .eng-carousel__item {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .eng-leaf-content .eng-carousel__item {
    width: 50%;
  }
}

.eng-carousel__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-32);
}

.eng-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border-medium);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.eng-carousel__dot.is-active {
  width: 24px;
  background: var(--color-brand-primary);
}

.eng-tile {
  position: relative;
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--elevation-resting);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Carousel tiles size to their own text, so a 3-up row shows ragged heights.
   The flex wrapper (.eng-carousel__item) already stretches to the row; make the
   tile fill it so every tile in a row is the same height. */
.eng-carousel__item > .eng-tile { height: 100%; }

.eng-tile:hover {
  box-shadow: var(--elevation-hover);
  transform: translateY(-2px);
}

.eng-tile--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.eng-tile--link:focus-visible {
  outline: 3px solid rgba(0, 124, 195, 0.55);
  outline: 3px solid color-mix(in srgb, var(--color-brand-primary) 55%, transparent);
  outline-offset: 3px;
}

/* Sequential pages (engineeringContent.js: tilesSequential) — a numbered
   badge over each tile's media is enough to read as an ordered, start-to-
   finish process without a connector-line layout that would break across
   the grid's responsive column counts. */
.eng-tile__step {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

.eng-tile__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface-neutral-light);
}

.eng-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eng-tile__media--icon {
  display: grid;
  place-items: center;
  aspect-ratio: auto;
  padding: var(--space-24) 0 var(--space-8);
  background: transparent;
}

.eng-tile__title {
  margin: 0;
  padding: var(--space-12) var(--space-16) var(--space-4);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.eng-tile__text {
  margin: 0;
  padding: 0 var(--space-16) var(--space-16);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Icon tiles center the icon already (.eng-tile__media--icon) — center the
   title and text under it too instead of leaving them left-aligned. Scoped
   to the icon variant only; image tiles keep left-aligned captions. */
.eng-tile:has(.eng-tile__media--icon) .eng-tile__title,
.eng-tile:has(.eng-tile__media--icon) .eng-tile__text {
  text-align: center;
}

.eng-partners {
  padding: 0 0 var(--space-64);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.eng-partners__label {
  width: 100%;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.eng-partners__pill {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-medium);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/*
 * Leaf pages (EngineeringLeafPage.jsx — Aeration, and whatever else gets
 * added to engineeringLeafContent.js). Two-column layout reuses
 * .svc-om-layout / .svc-sidebar wholesale (same shell as the O&M and
 * Consumables & Spares service pages) — only the content-column rhythm and
 * the sidebar's nav tree are new here.
 */
/* .svc-om-layout's grid-template-columns is `65fr 35fr` with no minmax(0, ...)
   guard, so a grid track still defaults to a minimum size of its content's
   max-content width. A carousel track lays every item out unwrapped
   (.eng-carousel__track { display: flex }) before overflow:hidden clips the
   viewport, so once there are enough Key Offerings items for that unwrapped
   row's natural width to exceed the column's 65fr share (13 items did this;
   6 didn't), the whole content column — and the sidebar next to it — get
   pushed out past the fold instead of staying inside the page. min-width: 0
   is the standard fix: it lets the grid item shrink to its track's actual
   size and leaves overflow:hidden to do its job. */
.eng-leaf-content {
  min-width: 0;
}

.eng-leaf-block {
  margin-bottom: var(--space-48);
}

.eng-leaf-block:last-child {
  margin-bottom: 0;
}

.eng-leaf-block h2 {
  margin-bottom: var(--space-20);
}

/* Four icon tiles read better as two wider rows than four cramped ones once
   they're sharing the page with a sidebar — .eng-tiles__grid's column
   counts and base grid/gap rules are set on .eng-carousel__item elsewhere
   on these pages now (the category pages' tile grid became a carousel);
   this class needs its own display/gap here since a leaf page's tiles
   aren't part of that carousel. */
.eng-leaf-content .eng-tiles__grid {
  display: grid;
  gap: var(--space-20);
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 480px) {
  .eng-leaf-content .eng-tiles__grid {
    grid-template-columns: 1fr;
  }
}

.eng-leaf-content .eng-tile__media--icon {
  padding-top: var(--space-32);
}

/* Sidebar nav tree — group headers (category names) over a list of category
   pages, each expanding to its leaf pages (if any exist yet — see
   EngineeringSidebar.jsx for why an empty category never shows a dead
   link). */
.eng-sidebar-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Native accordion — no marker/triangle browsers add by default; a custom
   chevron (rotated when [open]) stands in for it instead. */
.eng-sidebar-group__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
}

.eng-sidebar-group__label::-webkit-details-marker {
  display: none;
}

.eng-sidebar-group__label::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--color-text-secondary);
  border-bottom: 1.5px solid var(--color-text-secondary);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.eng-sidebar-group[open] > .eng-sidebar-group__label::after {
  transform: rotate(45deg);
}

.eng-sidebar-group + .eng-sidebar-group {
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-light);
}

.eng-sidebar-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.eng-sidebar-group > ul > li {
  margin-bottom: var(--space-4);
}

.eng-sidebar-tree a {
  display: block;
  padding: var(--space-6) 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.eng-sidebar-tree a:hover {
  color: var(--color-brand-primary);
}

.eng-sidebar-children {
  padding-left: var(--space-16) !important;
  border-left: 1px solid var(--color-border-light);
  margin-left: var(--space-4);
}

.eng-sidebar-children a {
  font-size: 13px;
  font-weight: var(--weight-regular);
}

.eng-sidebar-tree a.is-current {
  color: var(--color-brand-primary);
  font-weight: var(--weight-semibold);
}

/*
 * ============================================================================
 * Solution template (EngineeringSolutionPage.jsx) — ported from the
 * designer's Raw Water Treatment handoff (README.md / SOLUTION_PAGE_
 * TEMPLATE.md). Reuses this file's existing tokens and classes wherever
 * they already cover the same ground (svc-eyebrow, svc-h2, eng-benefits,
 * ie-container, PageBanner's own hero) — only what's genuinely new gets new
 * classes here, kept close to the designer's own naming so the two stay
 * easy to compare.
 * ============================================================================
 */
/* Scrollbar-free viewport width, kept in sync by
   assets/engineering-journey.js on documentElement. The Journey rail's
   full bleed needs a true layout width — vw counts the classic scrollbar
   and the layout viewport does not, so a 50vw bleed overshoots by the
   scrollbar's width and puts a horizontal scrollbar on the page. 100vw is
   the fallback if the script never runs.
   Declared at :root, not on .eng-page: the script sets this on
   documentElement, and a page-wrapper class re-declaring it on a
   descendant of <html> would shadow that inherited value for everything
   under it, permanently pinning it back to the 100vw fallback. */
:root {
  --eng-vw: 100vw;
}

.eng-page {
  /* Mirrors ie-container's own responsive padding-inline steps (design-
     system.css), so the rail's edge lines up with the container above and
     below it at every width instead of drifting from it. */
  --eng-gutter: 32px;
  /* The designer's own QA finding: --color-brand-primary (#007cc3) measures
     4.50:1 on white and 4.31:1 on the canvas background — on or just under
     the 4.5:1 minimum for small text. One step darker, for small text only;
     icons, rules and anything 24px+ stay on --color-brand-primary. Scoped
     to this page family rather than changed at the design-system level. */
  --eng-brand-text: #00679f;
}
@media (max-width: 768px) {
  .eng-page { --eng-gutter: 24px; }
}
@media (max-width: 639px) {
  .eng-page { --eng-gutter: 16px; }
}

/* ---- Solution Overview ---- */
.sol-over__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(32px, 4.4vw, 76px);
  align-items: center;
}

.sol-over__title {
  margin-bottom: var(--space-20);
}

.sol-accent {
  font-weight: var(--weight-bold);
  background: linear-gradient(90deg, var(--color-brand-secondary) 0%, var(--color-brand-primary) 55%, var(--color-brand-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sol-over__body p {
  margin: 0 0 var(--space-16);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.sol-over__body p:last-child {
  margin-bottom: 0;
}

.sol-over__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: clamp(22px, 2.4vw, 30px);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eng-brand-text);
}
.sol-over__link-arrow {
  transition: transform 0.25s ease;
}
.sol-over__link:hover .sol-over__link-arrow {
  transform: translateX(4px);
}
.sol-over__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
  border-radius: 4px;
}

.sol-over__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-large);
  background: var(--color-surface-neutral-light);
  border: 1px solid var(--color-border-light);
  aspect-ratio: 4 / 3;
}
.sol-over__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sol-over__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 21, 47, 0.14) 0%, rgba(3, 21, 47, 0) 46%, rgba(3, 21, 47, 0.26) 100%);
}

@media (max-width: 1080px) {
  .sol-over__layout {
    grid-template-columns: 1fr;
  }
  .sol-over__figure {
    aspect-ratio: 16 / 9;
  }
}

/*
 * ---- Solution Journey ----
 * Five stages read as one system, not five cards: a continuous process
 * line under every image, a connector bridging the gap to the next card,
 * and RAW WATER / TREATED WATER end caps. At 1160px+ every stage is on
 * screen and the line is genuinely unbroken; below that the row becomes a
 * native scroll-snap rail (assets/engineering-journey.js drives the arrows
 * and dots) and the connectors keep the relationship legible while it
 * scrolls.
 */
.soltrain__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-20);
  margin-bottom: clamp(22px, 2.4vw, 32px);
}

.soltrain__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.soltrain__nav[hidden] {
  display: none;
}

.soltrain__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.soltrain__btn:hover:not(:disabled) {
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.soltrain__btn:disabled {
  opacity: 0.32;
  cursor: default;
}
.soltrain__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}
.soltrain__btn--prev svg {
  transform: rotate(180deg);
}

.soltrain__ends {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-12);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.soltrain__ends span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.soltrain__ends b {
  color: var(--eng-brand-text);
  font-weight: var(--weight-bold);
}

.soltrain__rail {
  --train-gap: clamp(12px, 1.3vw, 18px);
  /* Explicit, not auto, so the percentage below has a definite box to
     resolve against — --eng-vw is the scrollbar-free width kept in sync
     above. */
  width: var(--eng-vw);
  display: grid;
  grid-auto-flow: column;
  /* Deliberately NOT wrapped in minmax(0, ...) — the designer's own file
     was, and it looks reasonable on paper, but in this browser wrapping a
     grid-auto-columns track in minmax() with grid-auto-flow: column makes
     every implicit column split the container evenly regardless of what
     minmax's own arguments are (reproduced with a plain fixed-px minmax
     too, so it isn't specific to percentages or calc()) — silently wrong
     at every breakpoint, five equal columns instead of 5/3/1-up. There was
     no way to catch this without actually rendering the page, which the
     designer's own QA notes say they weren't able to do. The bare
     calc() below, with no minmax wrapper, sizes correctly. */
  grid-auto-columns: calc((100% - 4 * var(--train-gap)) / 5);
  /* Four shared row tracks: media, line, name, body. Column gap only — the
     vertical rhythm inside a card comes from the elements' own margins. */
  grid-template-rows: auto auto auto 1fr;
  gap: 0 var(--train-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* !important: this is an <ol>, and globals.css's #main-content ol reset
     (margin: 0; padding: 0;) carries an ID selector — higher specificity
     than any class rule here beats regardless of source order, so it wins
     over padding-block/padding-inline/margin-inline below without this.
     Same fix already used on .eng-sidebar-children for the same reason. */
  padding-block: 2px !important;
  /* Full bleed to both viewport edges while the cards stay on the
     container grid — see --eng-vw above. */
  margin-inline: calc(50% - var(--eng-vw) / 2) !important;
  padding-inline: max(var(--eng-gutter), calc(var(--eng-vw) / 2 - 50%)) !important;
  scroll-padding-inline: max(var(--eng-gutter), calc(var(--eng-vw) / 2 - 50%));
}
.soltrain__rail::-webkit-scrollbar {
  display: none;
}
/* Each card spans all four tracks and adopts them as a subgrid, so the
   image, the process line, the name and the description sit on the same
   four baselines across the whole row — a two-line stage name (this train
   has one, "Coagulation & Flocculation") can't push its description out of
   step with its neighbours', or knock the process line out of level. Where
   subgrid is unavailable the card falls back to normal flow and the name
   reserves two lines, which covers the same case. */
.soltrain__card {
  position: relative;
  scroll-snap-align: start;
  min-width: 0;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
}

/* Raw Water's treatment items are independent offerings rather than a
   sequential process. Present them as conventional cards without step
   numbers, connector lines or train end labels. */
.soltrain__rail--cards {
  grid-template-rows: auto auto 1fr;
}
.soltrain__rail--cards .soltrain__card {
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-medium);
  background: var(--color-surface-card);
  box-shadow: var(--elevation-resting);
}
.soltrain__rail--cards .soltrain__media {
  border: 0;
  border-radius: 0;
}
.soltrain__rail--cards .soltrain__name {
  margin: 0;
  padding: var(--space-16) var(--space-16) var(--space-6);
}
.soltrain__rail--cards .soltrain__foot {
  padding: 0 var(--space-16) var(--space-16);
}
@supports not (grid-template-rows: subgrid) {
  .soltrain__card {
    display: block;
  }
  .soltrain__name {
    min-height: 2.52em;
  }
}

.soltrain__media {
  position: relative;
  /* hidden, not the designer's visible — their media slots were empty
     comments, never rendered with a real photo; a real <img> needs this to
     respect the box's own rounded corner instead of spilling past it. */
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-medium);
  background: var(--color-surface-neutral-light);
  aspect-ratio: 4 / 3;
}
.soltrain__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* The process line: a real element in the flow directly under each image,
   so it needs no height arithmetic and survives whatever imagery goes in
   the media box. Its ::after bridges the gap to the next card, so the five
   segments read as one run; ::before is the node marking this stage. The
   highlight sweeps every segment on the same animation, delayed by the
   card's own --i, so the brightening reads as one pass along the whole
   train rather than five things pulsing in place. */
.soltrain__line {
  position: relative;
  display: block;
  height: 2px;
  margin: 14px 0 0;
  background-color: rgba(0, 124, 195, 0.34);
  background-image: linear-gradient(90deg, rgba(46, 168, 255, 0) 0%, var(--color-brand-glow) 50%, rgba(46, 168, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 55% 100%;
  animation: eng-sol-sweep 5.5s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.42s);
  transition: background-color 0.25s ease;
}
.soltrain__line::after {
  content: '';
  position: absolute;
  top: 0;
  height: 2px;
  right: calc(-1 * var(--train-gap) - 2px);
  width: calc(var(--train-gap) + 4px);
  background: inherit;
  background-image: none;
}
.soltrain__card:last-child .soltrain__line::after {
  opacity: 0.4;
}
.soltrain__line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--color-surface-card);
  border: 2px solid var(--color-brand-primary);
  transition: background 0.25s ease;
}
.soltrain__card:hover .soltrain__line {
  background-color: var(--color-brand-primary);
}
.soltrain__card:hover .soltrain__line::before {
  background: var(--color-brand-primary);
}
@keyframes eng-sol-sweep {
  from {
    background-position-x: -60%;
  }
  to {
    background-position-x: 160%;
  }
}

.soltrain__no {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.soltrain__name {
  margin: var(--space-16) 0 var(--space-6);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--color-text-primary);
}
.soltrain__body {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* The subgrid's fourth row track (body) — just the description for a stage
   with no page yet, or the description plus a "Learn More" link once one
   exists (see engineeringSolutionContent.js: only Aeration today). Kept as
   a real link/arrow, not the whole card, so a stage without a page doesn't
   read as broken by comparison — nothing about an unlinked card looks like
   a link that failed. */
.soltrain__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-12);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eng-brand-text);
}
.soltrain__link svg {
  transition: transform 0.25s ease;
}
.soltrain__link:hover svg {
  transform: translateX(3px);
}
.soltrain__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
  border-radius: 4px;
}

.soltrain__dots {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: clamp(18px, 2vw, 26px);
}
.soltrain__dots:empty {
  display: none;
}
.soltrain__dot {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  padding: 0;
  background: var(--color-border-medium);
  border: none;
  cursor: pointer;
  transition: background 0.25s ease;
}
.soltrain__dot.is-active {
  background: var(--color-brand-primary);
}
.soltrain__dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}

@media (max-width: 1160px) {
  .soltrain__rail {
    grid-auto-columns: calc((100% - 2 * var(--train-gap)) / 3);
  }
}
@media (max-width: 620px) {
  .soltrain__rail {
    grid-auto-columns: min(74vw, 300px);
  }
  .soltrain__nav {
    display: none;
  }
  .soltrain__ends {
    letter-spacing: 0.14em;
  }
}

/* ---- Related Solutions ---- */
.sol-related__intro {
  margin-bottom: clamp(26px, 3vw, 40px);
}

.solrel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.solrel__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.solrel__card:hover {
  border-color: rgba(0, 124, 195, 0.32);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 124, 195, 0.09);
}
.solrel__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}
.solrel__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-12);
}
.solrel__name {
  margin: 0 0 var(--space-12);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  transition: color 0.25s ease;
}
.solrel__card:hover .solrel__name {
  color: var(--eng-brand-text);
}
.solrel__arrow {
  margin-top: auto;
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-light);
  line-height: 0;
  color: var(--color-brand-primary);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.solrel__card:hover .solrel__arrow {
  transform: translateX(4px);
}

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

@media (prefers-reduced-motion: reduce) {
  .soltrain__line {
    animation: none;
  }
  .soltrain__rail {
    scroll-behavior: auto;
  }
  .solrel__card,
  .solrel__arrow,
  .sol-over__link-arrow {
    transition: none;
  }
  .solrel__card:hover {
    transform: none;
  }
}

/* ============================================================================
   LEAF BANNER — NO CLIENT-VALIDATED PHOTOGRAPH YET
   ==========================================================================*/
/* Several Waste Water Systems and Waste To Energy leaf pages have no supplied
   photograph of their own plant. The banner keeps its dark ground and shows a
   labelled placeholder where the photo would otherwise be revealed, rather
   than a stand-in shot of different equipment presented as this page's
   subject. Same rule and same label as .ctry-placeholder on the country
   landing page. Sits at z-index 1, beneath .page-banner__overlay, in the
   region where that gradient has already faded to transparent. */
.eng-leaf-page .page-banner__pending {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: clamp(24px, 8vw, 132px);
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: var(--space-12);
  padding: var(--space-24) var(--space-32);
  border: var(--border-thin) dashed rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.eng-leaf-page .page-banner__pending-label {
  font-family: var(--font-display);
  /* 11px is the sitewide floor, matched to Home's smallest text. */
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Narrow screens anchor the banner copy to the bottom of a portrait frame,
   so the placeholder moves to the top of the band, clear of it. */
@media (max-width: 900px) {
  .eng-leaf-page .page-banner__pending {
    top: calc(96px + var(--space-32));
    right: 50%;
    transform: translateX(50%);
  }
}