/* ==========================================================================
   HERO (node 307:4) + NAV (node 307:3)
   Basis: 1440x860 Figma frame. Hero forced to 100vh per CONTRACT rule 3;
   all internal positions expressed as % of the hero box so proportions
   hold at any viewport height. Font sizes use clamp() anchored to the
   1440 vw basis so type scales fluidly instead of overflowing narrower
   desktop widths.
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: var(--h-hero);
  height: 100svh;
  overflow: hidden;
  background: var(--color-cream);
}

.hero__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-plate);
  overflow: hidden;
}

.hero__plate img {
  position: absolute;
  top: -11.628%;           /* -100px / 860px */
  left: 0;
  width: 100%;
  height: 114.186%;         /* 982px / 860px */
  object-fit: cover;
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
}

.hero__eyebrow {
  position: absolute;
  /* max(), not a bare 12.093% (2026-09-09, per Arina). 12.093% is 104px on Figma's
     860px hero and clears the nav — but the nav is a FIXED 92px tall while this offset
     scales with the hero's height, so on any window shorter than ~760px the percentage
     resolves below 92px and the eyebrow lands on the nav's own rule line. The floor
     keeps a consistent gap under that rule at every viewport height. */
  top: max(12.093%, 124px);   /* 104px / 860px, floored clear of the 92px nav */
  left: 53.472%;
  transform: translateX(-50%);
  width: 81.944%;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.236em;
  text-transform: uppercase;
  color: var(--color-cream);
}

.hero__line-1,
.hero__line-2 {
  position: absolute;
  left: 53.472%;
  transform: translateX(-50%);
  width: 81.944%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.306vw, 62px);
  line-height: 1.1935;
  letter-spacing: 0.0161em;
  text-transform: uppercase;
  color: var(--color-cream);
}

/* Grouped as one block on the hero's centre line (2026-09-08, per Arina) — was
   top: 17.209% / 75.349%, i.e. Figma's split that pushed the two lines to the top and
   bottom of the frame to bracket the photo. Line 1's bottom edge and line 2's top edge
   both resolve to the 50% mark (offset half the 14px gap each way), so the pair reads
   as a single centred statement at any hero height, however many lines each wraps to.
   The eyebrow and the location caption deliberately stay at top and bottom. */
.hero__line-1 {
  top: 50%;
  transform: translate(-50%, calc(-100% - 7px));
}
.hero__line-2 {
  top: 50%;
  transform: translate(-50%, 7px);
}

.hero__caption {
  position: absolute;
  top: 87.907%;               /* 756px / 860px */
  /* true page centre, not the 53.472% the rest of the hero text uses — that offset was
     Figma's, and it only read as centred while this line was the long
     "Nairobi, Kenya — Kolkata, India" pair. With just "Kolkata, India" left
     (2026-09-08, per Arina) the offset is visible, so this one line centres properly. */
  left: 50%;
  transform: translateX(-50%);
  width: 81.944%;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(11px, 0.903vw, 13px);
  letter-spacing: 0.1077em;
  text-transform: uppercase;
  color: var(--color-cream);
}

.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  z-index: 2;
}

