/* =========================================================
   UBUNTU LTD — inner pages (About, Sustainability)
   Loaded after style.css
========================================================= */

/* Small uppercase label used across inner pages */
.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--amber-soft);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* =========================================================
   ABOUT — hero
========================================================= */
.about-hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bark) url("../images/women.png") center 38% / cover no-repeat;
  color: #fff;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 35, 26, .5) 0%, rgba(19, 35, 26, .12) 22%, rgba(19, 35, 26, .28) 45%, rgba(19, 35, 26, .9) 100%);
}
.about-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 190px;
  padding-bottom: clamp(64px, 8vw, 105px);
}
.about-hero h1 {
  max-width: 1050px;
  color: #fff;
  font-size: clamp(3rem, 7vw, 6.6rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.04em;
}
.about-hero-copy {
  max-width: 660px;
  margin: 2rem 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.7;
}

/* ---------- Who we are ---------- */
.about-story { padding-block: clamp(78px, 9vw, 140px); background: var(--paper); }
.about-story-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: center;
}
.about-story-copy h2 { max-width: 12ch; margin-bottom: 1.5rem; font-size: clamp(2.6rem, 5vw, 4.8rem); }
.about-lede { color: var(--ink); font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.65; }
.about-story-copy p:not(.kicker) { max-width: 60ch; }
.about-story-copy p:not(.kicker):not(.about-lede) { color: var(--ink-60); }
.about-story-image { position: relative; }
.about-story-image img { width: 100%; height: auto; max-height: 720px; object-fit: cover; }
.about-image-note {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: min(290px, 64%);
  padding: 24px 26px;
  background: var(--bark);
  color: var(--husk);
}
.about-image-note span {
  display: block;
  margin-bottom: .4rem;
  color: var(--amber);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.about-image-note strong { display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.3; }

/* ---------- Purpose ---------- */
.purpose { padding-block: clamp(76px, 9vw, 130px); background: var(--husk); }
.purpose-head { margin-bottom: clamp(38px, 5vw, 65px); }
.purpose-head h2 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.purpose-card {
  position: relative;
  min-height: 480px;
  padding: clamp(34px, 5vw, 66px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.purpose-card-dark { background: var(--bark); color: var(--husk); }
.purpose-card-light { background: var(--amber); color: var(--bark); }
.purpose-number {
  position: absolute;
  top: 30px;
  right: 34px;
  font-family: var(--serif);
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 400;
  line-height: 1;
  opacity: .13;
}
.purpose-label { margin-bottom: .8rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.purpose-card-dark .purpose-label { color: var(--amber); }
.purpose-card h3 { max-width: 13ch; margin-bottom: 1rem; font-size: clamp(2rem, 3.7vw, 3.6rem); }
.purpose-card p:last-child { max-width: 56ch; margin-bottom: 0; opacity: .8; }

/* ---------- Business model ---------- */
.supply { padding-block: clamp(78px, 9vw, 138px); background: var(--bark); color: var(--husk); }
.supply-intro {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(65px, 8vw, 110px);
}
.supply .kicker { color: var(--amber-soft); margin-bottom: 18px; }
.supply-intro--solo { grid-template-columns: 1fr; margin-bottom: clamp(40px, 5vw, 64px); }
.supply-head h2 {
  margin: 0 0 26px;
  color: var(--husk);
  font-size: clamp(3.2rem, 5.4vw, 5.8rem);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.045em;
}
.supply-head > p:last-child { max-width: 520px; margin: 0; color: rgba(235, 237, 228, .66); line-height: 1.75; }
.supply-image { position: relative; margin: 0; overflow: hidden; background: var(--bark-2); aspect-ratio: 16 / 10; }
.supply-image::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .16);
  pointer-events: none;
}
.supply-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.supply-image:hover img { transform: scale(1.025); }
.supply-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}
.supply-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 3px;
  background: var(--amber);
  transform: translateY(-2px);
}
.supply-step { padding: 34px clamp(18px, 2.3vw, 34px) 28px; border-right: 1px solid var(--line-dark); }
.supply-step:first-child { padding-left: 0; }
.supply-step:last-child { border-right: 0; }
.supply-step > span {
  display: block;
  margin-bottom: 6rem;
  color: var(--amber);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.supply-step h3 { margin-bottom: .8rem; color: #fff; font-size: 1.45rem; }
.supply-step p { color: rgba(235, 237, 228, .62); font-size: .91rem; line-height: 1.7; }
.supply-action { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 12px; }
.supply .btn-ghost { color: var(--husk); }
.supply .btn-ghost:hover { background: var(--husk); border-color: var(--husk); color: var(--bark); }
.supply-action .btn-amber { color: var(--bark); }

/* =========================================================
   SUSTAINABILITY
========================================================= */
.sus { --sus-paper: #F7F6F0; --sus-muted: rgba(22, 32, 26, .66); background: var(--sus-paper); overflow: clip; }
.sus .kicker {
  margin: 0 0 18px;
  color: var(--amber);
  font-family: var(--sans);
  font-style: normal;
  font-size: .69rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sus h2 { color: var(--bark); font-weight: 500; letter-spacing: -.05em; line-height: .9; }

.sec-index { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.sec-index::before { content: ""; width: 28px; height: 1.5px; background: var(--amber); }
.sec-index > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--amber);
  font-size: .65rem;
  font-weight: 800;
}
.sec-index p {
  margin: 0;
  color: var(--sus-muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sus-lede { color: var(--ink); font-family: var(--serif); font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.5; }

/* ---------- Hero ---------- */
.sus-hero {
  position: relative;
  min-height: min(940px, 100vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bark);
  color: var(--husk);
}
.sus-hero-media { position: absolute; inset: 0; }
.sus-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.06) brightness(1.06); }
.sus-hero h1, .sus-hero-lede, .sus-hero .eyebrow { text-shadow: 0 2px 18px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35); }
.sus-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 20, 14, .45) 0%, transparent 30%),
    linear-gradient(180deg, rgba(10, 20, 14, .4) 0%, transparent 20%),
    linear-gradient(90deg, rgba(10, 22, 15, .66) 0%, rgba(10, 22, 15, .48) 40%, rgba(10, 22, 15, .1) 66%, transparent 85%);
}
.sus-hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: clamp(155px, 16vw, 225px);
  padding-bottom: clamp(90px, 10vw, 140px);
}
.sus-hero .eyebrow { color: var(--amber); font-size: .69rem; letter-spacing: .16em; margin-bottom: 18px; }
.sus-hero h1 {
  margin: 0 0 30px;
  color: var(--husk);
  font-size: clamp(4rem, 6vw, 6.2rem);
  font-weight: 500;
  line-height: .82;
  letter-spacing: -.065em;
}
.sus-hero-lede {
  max-width: 590px;
  margin: 0 0 18px;
  color: var(--amber-soft);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-style: italic;
  line-height: 1.25;
}
.sus-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 34px; }
.sus-hero-index {
  position: absolute;
  z-index: 4;
  right: clamp(25px, 4vw, 70px);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 25px;
  color: rgba(235, 237, 228, .56);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.sus-hero-index span + span { position: relative; padding-left: 26px; }
.sus-hero-index span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 1px;
  background: rgba(235, 237, 228, .42);
}

