/* ModigenceVision — web foundations
   Single source of truth. Every page links this file.
   Change a value in :root and the whole site follows. */

:root {
  /* ---- colour ---- */
  --ink: #111111;
  --ink-soft: #1d1d1d;
  --page: #ffffff;
  --band: #fafafa;
  --line: #e5e5e5;
  --muted: #6b6b6b;
  --blue: #009fe8;
  --blue-deep: #00459b;

  --dark-ink: #111111;
  --dark-fg: #ffffff;
  --dark-line: #2e2e2e;
  --dark-muted: #9a9a9a;

  /* ---- type ---- */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-5xl: 76px;   /* display / hero */
  --text-4xl: 60px;   /* display, secondary */
  --text-3xl: 46px;   /* h1 */
  --text-2xl: 36px;   /* h2, section title */
  --text-xl: 28px;    /* h3 */
  --text-lg: 22px;    /* h3, card title */
  --text-md: 18px;    /* lead */
  --text-base: 16px;  /* body */
  --text-sm: 14px;    /* label, nav, button */
  --text-xs: 12px;    /* eyebrow, meta */

  --leading-tight: 1.12;
  --leading-normal: 1.55;

  --tracking-tighter: -0.022em; /* display */
  --tracking-tight: -0.012em;   /* heading */
  --tracking-eyebrow: 0.16em;   /* uppercase label */
  --tracking-button: 0.18em;

  --w-display: 400;
  --w-body: 400;
  --w-medium: 500;
  --w-semibold: 600;   /* heading ceiling — 700 is not used */

  --measure: 68ch;

  /* ---- layout ---- */
  --max-w: 1440px;
  --gutter: 64px;
  --pad-y: 112px;      /* section vertical padding, 96–128 range */
  --radius: 0;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 160ms;
}

/* ---- breakpoints: 1440 / 1024 / 768 / 480 ---- */
@media (max-width: 1024px) { :root { --gutter: 40px; --pad-y: 88px; --text-5xl: 60px; --text-3xl: 38px; --text-2xl: 30px; } }
@media (max-width: 768px)  { :root { --gutter: 28px; --pad-y: 72px; --text-5xl: 46px; --text-xl: 24px; } }
@media (max-width: 480px)  { :root { --gutter: 20px; --pad-y: 56px; --text-5xl: 36px; --text-3xl: 30px; --text-2xl: 26px; --text-md: 17px; } }

/* ---- element defaults ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 159, 232, 0.45); }

/* ---- layout primitives ---- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--pad-y) 0; }
.section--band { background: var(--band); }
.section--page { background: var(--page); }
.stack { display: flex; flex-direction: column; }
.stack > img, .stack > svg { align-self: flex-start; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--ink { background: var(--ink); }

/* ---- type roles ---- */
/* Headings scale continuously between a 360px and a 1440px viewport.
   Ceilings are the desktop token values; floors hold every heading at >=1.5x body (16px),
   so the title-to-text contrast survives at 360px. The --text-* tokens are unchanged —
   the breakpoint steps above no longer drive these four classes, but still serve
   .pull, .stat__v, .article h2/p and the tables. Body text never shrinks. */
