/* =====================================================================
   MESA QUANTUM — REVAMP OPTION A · "STRUCTURE"
   Site stylesheet. Loads LAST, after:
     ds/tokens/palette.css → ds/tokens/core.css →
     ds/themes/direction-a-structure.css → ds/motifs/motifs.css →
     ds/components/components.css

   Everything here is either (a) a retuned structural token the system
   invites a direction to set, or (b) a pattern the system does not
   ship. Semantic roles only — no raw hex, no --mqn-* reaches into the
   palette from this file.

   The idea: an instrument-maker's annual report. A numbered section
   index, a standing left rail, hairline rules instead of cards, and
   type doing the work photography cannot do — because Mesa Quantum has
   two publishable photographs and one publishable chart, and a hero
   that needs a picture is a hero that cannot ship.
   ===================================================================== */

:root {
  /* Density is the argument of this direction. The system default is
     1280px; the Lockheed anchor runs 1600 and reads like a broadsheet
     partly because of it. 1400 is the widest the shipped type scale
     holds without the measure going slack. Recorded in README.md. */
  --ds-container: 1400px;

  /* Direction A's theme sets a generous 4.5–10rem section rhythm. Pulled in:
     the Lockheed anchor reads mature because it is DENSE, and this direction
     fails if it reads thin. Retuned here rather than in the theme file, which
     is shared. */
  --ds-section-y: clamp(4rem, 2.6rem + 5.4vw, 8rem);

  /* The standing left rail: section ordinal + label. */
  --mq-rail: 13rem;
  --mq-rail-gap: var(--ds-space-7);
}

/* ---------------------------------------------------------------
   1 · Rules — the connective tissue of the whole layout
   --------------------------------------------------------------- */
.mq-rule {
  height: var(--ds-rule-weight, 1px);
  background: var(--ds-line);
  border: 0;
  margin: 0;
}
.mq-rule--strong { background: var(--ds-line-strong); }

/* ---------------------------------------------------------------
   2 · Header — hairline, sticky, no JavaScript anywhere
   --------------------------------------------------------------- */
.ds-header__inner { flex-wrap: wrap; row-gap: var(--ds-space-3); padding-block: var(--ds-space-3); }
.ds-header__logo img { height: 26px; }

/* The system hides the nav below 900px and expects a JS drawer. This
   build runs no JavaScript, so the nav wraps instead of disappearing. */
.ds-nav {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--ds-space-2);
  column-gap: var(--ds-space-5);
  margin-inline-start: auto;
}
.ds-nav a:not(.ds-btn) {
  position: relative;
  padding-block: var(--ds-space-1);
  letter-spacing: 0.01em;
}
/* A rule under the current page, not a colour wash. */
.ds-nav a:not(.ds-btn)[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: var(--ds-rule-weight, 1px);
  background: var(--ds-line-strong);
}
.ds-nav .ds-btn { padding: 0.6em 1.1em; }

@media (max-width: 620px) {
  /* NOT a defect, and this comment is here so nobody "fixes" it again.
     A headless render at 390 appeared to show the Career Opportunities
     button clipped by the right edge. It is not: headless Chrome on macOS
     clamps its layout viewport to a 500px minimum and then crops the
     screenshot to the width you asked for, so what looked like an overflow
     was the right-hand 110px of a 500px layout being cut off by the crop.
     Measured at a genuine 390 — the page loaded in a 390px-wide iframe —
     `document.documentElement.scrollWidth` is 390 and the button sits at
     191..369. The auto margin stays. */
  .ds-nav { width: 100%; margin-inline-start: 0; column-gap: var(--ds-space-4); }
  .ds-nav .ds-btn { margin-inline-start: auto; }
}

/* ---------------------------------------------------------------
   3 · Buttons — Lockheed's hard state swap, not a soft fade.
        Fill and text invert completely on hover and focus.
   --------------------------------------------------------------- */
