/* Sustainability page styles */

/* Letter-spacing tokens the dev block expects (client-2 typography.css).
   Our typography.css hardcodes these per heading class; same values here. */
:root { --ls-h2: -0.05em; --ls-h3: -0.04em; --ls-h4: -0.04em; --ls-h5: -0.04em; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background-color: var(--beige-70);
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
  color: var(--gray-10);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.btn-secondary:hover,
.btn-secondary:focus-visible { background-color: var(--beige-80); color: var(--gray-10); }

.sustainability-environment + .cta { --cta-edge-top: var(--beige-5); }

/* Outlined white hero CTA: same rules as our live .export-hero__cta
   (client-2 shares one rule for both heroes). */
.sustainability-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid #ffffff;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.sustainability-hero__cta:hover { background-color: #ffffff; color: var(--blue-60); }
.sustainability-hero__cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* CTA torn-edge bleed under the Environment band (as live .faq/.testimonials). */
@supports selector(:has(*)) {
  .sustainability-environment:has(+ .cta) { border-bottom: 20px solid transparent; margin-bottom: -20px; }
}

/* ============================================================
   SUSTAINABILITY PAGE  (sustainability.html)
   Sections in page order; each block is namespaced
   .sustainability-* (NOT .sustain, which is the About page's
   Sustainability section).
   ============================================================ */

/* ---- 1. HERO — Figma 5523-9074 (web) · 11138-57188 (tablet) ·
   11140-57503 (mobile).
   Full-fold photo hero: bagasse tableware on moss under a flat 50%
   black overlay; eyebrow + H1 + subtitle centred. Like .export-hero
   it sits under the translucent sticky header, which overlays the
   photo, and fills 100svh. Padding top/bottom 128/64 (web + tablet)
   keeps the copy centred in the space below the header; mobile uses
   Figma's 104/64. Mobile swaps in its own portrait crop of the photo
   via <picture>. ---- */
.sustainability-hero {
  position: relative;
  isolation: isolate;                 /* keeps the z-index:-1 photo inside the section */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pulled up by the header's FULL height (bar + 1px border: 66+1
     below 992px, 64+1 from 992px) so the photo starts at the very top
     of the screen like the Figma frame — no strip of page background
     behind the translucent header. */
  margin-top: -67px;
  min-height: 100vh;                  /* fallback */
  min-height: 100svh;                 /* full fold, stable under mobile browser chrome */
  padding: 104px 16px 64px;
  overflow: hidden;
  text-align: center;
}
@media (min-width: 768px)  { .sustainability-hero { padding: 128px 40px 64px; } }
@media (min-width: 992px)  { .sustainability-hero { margin-top: -65px; } }
@media (min-width: 1200px) { .sustainability-hero { padding-inline: 80px; } }

/* Photo + overlay. The dark fill shows until the photo loads, so the
   light copy is readable from the first paint. */
.sustainability-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--gray-90);
}
.sustainability-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* centre crop = the Figma framing on every tier */
}
.sustainability-hero__media::after {  /* Figma "hero__overlay": flat black @ 50% */
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.sustainability-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                          /* eyebrow → text: 16 mobile, 8 tablet/web */
  width: 100%;
  max-width: 1280px;                  /* XL cap: the 1440 frame's content width */
}
@media (min-width: 768px) { .sustainability-hero__content { gap: 8px; } }

.sustainability-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
/* H1 = the type-h1 token on every tier (36/44 → 56/64 → 72/80).
   Balanced wrapping evens out the 3-line title between 1200 and
   ~1300px; the 2-line tablet/web title stays as designed. */
.sustainability-hero__title    { margin: 0; padding-inline: 8px; color: var(--beige-5); text-wrap: balance; }
/* "pretty" stops a lone last word ("performance.") at in-between widths
   such as 414/430px; the Figma 375/1024/1440 breaks are unchanged. The
   &nbsp; before the dash in the HTML keeps it from starting a line. */