/* ---------- 01 Intro ---------- */
.sus-intro {
  position: relative;
  padding: clamp(100px, 11vw, 170px) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.sus-intro::after {
  content: "";
  position: absolute;
  width: min(550px, 42vw);
  height: min(550px, 42vw);
  right: -220px;
  bottom: -300px;
  border: 1px solid rgba(94, 124, 65, .15);
  border-radius: 50%;
}
.sus-intro-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(130px, .23fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 105px);
  align-items: start;
}
.sus-intro-copy { max-width: 900px; }
.sus-intro-copy h2 { margin: 0 0 35px; font-size: clamp(4rem, 7.5vw, 8rem); line-height: .84; letter-spacing: -.055em; }
.sus-intro-copy > p:not(.kicker) { max-width: 700px; margin: 0 0 24px; color: var(--sus-muted); line-height: 1.78; }
.sus-intro-copy .sus-lede { color: var(--ink); line-height: 1.55; }

/* ---------- Pillars ---------- */
.sus-pillars { padding: clamp(90px, 10vw, 145px) 0; background: #E5E8DE; border-bottom: 1px solid var(--line); }
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(19, 35, 26, .18);
  border-bottom: 1px solid rgba(19, 35, 26, .18);
}
.pillar { position: relative; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; padding: 38px 36px 42px; overflow: hidden; transition: background .35s; }
.pillar + .pillar { border-left: 1px solid rgba(19, 35, 26, .18); }
.pillar::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -95px;
  bottom: -95px;
  border: 1px solid rgba(94, 124, 65, .18);
  border-radius: 50%;
}
.pillar:hover { background: rgba(255, 255, 255, .34); }
.pillar-number { display: block; margin-bottom: 92px; color: var(--amber); font-family: var(--serif); font-size: 1.45rem; }
.pillar-label {
  margin: 0 0 10px;
  color: var(--sus-muted);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pillar h3 {
  margin: 0 0 20px;
  color: var(--bark);
  font-size: clamp(2.6rem, 4vw, 4.3rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.04em;
}
.pillar > p:last-child { max-width: 420px; margin: 0; color: var(--sus-muted); font-size: .92rem; line-height: 1.7; }

/* ---------- Film ---------- */
.sus-film { background: var(--bark); padding-block: clamp(56px, 7vw, 96px); }
.sus-film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
}

/* ---------- 02 Sourcing ---------- */
.sus-sourcing { padding: clamp(105px, 11vw, 165px) 0; border-bottom: 1px solid var(--line); }
.sourcing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr);
  gap: clamp(55px, 9vw, 140px);
  align-items: center;
}
.sourcing-copy h2 { max-width: 760px; margin: 0 0 32px; font-size: clamp(3.2rem, 6vw, 6.2rem); }
.sourcing-copy > p:not(.kicker) { max-width: 670px; margin: 0 0 22px; color: var(--sus-muted); line-height: 1.75; }
.sourcing-copy .sus-lede { color: var(--ink); }
.sourcing-visual { position: relative; min-height: 650px; overflow: hidden; background: var(--bark); }
.sourcing-visual::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -230px;
  top: -190px;
  border: 1px solid rgba(227, 166, 44, .17);
  border-radius: 50%;
}
.sourcing-visual::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: -130px;
  bottom: -120px;
  border: 1px solid rgba(235, 237, 228, .1);
  border-radius: 50%;
}
.sourcing-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(390px, 70%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 58px;
  border: 1px solid rgba(240, 200, 107, .36);
  border-radius: 50%;
}
.sourcing-orb span {
  margin-bottom: 24px;
  color: var(--amber);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.sourcing-orb strong {
  color: var(--husk);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 4.6rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.045em;
}
.sourcing-lines { position: absolute; inset: auto 0 40px; z-index: 1; display: grid; gap: 14px; }
.sourcing-lines span { display: block; height: 1px; background: rgba(235, 237, 228, .09); }
.sourcing-lines span:nth-child(1) { width: 90%; }
.sourcing-lines span:nth-child(2) { width: 68%; margin-left: auto; }
.sourcing-lines span:nth-child(3) { width: 45%; }

/* ---------- 03 Landscape + 06 Principles (shared head) ---------- */
.sus-landscape { padding: clamp(105px, 11vw, 165px) 0; background: #EFEDE5; border-bottom: 1px solid var(--line); }
.sus-principles { padding: clamp(105px, 11vw, 170px) 0; border-bottom: 1px solid var(--line); }
.split-head {
  display: grid;
  grid-template-columns: minmax(180px, .28fr) minmax(0, 1fr);
  gap: clamp(35px, 7vw, 100px);
  margin-bottom: clamp(65px, 8vw, 110px);
}
.split-head h2 { max-width: 950px; margin: 0; font-size: clamp(3.2rem, 6vw, 6.3rem); line-height: .92; }
.landscape-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(50px, 9vw, 135px);
  align-items: start;
  padding-top: 55px;
  border-top: 1px solid var(--line);
}
.landscape-statement p {
  margin: 0;
  color: var(--bark);
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 4.1rem);
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.landscape-copy { max-width: 700px; }
.landscape-copy p { margin: 0 0 25px; color: var(--sus-muted); font-size: 1rem; line-height: 1.8; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(19, 35, 26, .3);
  color: var(--bark);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .25s;
}
.text-link span { color: var(--amber); transition: transform .25s; }
.text-link:hover { border-color: var(--amber); }
.text-link:hover span { transform: translateX(5px); }

/* ---------- 04 Women ---------- */
.sus-women {
  position: relative;
  padding: clamp(110px, 12vw, 180px) 0;
  overflow: hidden;
  background: var(--bark);
  color: var(--husk);
}
.sus-women::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  right: -350px;
  top: -280px;
  border: 1px solid rgba(227, 166, 44, .15);
  border-radius: 50%;
}
.women-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(60px, 9vw, 135px);
  align-items: start;
}
.sus-women .sec-index > span { border-color: rgba(235, 237, 228, .2); }
.sus-women .sec-index p { color: rgba(235, 237, 228, .56); }
.sus-women h2 { max-width: 710px; margin: 0; color: var(--husk); font-size: clamp(3.4rem, 6.7vw, 7rem); line-height: .87; }
.women-copy { padding-top: clamp(20px, 5vw, 80px); }
.women-copy p { margin: 0 0 26px; color: rgba(235, 237, 228, .66); font-size: 1rem; line-height: 1.8; }
.women-copy .sus-lede { color: var(--amber-soft); font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.5; }

