/* ============================================================
   04. SECTIONS — layout for each named block
   ============================================================ */

/* ============================================================
   Hero
   ------------------------------------------------------------
   Light-first, per the brief: no heavy dark slab. Depth comes
   from a soft teal wash, a hairline blueprint grid and a single
   lifted credential panel — not from a black background.
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 5.5vw, 5rem);
  background:
    radial-gradient(120% 90% at 12% 0%, #FFFFFF 0%, var(--brand-050) 46%, var(--surface-alt) 100%);
  border-bottom: 1px solid var(--line);
}

/* Blueprint grid — 1px lines at 4% opacity. Reads as precision
   engineering paper at close range, invisible at a glance. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  rgba(0, 114, 118, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 114, 118, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}

/* The heading spans the full measure above the two-column body.
   That is what keeps it inside three lines at the display size —
   the constraint is solved with layout, not by shrinking type. */
.hero-lead { margin-bottom: clamp(2rem, 3.6vw, 3rem); }

.hero-grid {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); }
}
.hero-copy { min-width: 0; }

.hero h1 {
  margin-top: 1.15rem;
  max-width: 21em;
  text-wrap: balance;
  color: var(--ink-900);
}
.hero h1 em {
  font-style: normal;
  color: var(--brand-700);
}
.hero .lede {
  margin-top: 1.35rem;
  max-width: 58ch;
  color: var(--ink-700);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

/* Credential rail beneath the hero copy */
.hero-trust {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 3.4vw, 2.75rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 620px) { .hero-trust { grid-template-columns: repeat(3, 1fr); } }
.hero-trust .t-item {
  background: rgba(255, 255, 255, 0.86);
  padding: 1.1rem 1.15rem;
  min-width: 0;
}
.hero-trust b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.hero-trust span {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-500);
}

/* Hero figure */
.hero-fig {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}
.hero-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-fig--wire { background: #fff; padding: clamp(1rem, 2.5vw, 2rem); }
.hero-fig--wire img { object-fit: contain; }

.fig-cap {
  padding: 0.9rem 1.15rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-500);
}
.fig-cap b { display: block; color: var(--ink-900); font-weight: 600; margin-bottom: 0.15rem; }

/* Page hero — the inner pages' shorter banner */
.phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
  background:
    radial-gradient(110% 100% at 8% 0%, #FFFFFF 0%, var(--brand-050) 52%, var(--surface-alt) 100%);
  border-bottom: 1px solid var(--line);
}
.phero h1 { margin-top: 1.1rem; max-width: 18em; text-wrap: balance; }
.phero .lede { margin-top: 1.2rem; max-width: 68ch; color: var(--ink-700); }

.phero-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 1000px) {
  .phero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* Two-up figure stack inside a page hero (bonding wires) */
.phero-figs { display: grid; gap: 1.15rem; min-width: 0; }
@media (min-width: 620px) and (max-width: 999px) {
  .phero-figs { grid-template-columns: 1fr 1fr; align-items: start; }
}
.phero-figs .fig img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* The wire render is a cut-out on white — contain it rather than crop it */
.phero-figs .fig--contain img {
  object-fit: contain;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: var(--surface);
}

/* Stat strip under a page hero */
.pstats {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 3.4vw, 2.75rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 560px) { .pstats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pstats { grid-template-columns: repeat(4, 1fr); } }
.pstat { background: rgba(255, 255, 255, 0.86); padding: 1.15rem 1.2rem; min-width: 0; }
.pstat b {
  display: block;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--brand-800);
}
.pstat span {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-500);
}


/* ============================================================
   Platform / pillar cards
   ============================================================ */

.pillars { display: grid; gap: clamp(1rem, 1.8vw, 1.35rem); }
@media (min-width: 680px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  color: inherit;
}
.pillar-no {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-700);
}
.pillar h3 { color: var(--ink-900); }
.pillar p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-500);
  flex: 1;
}
.pillar .link-go { margin-top: 0.15rem; }


/* ============================================================
   Engagement track
   ============================================================ */

.track { display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 620px)  { .track { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .track { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .track { grid-template-columns: repeat(6, 1fr); } }

.step { background: var(--surface); padding: clamp(1.25rem, 2vw, 1.6rem); min-width: 0; }
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--brand-050);
  border: 1px solid var(--line-brand);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-800);
  margin-bottom: 0.9rem;
}
.step h3 { font-size: var(--fs-h4); margin-bottom: 0.45rem; }
.step p { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-500); }

.ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.ladder-item {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-900);
}
.ladder-sep { color: var(--brand-700); font-weight: 600; }


/* ============================================================
   Two-column duo (ESG etc.)
   ============================================================ */

.duo { display: grid; gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
@media (min-width: 940px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.duo > * { min-width: 0; }

.metrics { display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 480px) { .metrics { grid-template-columns: 1fr 1fr; } }
.metric { background: var(--surface); padding: clamp(1.2rem, 2vw, 1.6rem); min-width: 0; }
.metric b {
  display: block;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--brand-800);
  font-variant-numeric: tabular-nums;
}
.metric span {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-500);
}


/* ============================================================
   EcoVadis feature — the one genuinely awarded credential
   ============================================================ */

.ecovadis {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  align-items: center;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, var(--gold-050), var(--surface) 70%);
  border: 1px solid var(--gold-100);
  border-radius: var(--r-md);
}
@media (min-width: 560px) { .ecovadis { grid-template-columns: auto minmax(0, 1fr); } }
.ecovadis img {
  width: clamp(96px, 16vw, 132px);
  height: auto;
  border-radius: var(--r-sm);
  justify-self: start;
}
.ecovadis h3 { font-size: var(--fs-h4); margin-bottom: 0.4rem; }
.ecovadis p { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-500); }


/* ============================================================
   Certification grid
   ============================================================ */

