/* ==========================================================================
   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.2);

  /* ----------------------------------------------------------------------
     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.2);
  --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.4;
  --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.425rem + 0.5869vw, 1.9531rem);
  --mi-lh-500: 1.22;
  --mi-ls-500: -0.018em;
  --mi-t-600: clamp(1.8125rem, 1.5925rem + 0.939vw, 2.4414rem);
  --mi-lh-600: 1.14;
  --mi-ls-600: -0.022em;
  --mi-t-700: clamp(2.0625rem, 1.715rem + 1.4836vw, 3.0518rem);
  --mi-lh-700: 1.08;
  --mi-ls-700: -0.026em;
  --mi-t-800: clamp(2.375rem, 1.8688rem + 2.1596vw, 3.8147rem);
  --mi-lh-800: 1.04;
  --mi-ls-800: -0.03em;
  --mi-t-900: clamp(2.75rem, 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.1);
  --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.3);
  --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.1) 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: clamp(12.5rem, 15vw, 15.5rem); */
    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.1);
  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: 420vh;
  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(15vh, 150px);
  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.1) 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;
  }
}

/* Digital horizon: a calm field of data points under the hero copy.
   Sits above the spotlight and below the lockup and words; the top of the
   field fades out so it never competes with the headline. */
.mi-horizon {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  width: 100%;
  height: 40%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 30%,
    #000 60%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 30%,
    #000 60%
  );
}

/* The hero headline gets its own voice: a serif display face against the
   Inter used everywhere else, so the promise reads before anything around it. */