.ds-btn--primary { border-color: var(--ds-accent); }
.ds-btn--primary:hover,
.ds-btn--primary:focus-visible {
  background: var(--ds-bg);
  color: var(--ds-accent);
  border-color: var(--ds-accent);
}
.ds-btn--ghost:hover,
.ds-btn--ghost:focus-visible {
  background: var(--ds-ink);
  color: var(--ds-ink-inverse);
  border-color: var(--ds-ink);
}

/* ---------------------------------------------------------------
   4 · The masthead / hero
   --------------------------------------------------------------- */
.mq-hero { position: relative; overflow: hidden; border-bottom: var(--ds-rule-weight,1px) solid var(--ds-line); }
.mq-hero .motif-outline {
  inset: -14% 0 -14% auto;
  width: min(46%, 620px);
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%);
          mask-image: linear-gradient(to left, #000 30%, transparent 100%);
}
.mq-hero > .ds-container { position: relative; z-index: var(--ds-z-content); }

/* Top line of the masthead: category on the left, where the company
   operates on the right. Real information, not ornament — and it is
   what makes the right-hand third of the hero earn its space. */
.mq-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-4);
  border-top: var(--ds-rule-weight,1px) solid var(--ds-line-strong);
}
.mq-masthead p { margin: 0; }
.mq-locations {
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-ink-faint);
}
.mq-hero .ds-eyebrow { margin: 0; color: var(--ds-ink); }

.mq-hero__body { padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(2.5rem, 2rem + 4vw, 5rem); }
.mq-hero h1 {
  font-size: var(--ds-text-4xl);
  font-weight: var(--ds-display-weight);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-display);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 0 var(--ds-space-6);
}
.mq-hero__sub {
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink-muted);
  max-width: 54ch;
  margin: 0 0 var(--ds-space-6);
  text-wrap: pretty;
}
.mq-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }

/* Interior pages get the same masthead, one notch quieter. */
.mq-hero--page .mq-hero__body { padding-block: clamp(2.5rem,1.5rem + 4vw,4.5rem) clamp(2rem,1.5rem + 3vw,3.5rem); }
.mq-hero--page h1 { font-size: var(--ds-text-3xl); max-width: 22ch; }

/* ---------------------------------------------------------------
   4b · THE MEDIA HERO — a cross-fading image sequence, CSS only.

   The ask was a hero like Lockheed Martin's: a few images depicting an
   application of one of the capabilities, cycling. What that reference
   actually is, measured rather than remembered, is in
   docs/website-revamp/design/hero-media-plan.md. Four decisions here come
   straight out of that measurement, and each one is a departure:

   1 · THREE STILLS, NOT SIX SHOTS OF VIDEO. The reference runs six shots
       at ~2.0 s on hard cuts, and every shot carries a camera push or a
       subject crossing frame — the motion inside the shot is what makes a
       hard cut land. Stills have no internal motion, so a hard cut between
       them reads as a fault. Each frame is held 4 s and dissolved over
       0.72 s instead. The whole hero is 285 KB of WebP against the
       reference's 4.29 MB of H.264 (479 KB of which is an audio track on
       a permanently muted element).

   2 · A REAL SCRIM. The reference sets white type directly on its footage
       with `background: 0` and no gradient. Sampling the region its
       headline occupies, four times a second across the loop, the
       brightest frames put white type near 2.3:1 — under the 3:1 floor for
       large text, for about a sixth of every loop. The scrim below is
       sized against the BRIGHTEST pixel any of our three frames can put
       behind the headline, not against the average, and it is measured by
       rendering rather than asserted here. See README.md.

   3 · REDUCED MOTION ACTUALLY STOPS IT. The reference's stylesheet
       contains 17 prefers-reduced-motion blocks and not one of them
       touches the hero — and CSS cannot pause a <video> anyway. Here the
       cross-fade is declared INSIDE a `no-preference` query, so for a
       visitor who has asked for stillness the animation is never created
       rather than created and then cancelled. What they get is frame 1,
       permanently: a composed, complete hero on its own.

   4 · THE FIRST FRAME DOES NOT WAIT ON THE OTHERS. Frame 1 is the only
       one with opacity in the base rules, the only one fetched at high
       priority, and the only one that is not lazy. Frames 2 and 3 arriving
       late costs nothing; frame 1 arriving late would cost the hero.

   Under 820px the type leaves the image entirely and sits on the solid
   deep ground beneath it. That is the one thing the reference's mobile
   layout gets right, and it makes the contrast question moot there —
   unlike the reference, which downloads all 4.29 MB to a phone and then
   hides its subhead below 768px.
   --------------------------------------------------------------- */