.certs {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
  text-align: center;
  padding: clamp(1.15rem, 2vw, 1.5rem) 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.cert:hover { border-color: var(--brand-200); box-shadow: var(--sh-md); }

/* Fixed-height mark well keeps every logo optically balanced
   regardless of its own aspect ratio */
.cert-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 74px;
}
.cert-mark img {
  max-height: 100%;
  max-width: 148px;
  width: auto;
  object-fit: contain;
}

/* Typographic mark — used for the four ISO standards, which
   have no logo an organisation is permitted to display */
.cert-mark--type {
  flex-direction: column;
  gap: 0.15rem;
  border-radius: var(--r-sm);
  background: var(--brand-050);
  border: 1px solid var(--line-brand);
}
.cert-mark--type i {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.cert-mark--type b {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--brand-800);
}
.cert-name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-900);
  text-wrap: balance;
}
.cert-desc { font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-500); }


/* ============================================================
   Leadership
   ============================================================ */

.leaders { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 720px) { .leaders { grid-template-columns: repeat(2, 1fr); } }

.leader {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
  align-items: start;
  min-width: 0;
}
@media (min-width: 420px) { .leader { grid-template-columns: 132px minmax(0, 1fr); } }

.leader-photo {
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
/* The supplied CEO portrait carries a caption baked into the
   lower third of the file; this crop keeps the frame on the
   face and lets the HTML own the name and title instead. */
.leader-photo--crop { object-position: center 24%; }

.leader-name { font-size: var(--fs-h4); font-weight: 600; color: var(--ink-900); }
.leader-role {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
}


/* ============================================================
   Trust / governance cards
   ============================================================ */

.tgrid { display: grid; gap: clamp(1rem, 1.8vw, 1.35rem); }
@media (min-width: 660px)  { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tgrid { grid-template-columns: repeat(3, 1fr); } }

.tcard { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.tcard h3 { font-size: var(--fs-h4); color: var(--ink-900); }
.tcard p { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-500); }


/* ============================================================
   Contact
   ============================================================ */

.contact { display: grid; gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
@media (min-width: 940px) { .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.contact > * { min-width: 0; }

.contact-lines {
  list-style: none;
  display: grid;
  gap: 1px;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.contact-lines li {
  display: grid;
  gap: 0.15rem 1rem;
  padding: 0.95rem 1.15rem;
  background: var(--surface);
  min-width: 0;
}
@media (min-width: 420px) {
  .contact-lines li { grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; }
}
.contact-lines .lab {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.contact-lines li > span:last-child {
  font-size: var(--fs-sm);
  color: var(--ink-900);
  overflow-wrap: anywhere;
}
.contact-lines a {
  display: inline-block;
  padding-block: 0.2rem;
  color: var(--brand-700);
  font-weight: 500;
}
.contact-lines a:hover { text-decoration: underline; }


/* ============================================================
   On-this-page rail
   ------------------------------------------------------------
   Previously a dark, fixed-height box with its own inner
   scrollbar — two scroll contexts fighting each other. It is
   now a light, sticky, full-height list on desktop and a
   horizontal chip rail on mobile. No nested scrollbar.
   ============================================================ */

.withrail { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); align-items: start; }
@media (min-width: 1040px) {
  .withrail { grid-template-columns: 246px minmax(0, 1fr); }
}
.withrail > * { min-width: 0; }

.toc {
  position: sticky;
  top: calc(var(--nav-h) + 1.25rem);
  align-self: start;
}
.toc-title {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.85rem;
  padding-inline: 0.25rem;
}
.toc-list { list-style: none; display: flex; }

/* Mobile: horizontal chip rail */
.toc-list {
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.35rem;
  /* Bleed to the viewport edge so the rail reads as scrollable */
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
}
.toc-list::-webkit-scrollbar { display: none; }
.toc-list a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-700);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.toc-list a:hover { border-color: var(--brand-300); color: var(--brand-800); }
.toc-list a[aria-current="true"] {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

/* Desktop: vertical list, full height, no inner scroll */
@media (min-width: 1040px) {
  .toc-list {
    flex-direction: column;
    gap: 1px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--line);
    overflow: hidden;
  }
  .toc-list li { display: block; }
  .toc-list a {
    min-height: 44px;
    border: 0;
    border-radius: 0;
    border-left: 3px solid transparent;
    background: var(--surface);
    white-space: normal;
    line-height: 1.4;
    padding: 0.7rem 0.95rem;
  }
  .toc-list a:hover { background: var(--brand-050); }
  .toc-list a[aria-current="true"] {
    background: var(--brand-050);
    border-left-color: var(--brand-500);
    color: var(--brand-800);
    font-weight: 600;
  }
}


/* ============================================================
   Product catalogue
   ============================================================ */

.cat-tools {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 2.6vw, 2rem);
}
.cat-search-wrap { position: relative; }
.cat-search-wrap > svg {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  color: var(--ink-400);
  pointer-events: none;
}
.cat-search {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem 0.75rem 2.9rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.cat-search::placeholder { color: var(--ink-500); }
.cat-search:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(0, 166, 172, 0.18);
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cat-chip {
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.cat-chip:hover { border-color: var(--brand-300); color: var(--brand-800); }
.cat-chip[aria-pressed="true"] {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

.cat-count { font-size: var(--fs-xs); color: var(--ink-500); }
.cat-count b { color: var(--ink-900); font-weight: 600; }

.cat-block { margin-bottom: clamp(2rem, 3.4vw, 3rem); }
.cat-block > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.cat-block > h3::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--brand-500);
  flex: none;
}

.cat-empty {
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  background: var(--surface-alt);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink-500);
  font-size: var(--fs-sm);
}


/* ============================================================
   Figures
   ============================================================ */

.figrow {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.fig {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.fig img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--surface-alt);
}
.fig--contain img {
  object-fit: contain;
  padding: 1.15rem;
  background: var(--surface);
}
.fig figcaption {
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-500);
}
.fig figcaption b { display: block; color: var(--ink-900); font-weight: 600; }

/* Placeholder slot for imagery the client is still supplying.
   Renders as an explicit, labelled frame rather than a broken
   image, and is trivially replaced with an <img>. */
.fig--slot {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 1.25rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, var(--surface-alt) 0 10px, #EFF3F5 10px 20px);
  border: 1px dashed var(--line-strong);
  color: var(--ink-500);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.6;
}


/* ============================================================
   Process flow — left to right
   ============================================================ */

.flow {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 560px)  { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .flow { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .flow { grid-template-columns: repeat(6, 1fr); } }

.flow-step {
  position: relative;
  background: var(--surface);
  padding: clamp(1.2rem, 2vw, 1.55rem);
  min-width: 0;
}
.flow-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin-bottom: 0.85rem;
  border-radius: var(--r-pill);
  background: var(--brand-700);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.flow-step h3 { font-size: var(--fs-h4); margin-bottom: 0.4rem; }
.flow-step p { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-500); }


/* ============================================================
   Closing CTA band
   ============================================================ */

.cta-band {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.85rem, 3.4vw, 3rem);
  background: var(--navy-900);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 880px) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band h2 { color: #fff; max-width: 20ch; text-wrap: balance; }
.cta-band p {
  margin-top: 0.85rem;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--on-navy-mut);
  max-width: 56ch;
}
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }


/* ============================================================
   06. INNER PAGES
   ------------------------------------------------------------
   Materials & Precursors, Bonding Wires and Gas & Chemical
   Delivery keep their original markup. Everything below
   restyles that markup into the new system — no structural
   rewrite, so no risk to the copy or the 98-row catalogue.
   ============================================================ */

/* ---------- Entrance classes, neutralised ----------------
   The old build hid these at opacity:0 and let JavaScript
   reveal them, so a blocked script left the page blank. The
   brief asks for minimal motion, so they simply render.     */
.rise, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }

/* ---------- Legacy band + texture aliases ---------------- */
.band--light { background: var(--surface-alt); }
.soft-tex { position: relative; isolation: isolate; }

/* The inner-page banners were dark slabs. They are now light,
   so the inherited .on-dark text colours are reset here. */
.phero.on-dark,
.phero.on-dark .lede { color: var(--ink-700); }
.phero.on-dark h1,
.phero.on-dark h2,
.phero.on-dark h3,
.phero.on-dark h4 { color: var(--ink-900); }
.phero.on-dark .kicker { color: var(--brand-700); }
.phero.on-dark .kicker::before { background: var(--brand-500); }

.phero h1 { margin-top: 1.1rem; }
.phero .lede { margin-top: 1.2rem; max-width: 70ch; }

/* Despite the name, .phero-figure is the page hero two-column
   wrapper — copy on the left, imagery on the right — not a figure. */
.phero-figure {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .phero-figure { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}
.phero-figure > * { min-width: 0; }

/* ---------- Dashboard: rail + canvas --------------------- */
.dash { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); align-items: start; }
@media (min-width: 1040px) { .dash { grid-template-columns: 246px minmax(0, 1fr); } }
.dash > * { min-width: 0; }

.rail { position: sticky; top: calc(var(--nav-h) + 1.25rem); align-self: start; }
.rail-h {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.85rem;
  padding-inline: 0.25rem;
}

/* Mobile: a horizontal chip rail that bleeds to the edge.
   Desktop: a full-height list. Either way there is no inner
   scrollbar competing with the page scrollbar. */
.rail ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.35rem;
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
}
.rail ul::-webkit-scrollbar { display: none; }
.rail a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-700);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.rail a:hover { border-color: var(--brand-300); color: var(--brand-800); }
.rail a[aria-current="true"] {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

@media (min-width: 1040px) {
  .rail ul {
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .rail li + li a { border-top: 1px solid var(--line); }
  .rail a {
    min-height: 44px;
    border: 0;
    border-radius: 0;
    border-left: 3px solid transparent;
    white-space: normal;
    line-height: 1.4;
    padding: 0.7rem 0.95rem;
  }
  .rail a:hover { background: var(--brand-050); }
  .rail a[aria-current="true"] {
    background: var(--brand-050);
    border-left-color: var(--brand-500);
    color: var(--brand-800);
    font-weight: 600;
  }
}

/* ---------- Canvas sections ------------------------------ */
.sec { margin-bottom: clamp(3rem, 5.5vw, 5rem); }
.sec:last-child { margin-bottom: 0; }
.sec-no {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 0.8rem;
}
.sec > h2 { margin-bottom: 1rem; }
.sec > h3 {
  margin-top: clamp(2rem, 3.4vw, 2.75rem);
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.sec > p {
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--ink-500);
  max-width: 72ch;
  margin-bottom: clamp(1.5rem, 2.4vw, 2rem);
}
.sec > .tw,
.sec > .figrow,
.sec > .cgrid,
.sec > .flow,
.sec > .pflow,
.sec > .chain,
.sec > .capsule,
.sec > .tnote { margin-bottom: 1.25rem; }

/* ---------- Cell grids ----------------------------------- */
.cgrid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 560px) {
  .cgrid--2, .cgrid--3, .cgrid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px)  { .cgrid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cgrid--4 { grid-template-columns: repeat(4, 1fr); } }

.cell {
  background: var(--surface);
  padding: clamp(1.15rem, 1.9vw, 1.5rem);
  min-width: 0;
}
.cell h4 { font-size: var(--fs-h4); color: var(--ink-900); margin-bottom: 0.45rem; }
.cell p { font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-500); }
.cell-no {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brand-700);
  margin-bottom: 0.55rem;
}