.sustainability-hero__subtitle { margin: 0; max-width: 628px; color: var(--beige-10); text-wrap: pretty; }
/* Phones keep Figma's break "Sustainable / Packaging / Solutions
   Designed / for a Better Future" (the browser would otherwise fit
   "Packaging Solutions" on one line by 0.4px). Hidden from 480px,
   where the title wraps better on its own (no lone "Future"). */
@media (min-width: 480px) { .sustainability-hero__br-m { display: none; } }

/* "Request a Quote" (user, 2026-10-08 — not in the Figma frames):
   the Export hero's outlined white button (shared rule up top), the
   same distance below the copy as there — 32 on phones, 40 from 768
   (the content gap adds 16 / 8 to these margins). */
.sustainability-hero__cta { margin-top: 16px; }
@media (min-width: 768px) { .sustainability-hero__cta { margin-top: 32px; } }

/* Mobile: the subtitle steps down to Body/S/Regular-15 (24 line).
   The -1px side margins give it 1px of slack each side: its last
   line measures 343.6px in the browser vs the 343px column (Figma's
   Inter measures it a hair narrower), so without them "performance."
   drops to a 5th line at 375px instead of Figma's 4. */
@media (max-width: 767.98px) {
  .sustainability-hero__subtitle {
    margin-inline: -1px;
    font-size: var(--fs-body-s);      /* 15px */
    line-height: var(--lh-body-s);    /* 24px */
    letter-spacing: -0.009em;         /* 15px regular */
  }
}

/* ---- 2. INTRO — Figma 5594-14522 (web) · 11138-57231 (tablet) ·
   11140-57515 (mobile).
   Beige paper-grain band: heading over two intro paragraphs and a
   "More About Vanta" button. Full fold with the content centred
   vertically (the Figma paddings are the minimum). Same idea as
   .export-about: a centred column (web 1062 / tablet 782) holding the
   heading, with the body offset to the right (web 217 / tablet 161);
   everything stacks flush-left on mobile. ---- */
.sustainability-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;                  /* fallback */
  min-height: 100svh;
  padding: 64px 16px;
  background-color: var(--beige-5);
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
}
.sustainability-intro__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;                          /* heading → body: 40 mobile, 64 tablet, 96 web */
  width: 100%;
  margin-inline: auto;
}
.sustainability-intro__title { margin: 0; color: var(--gray-90); }
/* Mobile frame only: "Better Tomorrow" in brand blue (web + tablet
   frames keep the whole heading gray-90). */
.sustainability-intro__accent { color: var(--blue-50); }
.sustainability-intro__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;            /* button hugs its label */
  gap: 48px;                          /* paragraphs → button */
}
/* Mobile: -1px side margins = 1px of slack each side, so the copy
   wraps like the Figma frame at 375px ("…renewable resources" measures
   343.06px vs the 343px column; same browser-vs-Figma Inter measuring
   gap as the hero subtitle). Reset from 768px. */
.sustainability-intro__copy { display: flex; flex-direction: column; gap: 24px; margin-inline: -1px; }  /* gap 24 mobile, 48 up */
.sustainability-intro__text { margin: 0; color: var(--gray-70); }

@media (min-width: 768px) {
  .sustainability-intro { padding: 80px 40px; }
  /* Tablet frame = a 782px column centred in 1024 (121px each side);
     narrower tablets keep the 40px gutter instead. */
  .sustainability-intro__inner { gap: 64px; max-width: 782px; }
  .sustainability-intro__accent { color: inherit; }
  .sustainability-intro__br-m { display: none; }      /* "Creating Better Tomorrow" on one line */
  .sustainability-intro__body { margin-left: 161px; }
  .sustainability-intro__copy { gap: 48px; margin-inline: 0; }
  .sustainability-intro__cta { height: 40px; padding: 0 16px; }   /* Button Secondary / sm */
}
@media (min-width: 1200px) {
  .sustainability-intro { padding: 128px 80px; }
  /* Web frame = a 1062px column centred in 1440 (189px each side). */
  .sustainability-intro__inner { gap: 96px; max-width: 1062px; }
  .sustainability-intro__body { margin-left: 217px; max-width: 737px; }
  .sustainability-intro__text {       /* Body M 17/24 on web (Body S 15/24 below) */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
    letter-spacing: -0.013em;
  }
  .sustainability-intro__cta { height: 48px; padding: 0 24px; }   /* back to Size=md */
}