.nav__wordmark {
  position: absolute;
  top: 8px;
  left: 5.556%;               /* 80px / 1440px */
  width: 9.444%;               /* 136px / 1440px */
  aspect-ratio: 136 / 77;
  background-color: var(--color-cream);
  -webkit-mask-image: url("../assets/webp/wordmark-mask.webp");
  mask-image: url("../assets/webp/wordmark-mask.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Right-anchored flex row (2026-09-08). Was four absolutely-positioned links on exact
   Figma left offsets (70.139 / 75.139 / 84.028 / 92.083%), which only held while the
   labels were Figma's own and the window was ~1440px: the gaps between those offsets
   are fixed percentages, but the label text stops shrinking at its clamp() floor, so
   they already overlapped by ~8px at 960px. Renaming SHOP -> ORGANIC (per Arina, to
   match the other pages) made the first pair collide at 1440 too. Flex keeps the same
   right-aligned row and can't collide at any width. */
.nav__links {
  position: absolute;
  inset: auto 5.556% auto auto;
  top: 40px;
  display: flex;
  gap: clamp(16px, 2.4vw, 36px);
}

.nav__link {
  position: relative;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.218em;
  text-transform: uppercase;
  color: var(--color-cream);
  white-space: nowrap;
}

/* Active-page indicator (2026-09-04, added for hospitality.html — full opacity +
   underline rule, same treatment as .inq-nav__link--active on inquiry.html). Unused on
   about.html itself since nothing there currently marks a link active. */
.nav__link--active {
  color: var(--color-cream);
}
.nav__link--active::after {
  content: '';
  position: absolute;
  top: 19px;
  left: 0;
  width: 66px;
  height: 1px;
  background: #a89478;
}

.nav__rule {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(253, 250, 242, 0.25);
}

/* The link offsets above are exact Figma percentages of a 1440px frame, but the link
   text itself stops shrinking at its clamp() floor — so on a phone CONTACT (left:
   92.083%) starts past the right edge and pushes the page into horizontal scroll.
   Hidden below the same breakpoint as every other nav on the site; the burger in
   .site-header covers navigation there. */
@media (max-width: 860px) {
  .nav__links { display: none; }
}

/* ==========================================================================
   META rows (nodes 307:6, 307:8) — thin 3-up label bar, reused twice
   Basis: 1440x64
   ========================================================================== */

.meta {
  position: relative;
  width: 100%;
  height: var(--h-meta);
  background: var(--color-cream);
}

.meta__rule-top,
.meta__rule-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(36, 30, 22, 0.14);
}
.meta__rule-top { top: 0; }
.meta__rule-bottom { bottom: 0; }

.meta__left,
.meta__center,
.meta__right {
  position: absolute;
  top: 40.625%;                /* 26px / 64px */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.236em;
  text-transform: uppercase;
  color: #8b8171;
  white-space: nowrap;
}
.meta__left   { left: 5.556%; }               /* 80px / 1440px */
.meta__center { left: 50%; transform: translateX(-50%); }
.meta__right  { right: 5.556%; }              /* (1440-1360)px / 1440px */

/* ==========================================================================
   MISSION (node 307:7) — rewritten 2026-09-03 per Arina as a plain flow layout
   (was a fixed 1440x760 %-positioned box) to fit the new 7-paragraph copy; see the
   HTML comment above .mission in about.html for the full context.
   ========================================================================== */

.mission {
  position: relative;
  width: 100%;
  padding: 88px 24px 96px;
  background: var(--color-cream);
  text-align: center;
}

.mission__eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.236em;
  text-transform: uppercase;
  color: #8b8171;
  margin: 0 0 20px;
}

.mission__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.889vw, 56px);
  text-transform: uppercase;
  color: #241e16;
  margin: 0 0 40px;
}

/* Two-column layout (2026-09-03, per Arina — reads like the old side-by-side
   .mission__col--1/--2 layout it replaced). Explicit grid with two manually-split
   paragraph groups (see about.html) instead of CSS column-count: auto-balanced
   columns kept leaving an uneven gap under whichever column's paragraphs happened to
   wrap shorter, even when the two groups' total character counts were near-equal —
   an independent-height grid column doesn't carry that "should match" expectation, so
   it doesn't read as a gap/hole the way a broken column-balance does. */
.mission__body {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  text-align: left;
}
.mission__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(14px, 1.111vw, 16px);
  line-height: 1.75;
  color: #241e16;
  margin: 0;
}

@media (max-width: 700px) {
  .mission__body { grid-template-columns: 1fr; }
}

.mission__btn {
  display: inline-flex;
  margin-top: 48px;
  padding: 0 32px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(36, 30, 22, 0.28);
  border-radius: var(--radius-plate);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #241e16;
  text-align: center;
}

/* ==========================================================================
   TWO-UP (node 307:9)
   Basis: 1440x560
   ========================================================================== */

.two-up {
  position: relative;
  width: 100%;
  height: var(--h-two-up);
  background: var(--color-cream);
  border-radius: var(--radius-plate);
  overflow: hidden;
}

.two-up__plate {
  position: absolute;
  top: 0;
  width: 49.931%;               /* 719px / 1440px */
  height: 100%;
  overflow: hidden;
}
.two-up__plate img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.two-up__plate--cotton   { left: 0; }
.two-up__plate--wellness { left: 50.069%; }  /* 721px / 1440px */

.two-up__plate--cotton img {
  top: -11.54%;
  height: 171.19%;
  object-fit: cover;
}

/* ==========================================================================
   HWMM — "How We Make Matters" (node 307:10)
   Basis: 1440x860
   ========================================================================== */

.hwmm {
  position: relative;
  width: 100%;
  height: var(--h-hwmm);
  background: var(--color-cream);
}