/* ---------- Legacy flow (b / span / i children) ---------- */
.flow-step > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin-bottom: 0.8rem;
  border-radius: var(--r-pill);
  background: var(--brand-700);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.flow-step > span {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 0.4rem;
}
.flow-step > i {
  display: block;
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-500);
}

/* ---------- Process flow (ordered, left to right) -------- */
.pflow {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 560px)  { .pflow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .pflow { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { .pflow { grid-template-columns: repeat(7, 1fr); } }

.pflow-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--surface);
  padding: clamp(1.1rem, 1.8vw, 1.4rem);
  min-width: 0;
}
.pflow-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--brand-050);
  border: 1px solid var(--line-brand);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-800);
}
.pflow-body h4 { font-size: var(--fs-h4); color: var(--ink-900); margin-bottom: 0.35rem; }
.pflow-body p { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-500); }
.pflow-cap { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-500); margin-top: 0.85rem; }

/* ---------- Chain diagram -------------------------------- */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.chain-node {
  flex: 1 1 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.85rem 0.75rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-900);
}
.chain-node.is-end {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
.chain-arrow {
  display: flex;
  align-items: center;
  color: var(--brand-700);
  font-weight: 600;
  flex: none;
}

/* ---------- Capsule note --------------------------------- */
.capsule {
  padding: clamp(1.15rem, 2vw, 1.6rem);
  background: var(--brand-050);
  border: 1px solid var(--line-brand);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-700);
}
.capsule b { color: var(--brand-800); font-weight: 600; }

/* ---------- Table extras --------------------------------- */
.dtable caption {
  caption-side: top;
  text-align: left;
  padding: 0.85rem 1.1rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.dtable .num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink-900);
  white-space: nowrap;
}
.dtable .blank { color: var(--ink-500); font-style: italic; }

/* ---------- Closing CTA band ----------------------------- */
.ctaband { padding-block: var(--section); background: var(--surface-alt); }
.ctaband-in {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.85rem, 3.4vw, 3rem);
  background: var(--navy-900);
  border-radius: var(--r-lg);
}
@media (min-width: 880px) { .ctaband-in { grid-template-columns: minmax(0, 1fr) auto; } }
.ctaband-in > * { min-width: 0; }
.ctaband h2 { color: #fff; max-width: 22ch; text-wrap: balance; }
.ctaband p {
  margin-top: 0.9rem;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--on-navy-mut);
  max-width: 62ch;
}
.ctaband-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 619px) { .ctaband-btns .btn { width: 100%; } }

/* ---------- Legacy footer -------------------------------- */
.megafoot {
  background: var(--navy-900);
  color: var(--on-navy-mut);
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;
}
.mf-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
@media (min-width: 620px)  { .mf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .mf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .mf-grid { grid-template-columns: 1.6fr repeat(3, 0.85fr) 1.05fr; } }

.mf-brand img { width: 50px; height: 43px; object-fit: contain; }
.mf-brand p {
  margin-top: 1.15rem;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--on-navy-mut);
  max-width: 44ch;
}
.mf-social { display: flex; gap: 0.55rem; margin-top: 1.5rem; }
.mf-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-navy);
  border-radius: var(--r-sm);
  color: var(--on-navy-mut);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.mf-social a:hover {
  color: var(--navy-900);
  background: var(--brand-300);
  border-color: var(--brand-300);
}
.mf-social svg { width: 18px; height: 18px; }

.mf-col h3 {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: 1.15rem;
}
.mf-col ul { list-style: none; }
.mf-col a {
  display: block;
  padding: 0.5rem 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--on-navy-mut);
  transition: color var(--t-fast) var(--ease);
}
.mf-col a:hover { color: var(--brand-300); }

.mf-addr { font-size: var(--fs-sm); line-height: 1.75; color: var(--on-navy-mut); }
.mf-addr a { display: inline-block; padding-block: 0.22rem; color: var(--on-navy-mut); }
.mf-addr a:hover { color: var(--brand-300); }

.mf-partner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.15rem;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-300);
}
.mf-partner:hover { color: #fff; }

.mf-base {
  border-top: 1px solid var(--line-navy);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--ink-400);
}
.mf-base nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.mf-base a { color: var(--ink-400); transition: color var(--t-fast) var(--ease); }
.mf-base a:hover { color: var(--brand-300); }

@media (pointer: coarse) {
  .mf-col a, .mf-base a { min-height: 44px; display: flex; align-items: center; }
}


/* ============================================================
   07. UI REFINEMENTS
   ============================================================ */

/* ---------- Platform cards: icon in place of the label ---- */
.pillar > .ico { margin-bottom: 0.15rem; }
.pillar:hover > .ico {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
.pillar > .ico { transition: background var(--t-med) var(--ease),
                             border-color var(--t-med) var(--ease),
                             color var(--t-med) var(--ease); }


/* ---------- Engagement track ------------------------------
   A sequence, not a list of six boxes. Each step carries a
   filled numeral and a hairline that runs to the next one, so
   direction is legible without any motion.                   */
.track { background: var(--line); }
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: clamp(1.5rem, 2.3vw, 1.9rem);
}
.step-no {
  position: relative;
  z-index: 1;
  width: 36px; height: 36px;
  margin-bottom: 0.45rem;
  border-radius: var(--r-pill);
  background: var(--brand-700);
  border: 0;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Connector: sits on the numeral's centre line and stops at the
   edge of the cell, so the 1px grid gap reads as the join. */
.step::before {
  content: "";
  position: absolute;
  top: calc(clamp(1.5rem, 2.3vw, 1.9rem) + 18px);
  left: calc(clamp(1.25rem, 2vw, 1.6rem) + 36px);
  right: 0;
  height: 1px;
  background: var(--brand-200);
}
.step:last-child::before { display: none; }
@media (max-width: 1199px) {
  /* The connector only tells the truth on a single row */
  .step::before { display: none; }
}
.step h3 { font-size: var(--fs-h4); margin-bottom: 0.15rem; }

.ladder {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  margin-top: 0;
  padding: clamp(1rem, 1.8vw, 1.25rem) clamp(1.25rem, 2vw, 1.6rem);
}
.track { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; }
.ladder-item {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-700);
}
.ladder-item:last-of-type { color: var(--brand-800); font-weight: 600; }