.display { font-size: clamp(40px, 3.333vw + 28px, 76px); font-weight: var(--w-display); letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight); margin: 0; }
.h1 { font-size: clamp(32px, 1.296vw + 27.33px, 46px); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0; }
.h2 { font-size: clamp(26px, 0.926vw + 22.67px, 36px); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0; }
.h3 { font-size: clamp(24px, 0.370vw + 22.67px, 28px); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0; }
.h3--sm { font-size: var(--text-lg); }
.lead { font-size: clamp(18px, 0.185vw + 17.33px, 20px); line-height: var(--leading-normal); margin: 0; max-width: var(--measure); }
.body { font-size: var(--text-base); line-height: var(--leading-normal); margin: 0; max-width: var(--measure); }
.muted { color: var(--muted); }
.label { font-size: var(--text-sm); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.label--sm { font-size: var(--text-xs); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.mono--data { font-size: var(--text-sm); color: var(--ink); }

/* ---- eyebrow ---- */
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--blue); flex: none; }
.eyebrow--ink::before { background: var(--ink); }
.eyebrow > span { font-size: var(--text-sm); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.eyebrow--sm > span { font-size: var(--text-xs); color: var(--muted); }

.badge { font-size: 11px; font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #fff; background: var(--blue-deep); padding: 4px 8px; }

/* ---- section head: title left, meta right ---- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--ink); padding-bottom: 20px; }
.section-head + * { margin-top: 56px; }

/* ---- buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 16px 30px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--ink); color: #fff; }
.btn:active { background: #000; border-color: #000; }
.btn--secondary { border: 1px solid var(--line); color: var(--muted); }
.btn--secondary:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--invert { color: #fff; border-color: #fff; }
.btn--invert:hover { background: #fff; color: var(--ink); }

/* ---- links ---- */
.link { font-size: var(--text-base); font-weight: var(--w-medium); color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }
.link:hover { color: var(--blue); }
.link--blue { color: var(--blue-deep); }
.link--blue:hover { color: var(--blue); }
.link--label { font-size: var(--text-sm); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue-deep); }
.link .arrow { font-family: var(--font-mono); color: var(--blue-deep); text-decoration: none; }
.link--blue .arrow { color: inherit; }
.link--on-dark { color: var(--blue); }
.link--on-dark:hover { color: #fff; }

/* ---- icons: Google Material Symbols Outlined, inlined as <symbol>/<use> ----
   Only icons that carry information. 18px beside a label, 24px for a control. */
.ico { width: 18px; height: 18px; fill: currentColor; flex: none; vertical-align: -3px; }
.ico--24 { width: 24px; height: 24px; vertical-align: -5px; }
.ico-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ico-row > .note { flex: 1 1 auto; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.link .ico { color: var(--blue-deep); margin-left: 4px; }
.link--blue .ico, .link--on-dark .ico { color: inherit; }
.icon-tile { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--muted); }
.icon-tile code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink); overflow-wrap: anywhere; }

/* ---- input ---- */
.input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  width: 100%;
  max-width: 360px;
  transition: border-color var(--dur) var(--ease);
}
.input:hover { border-color: var(--muted); }
.input:focus-visible { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 159, 232, 0.28); }