/* ---------- 05 Impact ---------- */
.sus-impact { padding: clamp(100px, 11vw, 165px) 0; background: var(--husk-2); border-bottom: 1px solid rgba(19, 35, 26, .15); }
.impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: end;
}
.impact-copy h2 { max-width: 780px; margin: 0 0 28px; font-size: clamp(3.1rem, 5.8vw, 5.9rem); line-height: .92; }
.impact-copy > p:not(.kicker) { max-width: 650px; margin: 0; color: var(--sus-muted); line-height: 1.78; }
.impact-stat { position: relative; padding: 55px 0 15px; border-top: 1px solid rgba(19, 35, 26, .22); }
.impact-stat::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 58px;
  height: 5px;
  background: var(--amber);
}
.impact-stat strong {
  display: block;
  margin-bottom: 22px;
  color: var(--bark);
  font-family: var(--serif);
  font-size: clamp(5rem, 9vw, 9rem);
  font-weight: 500;
  line-height: .75;
  letter-spacing: -.06em;
}
.impact-stat > span {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.impact-stat p { max-width: 370px; margin: 0; color: var(--sus-muted); font-size: .9rem; line-height: 1.6; }

/* ---------- 06 Principles ---------- */
.principles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.principle { min-height: 0; padding: 32px 35px 40px 0; border-bottom: 1px solid var(--line); }
.principle:nth-child(even) { padding-left: 35px; border-left: 1px solid var(--line); }
.principle:last-child { background: rgba(221, 225, 212, .34); padding-left: 35px; }
.principle > span { display: block; margin-bottom: 40px; color: var(--amber); font-size: .67rem; font-weight: 800; letter-spacing: .12em; }
.principle h3 {
  max-width: 450px;
  margin: 0 0 15px;
  color: var(--bark);
  font-size: clamp(1.7rem, 2.6vw, 2.65rem);
  font-weight: 500;
  line-height: 1.05;
}
.principle p { max-width: 560px; margin: 0; color: var(--sus-muted); font-size: .9rem; line-height: 1.7; }

/* ---------- Manifesto ---------- */
.sus-manifesto {
  position: relative;
  padding: clamp(115px, 13vw, 200px) 0;
  overflow: hidden;
  background: #293D2F;
  color: var(--husk);
  text-align: center;
}
.sus-manifesto::before,
.sus-manifesto::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.sus-manifesto::before { width: 760px; height: 760px; border: 1px solid rgba(227, 166, 44, .12); }
.sus-manifesto::after { width: 510px; height: 510px; border: 1px solid rgba(235, 237, 228, .06); }
.manifesto-inner { position: relative; z-index: 2; }
.manifesto-small {
  margin: 0 0 40px;
  color: var(--amber);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sus-manifesto blockquote {
  max-width: 1000px;
  margin: 0 auto;
  color: var(--husk);
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 7.5rem);
  font-style: italic;
  line-height: .95;
  letter-spacing: -.05em;
}
.manifesto-mark {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 55px;
  color: rgba(235, 237, 228, .48);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.manifesto-mark span { position: relative; }
.manifesto-mark span + span::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  left: -19px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--amber);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px) {
  .about-story-grid { grid-template-columns: 1fr; }
  .purpose-grid { grid-template-columns: 1fr; }
  .supply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supply-step { border-bottom: 1px solid var(--line-dark); }
  .supply-step:nth-child(2) { border-right: 0; }
  .supply-step:nth-child(3) { padding-left: 0; }
}