.hwmm__rule {
  position: absolute;
  left: 5.556%;               /* 80px / 1440px */
  width: 88.889%;             /* 1280px / 1440px */
  height: 1px;
  background: var(--color-rule);
}
.hwmm__rule--top    { top: 0; }
.hwmm__rule--mid    { top: 48.837%; }  /* 420px / 860px */
.hwmm__rule--bottom { top: 93.023%; } /* 800px / 860px */

.hwmm__label {
  position: absolute;
  top: 5.581%;                 /* 48px / 860px */
  left: 5.556%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.218em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.hwmm__index {
  position: absolute;
  top: 5.349%;                 /* 46px / 860px */
  right: 5.556%;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.111vw, 16px);
  color: var(--color-muted);
}

.hwmm__heading {
  position: absolute;
  top: 12.791%;                /* 110px / 860px */
  left: 5.556%;
  width: 52.778%;               /* 760px / 1440px */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.611vw, 52px);
  line-height: 1.1923;
  text-transform: uppercase;
  color: var(--color-ink);
}

.hwmm__intro {
  position: absolute;
  top: 14.651%;                /* 126px / 860px */
  left: 69.444%;                /* 1000px / 1440px */
  width: 25%;                   /* 360px / 1440px */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(12px, 0.972vw, 14px);
  line-height: 1.7143;
  color: var(--color-muted);
}

.hwmm__pillars {
  position: absolute;
  top: 53.256%;                /* 458px / 860px */
  left: 0;
  width: 100%;
  height: 39.767%;              /* (800-458)px / 860px — down to the bottom rule */
}

.hwmm__pillar-title {
  position: absolute;
  top: 0;                       /* 458px, i.e. the pillars container's own top */
  font-family: var(--font-display);
  font-size: clamp(18px, 1.806vw, 26px);
  color: var(--color-ink);
  white-space: nowrap;
}

.hwmm__pillar-body {
  position: absolute;
  top: 15.205%;                  /* (510-458)px / 342px */
  width: 25.139%;                /* 362px / 1440px */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(12px, 0.903vw, 13px);
  line-height: 1.6923;
  color: var(--color-muted);
}

.hwmm__pillar-list {
  position: absolute;
  top: 46.199%;                  /* (616-458)px / 342px */
  width: 25.139%;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(11px, 0.868vw, 12.5px);
  line-height: 1.76;
  color: var(--color-ink);
}
.hwmm__pillar-list p { margin: 0; }

.hwmm__pillar--1 .hwmm__pillar-title,
.hwmm__pillar--1 .hwmm__pillar-body { left: 7.778%; }   /* 112px / 1440px */
.hwmm__pillar--2 .hwmm__pillar-title,
.hwmm__pillar--2 .hwmm__pillar-body { left: 37.431%; }  /* 539px / 1440px */
.hwmm__pillar--3 .hwmm__pillar-title,
.hwmm__pillar--3 .hwmm__pillar-body,
.hwmm__pillar--3 .hwmm__pillar-list { left: 67.014%; }  /* 965px / 1440px */

/* ==========================================================================
   MIDFIG (node 307:11)
   Basis: 1440x661
   ========================================================================== */

.midfig {
  position: relative;
  width: 100%;
  height: var(--h-midfig);
  background: var(--color-cream);
}

