/* ==========================================================================
   mitech Consultants Inc.  .  master build
   tokens.css  .  the only file that holds raw values

   Built from the content document's visual system: mitech blue #2C8CCB,
   deep navy #0B1F3A, white and near-white surfaces, Inter.

   Surfaces are semantic. A component asks for --mi-text and never for navy,
   so the same card renders correctly on a white section and inside a navy
   band. Put .mi-on-navy on a section and every child follows.
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     1. BRAND, raw. Measured WCAG ratios noted so the floor is checkable.
     ---------------------------------------------------------------------- */

  --mi-blue:      #2C8CCB;   /* the logo blue. Lines, nodes, active states,
                                diagrams. 3.67 on white, so never body text
                                on a light surface. 4.50 on navy. */
  --mi-blue-fill: #1F6FA6;   /* buttons and filled chips. White on it 5.41 */
  --mi-blue-ink:  #17558E;   /* links and small text on light. 7.70 on white */
  --mi-blue-lift: #8FCAEE;   /* links and focus on navy. 9.32 on navy */
  --mi-blue-wash: #E7F2FA;   /* tints, hover beds, selected rows */

  --mi-navy:      #0B1F3A;   /* body text on light. 16.52 on white */

  /* The dark bands run far closer to black than the brand navy. Everything
     reads better on them: near-white 18.50, the brand blue 5.40 where it
     was 4.50, muted text 9.66, the lift blue 11.19. */
  --mi-ink:       #050A12;   /* the dark band surface */
  --mi-ink-deep:  #02050A;   /* footer floor */
  --mi-ink-soft:  #0D1627;
  --mi-mark-fill: var(--mi-ink);   /* hero panels: opaque, the page colour #050A12 */   /* raised surface inside a dark band */

  --mi-white:     #FFFFFF;
  --mi-near:      #F5F7FB;   /* the near-white section surface */
  --mi-near-2:    #EAEFF7;   /* the quieter near-white, for alternating bands */
  --mi-line:      #DCE3EE;   /* hairlines on light */
  --mi-grey:      #55647E;   /* muted text on light. 5.58 on near-white */
  --mi-grey-on-navy: #A8B6CC; /* muted text on navy. 8.05 */

  /* Light and grid, used by the system graphics rather than as decoration */
  --mi-grid-line-light: rgba(11, 31, 58, 0.06);
  --mi-grid-line-navy:  rgba(143, 202, 238, 0.08);
  --mi-glow-blue:       rgba(44, 140, 203, 0.20);


  /* ----------------------------------------------------------------------
     2. SURFACE, semantic. Light is the page.
     ---------------------------------------------------------------------- */

  --mi-bg:            var(--mi-white);
  --mi-bg-quiet:      var(--mi-near);
  --mi-bg-raised:     var(--mi-white);
  --mi-text:          var(--mi-navy);
  --mi-text-muted:    var(--mi-grey);
  --mi-hairline:      var(--mi-line);
  --mi-hairline-firm: rgba(11, 31, 58, 0.20);
  --mi-link:          var(--mi-blue-ink);
  --mi-link-hover:    var(--mi-navy);
  --mi-focus:         var(--mi-blue-ink);
  --mi-accent:        var(--mi-blue);       /* lines, nodes, rules, figures */
  --mi-fill:          var(--mi-navy);       /* primary button */
  --mi-on-fill:       var(--mi-white);
  --mi-fill-alt:      var(--mi-blue-fill);  /* secondary filled button */
  --mi-on-fill-alt:   var(--mi-white);
  --mi-shadow-rgb:    11, 31, 58;
  --mi-grid-line:     var(--mi-grid-line-light);


  /* ----------------------------------------------------------------------
     3. TYPE
     Inter, self-hosted as one variable file. Display sizes carry negative
     tracking; body sits at zero. Line height tightens as size grows.
     ---------------------------------------------------------------------- */

  --mi-font: "Inter", "Inter Variable", ui-sans-serif, system-ui,
             -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --mi-w-body:    400;
  --mi-w-medium:  500;
  --mi-w-semi:    600;
  --mi-w-display: 700;

  /* Fixed 1.25 ratio, fluid between 375px and 1440px. */
  --mi-t-100: 0.8rem;      --mi-lh-100: 1.40; --mi-ls-100: 0.02em;
  --mi-t-200: 1rem;        --mi-lh-200: 1.65; --mi-ls-200: 0em;
  --mi-t-300: clamp(1.125rem, 1.0813rem + 0.1878vw, 1.25rem);   --mi-lh-300: 1.55; --mi-ls-300: -0.004em;
  --mi-t-400: clamp(1.3125rem, 1.2244rem + 0.3756vw, 1.5625rem); --mi-lh-400: 1.32; --mi-ls-400: -0.012em;
  --mi-t-500: clamp(1.5625rem, 1.4250rem + 0.5869vw, 1.9531rem); --mi-lh-500: 1.22; --mi-ls-500: -0.018em;
  --mi-t-600: clamp(1.8125rem, 1.5925rem + 0.9390vw, 2.4414rem); --mi-lh-600: 1.14; --mi-ls-600: -0.022em;
  --mi-t-700: clamp(2.0625rem, 1.7150rem + 1.4836vw, 3.0518rem); --mi-lh-700: 1.08; --mi-ls-700: -0.026em;
  --mi-t-800: clamp(2.3750rem, 1.8688rem + 2.1596vw, 3.8147rem); --mi-lh-800: 1.04; --mi-ls-800: -0.030em;
  --mi-t-900: clamp(2.7500rem, 2.0394rem + 3.0328vw, 4.7684rem); --mi-lh-900: 0.98; --mi-ls-900: -0.034em;

  /* The document's eyebrow label: small, tracked open, uppercase. */
  --mi-ls-label: 0.12em;

  --mi-measure:      68ch;
  --mi-measure-lead: 48ch;


  /* ----------------------------------------------------------------------
     4. SPACE, strict 4px base. Token name is the pixel value.
     ---------------------------------------------------------------------- */

  --mi-s-4: 0.25rem;   --mi-s-8: 0.5rem;    --mi-s-12: 0.75rem;
  --mi-s-16: 1rem;     --mi-s-20: 1.25rem;  --mi-s-24: 1.5rem;
  --mi-s-32: 2rem;     --mi-s-40: 2.5rem;   --mi-s-48: 3rem;
  --mi-s-64: 4rem;     --mi-s-80: 5rem;     --mi-s-96: 6rem;
  --mi-s-128: 8rem;    --mi-s-160: 10rem;

  --mi-section-y: clamp(4.5rem, 7vw, 8.5rem);   /* one band rhythm, shared */
  --mi-stack:     var(--mi-s-24);


  /* ----------------------------------------------------------------------
     5. LAYOUT
     ---------------------------------------------------------------------- */

  --mi-page:    78rem;    /* 1248 */
  --mi-prose:   46rem;
  --mi-gutter:  clamp(var(--mi-s-20), 4vw, var(--mi-s-48));
  --mi-gap:     clamp(var(--mi-s-16), 2vw, var(--mi-s-24));
  --mi-header:  5.25rem;
  --mi-grid-cell: var(--mi-s-96);


  /* ----------------------------------------------------------------------
     6. RADIUS, BORDER, ELEVATION
     ---------------------------------------------------------------------- */

  --mi-r-sm:   0.5rem;
  --mi-r-md:   0.875rem;
  --mi-r-lg:   1.25rem;
  --mi-r-xl:   1.75rem;
  --mi-r-pill: 62.4375rem;
  --mi-border: 1px;

  --mi-e-1: 0 1px 2px rgba(var(--mi-shadow-rgb), 0.05),
            0 4px 12px rgba(var(--mi-shadow-rgb), 0.06);
  --mi-e-2: 0 2px 4px rgba(var(--mi-shadow-rgb), 0.06),
            0 14px 34px rgba(var(--mi-shadow-rgb), 0.10);
  --mi-e-3: 0 6px 12px rgba(var(--mi-shadow-rgb), 0.08),
            0 34px 80px rgba(var(--mi-shadow-rgb), 0.16);


  /* ----------------------------------------------------------------------
     7. MOTION. Two curves, three durations. Nothing bounces.
     Flagship scroll moments are limited to four on the homepage, per the
     content document: hero network, from-to sequence, convergence, stepper.
     ---------------------------------------------------------------------- */

  --mi-ease:    cubic-bezier(0.17, 0.84, 0.44, 1);
  --mi-ease-io: cubic-bezier(0.45, 0.05, 0.25, 1);

  --mi-d-1: 140ms;   /* control feedback */
  --mi-d-2: 280ms;   /* card expansion, panel state */
  --mi-d-3: 620ms;   /* section reveal, line drawing */


  /* ----------------------------------------------------------------------
     8. FOCUS AND LAYERING
     ---------------------------------------------------------------------- */

  --mi-focus-w: 2px;
  --mi-focus-o: 2px;

  --mi-z-base: 0;  --mi-z-raise: 10;  --mi-z-sticky: 100;
  --mi-z-panel: 200;  --mi-z-skip: 300;
}


/* ==========================================================================
   NAVY BAND
   Put .mi-on-navy on a section and every child recolours. Used by the hero,
   the convergence band, the final CTA and the footer.
   ========================================================================== */

