/* =====================================================================
   InstaFarm · Chapter 03 "The people" (women at the heart of the supply chain)
   Drop-in component, measured from women-reference.png (stage = 1774 x 887).
   Desktop: fixed stage proportions, all sizes in container-query units
   (cqi = 1% of stage width). DO NOT replace cqi with px / vw / clamp.
   ===================================================================== */

.women {
  --wm-bg: #FDF7F4;
  --wm-ink: #17171D;
  --wm-text: #5E5654;
  --wm-red: #C4161C;
  --wm-line: #F2DDD8;

  position: relative;
  overflow: hidden;
  background: var(--wm-bg);
  scroll-margin-top: 80px;
}
.women__stage {
  container-type: inline-size;
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 1774 / 887;
}
.women__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 45%;
}
.women::after {                       /* cream fade on the left so text stays clean */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(253,247,244,.96) 0%, rgba(253,247,244,.9) 28%, rgba(253,247,244,.55) 40%, rgba(253,247,244,0) 52%);
  pointer-events: none;
}
.women__stage { z-index: 1; }

/* ---------- left column ---------- */
.women__left {
  position: absolute;
  left: 6.1cqi;
  top: 4.2cqi;
  width: 38cqi;
}
.women__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .9cqi;
  font: 700 max(12px, .92cqi)/1 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--wm-red);
}
.women__eyebrow::before { content: ""; width: 2.4cqi; height: 1.5px; background: currentColor; flex: none; }
.women__title {
  margin: 1.6cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(32px, 4.06cqi);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--wm-ink);
}
.women__title span { display: block; white-space: nowrap; }
.women__title em { font-style: italic; color: var(--wm-red); }
.women__lede {
  margin: 1.9cqi 0 0;
  max-width: 34.6cqi;
  font: 400 max(15px, 1.18cqi)/1.7 'Instrument Sans', system-ui, sans-serif;
  color: var(--wm-text);
}
.women__points { list-style: none; margin: 1.9cqi 0 0; padding: 0; display: grid; gap: 2.2cqi; }
.women__points li { display: flex; gap: 1.6cqi; align-items: flex-start; }
.women__point-icon {
  flex: none;
  width: max(48px, 4.96cqi);
  height: max(48px, 4.96cqi);
  border-radius: 50%;
  background: #FCE7E3;
  display: grid;
  place-items: center;
  color: var(--wm-red);
}
.women__point-icon svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.women__points h3 {
  margin: .45cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(17px, 1.3cqi);
  line-height: 1.2;
  color: var(--wm-ink);
}
.women__points p {
  max-width: 21.5cqi;
  margin: .35cqi 0 0;
  font: 400 max(14px, .99cqi)/1.5 'Instrument Sans', system-ui, sans-serif;
  color: var(--wm-text);
}

/* ---------- quote card ---------- */
.women__quote {
  position: absolute;
  left: 47.07cqi;
  top: 7.78cqi;
  width: 34.5cqi;
  min-height: 23.4cqi;
  box-sizing: border-box;
  margin: 0;
  padding: 2.4cqi 2.6cqi 1.6cqi;
  border-radius: 1.25cqi;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 249, 247, .86);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(90, 40, 20, .14);
}
.women__quote-mark { display: block; width: 2.9cqi; height: auto; color: var(--wm-red); }
.women__quote blockquote {
  margin: 1.9cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 400;
  font-size: max(18px, 1.5cqi);
  line-height: 1.5;
  color: var(--wm-ink);
}
.women__quote blockquote p { margin: 0; }
.women__quote blockquote em { font-style: italic; font-weight: 700; color: var(--wm-red); }
.women__quote figcaption {
  margin-top: 1.4cqi;
  padding-top: 1.1cqi;
  border-top: 1px solid #EAD8D3;
  max-width: 24cqi;
  display: flex;
  align-items: center;
  gap: 1.1cqi;
}
.women__avatar {
  flex: none;
  width: max(52px, 4.4cqi);
  height: max(52px, 4.4cqi);
  border-radius: 50%;
  object-fit: cover;
  background: #FBE1DC;
  color: #A51218;
  display: grid;
  place-items: center;
  font: 700 max(15px, 1.1cqi)/1 'Instrument Sans', system-ui, sans-serif;
  box-shadow: 0 0 0 3px #FFFFFF;
}
.women__who b { display: block; font: 600 max(15px, 1.04cqi)/1.3 'Instrument Sans', system-ui, sans-serif; color: var(--wm-ink); }
.women__who span { display: block; margin-top: .25cqi; font: 400 max(13px, .93cqi)/1.3 'Instrument Sans', system-ui, sans-serif; color: var(--wm-text); }