/* ---------- ESG two-column -------------------------------- */
@media (min-width: 940px) {
  .duo--esg { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}

/* Certification pills — eight marks, two rows, compact */
.certpills {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
  padding: 0;
}
@media (min-width: 620px) {
  /* Four across, two rows */
  .certpills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.certpill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  text-align: center;
  min-width: 0;
  padding: 0.7rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.certpill:hover { border-color: var(--brand-200); box-shadow: var(--sh-sm); }

/* One fixed mark well so logos of every aspect ratio sit level */
.certpill-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 100%;
}
.certpill-mark img {
  max-height: 100%;
  max-width: 74px;
  width: auto;
  object-fit: contain;
}
.certpill-mark--type b {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-800);
  line-height: 1;
}
.certpill > span {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-700);
  overflow-wrap: break-word;
}


/* ---------- EcoVadis metric, inside the grid -------------- */
.metric--award {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: linear-gradient(180deg, var(--gold-050), var(--surface) 78%);
}
.metric--award img {
  width: 62px; height: 62px;
  flex: none;
  border-radius: var(--r-xs);
}
.metric--award > div { min-width: 0; }
.metric--award b { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
/* The gold wash lifts the background luminance, so this caption needs
   the darker ink to stay above 4.5:1. */
.metric--award span { color: var(--ink-700); }


/* ---------- Contact card ----------------------------------- */
.contact-lines li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico lab" "ico val";
  gap: 0.15rem 0.85rem;
  align-items: center;
  padding: 0.85rem 1.15rem;
}
@media (min-width: 420px) {
  .contact-lines li {
    grid-template-columns: auto 82px minmax(0, 1fr);
    grid-template-areas: "ico lab val";
    align-items: center;
  }
}
.cl-ico {
  grid-area: ico;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--brand-050);
  border: 1px solid var(--line-brand);
  color: var(--brand-700);
}
.cl-ico svg { width: 18px; height: 18px; }
.contact-lines .lab { grid-area: lab; align-self: center; }
.contact-lines li > span:last-child { grid-area: val; align-self: center; }
.contact-lines li:hover { background: var(--brand-050); }
.contact-lines li { transition: background var(--t-fast) var(--ease); }


/* ============================================================
   08. REVIEW FIXES
   ============================================================ */

/* ---------- Grids size to their actual child count --------
   Hard-coded column counts left a dead grey cell whenever a
   grid held fewer items than columns (3 stats in a 4-column
   strip, 4 stages in a 6-column flow). auto-fit removes the
   empty track instead of painting it.                        */
.pstats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.flow   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cgrid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cgrid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.cgrid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

@media (min-width: 560px) and (max-width: 900px) {
  /* Two up on tablet rather than three cramped columns */
  .cgrid--3, .cgrid--4 { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- Stage labels ----------------------------------
   "Stage 01" does not fit a 32px circle. The badge is a pill
   that sizes to its label, so both "01" and "Stage 01" work. */
.flow-step > b {
  width: auto;
  min-width: 34px;
  height: 26px;
  padding-inline: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ---------- Numbering -------------------------------------- */

/* On-this-page rail */
.rail ul { counter-reset: toc; }
.rail li { counter-increment: toc; }
@media (min-width: 1040px) {
  .rail a::before {
    content: counter(toc, decimal-leading-zero);
    flex: none;
    margin-right: 0.6rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-400);
  }
  .rail a[aria-current="true"]::before { color: var(--brand-700); }
}

/* Chemistry platforms — numbered in sequence, like the other
   capability grids on the page */
.cgrid { counter-reset: plat; }
.cgrid .cell { counter-increment: plat; }
.cgrid .cell:not(:has(.cell-no)) > h4::before {
  content: counter(plat, decimal-leading-zero);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
}

/* The explicit number labels read a little small next to the
   headings they introduce */
.cell-no {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* Cells that carry an icon stack it above the label */
.cell > .ico { margin-bottom: 0.85rem; }


/* ---------- Tables ----------------------------------------
   Row tint alone was too faint to track across a wide table;
   column rules give the eye something to follow.             */
.dtable tbody tr:nth-child(even) { background: #F7F9FA; }
.dtable tbody td + td,
.dtable tbody th + td,
.dtable thead th + th { border-left: 1px solid var(--line); }
.dtable tbody tr { border-bottom: 1px solid var(--line); }
.dtable tbody tr:last-child { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--brand-050); }
.tw { box-shadow: var(--sh-xs); }


/* ---------- Page hero composition -------------------------
   One image sits beside the copy. Two images would make that
   column twice as tall as the text, so the copy goes full
   width and the pair sits side by side beneath it.           */
.phero-figure:has(.phero-figs) { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .phero-figure:has(.phero-figs) .phero-figs {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.phero-figure .hero-fig img { aspect-ratio: 16 / 10; object-fit: cover; }


/* ---------- Vertical rhythm -------------------------------
   The catalogue band and the closing CTA were each carrying a
   full section pad, which read as a gap rather than a break.  */
.band:has(> .shell > .dash) { padding-bottom: var(--section-tight); }
.ctaband { padding-top: clamp(2.25rem, 3.6vw, 3.25rem); }

/* ------------------------------------------------------------
   ESG columns finish level
   The credential list runs longer than the four metrics, which
   left the two columns ending at different heights. The metric
   grid now stretches and shares the extra height across its
   rows, so both columns bottom out together.
   ------------------------------------------------------------ */
@media (min-width: 940px) {
  .duo--esg { align-items: stretch; }
  .duo--esg .metrics {
    height: 100%;
    grid-auto-rows: 1fr;
    align-content: stretch;
  }
  .duo--esg > div:first-child { display: flex; flex-direction: column; }
  /* Push the pills to the foot of the column so the gap sits
     under the paragraph rather than under the marks */
  .duo--esg .certpills { margin-top: auto; padding-top: clamp(1.5rem, 2.4vw, 2rem); }
}


/* ============================================================
   09. PROCESS FLOW + RAIL POLISH
   ============================================================ */

/* ---------- On-this-page rail ------------------------------
   The hairline between items sat directly on top of the active
   item's tinted background, which read as a stray dark rule
   above the highlighted row. The tint and the left marker are
   enough to separate the items on their own.                 */
@media (min-width: 1040px) {
  .rail li + li a { border-top: 0; }
  .rail a { padding-block: 0.78rem; }
  .toc-list li + li a { border-top: 0; }
}


/* ---------- Process flow -----------------------------------
   This grid lives inside the dashboard canvas, which is ~250px
   narrower than the viewport once the rail appears. Sizing it
   off the viewport is what forced seven 136px columns and cut
   "Crystallization" in half. A container query measures the
   space the grid actually has.
   ------------------------------------------------------------ */
.sec { container-type: inline-size; container-name: canvas; }

.pflow { grid-template-columns: 1fr; }

@container canvas (min-width: 460px) {
  .pflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container canvas (min-width: 700px) {
  .pflow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container canvas (min-width: 900px) {
  .pflow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Seven across only where each step still gets a readable column */
@container canvas (min-width: 1400px) {
  .pflow { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Browsers without container queries keep a safe four across */
@supports not (container-type: inline-size) {
  @media (min-width: 900px) { .pflow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
}

/* Long single words must wrap rather than spill out of the cell */
.pflow-body h4,
.flow-step > span,
.cell h4,
.step h3 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.pflow-step { min-width: 0; overflow: hidden; }
.pflow-body { min-width: 0; }


/* ---------- The other in-canvas grids, same treatment ------ */
@container canvas (max-width: 640px) {
  .cgrid--2, .cgrid--3, .cgrid--4 { grid-template-columns: 1fr; }
}
@container canvas (min-width: 641px) and (max-width: 900px) {
  .cgrid--2, .cgrid--3, .cgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container canvas (min-width: 901px) {
  .cgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container canvas (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
}
@container canvas (min-width: 561px) and (max-width: 980px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container canvas (min-width: 981px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   Bonding hero — copy and both images on one row
   Three columns of content in a single band: the copy, the wire
   render and the ceremony photograph. The copy takes the
   narrower share so the two images stay large enough to read.
   ------------------------------------------------------------ */
@media (min-width: 1000px) {
  .phero-figure:has(.phero-figs) {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: center;
  }
  .phero-figure:has(.phero-figs) .phero-figs {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1rem;
  }
}
/* Squarer crop gives each image presence at roughly a third of
   the measure, rather than a thin letterbox strip. */
.phero-figs .fig img { aspect-ratio: 4 / 3; }
.phero-figs .fig figcaption { font-size: 0.75rem; line-height: 1.5; padding: 0.75rem 0.85rem; }

/* Below the three-up breakpoint the pair still shares a row,
   under the copy, until the screen is too narrow for both. */
@media (min-width: 560px) and (max-width: 999px) {
  .phero-figure:has(.phero-figs) .phero-figs { grid-template-columns: 1fr 1fr; align-items: start; }
}


/* ============================================================
   10. PROCESS STEPPER
   ------------------------------------------------------------
   The seven casting-to-packing stages were a grid of bordered
   cells, which wrapped to 4 + 3 and left a dead eighth cell.
   A sequence should look like a sequence: numbered nodes on a
   single connecting rail, no cell borders, no leftover box.
   Horizontal where there is room, vertical where there is not.
   ============================================================ */

.pflow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-top: 0.5rem;
}

.pflow-step {
  position: relative;
  display: flex;
  background: none;
  padding: 0;
  overflow: visible;
  min-width: 0;
}

.pflow-node {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand-300);
  color: var(--brand-800);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The final stage is the deliverable — mark it as the terminus */
.pflow-step:last-child .pflow-node {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

.pflow-body { min-width: 0; }
.pflow-body h4 {
  font-size: 0.9375rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
  color: var(--ink-900);
}
.pflow-body p {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-500);
}

/* The rail itself — drawn per step so it stops at the last node */
.pflow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  background: var(--brand-100);
}


/* ---------- Vertical: the default, and the mobile form ---- */
.pflow-step {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.6rem;
}
.pflow-step:last-child { padding-bottom: 0; }
.pflow-step:not(:last-child)::after {
  top: 44px;
  bottom: 2px;
  left: 18px;
  width: 2px;
}


/* ---------- Horizontal: one row, once there is room ------- */
@container canvas (min-width: 840px) {
  .pflow { grid-template-columns: repeat(7, minmax(0, 1fr)); }

  .pflow-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
    padding: 0 0.55rem 0;
  }
  /* Rail runs from the edge of this node to the edge of the next */
  .pflow-step:not(:last-child)::after {
    top: 18px;
    bottom: auto;
    left: calc(50% + 26px);
    width: calc(100% - 52px);
    height: 2px;
  }
  .pflow-body h4 { font-size: 0.875rem; }
  .pflow-body p  { font-size: 0.6875rem; line-height: 1.5; }
}

/* Fallback for engines without container queries */
@supports not (container-type: inline-size) {
  @media (min-width: 1120px) {
    .pflow { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .pflow-step {
      flex-direction: column; align-items: center; text-align: center;
      gap: 0.8rem; padding: 0 0.55rem 0;
    }
    .pflow-step:not(:last-child)::after {
      top: 18px; bottom: auto; left: calc(50% + 26px);
      width: calc(100% - 52px); height: 2px;
    }
    .pflow-body h4 { font-size: 0.875rem; }
    .pflow-body p  { font-size: 0.6875rem; line-height: 1.5; }
  }
}

.pflow-cap { margin-top: 0; margin-bottom: 0.9rem; }

/* On-this-page rail reads a little small against the body copy
   it sits beside */
@media (min-width: 1040px) {
  .rail a { font-size: 0.875rem; }
  .rail a::before { font-size: 0.75rem; }
  .rail-h { font-size: 0.75rem; }
  .toc-list a { font-size: 0.875rem; }
  .toc-title { font-size: 0.75rem; }
}

/* ------------------------------------------------------------
   Hero figures finish level
   The two captions are different lengths, which left the pair
   bottoming out at different heights. Both figures now stretch
   to the row height and the image absorbs the difference, so
   the shorter caption simply gets a taller image.
   ------------------------------------------------------------ */
.phero-figure:has(.phero-figs) .phero-figs { align-items: stretch; }

.phero-figs .fig {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.phero-figs .fig img {
  flex: 1 1 0;
  aspect-ratio: auto;
  min-height: 210px;
  object-fit: cover;
}
.phero-figs .fig--contain img {
  object-fit: contain;
  background: var(--surface);
}
.phero-figs .fig figcaption { margin-top: auto; }

/* ------------------------------------------------------------
   On-this-page rail — legibility
   Sized up against the body copy it sits beside. The step
   numbers were --ink-400 (3.2:1), which the contrast sweep did
   not catch because ::before content is not a text node.
   ------------------------------------------------------------ */
@media (min-width: 1040px) {
  .rail a         { font-size: 0.9375rem; padding-block: 0.85rem; }
  .rail a::before { font-size: 0.8125rem; color: var(--ink-500); margin-right: 0.7rem; }
  .rail-h         { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--ink-500); }

  .toc-list a         { font-size: 0.9375rem; }
  .toc-title          { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--ink-500); }
}

/* ------------------------------------------------------------
   Eyebrow labels
   11px uppercase was too quiet for a label that introduces the
   section heading beneath it. Tracking eases off as the size
   goes up, otherwise the letters start to come apart.
   ------------------------------------------------------------ */
.kicker,
.band-index,
.sec-no {
  font-size: 0.9375rem;      /* 15px */
  letter-spacing: 0.07em;
  font-weight: 600;
}

/* The eyebrow is a flex row with a leading rule, so long labels
   need permission to wrap rather than overflow their column */
.kicker {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.35rem;
  max-width: 100%;
}
.kicker::before { margin-top: 0.55em; }

@media (max-width: 619px) {
  .kicker, .band-index, .sec-no { font-size: 0.875rem; letter-spacing: 0.06em; }
}

/* Stepper type — a touch larger now the row has the full width */
@container canvas (min-width: 840px) {
  .pflow-body h4 { font-size: 0.9375rem; }
  .pflow-body p  { font-size: 0.8125rem; line-height: 1.55; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1120px) {
    .pflow-body h4 { font-size: 0.9375rem; }
    .pflow-body p  { font-size: 0.8125rem; line-height: 1.55; }
  }
}

/* ------------------------------------------------------------
   Table caption
   11px of muted uppercase on a tinted band cleared the contrast
   bar but read as a whisper above a heavy navy header row. Now
   sized and weighted like the label it is, with the same teal
   marker the catalogue category headings use.
   ------------------------------------------------------------ */
.dtable caption {
  /* Must stay table-caption: display:flex pulls the element out of
     the table box model, so it shrinks to its content instead of
     spanning the table, and stops sitting above the header row. */
  display: table-caption;
  caption-side: top;
  text-align: left;
  padding: 1rem 1.1rem;
  font-size: 0.8125rem;      /* 13px */
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--ink-900);     /* 15.8:1 */
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.dtable caption::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.6rem;
  border-radius: 2px;
  background: var(--brand-500);
  vertical-align: middle;
}


/* ============================================================
   11. ENGAGEMENT TRACK — same stepper language as the process
   ------------------------------------------------------------
   Six stages were still a bordered grid, so the page carried two
   different visual treatments for the same idea. This matches
   the casting-to-packing stepper: nodes on a rail, no cells.
   ============================================================ */

.track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.step {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  background: none;
  padding: 0 0 1.7rem;
  min-width: 0;
}
.step:last-child { padding-bottom: 0; }

.step-no {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  flex: none;
  margin-bottom: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-700);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* The final stage is the outcome — hollow it so the run reads
   as arriving somewhere rather than just stopping */
.step:last-child .step-no {
  background: var(--surface);
  border: 2px solid var(--brand-700);
  color: var(--brand-800);
}

.step > div,
.step h3, .step p { min-width: 0; }
.step h3 { font-size: var(--fs-h4); margin-bottom: 0.3rem; }
.step p  { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-500); }

/* Rail — vertical in the stacked form */
.step::before {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 2px;
  left: 18px;
  width: 2px;
  height: auto;
  right: auto;
  background: var(--brand-100);
}
.step:last-child::before { display: none; }


/* ---------- Horizontal, once six columns genuinely fit ----- */
@media (min-width: 1200px) {
  .track { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
    padding: 0 0.6rem;
  }
  .step::before {
    top: 18px;
    bottom: auto;
    left: calc(50% + 26px);
    width: calc(100% - 52px);
    height: 2px;
  }
  .step h3 { font-size: 0.9375rem; }
  .step p  { font-size: 0.8125rem; }
}

/* Two and three across keep the stacked node/text pairing,
   which stays readable without a misleading connector */
@media (min-width: 620px) and (max-width: 1199px) {
  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
  .step::before { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- Scale ladder — its own panel again ------------- */
.ladder {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: clamp(1rem, 1.8vw, 1.25rem) clamp(1.25rem, 2vw, 1.6rem);
}
.ladder-item { font-size: 0.8125rem; }

/* ------------------------------------------------------------
   Hairline grids
   These blocks draw their separators with a 1px grid gap over a
   background colour. --line is too close to white to register,
   especially where the block sits on the tinted band, so the
   separator colour steps up while the outer border stays soft.
   ------------------------------------------------------------ */
.metrics,
.stats,
.hero-trust,
.pstats,
.cgrid,
.contact-lines {
  background: var(--line-strong);
  border-color: var(--line-strong);
}

/* ------------------------------------------------------------
   Hero heading in the two-column layout
   The heading is 93 characters and now lives in a ~half-width
   column, so its size has to track that column rather than the
   window. 3vw keeps it at roughly 31 characters per line, which
   is what holds it to three lines from 1000px upward.
   ------------------------------------------------------------ */
.hero h1 { font-size: clamp(1.875rem, 3vw, 3.5rem); }


/* ------------------------------------------------------------
   Contact card
   It sat flat beside an elevated form. Same border weight and
   elevation now, tighter rows, and the value is the element
   that carries the weight rather than the label.
   ------------------------------------------------------------ */
.contact-lines {
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.contact-lines li { padding: 0.8rem 1.15rem; }
.contact-lines .lab {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--ink-500);
}
.contact-lines li > span:last-child {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-900);
}
.contact-lines a { font-weight: 600; }
.cl-ico { width: 34px; height: 34px; }
.cl-ico svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------
   Hero column split
   Poppins Bold runs about 0.71em per character, so a 93-character
   heading needs roughly 31 characters per line to land on three.
   The copy column takes two thirds and the display size tracks
   that column, and the split only engages once there is width
   for it — below 1150px the copy runs full width instead.
   ------------------------------------------------------------ */
@media (min-width: 1000px) and (max-width: 1149px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-fig { max-width: 640px; }
}
@media (min-width: 1150px) {
  .hero-grid { grid-template-columns: minmax(0, 1.94fr) minmax(0, 1fr); }
}
.hero h1 { font-size: clamp(1.875rem, 3.01vw - 0.225rem, 3.5rem); }

/* Footer baseline — copyright and the bottom nav sat a step too
   small against the columns above them */
.foot-base,
.mf-base {
  font-size: 0.875rem;
}
.foot-base a,
.mf-base a { font-size: 0.875rem; }

/* <small> carries a UA-agent 0.833em scale, so setting the parent
   alone left the copyright at ~11.7px. Set on the element itself. */
.foot-base small,
.mf-base small { font-size: 0.875rem; }

/* ------------------------------------------------------------
   Hero image fills its column
   Centred, the figure floated at 253px inside a 560px column
   with dead space above and below. It now stretches to the copy
   height and the photograph crops to fill, so the two columns
   start and finish on the same lines.
   ------------------------------------------------------------ */
@media (min-width: 1150px) {
  .hero-grid { align-items: stretch; }
  .hero-grid .hero-fig {
    height: 100%;
    min-height: 380px;
  }
  .hero-grid .hero-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The plant sits centre-frame, so a portrait crop keeps the
       subject rather than the treeline */
    object-position: center 45%;
  }
}

/* ------------------------------------------------------------
   Stepper nodes read as one run
   The terminal node was singled out — filled on the process,
   hollow on the engagement track — which made the two steppers
   disagree with each other and drew the eye to the wrong end.
   Every node now matches its own run.
   ------------------------------------------------------------ */
.pflow-step:last-child .pflow-node {
  background: var(--surface);
  border: 2px solid var(--brand-300);
  color: var(--brand-800);
}
.step:last-child .step-no {
  background: var(--brand-700);
  border: 0;
  color: #fff;
}

/* ------------------------------------------------------------
   Narrower copy column
   The copy took two thirds, which left the line length long and
   squeezed the photograph into a hard portrait crop. At roughly
   61/39 the prose sits closer to a comfortable measure and the
   image keeps more of its frame. The display size and the split
   breakpoint move together, since the heading still has to land
   on three lines inside the narrower column.
   ------------------------------------------------------------ */
@media (min-width: 1150px) and (max-width: 1249px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .hero-fig { height: auto; min-height: 0; max-width: 640px; }
  .hero-grid .hero-fig img { height: auto; }
}
@media (min-width: 1250px) {
  .hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.hero h1 { font-size: clamp(1.875rem, 2.776vw - 0.208rem, 3.5rem); }

/* ------------------------------------------------------------
   Scale ladder sizes to its content
   As a full-width panel it left roughly a thousand pixels of
   empty box to the right of the last item. It now hugs what it
   contains, and still wraps inside the column on narrow screens.
   ------------------------------------------------------------ */
.ladder {
  width: fit-content;
  max-width: 100%;
}
@media (max-width: 619px) {
  /* Full width on a phone, where fit-content and full width are
     the same thing anyway and the wrap is cleaner */
  .ladder { width: 100%; }
}

/* ------------------------------------------------------------
   Scale ladder — centred and given some presence
   Left-aligned against a full-width band it read as leftover
   rather than as a summary of the run above it. Centred, on the
   brand tint, with a brand hairline and a little elevation.
   ------------------------------------------------------------ */
.ladder {
  margin-inline: auto;
  padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--brand-050);
  border: 1px solid var(--line-brand);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  justify-content: center;
  gap: 0.5rem 1rem;
}
.ladder-item { font-weight: 600; color: var(--ink-900); }
.ladder-item:last-of-type { color: var(--brand-800); }
.ladder-sep { color: var(--brand-700); }

@media (max-width: 619px) {
  /* A pill shape does not survive three wrapped rows */
  .ladder { border-radius: var(--r-md); justify-content: flex-start; }
}