/* ---- 3. OUR SUSTAINABILITY PILLARS (steps) — Figma 11224-56217
   (web) · 11365-54952 (tablet) · 11365-54976 (mobile).
   Beige-10 grain band: eyebrow + heading + subtitle, then a 4-step
   list beside a photo. Scroll-driven (sustainabilitySteps() in
   main.js):
   - ≥768px: when JS adds .is-pinned, the list + photo (__body) pin
     centred in the fold (sticky, JS-measured top) while a spacer
     after them gives 50svh of scroll per step; progress picks the
     active step and its photo cross-fades in.
   - <768px: the photo sticks under the header (CSS) and the list
     scrolls past it; the step crossing a reading line just below
     the photo becomes active.
   Inactive steps dim their TEXT only, so the 4px rail stays a
   continuous track with the blue segment on the active step. ---- */
.sustainability-steps {
  padding: 64px 16px;
  background-color: var(--beige-10);
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
}
.sustainability-steps__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;                          /* header → body: 40 mobile, 64 tablet, 80 web */
  max-width: 1280px;                  /* XL cap */
  margin-inline: auto;
}
.sustainability-steps__header { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sustainability-steps__heading { display: flex; flex-direction: column; gap: 16px; }
.sustainability-steps__title    { margin: 0; color: var(--gray-90); }
.sustainability-steps__subtitle { margin: 0; color: var(--gray-70); }

/* Mobile: photo on top (sticky mat), list below. */
.sustainability-steps__body { display: flex; flex-direction: column; gap: 16px; }  /* + mat's 16px = Figma 32 */
.sustainability-steps__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.sustainability-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-left: 4px solid var(--beige-40);
  transition: border-color .3s ease;
}
.sustainability-step.is-active { border-left-color: var(--blue-50); }
.sustainability-step > * { opacity: .5; transition: opacity .3s ease; }   /* inactive text at 50% (user, 2026-10-01) */
.sustainability-step.is-active > * { opacity: 1; }
/* Title 1 - 20 (20/24) on every tier — the type-title-1 token resizes
   18/24/20, so the size is set here instead. */
