/* Sustainability page, rebuilt 30 Oct 2026 to the Sustainability team's
   ESG content document. Layout only: every treatment here is an existing
   house pattern (membranes pillar cards, light-blue boxes, range table,
   1.3fr / 1fr text and image split), scoped to this page. */

.handoff-page--sustainability .sus-h3 {
  margin: 0 0 20px; font-family: var(--font-display); font-size: 20px; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.02em; color: #0f172a;
}
.handoff-page--sustainability .sus-block + .sus-block { margin-top: clamp(40px, 5vw, 64px); }
.handoff-page--sustainability .sus-note { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: #64748b; }

/* Introduction: two paragraphs side by side. */
.handoff-page--sustainability .sus-intro__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px);
}
.handoff-page--sustainability .sus-intro__grid .lead { max-width: none; margin: 0; }

/* Pillar cards (membranes "why" cards). */
.handoff-page--sustainability .sus-pillars {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px);
}
.handoff-page--sustainability .sus-pillars > li {
  position: relative; overflow: hidden; isolation: isolate; height: 100%;
  padding: clamp(24px, 2.2vw, 32px);
  border: 1px solid #d6e8f5; border-radius: 20px;
  background: linear-gradient(180deg, #eef6fc 0%, #ffffff 58%);
  box-shadow: 0 1px 2px rgba(3,21,47,0.04), 0 20px 44px -30px rgba(0,124,195,0.38);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease;
}
.handoff-page--sustainability .sus-pillars > li::after {
  content: ""; position: absolute; z-index: -1; top: -70px; right: -70px;
  width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,0.16) 0%, rgba(6,182,212,0) 70%);
}
.handoff-page--sustainability .sus-pillars > li:hover {
  transform: translateY(-4px); border-color: rgba(0,124,195,0.38);
  box-shadow: 0 2px 6px rgba(3,21,47,0.04), 0 26px 52px -26px rgba(0,124,195,0.5);
}
.handoff-page--sustainability .sus-pillar__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.handoff-page--sustainability .sus-pillar__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #007cc3 0%, #06b6d4 100%);
  box-shadow: 0 12px 22px -12px rgba(0,124,195,0.75);
}
.handoff-page--sustainability .sus-pillar__icon svg { width: 24px; height: 24px; }
.handoff-page--sustainability .sus-pillar__num { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; line-height: 1; color: #7b9db8; }
.handoff-page--sustainability .sus-pillar__name {
  margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.018em; color: #0f172a;
}
.handoff-page--sustainability .sus-pillar__body,
.handoff-page--sustainability .sus-box p,
.handoff-page--sustainability .sus-list li {
  margin: 0; font-size: clamp(15px, 1.4vw, 17px); font-weight: 400; line-height: 1.6; color: #64748b;
}

/* Light-blue boxes (PFAS / Green Hydrogen / membranes benefit boxes). */
.handoff-page--sustainability .sus-boxes {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px);
}
.handoff-page--sustainability .sus-box {
  height: 100%; padding: clamp(20px, 2vw, 28px);
  border: 1px solid #cfe6f5; border-radius: 16px; background: #f3f9fd;
}
.handoff-page--sustainability .sus-box__head {
  margin: 0 0 10px; font-family: var(--font-display); font-size: 18px; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.018em; color: #0f172a;
}
.handoff-page--sustainability .sus-box p + .sus-list { margin-top: 16px; }

/* Bullet lists with a bold lead-in. */
.handoff-page--sustainability .sus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.handoff-page--sustainability .sus-list li { position: relative; padding-left: 20px; }
.handoff-page--sustainability .sus-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.68em; width: 6px; height: 6px;
  border-radius: 50%; background: #007cc3;
}
.handoff-page--sustainability .sus-list strong { font-weight: 600; color: #0f172a; }
.handoff-page--sustainability .sus-list a { color: #007cc3; font-weight: 600; text-decoration: none; }
.handoff-page--sustainability .sus-list a:hover,
.handoff-page--sustainability .sus-list a:focus-visible { text-decoration: underline; }
.handoff-page--sustainability .sus-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); row-gap: 16px; }

