/*
 * Market segment pages (/market-segments/…).
 *
 * Every value resolves to a token already defined in assets/content.css
 * (--space-*, --color-*, --font-*, --radius-*, --measure-reading …) so these
 * pages inherit the exact rhythm, palette and type scale of the rest of the
 * site. No selector here is used by any pre-existing page.
 */

.ms-page {
  background: var(--color-surface-card);
}

/* Match the 0.6x section rhythm the country and CSR pages already run. */
.ms-page .section {
  padding-block: calc(var(--space-96) * 0.6);
}

.ms-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  transition: gap var(--motion-fast);
}

.ms-link:hover {
  gap: var(--space-12);
}

/* ----------------------------------------------------------------- intro -- */

.ms-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: var(--space-64);
  align-items: start;
}

.ms-intro__copy > .ds-h2 {
  margin: var(--space-16) 0 var(--space-24);
  max-width: 20ch;
}

.ms-intro__copy > .ds-body-large {
  margin: 0 0 var(--space-20);
  max-width: 68ch;
}

.ms-intro__copy > .ds-body-large:last-child {
  margin-bottom: 0;
}

/* No brochure beside the overview: rather than leave the right column empty,
   the copy runs the full width as one block (user, 27 Oct 2026: not split
   into two columns). */
.ms-intro--full {
  grid-template-columns: minmax(0, 1fr);
}

.ms-intro--full .ms-intro__copy > .ds-body-large {
  max-width: none;
}

/* A deck overview set out in parts (Photovoltaic): each part in the light
   blue box used on the PFAS, Green Hydrogen and membranes pages, side by
   side at equal height. Text set like the case-study steps. */
.ms-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.ms-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
  padding: clamp(20px, 2vw, 28px);
  border: var(--border-thin) solid #cfe6f5;
  border-radius: var(--radius-large);
  background: #f3f9fd;
}

.ms-box__title {
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
  text-wrap: balance;
}

.ms-box p {
  margin: 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);
}

.ms-box strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.ms-brochure {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-neutral-light);
  transition: border-color var(--motion-fast), transform var(--motion-fast),
    box-shadow var(--motion-fast);
}

.ms-brochure:hover {
  border-color: var(--color-brand-primary);
  transform: translateY(-3px);
  box-shadow: var(--elevation-hover);
}

.ms-brochure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
  border: var(--border-thin) solid var(--color-border-light);
  background: var(--color-surface-card);
}

.ms-brochure__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ms-brochure__label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.ms-brochure__note {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ms-brochure__cta {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

/* --------------------------------------------------------------- gallery -- */

.ms-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
}

/* Five photos as the deck lays them out: two over three, none left alone. */
.ms-gallery--5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ms-gallery--5 .ms-shot {
  grid-column: span 2;
}

.ms-gallery--5 .ms-shot:nth-child(-n + 2) {
  grid-column: span 3;
}

.ms-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.ms-shot img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-large);
  border: var(--border-thin) solid var(--color-border-light);
  background: var(--color-surface-neutral-dark);
}

/* The photo's title, so it stands out (user review, 30 Oct 2026). Size,
   face and weight are governed by assets/typography.css. */
.ms-shot figcaption {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-text-primary);
}

/* A photo's line of text and link, where the content gives them
   (Semiconductor, 2 Nov 2026). */
.ms-shot__text {
  margin: calc(var(--space-12) * -0.5) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.ms-shot__link {
  margin-top: auto;
  color: var(--color-brand-primary);
  text-decoration: none;
}

/* A second set of photos under the solutions, set off like a second
   chemicals block. */
.ms-subgallery {
  margin-top: calc(var(--space-64) * 0.8);
  padding-top: calc(var(--space-64) * 0.8);
  border-top: var(--border-thin) solid var(--color-border-light);
}

/* ------------------------------------------------------------- solutions -- */

.ms-solutions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-48);
  align-items: start;
}

.ms-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-12);
}

.ms-list li {
  position: relative;
  padding-left: var(--space-24);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* A solutions item with a page of its own. content.css sets every link in
   #main-content to the secondary colour with no underline; this matches its
   specificity and loads after it. */
#main-content .ms-list a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--motion-fast);
}