.sustainability-step__title {
  margin: 0;
  color: var(--gray-90);
  font-weight: var(--fw-semibold);
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.sustainability-step__text { margin: 0; color: var(--gray-70); }

/* The mat sticks under the 67px mobile header and carries the band's
   own background, so list text scrolling up behind the photo never
   shows in the 16px above it or in its rounded corners. Pulled up
   16px so the static layout keeps Figma's 40px header → photo gap. */
.sustainability-steps__media-wrap {
  order: -1;
  position: sticky;
  top: 67px;
  z-index: 1;
  margin-top: -16px;
  padding-block: 16px;
  background-color: var(--beige-10);
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
}
.sustainability-steps__media {
  position: relative;
  height: 320px;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--beige-30);  /* shows through the illustration's open sky */
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
}
.sustainability-steps__photo {
  display: block;                     /* overrides the global picture{display:contents} — */
  position: absolute;                 /* the wrapper needs a box to stack + fade */
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.sustainability-steps__photo.is-active { opacity: 1; }
.sustainability-steps__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Mobile: heading = H2-mobile 32/40 (type-h3 is 24 there); subtitle Body S. */
@media (max-width: 767.98px) {
  .sustainability-steps__title { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
  .sustainability-steps__subtitle { font-size: var(--fs-body-s); line-height: var(--lh-body-s); letter-spacing: -0.009em; }
  /* The body box ends at the LAST step's top (that step overflows into
     the track's matching padding), so the sticky photo lets go when the
     last step reaches it rather than covering it. --steps-tail = that
     step's height, set by main.js (0 without JS = plain sticky). */
  .sustainability-steps__list  { margin-bottom: calc(-1 * var(--steps-tail, 0px)); }
  .sustainability-steps__track { padding-bottom: var(--steps-tail, 0px); }
}

@media (min-width: 768px) {
  .sustainability-steps { padding: 80px 40px; }
  .sustainability-steps__inner { gap: 64px; }
  .sustainability-steps__header { max-width: 621px; }
  /* List left, photo right, photo as tall as the list. */
  .sustainability-steps__body { flex-direction: row; justify-content: space-between; align-items: stretch; gap: 24px; }
  .sustainability-steps__list { flex: 0 1 460px; min-width: 0; }
  .sustainability-steps__media-wrap { display: contents; }   /* the photo itself is the flex item */
  .sustainability-steps__media { flex: 0 1 460px; height: auto; min-width: 0; }

  /* Pinned mode (JS adds .is-pinned only where the body fits the fold). */
  .sustainability-steps.is-pinned .sustainability-steps__body {
    position: sticky;
    top: var(--steps-pin-top, 96px);
  }
  .sustainability-steps.is-pinned .sustainability-steps__track::after {
    content: "";
    display: block;
    height: calc(var(--steps-count, 4) * 50vh);    /* fallback */
    height: calc(var(--steps-count, 4) * 50svh);   /* 50svh of scroll per step */
  }
}
@media (min-width: 1200px) {
  .sustainability-steps { padding: 120px 80px; }
  .sustainability-steps__inner { gap: 80px; }
  .sustainability-steps__header { max-width: 736px; }
  .sustainability-steps__body { gap: 40px; }
  .sustainability-steps__list { flex-basis: 519px; }
  .sustainability-steps__media { flex-basis: 628px; }
}

@media (prefers-reduced-motion: reduce) {
  .sustainability-step,
  .sustainability-step > *,
  .sustainability-steps__photo { transition: none; }
}

/* ---- 4. COMMITTED TO A GREENER TOMORROW — Figma 5594-10847 (web)
   · 11371-54960 (tablet) · 11371-54985 (mobile).
   Beige-30 grain band: four-photo masonry, heading top right, icon
   + intro bottom left. Built on the 12-column page grid (24px
   gutters, Figma layout grid): the photos are four equal tiles,
   each three columns wide, inset one column (+ gutter) from each
   side and 16px apart; the heading starts 32px into tile 3 and runs
   to the right edge; the intro sits under tiles 1–3. With W = the
   content width: inset = W/12 + 2px, tile = 5W/24 − 13px (exact at
   the 1280 web and 944 tablet frames, fluid in between).
   Phones: three tiles, the middle one centred on the screen and the
   outer two bleeding past the edges (the band clips them). ---- */
.sustainability-collage {
  overflow: hidden;                   /* clips the bleeding phone tiles — no sideways scroll */
  padding: 64px 16px;
  background-color: var(--beige-30);
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
}
.sustainability-collage__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1280px;                  /* XL cap */
  margin-inline: auto;
}
/* Phones force Figma's break "Committed to a / Greener Tomorrow" (the
   browser would fit "…a Greener" on line 1); from 768 it wraps on its
   own — the same break at 1024 / 1440 — and balance avoids a lone "a"
   in the narrow ~300px heading column around 768. */
.sustainability-collage__title { margin: 0; color: var(--gray-90); text-wrap: balance; }
@media (min-width: 768px) { .sustainability-collage__br-m { display: none; } }

/* Phones: 151px tiles, 16px apart, photo 2 centred (photo 4 hidden). */
.sustainability-collage__photos { position: relative; height: 408px; }
.sustainability-collage__photo {
  position: absolute;
  top: 0;
  width: 151px;
  height: 156px;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background-color: var(--beige-40);  /* shows while the photo loads */
}
.sustainability-collage__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sustainability-collage__photo--1 { left: calc(50% - 242.5px); }                  /* 75.5 + 16 + 151 */
.sustainability-collage__photo--2 { left: calc(50% - 75.5px); height: 408px; }
.sustainability-collage__photo--3 { left: calc(50% + 91.5px); top: 252px; }       /* 75.5 + 16 */
.sustainability-collage__photo--4 { display: none; }
.sustainability-collage__photo--2 img { object-position: 60% 50%; }               /* Figma's crop */

.sustainability-collage__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sustainability-collage__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--beige-20);
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
}
.sustainability-collage__icon img { display: block; width: 24px; height: 24px; }
/* Phones: 1px of slack each side so it wraps like the 375 frame
   ("…We focus on creating" = 343.26px vs the 343px column — the
   Figma-vs-browser Inter gap again). Reset from 768px. */
