/* ==========================================================================
   Animation layer: counting figures, draw-on illustrations, a scroll-driven
   process dial, and a scroll progress bar.
   Loaded after theme-green.css. Everything collapses under reduced motion.
   ========================================================================== */

/* ---------- hero media slot ----------
   The hero grid is 12 columns; the media takes the right half and spans the
   headline and aside rows, so copy and image sit side by side. */
.mi-hero__media {
  grid-column: 1 / -1;
  grid-row: auto;
  border-radius: var(--mi-radius-media);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--mi-olive);
  align-self: center;
}
@media (min-width: 900px) {
  .mi-hero__media { grid-column: 8 / 13; grid-row: 2 / span 2; }
  .mi-hero__title { grid-column: 1 / 8; }
  .mi-hero__aside { grid-column: 1 / 8; }
}
.mi-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mi-hero__slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--mi-md);
  background:
    repeating-linear-gradient(90deg, rgba(27,128,57,.07) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(0deg,  rgba(27,128,57,.07) 0 1px, transparent 1px 36px),
    var(--mi-olive);
}
.mi-hero__media { position: relative; }
.mi-hero__slot span {
  font-size: var(--mi-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mi-bronze);
  max-width: 26ch;
  line-height: 1.8;
}

/* ---------- socials + newsletter, in the contact column ---------- */
.mi-social { border-top: 1px solid var(--mi-rule); padding-top: var(--mi-sm); }
.mi-social__list {
  list-style: none;
  margin: var(--mi-sm) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.mi-social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--mi-rule);
  border-radius: 50%;
  color: var(--mi-ink);
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--mi-ease);
}
.mi-social__link:hover,
.mi-social__link:focus-visible {
  background: var(--mi-olive);
  border-color: transparent;
  color: var(--mi-bronze);
  transform: translateY(-2px);
}
.mi-social__link:focus-visible { outline: 2px solid var(--mi-bronze); outline-offset: 3px; }
.mi-social__link svg { width: 20px; height: 20px; display: block; }

.mi-news { border-top: 1px solid var(--mi-rule); padding-top: var(--mi-sm); }
.mi-news__note { margin-top: 6px; font-size: var(--mi-body); }
.mi-news__msg { margin-top: 10px; font-size: var(--mi-body); color: var(--mi-bronze); }
.mi-news__label { position: absolute; left: -9999px; }
.mi-news__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--mi-sm); }
.mi-news__form input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 0.85em 1.1em;
  border: 1px solid var(--mi-rule);
  border-radius: var(--mi-radius);
  background: var(--mi-bg);
  color: var(--mi-ink);
  font: 400 var(--mi-body) var(--mi-font);
}
.mi-news__form input:focus {
  outline: none;
  border-color: var(--mi-bronze);
  box-shadow: 0 0 0 3px var(--mi-olive);
}
.mi-news__form .mi-btn { flex: 0 0 auto; }

/* ---------- feature photograph slot ---------- */
.mi-feature__shot {
  margin: 0;
  border-radius: var(--mi-radius-media);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--mi-olive);
}
.mi-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1.2s var(--mi-ease);
}
.mi-js .mi-reveal.is-in .mi-feature__img,
.mi-feature__art.is-in .mi-feature__img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mi-feature__img { transform: none !important; transition: none !important; }
}

/* ---------- scroll progress ---------- */
.mi-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--mi-bronze);
  z-index: 950;
  transition: width .1s linear;
  pointer-events: none;
}

/* ---------- counting figures ---------- */
.mi-impact__fig { font-variant-numeric: tabular-nums; }

/* ---------- draw-on illustrations ---------- */
.mi-js .mi-ill--draw path,
.mi-js .mi-ill--draw line,
.mi-js .mi-ill--draw circle,
.mi-js .mi-ill--draw rect {
  stroke-dasharray: var(--mi-len, 700);
  stroke-dashoffset: var(--mi-len, 700);
  transition: stroke-dashoffset 1.4s var(--mi-ease);
}
.mi-js .mi-ill--draw.is-in path,
.mi-js .mi-ill--draw.is-in line,
.mi-js .mi-ill--draw.is-in circle,
.mi-js .mi-ill--draw.is-in rect { stroke-dashoffset: 0; }