.mi-hero2 .mi-beat__title {
  font-family:
    'Newsreader', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* The closing line types itself out as the reader scrolls. The full line is
   always in the markup for screen readers; the typed copy is decorative, and
   the untyped letters stay in place (transparent) so the line never shifts. */
.mi-beat__title-end {
  display: block;
  font-weight: 700;
}

/* Two clear tiers. The opening two sentences are the setup: one wide line,
   regular weight, at a supporting size. "Build what's next." is the
   statement: bold and roughly twice as large, so the eye lands there and the
   pair reads as a balanced stack rather than two competing lines. */
.mi-hero2 .mi-beat__title {
  max-width: none;
  line-height: 1;
}
.mi-hero2 .mi-beats {
  width: min(100%, 72rem);
}
.mi-beat__title-lead {
  display: block;
  font-size: clamp(1.3rem, 1.75vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mi-near-2);
}
.mi-hero2 .mi-beat__title-end {
  font-size: clamp(2.6rem, 4.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-block-start: 0.12em;
}
.mi-hero2 .mi-beat__sub {
  max-width: 60ch;
}
@media (min-width: 64em) {
  .mi-beat__title-lead {
    white-space: nowrap;
  }
}

/* The hero paragraph sits a step brighter than muted text elsewhere, so it
   holds its own against the motion behind it. */
.mi-hero2 .mi-beat__sub {
  color: #c2ccdb;
}

/* The settled copy sets the height of the block, so a longer paragraph
   pushes the layout rather than running off the bottom of the screen. */
.mi-hero2 .mi-beats {
  min-height: 0;
}
.mi-hero2 .mi-beat--s {
  position: relative;
}
.mi-type__left {
  color: transparent;
}
.mi-type__caret {
  display: inline-block;
  width: 0.07em;
  height: 0.86em;
  margin-inline: 0.03em;
  vertical-align: -0.06em;
  border-radius: 1px;
  background-color: var(--mi-blue);
}
.mi-type[data-done] .mi-type__caret {
  animation: mi-caret 1.05s steps(1) infinite;
}
@keyframes mi-caret {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mi-type[data-done] .mi-type__caret {
    animation: none;
  }
}

/* The canvas the data points fly across while they build the mark. */
.mi-forge {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Statement hero: one screen, no scroll sequence. "Build what's next." leads
   in a white to metallic gradient, above the calm data horizon. */
.mi-hero2--rise {
  height: auto;
}
.mi-hero2--rise .mi-hstage {
  position: relative;
  height: auto;
  min-height: max(100vh, 640px);
  justify-content: center;
  padding-block: calc(var(--mi-header) + var(--mi-s-32)) var(--mi-s-64);
}
.mi-hero2--rise .mi-spot {
  background-image: radial-gradient(
    ellipse 46% 34% at 50% 36%,
    rgba(44, 140, 203, 0.18) 0%,
    rgba(44, 140, 203, 0.06) 48%,
    rgba(44, 140, 203, 0) 74%
  );
}
.mi-rise__copy {
  position: relative;
  z-index: 3;
  width: min(100%, 70rem);
  text-align: center;
}
.mi-rise__title {
  margin: 0;
  font-family:
    'Newsreader', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
}
.mi-rise__lead {
  display: block;
  font-family: var(--mi-font);
  font-size: clamp(1.25rem, 1.85vw, 2.15rem);
  font-weight: var(--mi-w-semi);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--mi-near-2);
}
.mi-rise__mask {
  display: block;
  overflow: hidden;
  margin-block-start: 0.12em;
  padding-inline: 0.1em;
}
.mi-rise__word {
  display: inline-block;
  font-family: var(--mi-font);
  font-size: clamp(2.6rem, 4.6vw, 5.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.mi-rise__typed {
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #f5f7fb 30%,
    #d3dae3 52%,
    #9aa7b7 74%,
    #c3ccd7 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mi-rise__left {
  color: transparent;
}
.mi-rise__word .mi-type__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-inline: 0.03em;
  vertical-align: -0.04em;
  border-radius: 1px;
  background-color: var(--mi-blue);
}
.mi-rise__word[data-done] .mi-type__caret {
  animation: mi-caret 1.05s steps(1) infinite;
}
@keyframes mi-caret {
  50% {
    opacity: 0;
  }
}
.mi-rise__sub {
  color: #c2ccdb;
  max-width: 50rem;
  text-wrap: balance;
  margin-block-start: clamp(0.9rem, 2vh, 1.4rem);
}
/* On wider screens the paragraph breaks at the colon: the claim on one
   line, the three layers and the promise on the next. */
@media (min-width: 64em) {
  .mi-hero2 .mi-rise__sub {
    max-width: none;
  }
  .mi-sub__l {
    display: block;
    white-space: nowrap;
  }
}

/* On phones the two actions stack as one matched pair: same width, same
   height, centred, so neither looks like an afterthought. */
@media (max-width: 40em) {
  .mi-hero2--rise .mi-beat__cta {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 20rem);
    margin-inline: auto;
  }
  .mi-hero2--rise .mi-beat__cta .mi-btn {
    width: 100%;
  }
}
@media (min-width: 64em) {
  .mi-rise__lead {
    white-space: nowrap;
  }
}
@media (max-width: 40em) {
  .mi-rise__word {
    font-size: clamp(2rem, 8.6vw, 2.6rem);
  }
}

/* One calm entrance on load: the setup line, then the statement types itself
   out, then the copy around it. */
@keyframes mi-settle {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.mi-hero2--rise [data-rin] {
  animation: mi-settle 0.9s var(--mi-ease) both;
}
.mi-hero2--rise .mi-rise__lead {
  animation-delay: 0.1s;
}
.mi-hero2--rise .mi-rise__sub {
  animation-delay: 1.9s;
}
.mi-hero2--rise .mi-beat__cta {
  animation-delay: 2.1s;
}
.mi-hero2--rise .mi-beat__proof {
  animation-delay: 2.25s;
}
@media (prefers-reduced-motion: reduce) {
  .mi-hero2--rise [data-rin],
  .mi-rise__word .mi-type__caret {
    animation: none;
  }
}

/* A quiet night sky above the data lake: small stars that twinkle and drift
   very slowly, thinning out behind the headline and towards the horizon. */
.mi-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 45%,
    transparent 78%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 78%);
}

/* Gradient sample: all three sentences at the statement size, stacked one
   per line, each in the same white to metallic finish. */
/* Both lines share one size: the largest at which the opening line still
   fits across the screen on one line. Only the statement is bold. */
.mi-hero2--rise .mi-rise__copy {
  width: min(100%, 90rem);
}
.mi-hero2--rise .mi-rise__word {
  font-size: clamp(2.8rem, 4.2vw, 5.25rem);
}
.mi-hero2--rise .mi-rise__lead {
  font-size: clamp(1.9rem, 2.7vw, 3.4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: inherit;
}
.mi-rise__line {
  display: inline;
  color: #ffffff;
}
.mi-hero2--rise .mi-rise__mask {
  margin-block-start: 0.1em;
}
@media (max-width: 40em) {
  .mi-hero2--rise .mi-rise__lead {
    font-size: clamp(1.2rem, 5.4vw, 1.6rem);
  }
  .mi-hero2--rise .mi-rise__word {
    font-size: clamp(1.9rem, 8.6vw, 2.6rem);
  }
}

/* Tighten the stack under the headline: the statement, the paragraph and
   the buttons read as one group with no dead space between them. */
.mi-hero2--rise .mi-rise__word {
  line-height: 1.02;
}
.mi-hero2--rise .mi-rise__mask {
  padding-block-end: 0.04em;
}
.mi-hero2--rise .mi-rise__sub {
  margin-block-start: clamp(0.55rem, 1.2vh, 0.9rem);
}
.mi-hero2--rise .mi-beat__cta {
  margin-block-start: clamp(1.1rem, 2.2vh, 1.5rem);
}

/* --------------------------------------------------------------------------
   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); */
    gap: clamp(0.75rem, 2vw, var(--mi-s-24));
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .mi-header__end .mi-btn {
    padding-inline: clamp(1rem, 2vw, var(--mi-s-24));
  }
  .mi-nav__link,
  .mi-nav__toggle {
    padding-block: var(--mi-s-8); /*font-size: var(--mi-t-200); */
    font-size: clamp(0.875rem, 1.3vw, 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);
  }
}
.mi-header {
  background-color: #050a12 !important;
}

/* Mobile navigation lives in nav.css, shared by every page. */