#main-content .ms-list a:hover {
  text-decoration-color: currentColor;
}

.ms-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
}

.ms-list--tight li {
  font-size: 15px;
  line-height: 1.6;
}

.ms-processes {
  padding: var(--space-32);
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-neutral-light);
}

.ms-processes__title {
  margin: 0 0 var(--space-20);
  padding-bottom: var(--space-16);
  border-bottom: var(--border-thin) solid var(--color-border-light);
}

/* ------------------------------------------------------------- flowchart -- */

.ms-flowchart {
  margin: 0 0 var(--space-48);
  padding: var(--space-24);
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-card);
  overflow-x: auto;
}

.ms-flowchart img {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
  margin-inline: auto;
}

/* The abbreviation table decodes the labels printed on the schematic, so it
   sits beside the diagram instead of a scroll below it. min-width: 0 keeps the
   chart column from being forced open by the 640px minimum on the image — the
   figure scrolls internally, as it already does on narrow screens. */
.ms-process {
  display: grid;
  gap: var(--space-32);
  align-items: start;
}

.ms-process--split {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
}

.ms-process__chart,
.ms-process__key {
  min-width: 0;
}

.ms-process__chart .ms-flowchart:last-child {
  margin-bottom: 0;
}

/* Long meanings such as "Reverse Osmosis/Demineralisation /Softener/Dealkaliser"
   have no spaces to break on in the narrower column. */
.ms-process__key td {
  overflow-wrap: break-word;
}

/* Below this the chart column drops under the 640px the schematic needs, so
   the key moves beneath it rather than making the diagram scroll. */
@media (max-width: 1120px) {
  .ms-process--split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ms-abbr__title {
  margin: 0 0 var(--space-16);
}

.ms-abbr__wrap {
  overflow-x: auto;
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-medium);
  background: var(--color-surface-card);
}

.ms-abbr table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.ms-abbr th,
.ms-abbr td {
  padding: var(--space-12) var(--space-20);
  border-bottom: var(--border-thin) solid var(--color-border-light);
  text-align: left;
}

/* Meanings like "Reverse Osmosis/Demineralisation /Softener/Dealkaliser" run
   slash-joined with no spaces; let them wrap inside the cell instead of
   pushing the table past its frame (31 Oct 2026). */
.ms-abbr td:last-child {
  overflow-wrap: anywhere;
}

.ms-abbr th {
  background: var(--color-surface-neutral-light);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.ms-abbr td:first-child {
  width: 30%;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.ms-abbr tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------------------------ case study -- */

/* Same composition as the Green Hydrogen page's integrated-solution section
   (.gh-integ / .gh-steps): lead on the left, the study as a timeline of icon
   steps on the right. assets/market-segments.js fills the line and lights
   each step as it passes 60% of the viewport, and pins the lead column while
   the steps scroll when it fits on screen; without it the line is drawn solid
   and every step reads at full strength. */
.ms-case {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-64);
  align-items: start;
}

.ms-case__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 0;
}

.ms-case__lead > * {
  margin: 0;
}

.ms-case__lead > .ds-eyebrow + .ds-h2 {
  margin-top: calc(var(--space-16) - var(--space-24));
}

.ms-case__lead.is-sticky {
  position: sticky;
  top: 128px;
}

.ms-case__media {
  border-radius: var(--radius-large);
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border-light);
  background: var(--color-surface-neutral-dark);
}

.ms-case__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

.ms-case__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

/* "In depth" companion study: a quiet card under the main call to action. */
.ms-case__more {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-card);
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}

.ms-case__more:hover {
  border-color: var(--color-brand-primary);
  transform: translateY(-2px);
}

.ms-case__more-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f3fa;
  background: color-mix(in srgb, var(--color-brand-primary) 9%, var(--color-surface-card));
  color: var(--color-brand-primary);
}

.ms-case__more-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ms-case__more-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.ms-case__more-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-text-primary);
}

.ms-case__more-arrow {
  color: var(--color-brand-primary);
  transition: transform var(--motion-fast);
}