.mi-on-navy {
  color: var(--mi-text);

  --mi-bg:            var(--mi-ink);
  --mi-bg-quiet:      var(--mi-ink-deep);
  --mi-bg-raised:     var(--mi-ink-soft);
  --mi-text:          var(--mi-near);
  --mi-text-muted:    var(--mi-grey-on-navy);
  --mi-hairline:      rgba(143, 202, 238, 0.16);
  --mi-hairline-firm: rgba(143, 202, 238, 0.30);
  --mi-link:          var(--mi-blue-lift);
  --mi-link-hover:    var(--mi-white);
  --mi-focus:         var(--mi-blue-lift);
  --mi-accent:        var(--mi-blue);
  --mi-fill:          var(--mi-white);
  --mi-on-fill:       var(--mi-ink);
  --mi-fill-alt:      var(--mi-blue-fill);
  --mi-on-fill-alt:   var(--mi-white);
  --mi-shadow-rgb:    1, 3, 7;
  --mi-grid-line:     var(--mi-grid-line-navy);
}


/* ==========================================================================
   MOTION OPT-OUT
   Durations collapse at the token, so a component that forgets to handle
   reduced motion still cannot animate.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root { --mi-d-1: 1ms; --mi-d-2: 1ms; --mi-d-3: 1ms; }
}


/* ==========================================================================
   mitech Consultants Inc.  .  master build
   base.css  .  reset, type, layout primitives, focus, accessibility
   Every value comes from tokens.css.
   ========================================================================== */



*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mi-header) + var(--mi-s-16));
}

/* clip on both, hidden first as the fallback. hidden alone still lets a
   decoration drag the page sideways. */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background-color: var(--mi-bg);
  color: var(--mi-text);
  font-family: var(--mi-font);
  font-size: var(--mi-t-200);
  font-weight: var(--mi-w-body);
  line-height: var(--mi-lh-200);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:where(a) { color: var(--mi-link); text-underline-offset: 0.18em; }
:where(a):hover { color: var(--mi-link-hover); }

::selection { background: var(--mi-blue); color: var(--mi-white); }


/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */

h1, .mi-t800 { font-size: var(--mi-t-800); line-height: var(--mi-lh-800); letter-spacing: var(--mi-ls-800); font-weight: var(--mi-w-display); }
h2, .mi-t700 { font-size: var(--mi-t-700); line-height: var(--mi-lh-700); letter-spacing: var(--mi-ls-700); font-weight: var(--mi-w-display); }
h3, .mi-t500 { font-size: var(--mi-t-500); line-height: var(--mi-lh-500); letter-spacing: var(--mi-ls-500); font-weight: var(--mi-w-semi); }
h4, .mi-t400 { font-size: var(--mi-t-400); line-height: var(--mi-lh-400); letter-spacing: var(--mi-ls-400); font-weight: var(--mi-w-semi); }
h5, h6, .mi-t300 { font-size: var(--mi-t-300); line-height: var(--mi-lh-300); letter-spacing: var(--mi-ls-300); font-weight: var(--mi-w-medium); }

.mi-t900 { font-size: var(--mi-t-900); line-height: var(--mi-lh-900); letter-spacing: var(--mi-ls-900); font-weight: var(--mi-w-display); }
.mi-t600 { font-size: var(--mi-t-600); line-height: var(--mi-lh-600); letter-spacing: var(--mi-ls-600); font-weight: var(--mi-w-semi); }
.mi-t100 { font-size: var(--mi-t-100); line-height: var(--mi-lh-100); letter-spacing: var(--mi-ls-100); font-weight: var(--mi-w-medium); }

/* The eyebrow the content document puts above most section headings. */
.mi-label {
  display: block;
  color: var(--mi-text-muted);
  font-size: var(--mi-t-100);
  font-weight: var(--mi-w-semi);
  letter-spacing: var(--mi-ls-label);
  text-transform: uppercase;
}

.mi-lead {
  color: var(--mi-text-muted);
  font-size: var(--mi-t-300);
  line-height: var(--mi-lh-300);
  /* Wide enough to run across the band, capped so a line never gets so long
     the eye loses its place coming back. */
  max-width: 86ch;
}

.mi-muted { color: var(--mi-text-muted); }
.mi-prose { max-width: 86ch; }
.mi-prose > * + * { margin-block-start: var(--mi-s-20); }


/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.mi-wrap {
  width: 100%;
  max-width: var(--mi-page);
  margin-inline: auto;
  padding-inline: var(--mi-gutter);
}

/* Every band uses the one rhythm token. Nothing sets its own vertical
   padding, which is what keeps the page from drifting section to section. */
.mi-band {
  padding-block: var(--mi-section-y);
  background-color: var(--mi-bg);
  color: var(--mi-text);
}

.mi-band--quiet { background-color: var(--mi-bg-quiet); }

.mi-stack > * + * { margin-block-start: var(--mi-stack); }
.mi-grid { display: grid; gap: var(--mi-gap); }

/* Section heading block, used by every band. */
.mi-head { max-width: none; }
.mi-head > * + * { margin-block-start: var(--mi-s-16); }
.mi-head--center { max-width: 46rem; margin-inline: auto; text-align: center; }


/* --------------------------------------------------------------------------
   FOCUS AND ACCESSIBILITY
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--mi-focus-w) solid var(--mi-focus);
  outline-offset: var(--mi-focus-o);
  border-radius: var(--mi-r-sm);
}

.mi-skip {
  position: absolute;
  inset-block-start: var(--mi-s-8);
  inset-inline-start: var(--mi-s-8);
  z-index: var(--mi-z-skip);
  transform: translateY(-200%);
  padding: var(--mi-s-12) var(--mi-s-20);
  background-color: var(--mi-fill);
  color: var(--mi-on-fill);
  border-radius: var(--mi-r-sm);
  font-weight: var(--mi-w-medium);
  text-decoration: none;
  transition: transform var(--mi-d-2) var(--mi-ease);
}

.mi-skip:focus-visible { transform: translateY(0); }

.mi-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The one reveal, shared by every section. Opacity and transform only. */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--mi-s-16));
  transition: opacity var(--mi-d-3) var(--mi-ease),
              transform var(--mi-d-3) var(--mi-ease);
}

[data-reveal="in"] { opacity: 1; transform: none; }

/* Without the script nothing can reveal itself, so it renders in place. */
.mi-nojs [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   mitech Consultants Inc.  .  master build
   components.css  .  the pieces built once and reused on every page

   Built from the content document's component list: button system, capability
   reveal card, proof strip, tags, editorial card, section furniture.
   Every value comes from tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTON SYSTEM
   Three intents, one shape. The document asks for a purposeful hover: the
   arrow shifts rather than the whole control changing colour.
   -------------------------------------------------------------------------- */

.mi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mi-s-8);
  padding: var(--mi-s-12) var(--mi-s-24);
  min-height: 2.75rem;                 /* comfortable touch target */
  border: var(--mi-border) solid transparent;
  border-radius: var(--mi-r-pill);
  background-color: var(--mi-fill);
  color: var(--mi-on-fill);
  font-size: var(--mi-t-200);
  font-weight: var(--mi-w-medium);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--mi-d-1) var(--mi-ease),
              border-color var(--mi-d-1) var(--mi-ease),
              color var(--mi-d-1) var(--mi-ease);
}

/* The arrow is drawn in the markup as a span, so it can move on its own. */
.mi-btn__arrow {
  display: inline-block;
  transition: transform var(--mi-d-1) var(--mi-ease);
}

.mi-btn:hover .mi-btn__arrow,
.mi-btn:focus-visible .mi-btn__arrow { transform: translateX(var(--mi-s-4)); }

.mi-btn:hover { background-color: var(--mi-blue-fill); color: var(--mi-white); }

.mi-btn[disabled],
.mi-btn[aria-disabled="true"] {
  background-color: var(--mi-bg-quiet);
  color: var(--mi-text-muted);
  cursor: not-allowed;
}

.mi-btn--alt { background-color: var(--mi-fill-alt); color: var(--mi-on-fill-alt); }
.mi-btn--alt:hover { background-color: var(--mi-navy); color: var(--mi-white); }

.mi-btn--ghost {
  background-color: transparent;
  border-color: var(--mi-hairline-firm);
  color: var(--mi-text);
}

.mi-btn--ghost:hover {
  background-color: transparent;
  border-color: var(--mi-text);
  color: var(--mi-text);
}

/* A text link that behaves like an action, used inside cards. */
.mi-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-s-8);
  color: var(--mi-link);
  font-weight: var(--mi-w-medium);
  text-decoration: none;
}

.mi-link:hover { text-decoration: underline; }
.mi-link:hover .mi-btn__arrow { transform: translateX(var(--mi-s-4)); }


/* --------------------------------------------------------------------------
   TAGS
   The capability tags the document specifies under each service.
   -------------------------------------------------------------------------- */

.mi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-s-8);
  list-style: none;
}

.mi-tags li {
  padding: var(--mi-s-4) var(--mi-s-12);
  border: var(--mi-border) solid var(--mi-hairline);
  border-radius: var(--mi-r-pill);
  color: var(--mi-text-muted);
  font-size: var(--mi-t-100);
  letter-spacing: 0;
}


/* --------------------------------------------------------------------------
   CAPABILITY REVEAL CARD
   Starts as a number and a title. The description and tags are present in the
   markup at all times for screen readers and for a visitor with no script;
   they are revealed on hover, focus-within and tap rather than being loaded
   in. Never hover-only: the same state opens on keyboard focus.
   -------------------------------------------------------------------------- */

.mi-cap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mi-s-12);
  padding: var(--mi-s-32) var(--mi-s-24);
  border: var(--mi-border) solid var(--mi-hairline);
  border-radius: var(--mi-r-lg);
  background-color: var(--mi-bg-raised);
  transition: border-color var(--mi-d-2) var(--mi-ease),
              box-shadow var(--mi-d-2) var(--mi-ease);
}

.mi-cap:hover,
.mi-cap:focus-within {
  border-color: var(--mi-blue);
  box-shadow: var(--mi-e-2);
}

.mi-cap__num {
  color: var(--mi-accent);
  font-size: var(--mi-t-100);
  font-weight: var(--mi-w-semi);
  letter-spacing: var(--mi-ls-label);
  font-variant-numeric: tabular-nums;
}

.mi-cap__title {
  font-size: var(--mi-t-400);
  line-height: var(--mi-lh-400);
  letter-spacing: var(--mi-ls-400);
  font-weight: var(--mi-w-semi);
}

/* The detail is always visible. Hiding it behind hover meant three cards
   read as empty boxes while one had content, and it left touch and keyboard
   users guessing. Hover now changes the card, not what it says. */
.mi-cap__detail > div > * + * { margin-block-start: var(--mi-s-12); }

.mi-cap__note { color: var(--mi-text-muted); }

/* The whole card is clickable, with the link still the real control. */
.mi-cap__link { margin-block-start: auto; }

.mi-cap__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}



/* --------------------------------------------------------------------------
   PROOF STRIP
   The document's compact row for years, approach and industries. Facts only,
   no invented metrics.
   -------------------------------------------------------------------------- */

.mi-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-s-12) var(--mi-s-24);
  align-items: center;
  list-style: none;
  color: var(--mi-text-muted);
  font-size: var(--mi-t-100);
  font-weight: var(--mi-w-medium);
}

.mi-proof li { display: flex; align-items: center; gap: var(--mi-s-12); }

.mi-proof li + li::before {
  content: "";
  width: var(--mi-s-4);
  height: var(--mi-s-4);
  border-radius: var(--mi-r-pill);
  background-color: var(--mi-accent);
}


/* --------------------------------------------------------------------------
   METRIC
   A single figure with a terse label. Counts once on first view.
   -------------------------------------------------------------------------- */

.mi-metric__figure {
  display: block;
  color: var(--mi-text);
  font-size: var(--mi-t-700);
  line-height: var(--mi-lh-700);
  letter-spacing: var(--mi-ls-700);
  font-weight: var(--mi-w-display);
  font-variant-numeric: tabular-nums;
}

.mi-metric__label {
  display: block;
  margin-block-start: var(--mi-s-8);
  font-size: var(--mi-t-300);
  font-weight: var(--mi-w-semi);
}

.mi-metric__note { margin-block-start: var(--mi-s-8); color: var(--mi-text-muted); }


/* --------------------------------------------------------------------------
   PANEL
   The restrained glass-like surface the document asks for, used inside navy
   bands. No backdrop-filter on anything sticky: blurring a fixed strip
   re-blurs it on every scroll frame and is the most expensive thing a page
   can do.
   -------------------------------------------------------------------------- */

.mi-panel {
  padding: var(--mi-s-24);
  border: var(--mi-border) solid var(--mi-hairline);
  border-radius: var(--mi-r-lg);
  background-color: var(--mi-bg-raised);
}

.mi-panel--glass {
  background-color: rgba(44, 140, 203, 0.08);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--mi-e-2);
}


/* --------------------------------------------------------------------------
   PAGE HERO
   The opening band on every page except the homepage. Shared here rather than
   repeated per page stylesheet, where two copies would eventually drift.
   -------------------------------------------------------------------------- */

.mi-phero { padding-block: calc(var(--mi-header) + var(--mi-s-48)) var(--mi-s-64); }
.mi-phero__title { max-width: 26ch; text-wrap: balance; }

.mi-phero__sub {
  margin-block-start: var(--mi-s-24);
  max-width: 86ch;
  color: var(--mi-text-muted);
  font-size: var(--mi-t-300);
  line-height: var(--mi-lh-300);
}

.mi-phero__actions { display: flex; flex-wrap: wrap; gap: var(--mi-s-12); margin-block-start: var(--mi-s-32); }

/* The page hero carries the same spotlight as the homepage hero: a wide soft
   blue ellipse with a brighter core, static, sitting behind the headline.
   Page heroes are left-aligned, so the light is centred on the words rather
   than on the page. */
.mi-phero { position: relative; overflow: hidden; isolation: isolate; }

.mi-phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 48% 70% at 30% 58%, rgba(44, 140, 203, 0.24) 0%, rgba(44, 140, 203, 0.09) 46%, rgba(44, 140, 203, 0) 74%),
    radial-gradient(ellipse 28% 40% at 28% 56%, rgba(143, 202, 238, 0.10) 0%, rgba(143, 202, 238, 0) 70%);
}


/* ==========================================================================
   mitech Consultants Inc.  .  master build
   home.css  .  the homepage sections

   Four flagship scroll moments only, as the content document requires:
   the hero network, the from-to sequence, the convergence diagram, and the
   framework stepper. Everything else is a plain reveal or a hover state.
   Every value comes from tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER
   Transparent over the navy hero, solid after the first scroll threshold.
   No backdrop blur on a sticky element: blurring a fixed strip re-blurs it
   every scroll frame and is the most expensive thing a page can do.
   -------------------------------------------------------------------------- */

.mi-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--mi-z-sticky);
  /* A sticky element still occupies its space in the flow, so without this
     the bar sat ABOVE the first band rather than over it, leaving a strip of
     white page with nav links coloured for a dark band. Pulling the next
     section up by exactly the bar's height puts it underneath instead. Both
     page heroes already reserve that height in their top padding. */
  margin-block-end: calc(var(--mi-header) * -1);
  background-color: transparent;
  border-block-end: var(--mi-border) solid transparent;
  transition: background-color var(--mi-d-2) var(--mi-ease),
              border-color var(--mi-d-2) var(--mi-ease);
}

.mi-header--solid {
  background-color: var(--mi-ink);
  border-block-end-color: rgba(143, 202, 238, 0.16);
}

.mi-header__inner {
  display: flex;
  align-items: center;
  gap: var(--mi-s-16);
  min-height: var(--mi-header);
}

.mi-brand { display: inline-flex; flex: 0 0 auto; text-decoration: none; }
/* The lockup carries the tagline under the wordmark, so it has to be wide
   enough for that line to be readable rather than decorative. */
.mi-brand img { width: 12.5rem; height: auto; }

@media (min-width: 48em) { .mi-brand img { width: 14rem; } }
@media (min-width: 64em) { .mi-brand img { width: 15.5rem; } }

.mi-header__end { display: none; align-items: center; gap: var(--mi-s-16); margin-inline-start: auto; }
.mi-header__end .mi-btn { white-space: nowrap; }

.mi-tel { color: var(--mi-text); font-weight: var(--mi-w-medium); text-decoration: none; white-space: nowrap; }
.mi-tel:hover { color: var(--mi-link); }

/* --- navigation --- */

.mi-burger {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-s-8);
  margin-inline-start: auto;
  padding: var(--mi-s-8) var(--mi-s-16);
  min-height: 2.75rem;
  background: transparent;
  border: var(--mi-border) solid var(--mi-hairline-firm);
  border-radius: var(--mi-r-pill);
  color: var(--mi-text);
  font-size: var(--mi-t-100);
  font-weight: var(--mi-w-medium);
}

.mi-burger[hidden] { display: none; }

.mi-nav { position: static; }

/* Open and in the flow by default: that is what a visitor with no script
   gets. The script collapses it on arrival. */
.mi-nav__list { display: flex; flex-direction: column; list-style: none; }
.mi-nav[data-open="false"] .mi-nav__list { display: none; }

.mi-nav[data-open="true"] .mi-nav__list {
  position: absolute;
  inset-inline: var(--mi-gutter);
  inset-block-start: calc(var(--mi-header) + var(--mi-s-8));
  z-index: var(--mi-z-panel);
  gap: var(--mi-s-4);
  padding: var(--mi-s-16) var(--mi-s-24) var(--mi-s-24);
  border-radius: var(--mi-r-lg);
  background-color: var(--mi-ink);
  border: var(--mi-border) solid rgba(143, 202, 238, 0.16);
  box-shadow: var(--mi-e-3);
}

.mi-nav__item { display: flex; align-items: center; gap: var(--mi-s-4); }

.mi-nav__link,
.mi-nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--mi-s-8);
  padding: var(--mi-s-12) 0;
  min-height: 2.75rem;
  background: transparent;
  border: 0;
  color: var(--mi-text);
  font-size: var(--mi-t-300);
  font-weight: var(--mi-w-medium);
  text-align: start;
  text-decoration: none;
}

.mi-nav__link:hover,
.mi-nav__toggle:hover { color: var(--mi-link); }
.mi-nav__link[aria-current="page"] { color: var(--mi-link); }

.mi-nav__toggle { flex: 0 0 auto; padding-inline: var(--mi-s-8); }
.mi-nav__toggle[hidden] { display: none; }

.mi-caret {
  width: 0.5rem; height: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--mi-d-2) var(--mi-ease-io);
}

.mi-nav__toggle[aria-expanded="true"] .mi-caret { transform: rotate(225deg) translate(-2px, -2px); }

/* --- mega menu --- */

.mi-mega[hidden] { display: none; }

.mi-mega {
  padding-block: var(--mi-s-16) var(--mi-s-24);
  border-block-start: var(--mi-border) solid var(--mi-hairline);
}

.mi-mega__grid { display: grid; gap: var(--mi-gap); }

.mi-mega__item {
  display: block;
  padding: var(--mi-s-16);
  border-radius: var(--mi-r-md);
  text-decoration: none;
  color: var(--mi-text);
  transition: background-color var(--mi-d-1) var(--mi-ease);
}

.mi-mega__item:hover { background-color: rgba(143, 202, 238, 0.10); color: var(--mi-text); }
.mi-mega__kind { display: block; color: var(--mi-accent); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); letter-spacing: var(--mi-ls-label); }
.mi-mega__name { display: block; margin-block-start: var(--mi-s-8); font-weight: var(--mi-w-semi); }
.mi-mega__note { display: block; margin-block-start: var(--mi-s-4); color: var(--mi-text-muted); font-size: var(--mi-t-100); }

.mi-mega__feature {
  padding: var(--mi-s-24);
  align-self: start;
  border: var(--mi-border) solid var(--mi-hairline);
  border-radius: var(--mi-r-md);
}

.mi-mega__feature > * + * { margin-block-start: var(--mi-s-12); }


/* --------------------------------------------------------------------------
   SECTION 1  .  HERO, assembled on scroll
   The feteOps construction, rebuilt for the mitech mark. A tall section with
   a sticky stage inside it; scroll progress seeks one timeline in main.js.

   The three panels use the logo's measured geometry: each card is 260 by 188
   on a 378 by 306 mark, stepped 59 across and 59 down, with a 24 stroke and a
   34 corner. They are expressed here as shares of the mark so the proportions
   hold at any size. White borders, dark fills, so each hides the ones behind
   it exactly as the printed logo does.
   -------------------------------------------------------------------------- */

.mi-hero2 { position: relative; height: 240vh; z-index: 1; background-color: var(--mi-bg); color: var(--mi-text); }

.mi-hstage {
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vh, 2.6rem);
  padding-block-start: var(--mi-header);
  padding-inline: var(--mi-gutter);
}

/* The full lockup: the mark, then the wordmark beside it, in the logo's own
   proportions. The wordmark is 52.4% of the mark's height and sits 11.1% of
   the mark's width away from it, both measured from the artwork. One custom
   property sizes the whole thing so the ratio can never drift. */
.mi-lockup {
  --mi-gw: min(26vh, 260px);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(var(--mi-gw) * 0.111);
  will-change: transform;
}

.mi-glyph {
  position: relative;
  flex: 0 0 auto;
  width: var(--mi-gw);
  aspect-ratio: 378 / 306;
  container-type: inline-size;
}

.mi-word {
  flex: 0 0 auto;
  width: auto;
  height: calc(var(--mi-gw) * 306 / 378 * 0.524);
  max-width: none;
}

/* One spotlight behind the whole composition, lockup and words together,
   rather than a glow tied to the mark that left the wordmark in the dark.
   A wide, soft ellipse, static: a moving light costs more than it adds. */
.mi-spot {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 44% 36% at 50% 40%, rgba(44, 140, 203, 0.24) 0%, rgba(44, 140, 203, 0.09) 46%, rgba(44, 140, 203, 0) 74%),
    radial-gradient(ellipse 30% 22% at 50% 38%, rgba(143, 202, 238, 0.10) 0%, rgba(143, 202, 238, 0) 70%);
}

.mi-gp {
  position: absolute;
  display: block;
  width: 68.8%;
  height: 61.4%;
  border: 6.35cqw solid var(--mi-near);
  border-radius: 13.1% / 18.1%;
  background-color: var(--mi-mark-fill);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Back to front, top-left to bottom-right, the order the logo stacks in. */
.mi-gp--1 { left: 0;     top: 0; }
.mi-gp--2 { left: 15.6%; top: 19.3%; }
.mi-gp--3 { left: 31.2%; top: 38.6%; }

.mi-beats {
  position: relative;
  z-index: 3;
  width: min(100%, 52rem);
  min-height: clamp(300px, 40vh, 400px);
  text-align: center;
}

/* The triplet overlays the settle block; the settle block sets the height,
   so nothing is clipped however long the paragraph runs. */
.mi-beat--a,
.mi-beat--s { position: absolute; inset-inline: 0; inset-block-start: 0; }

.mi-trip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3.4vw, 2.4rem);
  color: var(--mi-text);
  font-size: clamp(1.15rem, 3vw, 2.05rem);
  font-weight: var(--mi-w-medium);
  letter-spacing: -0.01em;
}

.mi-trip span { position: relative; }

.mi-trip span + span::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * clamp(0.5rem, 1.7vw, 1.2rem));
  inset-block-start: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background-color: var(--mi-blue);
}

.mi-beat__title {
  max-width: 30ch;
  margin-inline: auto;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: var(--mi-w-semi);
  text-wrap: balance;
}

.mi-beat__sub {
  max-width: 58ch;
  margin: var(--mi-s-20) auto 0;
  color: var(--mi-text-muted);
  font-size: var(--mi-t-300);
  line-height: var(--mi-lh-300);
}

.mi-beat__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mi-s-12);
  margin-block-start: var(--mi-s-32);
}

.mi-beat__proof { justify-content: center; margin-block-start: var(--mi-s-24); }

.mi-cue {
  position: absolute;
  inset-block-end: 2.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mi-s-8);
  color: var(--mi-text-muted);
  font-size: var(--mi-t-100);
  letter-spacing: var(--mi-ls-label);
  text-transform: uppercase;
}

.mi-cue span {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--mi-blue), transparent);
}

/* Until the script arms the stage, and whenever it decides not to, the hero
   is the finished composition: mark assembled, headline and actions up. */
.mi-nojs .mi-beat--a,
.mi-hero2[data-pinned] .mi-beat--a { display: none; }

/* Phones and short screens get the finished composition rather than a
   scroll sequence, which is what the feteOps build does too. */
@media (max-width: 40em), (max-height: 520px), (prefers-reduced-motion: reduce) {
  .mi-hero2 { height: auto; }
  .mi-hstage { position: relative; height: auto; min-height: 100vh; padding-block: calc(var(--mi-header) + var(--mi-s-48)) var(--mi-s-64); }
  .mi-lockup { --mi-gw: min(22vw, 120px); }
  .mi-cue { display: none; }
  .mi-beats { min-height: 0; }
  .mi-beat--s { position: relative; }
}

/* --------------------------------------------------------------------------
   SECTION 3  .  CAPABILITIES
   -------------------------------------------------------------------------- */

.mi-caps { display: grid; gap: var(--mi-gap); margin-block-start: var(--mi-s-48); }


/* --------------------------------------------------------------------------
   SECTION 4  .  BUSINESS + TECHNOLOGY CONVERGENCE
   Two named columns and a core between them. The items sit as bordered rows
   pulled toward the centre rather than as loose words flung to the page
   edges, and the core is wide enough to read at one glance.
   -------------------------------------------------------------------------- */

.mi-conv { display: grid; gap: var(--mi-s-32); margin-block-start: var(--mi-s-48); align-items: center; }

.mi-conv__kind {
  color: var(--mi-accent);
  font-size: var(--mi-t-100);
  font-weight: var(--mi-w-semi);
  letter-spacing: var(--mi-ls-label);
  text-transform: uppercase;
}

.mi-conv__list { margin-block-start: var(--mi-s-16); list-style: none; }

.mi-conv__list li {
  padding: var(--mi-s-12) var(--mi-s-16);
  border: var(--mi-border) solid var(--mi-hairline);
  border-radius: var(--mi-r-md);
  color: var(--mi-text-muted);
  font-weight: var(--mi-w-medium);
  transition: transform var(--mi-d-3) var(--mi-ease-io),
              color var(--mi-d-3) var(--mi-ease),
              border-color var(--mi-d-3) var(--mi-ease);
}

.mi-conv__list li + li { margin-block-start: var(--mi-s-8); }

/* They arrive from their own side and settle. */
.mi-conv__col--left  .mi-conv__list li { transform: translateX(calc(var(--mi-s-24) * -1)); }
.mi-conv__col--right .mi-conv__list li { transform: translateX(var(--mi-s-24)); }

.mi-conv[data-state="in"] .mi-conv__list li {
  transform: none;
  color: var(--mi-text);
  border-color: var(--mi-hairline-firm);
}

.mi-conv__list li:nth-child(2) { transition-delay: 60ms; }
.mi-conv__list li:nth-child(3) { transition-delay: 120ms; }
.mi-conv__list li:nth-child(4) { transition-delay: 180ms; }
.mi-conv__list li:nth-child(5) { transition-delay: 240ms; }
.mi-conv__list li:nth-child(6) { transition-delay: 300ms; }

.mi-conv__core {
  padding: var(--mi-s-32);
  border-radius: var(--mi-r-lg);
  border: var(--mi-border) solid var(--mi-blue);
  background-image: linear-gradient(150deg,
    rgba(44, 140, 203, 0.16) 0%, rgba(44, 140, 203, 0.04) 100%);
}

.mi-conv__word { color: var(--mi-accent); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); letter-spacing: var(--mi-ls-label); text-transform: uppercase; }
.mi-conv__line { margin-block-start: var(--mi-s-12); font-size: var(--mi-t-500); line-height: var(--mi-lh-500); letter-spacing: var(--mi-ls-500); font-weight: var(--mi-w-semi); }
.mi-conv__note { margin-block-start: var(--mi-s-12); color: var(--mi-text-muted); }

.mi-nojs .mi-conv__list li { transform: none; color: var(--mi-text); }

/* --------------------------------------------------------------------------
   SECTION 5  .  THE FRAMEWORK STEPPER
   Horizontal progress line on desktop, vertical timeline on mobile. Each
   stage gains focus as it scrolls; the line fills behind it.
   -------------------------------------------------------------------------- */

.mi-step { margin-block-start: var(--mi-s-48); }

.mi-step__track { position: relative; display: grid; gap: var(--mi-s-32); }

.mi-step__rail {
  position: absolute;
  inset-inline-start: 0.4375rem;
  inset-block: 0;
  width: 2px;
  background-color: var(--mi-hairline);
}

.mi-step__rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 100%;
  background-color: var(--mi-blue);
  transform: scaleY(var(--mi-progress, 0));
  transform-origin: top center;
  transition: transform var(--mi-d-3) var(--mi-ease);
}

.mi-stage {
  position: relative;
  padding-inline-start: var(--mi-s-40);
}

.mi-stage__dot {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--mi-s-8);
  width: 1rem; height: 1rem;
  border-radius: var(--mi-r-pill);
  border: 2px solid var(--mi-hairline-firm);
  background-color: var(--mi-bg);
  transition: border-color var(--mi-d-2) var(--mi-ease), background-color var(--mi-d-2) var(--mi-ease);
}

.mi-stage[data-state="in"] .mi-stage__dot { border-color: var(--mi-blue); background-color: var(--mi-blue); }

.mi-stage__num { color: var(--mi-accent); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); letter-spacing: var(--mi-ls-label); }
.mi-stage__name { margin-block-start: var(--mi-s-8); font-size: var(--mi-t-400); line-height: var(--mi-lh-400); letter-spacing: var(--mi-ls-400); font-weight: var(--mi-w-semi); }
.mi-stage__note { margin-block-start: var(--mi-s-8); color: var(--mi-text-muted); }
.mi-stage__tags { margin-block-start: var(--mi-s-12); }


/* --------------------------------------------------------------------------
   SECTION 8  .  WHY MITECH
   -------------------------------------------------------------------------- */

.mi-whys { display: grid; gap: var(--mi-s-40); margin-block-start: var(--mi-s-48); }

.mi-why { padding-block-start: var(--mi-s-20); border-block-start: 2px solid var(--mi-blue); }
.mi-why__kind { color: var(--mi-text-muted); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); letter-spacing: var(--mi-ls-label); }
.mi-why__name { margin-block-start: var(--mi-s-12); font-size: var(--mi-t-400); line-height: var(--mi-lh-400); font-weight: var(--mi-w-semi); }
.mi-why__note { margin-block-start: var(--mi-s-8); color: var(--mi-text-muted); }


/* --------------------------------------------------------------------------
   SECTION 9  .  FINAL CTA
   Navy, with sparse grid lines converging behind the ask.
   -------------------------------------------------------------------------- */

.mi-final { position: relative; overflow: hidden; text-align: center; }
.mi-final__inner { position: relative; max-width: 44rem; margin-inline: auto; }

/* The closing ask sits in the same panel as the convergence core: a blue
   hairline edge over a faint blue bed, so the page ends on a defined object
   rather than floating text. */
.mi-final__panel {
  padding: clamp(var(--mi-s-48), 6vw, var(--mi-s-96)) var(--mi-s-32);
  border: var(--mi-border) solid var(--mi-blue);
  border-radius: var(--mi-r-xl);
  background-image: linear-gradient(150deg, rgba(44, 140, 203, 0.16) 0%, rgba(44, 140, 203, 0.04) 100%);
}
.mi-final__title { text-wrap: balance; }
.mi-final__sub { margin-block-start: var(--mi-s-20); color: var(--mi-text-muted); font-size: var(--mi-t-300); }
.mi-final__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--mi-s-16); margin-block-start: var(--mi-s-32); }


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

/* The footer is a white band. Its type comes from the light tokens, so the
   headings sit at 16.52 against white and the links at 5.48. */
   ul.mi-foot__list a {
    word-break: break-word;
}
.mi-foot {
  padding-block: var(--mi-s-80) var(--mi-s-32);
  background-color: var(--mi-white);
  color: var(--mi-text);
  border-block-start: var(--mi-border) solid var(--mi-hairline);
}
.mi-foot__grid { display: grid; gap: var(--mi-s-40); }
.mi-foot__brand > * + * { margin-block-start: var(--mi-s-12); }
.mi-foot__brand img { width: 16rem; max-width: 100%; }
.mi-foot__tag { color: var(--mi-text); font-size: var(--mi-t-200); font-weight: var(--mi-w-semi); line-height: var(--mi-lh-200); }
.mi-foot__brand .mi-muted { font-size: var(--mi-t-200); }
.mi-foot__head { margin-block-end: var(--mi-s-16); color: var(--mi-text); font-size: var(--mi-t-200); font-weight: var(--mi-w-semi); }
.mi-foot__list { list-style: none; }
.mi-foot__list li + li { margin-block-start: var(--mi-s-8); }
.mi-foot__link { color: var(--mi-text-muted); text-decoration: none; }
.mi-foot__link:hover { color: var(--mi-text); }
.mi-foot__base {
  display: flex; flex-wrap: wrap; gap: var(--mi-s-16); align-items: center;
  margin-block-start: var(--mi-s-48);
  padding-block-start: var(--mi-s-24);
  border-block-start: var(--mi-border) solid var(--mi-hairline);
  color: var(--mi-text-muted);
  font-size: var(--mi-t-100);
}


/* --------------------------------------------------------------------------
   BREAKPOINTS
   Mobile is the base. Each width re-composes rather than stacking.
   -------------------------------------------------------------------------- */

@media (min-width: 40em) {              /* 640 */
  .mi-caps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mi-whys { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mi-foot__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 64em) {              /* 1024 */
  .mi-burger { display: none; }
  .mi-header__end { display: flex; }

  .mi-nav { margin-inline: auto; }
  .mi-nav__list,
  .mi-nav[data-open="false"] .mi-nav__list,
  .mi-nav[data-open="true"] .mi-nav__list {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--mi-s-24);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .mi-nav__link, .mi-nav__toggle { padding-block: var(--mi-s-8); font-size: var(--mi-t-200); white-space: nowrap; }

  .mi-mega--js {
    position: absolute;
    inset-inline: 0;
    inset-block-start: var(--mi-header);
    z-index: var(--mi-z-panel);
    padding-block: var(--mi-s-32) var(--mi-s-40);
    background-color: var(--mi-ink);
    box-shadow: var(--mi-e-3);
  }

  .mi-mega__grid { grid-template-columns: repeat(3, minmax(0,1fr)) 18rem; }
  .mi-mega__feature { grid-column: 4; grid-row: 1 / span 2; }

  /* The words get the room. The object gets a column of its own and is
     allowed to run past the gutter, which is what makes it read as large
     rather than as an illustration parked in a box. */


  .mi-caps { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mi-conv { grid-template-columns: minmax(0,1fr) minmax(20rem, 26rem) minmax(0,1fr); gap: var(--mi-s-40); }
  .mi-whys { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .mi-foot__grid { grid-template-columns: 1.4fr repeat(4, minmax(0,1fr)); }

  /* the stepper turns horizontal */
  .mi-step__track { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--mi-gap); padding-block-start: var(--mi-s-40); }
  .mi-step__rail { inset-inline: 0; inset-block: 0 auto; width: auto; height: 2px; }
  .mi-step__rail::after { transform: scaleX(var(--mi-progress, 0)); transform-origin: left center; }
  .mi-stage { padding-inline-start: 0; padding-block-start: var(--mi-s-32); }
  .mi-stage__dot { inset-block-start: calc(var(--mi-s-40) * -1 + var(--mi-s-8) + 2px); }
}


/* ==========================================================================
   mitech Consultants Inc.  .  master build
   studio.css  .  the Innovation Studio page

   Two components of its own: the concept-to-commercialization path, where a
   venture starts as one node and becomes a connected system by the fourth
   stage, and the ecosystem map with mitech at the centre. Everything else
   reuses the shared system. All values come from tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE PATH
   Four stages. The node on each stage gains one more connection than the one
   before it, so an idea visibly becomes a system by the fourth. The line
   between stages draws as each arrives.
   -------------------------------------------------------------------------- */

.mi-vpath { display: grid; gap: var(--mi-s-24); margin-block-start: var(--mi-s-64); align-items: stretch; }

.mi-stagecard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mi-s-12);
  height: 100%;
  padding: var(--mi-s-32) var(--mi-s-24);
  border: var(--mi-border) solid var(--mi-hairline);
  border-radius: var(--mi-r-lg);
  background-color: var(--mi-bg-raised);
}

.mi-stagecard__num { color: var(--mi-accent); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); letter-spacing: var(--mi-ls-label); text-transform: uppercase; }
.mi-stagecard__name { font-size: var(--mi-t-400); line-height: var(--mi-lh-400); letter-spacing: var(--mi-ls-400); font-weight: var(--mi-w-semi); }
.mi-stagecard__note { color: var(--mi-text-muted); }
.mi-stagecard__tags { margin-block-start: auto; }

/* The stage number carries the sequence instead of a diagram. Four different
   little graphs in four cards read as clutter, and the section is about order,
   which a number states more plainly than a picture. */
.mi-stagecard__step {
  display: block;
  color: var(--mi-blue-wash);
  font-size: var(--mi-t-800);
  line-height: 1;
  letter-spacing: var(--mi-ls-800);
  font-weight: var(--mi-w-display);
  font-variant-numeric: tabular-nums;
}

.mi-on-navy .mi-stagecard__step { color: rgba(143, 202, 238, 0.22); }

/* --------------------------------------------------------------------------
   VENTURE
   One block each, alternating which side the detail sits on so four of them
   do not read as four identical slabs.
   -------------------------------------------------------------------------- */

.mi-venture-block { display: grid; gap: var(--mi-s-32); align-items: start; }
.mi-ventures { margin-block-start: var(--mi-s-64); }
.mi-venture-block__body { min-width: 0; }
.mi-venture-block + .mi-venture-block {
  margin-block-start: var(--mi-s-80);
  padding-block-start: var(--mi-s-80);
  border-block-start: var(--mi-border) solid var(--mi-hairline);
}

.mi-venture-block__kind { color: var(--mi-accent); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); letter-spacing: var(--mi-ls-label); text-transform: uppercase; }
.mi-venture-block__name { margin-block-start: var(--mi-s-12); font-size: var(--mi-t-600); line-height: var(--mi-lh-600); letter-spacing: var(--mi-ls-600); font-weight: var(--mi-w-display); }
.mi-venture-block__claim { margin-block-start: var(--mi-s-16); font-size: var(--mi-t-400); line-height: var(--mi-lh-400); letter-spacing: var(--mi-ls-400); font-weight: var(--mi-w-semi); }
.mi-venture-block__note { margin-block-start: var(--mi-s-16); color: var(--mi-text-muted); }
.mi-venture-block__cta { margin-block-start: var(--mi-s-24); }

.mi-capslist { list-style: none; }
.mi-capslist li {
  display: flex;
  align-items: baseline;
  gap: var(--mi-s-16);
  padding-block: var(--mi-s-12);
  border-block-start: var(--mi-border) solid var(--mi-hairline);
}

.mi-capslist li::before {
  content: "";
  flex: 0 0 auto;
  width: var(--mi-s-8);
  height: var(--mi-s-8);
  border-radius: var(--mi-r-pill);
  background-color: var(--mi-accent);
  transform: translateY(-0.15em);
}

.mi-focus { margin-block-start: var(--mi-s-24); }
.mi-focus__kind { color: var(--mi-text-muted); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); letter-spacing: var(--mi-ls-label); text-transform: uppercase; }
.mi-focus .mi-tags { margin-block-start: var(--mi-s-12); }

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */

@media (min-width: 40em) {
  .mi-vpath { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .mi-vpath { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mi-s-16); }
  .mi-venture-block { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--mi-s-64); }
}

/* ==========================================================================
   INDUSTRIES PAGE
   Four industries, each a full-width block rather than a card, because each
   one carries a claim, six capability lines and a note about how it is
   approached. Cards would squeeze that; rows let it breathe.
   ========================================================================== */

.mi-industry-block { display: grid; gap: var(--mi-s-32); align-items: start; }

.mi-industry-block + .mi-industry-block {
  margin-block-start: var(--mi-s-80);
  padding-block-start: var(--mi-s-80);
  border-block-start: var(--mi-border) solid var(--mi-hairline);
}

.mi-industries-list { margin-block-start: var(--mi-s-64); }

.mi-industry-block__num {
  color: var(--mi-blue-wash);
  font-size: var(--mi-t-700);
  line-height: 1;
  letter-spacing: var(--mi-ls-700);
  font-weight: var(--mi-w-display);
  font-variant-numeric: tabular-nums;
}

.mi-industry-block__name {
  margin-block-start: var(--mi-s-12);
  font-size: var(--mi-t-600);
  line-height: var(--mi-lh-600);
  letter-spacing: var(--mi-ls-600);
  font-weight: var(--mi-w-display);
}

.mi-industry-block__claim {
  margin-block-start: var(--mi-s-16);
  font-size: var(--mi-t-400);
  line-height: var(--mi-lh-400);
  letter-spacing: var(--mi-ls-400);
  font-weight: var(--mi-w-semi);
}

.mi-industry-block__note { margin-block-start: var(--mi-s-16); max-width: 52ch; }
.mi-industry-block__cta { margin-block-start: var(--mi-s-24); }
.mi-industry-block__body { min-width: 0; }

/* Where mitech works inside that industry. Two columns of plain lines, no
   cards, so six items do not become six boxes. */
.mi-worklist { display: grid; gap: 0; list-style: none; }

.mi-worklist li {
  display: flex;
  align-items: baseline;
  gap: var(--mi-s-16);
  padding-block: var(--mi-s-12);
  border-block-start: var(--mi-border) solid var(--mi-hairline);
}

.mi-worklist li::before {
  content: "";
  flex: 0 0 auto;
  width: var(--mi-s-8);
  height: var(--mi-s-8);
  border-radius: var(--mi-r-pill);
  background-color: var(--mi-accent);
  transform: translateY(-0.15em);
}

@media (min-width: 40em) {
  .mi-worklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mi-s-32); }
}

@media (min-width: 64em) {
  .mi-industry-block { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--mi-s-64); }
}

/* ==========================================================================
   ABOUT PAGE
   The five operating principles as one numbered run, and two small variants
   of existing components. Nothing else on the page needs new styling.
   ========================================================================== */

.mi-principles { list-style: none; margin-block-start: var(--mi-s-48); }

.mi-principle {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--mi-s-24);
  align-items: baseline;
  padding-block: var(--mi-s-32);
  border-block-start: var(--mi-border) solid var(--mi-hairline);
}

.mi-principle:last-child { border-block-end: var(--mi-border) solid var(--mi-hairline); }

.mi-principle__num {
  color: var(--mi-accent);
  font-size: var(--mi-t-500);
  font-weight: var(--mi-w-display);
  font-variant-numeric: tabular-nums;
}

.mi-principle__name { font-size: var(--mi-t-400); line-height: var(--mi-lh-400); letter-spacing: var(--mi-ls-400); font-weight: var(--mi-w-semi); }
.mi-principle__note { margin-block-start: var(--mi-s-8); color: var(--mi-text-muted); max-width: 70ch; }

@media (min-width: 64em) {
  .mi-whys--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mi-worklist--one { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ABOUT . principles take the light as you read them
   Once armed by the script, every principle dims except the one in the
   middle of the screen. Without the script they are all simply legible.
   ========================================================================== */

.mi-principles[data-armed] .mi-principle { opacity: 0.32; transition: opacity var(--mi-d-3) var(--mi-ease); }
.mi-principles[data-armed] .mi-principle[data-active] { opacity: 1; }
.mi-principle__num { transition: transform var(--mi-d-3) var(--mi-ease); transform-origin: left center; }
.mi-principles[data-armed] .mi-principle[data-active] .mi-principle__num { transform: scale(1.35); }

/* ==========================================================================
   ABOUT . partner logo wall
   A still grid of equal cells, the way serious firms show a partner list.
   The logo sits in grey until pointed at, then shows in its own colour.
   Until a logo file exists, the partner's name fills the cell instead.
   ========================================================================== */

.mi-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-block-start: var(--mi-s-64);
  list-style: none;
  border-block-start: var(--mi-border) solid var(--mi-hairline);
  border-inline-start: var(--mi-border) solid var(--mi-hairline);
}

.mi-logo {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--mi-s-32) var(--mi-s-24);
  border-block-end: var(--mi-border) solid var(--mi-hairline);
  border-inline-end: var(--mi-border) solid var(--mi-hairline);
  background-color: var(--mi-bg-raised);
  text-align: center;
  transition: background-color var(--mi-d-2) var(--mi-ease);
}

.mi-logo:hover { background-color: var(--mi-white); }

/* the image is hidden until it has actually loaded, so a missing file never
   shows as a broken-image box */
.mi-logo__img {
  display: none;
  width: auto;
  max-width: 78%;
  max-height: 3.25rem;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--mi-d-2) var(--mi-ease), opacity var(--mi-d-2) var(--mi-ease);
}