.sustainability-collage__body { margin: 0 -1px; color: var(--gray-90); }

@media (min-width: 768px) {
  .sustainability-collage { padding: 80px 40px; }
  /* Tracks: inset | tile 16 tile 16 tile 16 tile | rest
     Lines:  1     2    4       6       8        10  11 */
  .sustainability-collage__inner {
    display: grid;
    grid-template-columns:
      calc(8.3333% + 2px)
      repeat(3, calc(20.8333% - 13px) 16px)
      calc(20.8333% - 13px)
      1fr;
    grid-template-rows: 188px 120px 188px 32px 160px minmax(48px, auto);   /* tablet frame */
    gap: 0;
  }
  .sustainability-collage__photos { display: contents; }   /* the tiles join the grid */
  .sustainability-collage__photo { position: static; width: auto; height: auto; }
  .sustainability-collage__photo--1 { grid-column: 2; grid-row: 1; }
  .sustainability-collage__photo--2 { grid-column: 4; grid-row: 1 / 4; }
  .sustainability-collage__photo--3 { grid-column: 6; grid-row: 3; }
  .sustainability-collage__photo--4 { display: block; grid-column: 8; grid-row: 3 / 6; }
  .sustainability-collage__title { grid-column: 6 / -1; grid-row: 1; margin-left: 32px; align-self: start; }
  .sustainability-collage__text { grid-column: 2 / 7; grid-row: 5 / 7; align-self: start; gap: 16px; max-width: 541px; }
  .sustainability-collage__body { margin-inline: 0; }
}
@media (min-width: 1200px) {
  .sustainability-collage { padding: 128px 80px; }
  .sustainability-collage__inner { grid-template-rows: 260px 164px 260px 48px minmax(216px, auto); }   /* web frame */
  .sustainability-collage__text { grid-row: 5; gap: 24px; max-width: 578px; }
  .sustainability-collage__body {     /* Body M 17/24 on web (Body S 15/24 below) */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
    letter-spacing: -0.013em;
  }
}

/* ---- 5 + 6. PAPER / BAGASSE MATERIALS — Figma 5594-10816 +
   5594-14602 (web) · 11138-57302 + 11138-57334 (tablet) ·
   11140-57605 + 11140-57637 (mobile).
   Two mirrored grain bands with one layout: a square photo beside
   eyebrow + heading + intro, a check list and a button. Paper =
   beige-10 with the photo on the right; Bagasse = beige-5 with the
   photo on the left. Phones stack the photo above the copy.
   Columns: web 519 copy | 628 photo, spread apart (they share any
   shortfall below 1440); tablet two equal columns 48px apart (448 +
   448 at the 1024 frame). ---- */
.sustainability-material {
  padding: 64px 16px;
  background-color: var(--beige-5);
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
}
.sustainability-material--paper { background-color: var(--beige-10); }
.sustainability-material__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1280px;                  /* XL cap */
  margin-inline: auto;
}

/* Phones: the 375 frame's 343×256 photo, scaled with the screen;
   capped at 400px tall so it doesn't take over large phones (it
   crops wider instead). */