.ms-case__more:hover .ms-case__more-arrow {
  transform: translateX(3px);
}

/* Link-only studies (a sector whose study has its own page). */
.ms-case__cards {
  display: grid;
  gap: var(--space-16);
}

.ms-case__card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-8) var(--space-20);
  padding: var(--space-24);
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-card);
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}

.ms-case__card:hover {
  border-color: var(--color-brand-primary);
  transform: translateY(-2px);
}

.ms-case__card > .ms-step__icon {
  grid-row: span 2;
}

.ms-case__card > p {
  margin: 0;
  padding-top: var(--space-4);
  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);
}

.ms-case__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

/* ------------------------------------------------------ case-study steps -- */

#main-content .ms-steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.ms-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-20);
  padding-bottom: var(--space-40);
}

.ms-step:last-child {
  padding-bottom: 0;
}

.ms-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: var(--color-brand-primary);
}

.ms-step__icon {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.ms-step__body {
  min-width: 0;
  padding-top: var(--space-12);
}

.ms-steps .ms-step__body > * {
  margin: 0;
}

.ms-steps .ms-step__body > * + * {
  margin-top: var(--space-12);
}

.ms-steps .ms-step__body > .ms-case__label + *,
.ms-steps .ms-step__body > .ms-step__title + * {
  margin-top: var(--space-8);
}

.ms-step__body p {
  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);
}

.ms-step__body strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.ms-step__title {
  color: var(--color-text-primary);
  text-wrap: balance;
}

/* Scroll-driven state, set by assets/market-segments.js. */
.ms-steps.is-live .ms-step::before {
  content: none;
}

.ms-steps.is-live::before,
.ms-steps.is-live::after {
  content: '';
  position: absolute;
  left: 23px;
  top: var(--line-top, 24px);
  height: var(--line-h, 0);
  width: 2px;
  border-radius: 2px;
}

.ms-steps.is-live::before {
  background: var(--color-border-medium);
}

.ms-steps.is-live::after {
  background: var(--color-brand-primary);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  transition: transform 0.2s linear;
}

.ms-steps.is-live .ms-step__icon {
  background: var(--color-surface-card);
  color: var(--color-brand-primary);
  border: var(--border-thin) solid var(--color-border-medium);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.ms-steps.is-live .ms-step.is-active .ms-step__icon {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px #b8daee;
  box-shadow: 0 0 0 5px var(--color-surface-card),
    0 0 0 6px color-mix(in srgb, var(--color-brand-primary) 28%, var(--color-surface-card));
}

.ms-steps.is-live .ms-step__body {
  opacity: 0.45;
  transition: opacity 0.35s ease;
}

.ms-steps.is-live .ms-step.is-active .ms-step__body {
  opacity: 1;
}

@media (max-width: 680px) {
  .ms-step {
    gap: var(--space-16);
    padding-bottom: var(--space-32);
  }

  .ms-study .ms-study__highlights {
    margin-left: 0;
  }

  .ms-study .ms-study__facts {
    grid-template-columns: 1fr;
  }

  .ms-case__card {
    grid-template-columns: 1fr;
    padding: var(--space-20);
  }

  .ms-case__card > .ms-step__icon {
    grid-row: auto;
  }
}

/* ------------------------------------------------------------------ news -- */

.ms-news {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--space-40);
  align-items: center;
}

.ms-news__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-large);
  border: var(--border-thin) solid var(--color-border-light);
  background: var(--color-surface-card);
}

.ms-news__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  align-items: flex-start;
}

.ms-news__copy > .ds-body-large {
  margin: 0;
  max-width: 70ch;
}

/* ---------------------------------------------- consultation phone stack -- */

.ms-page .us-contact__details p span {
  display: block;
}

.ms-page .us-contact__details p a {
  color: var(--color-text-primary);
}

