/* =====================================================================
   InstaFarm · "Where we operate"
   Drop-in component, measured from reach-reference.png (stage = 1774px).
   Inner sizes use container-query units (cqi = 1% of .reach__stage width)
   with px floors. Map pins are in % of the map image, so they always sit on
   the right countries. DO NOT replace cqi or pin percentages.
   ===================================================================== */

.reach {
  --rc-bg: #FEF9F7;
  --rc-ink: #17171D;
  --rc-text: #5E5654;
  --rc-red: #C4161C;
  --rc-line: #F2DEDA;

  position: relative;
  overflow: hidden;
  background:
    radial-gradient(16cqi 16cqi at 100% 6%, rgba(251, 214, 205, .5), transparent 70%),
    var(--rc-bg);
  scroll-margin-top: 80px;
}
.reach__stage { container-type: inline-size; max-width: 1600px; margin: 0 auto; }
.reach__inner { padding: 2.4cqi 3.3cqi 3cqi 3.7cqi; }

/* ---------- header ---------- */
.reach__head {
  display: grid;
  grid-template-columns: 52.5cqi 1px 25.2cqi;
  column-gap: 2.4cqi;
  justify-content: start;
  align-items: start;
}
.reach__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .8cqi;
  font: 600 max(12px, .9cqi)/1 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc-red);
}
.reach__eyebrow::before { content: ""; width: 2.9cqi; height: 1.5px; background: currentColor; flex: none; }
.reach__title {
  margin: 1.5cqi 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: .98;
  letter-spacing: -.025em;
  color: var(--rc-ink);
}
.reach__title span { display: block; white-space: nowrap; }
.reach__title em { font-style: italic; color: var(--rc-red); }
.reach__rule { width: 1px; height: 4.8cqi; margin-top: 3.1cqi; background: #E7B6B2; }
.reach__lede {
  margin: 3.2cqi 0 0;
  font: 400 max(15px, 1.05cqi)/1.57 'Instrument Sans', system-ui, sans-serif;
  color: var(--rc-text);
}

/* ---------- body: map + list ---------- */
.reach__body {
  margin-top: 1.7cqi;
  display: grid;
  grid-template-columns: 56.6cqi minmax(0, 1fr);
  gap: 1.15cqi;
  align-items: start;
}

/* map */
.reach__map {
  position: relative;
  margin: 0;
  aspect-ratio: 1672 / 941;
  border-radius: 1.15cqi;
  overflow: hidden;
  border: 1px solid var(--rc-line);
  box-shadow: 0 18px 44px rgba(150, 60, 50, .07);
}
.reach__map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reach__arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.reach__arcs path { stroke-dasharray: 5 5; animation: rc-dash 18s linear infinite; }
@keyframes rc-dash { to { stroke-dashoffset: -200; } }

.reach__pin {
  position: absolute;
  width: 0;
  height: 0;
}
.reach__pin::before {                     /* halo */
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: max(22px, 1.9cqi);
  height: max(22px, 1.9cqi);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(196, 22, 28, .16);
  animation: rc-pulse 2.8s ease-out infinite;
}
.reach__pin::after {                      /* dot */
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: max(9px, .72cqi);
  height: max(9px, .72cqi);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--rc-red);
  box-shadow: 0 0 0 2px #FFFFFF;
}
@keyframes rc-pulse { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.reach__pin span {
  position: absolute;
  white-space: nowrap;
  font: 600 max(11px, .82cqi)/1.15 'Instrument Sans', system-ui, sans-serif;
  color: #1F1D1D;
  text-shadow: 0 0 4px #FFF7F4, 0 0 8px #FFF7F4;
}
.reach__pin--r span { left: .85cqi; top: 0; transform: translateY(-60%); }
.reach__pin--l span { right: .85cqi; top: 0; transform: translateY(-60%); text-align: right; }
.reach__pin--b span { left: 0; top: .8cqi; transform: translateX(-35%); }

/* pin positions: % of the map image (1672 x 941) */
.reach__pin--usa     { left: 17.9%; top: 38.3%; }
.reach__pin--uk      { left: 43.2%; top: 30.8%; }
.reach__pin--france  { left: 44.1%; top: 34.4%; }
.reach__pin--germany { left: 46.5%; top: 31.6%; }
.reach__pin--espoo   { left: 48.9%; top: 27.2%; }
.reach__pin--uae     { left: 57.5%; top: 45.9%; }
.reach__pin--ghana   { left: 43.5%; top: 57.2%; }
.reach__pin--india   { left: 63.9%; top: 47.8%; }
.reach__pin--india::before { width: max(40px, 3.6cqi); height: max(40px, 3.6cqi); }
.reach__pin--india span { left: 3.2cqi; top: 0; transform: translateY(-30%); }
.reach__pin--india b { display: block; font-family: 'Fraunces', Georgia, serif; font-variation-settings: "opsz" 40; font-weight: 700; font-size: max(14px, 1cqi); color: var(--rc-red); }
.reach__pin--india small { display: block; margin-top: .25em; font-weight: 400; font-size: max(11px, .8cqi); color: var(--rc-text); }

/* list */
.reach__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .62cqi; }
.reach__row {
  box-sizing: border-box;
  min-height: 5.9cqi;
  padding: .35cqi .35cqi .35cqi 1.05cqi;
  display: flex;
  align-items: center;
  gap: .8cqi;
  border: 1px solid var(--rc-line);
  border-radius: .75cqi;
  background: rgba(255, 255, 255, .6);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1);
}
.reach__icon {
  flex: none;
  width: max(34px, 3.5cqi);
  height: max(34px, 3.5cqi);
  border-radius: 50%;
  background: #FCE4E0;
  display: grid;
  place-items: center;
  color: var(--rc-red);
}
.reach__icon svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reach__row h3 {
  flex: none;
  width: 8.4cqi;
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(15px, 1.07cqi);
  line-height: 1.2;
  color: var(--rc-ink);
}
.reach__val {
  flex: none;
  margin: 0 .2cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: max(24px, 2.25cqi);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--rc-red);
  white-space: nowrap;
}
.reach__desc {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font: 500 max(11px, .68cqi)/1.5 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #6C6360;
}
.reach__thumb {
  flex: none;
  width: 7.6cqi;
  height: auto;
  aspect-ratio: 141 / 92;
  object-fit: cover;
  border-radius: .6cqi;
  display: block;
}
@media (hover: hover) {
  .reach__row:hover { transform: translateX(-3px); box-shadow: 0 12px 30px rgba(150, 60, 50, .08); }
}