.mq-hero--media {
  background: var(--ds-surface-deep);
  color: var(--ds-deep-ink);
  border-bottom: 0;
  isolation: isolate;
}
.mq-hero__media {
  position: relative;
  overflow: hidden;
  background: var(--ds-surface-deep);
  aspect-ratio: 3 / 2;
}
.mq-hero__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
}
/* Frame 1 is the resting state, and it is the ONLY frame with opacity in
   the base rules. No animation, no JavaScript and no media query can take
   it away; the others can only be added on top of it. */
.mq-hero__frame--1 { opacity: 1; }
.mq-hero__scrim { position: absolute; inset: 0; }

/* Type on the deep ground, beneath the image, below 820px. */
.mq-hero--media > .ds-container { padding-bottom: var(--ds-space-7); }
.mq-hero--media .mq-masthead { border-top-color: var(--ds-deep-line); }
.mq-hero--media .ds-eyebrow { color: var(--ds-deep-ink); }
.mq-hero--media .mq-locations { color: var(--ds-deep-ink-faint); }
.mq-hero--media h1 { font-size: clamp(2.25rem, 1.45rem + 2.3vw, 3.4rem); max-width: 20ch; }
.mq-hero--media .mq-hero__sub { color: var(--ds-deep-ink-muted); max-width: 46ch; }
.mq-hero--media .ds-btn--ghost { color: var(--ds-deep-ink); border-color: var(--ds-deep-line); }
.mq-hero--media .ds-btn--ghost:hover,
.mq-hero--media .ds-btn--ghost:focus-visible {
  background: var(--ds-deep-ink);
  color: var(--ds-surface-deep);
  border-color: var(--ds-deep-ink);
}
.mq-hero--media :focus-visible { outline-color: var(--ds-focus-on-deep); }

/* The scrim below 820px only has to soften the seam between the image and
   the deep band the type sits on. It is not carrying any contrast. */
.mq-hero__scrim {
  background: linear-gradient(to top,
    var(--ds-surface-deep) 0%,
    color-mix(in srgb, var(--ds-surface-deep) 30%, transparent) 22%,
    transparent 55%);
}