/* ---------- stat cards ---------- */
.women__stats {
  position: absolute;
  left: 42.84cqi;
  top: 33.3cqi;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 19.7cqi 19.95cqi;
  gap: 1.18cqi;
}
.women__stat {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 12.35cqi;
  padding: 2cqi 2cqi 1.3cqi;
  border-radius: 1.1cqi;
  display: flex;
  flex-direction: column;
}
.women__stat--red {
  background:
    radial-gradient(70% 90% at 90% 80%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(150deg, #CC1A21 0%, #B7141A 100%);
  color: #FFFFFF;
  box-shadow: 0 20px 44px rgba(196, 22, 28, .28);
}
.women__stat--light {
  background: rgba(253, 238, 234, .92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .75);
  color: var(--wm-ink);
  box-shadow: 0 20px 44px rgba(90, 40, 20, .12);
}
.women__stat-icon { width: max(28px, 2.2cqi); height: max(28px, 2.2cqi); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.women__stat--light .women__stat-icon { color: var(--wm-red); }
.women__stat-num {
  margin: auto 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: max(34px, 3.4cqi);
  line-height: 1;
  letter-spacing: -.02em;
}
.women__stat--light .women__stat-num { color: var(--wm-red); }
.women__stat-label { margin: .5cqi 0 0; font: 500 max(14px, 1.02cqi)/1.3 'Instrument Sans', system-ui, sans-serif; }
.women__stat-label::after { content: ""; display: block; width: 2.8cqi; height: 2px; margin-top: 1cqi; background: currentColor; opacity: .8; }
.women__stat--light .women__stat-label::after { background: var(--wm-red); }
.women__stat-leaf { position: absolute; right: -1cqi; bottom: -1cqi; width: 9cqi; opacity: .12; fill: currentColor; pointer-events: none; }
.women__stat--light .women__stat-leaf { color: var(--wm-red); opacity: .08; }

/* ---------- reveal ---------- */
.women [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.women [data-reveal].is-in { opacity: 1; transform: none; }
.women__quote[data-reveal] { transition-delay: .12s; }
.women__stats[data-reveal] { transition-delay: .24s; }

/* ---------- tablet / mobile: normal flow ---------- */
@media (max-width: 1099px) {
  .women__stage { aspect-ratio: auto; padding: 0 28px 48px; }
  .women::after { display: none; }
  .women__photo { position: relative; display: block; height: 360px; width: calc(100% + 56px); margin: 0 -28px; object-position: 88% 30%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .women__left, .women__quote, .women__stats { position: relative; left: auto; top: auto; }
  .women__left { width: auto; margin-top: -8px; }
  .women__title { font-size: clamp(34px, 6vw, 52px); }
  .women__lede { max-width: 38rem; margin-top: 16px; }
  .women__points { margin-top: 22px; gap: 18px; }
  .women__points li { gap: 16px; }
  .women__points p { max-width: 34rem; }
  .women__quote { width: 100%; min-height: 0; margin-top: 30px; padding: 26px 26px 20px; border-radius: 18px; border-color: var(--wm-line); background: #FFFFFF; }
  .women__quote-mark { width: 36px; }
  .women__quote blockquote { margin-top: 14px; }
  .women__quote figcaption { max-width: none; margin-top: 18px; padding-top: 14px; gap: 14px; }
  .women__stats { margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .women__stat { height: auto; min-height: 170px; padding: 22px 22px 18px; border-radius: 18px; }
  .women__stat-label::after { width: 36px; margin-top: 12px; }
  .women__stat-leaf { width: 110px; }
}
@media (max-width: 639px) {
  .women__stage { padding: 0 20px 40px; }
  .women__photo { height: 300px; width: calc(100% + 40px); margin: 0 -20px; }
  .women__title { font-size: clamp(30px, 8.6vw, 40px); }
  .women__title span { white-space: normal; display: inline; }
  .women__stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .women *, .women [data-reveal] { transition: none !important; }
  .women [data-reveal] { opacity: 1; transform: none; }
}