/* ---------- reveal ---------- */
.reach [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reach [data-reveal].is-in { opacity: 1; transform: none; }
.reach__row[data-reveal]:nth-child(2) { transition-delay: .06s; }
.reach__row[data-reveal]:nth-child(3) { transition-delay: .12s; }
.reach__row[data-reveal]:nth-child(4) { transition-delay: .18s; }
.reach__row[data-reveal]:nth-child(5) { transition-delay: .24s; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .reach__inner { padding: 44px 28px 48px; }
  .reach__head { display: block; }
  .reach__title { font-size: clamp(34px, 6vw, 52px); }
  .reach__rule { display: none; }
  .reach__lede { margin-top: 16px; max-width: 36rem; }
  .reach__body { margin-top: 28px; grid-template-columns: 1fr; gap: 18px; }
  .reach__map { border-radius: 18px; }
  .reach__pin span { font-size: 12px; }
  .reach__list { gap: 10px; }
  .reach__row { min-height: 0; padding: 8px 8px 8px 14px; border-radius: 14px; gap: 14px; }
  .reach__row h3 { width: 150px; }
  .reach__thumb { width: 120px; }
  .reach__icon { width: 44px; height: 44px; }
  .reach__thumb { border-radius: 10px; }
}
@media (max-width: 639px) {
  .reach__inner { padding: 36px 20px 40px; }
  .reach__title { font-size: clamp(30px, 8.6vw, 40px); }
  .reach__title span { white-space: normal; display: inline; }
  .reach__pin::before { width: 14px; height: 14px; }
  .reach__pin--india::before { width: 28px; height: 28px; }
  .reach__pin--uk span, .reach__pin--france span, .reach__pin--germany span { display: none; }
  .reach__pin--r span { left: 10px; }
  .reach__pin--india span { left: 18px; }
  .reach__map { margin: 0 -20px; border-radius: 0; border-left: 0; border-right: 0; }
  .reach__pin span { font-size: 10px; }
  .reach__pin--india small { display: none; }
  .reach__pin--espoo span { font-size: 0; }
  .reach__pin--espoo span::after { content: "Espoo (HQ)"; font-size: 10px; }
  .reach__row {
    display: grid;
    gap: 0 12px;
    grid-template-columns: 40px minmax(0, 1fr) 96px;
    grid-template-areas: "icon title thumb" "icon val thumb" "icon desc thumb";
    row-gap: 2px;
    align-items: start;
  }
  .reach__icon { grid-area: icon; width: 40px; height: 40px; align-self: center; }
  .reach__row h3 { grid-area: title; width: auto; }
  .reach__val { grid-area: val; font-size: 26px; }
  .reach__desc { grid-area: desc; }
  .reach__thumb { grid-area: thumb; align-self: center; width: 96px; }
}

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