.midfig__plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90.771%;              /* 600px / 661px */
  border-radius: var(--radius-plate);
  overflow: hidden;
}
.midfig__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.midfig__caption {
  position: absolute;
  top: 94.402%;                  /* 624px / 661px */
  left: 5.556%;                  /* 80px / 1440px */
  width: 50.903%;                /* 733px / 1440px */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.694vw, 10px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ==========================================================================
   HWMM-SOCIAL (node 307:12)
   Basis: 1440x262
   ========================================================================== */

.hwmm-social {
  position: relative;
  width: 100%;
  height: var(--h-hwmm-social);
  background: var(--color-cream);
}

.hwmm-social__rule {
  position: absolute;
  top: 0;
  left: 5.556%;
  width: 88.889%;
  height: 1px;
  background: var(--color-rule);
}

.hwmm-social__title {
  position: absolute;
  top: 15.267%;                  /* 40px / 262px */
  left: 7.778%;                  /* 112px / 1440px */
  font-family: var(--font-display);
  font-size: clamp(18px, 1.806vw, 26px);
  color: var(--color-ink);
  white-space: nowrap;
}

.hwmm-social__body {
  position: absolute;
  top: 35.115%;                  /* 92px / 262px */
  left: 7.778%;
  width: 36.111%;                /* 520px / 1440px */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(12px, 0.903vw, 13px);
  line-height: 1.6923;
  color: var(--color-muted);
}

.hwmm-social__list {
  position: absolute;
  top: 22.901%;                  /* 60px / 262px */
  width: 20.833%;                /* 300px / 1440px */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(11px, 0.868vw, 12.5px);
  line-height: 1.92;
  color: var(--color-ink);
}
.hwmm-social__list p { margin: 0; }
.hwmm-social__list--1 { left: 51.389%; }  /* 740px / 1440px */
.hwmm-social__list--2 { left: 73.611%; }  /* 1060px / 1440px */

/* ==========================================================================
   REGEN (node 307:13)
   Basis: 1440x720
   ========================================================================== */

.regen {
  position: relative;
  width: 100%;
  height: var(--h-regen);
  background: var(--color-cream);
}

.regen__rule {
  position: absolute;
  top: 0;
  left: 5.556%;
  width: 88.889%;
  height: 1px;
  background: var(--color-rule);
}

.regen__label {
  position: absolute;
  top: 6.667%;                  /* 48px / 720px */
  left: 5.556%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.218em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.regen__index {
  position: absolute;
  top: 6.389%;                  /* 46px / 720px */
  right: 5.556%;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.111vw, 16px);
  color: var(--color-muted);
}

.regen__heading {
  position: absolute;
  top: 16.667%;                 /* 120px / 720px */
  left: 5.556%;
  width: 37.5%;                  /* 540px / 1440px */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.333vw, 48px);
  line-height: 1.2083;
  text-transform: uppercase;
  color: var(--color-ink);
}

.regen__body {
  position: absolute;
  top: 48.889%;                 /* 352px / 720px */
  left: 5.556%;
  width: 34.722%;                /* 500px / 1440px */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(12px, 0.972vw, 14px);
  line-height: 1.7143;
  color: var(--color-muted);
}

.regen__list {
  position: absolute;
  top: 73.611%;                 /* 530px / 720px */
  left: 5.556%;
  width: 27.778%;                /* 400px / 1440px */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(11px, 0.903vw, 13px);
  line-height: 2;
  color: var(--color-ink);
}
.regen__list p { margin: 0; }

.regen__plate {
  position: absolute;
  top: 12.5%;                    /* 90px / 720px */
  left: 61.111%;                 /* 880px / 1440px */
  width: 33.333%;                /* 480px / 1440px */
  height: 77.778%;               /* 560px / 720px */
  border-radius: var(--radius-plate);
  overflow: hidden;
}
.regen__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   CERTS (node 307:14)
   Basis: 1440x280
   ========================================================================== */

.certs {
  position: relative;
  width: 100%;
  height: var(--h-certs);
  background: var(--color-cream);
}

.certs__rule {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-rule);
}
.certs__rule--top    { top: 0; }
.certs__rule--bottom { bottom: 0; }