.sustainability-material__media {
  position: relative;
  aspect-ratio: 343 / 256;
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--beige-30);  /* shows while the photo loads */
}
.sustainability-material__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Paper photo: left edge pinned (the cups), right side crops away —
   on the square tablet/web frame that is Figma's exact crop (the left
   two-thirds). Phones show the full height and a little more of the
   right side, where the Figma mobile frame squashes the same crop. */
.sustainability-material--paper .sustainability-material__media img { object-position: 0 50%; }

.sustainability-material__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }  /* 32 mobile, 40 up */
.sustainability-material__header  { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sustainability-material__text    { display: flex; flex-direction: column; gap: 16px; }
/* Figma uses a different heading level per tier — H3 on phones (24/32),
   H4 on tablet (32/40), H5 on web (40/48) — so the size comes from
   those levels' tokens; type-h5 supplies the weight. Balanced
   wrapping stops a lone "Standards" / "Material" when the title takes
   3 lines (narrow tablets, 1200–1360px); the 2-line Figma breaks at
   375 / 1024 / 1440 are unchanged. */
.sustainability-material__title {
  margin: 0;
  color: var(--gray-90);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-wrap: balance;
}
.sustainability-material__desc { margin: 0; color: var(--gray-70); }

/* Check list — Figma "icons/Check/Line": blue tick on a white
   rounded square, 12px from the text, which wraps beside it. */
.sustainability-material__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--gray-70);
}
.sustainability-material__list li { display: flex; align-items: flex-start; gap: 12px; }
.sustainability-material__list li::before {
  content: "";
  flex: 0 0 24px;
  height: 24px;
  background: url("../images/icon-check-line.svg") center / 24px 24px no-repeat;
}

/* Phones: the intro steps down to Body/S/Regular-15 (24 line). */
@media (max-width: 767.98px) {
  .sustainability-material__desc {
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    letter-spacing: -0.009em;
  }
}

@media (min-width: 768px) {
  .sustainability-material { padding: 80px 40px; }
  .sustainability-material__inner { flex-direction: row; align-items: center; gap: 48px; }
  .sustainability-material--paper .sustainability-material__inner { flex-direction: row-reverse; }   /* photo on the right */
  .sustainability-material__media   { flex: 1 1 448px; min-width: 0; max-height: none; aspect-ratio: 1; }
  .sustainability-material__content { flex: 1 1 448px; min-width: 0; gap: 40px; }
  .sustainability-material__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
  }
}
@media (min-width: 1200px) {
  .sustainability-material { padding: 128px 80px; }
  .sustainability-material__inner   { justify-content: space-between; gap: 40px; }
  .sustainability-material__media   { flex: 0 1 628px; }
  .sustainability-material__content { flex: 0 1 519px; }
  .sustainability-material__title {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
  }
}

/* ---- 7. ENVIRONMENT — Figma 5562-9807 (web) · 11140-57669 (mobile).
   Tablet = the web layout on the tablet grid (the Figma tablet frame
   11138-57366 is outdated).
   Beige-10 grain card (radius 24) on the beige-5 band: eyebrow +
   heading + intro beside a three-photo gallery, a tall photo centred
   against a stack of two. From 768 the card sits on the 12-column
   page grid (24px gutters): copy in columns 2–5, gallery in columns
   7–11. With W = the content width: inset = W/12 + 2px, copy =
   W/3 − 16px, gallery = 5W/12 − 14px (the web frame's 109 / 410 /
   519 at 1280, 81 / 299 / 379 at the 1024 tablet). Below 992 the
   copy also takes column 6, so the heading keeps its two lines.
   Phones: copy, a "Contact Us" button (hidden in the web frame, so
   phones only) and the gallery, stacked in a card with 8px margins. ---- */