/* ---- card ---- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; }
.card__media { width: 100%; height: 260px; object-fit: cover; object-position: center; }
.card__body { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.card__foot { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.card__foot a { white-space: nowrap; }
.card--plain { padding: 28px; gap: 10px; }

/* ---- spec list ---- */
.spec-list { margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.spec-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.spec-list dt { display: inline-flex; align-items: center; gap: 6px; }
.spec-list dd { margin: 0; color: var(--ink); }
@media (max-width: 480px) { .spec-list { grid-template-columns: 1fr; } }

/* ---- grids ---- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
@media (max-width: 1024px) { .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--2 { gap: 40px; } }
@media (max-width: 768px) { .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); } .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- nav ---- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.nav__links { display: flex; gap: 36px; align-items: center; }
.nav__link { font-size: var(--text-sm); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink); text-decoration: none; }
.nav__link:hover { color: var(--blue-deep); }
.nav__logo { height: 24px; width: auto; }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; padding: 96px 0 104px; }
.hero__text { display: flex; flex-direction: column; gap: 36px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.hero__caption { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; }
@media (max-width: 1024px) { .hero { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 72px; } }

/* ---- dark surface ---- */
.dark { background: var(--dark-ink); color: var(--dark-fg); }
.dark .nav { border-color: var(--dark-line); }
.dark .nav__link { color: var(--dark-fg); }
.dark .nav__link:hover { color: var(--blue); }
.dark .muted, .dark .mono { color: var(--dark-muted); }
.dark .hero__caption { border-color: var(--dark-line); }

/* ---- foundations sheet only (specimen scaffolding) ---- */
.spec-row { display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: baseline; padding: 36px 0; border-top: 1px solid var(--line); }
.spec-row:last-of-type { border-bottom: 1px solid var(--line); }
.spec-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); line-height: 1.9; }
.spec-note strong { display: block; color: var(--ink); font-weight: var(--w-body); }
.swatch { height: 132px; border: 1px solid var(--line); }
.swatch--gradient { background: linear-gradient(90deg, var(--blue), var(--blue-deep)); }
.band-demo { display: flex; border-top: 1px solid var(--line); }
.band-demo__gauge { width: 180px; flex: none; border-right: 1px dashed var(--line); padding: var(--pad-y) 0 var(--pad-y) var(--gutter); display: flex; flex-direction: column; justify-content: space-between; }
.band-demo__body { padding: var(--pad-y) var(--gutter); flex: 1; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 768px) { .spec-row { grid-template-columns: 1fr; gap: 20px; } .band-demo__gauge { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ============================================================
   HOME PAGE — built on the foundations tokens above
   ============================================================ */

/* ---- site header ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--page); border-bottom: 1px solid var(--line); }
.site-header .nav { border-bottom: 0; }
.nav__cta { margin-left: 8px; padding: 12px 22px; }
@media (max-width: 1299px) { .site-header .nav__cta { display: none; } }
.nav__burger { display: none; }
.nav__toggle { position: absolute; opacity: 0; pointer-events: none; }
@media (max-width: 1080px) {
  .nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); cursor: pointer; color: var(--ink); }
  .nav__burger .ico--close { display: none; }
  .nav__links { position: absolute; left: 0; right: 0; top: 100%; background: var(--page); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px var(--gutter) 24px; display: none; }
  .nav__links .nav__link { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav { position: relative; }
  .nav__toggle:checked ~ .nav__links { display: flex; }
  .nav__toggle:checked ~ .nav__burger .ico--menu { display: none; }
  .nav__toggle:checked ~ .nav__burger .ico--close { display: inline-block; }
  .nav__toggle:focus-visible ~ .nav__burger { box-shadow: 0 0 0 3px rgba(0,159,232,0.45); }
}

/* ---- generic section header: title left, action right ---- */
.head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.head-row .stack { gap: 14px; }

/* ---- problem 3-up ---- */
.states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.state { padding: 40px 32px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.state:last-child { border-right: 0; }
.state--missing { background: var(--ink); color: #fff; border-color: var(--ink); }
.state--missing .muted { color: #c9c9c9; }
.state__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--muted); }
.state--missing .state__tag { color: #fff; }
@media (max-width: 768px) { .states { grid-template-columns: minmax(0, 1fr); } .state { border-right: 0; border-bottom: 1px solid var(--line); } .state:last-child { border-bottom: 0; } }

.pull { font-size: var(--text-xl); font-weight: var(--w-display); letter-spacing: var(--tracking-tight); line-height: 1.3; max-width: 60ch; border-left: 1px solid var(--ink); padding-left: 24px; margin: 48px 0 0; }

/* ---- assembly steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 16px; }
.step img { width: 100%; height: auto; background: #fafafa; }
.step__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); border-top: 1px solid var(--ink); padding-top: 12px; }
@media (max-width: 768px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Product renders, not photographs: the whole object must be in frame. The base
   .card__media crops to a fixed 260px band, which is right for a scene photo and
   wrong for a product on a studio white — a pinned height plus cover slices the
   module off as the card widens. 2026-08-28 renders are 1672×941 on white with the
   product spanning ~48% of the frame; a 4:3 box, contain, and 3% side padding
   put each product at ~45% of the card width — no crop, no stretch. */
/* object-position: the card body adds 32px padding plus the eyebrow rule's own offset (~58px)
   below the media box, so a box-centred product reads higher than centred. Nudging it down by
   half that keeps the white above the body equal to the white below it, down to the eyebrow rule. */
.card__media--contain { height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: 50% calc(50% + 29px); background: #fff; padding: 0 3%; box-sizing: border-box; }
.card__body--tight { padding: 24px; gap: 10px; }

/* ---- spec table ---- */
.table-scroll { overflow-x: auto; border-top: 1px solid var(--ink); }
.spec-table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.spec-table th, .spec-table td { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 210px; font-size: var(--text-sm); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.spec-table td { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
.spec-table td .note { color: var(--muted); }
.spec-table .ico { color: var(--blue-deep); margin-right: 8px; }
.spec-table .note { color: var(--muted); }

/* ---- applications ---- */
.apps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.app { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color var(--dur) var(--ease); }
.app:hover { border-color: var(--ink); }
.app img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #fafafa; }
.app__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.app .ico { color: var(--blue-deep); }
@media (max-width: 1024px) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .apps { grid-template-columns: minmax(0, 1fr); } }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.stat__v { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--w-body); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat__l { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.stat { border-top: 1px solid var(--ink); padding-top: 20px; }
@media (max-width: 768px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- logo wall ---- */
/* Logo wall — sized on the optical height of each mark's wordmark, not its
   bounding box, so a stacked mark and a wide wordmark read at the same weight. */
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 56px; align-items: center; justify-items: center; }
.logos img { height: var(--logo-h, 22px); width: auto; max-width: 100%; filter: grayscale(1); opacity: 0.55; }
.logos img[data-logo="samsung"] { --logo-h: 18px; }
.logos img[data-logo="qualcomm"] { --logo-h: 21px; }
.logos img[data-logo="nvidia"] { --logo-h: 27px; }
.logos img[data-logo="sony"] { --logo-h: 19px; }
.logos img[data-logo="onsemi"] { --logo-h: 18px; }
.logos img[data-logo="kohler"] { --logo-h: 21px; }
.logos img[data-logo="sk-hynix"] { --logo-h: 49px; }
.logos img[data-logo="hanwha-vision"] { --logo-h: 44px; }
@media (max-width: 768px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; } }

/* ---- closing CTA ---- */
.cta-band { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-top: 48px; }
@media (max-width: 768px) { .cta-band { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---- footer ---- */
.site-footer { background: var(--page); border-top: 1px solid var(--line); padding: 72px 0 40px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-cols h3 { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin: 0 0 18px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-cols a { font-size: var(--text-sm); color: var(--muted); text-decoration: none; }
.footer-cols a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 768px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }


/* ---- HOME rev: visual density ---- */
.hero--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
@media (max-width: 1024px) { .hero--wide { grid-template-columns: minmax(0, 1fr); } }

.fig { margin: 0; }
.fig img { width: 100%; height: auto; display: block; background: #fafafa; }
.fig figcaption { margin-top: 14px; }

.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.stat__v--brand { color: var(--blue-deep); }

.gradient-rule { height: 2px; background: linear-gradient(90deg, #009fe8, #00459b); }



/* ============================================================
   STEP 3 — shared page furniture
   ============================================================ */

/* page hero (non-home): eyebrow + h1 + lead, optional image right */
.page-hero { padding: 88px 0 72px; border-bottom: 1px solid var(--line); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.page-hero__text { display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 1024px) { .page-hero { padding: 56px 0 48px; } .page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

.crumbs { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); margin-bottom: 28px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* placeholder block for imagery still in production */
.ph { display: flex; align-items: center; justify-content: center; text-align: center; background: #fafafa; border: 1px dashed var(--line); color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; padding: 24px; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.card > .ph { height: 180px; aspect-ratio: auto; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--1x1 { aspect-ratio: 1 / 1; }

/* comparison / data table (wider than .spec-table) */
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.data-table th, .data-table td { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; border-bottom: 1px solid var(--ink); }
.data-table tbody th { font-size: var(--text-lg); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); width: 200px; }
.data-table td { font-size: var(--text-sm); color: var(--muted); }
.data-table td .mono { color: var(--ink); }

/* numbered process steps — vertical flow, one step per row */
.process { display: grid; gap: 40px; }
.process__item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 32px; border-top: 1px solid var(--ink); padding-top: 20px; }
.process__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--blue-deep); }
.process__body { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 640px) { .process__item { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* module grid (sensor / edge cards) */
.mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mods--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mod { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.mod img, .mod .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fafafa; display: block; }
.mod__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1024px) { .mods, .mods--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mods, .mods--3 { grid-template-columns: minmax(0, 1fr); } }

/* download row */

/* tag chips (resources) */

/* resource cards */
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.res { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: border-color var(--dur) var(--ease); }
.res:hover { border-color: var(--ink); }
.res img, .res .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.res__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.res__meta { display: flex; gap: 14px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
@media (max-width: 1024px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .res-grid { grid-template-columns: minmax(0, 1fr); } }

/* article */
.article { max-width: 720px; margin: 0 auto; }
.article p { font-size: var(--text-md); line-height: 1.62; color: var(--ink); }
.article h2 { font-size: var(--text-xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); margin: 48px 0 16px; }
.article ul { padding-left: 20px; font-size: var(--text-md); line-height: 1.8; color: var(--ink); }
.article figure { margin: 40px 0; }
.article figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.article__source { margin: 48px 0 0; padding: 24px; border: 1px solid var(--line); }
.article__source p { font-size: var(--text-sm); line-height: 1.6; color: var(--muted); margin: 0 0 8px; }
.article__source p:last-child { margin-bottom: 0; }
.article__source strong { color: var(--ink); font-weight: var(--w-semibold); }
.article__source ul { margin: 8px 0 0; padding-left: 20px; font-size: var(--text-sm); line-height: 1.7; color: var(--muted); }
.article__source + .article__source { margin-top: 16px; }
.article__source ul li { margin-top: 6px; }

/* team roster — text only (portraits removed 2026-08-24); hairline rows, no imagery */
.roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.roster li { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding: 22px 0; min-width: 0; }
.roster li:nth-child(-n+3) { border-top-color: var(--ink); }
.roster__n { font-size: var(--text-lg); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
@media (max-width: 768px) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } .roster li:nth-child(-n+3) { border-top-color: var(--line); } .roster li:nth-child(-n+2) { border-top-color: var(--ink); } }
@media (max-width: 480px) { .roster { grid-template-columns: minmax(0, 1fr); } .roster li:nth-child(-n+2) { border-top-color: var(--line); } .roster li:first-child { border-top-color: var(--ink); } }

/* forms */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.field .input, .field select, .field textarea { max-width: none; font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; width: 100%; }
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; background-image: none; }
.field .hint { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.field select:focus-visible, .field textarea:focus-visible { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 159, 232, 0.28); }
.field--error .input, .field--error textarea { border-color: #b3261e; }
.field--error .hint { color: #b3261e; }
@media (max-width: 768px) { .form { grid-template-columns: minmax(0, 1fr); } }

/* two-column prose + aside */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: start; }
@media (max-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* 404 */
.center-pad { padding: 160px 0; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }


/* ============================================================
   STEP 5 — 2026-08-18 review: hero carousel, head office, footer social
   ============================================================ */

/* home hero carousel — slides stacked on one grid cell (equal height), crossfade */
.carousel__slides { display: grid; }
.carousel__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s 400ms linear; }
.carousel__slide.is-active { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease); }
.carousel .hero { padding-bottom: 40px; }
.carousel__pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 0 48px; }
.carousel__count { margin-right: 8px; }
.carousel__bar { width: 44px; height: 26px; padding: 12px 0; background: transparent; border: 0; cursor: pointer; position: relative; }
.carousel__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line); transition: background var(--dur) var(--ease); }
.carousel__bar:hover::before { background: var(--muted); }
.carousel__bar.is-active::before { background: var(--ink); }

/* head office row (Company) */
.office { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.office__item { border-top: 1px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.office__item h3 { margin: 0; font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.office__item p { margin: 0; max-width: 44ch; }
.office__item a { color: var(--ink); text-decoration: none; }
.office__item a:hover { color: var(--blue-deep); }
@media (max-width: 768px) { .office { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* footer social — monochrome official marks, ink, hover deep blue */
.ico--20 { width: 20px; height: 20px; vertical-align: -4px; }
.footer-social { display: flex; align-items: center; gap: 20px; }
.footer-social a { display: inline-flex; color: var(--ink); }
.footer-social a:hover { color: var(--blue-deep); }


/* hero media panel — deck 6.0 cover/closing treatment: ink surface, cover image,
   ink-navy gradient, lower-third mono caption. Fixed height at every breakpoint,
   so the two carousel slides can never change the hero's height. */
/* hero media panel — 16:9 imagery (2026-08-28): aspect-ratio keeps both slides
   the same height at every width with no cropping; band bg avoids a dark flash on load.
   No radius, no border, no shadow, no caption overlay. */
.hero__panel { position: relative; aspect-ratio: 16 / 9; height: auto; background: var(--band); }
.hero__panel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carousel .hero { align-items: center; }

/* ============================================================
   STEP 6 — 2026-08-24 global pass: narrow-viewport overflow, pager spacing
   ============================================================ */

/* Long unbroken strings (the shared mailbox address) were the only thing wider than
   a footer column below 480px — minmax(0,1fr) shrinks the column, the string did not. */
.footer-cols a, .footer-cols li, .footer-cols .ico-row, .office__item a, .office__item p, .icon-tile a { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 480px) { .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* Carousel pager sat 48px off the next section at every width. */
@media (max-width: 768px) { .carousel__pager { padding-bottom: 24px; } .carousel .hero { padding-bottom: 24px; } }
@media (max-width: 480px) { .carousel__pager { padding-bottom: 12px; } }

/* ============================================================
   STEP 7 — 2026-08-24: hero action pairs, footer mail wrapping
   ============================================================ */

/* Two actions per hero. Where the two-column page hero leaves the text column
   narrower than the pair needs (1025–1279px: column 397–518px, pair 500–506px),
   the row-gap makes the wrap read as a deliberate stack rather than a pushed row.
   Below 560px they stack outright. */
.hero__actions { column-gap: 32px; row-gap: 20px; }
@media (max-width: 1024px) { .hero__actions { column-gap: 24px; } }
@media (max-width: 560px) { .hero__actions { flex-direction: column; align-items: flex-start; gap: 20px; } }

/* Footer mail address: <wbr> before the @ is the only sensible break point, so the
   address splits as modigencevision / @modigence.com instead of shedding one letter
   per line. `overflow-wrap: anywhere` above stays as the last-resort net for longer
   strings — the <wbr> is a real break opportunity, so the browser takes it first.
   Below 1200px the four-column footer is narrow enough to need one size step down.
   The address sits in its own <span> so the <wbr> is in an inline context: as a direct
   child of .ico-row (inline-flex) it would be blockified into a flex item, splitting
   the address into two flex items and pushing the icon onto a line of its own.
   nowrap + a shrinkable span keeps the icon on the first text line and makes the
   address wrap internally at the <wbr> instead of the whole span dropping below.
   The location row gets the same nowrap so both footer icon rows behave alike. */
.footer-cols .ico-row { flex-wrap: nowrap; align-items: flex-start; }
.footer-cols .ico-row > svg { flex: none; }

/* logo wall additions */
.logos img[data-logo="prettl"] { --logo-h: 48px; }
.logos img[data-logo="voxelsensors"] { --logo-h: 30px; }
.logos img[data-logo="mountain"] { --logo-h: 51px; }



/* ============================================================
   STEP 8 — 2026-08-25: two-pillar stack, fact rows, four-up
   ============================================================ */

/* Technology: the two pillars of the stack, side by side. The pillar head takes
   the 2px blue top bar (the system's emphasis device); blocks below are hairline
   rows. Edge Compute bridges the two columns, so it sits on an ink hairline. */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.pillar { display: flex; flex-direction: column; }
.pillar__h { border-top: 2px solid var(--blue-deep); padding-top: 16px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 8px; }
.pillar__block { border-top: 1px solid var(--line); padding: 22px 0; display: flex; flex-direction: column; gap: 10px; }
.bridge { margin-top: 48px; border-top: 1px solid var(--ink); padding-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; align-items: start; }
@media (max-width: 1024px) { .pillars { grid-template-columns: minmax(0, 1fr); gap: 48px; } .bridge { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; } }

/* Company: company-overview fact rows — label left, value right, two columns. */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.facts__item { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--line); padding: 20px 0; align-items: baseline; }
.facts__item:nth-child(-n+2) { border-top-color: var(--ink); }
.facts__k { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.facts__v { margin: 0; }
@media (max-width: 1024px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts__item:nth-child(2) { border-top-color: var(--line); } }
@media (max-width: 560px) { .facts__item { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* Four-up label row — the split industry (Home) and the four named problems
   (Company). Labels carry the row; no invented sub-copy where the source has none. */
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.quad__item { border-top: 1px solid var(--line); padding: 20px 0; display: flex; flex-direction: column; gap: 8px; }
.quad__item:nth-child(-n+4) { border-top-color: var(--ink); }
@media (max-width: 900px) { .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quad__item:nth-child(n+3) { border-top-color: var(--line); } }
@media (max-width: 480px) { .quad { grid-template-columns: minmax(0, 1fr); } .quad__item:nth-child(n+2) { border-top-color: var(--line); } }

/* Roster third line — functional role under the title. */
.roster__r { font-size: var(--text-sm); color: var(--muted); }

/* ============================================================
   STEP 9 — 2026-08-25: process flow, compact leadership list
   ============================================================ */

/* The four steps are one sequence, not four cards. A hairline runs down the number
   gutter from each number to the next, so the flow is visible without adding a
   shape: the number sits on the band, punched out of the line it interrupts.
   The last step has no successor, so no line. */
.process__item { position: relative; }
.process__item::before { content: ""; position: absolute; left: 7px; top: 40px; bottom: -40px; width: 1px; background: var(--line); }
.process__item:last-child::before { content: none; }
/* align-self:start is load-bearing: as a grid item the number would stretch to the
   full row height, and its opaque background would then paint over the connector. */
.process__n { position: relative; z-index: 1; align-self: start; background: var(--band); padding-bottom: 8px; }
/* Step 02 branches into two paths; a hairline gutter shows the branch belongs to
   that step, and step 03's copy says both paths arrive there. */
.process__branch { border-left: 1px solid var(--line); padding-left: 24px; }
@media (max-width: 640px) { .process__item::before { content: none; } .process__branch { padding-left: 16px; } }

/* MARU product mark. The ∞ mark is the endorser (nav, footer); this is the product,
   and it appears only where the product is the subject. One flat ink — the supplied
   files are already #06243F — never recoloured, never the parent gradient. Clearspace
   is 50% of frame height, so the bottom margin is half the mark's height; minimum
   symbol height is 20px, so 24px is the smallest used here.
   No bottom margin: every parent supplies a gap that already exceeds clearspace
   (.page-hero__text / .hero__text 28px, .head-row .stack 14px, against 17px needed
   for the 34px lockup and 12px for the 24px symbol). A margin here would double up.
   align-self/justify-self are load-bearing: every parent here is a flex column
   (.page-hero__text, .hero__text) or a grid, and a stretched replaced element drops
   its intrinsic ratio — width:auto then resolves to the parent's full width and
   smears the mark. Same reason .stack > img already carries this guard. */
.maru-mark, .maru-lockup { align-self: flex-start; justify-self: start; }
.maru-mark { display: block; height: 24px; width: auto; }
.maru-lockup { display: block; height: 34px; width: auto; }
@media (max-width: 640px) { .maru-lockup { height: 26px; } }

/* MARU lockup over the lineup image (Home slide 2). Measured, not assumed: the image
   is mid-tone across every region (mean 102–160), so neither navy nor white holds on
   it unaided. The design system's sanctioned device for a mark over imagery is an
   ink-navy gradient — contained to the bottom band here, so the image is not washed.
   White lockup on that composite measures ~14:1.
   The height/width here must out-specify .hero__panel img { width:100%; height:100%;
   object-fit:cover }, which would otherwise stretch the mark to fill the panel. */
.hero__panel--marked::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(to top, rgba(4, 32, 63, 0.88), rgba(4, 32, 63, 0)); pointer-events: none; }
.hero__panel .hero__mark { position: absolute; left: 32px; bottom: 28px; z-index: 1; height: 40px; width: auto; object-fit: contain; }
@media (max-width: 640px) { .hero__panel .hero__mark { left: 20px; bottom: 20px; height: 30px; } }

/* Leadership — a supporting line under the engineering bench, not the main event. */

/* ---- final round (2026-08-28): head icons, humanoid figure, key-features grid, neutral tiles ---- */
.ico--40 { width: 40px; height: 40px; }
.ico--48 { width: 48px; height: 48px; }
svg.ico--40 { display: block; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* Home Problem — deck composition: humanoid centred behind the cards, its eyes under the MISSING card's icon, torso continuing below, legs cropped */
.states-stage { position: relative; padding-top: 0; padding-bottom: 32px; overflow: hidden; }
.states-stage .states { position: relative; z-index: 1; }
.states-stage .state { align-items: center; text-align: center; }
.states-stage .state .state__tag { justify-content: center; }
.states-stage .state--missing { background: rgba(17, 17, 17, 0.85); }
.states-stage .pull { position: relative; z-index: 1; margin-top: 56px; display: inline-block; max-width: 100%; padding: 8px 18px 8px 20px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.states-figure { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); height: 560px; width: auto; z-index: 0; pointer-events: none; }
@media (max-width: 1024px) { .states-stage { padding-top: 0; padding-bottom: 0; overflow: visible; } .states-stage .state--missing { background: var(--ink); } .states-stage .pull { display: block; background: none; padding: 0 0 0 24px; backdrop-filter: none; -webkit-backdrop-filter: none; } .states-figure { position: static; transform: none; height: auto; max-width: 280px; display: block; margin: 24px auto 0; } }
/* Neutral image tile — Healthcare scene pending */
.app__tile { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--band); color: var(--ink); }
.app__tile--split { aspect-ratio: 3 / 2; background: #fff; border: 1px solid var(--line); }

/* Embedded video (Home Key features, review #5 2026-08-31) — 16:9 frame the iframe fills */
.video__frame { position: relative; aspect-ratio: 16 / 9; background: #111; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }