/* ==========================================================================
   Erode Light Green.

   Loaded last. Replicates the Google Ads product-marketing language in green:
   light grounds, Figtree at weight 500, pill buttons, 20px panels, 32px media,
   flat surfaces and short opacity-led motion.

   Original variable names are re-pointed rather than replaced, so every
   existing rule keeps working and the change is reversible.
   ========================================================================== */

:root {
  /* Palette */
  --mi-charcoal: #044D28;  /* deep green, footer only */
  --mi-ivory:    #FFFFFF;
  --mi-graphite: #F4FAF6;  /* pale green surface */
  --mi-stone:    #5B6660;
  --mi-bronze:   #1B8039;  /* accent, text-safe */
  --mi-olive:    #E8F5EC;  /* wash */
  --mi-brand:    #34A853;  /* lighter green, fills only */
  --mi-border:   #DCE7E0;

  /* Roles */
  --mi-bg:         #FFFFFF;
  --mi-ink:        #1F2421;
  --mi-rule:       #DCE7E0;
  --mi-mute:       #5B6660;
  --mi-accent-ink: #1B8039;
  --mi-btn-fg:     #FFFFFF;

  /* Radius scale */
  --mi-radius:       1000px;  /* buttons are pills */
  --mi-radius-panel: 20px;
  --mi-radius-media: 32px;
  --mi-radius-sm:    8px;

  /* Type */
  --mi-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mi-display: clamp(2.4rem, 5.6vw, 4.4rem);

  /* Motion: short and opacity-led */
  --mi-slow: 0.7s;
  --mi-med:  0.2s;
  --mi-fast: 0.15s;
  --mi-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* box-sizing was scoped to `.mi-section *`, but the nav, drawer and preloader
   sit outside every section, so .mi-shell computed as content-box there:
   100% width PLUS 2x64px gutter, pushing the header CTA past the viewport.
   A fixed element clips rather than growing scrollWidth, which is why an
   overflow check never caught it. */
.mi-shell,
.mi-nav, .mi-nav *,
.mi-drawer, .mi-drawer *,
.mi-preloader, .mi-preloader * { box-sizing: border-box; }

.mi-alt  { --mi-bg: var(--mi-graphite); }
.mi-wash { --mi-bg: var(--mi-olive); }

/* Deep green survives for the footer only. */
.mi-dark {
  --mi-bg:         #044D28;
  --mi-ink:        #FFFFFF;
  --mi-rule:       rgba(255, 255, 255, 0.18);
  --mi-mute:       #C3DACB;
  --mi-bronze:     #8FE0AC;
  --mi-accent-ink: #8FE0AC;
  --mi-btn-fg:     #044D28;
}
.mi-dark::before { opacity: 0; }  /* no grain in a light system */

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.mi-display, .mi-h2, .mi-hero__title, .mi-hero__sub, .mi-pagehead__title,
.mi-pillar__title, .mi-plat__name, .mi-svc__name, .mi-proc__name,
.mi-path__title, .mi-ins__title, .mi-ind__name, .mi-cta__title,
.mi-manifesto__lead p, .mi-impact__fig, .mi-preloader__mark,
.mi-nav__mark, .mi-foot__mark, .mi-drawer a {
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.02em;
}

.mi-display, .mi-hero__title, .mi-pagehead__title { line-height: 1.08; }
.mi-h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.15; }
.mi-body { font-size: var(--mi-body); line-height: 1.65; }

.mi-hero     { --mi-display: clamp(2.4rem, 5.4vw, 4.4rem); }
.mi-pagehead { --mi-display: clamp(2rem, 4.2vw, 3.4rem); }

.mi-label, .mi-pagehead__label, .mi-pillar__label {
  letter-spacing: 0.09em;
  font-weight: 500;
}

.mi-foot__mark { opacity: 0.09; font-size: clamp(3rem, 14vw, 11rem); }
.mi-pillar__title { font-size: clamp(1.5rem, 2.8vw, 2.3rem); }
.mi-plat__name    { font-size: clamp(1.4rem, 3vw, 2.6rem); }
.mi-cta__title    { font-size: clamp(1.8rem, 4vw, 3.6rem); }
.mi-impact__fig   { font-size: clamp(2.4rem, 5vw, 4rem); }
.mi-impact__cell--lead .mi-impact__fig { font-size: clamp(3rem, 7vw, 5.6rem); }

/* --------------------------------------------------------------------------
   Buttons: pills, 0.2s ease, no shadow
   -------------------------------------------------------------------------- */

.mi-btn {
  /* The old system set this to charcoal for bronze fills. Under the green
     palette that resolves to deep green on green (1.8:1), so it is reset:
     white on accent is 5.0:1, deep green on the light accent is 8.6:1. */
  --mi-btn-fg: #FFFFFF;
  border-radius: var(--mi-radius);
  padding: 0.95em 1.9em;
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color var(--mi-med) ease, color var(--mi-med) ease;
}
.mi-btn::after { display: none; }          /* the wipe belongs to the old system */
.mi-btn:hover  { background: #14602B; color: #FFFFFF; }
.mi-btn--ghost {
  background: transparent;
  border-color: var(--mi-rule);
  color: var(--mi-ink);
}
.mi-btn--ghost:hover { background: var(--mi-olive); color: var(--mi-ink); }
.mi-dark .mi-btn { --mi-btn-fg: #044D28; }
.mi-dark .mi-btn:hover { background: #FFFFFF; color: #044D28; }
.mi-btn__arrow { display: none; }

/* --------------------------------------------------------------------------
   Navigation: light, not dark
   -------------------------------------------------------------------------- */

.mi-nav {
  --mi-ink: #1F2421;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
}
.mi-nav.is-stuck { background: #FFFFFF; border-bottom-color: var(--mi-border); }
.mi-nav__mark { color: #1F2421; }
.mi-nav__mark b { color: var(--mi-bronze); }
.mi-nav__links { gap: clamp(14px, 1.7vw, 28px); }
.mi-nav__links a { color: #1F2421; text-transform: none; letter-spacing: 0; font-size: var(--mi-body); opacity: 0.82; white-space: nowrap; }
.mi-nav .mi-btn { padding: 0.7em 1.4em; font-size: 1rem; white-space: nowrap; }
.mi-nav__inner { gap: clamp(16px, 2vw, 32px); }
.mi-nav__links a::after { background: var(--mi-bronze); }
.mi-burger span { background: #1F2421; }

.mi-drawer { background: #FFFFFF; }
.mi-drawer a { color: #1F2421; border-bottom-color: var(--mi-border); }
.mi-drawer a[aria-current="page"] { color: var(--mi-bronze); }
.mi-drawer .mi-btn { color: #FFFFFF; }
.mi-drawer__meta { color: var(--mi-mute); }

.mi-preloader { background: #FFFFFF; color: #1F2421; }
.mi-preloader__mark { color: #1F2421; }
.mi-preloader__bar { background: var(--mi-border); }
.mi-preloader__meta { color: var(--mi-mute); }

/* --------------------------------------------------------------------------
   Panels: rounded, flat
   -------------------------------------------------------------------------- */

.mi-pillar,
.mi-plat__row,
.mi-impact__cell,
.mi-ind__cell,
.mi-proc__step {
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-panel);
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--mi-bg);
}

/* Grids gain real gaps now that rows are panels. */
.mi-pillars   { display: grid; gap: var(--mi-sm); border-top: 0; }
.mi-plat__list{ display: grid; gap: var(--mi-sm); border-top: 0; }
.mi-impact__grid { gap: var(--mi-sm); border-top: 0; }
.mi-ind__grid    { gap: var(--mi-sm); border-top: 0; }
.mi-proc__scroller { gap: var(--mi-sm); border-top: 0; }

.mi-impact__cell,
.mi-ind__cell { border-left: 1px solid var(--mi-border) !important; border-bottom: 1px solid var(--mi-border); }
.mi-ind__cell:nth-child(even) { padding-left: clamp(22px, 2.6vw, 36px); }
.mi-ind__cell:nth-child(odd)  { padding-right: clamp(22px, 2.6vw, 36px); }
.mi-proc__step { border-right: 1px solid var(--mi-border); }

/* Lead figure panel is filled, so the grid is not four identical cards. */
.mi-impact__cell--lead { background: var(--mi-olive); border-color: transparent; }

/* Alternate pillar fill for rhythm. */
.mi-pillar:nth-child(even) { background: var(--mi-graphite); border-color: transparent; }

/* Rows: rounded hover instead of hard rules. */
.mi-svc__row, .mi-ins__row { border-bottom: 1px solid var(--mi-border); border-radius: var(--mi-radius-panel); }
.mi-svc__list, .mi-ins__list { border-top: 0; }
@media (hover: hover) {
  .mi-svc__row:hover, .mi-ins__row:hover { background: var(--mi-olive); }
}

.mi-path { border-radius: var(--mi-radius-panel); border-top: 0; }
@media (hover: hover) { .mi-path:hover { background: var(--mi-olive); } }
@media (min-width: 900px) { .mi-path + .mi-path { border-left: 0; } }
.mi-paths__inner { gap: var(--mi-sm); }

/* Inputs */
.mi-field input, .mi-field textarea {
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-sm);
  padding: 0.85em 1em;
  background: var(--mi-bg);
}
.mi-field input:focus, .mi-field textarea:focus {
  border-color: var(--mi-bronze);
  box-shadow: 0 0 0 3px var(--mi-olive);
  outline: none;
}

/* Media */
.mi-map__disc { background: var(--mi-olive); border-color: transparent; }
.mi-map__disc span { color: var(--mi-bronze); font-weight: 500; }

/* Hero: light ground, illustration instead of the technical figure. */
.mi-hero { background: var(--mi-graphite); }
.mi-hero__figure { display: none; }
.mi-hero__scroll { display: none; }

/* Marquee sits quietly. */
.mi-marquee { border-block-color: var(--mi-border); }

/* --------------------------------------------------------------------------
   Illustrations
   -------------------------------------------------------------------------- */

.mi-ill { display: block; width: 100%; height: auto; }
.mi-ill .il-s  { stroke: var(--mi-bronze); fill: none; }
.mi-ill .il-sm { stroke: var(--mi-border); fill: none; }
.mi-ill .il-sw { stroke: #FFFFFF; fill: none; }
.mi-ill .il-fb { fill: var(--mi-brand); }
.mi-ill .il-fw { fill: var(--mi-olive); }
.mi-ill .il-fd { fill: var(--mi-charcoal); }

.mi-feature__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .mi-feature__inner { grid-template-columns: 1fr 1fr; }
  .mi-feature__inner.is-flipped .mi-feature__copy { order: 2; }
}
.mi-feature__copy { display: flex; flex-direction: column; gap: var(--mi-sm); align-items: flex-start; }
.mi-feature__copy .mi-btn { margin-top: var(--mi-sm); }
.mi-feature__points { list-style: none; margin: var(--mi-xs) 0 0; padding: 0; display: grid; gap: 0.7em; }
.mi-feature__points li {
  position: relative;
  padding-left: 1.7em;
  font-size: var(--mi-body);
  color: var(--mi-mute);
  line-height: 1.65;
}
.mi-feature__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mi-brand);
}

/* --------------------------------------------------------------------------
   Motion: opacity-led, short
   -------------------------------------------------------------------------- */

.mi-js .mi-reveal { transform: translateY(12px); }
.mi-js .mi-line > span { transform: translateY(102%); }

@media (prefers-reduced-motion: reduce) {
  .mi-nav { backdrop-filter: none; }
}

/* --------------------------------------------------------------------------
   Responsive repair: mid-width hero
   Between the tablet and wide breakpoints the headline column was only
   half the grid while the type still scaled on vw, so it fractured into
   many short lines. Give it more columns and a gentler scale.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1199px) {
  .mi-hero { --mi-display: clamp(1.9rem, 3.6vw, 3rem); }
  .mi-hero__title { grid-column: 1 / 8; }
  .mi-hero__aside { grid-column: 1 / 8; }
  .mi-hero__media { grid-column: 8 / 13; }
  .mi-hero__sub   { font-size: clamp(1rem, 1.9vw, 1.5rem); }
  .mi-pagehead    { --mi-display: clamp(1.7rem, 3.2vw, 2.6rem); }
}

/* Below the tablet breakpoint the display type must not outgrow the column. */
@media (max-width: 899px) {
  .mi-hero     { --mi-display: clamp(1.9rem, 7.4vw, 2.9rem); }
  .mi-pagehead { --mi-display: clamp(1.7rem, 6.4vw, 2.4rem); }
  .mi-hero__media { aspect-ratio: 16 / 10; }
  .mi-h2 { font-size: clamp(1.45rem, 5.2vw, 2rem); }
}

/* --------------------------------------------------------------------------
   Hero rotator collision
   The rotating verbs sat at columns 1-6 row 3, which is the same cell the
   copy block moved into once the hero gained an image, so the words
   rendered underneath the buttons. The body copy already says
   "implementation, support and automation", so the strip is redundant.
   -------------------------------------------------------------------------- */
/* Now a line inside the copy column, not a grid cell of its own, so it
   cannot land on top of the actions however the columns are arranged. */
.mi-hero__rotator {
  display: flex;
  align-items: center;
  gap: .4em;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--mi-ink);
  grid-column: auto;
  grid-row: auto;
  padding-bottom: 0;
}
/* Same line box as the rotator, so centring lands the two on one line. */
.mi-rotator__lead {
  color: var(--mi-mute);
  line-height: 1.4em;
}
.mi-hero__rotator .mi-rotator {
  position: relative;
  display: inline-block;
  height: 1.4em;
  line-height: 1.4em;
  min-width: 7.5em;
  overflow: hidden;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mi-bronze);
}
.mi-hero__rotator .mi-rotator span {
  left: 0;
  right: auto;
  line-height: 1.4em;
}

@media (prefers-reduced-motion: reduce) {
  .mi-hero__rotator .mi-rotator { height: auto; overflow: visible; display: inline-flex; gap: .5em; }
}