.ms-page .us-contact__details p a:hover {
  color: var(--color-brand-primary);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
  .ms-intro,
  .ms-solutions,
  .ms-case,
  .ms-news {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .ms-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-gallery--5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ms-boxes {
    grid-template-columns: 1fr;
  }

  .ms-brochure {
    flex-direction: row;
    align-items: center;
  }

  .ms-brochure img {
    width: 120px;
    flex: 0 0 120px;
  }

  .ms-news__media {
    max-width: 240px;
  }
}

@media (max-width: 680px) {
  .ms-gallery {
    grid-template-columns: 1fr;
  }

  .ms-gallery--5 .ms-shot,
  .ms-gallery--5 .ms-shot:nth-child(-n + 2) {
    grid-column: auto;
  }

  .ms-brochure {
    flex-direction: column;
  }

  .ms-brochure img {
    width: 100%;
    flex: none;
  }

  .ms-processes {
    padding: var(--space-20);
  }

  .ms-flowchart {
    padding: var(--space-12);
  }
}

/* --------------------------------------------------- nested solution list -- */

.ms-list--nested {
  margin-top: var(--space-12);
  padding-left: var(--space-4);
  gap: var(--space-8);
}

.ms-list--nested li {
  font-size: 15px;
  color: var(--color-text-secondary);
}

.ms-list--nested li::before {
  top: 0.6em;
  width: 4px;
  height: 4px;
  background: var(--color-border-medium);
}

/* A single full-width column when there is no side panel to pair with. */
.ms-solutions--single {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16) var(--space-48);
  align-items: start;
}

.ms-solutions--single > .ms-list {
  display: block;
  columns: 2;
  column-gap: var(--space-48);
  grid-column: 1 / -1;
}

.ms-solutions--single > .ms-list > li {
  break-inside: avoid;
  margin-bottom: var(--space-12);
}

/* ------------------------------------------------------------- downloads -- */

.ms-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-40);
  padding-top: var(--space-24);
  border-top: var(--border-thin) solid var(--color-border-light);
}

.ms-download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-20);
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-pill);
  background: var(--color-surface-neutral-light);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  transition: border-color var(--motion-fast), color var(--motion-fast),
    transform var(--motion-fast);
}

.ms-download:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  transform: translateY(-2px);
}

.ms-download__icon {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  padding: 3px 6px;
  border-radius: var(--radius-small);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

/* ------------------------------------------------------ process chemicals -- */

.ms-chem + .ms-chem {
  margin-top: calc(var(--space-64) * 0.8);
  padding-top: calc(var(--space-64) * 0.8);
  border-top: var(--border-thin) solid var(--color-border-light);
}

.ms-chem__intro {
  margin: 0 0 var(--space-20);
  max-width: 78ch;
}

.ms-chem__list {
  margin-bottom: var(--space-24);
}

.ms-chem .ms-abbr__wrap {
  overflow-x: auto;
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-medium);
  background: var(--color-surface-card);
}

.ms-chem .ms-abbr__wrap + .ms-abbr__wrap {
  margin-top: var(--space-24);
}

.ms-chem table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.ms-chem th,
.ms-chem td {
  padding: var(--space-12) var(--space-20);
  border-bottom: var(--border-thin) solid var(--color-border-light);
  text-align: left;
  vertical-align: top;
}

.ms-chem th {
  background: var(--color-surface-neutral-light);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.ms-chem tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------- blocks without a media column -- */

.ms-news--nomedia {
  grid-template-columns: 1fr;
}

@media (max-width: 1024px) {
  .ms-solutions--single,
  .ms-solutions--single > .ms-list {
    columns: 1;
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------- industrial index -- */

.ms-index-intro > .ds-h2 {
  margin: var(--space-16) 0 var(--space-24);
  max-width: 24ch;
}

.ms-index-intro > .ds-body-large {
  margin: 0 0 var(--space-20);
  max-width: 78ch;
}

.ms-index-intro > .ds-body-large:last-child {
  margin-bottom: 0;
}

.ms-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}

.ms-index-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-card);
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-large);
  overflow: hidden;
  transition: transform var(--motion-normal), box-shadow var(--motion-normal),
    border-color var(--motion-normal);
}

.ms-index-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-medium);
  box-shadow: var(--elevation-hover);
}

