/* ==========================================================================
   Our Business Activities — Figma 346:368 (desktop, "A — Sticky index"),
   350:368 (motion walkthrough), 356:4315 (mobile 393).
   ========================================================================== */

.page-ba {
  --forest-600: #407844;
  --ba-ink-40: rgba(15, 31, 16, 0.4);
  --ba-rule: rgba(15, 31, 16, 0.1);
  --ba-sticky-top: 120px;      /* index top offset; clears the 104px light nav */
  --ba-motion: 0.7s var(--ease-expo); /* Figma motion: 7.947% → 12.583% of 15.1s loop */
}

/* Active nav item: Figma shows lime semibold text, no underline */
.page-ba .site-nav .site-nav__links a[aria-current="page"] { color: var(--lime-300); font-weight: 600; }
.page-ba .site-nav .site-nav__links a[aria-current="page"]:not(:hover)::after { transform: scaleX(0); }
.page-ba .nav-light .site-nav__links a[aria-current="page"] { font-weight: 600; }

.ba-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--forest-600);
}

/* --------------------------------------------------------------------------
   01 Hero
   -------------------------------------------------------------------------- */
.ba-hero {
  position: relative;
  min-height: 760px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 32px;
  color: var(--base-white);
  background: var(--forest-950);
  overflow: hidden;
  isolation: isolate;
}
.ba-hero__photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.ba-hero::before, .ba-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.ba-hero::before { background: rgba(10, 10, 10, 0.6); }
.ba-hero::after {
  background: linear-gradient(180deg, rgba(15, 31, 16, 0.6) 0%, rgba(15, 31, 16, 0.25) 35%, rgba(15, 31, 16, 0.92) 100%);
}
.ba-hero__content { display: flex; flex-direction: column; gap: 24px; }

.ba-crumb ol { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: 12px; line-height: normal; }
.ba-crumb li { font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--lime-300); }
.ba-crumb li + li::before { content: "/"; margin-right: 10px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.4); }
.ba-crumb a { color: rgba(255, 255, 255, 0.55); transition: color 0.2s; }
.ba-crumb a:hover { color: var(--base-white); }

.ba-hero__title {
  max-width: 1180px;
  font-weight: 600;
  font-size: clamp(40px, 5.2778vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.ba-hero__title .muted { color: rgba(255, 255, 255, 0.5); }

.ba-hero__cue {
  display: flex; align-items: center; gap: 12px;
  margin-top: 121px;
  font-size: 13px; line-height: normal; color: rgba(255, 255, 255, 0.7);
}
.ba-hero__cue-line { width: 48px; height: 1px; background: rgba(255, 255, 255, 0.5); flex: none; }

/* --------------------------------------------------------------------------
   02 Activities — sticky index + scrolling list
   -------------------------------------------------------------------------- */
.ba-acts { background: var(--neutral-100); padding: 120px 0 140px; }
.ba-acts__grid {
  display: grid;
  grid-template-columns: minmax(0, 380fr) minmax(0, 820fr);
  column-gap: clamp(40px, 5.5556vw, 80px);
  align-items: start;
}

/* Sticky index (Figma "Index (sticky on scroll)") */
.ba-index {
  position: sticky;
  top: var(--ba-index-top, var(--ba-sticky-top));
  display: flex; flex-direction: column; gap: 40px;
}
.ba-index__intro { display: flex; flex-direction: column; gap: 16px; }
.ba-index__intro .ba-eyebrow { letter-spacing: 0.04em; }
.ba-index__title {
  font-weight: 600; font-size: 44px; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--forest-950);
}
.ba-index__lede { font-size: 16px; line-height: 1.55; color: var(--neutral-600); }

.ba-index__nav { position: relative; display: flex; flex-direction: column; gap: 40px; }
.ba-index__label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; line-height: 14px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 12px;
}
.ba-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--ba-rule);
  color: var(--forest-950);
  opacity: 0.4;
  transition: opacity var(--ba-motion);
}
.ba-row:hover { opacity: 0.7; }
.ba-row[aria-current="true"] { opacity: 1; }
.ba-row__num {
  flex: none;
  padding: 3px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 16px;
}
.ba-row__name { font-weight: 500; font-size: 16px; line-height: 21px; }
.ba-row:focus-visible { outline-offset: -2px; }

/* Lime pill that slides between rows (Figma "Active marker" 350:491, 31×22) */
.ba-index__marker {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 31px; height: 22px; border-radius: 999px;
  background: var(--lime-300);
  transform: translateY(var(--ba-marker-y, 0px));
  transition: transform var(--ba-motion);
  opacity: 0;
}
.ba-index.is-ready .ba-index__marker { opacity: 1; }
.no-js .ba-row { opacity: 1; }