@media (min-width: 820px) {
  /* Type moves onto the image. Everything from here down is the contrast
     apparatus. */
  .mq-hero--media {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(32rem, 50vw, 44rem);
  }
  .mq-hero__media { position: absolute; inset: 0; aspect-ratio: auto; z-index: 0; }
  .mq-hero--media > .ds-container { padding-bottom: var(--ds-space-8); }

  /* DEFECT FIXED 2026-08-27, caught by measuring the rendered page at 860px
     rather than only at 1440.

     The scrim below is defined in percentages of the viewport. The text
     column was defined in ch — a character measure. Those two do not track
     each other: 20ch of 3.4rem type ends at 54% of a 1440px viewport but at
     69% of an 860px one, which put the headline out past the scrim entirely.
     Measured there, frame 1 gave the headline 2.46:1 and the subhead 4.31:1
     — a straight fail, and exactly the failure mode this hero was built to
     avoid in the reference site.

     Capping the measure at 52% of the container pins the right edge of the
     type to ~52% of the viewport at EVERY width from 820px up, because the
     container is the viewport minus two gutters until 1400px and is centred
     after that. The ch value still wins wherever it is the smaller of the
     two, which is every viewport above about 1350px. */
  .mq-hero--media h1 { max-width: min(20ch, 52%); }
  .mq-hero--media .mq-hero__sub { max-width: min(46ch, 52%); }

  /* Three stacked gradients, all of them the same colour as the deep
     surface so the hero and the statement band are the same dark.
     color-mix(… N%, transparent) is that colour at alpha N — this file
     deals in roles, and a scrim has no role of its own to reach for.

       · band 1 is the type column. It holds >= 0.80 alpha out to 54% of
         the viewport, and the type is capped at 52% of the container so its
         right edge lands inside that at every width from 820px up, then falls away so the picture is a
         picture on the right third of the frame. Eight stops rather than
         four: with four, the change of slope showed as a soft vertical
         edge wherever a frame had flat sky behind it, and rendering at
         1440 is how that was caught;
       · band 2 weights the bottom, where the subhead and the buttons are.

     The masthead line is NOT covered by either of them. It runs the full
     container width — the locations sit at the far right, over the clear
     part of the picture — so it gets its own bar instead, below. A third
     full-width gradient across the top was tried first and left a visible
     horizontal seam wherever a frame had flat sky behind it.

     Alpha 0.84 of #0D0614 over a PURE WHITE pixel — the worst case any
     frame can present — composites to about #383440, which is 10.9:1
     against white body type and 5.7:1 against --ds-deep-ink-faint, the
     lightest role used here. Those are computed; the measured numbers,
     taken off the rendered page for all three frames, are in README.md. */
  /* The masthead bar: a strip of the deep ground exactly as tall as the
     masthead, so the eyebrow on the left and the locations on the right are
     both on a known colour rather than on whatever the picture is doing at
     that height. */
  .mq-hero--media .mq-masthead {
    background: color-mix(in srgb, var(--ds-surface-deep) 82%, transparent);
    padding-inline: var(--ds-space-4);
    margin-inline: calc(-1 * var(--ds-space-4));
  }
  .mq-hero__scrim {
    background:
      linear-gradient(to right,
        color-mix(in srgb, var(--ds-surface-deep) 95%, transparent) 0%,
        color-mix(in srgb, var(--ds-surface-deep) 91%, transparent) 26%,
        color-mix(in srgb, var(--ds-surface-deep) 86%, transparent) 44%,
        color-mix(in srgb, var(--ds-surface-deep) 80%, transparent) 54%,
        color-mix(in srgb, var(--ds-surface-deep) 58%, transparent) 62%,
        color-mix(in srgb, var(--ds-surface-deep) 30%, transparent) 71%,
        color-mix(in srgb, var(--ds-surface-deep) 14%, transparent) 83%,
        color-mix(in srgb, var(--ds-surface-deep) 10%, transparent) 100%),
      linear-gradient(to top,
        color-mix(in srgb, var(--ds-surface-deep) 55%, transparent) 0%,
        color-mix(in srgb, var(--ds-surface-deep) 20%, transparent) 38%,
        transparent 68%);
  }
}

/* The cross-fade itself. 12 s, three frames, 4 s of hold each and a 0.72 s
   dissolve. The negative delay on frame 1 starts it already held, so there
   is no flash of an empty hero on the first paint; frames 2 and 3 sit in
   their positive delay, which means the base rules apply and they are
   invisible until their turn.

   One @keyframes, one declared motion source. Declaring three would be
   three entries in motion-manifest.json with the same 'depicts', which the
   audit rejects — correctly, because they are one animation. */
@media (prefers-reduced-motion: no-preference) {
  .mq-hero__frame { animation: mq-hero-crossfade 12s linear infinite; }
  .mq-hero__frame--1 { animation-delay: -0.72s; }
  .mq-hero__frame--2 { animation-delay: 3.28s; }
  .mq-hero__frame--3 { animation-delay: 7.28s; }
}
@keyframes mq-hero-crossfade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  33%  { opacity: 1; }
  39%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Belt and braces. ds/tokens/core.css already collapses every animation
   duration under reduced motion, but the guard that matters for this hero
   is that the sequence is never declared in the first place (above), and
   this block says so where a reader of THIS file will find it. */
@media (prefers-reduced-motion: reduce) {
  .mq-hero__frame { animation: none !important; }
  .mq-hero__frame--1 { opacity: 1; }
  .mq-hero__frame--2,
  .mq-hero__frame--3 { opacity: 0; }
}

