/* sustainability — externalised head <style> (§9.3) */
@media (max-width: 600px) {
      /* Move the "Reduce carbon footprint by 64%" stat badge to the image's bottom-right corner. */
      #impact-audit .stat-badge { left: auto; right: 2rem; }
      /* Shrink the CleanHub and Climeworks partner logos by 30%. */
      .partnership-card .cleanhub-logo[src*="cleanhub"] { max-width: 208px; }
      .partnership-card .cleanhub-logo[src*="climeworks"] { max-width: 277px; }
      /* Eco pills: icon in its own left column, text to the right (matches the stat-tiles layout). */
      .eco-pill { flex-direction: row; align-items: center; text-align: left; }
      #impact-audit .copy h2 { margin-top: 10px; }
      /* Stack the greener cards above the copy instead of below it, 4 cards in 2 columns. */
      .greener-split { grid-template-columns: 1fr; }
      .greener-split .greener-cards { order: 1; grid-template-columns: repeat(2, 1fr); }
      .greener-split .greener-col--down { margin-top: 0; }
      /* Remove the stray vertical divider next to "In partnership with" once the card stacks. */
      .partnership-copy { border-left: 0; margin-left: 0; padding-left: 0; }
      /* Give each stat-tile icon a fixed-width box so the text column lines up
         at the same X position regardless of each icon's natural aspect ratio. */
      .stat-tiles:not(.stat-tiles--two) .stat-tile img { width: 40px; object-fit: contain; }
    }
    @media (max-width: 860px) {
      /* Vertical timeline (mobile + tablet): line + dots run down the left edge, steps stack in one column. */
      .h-timeline__steps { grid-template-columns: 1fr; row-gap: 2.25rem; padding-top: 0; padding-left: 32px; position: relative; }
      .h-timeline__line { display: block; left: 8px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
      .h-timeline__fill { display: block; width: 100%; height: 0; }
      .ht-step { text-align: left; }
      .ht-dot { display: block; position: absolute; left: -32px; top: 4px; transform: none; }
      /* Steps with no year label: drop the empty year line so the title sits at the top, level with the dot. */
      .ht-step--nodate .ht-year { display: none; }
    }