/* Filled shapes fade up rather than draw. */
.mi-js .mi-ill--draw [class*="il-f"] {
  opacity: 0;
  transform: scale(.92);
  transform-origin: center;
  transition: opacity .7s ease .45s, transform .7s var(--mi-ease) .45s;
}
.mi-js .mi-ill--draw.is-in [class*="il-f"] { opacity: 1; transform: none; }

/* ---------- sticky process dial ---------- */
.mi-proc--sticky .mi-proc__wrap { display: grid; gap: var(--mi-md); }
@media (min-width: 900px) {
  .mi-proc--sticky .mi-proc__wrap { grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
}

.mi-proc__sticky { position: sticky; top: 110px; display: grid; justify-items: center; gap: var(--mi-sm); }
.mi-dial { width: 100%; max-width: 330px; height: auto; display: block; }
.mi-dial__ring { fill: none; stroke: var(--mi-rule); stroke-width: 6; }
.mi-dial__val {
  fill: none;
  stroke: var(--mi-bronze);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s var(--mi-ease);
}
.mi-dial__num { font: 500 34px var(--mi-font); fill: var(--mi-ink); }
.mi-dial__cap { font: 500 11px var(--mi-font); fill: var(--mi-mute); letter-spacing: 2px; }

.mi-proc__stack { display: grid; gap: var(--mi-xs); }
.mi-proc__card {
  border: 1px solid transparent;
  border-radius: var(--mi-radius-panel);
  padding: clamp(20px, 2.4vw, 32px);
  opacity: .45;
  transition: background-color .45s ease, border-color .45s ease, opacity .45s ease;
}
.mi-proc__card.is-active { background: var(--mi-bg); border-color: var(--mi-rule); opacity: 1; }
.mi-alt .mi-proc__card.is-active { background: #FFFFFF; }
.mi-proc__card .mi-proc__num { display: block; margin-bottom: 6px; }
.mi-proc__card h3 { font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.mi-proc__card p { margin-top: 8px; font-size: var(--mi-body); }

@media (prefers-reduced-motion: reduce) {
  .mi-progress { display: none; }
  .mi-js .mi-ill--draw path,
  .mi-js .mi-ill--draw line,
  .mi-js .mi-ill--draw circle,
  .mi-js .mi-ill--draw rect { stroke-dashoffset: 0 !important; transition: none !important; }
  .mi-js .mi-ill--draw [class*="il-f"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mi-proc__card { opacity: 1; }
  .mi-dial__val { transition: none; }
  .mi-proc__sticky { position: static; }
}

/* --------------------------------------------------------------------------
   Brand logo. The supplied file carries its own #044D28 ground, so on the
   light header it reads as a rounded badge, and in the footer it sits
   flush because the footer now uses that same green.
   -------------------------------------------------------------------------- */
.mi-nav__mark--img { display: inline-flex; align-items: center; padding: 0; }
.mi-nav__logo {
  display: block;
  height: clamp(32px, 3.4vw, 42px);
  width: auto;
  max-width: min(46vw, 240px);
  object-fit: contain;
  border-radius: var(--mi-radius-sm);
  transition: height .3s var(--mi-ease);
}

/* --------------------------------------------------------------------------
   Direction-aware header.

   A fixed bar permanently covers the top ~88px of the page. Rather than pad
   every section around it, the bar retracts while the reader scrolls down and
   returns instantly on any upward scroll, so it is never covering the thing
   being read and is never more than a flick away.
   -------------------------------------------------------------------------- */
.mi-nav {
  transition: transform .35s var(--mi-ease),
              background-color .3s ease,
              border-color .3s ease,
              box-shadow .3s ease;
  will-change: transform;
}
.mi-nav.is-away { transform: translateY(-100%); }

/* Once past the hero it condenses, reclaiming vertical space. */
.mi-nav.is-stuck .mi-nav__logo { height: clamp(28px, 2.8vw, 34px); }
.mi-nav.is-stuck .mi-nav__inner { padding-block: 10px; }
.mi-nav.is-stuck { box-shadow: 0 1px 0 var(--mi-rule); }

/* Keyboard users must never lose the bar: focusing anything inside brings it back. */
.mi-nav:focus-within { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mi-nav { transition: none; }
  .mi-nav.is-away { transform: none; }   /* no retracting under reduced motion */
}

.mi-foot__logo {
  display: block;
  height: clamp(40px, 5vw, 58px);
  width: auto;
  margin-bottom: var(--mi-sm);
}