/* The credit strip. It sits UNDER the hero, on the light ground, set like
   the caption of a plate — because that is what it is. Putting it there
   rather than inside the hero keeps the fine print off the photograph,
   where fine print is exactly what a scrim protects worst. */
.mq-hero__credit { background: var(--ds-bg); border-bottom: var(--ds-rule-weight,1px) solid var(--ds-line); }
.mq-hero__credit p {
  margin: 0;
  padding-block: var(--ds-space-4);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink-muted);
  max-width: 96ch;
  text-wrap: pretty;
}
.mq-hero__credit b {
  color: var(--ds-ink);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  font-size: var(--ds-text-xs);
  margin-right: 0.75em;
}

/* ---------------------------------------------------------------
   5 · The numbered section index — the structural signature.
        [01] · WHAT WE DO   in a standing left rail, hairline between
        rail and column. The device is Lockheed's; the guidelines note
        it is unclaimed and that Direction A is its natural home.
   --------------------------------------------------------------- */
.mq-sec { border-top: var(--ds-rule-weight,1px) solid var(--ds-line); padding-block: var(--ds-section-y); }
.mq-sec--alt { background: var(--ds-bg-alt); }
.mq-sec--first { border-top: 0; }

.mq-sec__grid { display: grid; gap: var(--ds-space-5); }
@media (min-width: 1000px) {
  .mq-sec__grid {
    grid-template-columns: var(--mq-rail) minmax(0, 1fr);
    column-gap: var(--mq-rail-gap);
  }
  .mq-sec__rail {
    border-right: var(--ds-rule-weight,1px) solid var(--ds-line);
    padding-right: var(--mq-rail-gap);
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}
.mq-sec__rail { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.mq-idx {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ds-accent);
  margin: 0;
}
.mq-label {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-ink-muted);
  margin: 0;
}
.mq-sec__body > * + * { margin-top: var(--ds-space-6); }
.mq-sec__body h2 { max-width: 26ch; }
.mq-lead {
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink-muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.mq-body { max-width: 68ch; text-wrap: pretty; }
/* Prose left, the capability's own pictogram in the margin at the right —
   the one drawing on the page, and it depicts the thing the page is about. */
.mq-figrow { display: grid; gap: var(--ds-space-6); align-items: start; }
@media (min-width: 900px) {
  .mq-figrow { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-space-8); }
  .mq-figrow .mq-pict--lg { margin-top: var(--ds-space-1); }
}
.mq-body p { margin: 0 0 var(--ds-space-4); }
.mq-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   6 · Columns, not cards.
        No rounded boxes, no shadows, no left-border accents. Columns
        separated by hairlines — the newspaper/report answer.
   --------------------------------------------------------------- */
.mq-cols { display: grid; gap: 0; }
.mq-cols > * {
  padding-block: var(--ds-space-6);
  border-top: var(--ds-rule-weight,1px) solid var(--ds-line);
}
@media (min-width: 820px) {
  .mq-cols--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mq-cols--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mq-cols > * { border-top: 0; border-left: var(--ds-rule-weight,1px) solid var(--ds-line); padding: 0 var(--ds-space-6); }
  .mq-cols > *:first-child { border-left: 0; padding-left: 0; }
  .mq-cols > *:last-child { padding-right: 0; }
}
.mq-cols h3 { margin: var(--ds-space-4) 0 var(--ds-space-2); }
.mq-cols p { margin: 0 0 var(--ds-space-4); color: var(--ds-ink-muted); text-wrap: pretty; }

/* ---------------------------------------------------------------
   7 · Capability graphics.
        The 48x48 pictograms this build shipped first are gone. The
        design system now carries nine 360x240 line drawings, one per
        named subject, drawn to a single spec: uniform 1.5 stroke, three
        opacity tiers for hierarchy (never stroke weight), semantic
        dashes, no baked text, no ids. They are inlined so every mark
        resolves currentColor against the page.

        Sizing is the only thing this file decides. A 360x240 drawing at
        64px reads as a smudge; the sizes below are the smallest each
        placement tested legible at.
   --------------------------------------------------------------- */