.sustainability-environment {
  padding: 8px;
  background-color: var(--beige-5);
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
}
.sustainability-environment__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1280px;                  /* XL cap */
  margin-inline: auto;
  padding: 64px 16px;
  border-radius: 24px;
  background-color: var(--beige-10);
  background-image: url("../images/cert-texture.svg");
  background-size: 60px 60px;
}
.sustainability-environment__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.sustainability-environment__header  { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sustainability-environment__text    { display: flex; flex-direction: column; gap: 16px; }
/* Heading: H2 on phones (32/40), H4 on tablet (32/40), H5 on web
   (40/48) — set from those levels' tokens; type-h5 supplies the weight. */
.sustainability-environment__title {
  margin: 0;
  color: var(--gray-90);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.sustainability-environment__desc { margin: 0; color: var(--gray-70); }

/* Gallery: photo 1 centred beside the photo 2 + 3 column, 16px gaps.
   Column widths split by the frame's ratio and every photo keeps its
   frame's proportions, so the gallery scales as one piece; never
   wider than the web's 519px (exact at 1440, and large phones stop
   there). Phones use the mobile frame's proportions. */
.sustainability-environment__gallery {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 519px;
}
.sustainability-environment__gallery-col { display: flex; flex-direction: column; gap: 16px; flex: 151 1 0; min-width: 0; }
.sustainability-environment__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background-color: var(--beige-30);  /* shows while the photo loads */
}
.sustainability-environment__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sustainability-environment__photo--1 { flex: 160 1 0; min-width: 0; aspect-ratio: 160 / 236; }
.sustainability-environment__photo--2 { aspect-ratio: 151 / 148; }
.sustainability-environment__photo--3 { aspect-ratio: 151 / 176; }
.sustainability-environment__photo--3 img { object-position: 68% 50%; }   /* Figma's crop */

/* Phones: the intro steps down to Body/S/Regular-15 (24 line). */
@media (max-width: 767.98px) {
  .sustainability-environment__desc {
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    letter-spacing: -0.009em;
  }
}

@media (min-width: 768px) {
  .sustainability-environment { padding: 80px 40px; }
  /* Straight after the Bagasse band (same beige-5) the two section
     paddings stacked into one double gap (256 web / 160 tablet), so
     this band drops its top padding: the card sits one section
     spacing (128 / 80) below the Bagasse content. Phones keep the 8px
     card margin (64 + 8 there). (User, 2026-10-08.) */
  .sustainability-material--bagasse + .sustainability-environment { padding-top: 0; }
  /* Tracks: inset | copy (cols 2–6) | gutter | gallery (cols 7–11) | inset */
  .sustainability-environment__card {
    display: grid;
    grid-template-columns:
      calc(8.3333% + 2px)
      calc(41.6667% - 14px)
      24px
      calc(41.6667% - 14px)
      calc(8.3333% + 2px);
    align-items: center;
    gap: 0;
    padding: 80px 0;
  }
  .sustainability-environment__content { grid-column: 2; }
  .sustainability-environment__gallery { grid-column: 4; }
  .sustainability-environment__cta { display: none; }   /* hidden in the web frame */
  .sustainability-environment__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
  }
  /* The web frame's proportions (253 | 250 columns). */
  .sustainability-environment__gallery-col { flex-grow: 250; }
  .sustainability-environment__photo--1 { flex-grow: 253; aspect-ratio: 253 / 372; }
  .sustainability-environment__photo--2 { aspect-ratio: 250 / 236; }
  .sustainability-environment__photo--3 { aspect-ratio: 250 / 280; }
}
@media (min-width: 992px) {
  /* Tracks: inset | copy (cols 2–5) | col 6 + gutters | gallery (cols 7–11) | inset */
  .sustainability-environment__card {
    grid-template-columns:
      calc(8.3333% + 2px)
      calc(33.3333% - 16px)
      1fr
      calc(41.6667% - 14px)
      calc(8.3333% + 2px);
  }
}
@media (min-width: 1200px) {
  .sustainability-environment { padding: 128px 80px; }
  .sustainability-environment__title {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
  }
}



.sustainability-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.sustainability-link:hover { color: var(--blue-70, #0b4a9e); }