/* SUSTAINABILITY (was ESG, 11 Sep 2026; moved and renamed 15 Oct 2026 - sustainability.js says why) - on top of ../page.css */
:root{--accent:var(--green);--accent-ink:#fff}
.lead{padding:90px var(--pad) 30px}
.lead .wrap{text-align:center}                                            /* centred (Nuo, 15 Oct 2026: "centre align this text"); the 900px cap went with it - text uses its container's width (2 Oct 2026) */
p.body.big{font-size:clamp(22px,2.2vw,34px);line-height:1.3;color:var(--ink);max-width:none;hyphens:manual;-webkit-hyphens:manual}   /* page.css's 68ch would centre it inside a left-hand box */
/* IN CAPITALS (Prue's review, 19 Oct 2026: the large lowercase sentence goes into capitals), tracked like the page's headings */
.lead p.body.big{text-transform:uppercase;letter-spacing:.04em;line-height:1.25}
/* PROUDLY B CORP (19 Oct 2026): the mark and two words, centred, the line into the dark report box below */
.proud{padding:70px var(--pad) 10px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.proud img{height:72px;width:auto}
.proud .caps{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:14px;margin:0}
/* OUR MISSION's own section (dark green) went on 15 Oct 2026: the quote is in the B Corp card - sustainability.js says why */
/* .pillars / .three / .pillar went with OUR ESG PILLARS on 15 Oct 2026 (and .board on 13 Sep) - sustainability.js says why */
.report{padding:40px var(--pad) 100px}
/* .bcert was .bcorp until 11 Sep 2026: the footer's B Corp link shares that class and this section's bottom padding was
   landing on it (measured: 182px for a 72px logo). Renamed; footer.js also defends itself now. */
.bcert{padding:0 var(--pad) 110px}
.bcert .frame{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;background:var(--dgreen);border-radius:24px;padding:44px 48px;color:var(--green)}
.bcert img{height:160px;width:auto}
.bcert blockquote{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.05;font-size:clamp(28px,2.8vw,40px)}   /* the quote runs the card's full width beside the mark (Nuo, 10 Sep 2026: never capped at 24ch) */
.bcert blockquote .keep{white-space:nowrap}                               /* "for all and by all." is one unbreakable phrase */
.bcert .by{font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.1em;margin-top:24px}
/* the text takes the card's full width - page.css caps p.body at 68ch, which left a third of the card empty (Nuo,
   11 Sep 2026) - and .lines keeps each sentence on its own line */
.bcert p.body{color:#1e3f2a;max-width:none}
.bcert p.body.lines{hyphens:manual;-webkit-hyphens:manual}
.bcert .pill{border-color:var(--green);color:var(--green)}@media (hover:hover){.bcert .pill:hover{border-color:var(--ink);color:var(--ink)}}   /* outline only - V2 slide 79 (13 Sep 2026) */
/* the iceberg photograph is bright at the top: the nav's white type and the white burger sat on ice and sky */
.hero .shade{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.08) 42%,rgba(0,0,0,.6) 100%)}
@media (max-width:860px){
  /* (the pill sat BESIDE the title at the lower right while the title was the short word ESG - Nuo, 11 Sep 2026; SUSTAINABILITY
     needs the whole width, so page.css's stacked hero copy stands since 15 Oct 2026) */
  .lead{padding:56px var(--pad) 20px}
  .bcert blockquote{font-size:20px}                                         /* was the 24px clamp floor (Nuo, 11 Sep 2026) */
  .bcert .frame{grid-template-columns:1fr;gap:24px;padding:28px}.bcert img{height:110px}   /* gap 24px: the mark sits over the quote, 48px read as two cards (15 Oct 2026) */
}
/* THE REPORT TAKES THE FULL PAGE WIDTH (Nuo, 2 Oct 2026: "use full page width for this"). flipbook.css caps the box at
   min(66vh, 700px) of spread height and centres it; here the box is the page's width and the spread's height follows from it
   (a spread is 1.4134 wide for its height; 144px is the box's side padding). On a phone flipbook.css's 70dvh rule stands. */
/* RETIRED 13 Oct 2026 (Nuo: "ESG report is not fine on desktop! make it look the same as the events pack on desktop!"): one page the
   full width left the page small and low in a tall black box. The report is now a .packbox.spread like the events pack and the
   festive pack (esg.js) - two pages side by side, still the full width - so this rule is gone:
   @media (min-width:861px){.report .packbox{width:100%;--bh:calc((100vw - var(--pad) * 2 - 144px) / 1.4134)}} */


/* == SOURCING, MOVED FROM THE ABOUT PAGE (15 Oct 2026) == (Nuo: "have separate pages for Sourcing and Charity, change Sourcing to
   Sustainability"; asked: "ESG becomes Sustainability" and "'Sourcing' section, no 2nd B Corp"). The rules are about.css's, as they
   stood after his 2 and 12 Oct rulings: the six suppliers 3 x 2 in three quarters of the row, the green pledge card in the last
   quarter at the six cards' height (contain:size; sustainability.js steps the type down, or stacks the card when even the floors do
   not fit). The card no longer carries the B Corp mark or its link - the page's own B Corp section does. The supplier cards are not
   links any more (they all pointed at this page), so they no longer lift on hover; the description still slides up. */
.src{padding:40px var(--pad) 40px}
.sup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.scard{position:relative;border-radius:14px;overflow:hidden;background:#111;color:#fff;aspect-ratio:4/3;box-shadow:0 14px 30px rgba(0,0,0,.12)}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.scard .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.8))}
.scard .what{position:absolute;left:18px;top:16px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.1em;padding:6px 10px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(0,0,0,.35)}
.scard .body{position:absolute;left:18px;right:18px;bottom:16px}
.scard .name{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:clamp(22px,2vw,28px);line-height:1.02}
.scard .d{font-size:14px;color:rgba(255,255,255,.85);margin-top:8px;max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
@media (hover:hover){.scard:hover img{transform:scale(1.05)}.scard:hover .d{max-height:120px}}
@media (min-width:1101px){.scard{container-type:inline-size}.scard .name{font-size:clamp(15px,7.2cqw,24px);white-space:nowrap}.scard .what{font-size:10px;white-space:nowrap;letter-spacing:.08em}}
.pledge{border-radius:24px;background:var(--dgreen);color:var(--green)}
.pledge .big{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.06}
.pledge .small{color:#1e3f2a;max-width:none}
@media (min-width:861px){
  .srcrow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:22px;align-items:stretch}
  .srcrow .pledge{contain:size;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;padding:32px 30px 28px}
  .srcrow .pledge .big{font-size:clamp(22px,1.7vw,30px);min-width:0;overflow-wrap:anywhere}
  .srcrow .pledge .small{font-size:16px;line-height:1.45;margin:0;min-width:0;overflow-wrap:anywhere}
  .srcrow.stack{grid-template-columns:minmax(0,1fr)}
  .srcrow.stack .pledge{contain:none}
}
@media (max-width:860px){
  .src{padding:40px var(--pad) 20px}
  .sup{grid-template-columns:1fr;gap:12px}.scard{aspect-ratio:16/10}.scard .d{max-height:none;font-size:14px}
  .pledge{margin-top:24px;padding:24px;border-radius:18px}
  .pledge .big{font-size:21px;line-height:1.12}
  .pledge .small{font-size:13.5px;line-height:1.4;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.scard img,.scard .d{transition:none}}
/* THE REPORT IN BIG NUMBERS (20 Oct 2026, GAIL's Impact Report: a number, a caption, three parts) - sustainability.js claims */
.claims{padding:70px var(--pad) 20px;display:grid;gap:56px}
.claims .part{display:grid;grid-template-columns:minmax(140px,1fr) 4fr;gap:24px;border-top:1px solid rgba(0,0,0,.16);padding-top:22px}
.claims .part h2{margin:0;font-family:var(--head);font-weight:400;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.claims .cl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
.claims .c .n{font-family:var(--head);font-weight:400;font-size:clamp(34px,3.6vw,56px);line-height:1;letter-spacing:-0.02em;color:var(--green)}
.claims .c p{margin:12px 0 0;font-size:15px;line-height:1.5;color:#2b2926;max-width:34ch}
.claims .c a{display:inline-block;margin-top:10px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.claims{gap:40px}.claims .part{grid-template-columns:1fr;gap:16px}.claims .cl{grid-template-columns:1fr;gap:26px}}
/* B Corp and the report link only (Georgia's video review via Nuo, 4 Nov 2026 ('All of it')): the mark, the two words, the link,
   centred on Sandstone between the hero and the films */
.report.bonly{display:flex;flex-direction:column;align-items:center;gap:28px;padding:96px var(--pad) 88px;background:transparent;color:var(--ink);text-align:center}
.report.bonly .proud{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0;margin:0}
.report.bonly .proud img{height:120px;width:auto}
.report.bonly .proud p{font-size:clamp(22px,2.2vw,32px);letter-spacing:.04em}
@media (max-width:860px){.report.bonly{padding:64px var(--pad) 56px;gap:22px}.report.bonly .proud img{height:96px}}
/* the report's row centred under PROUDLY B CORP (Nuo, 6 Nov 2026, 23:50: "Centre align the link to esg report"): the title and its sign as one
   centred pair, at every width */
.xp.esgrow>summary{justify-content:center}
.xp.esgrow>summary h2{text-align:center}
/* the report row sits higher, with room under it before the footer (Nuo, 8 Nov 2026: "move link to ESG report bit higher so there is more
   space between the link and the footer"): the B Corp block above gives up 48px of its bottom padding, the row takes 64px under it */
.report.bonly:has(+ .xp.esgrow){padding-bottom:40px}
.xp.esgrow{padding-bottom:64px}
@media (max-width:640px){.xp.esgrow{padding-bottom:48px}}