.g { color: var(--ds-ink); }

/* Homepage teaser column. */
.g--tile { max-width: 15rem; margin-bottom: var(--ds-space-2); }

/* Beside body copy, in the right-hand margin of a two-column figure row. */
.mq-figrow__g { max-width: 24rem; }
@media (min-width: 900px) { .mq-figrow__g { width: 24rem; margin-top: var(--ds-space-1); } }

/* First column of a capability register row. */
.mq-reg__fig { max-width: 15rem; }

/* ---------------------------------------------------------------
   8 · The capability index — a ruled register, one row per entry
   --------------------------------------------------------------- */
.mq-reg { border-top: var(--ds-rule-weight,1px) solid var(--ds-line-strong); }
.mq-reg__row {
  display: grid;
  gap: var(--ds-space-5);
  padding-block: var(--ds-space-7);
  border-bottom: var(--ds-rule-weight,1px) solid var(--ds-line);
  align-items: start;
}
@media (min-width: 820px) {
  /* Was 5rem for the old 64px pictogram. The graphics are 3:2 line work
     and need a column, not a slot. */
  .mq-reg__row { grid-template-columns: 15rem minmax(0, 20rem) minmax(0, 1fr); column-gap: var(--ds-space-6); }
}
.mq-reg__row h3 { margin: 0 0 var(--ds-space-2); }
.mq-link { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.45em; }
.mq-link span { color: var(--ds-accent); font-weight: var(--ds-weight-medium); }
.mq-link:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.mq-reg__row p { margin: 0; color: var(--ds-ink-muted); text-wrap: pretty; }
.mq-reg__more { display: inline-block; margin-top: var(--ds-space-3); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); color: var(--ds-accent); text-decoration: none; }
.mq-reg__more:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* Applications, set as a ruled list rather than pills — an
   application is a claim, not a tag. */
.mq-apps { list-style: none; margin: var(--ds-space-4) 0 0; padding: 0; }
.mq-apps li {
  padding-block: var(--ds-space-2);
  border-top: var(--ds-rule-weight,1px) solid var(--ds-line);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-muted);
  display: flex;
  gap: var(--ds-space-3);
}
.mq-apps b { font-weight: var(--ds-weight-semibold); color: var(--ds-ink); flex: 0 0 13rem; }
@media (max-width: 620px) { .mq-apps li { flex-direction: column; gap: var(--ds-space-1); } }

/* ---------------------------------------------------------------
   9 · Plates — the two real photographs, framed and captioned the way
        a technical report plates its figures. Full colour, no scrim,
        no duotone: in both images the colour is measurement (the
        laser spot, the die array), so removing it removes information.
   --------------------------------------------------------------- */
.mq-plates { display: grid; gap: var(--ds-space-6); }
@media (min-width: 820px) { .mq-plates--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* A single plate never runs past the native size of the file behind it —
   700px. Blowing a 700px photograph up to a 1220px column is the one way to
   make a real photograph look like a bad one. */
.mq-plates--one { max-width: 700px; }
.mq-plate { margin: 0; }
.mq-plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--ds-rule-weight,1px) solid var(--ds-line-strong); }
.mq-plate figcaption { margin-top: var(--ds-space-3); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); text-wrap: pretty; }
/* Generated illustrations. Everything here exists to keep them SUBORDINATE
   to the two real photographs: a lighter frame, a 3:2 crop that does not
   match the plates' 4:3, and the provenance sentence set as its own line in
   the faint ink. The word in the caption does the rest — "Plate" is a
   photograph of Mesa Quantum hardware, "Illustration" is not a photograph
   of anything. */
.mq-plates--illus { max-width: 52rem; }
.mq-plate--gen img { aspect-ratio: 3 / 2; border-color: var(--ds-line); }
.mq-plate__gen {
  display: block;
  margin-top: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink-faint);
}
/* A note that introduces the two real plates, and the note a capability
   page carries when there is no illustration for it. */
.mq-plates__note { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); max-width: 66ch; }
/* A figure needs more air beneath it than a paragraph does — its caption is
   already set small and tight, and a ruled list starting 2rem under a two-line
   provenance note reads as part of the caption. */
.mq-sec__body > .mq-plates + *,
.mq-sec__body > .mq-plates__none + * { margin-top: var(--ds-space-7); }
.mq-plates__none {
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-muted);
  max-width: 66ch;
  border-left: 2px solid var(--ds-line);
  padding-left: var(--ds-space-4);
}

.mq-plate figcaption b {
  display: block;
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-ink);
  margin-bottom: var(--ds-space-1);
}

/* ---------------------------------------------------------------
   10 · Stats — figures set large, label beneath, hairline above
   --------------------------------------------------------------- */
.mq-stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mq-stat { padding-block: var(--ds-space-5); border-top: var(--ds-rule-weight,1px) solid var(--ds-line-strong);
            display: flex; flex-direction: column; }
@media (min-width: 720px) { .mq-stat { padding-right: var(--ds-space-6); } }
.mq-stat__v { font-size: var(--ds-text-2xl); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-tracking-display); line-height: 1.02; text-wrap: balance; }
.mq-stat__v--word { font-size: var(--ds-text-xl); }
.mq-stat__l { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); margin-top: auto; padding-top: var(--ds-space-4); max-width: 26ch; }

/* ---------------------------------------------------------------
   11 · Institution row — names set as text. There is no confirmed
        partner logo set (open question Q9), and inventing one would
        be worse than setting the names honestly.
   --------------------------------------------------------------- */
.mq-insts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 720px) { .mq-insts { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mq-insts li {
  padding-block: var(--ds-space-4);
  border-top: var(--ds-rule-weight,1px) solid var(--ds-line);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  letter-spacing: 0.01em;
  color: var(--ds-ink);
}
@media (min-width: 720px) { .mq-insts li { padding-right: var(--ds-space-5); } }

/* ---------------------------------------------------------------
   11b · The statement band — the single deep surface on a light page.
        One full-bleed dark band between the capability index and the
        evidence, carrying the company's own positioning line. It gives
        the homepage the two-tone alternation the reference sites use,
        without turning the direction into a dark one.
   --------------------------------------------------------------- */
.mq-statement {
  background: var(--ds-surface-deep);
  color: var(--ds-ink-inverse);
  padding-block: clamp(2.75rem, 2rem + 3vw, 5rem);
}
.mq-statement p {
  margin: 0;
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-display);
  max-width: 34ch;
  text-wrap: balance;
}
@media (min-width: 1000px) {
  .mq-statement p { margin-inline-start: calc(var(--mq-rail) + var(--mq-rail-gap)); }
}

/* ---------------------------------------------------------------
   12 · Closing statement
   --------------------------------------------------------------- */
.mq-closing h2 { font-size: var(--ds-text-3xl); max-width: 24ch; }

/* ---------------------------------------------------------------
   13 · Definition list used for locations, product areas, newsroom
   --------------------------------------------------------------- */
.mq-defs { margin: 0; }
.mq-def { padding-block: var(--ds-space-6); border-top: var(--ds-rule-weight,1px) solid var(--ds-line); display: grid; gap: var(--ds-space-3); }
.mq-def:first-child { border-top-color: var(--ds-line-strong); }
@media (min-width: 900px) { .mq-def { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); column-gap: var(--ds-space-6); } }
.mq-def h3 { margin: 0; }
.mq-def p { margin: 0; color: var(--ds-ink-muted); max-width: 64ch; text-wrap: pretty; }
.mq-def__note { font-size: var(--ds-text-sm); }

/* ---------------------------------------------------------------
   14 · The wavelength-vs-temperature readout on the VCSEL page.
        A measured result, built as inline SVG with real text rather than a
        picture of a chart: monochrome plus the accent, where the accent
        marks the measured trace and nothing else. The rubidium D1 target
        line is drawn muted, in the same ink as its label, because it is a
        reference we are working toward rather than a Mesa Quantum result.
        That is the whole colour rule for readouts on this site.
   --------------------------------------------------------------- */
.mq-figure { margin: 0; }
.mq-figure svg { width: 100%; height: auto; display: block; color: var(--ds-ink); }
.mq-figure figcaption { margin-top: var(--ds-space-4); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); max-width: 64ch; text-wrap: pretty; }
.mq-axis { stroke: var(--ds-line-strong); fill: none; stroke-width: 1; }
.mq-tick { stroke: var(--ds-line); fill: none; stroke-width: 1; }
.mq-target { stroke: var(--ds-ink-muted); fill: none; stroke-width: 1; stroke-dasharray: 4 3; }
.mq-mark { stroke: var(--ds-accent); fill: none; stroke-width: 2; }
.mq-dot { fill: var(--ds-accent); }
.mq-svgtext { fill: var(--ds-ink); font-family: var(--ds-font); font-size: 15px; }
.mq-svgtext--muted { fill: var(--ds-ink-muted); font-size: 14px; letter-spacing: 0.02em; }
.mq-svgtext--mark { fill: var(--ds-accent); font-family: var(--ds-font-mono); font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------
   15 · Newsroom register
   --------------------------------------------------------------- */
.mq-news { list-style: none; margin: 0; padding: 0; border-top: var(--ds-rule-weight,1px) solid var(--ds-line-strong); }
.mq-news li { padding-block: var(--ds-space-5); border-bottom: var(--ds-rule-weight,1px) solid var(--ds-line); display: grid; gap: var(--ds-space-2); }
@media (min-width: 900px) { .mq-news li { grid-template-columns: 11rem minmax(0,1fr); column-gap: var(--ds-space-6); align-items: baseline; } }
.mq-news__kind { font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-eyebrow); text-transform: uppercase; color: var(--ds-ink-faint); }
.mq-news__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-tight); margin: 0; text-wrap: pretty; }

/* ---------------------------------------------------------------
   16 · Contact
   --------------------------------------------------------------- */
.mq-contact a { color: var(--ds-accent); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.mq-contact__mail { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-tight); }

/* ---------------------------------------------------------------
   17 · Footer
   --------------------------------------------------------------- */
.ds-footer { border-top: 0; }
.ds-footer__cols { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ds-space-7) var(--ds-space-6); }
.mq-foot__brand { display: grid; gap: var(--ds-space-4); }
.mq-foot__brand img { height: 26px; width: auto; filter: var(--ds-logo-filter-footer, brightness(0) invert(1)); }
.mq-foot__statement { margin: 0; max-width: 34ch; line-height: var(--ds-leading-normal); }
.mq-foot__title {
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 65%, transparent);
  margin: 0 0 var(--ds-space-4);
}
.mq-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); font-size: var(--ds-text-sm); }
.mq-foot__list address { font-style: normal; line-height: var(--ds-leading-normal); }
.ds-footer__bottom { font-size: var(--ds-text-xs); letter-spacing: 0.02em; }
.mq-foot__opt { color: color-mix(in srgb, currentColor 70%, transparent); }

/* ---------------------------------------------------------------
   18 · Breadcrumb
   --------------------------------------------------------------- */
.mq-crumb { font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-eyebrow); text-transform: uppercase; color: var(--ds-ink-faint); margin: 0 0 var(--ds-space-4); }
.mq-crumb a { color: inherit; text-decoration: none; }
.mq-crumb a:hover { color: var(--ds-ink); }

/* ---------------------------------------------------------------
   19 · Prose links inside body copy
   --------------------------------------------------------------- */
.mq-body a, .mq-lead a, .mq-def p a { color: var(--ds-accent); }

/* ---------------------------------------------------------------
   20 · Print — the register should survive being printed, because
        this audience prints things.
   --------------------------------------------------------------- */
@media print {
  .ds-header, .ds-skip-link { display: none; }
  .ds-footer { background: none; color: var(--ds-ink); }
  .mq-sec__rail { border: 0; }
}