.ms-index-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-neutral-dark);
}

.ms-index-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-normal);
}

.ms-index-card:hover .ms-index-card__media img {
  transform: scale(1.04);
}

.ms-index-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
}

.ms-index-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  transition: color var(--motion-fast);
}

.ms-index-card:hover .ms-index-card__title {
  color: var(--color-brand-primary);
}

.ms-index-card__lead {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-light);
  line-height: 1.65;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-index-card__cta {
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: var(--border-thin) solid var(--color-border-light);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

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

@media (max-width: 680px) {
  .ms-index-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------- deck-built sector pages -- */
/* Infrastructure and Municipal (src/data/segmentContent/deckSegments.js): a
   sub-heading over the solutions list, and several case studies per page,
   each with its own photos. Body copy follows the sitewide
   clamp(15px, 1.4vw, 17px) / 400 / 1.6; nothing renders under 11px. */

.ms-solutions__subtitle {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-8);
}

.ms-studies {
  display: grid;
  gap: var(--space-64);
}

.ms-study + .ms-study {
  padding-top: var(--space-64);
  border-top: var(--border-thin) solid var(--color-border-light);
}

.ms-study__title {
  margin: 0;
  max-width: 64ch;
  text-wrap: balance;
}

.ms-study__media {
  display: grid;
  gap: var(--space-16);
  min-width: 0;
}

.ms-study__shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

.ms-study__shots > .ms-study__shot:only-child {
  grid-column: 1 / -1;
}

/* Three photos under the lead share one row instead of two plus one. */
.ms-study__shots--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ms-study__shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ms-study__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-large);
  border: var(--border-thin) solid var(--color-border-light);
  background: var(--color-surface-neutral-dark);
}

/* The captioned photos sit as near-square tiles in the deck; even them out. */
.ms-study__shots > .ms-study__shot:not(:only-child) img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ms-study__shot figcaption {
  display: grid;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-regular);
  line-height: 1.45;
  color: var(--color-text-secondary);
}

.ms-study__caption-line:first-child {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* Every property set: the legacy bundle (index-DC2gwfO6.css) already raises
   sup with position/top, and a second vertical-align would double it. */
.ms-study sup {
  position: relative;
  top: -0.4em;
  vertical-align: baseline;
  font-size: 11px;
  line-height: 0;
}

.ms-study__body {
  display: grid;
  gap: var(--space-40);
  min-width: 0;
}

/* A reference's labelled facts, above its timeline and starting on the same
   edge as the step icons: the light blue box, label over value, two to a
   row. */
.ms-study__facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16) var(--space-24);
  padding: clamp(20px, 2vw, 28px);
  border: var(--border-thin) solid #cfe6f5;
  border-radius: var(--radius-large);
  background: #f3f9fd;
}

.ms-study__fact {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

/* With an odd count the first fact (the project or site) runs the full
   width so the rest pair up; an even count simply pairs, so no fact sits
   alone in its row. */
.ms-study__fact:first-child:nth-last-child(odd) {
  grid-column: 1 / -1;
}

.ms-study__fact dt {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.ms-study__fact dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* Sits under the timeline, lined up with the step text. */
.ms-study__highlights {
  margin: 0 0 0 calc(48px + var(--space-20));
  display: grid;
  gap: var(--space-6);
  padding: var(--space-20) var(--space-24);
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-card);
}

.ms-study__highlights-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  color: var(--color-brand-primary);
}

.ms-study__highlights-line {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  color: var(--color-text-primary);
}

/* ---------------------------------------------- tables in other sections -- */
/* Sector content the source sets out as tables (Semiconductor, 2 Nov 2026):
   the process chemicals table frame, under the source's own table titles,
   in the In operation, Products and solutions and Process schematic
   sections too. Table headers are 11px above, the sitewide floor. */
.ms-chem .ms-table + .ms-table {
  margin-top: var(--space-32);
}

.ms-process__tables {
  margin-top: var(--space-40);
}

/* Three worked examples side by side at equal height. */
.ms-boxes--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .ms-boxes--3 {
    grid-template-columns: 1fr;
  }
}