.mi-logo:hover .mi-logo__img { filter: none; opacity: 1; }

.mi-logo[data-has-logo] .mi-logo__img { display: block; }
.mi-logo[data-has-logo] .mi-logo__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.mi-logo__name {
  color: var(--mi-text-muted);
  font-size: var(--mi-t-300);
  line-height: var(--mi-lh-300);
  font-weight: var(--mi-w-semi);
  letter-spacing: -0.01em;
  transition: color var(--mi-d-2) var(--mi-ease);
}

.mi-logo:hover .mi-logo__name { color: var(--mi-text); }

.mi-logos__foot { margin-block-start: var(--mi-s-48); text-align: center; }

@media (min-width: 64em) { .mi-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mi-logo { min-height: 11rem; } }

/* ==========================================================================
   WHAT WE DO . the capability explorer
   Six capabilities as a vertical tab set beside one large panel on wide
   screens. On phones the tab list steps aside and every panel shows in
   sequence: nothing is hidden and nothing is squeezed into pills.
   ========================================================================== */

.mi-cx { margin-block-start: var(--mi-s-48); }
.mi-cx__tabs { display: none; }

/* below the breakpoint every panel is visible, whatever the script says */
.mi-cx__panel[hidden] { display: block; }
.mi-cx__panel + .mi-cx__panel { margin-block-start: var(--mi-s-24); }

.mi-cx__panel {
  position: relative;
  padding: clamp(var(--mi-s-32), 4vw, var(--mi-s-64));
  border: var(--mi-border) solid var(--mi-hairline);
  border-radius: var(--mi-r-xl);
  background-color: var(--mi-bg-raised);
  overflow: hidden;
}

.mi-cx__bignum {
  position: absolute;
  inset-block-end: -0.18em;
  inset-inline-end: 0.04em;
  color: var(--mi-blue-wash);
  font-size: clamp(7rem, 16vw, 14rem);
  line-height: 1;
  font-weight: var(--mi-w-display);
  letter-spacing: -0.05em;
  pointer-events: none;
}

.mi-cx__name, .mi-cx__claim, .mi-cx__note, .mi-cx__chips, .mi-cx__panel > .mi-btn { position: relative; }
.mi-cx__name { max-width: 18ch; font-size: var(--mi-t-700); line-height: var(--mi-lh-700); letter-spacing: var(--mi-ls-700); font-weight: var(--mi-w-display); }
.mi-cx__claim { margin-block-start: var(--mi-s-16); font-size: var(--mi-t-400); line-height: var(--mi-lh-400); font-weight: var(--mi-w-semi); color: var(--mi-link); }
.mi-cx__note { margin-block-start: var(--mi-s-16); max-width: 60ch; color: var(--mi-text-muted); }
.mi-cx__chips { display: flex; flex-wrap: wrap; gap: var(--mi-s-8); margin-block: var(--mi-s-32); list-style: none; }

.mi-cx__chips li {
  padding: var(--mi-s-8) var(--mi-s-16);
  border: var(--mi-border) solid var(--mi-hairline-firm);
  border-radius: var(--mi-r-pill);
  font-size: var(--mi-t-100);
  font-weight: var(--mi-w-medium);
}

@media (min-width: 64em) {
  .mi-cx { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: var(--mi-s-40); align-items: start; }

  .mi-cx__tabs { display: flex; flex-direction: column; gap: var(--mi-s-4); position: sticky; inset-block-start: calc(var(--mi-header) + var(--mi-s-24)); }

  .mi-cx__tab {
    display: flex;
    align-items: baseline;
    gap: var(--mi-s-16);
    padding: var(--mi-s-16) var(--mi-s-20);
    border: 0;
    border-inline-start: 2px solid var(--mi-hairline);
    background: transparent;
    color: var(--mi-text-muted);
    font-size: var(--mi-t-200);
    font-weight: var(--mi-w-medium);
    text-align: start;
    transition: color var(--mi-d-1) var(--mi-ease), border-color var(--mi-d-2) var(--mi-ease), background-color var(--mi-d-1) var(--mi-ease);
  }

  .mi-cx__tab:hover { color: var(--mi-text); background-color: var(--mi-bg-quiet); }

  .mi-cx__tab[aria-selected="true"] { color: var(--mi-text); border-inline-start-color: var(--mi-blue); background-color: var(--mi-blue-wash); }

  .mi-cx__num { color: var(--mi-accent); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); font-variant-numeric: tabular-nums; }

  .mi-cx__panel[hidden] { display: none; }
  .mi-cx__panel + .mi-cx__panel { margin-block-start: 0; }
  .mi-cx__panel:not([hidden]) { animation: mi-cx-in var(--mi-d-3) var(--mi-ease); }
}

@keyframes mi-cx-in { from { opacity: 0; transform: translateY(var(--mi-s-12)); } to { opacity: 1; transform: none; } }
.mi-cx__stage, .mi-cx__tabname { min-width: 0; }

/* ==========================================================================
   ABOUT . numbers in the hero, and the transformation cards
   ========================================================================== */

.mi-figrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mi-s-24);
  margin-block-start: var(--mi-s-48);
  padding-block-start: var(--mi-s-32);
  border-block-start: var(--mi-border) solid var(--mi-hairline);
}

.mi-fig__n { color: var(--mi-text); font-size: var(--mi-t-700); line-height: 1; letter-spacing: var(--mi-ls-700); font-weight: var(--mi-w-display); font-variant-numeric: tabular-nums; }
.mi-fig__l { margin-block-start: var(--mi-s-8); color: var(--mi-text-muted); font-size: var(--mi-t-200); }

@media (min-width: 64em) {
  .mi-figrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   ABOUT . bento layout
   ========================================================================== */

.mi-phero--tight { padding-block-end: var(--mi-s-48); }
.mi-bento-band { padding-block: clamp(var(--mi-s-48), 5vw, var(--mi-s-80)); }

.mi-bento { display: grid; gap: var(--mi-s-16); }

.mi-tile {
  position: relative;
  padding: clamp(var(--mi-s-24), 2.6vw, var(--mi-s-40));
  border: var(--mi-border) solid var(--mi-hairline);
  border-radius: var(--mi-r-lg);
  background-color: var(--mi-bg-raised);
  color: var(--mi-text);
  overflow: hidden;
}

.mi-tile.mi-on-navy { background-color: var(--mi-ink); border-color: var(--mi-hairline); }

.mi-tile__title { margin-block-start: var(--mi-s-12); font-size: var(--mi-t-500); line-height: var(--mi-lh-500); letter-spacing: var(--mi-ls-500); font-weight: var(--mi-w-display); text-wrap: balance; }
.mi-tile__title--sm { font-size: var(--mi-t-400); line-height: var(--mi-lh-400); }
.mi-tile__body { margin-block-start: var(--mi-s-16); color: var(--mi-text-muted); }
.mi-tile > p:last-child .mi-link { display: inline-block; margin-block-start: var(--mi-s-20); }

.mi-tile--num { display: flex; flex-direction: column; justify-content: flex-end; min-height: 9rem; }
.mi-tile--num .mi-fig__n { font-size: var(--mi-t-700); }

.mi-tile__split { display: grid; gap: var(--mi-s-32); align-items: center; }


.mi-head--row { display: grid; gap: var(--mi-s-16); max-width: none; }
.mi-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mi-s-24); padding: clamp(var(--mi-s-32), 4vw, var(--mi-s-48)); }
.mi-cta-row h2 { font-size: var(--mi-t-600); line-height: var(--mi-lh-600); max-width: 22ch; }

@media (min-width: 40em) {
  .mi-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mi-tile--who, .mi-tile--why, .mi-tile--next { grid-column: 1 / -1; }
}

@media (min-width: 64em) {
  .mi-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .mi-tile--who    { grid-column: 1 / span 8; grid-row: span 2; }
  .mi-tile--num    { grid-column: 9 / span 4; }
  .mi-tile__split  { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--mi-s-48); }
  .mi-head--row    { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: var(--mi-s-48); }
}

/* the four rules as one row under the belief they come from */
.mi-rules-row { margin-block-start: var(--mi-s-40); padding-block-start: var(--mi-s-32); border-block-start: var(--mi-border) solid var(--mi-hairline); }
.mi-rules4 { display: grid; gap: var(--mi-s-24); margin-block-start: var(--mi-s-24); list-style: none; }
.mi-rule__n { color: var(--mi-accent); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); font-variant-numeric: tabular-nums; }
.mi-rule__name { margin-block-start: var(--mi-s-8); font-size: var(--mi-t-300); line-height: var(--mi-lh-300); font-weight: var(--mi-w-semi); }
.mi-rule__note { margin-block-start: var(--mi-s-8); color: var(--mi-text-muted); font-size: var(--mi-t-200); }
.mi-head__link { margin-block-start: var(--mi-s-16); }

/* the closing panel carries the future and the ask together */
.mi-next { text-align: center; }
.mi-next__title { max-width: 22ch; margin: var(--mi-s-12) auto 0; font-size: var(--mi-t-700); line-height: var(--mi-lh-700); letter-spacing: var(--mi-ls-700); font-weight: var(--mi-w-display); text-wrap: balance; }
.mi-next__body { max-width: 62ch; margin: var(--mi-s-20) auto 0; color: var(--mi-text-muted); font-size: var(--mi-t-300); line-height: var(--mi-lh-300); }
.mi-next__cta { margin-block-start: var(--mi-s-32); }