.certs__label {
  position: absolute;
  top: 12.857%;                  /* 36px / 280px */
  left: 50%;
  transform: translateX(-50%);
  width: 88.889%;                /* 1280px / 1440px */
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.236em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.certs__row {
  position: absolute;
  top: 35%;                      /* (38+60)px / 280px — Figma "Frame 12" top + its 60px padding */
  left: 4.167%;                  /* 60px / 1440px */
  width: 91.667%;                /* 1320px / 1440px */
  height: 30%;                   /* 84px / 280px — tallest logo (GOTS) sets the row height */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.certs__row img { width: auto; object-fit: contain; }
.certs__logo--gots            { height: 100%; }      /* 84px / 84px */
.certs__logo--grs             { height: 88.1%; }      /* 74px / 84px */
.certs__logo--smeta           { height: 63.1%; }      /* 53px / 84px */
.certs__logo--fairtrade-intl  { height: 100%; }
.certs__logo--fair-trade-cert { height: 100%; }
.certs__logo--sa8000          { height: 100%; }
.certs__logo--bureau-veritas  { height: 86.9%; }      /* 73px / 84px */

/* Seven logos sized by HEIGHT (width:auto) in a single space-between row: their
   combined intrinsic width is far wider than a phone, and since nothing here can
   shrink they simply ran off the right edge into horizontal scroll. Wrap into a
   centered multi-row grid instead, capping each logo by max-height so the designed
   relative sizing (100% / 88.1% / 63.1% / 86.9%) is preserved. */
@media (max-width: 640px) {
  .certs { height: auto; padding: 36px 0 32px; }
  .certs__label {
    position: static;
    transform: none;
    width: auto;
    padding: 0 5.556%;
    margin-bottom: 22px;
  }
  .certs__row {
    position: static;
    width: auto;
    height: auto;
    padding: 0 5.556%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 24px;
  }
  .certs__row img { height: auto; max-width: 24vw; }
  .certs__logo--gots,
  .certs__logo--fairtrade-intl,
  .certs__logo--fair-trade-cert,
  .certs__logo--sa8000          { max-height: 42px; }
  .certs__logo--grs             { max-height: 37px; }
  .certs__logo--bureau-veritas  { max-height: 36px; }
  .certs__logo--smeta           { max-height: 26px; }
}

/* ==========================================================================
   CHETNA (node 307:16) — confirmed sizing exception, exceeds hero (~111.6vh)
   Basis: 1440x960
   ========================================================================== */

.chetna {
  position: relative;
  width: 100%;
  height: var(--h-chetna);
  background: var(--color-cream);
}

.chetna__rule {
  position: absolute;
  top: 0;
  left: 5.556%;
  width: 88.889%;
  height: 1px;
  background: var(--color-rule);
}

.chetna__label {
  position: absolute;
  top: 5%;                       /* 48px / 960px */
  left: 5.556%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.218em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.chetna__index {
  position: absolute;
  top: 4.792%;                   /* 46px / 960px */
  right: 5.556%;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.111vw, 16px);
  color: var(--color-muted);
}

.chetna__heading {
  position: absolute;
  top: 11.667%;                  /* 112px / 960px */
  left: 50%;
  transform: translateX(-50%);
  width: 52.778%;                /* 760px / 1440px */
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.444vw, 64px);
  line-height: 1.1875;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.chetna__sub {
  position: absolute;
  top: 21.458%;                  /* 206px / 960px */
  left: 50%;
  transform: translateX(-50%);
  width: 52.778%;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(10px, 0.799vw, 11.5px);
  letter-spacing: 0.139em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.chetna__plate {
  position: absolute;
  left: 5.556%;                  /* 80px / 1440px */
  width: 36.111%;                /* 520px / 1440px */
  border-radius: var(--radius-plate);
  overflow: hidden;
}
.chetna__plate img { width: 100%; height: 100%; object-fit: cover; }
.chetna__plate--farmers { top: 30.208%; height: 35.417%; }  /* 290/960, 340/960 */
.chetna__plate--field   { top: 67.708%; height: 25%; }       /* 650/960, 240/960 */

.chetna__copy {
  position: absolute;
  left: 48.611%;                 /* 700px / 1440px */
  width: 41.667%;                 /* 600px / 1440px */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(12px, 0.972vw, 14px);
  line-height: 1.8571;
  color: var(--color-muted);
}
.chetna__copy--1 { top: 31.25%; }   /* 300px / 960px */
.chetna__copy--2 { top: 50.208%; }  /* 482px / 960px */
.chetna__copy--3 { top: 63.75%; color: var(--color-ink); }  /* 612px / 960px */

/* ==========================================================================
   GALLERY (node 307:17)
   Basis: 1440x520
   ========================================================================== */

.gallery {
  position: relative;
  width: 100%;
  height: var(--h-gallery);
  background: var(--color-cream);
}

.gallery__rule {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-rule);
}

.gallery__left,
.gallery__center,
.gallery__right {
  position: absolute;
  top: 5%;                        /* 26px / 520px */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.236em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.gallery__left   { left: 5.556%; }
.gallery__center { left: 50%; transform: translateX(-50%); }
.gallery__right  { right: 5.556%; }

.gallery__row {
  position: absolute;
  top: 19.231%;                    /* 100px / 520px */
  left: 0.069%;                     /* 1px / 1440px */
  width: 99.931%;
  height: 68.846%;                  /* 358px / 520px */
  display: flex;
  gap: 0.139%;                      /* ~2px / 1440px between tiles */
}
.gallery__tile { flex: 1 1 0; height: 100%; overflow: hidden; }
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   SIGNOFF (node 307:18)
   Basis: 1440x400
   ========================================================================== */

.signoff {
  position: relative;
  width: 100%;
  height: var(--h-signoff);
  background: var(--color-cream);
  text-align: center;
}

.signoff__statement {
  position: absolute;
  top: 30%;                        /* 120px / 400px */
  left: 50%;
  transform: translateX(-50%);
  width: 55.556%;                   /* 800px / 1440px */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.889vw, 56px);
  line-height: 1.1786;
  letter-spacing: 0.018em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.signoff__handle {
  position: absolute;
  top: 58%;                        /* 232px / 400px */
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(10px, 0.833vw, 12px);
  letter-spacing: 0.183em;
  text-transform: uppercase;
  color: #a89478;
  white-space: nowrap;
}

.signoff__rule {
  position: absolute;
  top: 64.5%;                      /* 258px / 400px */
  left: 50%;
  transform: translateX(-50%);
  width: 135px;
  height: 1px;
  background: rgba(36, 30, 22, 0.28);
}

/* ==========================================================================
   FOOTER (node 314:13)
   Basis: 1440x420 — dark section, own color set (not the light page tokens)
   ========================================================================== */

.footer {
  position: relative;
  width: 100%;
  height: var(--h-footer);
  background: var(--color-ink);
}

.footer__mark {
  position: absolute;
  top: 0;
  left: 5.556%;                    /* 80px / 1440px */
  width: 19.895%;                   /* 286.5px / 1440px */
  height: 38.333%;                  /* 161px / 420px */
  background-color: var(--color-cream);
  -webkit-mask-image: url("../assets/webp/wordmark-mask.webp");
  mask-image: url("../assets/webp/wordmark-mask.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.footer__tag {
  position: absolute;
  top: 35.714%;                     /* 150px / 420px */
  left: 5.556%;
  width: 23.611%;                    /* 340px / 1440px */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(12px, 0.972vw, 14px);
  line-height: 1.7143;
  color: rgba(248, 245, 236, 0.6);
}

.footer__col {
  position: absolute;
  top: 20.952%;                     /* 88px / 420px */
  height: 35.714%;                   /* 150px — tall enough to contain head + 4 links, basis for children's % top */
}
.footer__col--learn   { left: 51.389%; }  /* 740px / 1440px */
.footer__col--company { left: 66.667%; }  /* 960px / 1440px */
.footer__col--connect { left: 81.944%; }  /* 1180px / 1440px */

.footer__col-head {
  position: absolute;
  top: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a89478;
  white-space: nowrap;
}

.footer__link {
  position: absolute;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(12px, 0.972vw, 14px);
  color: rgba(248, 245, 236, 0.75);
  white-space: nowrap;
}
/* link rows sit 38px, 68px, 98px, 128px below the column head (126/156/186/216 - 88), on a 150px basis */
.footer__link:nth-of-type(1) { top: 25.333%; }
.footer__link:nth-of-type(2) { top: 45.333%; }
.footer__link:nth-of-type(3) { top: 65.333%; }
.footer__link:nth-of-type(4) { top: 85.333%; }

.footer__rule {
  position: absolute;
  top: 76.19%;                       /* 320px / 420px */
  left: 5.556%;
  width: 88.889%;
  height: 1px;
  background: rgba(248, 245, 236, 0.14);
}

.footer__meta {
  position: absolute;
  top: 82.857%;                      /* 348px / 420px */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.694vw, 10px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 245, 236, 0.45);
  white-space: nowrap;
}
.footer__meta--left  { left: 5.556%; }
.footer__meta--right { right: 5.556%; }

/* Every piece above is absolutely positioned against the 1440x420 desktop frame —
   the three columns' left:51%/67%/82% are only ~76px apart once the viewport itself
   shrinks, which is narrower than "Carbon Neutral" etc. at their clamp() floor size,
   so columns start overlapping each other (and the meta/tag text) well before actual
   page overflow. Switch the whole footer to normal block flow instead of shrinking
   the desktop layout further. */
@media (max-width: 640px) {
  /* Flex-wrap rather than a stack: the wordmark, the tagline, the rule and each meta
     line are all full-width so they each take their own row, which leaves the three
     link columns sharing one row as equal thirds — three columns on mobile too, per
     Arina (2026-09-08), just narrower. */
  .footer {
    height: auto;
    padding: 48px 5.556% 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 10px;
  }
  .footer__mark {
    position: static;
    flex: 0 0 auto;
    width: 140px;
    height: auto;
    aspect-ratio: 136 / 77;
    margin: 0 0 28px;
  }
  .footer__tag {
    position: static;
    width: 100%;
    /* NO max-width here. A max-width caps the tagline's used size, and flex decides
       line-breaking on that capped size — so on a ~430px screen the three link
       columns still "fit" in the ~90px strip left beside it and crammed in there at
       4px wide each instead of wrapping to their own row. Full width means nothing
       can share its line. */
    max-width: none;
    margin: 0 0 36px;
  }
  .footer__col {
    position: static;
    flex: 1 1 30%;
    /* a real minimum so the three columns can never be squeezed onto a part-row —
       together they need more than any leftover strip can offer, forcing a wrap */
    min-width: 84px;
    height: auto;
    margin: 0 0 32px;
  }
  .footer__col-head {
    position: static;
    margin: 0 0 16px;
  }
  .footer__link {
    position: static;
    display: block;
    margin: 0 0 13px;
    /* nowrap is what made these collide in the first place — in a ~100px-wide column
       "Carbon Neutral" has to be allowed to wrap rather than run into its neighbour. */
    white-space: normal;
    font-size: 12px;
  }
  .footer__link:nth-of-type(1),
  .footer__link:nth-of-type(2),
  .footer__link:nth-of-type(3),
  .footer__link:nth-of-type(4) {
    top: auto;
  }
  .footer__rule {
    position: static;
    width: 100%;
    margin: 8px 0 24px;
  }
  .footer__meta {
    position: static;
    display: block;
    width: 100%;
    margin: 0 0 8px;
    white-space: normal;
  }
  .footer__meta--left,
  .footer__meta--right {
    left: auto;
    right: auto;
  }
}

/* ==========================================================================
   MOBILE ADJUSTMENTS (2026-09-08, per Arina)
   Kept at the end of the file on purpose: @media adds no specificity, so a block
   placed next to the rules it overrides would lose to anything defined further down.
   ========================================================================== */

/* The 14px gap between the two hero lines is right at desktop size, but on a phone
   line 1 wraps to two lines of its own, and the extra gap then makes line 2 read as a
   detached third element rather than part of the same statement. Dropping the offsets
   to zero leaves only the type's own leading, so the break between "RESPECT" and
   "FOR ALL LIFE ON EARTH" matches the break inside line 1 (2026-09-08, per Arina). */
@media (max-width: 640px) {
  .hero__line-1 { transform: translate(-50%, -100%); }
  .hero__line-2 { transform: translate(-50%, 0); }
}

/* MISSION — the two paragraph groups are grid columns that collapse to one column at
   700px (above), but the grid's row-gap was 0, so once stacked the two paragraphs ran
   straight into each other with no break. Give them real separation and centre the
   copy, matching the centred eyebrow/heading above them. */
@media (max-width: 700px) {
  .mission__body {
    row-gap: 22px;
    text-align: center;
  }
}

/* ==========================================================================
   ABOUT US — FULL MOBILE PASS (2026-09-08, per Arina)
   Every section below was built as a fixed-height box (height: var(--h-*)) with all
   its children absolutely positioned as percentages of the 1440px Figma frame. That
   holds up while the viewport keeps roughly the design's aspect ratio, but on a phone
   the box height no longer grows with the text — copy at its clamp() floor needs far
   more vertical room than the frame allows — so paragraphs ran straight over each
   other and off the bottom of their section (reported section by section: HWMM,
   MIDFIG, HWMM-SOCIAL, REGEN, CHETNA).
   The fix throughout is the same: let the section height go auto and put the children
   back into normal document flow, keeping only the small top-right index numbers
   absolutely positioned (they still read correctly against the section's own top).
   ========================================================================== */
@media (max-width: 640px) {

  /* -- shared: index numerals stay pinned top-right of their section -- */
  .hwmm__index,
  .regen__index,
  .chetna__index {
    top: 30px;
    right: 5.556%;
  }

  /* -------------------------------- TWO-UP -------------------------------- */
  /* Half the height on mobile, per Arina — at full height the two half-width plates
     are tall narrow slivers. Kept side by side rather than stacked. */
  .two-up { height: 32vh; min-height: 220px; }

  /* -------------------------------- HWMM ---------------------------------- */
  .hwmm {
    height: auto;
    padding: 30px 5.556% 44px;
  }
  .hwmm__rule--top { position: static; left: auto; width: 100%; margin: 0 0 24px; }
  /* frame dividers tied to the desktop box's own proportions — meaningless once the
     section flows, and they'd land mid-paragraph */
  .hwmm__rule--mid,
  .hwmm__rule--bottom { display: none; }
  .hwmm__label {
    position: static;
    margin: 0 0 20px;
    white-space: normal;
    padding-right: 40px;           /* clear of the pinned index */
  }
  .hwmm__heading {
    position: static;
    width: 100%;
    margin: 0 0 22px;
    font-size: clamp(26px, 7.5vw, 40px);
  }
  .hwmm__intro {
    position: static;
    width: 100%;
    margin: 0 0 34px;
  }
  .hwmm__pillars { position: static; width: 100%; height: auto; }
  .hwmm__pillar { margin: 0 0 30px; }
  .hwmm__pillar-title,
  .hwmm__pillar-body,
  .hwmm__pillar-list { position: static; width: 100%; }
  .hwmm__pillar--1 .hwmm__pillar-title,
  .hwmm__pillar--1 .hwmm__pillar-body,
  .hwmm__pillar--2 .hwmm__pillar-title,
  .hwmm__pillar--2 .hwmm__pillar-body,
  .hwmm__pillar--3 .hwmm__pillar-title,
  .hwmm__pillar--3 .hwmm__pillar-body,
  .hwmm__pillar--3 .hwmm__pillar-list { left: auto; }
  .hwmm__pillar-title { white-space: normal; margin: 0 0 10px; }
  .hwmm__pillar-body { margin: 0 0 12px; }

  /* -------------------------------- MIDFIG -------------------------------- */
  .midfig { height: auto; padding: 0 0 28px; }
  .midfig__plate {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .midfig__caption {
    position: static;
    width: auto;
    margin: 16px 5.556% 0;
  }

  /* ----------------------------- HWMM-SOCIAL ------------------------------ */
  /* Flex-wrap so the rule, title and body each take a full row while the two lists
     share the row below them — three items left, three right, per Arina (2026-09-08),
     rather than one long stack of six. Note there is deliberately no max-width on the
     full-width children: capping their used size lets the lists squeeze onto the
     leftover strip beside one of them instead of wrapping (the bug this same pattern
     caused in the footer). */
  .hwmm-social {
    height: auto;
    padding: 0 5.556% 40px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
  }
  .hwmm-social__rule { position: static; left: auto; width: 100%; margin: 0 0 26px; }
  .hwmm-social__title {
    position: static;
    width: 100%;
    white-space: normal;
    margin: 0 0 14px;
  }
  .hwmm-social__body { position: static; width: 100%; margin: 0 0 22px; }
  .hwmm-social__list {
    position: static;
    flex: 1 1 40%;
    min-width: 118px;
    width: auto;
  }
  .hwmm-social__list--1,
  .hwmm-social__list--2 { left: auto; margin: 0; }

  /* -------------------------------- REGEN --------------------------------- */
  .regen { height: auto; padding: 30px 5.556% 44px; }
  .regen__rule { position: static; left: auto; width: 100%; margin: 0 0 24px; }
  .regen__label {
    position: static;
    margin: 0 0 20px;
    white-space: normal;
    padding-right: 40px;
  }
  .regen__heading {
    position: static;
    width: 100%;
    margin: 0 0 20px;
    font-size: clamp(24px, 7vw, 38px);
  }
  .regen__body { position: static; width: 100%; margin: 0 0 20px; }
  .regen__list { position: static; width: 100%; margin: 0 0 28px; }
  .regen__plate {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* -------------------------------- CHETNA -------------------------------- */
  .chetna { height: auto; padding: 30px 5.556% 44px; }
  .chetna__rule { position: static; left: auto; width: 100%; margin: 0 0 24px; }
  .chetna__label {
    position: static;
    margin: 0 0 22px;
    white-space: normal;
    padding-right: 40px;
  }
  .chetna__heading {
    position: static;
    transform: none;
    width: 100%;
    margin: 0 0 12px;
    font-size: clamp(30px, 9vw, 48px);
  }
  .chetna__sub {
    position: static;
    transform: none;
    width: 100%;
    margin: 0 0 28px;
  }
  .chetna__plate {
    position: static;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0 0 16px;
  }
  .chetna__plate--farmers,
  .chetna__plate--field { top: auto; height: auto; }
  .chetna__copy {
    position: static;
    left: auto;
    width: 100%;
    margin: 0 0 18px;
  }
  .chetna__copy--1,
  .chetna__copy--2,
  .chetna__copy--3 { top: auto; }
  .chetna__copy--3 { margin-bottom: 0; }

  /* ------------------------------- GALLERY -------------------------------- */
  /* Slightly shorter than the desktop proportion, per Arina — four tiles across a
     phone are narrow, so the full height reads as an over-tall band of slivers. */
  .gallery { height: 40vh; min-height: 260px; }

  /* ------------------------------- SIGNOFF -------------------------------- */
  .signoff { height: auto; padding: 56px 5.556% 60px; }
  .signoff__statement {
    position: static;
    transform: none;
    width: 100%;
    margin: 0 0 22px;
    font-size: clamp(26px, 8vw, 44px);
  }
  .signoff__handle { position: static; transform: none; margin: 0 0 14px; }
  .signoff__rule { position: static; transform: none; margin: 0 auto; }
}