@media (max-width: 850px) {
  .sus-hero { min-height: 820px; }
  .sus-hero-overlay { background: linear-gradient(to top, rgba(10, 22, 15, .85) 0%, rgba(10, 22, 15, .45) 55%, rgba(10, 22, 15, .15) 100%); }
  .sus-intro-grid, .sourcing-grid, .split-head, .landscape-grid,
  .women-grid, .impact-grid, .supply-intro { grid-template-columns: 1fr; }
  .sus-film-grid { grid-template-columns: 1fr; }
  .sus-intro-grid, .split-head { gap: 22px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar { min-height: 360px; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid rgba(19, 35, 26, .18); }
  .pillar-number { margin-bottom: 60px; }
  .sourcing-visual { min-height: 560px; }
  .women-copy { padding-top: 0; }
}

@media (max-width: 640px) {
  .about-hero { min-height: 620px; }
  .about-hero h1 { font-size: clamp(2.7rem, 13vw, 4.3rem); }
  .about-story-image img { min-height: 420px; }
  .supply-grid { grid-template-columns: 1fr; }
  .supply-step { min-height: 0; padding: 30px 0; border-right: 0; }
  .supply-step:nth-child(3) { padding-left: 0; }
  .supply-step > span { margin-bottom: 2rem; }
  .sus-hero { min-height: 760px; }
  .sus-hero h1 { font-size: clamp(3.6rem, 18vw, 5.6rem); }
  .sus-hero-actions .btn { width: 100%; justify-content: center; }
  .sus-hero-index { left: 20px; right: 20px; bottom: 22px; justify-content: space-between; gap: 12px; font-size: .56rem; }
  .sus-intro, .sus-sourcing, .sus-landscape, .sus-women, .sus-impact, .sus-principles { padding: 82px 0; }
  .sus-intro-copy h2 { font-size: clamp(3.4rem, 17vw, 5rem); }
  .pillar { min-height: 0; padding: 34px 0 42px; }
  .pillar-number { margin-bottom: 42px; }
  .pillar h3 { font-size: 3rem; }
  .sourcing-copy h2, .split-head h2, .impact-copy h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .sourcing-visual { min-height: 440px; }
  .sourcing-orb { width: 80%; padding: 40px; }
  .sourcing-orb strong { font-size: 2.6rem; }
  .landscape-statement p { font-size: 2.1rem; }
  .sus-women h2 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .impact-stat strong { font-size: clamp(4.6rem, 24vw, 7rem); }
  .principles-grid { grid-template-columns: 1fr; }
  .principle, .principle:nth-child(even) { min-height: 0; padding: 30px 0 35px; border-left: 0; }
  .principle:last-child { padding-inline: 20px; }
  .principle > span { margin-bottom: 28px; }
  .sus-manifesto { padding: 100px 0; }
  .sus-manifesto blockquote { font-size: clamp(2.8rem, 14vw, 5rem); }
  .manifesto-mark { flex-direction: column; align-items: center; gap: 13px; }
  .manifesto-mark span + span::before { display: none; }
}
/* Banner heading vertically centred, like Sustainability */
.about-hero { align-items: center; }
.about-hero-inner { padding-top: 90px; padding-bottom: 90px; }
/* Mobile: About banner heading centred too */
@media (max-width: 760px) {
  .about-hero-inner { text-align: center; padding-top: 90px; padding-bottom: 60px; }
  .about-hero h1 { margin-inline: auto; }
}