@media (min-width: 40em) { .mi-rules4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .mi-rules4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mi-s-32); }
  .mi-bento-band .mi-tile__split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--mi-s-48); }
}

/* ==========================================================================
   ABOUT . three circles into one
   ========================================================================== */

.mi-venn { width: min(100%, 30rem); margin-inline: auto; }
.mi-venn svg { display: block; width: 100%; height: auto; overflow: visible; }
.mi-venn [data-v] { will-change: transform; }
.mi-venn__c { fill: rgba(44, 140, 203, 0.14); stroke: var(--mi-near); stroke-width: 2; }
.mi-venn__l { fill: var(--mi-near); font: 600 11px var(--mi-font); letter-spacing: 0.1em; text-transform: uppercase; }
.mi-venn__core { fill: var(--mi-near); font: 700 16px var(--mi-font); letter-spacing: -0.01em; opacity: 0; transition: opacity var(--mi-d-3) var(--mi-ease); }
.mi-venn__glow { opacity: 0; transition: opacity var(--mi-d-3) var(--mi-ease); }
.mi-venn[data-met] .mi-venn__core, .mi-venn[data-met] .mi-venn__glow { opacity: 1; }
.mi-nojs .mi-venn__core, .mi-nojs .mi-venn__glow { opacity: 1; }

/* ==========================================================================
   ABOUT . shifts as rows
   One row per transformation, with a column for each part, so every from,
   every to and every note lines up across all six.
   ========================================================================== */

.mi-shifts { list-style: none; margin-block-start: var(--mi-s-40); border-block-start: var(--mi-border) solid var(--mi-hairline); }

.mi-shift {
  display: grid;
  gap: var(--mi-s-8);
  padding-block: var(--mi-s-24);
  border-block-end: var(--mi-border) solid var(--mi-hairline);
  transition: background-color var(--mi-d-2) var(--mi-ease);
}

.mi-shift:hover { background-color: var(--mi-bg-quiet); }
.mi-shift__who { color: var(--mi-text); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); letter-spacing: var(--mi-ls-label); text-transform: uppercase; }
.mi-shift__who span { display: block; color: var(--mi-accent); }
.mi-shift__from { color: var(--mi-text-muted); text-decoration: line-through; text-decoration-color: var(--mi-hairline-firm); }
.mi-shift__arrow { display: block; width: 2rem; height: 2px; background: var(--mi-blue); position: relative; align-self: center; }
.mi-shift__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 10px; height: 10px; border-top: 2px solid var(--mi-blue); border-right: 2px solid var(--mi-blue); transform: rotate(45deg); }
.mi-shift__to { font-size: var(--mi-t-400); line-height: var(--mi-lh-400); font-weight: var(--mi-w-semi); }
.mi-shift__note { color: var(--mi-text-muted); font-size: var(--mi-t-200); }

@media (min-width: 64em) {
  .mi-shift {
    grid-template-columns: 9rem minmax(0, 0.9fr) 3rem minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--mi-s-24);
    align-items: center;
    padding-inline: var(--mi-s-16);
  }
}

/* ==========================================================================
   ABOUT . partners, credited
   ========================================================================== */

.mi-pfeature {
  display: grid;
  gap: var(--mi-s-24);
  align-items: center;
  margin-block-start: var(--mi-s-48);
  padding: clamp(var(--mi-s-24), 3vw, var(--mi-s-40));
  border: var(--mi-border) solid var(--mi-blue);
  border-radius: var(--mi-r-lg);
  background-color: var(--mi-bg-raised);
  background-image: linear-gradient(150deg, rgba(44,140,203,0.10) 0%, rgba(44,140,203,0) 60%);
}

.mi-pfeature__logo, .mi-pcard__logo { position: relative; display: grid; place-items: center; min-height: 6rem; }
.mi-pfeature__logo .mi-logo__name { font-size: var(--mi-t-500); color: var(--mi-text); }
.mi-pfeature__title { margin-block-start: var(--mi-s-8); font-size: var(--mi-t-500); line-height: var(--mi-lh-500); font-weight: var(--mi-w-display); }
.mi-pfeature__note { margin-block-start: var(--mi-s-12); color: var(--mi-text-muted); }

.mi-pcards { display: grid; gap: var(--mi-s-16); margin-block-start: var(--mi-s-16); list-style: none; }

.mi-pcard {
  display: block;
  width: 100%;
  padding: var(--mi-s-24);
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: var(--mi-border) solid var(--mi-hairline);
  border-radius: var(--mi-r-lg);
  background-color: var(--mi-bg-raised);
  text-align: center;
  transition: border-color var(--mi-d-2) var(--mi-ease), transform var(--mi-d-2) var(--mi-ease);
}

.mi-pcard:hover { border-color: var(--mi-blue); transform: translateY(-3px); }
.mi-pcard:hover .mi-logo__img, .mi-pfeature:hover .mi-logo__img { filter: none; opacity: 1; }
.mi-pcard__role { margin-block-start: var(--mi-s-8); color: var(--mi-accent); font-size: var(--mi-t-100); font-weight: var(--mi-w-semi); letter-spacing: var(--mi-ls-label); text-transform: uppercase; }
.mi-pcard[data-has-logo] .mi-logo__img, .mi-pfeature[data-has-logo] .mi-logo__img { display: block; }
.mi-pcard[data-has-logo] .mi-logo__name, .mi-pfeature[data-has-logo] .mi-logo__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mi-pfoot { margin-block-start: var(--mi-s-32); text-align: center; color: var(--mi-text-muted); }

@media (min-width: 40em) { .mi-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .mi-pfeature { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--mi-s-48); }
  .mi-pcards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* the selector: the chosen partner is marked, the feature swaps in place */
.mi-pbox { margin-block-start: var(--mi-s-48); }
.mi-pbox .mi-pfeature { margin-block-start: 0; min-height: 13rem; }
.mi-pbox .mi-pfeature[hidden] { display: none; }
.mi-pbox .mi-pfeature:not([hidden]) { animation: mi-cx-in var(--mi-d-3) var(--mi-ease); }
.mi-nojs .mi-pbox .mi-pfeature[hidden] { display: grid; margin-block-end: var(--mi-s-16); }
.mi-pcard[aria-selected="true"] { border-color: var(--mi-blue); background-color: var(--mi-blue-wash); transform: none; }
.mi-pcard[aria-selected="true"] .mi-logo__name { color: var(--mi-text); }
.mi-pcard[aria-selected="true"] .mi-logo__img { filter: none; opacity: 1; }
.mi-pcard:focus-visible { outline: var(--mi-focus-w) solid var(--mi-focus); outline-offset: var(--mi-focus-o); }
.mi-pcard .mi-logo__name { font-size: var(--mi-t-200); }
@media (min-width: 40em) { .mi-pbox .mi-pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .mi-pbox .mi-pcards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mi-pstage { min-width: 0; }

@media (min-width: 48em) {
  .mi-bento-band .mi-tile__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mi-s-40); align-items: center; }
}
.mi-venn svg { margin-block: -1.5rem; }

/* logos fill their cell: SVG logos have no fixed size of their own, so they
   are given a width and capped in height rather than left to shrink */
.mi-pcard .mi-logo__img { width: 88%; height: 2.75rem; max-width: none; max-height: none; object-fit: contain; }
.mi-pfeature .mi-logo__img { width: 80%; height: 5rem; max-width: none; max-height: none; object-fit: contain; }

/* partner logos in full colour, always: they are the partners' own marks,
   so they are shown as they made them rather than greyed out */
.mi-pbox .mi-logo__img { filter: none; opacity: 1; }
.mi-pcard .mi-logo__img  { width: 82%; height: 2.6rem; }
.mi-pfeature .mi-logo__img { width: 72%; height: 4.75rem; }
/* the crest is tall where the rest are wide, so it gets more height to
   carry the same visual weight */
.mi-pcard[data-shape="tall"] .mi-logo__img { height: 4.25rem; }
.mi-pfeature[data-shape="tall"] .mi-logo__img { height: 8rem; }
.mi-pcard__logo { min-height: 4.5rem; }

/* Every partner card shares one skeleton: a fixed-height logo area centred
   in the card, then the role starting at the same line in every card. The
   LMP card, which shows a name instead of a logo, was taller than its logo
   area and pushed its role down, which is what made it look off centre. */
.mi-pcard { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.mi-pcard__logo { width: 100%; height: 4.5rem; min-height: 0; display: grid; place-items: center; }
.mi-pcard__logo .mi-logo__name { font-size: var(--mi-t-200); line-height: 1.3; text-wrap: balance; }
.mi-pcard__role { margin-block-start: var(--mi-s-12); min-height: 2.8em; display: flex; align-items: flex-start; justify-content: center; text-align: center; }
/* a partner shown by name in the feature is centred in the logo space,
   the same way a logo would be */
.mi-pfeature__logo .mi-logo__name { text-align: center; max-width: 16ch; text-wrap: balance; }