/* Tables (membranes range table). */
.handoff-page--sustainability .sus-tablewrap {
  overflow-x: auto; border: 1px solid #e3ecf3; border-radius: 14px; background: #fff;
}
/* Commitments: full width, light-blue header and banding, timelines as chips. */
.handoff-page--sustainability .sus-tablewrap--commit { border-color: #cfe6f5; }
.handoff-page--sustainability .sus-tablewrap--commit .sus-table { min-width: 0; font-size: 16px; }
.handoff-page--sustainability .sus-tablewrap--commit .sus-table thead th {
  background: #dcedfb; color: #0a2740; border-bottom-color: #cfe6f5;
  padding-top: 15px; padding-bottom: 15px;
}
.handoff-page--sustainability .sus-tablewrap--commit .sus-table th,
.handoff-page--sustainability .sus-tablewrap--commit .sus-table td { padding-left: clamp(18px, 2.2vw, 32px); padding-right: clamp(18px, 2.2vw, 32px); vertical-align: middle; }
.handoff-page--sustainability .sus-tablewrap--commit .sus-table thead th:last-child,
.handoff-page--sustainability .sus-tablewrap--commit .sus-table td { width: 28%; }
.handoff-page--sustainability .sus-tablewrap--commit .sus-table tbody tr:nth-child(even) { background: #f0f7fd; }
.handoff-page--sustainability .sus-tablewrap--commit .sus-table tbody th,
.handoff-page--sustainability .sus-tablewrap--commit .sus-table tbody td { border-bottom-color: #e3f0f9; padding-top: 16px; padding-bottom: 16px; }
.handoff-page--sustainability .sus-chip {
  display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px;
  background: #e2f0fd; border: 1px solid rgba(0, 124, 195, 0.22);
  font-size: 14px; font-weight: 600; line-height: 1.3; color: #006aa8; white-space: nowrap;
}
.handoff-page--sustainability .sus-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.handoff-page--sustainability .sus-table th,
.handoff-page--sustainability .sus-table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid #edf3f8; line-height: 1.5; }
.handoff-page--sustainability .sus-table thead th {
  background: #f4f8fb; color: #0a2740; font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
}
.handoff-page--sustainability .sus-table tbody th { color: #0a2740; font-weight: 600; }
.handoff-page--sustainability .sus-table tbody td { color: #35495e; font-variant-numeric: tabular-nums; }
.handoff-page--sustainability .sus-table tbody tr:last-child th,
.handoff-page--sustainability .sus-table tbody tr:last-child td { border-bottom: 0; }
.handoff-page--sustainability .sus-table .sus-table__date { white-space: nowrap; }

/* Performance counters: the page's metric strip, four to a row. The labels are
   whole phrases, so they read in sentence case at the sitewide metadata size
   (13px, the standard for card and stat labels), lighter than the figure. */
.handoff-page--sustainability .sus-metrics { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#main-content .handoff-page--sustainability .sus-metrics .metric__label {
  margin-top: 12px; max-width: 32ch; font-family: var(--type-font-display); font-size: var(--type-metadata);
  font-weight: var(--type-weight-subheading); line-height: 1.45;
  letter-spacing: 0; text-transform: none; color: rgba(100, 116, 139, 0.85);
}

/* SDG orbit: the goal card sits beside the orbit, not beside the heading, so
   both are in view together and the card stays clear of the fixed header. */
@media (min-width: 1081px) {
  .handoff-page--sustainability .sdgo__layout { grid-template-rows: auto auto; row-gap: 0; }
  .handoff-page--sustainability .sdgo__main { display: contents; }
  .handoff-page--sustainability .sdgo__intro { grid-column: 1; grid-row: 1; }
  .handoff-page--sustainability .sdgo__stagewrap { grid-column: 1; grid-row: 2; }
  .handoff-page--sustainability .sdgo__panel { grid-column: 2; grid-row: 2; align-self: start; top: 112px; }
}

/* Environment tabs: the Services lifecycle tab rail (numbered badges, active
   underline), with each topic in a light-blue box. */
.handoff-page--sustainability .sus-tabs__rail {
  display: flex; align-items: flex-end; width: 100%; overflow-x: auto; overflow-y: hidden;
  margin-bottom: 28px; border-bottom: 1px solid rgba(203, 213, 225, 0.9); scrollbar-width: none;
}
.handoff-page--sustainability .sus-tabs__rail::-webkit-scrollbar { display: none; }
.handoff-page--sustainability .sus-tabs__list { display: flex; align-items: center; min-width: max-content; gap: 32px; padding-bottom: 13px; }
.handoff-page--sustainability .sus-tabs__tab {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 4px 0;
  border: 0; background: transparent; text-align: left; cursor: pointer; user-select: none;
}
.handoff-page--sustainability .sus-tabs__tab:focus-visible { outline: 2px solid #007cc3; outline-offset: 4px; }
.handoff-page--sustainability .sus-tabs__badge {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #fff;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; color: #94a3b8;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.handoff-page--sustainability .sus-tabs__tab:hover .sus-tabs__badge { border-color: #64748b; color: #334155; }
.handoff-page--sustainability .sus-tabs__tab.is-active .sus-tabs__badge {
  background: #e2f0fd; border-color: rgba(0, 124, 195, 0.4); color: #007cc3; box-shadow: 0 2px 8px rgba(0, 124, 195, 0.08);
}
.handoff-page--sustainability .sus-tabs__label {
  white-space: nowrap; font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; transition: color 0.3s ease;
}
.handoff-page--sustainability .sus-tabs__tab:hover .sus-tabs__label { color: #334155; }
.handoff-page--sustainability .sus-tabs__tab.is-active .sus-tabs__label { color: #007cc3; }
.handoff-page--sustainability .sus-tabs__underline {
  position: absolute; bottom: -14px; left: 0; right: 0; height: 2.5px; background: #007cc3;
  opacity: 0; transition: opacity 0.3s ease;
}
.handoff-page--sustainability .sus-tabs__tab.is-active .sus-tabs__underline { opacity: 1; }
.handoff-page--sustainability .sus-tabs__panel { height: auto; padding: clamp(24px, 3vw, 40px); }
.handoff-page--sustainability .sus-tabs__panel:focus-visible { outline: 2px solid #007cc3; outline-offset: 3px; }
.handoff-page--sustainability .sus-tabs__panel + .sus-tabs__panel { margin-top: 16px; }
.handoff-page--sustainability .sus-box p.sus-tabs__summary { margin: 0 0 24px; max-width: 62ch; font-size: clamp(16px, 1.5vw, 18px); color: #35495e; }
/* Two newspaper columns, so a short point never leaves a gap beside a long one. */
.handoff-page--sustainability .sus-tabs__panel .sus-list--2 { display: block; columns: 2; column-gap: clamp(24px, 4vw, 56px); }
.handoff-page--sustainability .sus-tabs__panel .sus-list--2 li { break-inside: avoid; margin-bottom: 18px; }
.handoff-page--sustainability .sus-tabs__panel .sus-list--2 li:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .handoff-page--sustainability .sus-tabs__panel .sus-list--2 { columns: 1; }
}
/* Phones: the three tabs share the width and their names wrap, so none is
   scrolled out of sight. */
@media (max-width: 640px) {
  .handoff-page--sustainability .sus-tabs__list { min-width: 0; width: 100%; gap: 14px; align-items: stretch; }
  .handoff-page--sustainability .sus-tabs__tab { flex: 1 1 0; min-width: 0; gap: 8px; }
  .handoff-page--sustainability .sus-tabs__label { white-space: normal; letter-spacing: 0.04em; line-height: 1.3; }
}

/* Sitewide 11px floor (Home's smallest text) for the SDG orbit's own small
   labels, which were set at 8 to 10.5px. */
#main-content .handoff-page--sustainability .sdgo__num,
#main-content .handoff-page--sustainability .sdgp__chip { font-size: var(--type-compact); }
#main-content .handoff-page--sustainability .sdgo__hub-name { font-size: clamp(11px, 1.15vw, 13px); }
/* One topic at a time only once the script has run; without it the three
   boxes simply stack, headings and all. */
html.js .handoff-page--sustainability [data-sus-tabs].is-ready .sus-tabs__panel { display: none; margin-top: 0; }
html.js .handoff-page--sustainability [data-sus-tabs].is-ready .sus-tabs__panel.is-active { display: block; animation: sus-tab-in 0.35s ease; }
html.js .handoff-page--sustainability [data-sus-tabs].is-ready .sus-tabs__panel-head {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html:not(.js) .handoff-page--sustainability .sus-tabs__rail { display: none; }
@keyframes sus-tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
  .handoff-page--sustainability .sus-tabs__list { gap: 56px; }
}

/* Icon cards (People & communities, Governance): the page's light-blue box on
   the white band, a white card on the grey sections; icon, title, text. */
.handoff-page--sustainability .sus-cards {
  list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 22px);
}
.handoff-page--sustainability .sus-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.handoff-page--sustainability .sus-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.handoff-page--sustainability .sus-card {
  height: 100%; padding: clamp(22px, 2.2vw, 30px); border-radius: 16px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease;
}
.handoff-page--sustainability .sus-card--tint { background: #f3f9fd; border: 1px solid #cfe6f5; }
.handoff-page--sustainability .sus-card--white {
  background: #fff; border: 1px solid #e3ecf3; box-shadow: 0 1px 2px rgba(3,21,47,0.04), 0 18px 40px -32px rgba(3,21,47,0.35);
}
.handoff-page--sustainability .sus-card:hover { transform: translateY(-3px); border-color: rgba(0,124,195,0.38); }
.handoff-page--sustainability .sus-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-bottom: 18px; border-radius: 12px; color: #007cc3;
}
.handoff-page--sustainability .sus-card--tint .sus-card__icon { background: #fff; border: 1px solid #cfe6f5; }
.handoff-page--sustainability .sus-card--white .sus-card__icon { background: #e2f0fd; }
.handoff-page--sustainability .sus-card__icon svg { width: 22px; height: 22px; }
.handoff-page--sustainability .sus-card__title {
  margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.018em; color: #0f172a;
}
.handoff-page--sustainability .sus-card__title a { color: #007cc3; text-decoration: none; }
.handoff-page--sustainability .sus-card__title a:hover,
.handoff-page--sustainability .sus-card__title a:focus-visible { text-decoration: underline; }
.handoff-page--sustainability .sus-card__body { margin: 0; font-size: clamp(15px, 1.25vw, 16px); font-weight: 400; line-height: 1.6; color: #64748b; }

/* Governance: the materiality assessment leads as a full-width, pillar-style
   feature band (figure left, text right) above the six system cards. */
.handoff-page--sustainability .sus-gov__grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.handoff-page--sustainability .sus-gov__feature {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 4vw, 64px);
  padding: clamp(26px, 2.6vw, 36px) clamp(26px, 3.2vw, 44px); border: 1px solid #d6e8f5; border-radius: 20px;
  background: linear-gradient(120deg, #eaf4fc 0%, #ffffff 70%);
  box-shadow: 0 1px 2px rgba(3,21,47,0.04), 0 20px 44px -30px rgba(0,124,195,0.38);
}
.handoff-page--sustainability .sus-gov__text { max-width: 68ch; padding-left: clamp(28px, 4vw, 64px); border-left: 1px solid #d6e8f5; }
.handoff-page--sustainability .sus-gov__feature::after {
  content: ""; position: absolute; z-index: -1; top: -80px; right: -80px; width: 220px; height: 220px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,0.16) 0%, rgba(6,182,212,0) 70%);
}
.handoff-page--sustainability .sus-gov__figure { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.handoff-page--sustainability .sus-gov__num {
  font-family: var(--font-display); font-size: clamp(56px, 6vw, 84px); font-weight: 500; line-height: 1;
  letter-spacing: -0.03em; color: #0f172a; font-variant-numeric: tabular-nums;
}
.handoff-page--sustainability .sus-gov__unit { font-family: var(--font-display); font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; color: #007cc3; }

/* Industry engagement: one card per forum, newest first, date as a chip. */
.handoff-page--sustainability .sus-events {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.handoff-page--sustainability .sus-event {
  display: flex; flex-direction: column; gap: 12px; height: 100%; padding: clamp(20px, 2vw, 26px);
  background: #fff; border: 1px solid #e3ecf3; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(3,21,47,0.04), 0 18px 40px -32px rgba(3,21,47,0.35);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .25s ease;
}
.handoff-page--sustainability .sus-event:hover { transform: translateY(-3px); border-color: rgba(0,124,195,0.38); }
.handoff-page--sustainability .sus-event__date { align-self: flex-start; }
.handoff-page--sustainability .sus-event__forum {
  margin: 4px 0 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.012em; color: #0f172a;
}
.handoff-page--sustainability .sus-event__what { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.55; color: #64748b; }

@media (max-width: 1100px) {
  .handoff-page--sustainability .sus-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .handoff-page--sustainability .sus-gov__feature { grid-template-columns: 1fr; row-gap: 18px; }
  .handoff-page--sustainability .sus-gov__text { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid #d6e8f5; }
}
@media (max-width: 860px) {
  .handoff-page--sustainability .sus-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .handoff-page--sustainability .sus-cards--3,
  .handoff-page--sustainability .sus-cards--2,
  .handoff-page--sustainability .sus-events { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .handoff-page--sustainability .sus-card,
  .handoff-page--sustainability .sus-event { transition: none; }
  .handoff-page--sustainability .sus-card:hover,
  .handoff-page--sustainability .sus-event:hover { transform: none; }
}

/* Text and image split: text column wider than the image. */
.handoff-page--sustainability .sus-split {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(32px, 4vw, 48px);
}
.handoff-page--sustainability .sus-split .section-intro { margin-bottom: 0; }
.handoff-page--sustainability .sus-split__media {
  margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2;
  box-shadow: 0 20px 44px -30px rgba(3,21,47,0.45);
}
.handoff-page--sustainability .sus-split__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Policies sit under the reports. */
.handoff-page--sustainability .sus-reports-sub { margin-top: clamp(40px, 5vw, 56px); }
.handoff-page--sustainability .sus-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .handoff-page--sustainability .sus-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handoff-page--sustainability .sus-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handoff-page--sustainability .sus-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .handoff-page--sustainability .sus-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handoff-page--sustainability .sus-intro__grid,
  .handoff-page--sustainability .sus-split,
  .handoff-page--sustainability .sus-list--2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .handoff-page--sustainability .sus-grid-3 { grid-template-columns: 1fr; }
  .handoff-page--sustainability .sus-pillars,
  .handoff-page--sustainability .sus-boxes { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .handoff-page--sustainability .sus-metrics { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .handoff-page--sustainability [data-sus-tabs].is-ready .sus-tabs__panel.is-active { animation: none; }
  .handoff-page--sustainability .sus-pillars > li { transition: none; }
  .handoff-page--sustainability .sus-pillars > li:hover { transform: none; }
}