/* Mobile chip index — hidden on desktop */
.ba-chips { display: none; }
.ba-group { display: none; }

/* Activity list */
.ba-list { display: flex; flex-direction: column; gap: 112px; min-width: 0; }
.ba-act { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: var(--ba-sticky-top); }
.ba-act__media {
  position: relative;
  aspect-ratio: 820 / 460;
  margin-bottom: 24px; /* Figma: 20px gap + 4px spacer + 20px gap before the eyebrow */
  border-radius: 20px;
  overflow: hidden;
  background: var(--forest-900);
}
.ba-act__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-act__media--top img { object-position: 50% 11.1%; } /* Figma crop: top -8.72% of a 178% tall fill */
.ba-act__media::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, 0.3); }
.ba-act__chip {
  position: absolute; left: 24px; top: 24px; z-index: 1;
  padding: 6px 12px; border-radius: 999px;
  background: var(--lime-300); color: var(--forest-950);
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: normal;
}
.ba-act__title { font-weight: 600; font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; color: var(--forest-950); }
.ba-act__body { max-width: 680px; font-size: 18px; line-height: 1.6; color: var(--neutral-600); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .ba-row__name { white-space: normal; }
  .ba-act__title { font-size: clamp(30px, 3.3vw, 40px); }
}

@media (max-width: 900px) {
  /* Hero (Figma 356:4316) */
  .ba-hero { min-height: 640px; padding-bottom: 48px; }
  .ba-hero::before { background: rgba(10, 10, 10, 0.3); }
  .ba-hero::after {
    background: linear-gradient(180deg, rgba(15, 31, 16, 0.6) 0%, rgba(15, 31, 16, 0.2) 35%, rgba(15, 31, 16, 0.95) 100%);
  }
  .ba-hero__content { gap: 18px; }
  .ba-crumb ol { gap: 8px; font-size: 11px; }
  .ba-crumb li + li::before { margin-right: 8px; }
  .ba-crumb__our { display: none; }
  .ba-hero__title { font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
  .ba-hero__cue { display: none; }

  /* Intro (Figma 371:367) */
  .ba-acts { padding: 64px 0 88px; }
  .ba-acts__grid { display: block; }
  .ba-index { position: static; display: block; padding-bottom: 28px; }
  .ba-index__intro .ba-eyebrow { font-size: 11px; line-height: 14px; }
  .ba-index__title { font-size: 36px; }
  .ba-index__lede { font-size: 15px; }
  .ba-index__nav { display: none; }

  /* Sticky swipe chips (Figma 371:371) */
  .ba-chips {
    position: sticky; top: var(--ba-chips-top, 0px); z-index: 20;
    display: flex; align-items: center; gap: 8px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 12px var(--gutter);
    background: var(--neutral-100);
    border-block: 1px solid rgba(15, 31, 16, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    transition: top 0.45s var(--ease-expo);
  }
  .ba-chips::-webkit-scrollbar { display: none; }
  .ba-chip {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 999px;
    border: 1px solid rgba(15, 31, 16, 0.15);
    font-weight: 500; font-size: 13px; line-height: normal; white-space: nowrap;
    color: rgba(15, 31, 16, 0.7);
    transition: background-color var(--ba-motion), border-color var(--ba-motion), color var(--ba-motion);
  }
  .ba-chip__num { font-family: var(--font-mono); font-size: 11px; color: rgba(15, 31, 16, 0.45); transition: color var(--ba-motion); }
  .ba-chip[aria-current="true"] { background: var(--lime-300); border-color: var(--lime-300); color: var(--forest-950); }
  .ba-chip[aria-current="true"] .ba-chip__num { color: var(--forest-950); }
  .ba-chip:focus-visible { outline-offset: -2px; outline-color: var(--forest-950); }
  .ba-chips__divider { flex: none; width: 1px; height: 20px; background: rgba(15, 31, 16, 0.15); }

  /* Activities (Figma 371:400) */
  .ba-list { gap: 56px; padding-top: 40px; }
  .ba-group {
    display: block;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 31, 16, 0.12);
    font-family: var(--font-mono); font-weight: 500;
    font-size: 11px; line-height: normal; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--neutral-500);
  }
  .ba-act { gap: 14px; scroll-margin-top: 150px; }
  .ba-act__eyebrow { display: none; }
  .ba-act__media { aspect-ratio: 361 / 240; margin-bottom: 0; border-radius: 16px; }
  .ba-act__chip { left: 16px; top: 16px; padding: 5px 10px; font-size: 11px; }
  .ba-act__title { font-size: 28px; letter-spacing: -0.03em; }
  .ba-act__body { font-size: 15px; }
}