@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
src:url("/assets/manrope-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
src:url("/assets/manrope-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Melbourne Bionics — website styles.
 *
 * Colours are sampled from Concepts.pdf page 3: orange #FF5C00, ink #121212.
 * The ground there is a cool near-white; it is warmed to a beige here at the
 * client's direction, so every neutral is mixed warm to sit against it.
 *
 * The "matrix" layout from the deck is a page frame: lockup top left, page
 * mark top right, headline bottom left, over a faint dot field with one orange
 * crosshair. The deck's corner brand mark is dropped: the site header already
 * carries the lockup on every page. It is built once, in
 * .mb-frame, and reused by every page hero.
 *
 * ── Scoping ──────────────────────────────────────────────────────────────
 * This file is pasted into Squarespace's Custom CSS panel, where it shares a
 * document with Squarespace's own stylesheet. Every component rule is therefore
 * scoped under .mb, the wrapper each Code Block opens with. Only two sections
 * are deliberately global: the design tokens, and the SQUARESPACE CHROME block
 * that restyles the native header, nav and footer. Nothing else may use a bare
 * element selector, or it will leak into the Squarespace editor UI.
 */

/* ═══ 1. tokens (global, inert on their own) ═════════════════════════════ */

:root {
  --mb-beige: #f3efe8;
  --mb-beige-2: #ebe5db;
  --mb-beige-3: #e0d9cb;
  --mb-paper: #fbf9f5;
  --mb-ink: #121212;
  --mb-ink-2: #4a4741;
  --mb-ink-3: #837d72;
  --mb-orange: #ff5c00;
  --mb-orange-dk: #e85100;
  --mb-orange-soft: #fff1e8;
  --mb-dark: #121212;
  --mb-dark-2: #1d1d1d;
  --mb-dark-line: #2e2e2e;

  --mb-line: rgba(18, 18, 18, 0.13);
  --mb-line-soft: rgba(18, 18, 18, 0.08);

  --mb-sans: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto,
    system-ui, sans-serif;

  --mb-col: 1200px;
  --mb-pad: clamp(20px, 4.5vw, 64px);
  /* Applied to the top and bottom of every section, so the gap between two of
     them is twice this. It started at 9vw, which put 252px between sections on
     a laptop and read as a break in the page rather than a rhythm.
     Now that every section carries a hairline rule, the boundary is drawn
     rather than implied, and the whitespace no longer has to do that work on
     its own: 4vw gives about 112px between sections at desktop. Pages like
     About, which run several short text sections in a row, feel composed
     instead of sparse. */
  --mb-sec: clamp(36px, 4vw, 60px);
  --mb-r: 14px;
  --mb-r-lg: 22px;
}

/* ═══ 2. SQUARESPACE CHROME ══════════════════════════════════════════════
 * Restyles the native header, navigation and footer so the platform chrome
 * matches the concept. Delete this whole block to hand the chrome back to the
 * Squarespace theme. Selectors are Squarespace 7.1 fluid-engine class names.
 * The sandbox preview reproduces the same structure, so what is reviewed
 * locally is what these rules produce on the live site.
 */

body {
  background-color: var(--mb-beige);
}

/* Site title, nav links and section backgrounds all inherit the beige ground. */
#siteWrapper,
.page-section,
footer.sections {
  background-color: var(--mb-beige);
}

/* ── the header ─────────────────────────────────────────────────────────
 *
 * The concept has no header bar: the lockup sits directly on the beige, top
 * left of the matrix, and the page reads as one surface.
 *
 * The proper fix is to set the header's section theme to a light one in the
 * Squarespace editor, which makes almost all of this unnecessary. These rules
 * are the belt to that braces, and they exist because Squarespace paints the
 * header through five stacked layers, taken from the live page's own markup:
 *
 *   .header-announcement-bar-wrapper   outer container
 *     .header-border                   border overlay
 *     .header-dropshadow               shadow overlay
 *     .header-blur-background          backdrop blur layer
 *     .header-background-solid         the solid colour, opacity-driven
 *     .header-background               the theme colour (theme-bg--primary)
 *
 * An earlier version of this block guessed at the structure and painted only
 * the outer container, which left a beige panel floating inside a black band.
 * Every layer has to be handled, and the overlays have to be cleared rather
 * than recoloured.
 */
.header-announcement-bar-wrapper,
.sqs-announcement-bar-dropzone,
.header-background,
.header-background-solid {
  background-color: var(--mb-beige) !important;
  background-image: none !important;
}
.header-border,
.header-dropshadow,
.header-blur-background {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* With the header set to Fixed, it has to reach the very top of the window.
   The five background layers are positioned inside
   .header-announcement-bar-wrapper, so padding on the *dropzone* above it
   leaves a strip at the top of the screen that the page scrolls through behind
   the header. Only that outer element needs clearing. */
.sqs-announcement-bar-dropzone {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* The wrapper keeps its own padding: its background covers it, so this is
   breathing room around the logo rather than a gap above the header. Clearing
   it here too, as an earlier version did, pinned the logo against the top edge
   of the window with space only underneath it. */
.header-announcement-bar-wrapper {
  margin-top: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
/* One pixel of insurance. At fractional device pixel ratios an element pinned
   to top:0 can still round to leave a hairline seam. */
.header-border,
.header-dropshadow,
.header-blur-background,
.header-background-solid,
.header-background {
  top: -1px !important;
}

/* Header height follows the logo, so capping the logo caps the band. */
.header-title-logo img,
.header-title-logo a {
  max-height: 46px !important;
  width: auto !important;
}

/* Nav and title in ink, whatever the theme would have made them. */
.header-title-text a,
.header-nav-item a,
.header-nav-folder-item a,
.header-menu-nav-item a,
.header-burger-btn {
  color: var(--mb-ink) !important;
}

/* Size as well as colour. Squarespace takes the nav size and the button's
   padding from Site Styles, which left the header at 93px tall with a 210 by
   86px button: about two and a half times the size the design calls for, and
   loud enough to compete with the page's own calls to action. */
.header-nav-item a,
.header-nav-folder-item a,
.header-menu-nav-item a {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}
.header-actions .btn,
.header-menu-cta .btn {
  font-size: 0.9rem !important;
  padding: 11px 22px !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
}

/* ── the mobile menu ────────────────────────────────────────────────────
 *
 * The overlay carries its own section theme, which here is black. Forcing the
 * nav links to ink for the desktop header therefore painted them near-black on
 * black, and left them invisible. The overlay is put on the site's own ground
 * instead, which both fixes the contrast and matches the design: the menu is
 * the page, not a separate dark surface.
 */
.header-menu,
.header-menu-bg {
  background: var(--mb-beige) !important;
}
.header-menu-nav-item a,
.header-menu-nav-item--external a {
  color: var(--mb-ink) !important;
  /* Squarespace sets this from the mobile nav style, which came through at
     nearly 32px. */
  font-size: 1.35rem !important;
  font-weight: 600 !important;
}
/* The menu's call to action takes the brand orange, not the theme's. */
.header-menu-cta .btn {
  background-color: var(--mb-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
}
.header-burger-btn .top-bun,
.header-burger-btn .patty,
.header-burger-btn .bottom-bun {
  background-color: var(--mb-ink) !important;
}

/* ── closing the seams between Code Blocks ──────────────────────────────
 *
 * Each Code Block is wrapped by Squarespace in its own section, content
 * wrapper and block container, every one of which contributes padding and
 * paints its own background. All of that sits *outside* the .mb div, so
 * between two blocks you get a strip of Squarespace's section colour and a
 * band of dead space, which reads as a seam where a section should simply
 * continue.
 *
 * These rules hand spacing and colour back to the markup: .mb-section already
 * carries the vertical rhythm and .mb-wrap the gutter, so Squarespace's own
 * copies are removed rather than fought.
 *
 * :has() scopes every rule to sections that actually contain this markup, so
 * nothing here touches a page built with native Squarespace blocks.
 */
.page-section:has(> * .mb),
.page-section:has(> * .mb) .section-background,
.page-section:has(> * .mb) .section-border {
  background: var(--mb-beige) !important;
  border: 0 !important;
}

/* Squarespace's gutter and vertical padding, replaced by .mb-wrap's own. */
.page-section:has(> * .mb) .content-wrapper,
.page-section:has(> * .mb) .sqs-layout,
.page-section:has(> * .mb) .fluid-engine {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.page-section:has(> * .mb) .fluid-engine {
  gap: 0 !important;
}

/* The fluid engine is a grid: blocks are placed on explicit row lines of about
   30px each, and the row span is whatever the block was dragged to in the
   editor rather than what its content needs. That leaves slack inside a block
   and gaps between blocks that no amount of section padding explains: on the
   contact page, one block ended at row 59 and the next began at 61, and the
   last block's rows ran 110px past the end of its own content, which is the
   gap that appears above the footer.

   These sections are a single column of full-width blocks, so the grid earns
   nothing. Reverting it to normal flow makes every block exactly as tall as
   its content and puts the order back under the markup's control, rather than
   depending on how precisely the blocks were positioned by hand. */
.page-section:has(> * .mb) .fluid-engine {
  display: block !important;
}
.page-section:has(> * .mb) .fluid-engine > .fe-block {
  grid-area: auto !important;
  width: 100% !important;
  max-width: none !important;
}

/* The per-block padding that shows up as a gap between consecutive blocks. */
.page-section:has(> * .mb) .sqs-block,
.page-section:has(> * .mb) .sqs-block-content,
.page-section:has(> * .mb) .sqs-block-code,
.page-section:has(> * .mb) .sqs-row,
.page-section:has(> * .mb) .col {
  padding: 0 !important;
  margin: 0 !important;
}

/* Section minimum heights are set for native content and leave dead space
   under a Code Block that is already exactly as tall as it needs to be. */
.page-section:has(> * .mb) {
  min-height: 0 !important;
  padding: 0 !important;
}

/* A dark block must reach the full width, not sit in a beige frame. */
.page-section:has(> * .mb-dark-host) {
  background: var(--mb-dark) !important;
}

/* The Squarespace header sits over the first section rather than above it, and
   the rule that zeroes section padding also removes the clearance the header
   was relying on. Without this the page mark in the top right of the hero
   disappears behind the header. Only the hero needs it: it is the one block
   that ever sits under the header.
   --header-height is Squarespace's own; the fallback covers themes that do not
   set it. */
.page-section:has(.mb-hero) .mb-hero {
  padding-top: calc(var(--header-height, 76px) + clamp(18px, 2.5vw, 40px)) !important;
}

.header-title-text a,
.header-nav-item a,
.header-nav-folder-item a {
  font-family: var(--mb-sans);
  letter-spacing: -0.015em;
}
.header-nav-item a {
  font-weight: 500;
}
.header-nav-item--active a {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--mb-orange);
}
.header-announcement-bar-wrapper {
  padding-inline: var(--mb-pad) !important;
}

/* Squarespace button blocks, so native CTAs match .mb-btn. */
.sqs-block-button-element--medium,
.sqs-block-button-element--large,
.header-actions .btn {
  font-family: var(--mb-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border-radius: 999px !important;
  background-color: var(--mb-orange) !important;
  color: #fff !important;
  border: 0 !important;
}
.sqs-block-button-element--medium:hover,
.sqs-block-button-element--large:hover,
.header-actions .btn:hover {
  background-color: var(--mb-orange-dk) !important;
}

/* ── native Form Blocks ─────────────────────────────────────────────────
 *
 * The pilot and contact forms are Squarespace Form Blocks, so that submissions
 * reach an inbox without a backend. A Form Block is a sibling of the Code
 * Blocks around it and cannot be wrapped by them: HTML tags do not span two
 * Code Blocks, because the browser closes anything left open at the end of
 * each. It is therefore styled where it sits.
 *
 * The section padding is zeroed by the seam rules above, so the block supplies
 * its own gutter and rhythm, and the heading block before it is tightened so
 * the two read as one unit.
 */
.mb-form-head {
  padding-bottom: 22px !important;
}
/* !important is needed, not decorative: the seam rules above zero margin and
   padding on every .sqs-block with !important, and a Form Block is one. Without
   it the card loses its gutter and sits flush against the left edge of the
   window while the heading above it stays within the content column. */
.page-section:has(.mb) .sqs-block-form {
  max-width: var(--mb-col) !important;
  margin-inline: auto !important;
  padding: 0 var(--mb-pad) var(--mb-sec) !important;
  box-sizing: border-box;
}
.page-section:has(.mb) .sqs-block-form .form-wrapper {
  background: var(--mb-paper);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-r-lg);
  padding: clamp(22px, 2.8vw, 40px);
}
/* Squarespace lays some form fields out in halves; one column reads better
   against this measure and matches the sandbox. */
.page-section:has(.mb) .sqs-block-form .field-list .field.half {
  width: 100%;
  float: none;
}

/* Squarespace overlays every field with a span for its hover and focus
   animation. The overlay is exactly the same box as the input, but carries a
   29px pill radius against these 10px fields and a heavy 2px near-black
   border, so on hover its corners arc outside the field and read as a stray
   ring clipping the input. The design already has its own focus treatment, so
   the overlay goes rather than being realigned. */
.page-section:has(.mb) .sqs-block-form .form-input-effects-border {
  display: none !important;
}

/* What replaces it: the field border darkens a little on hover, and takes the
   same orange ring on focus as every other control on the site. */
.page-section:has(.mb) .sqs-block-form input:hover,
.page-section:has(.mb) .sqs-block-form select:hover,
.page-section:has(.mb) .sqs-block-form textarea:hover {
  border-color: var(--mb-ink-3) !important;
}.page-section:has(.mb) .sqs-block-form .form-wrapper .field-list .title,
.page-section:has(.mb) .sqs-block-form .field-list .title {
  font-family: var(--mb-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mb-ink-2);
  letter-spacing: 0.01em;
}.page-section:has(.mb) .sqs-block-form .form-wrapper input[type="text"],
.page-section:has(.mb) .sqs-block-form .form-wrapper input[type="email"],
.page-section:has(.mb) .sqs-block-form .form-wrapper input[type="number"],
.page-section:has(.mb) .sqs-block-form .form-wrapper input[type="tel"],
.page-section:has(.mb) .sqs-block-form .form-wrapper select,
.page-section:has(.mb) .sqs-block-form .form-wrapper textarea {
  font-family: var(--mb-sans) !important;
  font-size: 0.98rem !important;
  color: var(--mb-ink) !important;
  background: var(--mb-paper) !important;
  border: 1px solid var(--mb-beige-3) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}.page-section:has(.mb) .sqs-block-form .form-wrapper input:focus,
.page-section:has(.mb) .sqs-block-form .form-wrapper select:focus,
.page-section:has(.mb) .sqs-block-form .form-wrapper textarea:focus {
  outline: none !important;
  border-color: var(--mb-orange) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-orange) 18%, transparent) !important;
}

/* The submit control is a <button>, not an <input type="submit">. Targeting
   the input left it entirely unstyled: square corners, Squarespace's own
   orange-red rather than the brand orange, 213 by 85px, and force-uppercased
   against a style guide that asks for sentence case. */
.page-section:has(.mb) .sqs-block-form .form-button-wrapper button,
.page-section:has(.mb) .sqs-block-form button[type="submit"],
.page-section:has(.mb) .sqs-block-form .form-submit-button {
  font-family: var(--mb-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  background-color: var(--mb-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 26px !important;
  min-height: 0 !important;
  width: auto !important;
}
.page-section:has(.mb) .sqs-block-form .form-button-wrapper button:hover,
.page-section:has(.mb) .sqs-block-form button[type="submit"]:hover {
  background-color: var(--mb-orange-dk) !important;
}

/* ═══ 3. scoped components ═══════════════════════════════════════════════ */

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

.mb {
  font-family: var(--mb-sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.62;
  font-weight: 400;
  color: var(--mb-ink);
  background: var(--mb-beige);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  .mb *,
  .mb *::before,
  .mb *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── type ─────────────────────────────────────────────────────────── */

.mb h1,
.mb h2,
.mb h3,
.mb h4 {
  margin: 0;
  color: var(--mb-ink);
  font-family: var(--mb-sans);
  font-weight: 700;
  text-wrap: balance;
  letter-spacing: -0.032em;
  line-height: 1.05;
}
.mb h1 {
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem);
  letter-spacing: -0.042em;
  line-height: 1.02;
}
.mb h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem);
  letter-spacing: -0.036em;
}
.mb h3 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  letter-spacing: -0.024em;
  line-height: 1.2;
}
.mb h4 {
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}
.mb p {
  margin: 0;
  color: var(--mb-ink-2);
}
.mb strong {
  font-weight: 700;
  color: var(--mb-ink);
}
.mb a {
  color: inherit;
  text-decoration: none;
}
.mb img {
  max-width: 100%;
  height: auto;
  display: block;
}
.mb ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb a:focus-visible,
.mb button:focus-visible,
.mb input:focus-visible,
.mb select:focus-visible,
.mb textarea:focus-visible {
  outline: 2px solid var(--mb-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.mb-lede {
  font-size: clamp(1.08rem, 1rem + 0.55vw, 1.32rem);
  line-height: 1.5;
  color: var(--mb-ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.mb-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mb-ink-3);
}
.mb-orange {
  color: var(--mb-orange);
}
.mb-measure {
  max-width: 62ch;
}
.mb-tight {
  max-width: 52ch;
}

/* ── layout ───────────────────────────────────────────────────────── */

.mb-wrap {
  max-width: var(--mb-col);
  margin-inline: auto;
  padding-inline: var(--mb-pad);
}
.mb-section {
  padding-block: var(--mb-sec);
  position: relative;
  /* On the standalone build the sections are siblings, so `+` worked. In
     Squarespace each one is alone inside its own Code Block and never has a
     sibling, so the rule silently did nothing and the page lost the hairlines
     that give it its structure. Setting the border on every section works in
     both, and the hero is .mb-hero rather than .mb-section, so the top of the
     page stays clean. */
  border-top: 1px solid var(--mb-line-soft);
}
/* A dark band is its own divider; a rule along the top of it just muddies the
   edge. Same where two dark sections meet. */
.mb-dark.mb-section,
.mb-dark + .mb-section,
.mb-dark .mb-section {
  border-top-color: transparent;
}
.mb-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.mb-stack-lg {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 52px);
}
/* The gap below a heading group should read as "this belongs to that", not as
   another section break. At 4.5vw it was 60px on a laptop, close enough to the
   section padding itself that a heading floated free of its own copy. */
.mb-sec-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(20px, 2.4vw, 34px);
  align-items: flex-start;
}

.mb-cols {
  display: grid;
  gap: clamp(26px, 3.6vw, 56px);
}
.mb-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mb-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mb-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
/* Two columns of prose should share a baseline at the top. Centring is for a
   copy column set against an image, where the image sets the height. */
.mb-split-top {
  align-items: start;
}
.mb-split-media-first .mb-split-media {
  order: -1;
}
@media (max-width: 900px) {
  .mb-cols-3,
  .mb-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mb-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 620px) {
  .mb-cols-2,
  .mb-cols-3,
  .mb-cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── the matrix frame ─────────────────────────────────────────────── */

.mb-frame {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
/* Two dot layers so the field reads as a deliberate grid rather than noise: a
   sparse major grid over a denser minor one.

   The centre fade is a third, opaque background layer painted over the dots in
   the page's own ground colour rather than a mask over the whole pseudo
   element. Both render identically; this way avoids creating a compositing
   layer for a purely decorative effect. Background layers stack first-on-top,
   so the fade is listed first, and it reads --mb-beige, which .mb-dark
   redefines, so dark sections fade to their own ground. */
.mb-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
      120% 105% at 50% 45%,
      var(--mb-beige) 30%,
      transparent 76%
    ),
    radial-gradient(circle, rgba(18, 18, 18, 0.16) 1.1px, transparent 1.2px),
    radial-gradient(circle, rgba(18, 18, 18, 0.06) 1px, transparent 1.1px);
  background-size: 100% 100%, 132px 132px, 44px 44px;
  background-position: 0 0, 22px 22px, 22px 22px;
}
.mb-frame > * {
  position: relative;
  z-index: 1;
}

/* The single orange crosshair from the deck. Its intersection is positioned
   per hero via --cx/--cy, set on the section, so it can be placed against each
   page's artwork.

   The rules sit behind the content, but the pin sits in front of it: in the
   deck the orange dot lands on the product, and behind the hero image it would
   simply disappear. */
.mb-crosshair {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mb-crosshair::before,
.mb-crosshair::after {
  content: "";
  position: absolute;
  background: var(--mb-orange);
  opacity: 0.42;
}
.mb-crosshair::before {
  left: 0;
  right: 0;
  top: var(--cy, 52%);
  height: 1px;
}
.mb-crosshair::after {
  top: 0;
  bottom: 0;
  left: var(--cx, 50%);
  width: 1px;
}
.mb-pin {
  position: absolute;
  z-index: 5;
  left: var(--cx, 50%);
  top: var(--cy, 52%);
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  color: var(--mb-orange);
  --mb-knockout: #fff;
  pointer-events: none;
}
.mb-pin svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* The crosshair is a composition for a wide canvas: it places the intersection
   against artwork sitting beside the copy. Once the hero stacks, there is no
   "beside", and the rules and pin fall across the headline instead. The dot
   field alone carries the matrix at this width. */
@media (max-width: 900px) {
  .mb-crosshair,
  .mb-pin {
    display: none;
  }
}

/* ── brand mark ───────────────────────────────────────────────────── */

.mb-mark {
  display: block;
  color: var(--mb-ink);
  --mb-knockout: var(--mb-beige);
}
.mb-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mb-mark-sm {
  width: 30px;
  height: 30px;
}
.mb-mark-md {
  width: 38px;
  height: 38px;
}
.mb-mark-lg {
  width: 54px;
  height: 54px;
}
.mb-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.mb-lockup-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--mb-ink);
}

/* ── buttons ──────────────────────────────────────────────────────── */

.mb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--mb-orange);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.16s ease;
  text-align: center;
}
.mb-btn:hover {
  background: var(--mb-orange-dk);
  transform: translateY(-1px);
}
.mb-btn:active {
  transform: translateY(0);
}
.mb-btn-sm {
  padding: 9px 18px;
  font-size: 0.88rem;
}
.mb-btn-ghost {
  background: transparent;
  color: var(--mb-ink);
  border-color: var(--mb-line);
}
.mb-btn-ghost:hover {
  background: var(--mb-beige-2);
  border-color: var(--mb-beige-3);
}

/* Secondary action: text with an orange rule that opens up on hover. */
.mb-tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--mb-ink);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--mb-orange);
  transition: gap 0.16s ease;
}
.mb-tlink:hover {
  gap: 12px;
}
.mb-tlink .mb-arw {
  color: var(--mb-orange);
  font-size: 1.05em;
  line-height: 1;
}

/* ── hero ─────────────────────────────────────────────────────────── */

.mb-hero {
  padding-block: clamp(36px, 5vw, 64px) clamp(44px, 5vw, 76px);
  min-height: min(78vh, 820px);
  display: flex;
  align-items: stretch;
}
.mb-hero .mb-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* Top row of the matrix: the page mark sits right, opposite the header lockup. */
.mb-hero-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(18px, 3vw, 40px);
}
.mb-pagemark {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.mb-pagemark .mb-name {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mb-ink-3);
  line-height: 1;
  white-space: nowrap;
}
.mb-pagemark .mb-tag {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mb-ink-3);
  max-width: 9ch;
}

.mb-hero-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.mb-hero-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  align-items: flex-start;
  max-width: 34rem;
}
/* A hero with no artwork: one column, and the headline given the room the
   image would have taken rather than leaving an empty half. */
.mb-hero-solo {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
/* It also drops the tall minimum height. That exists so a hero with a
   photograph beside the copy fills the first screen; with only text to hold it
   up, Updates was a 702px hero around 175px of content, leaving some 360px of
   empty beige between the page mark and the headline. These size to what they
   contain. */
.mb-hero:has(.mb-hero-solo) {
  min-height: 0;
  padding-block: clamp(28px, 3.5vw, 46px) clamp(36px, 4.5vw, 66px);
}
.mb-hero-solo .mb-hero-copy {
  max-width: 48rem;
}
.mb-hero-solo h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);
}
.mb-hero-solo .mb-lede {
  max-width: 40ch;
}
.mb-hero-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 900px) {
  .mb-hero {
    min-height: 0;
  }
  .mb-hero-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .mb-hero-media {
    order: -1;
  }
  .mb-pagemark .mb-name {
    font-size: 1.4rem;
  }
}

/* The sleeve render, floated on the beige with a soft contact shadow.
   Qualified with img so it outranks the `.mb img { height: auto }` reset,
   which would otherwise let the render scale to the full column width. */
.mb img.mb-sleeve {
  width: auto;
  height: clamp(300px, 40vw, 520px);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 40px rgba(18, 18, 18, 0.22));
}

/* ── hero motion ──────────────────────────────────────────────────────
   One authored moment per page load: the matrix composes itself — the dot
   field settles, the crosshair draws to its axes, the pin locks onto the
   intersection — and the scene resolves out of a soft blur while the copy
   rises in sequence. On scroll, the first screen releases: copy lifts and
   dims, the media trails it for depth, the field drifts.

   All of it is progressive enhancement. The default, un-animated state is the
   finished hero, so a browser that runs none of this still shows everything —
   the reason the earlier scroll-reveal experiment was pulled was that a failed
   engine left content hidden. Every keyframe ends on the natural resting
   state, so the global prefers-reduced-motion block above (which collapses
   durations to ~0) lands on a fully visible hero rather than erasing it. */
.mb-hero {
  --mb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Secondary pages keep a light CSS entrance on load: the copy rises, the scene
   resolves into focus, the matrix draws in. The home hero opts out of this
   (`:not(.mb-stage-pin)`) because it runs the richer JS stage below. */
@media (prefers-reduced-motion: no-preference) {
  .mb-hero:not(.mb-stage-pin) .mb-pagemark,
  .mb-hero:not(.mb-stage-pin) .mb-hero-copy > * {
    animation: mb-hero-rise 720ms var(--mb-ease) both;
  }
  .mb-hero:not(.mb-stage-pin) .mb-pagemark { animation-delay: 240ms; }
  .mb-hero:not(.mb-stage-pin) .mb-hero-copy > h1 { animation-delay: 300ms; }
  .mb-hero:not(.mb-stage-pin) .mb-hero-copy > .mb-lede { animation-delay: 400ms; }
  .mb-hero:not(.mb-stage-pin) .mb-hero-copy > .mb-stack { animation-delay: 500ms; }

  .mb-hero:not(.mb-stage-pin) .mb-hero-media {
    animation: mb-hero-focus 900ms var(--mb-ease) 320ms both;
  }
  .mb-hero:not(.mb-stage-pin).mb-frame::before {
    animation: mb-hero-field 1100ms var(--mb-ease) both;
  }
  .mb-hero:not(.mb-stage-pin) .mb-crosshair::before {
    animation: mb-hero-hline 760ms var(--mb-ease) 200ms both;
  }
  .mb-hero:not(.mb-stage-pin) .mb-crosshair::after {
    animation: mb-hero-vline 760ms var(--mb-ease) 200ms both;
  }
  .mb-hero:not(.mb-stage-pin) .mb-pin {
    animation: mb-hero-lock 620ms var(--mb-ease) 600ms both;
  }
}

@keyframes mb-hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes mb-hero-focus {
  from { opacity: 0; transform: scale(1.045); filter: blur(14px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes mb-hero-field {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mb-hero-hline {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 0.42; transform: none; }
}
@keyframes mb-hero-vline {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 0.42; transform: none; }
}
@keyframes mb-hero-lock {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: none; }
}

/* ── home hero: the cinematic tracking scene ──────────────────────────
   A dark, full-bleed scene mirroring the product pages' opening: the athlete
   fills the frame, a console tracks and reads the limb over them (beacons
   range a fix, an EMG trace reads, the load/asymmetry bars fill), and the copy
   rolls up on the left as the pinned scene is scrubbed by src/hero.js. Injury
   is the icing — a small flag at the very end. The markup renders a complete,
   legible hero even if the script never runs. */
.mb-stage {
  position: relative;
  height: 300vh; /* 200vh of pin travel — room for the three beats */
}
.mb-stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
  background: #0b0b0c;
  color: #f5f2ec;
  isolation: isolate;
}

/* the athlete, full-bleed */
.mb-cine-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mb-cine-bg .mb-figure {
  margin: 0;
  height: 100%;
}
.mb-cine-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 38%;
  border-radius: 0;
  background: #0b0b0c;
}
/* legibility grade: dark to the left and foot, clear on the right where the
   read plays out */
.mb-cine-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 9, 10, 0.88) 0%, rgba(9, 9, 10, 0.5) 34%, rgba(9, 9, 10, 0) 66%),
    linear-gradient(0deg, rgba(9, 9, 10, 0.72) 0%, rgba(9, 9, 10, 0) 44%);
}

/* the console canvas: over the photo, under the copy */
.mb-stage-pin > .mb-signal {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* copy, left-aligned: page mark up top, headline at the foot */
.mb-cine-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(88px, 13vh, 152px) var(--mb-pad) clamp(40px, 8vh, 88px);
  max-width: var(--mb-col);
  margin-inline: auto;
}
.mb-cine .mb-pagemark { justify-content: flex-start; }
.mb-cine .mb-pagemark .mb-name,
.mb-cine .mb-pagemark .mb-tag { color: rgba(245, 242, 236, 0.66); }
.mb-cine-copy {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
  align-items: flex-start;
}
.mb-cine-copy h1,
.mb-cine-copy .mb-beat-h {
  margin: 0;
  color: #f7f4ee;
  font-family: var(--mb-sans);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 1.02;
  font-size: clamp(2.6rem, 1.5rem + 4vw, 5.2rem);
  text-wrap: balance;
}
.mb-cine-copy .mb-lede {
  color: rgba(245, 242, 236, 0.82);
  max-width: 36ch;
}

/* Reveal is JS-gated: it fires when the hero is actually seen, reliable inside
   an iframe/artifact where a load-time clock is frozen. Default is visible, so
   a failed script shows the finished hero. */
.mb-stage.is-live [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s var(--mb-ease),
    transform 0.8s var(--mb-ease);
  /* The stagger delay is set by src/hero.js from --i, not a calc() here: a `*`
     inside calc() is the LESS hazard that can discard the whole stylesheet. */
}
.mb-stage.is-live.is-in [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ── the console HUD over the athlete (Athena/Richter language) ────── */
.mb-hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  color: var(--mb-orange);
  --mb-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.mb-hud-lead {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mb-hud-reticle {
  position: absolute;
  left: 58%;
  top: 54%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1);
}
.mb-hud-ring {
  position: absolute;
  inset: 22%;
  border: 1.5px solid rgba(255, 92, 0, 0.7);
  border-radius: 50%;
}
.mb-hud-reticle i {
  position: absolute;
  width: 16%;
  height: 16%;
  border: 0 solid rgba(255, 92, 0, 0.95);
}
.mb-hud-reticle i:nth-child(2) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.mb-hud-reticle i:nth-child(3) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.mb-hud-reticle i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.mb-hud-reticle i:nth-child(5) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.mb-hud-scan {
  position: absolute;
  left: 44%;
  right: 28%;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 92, 0, 0.9) 30%,
    rgba(255, 236, 214, 0.95) 50%,
    rgba(255, 92, 0, 0.9) 70%,
    transparent
  );
  box-shadow: 0 0 18px 2px rgba(255, 92, 0, 0.45);
  opacity: 0;
}
.mb-hud-read {
  position: absolute;
  right: clamp(16px, 4vw, 52px);
  top: 22%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(9, 9, 10, 0.42);
  border: 1px solid rgba(255, 92, 0, 0.26);
  border-radius: 3px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: var(--mb-mono);
}
.mb-hud-head { display: flex; align-items: center; gap: 8px; }
.mb-hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mb-orange);
}
.mb-hud-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffd9be;
}
.mb-hud-limb {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.5);
  margin-left: auto;
  padding-left: 12px;
}
.mb-hud-metric { display: flex; align-items: center; gap: 8px; }
.mb-hud-metric i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.55);
  width: 30px;
}
.mb-hud-bar {
  width: 88px;
  height: 5px;
  border: 1px solid rgba(255, 92, 0, 0.4);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.mb-hud-bar > b {
  display: block;
  height: 100%;
  background: var(--mb-orange);
  transform: scaleX(0.12);
  transform-origin: left;
}
/* corner brackets on the tag — the Athena `.hud` treatment */
.mb-hud-read.hud::before,
.mb-hud-read.hud::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--mb-orange);
  opacity: 0.85;
}
.mb-hud-read.hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.mb-hud-read.hud::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.mb-hud.is-flag .mb-hud-dot { animation: mb-hud-pulse 1s ease-out infinite; }
.mb-hud.is-flag .mb-hud-status { color: var(--mb-orange); }
@keyframes mb-hud-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 92, 0, 0.6); }
  100% { box-shadow: 0 0 0 8px rgba(255, 92, 0, 0); }
}

/* the ring gauge around the reticle: it sweeps to full across the scroll — the
   read resolving into a call, big and on the leg */
.mb-hud-gauge {
  position: absolute;
  inset: -16%;
  width: 132%;
  height: 132%;
  transform: rotate(-90deg);
  overflow: visible;
}
.mb-hud-gauge circle { fill: none; stroke-width: 1.6; }
.mb-hud-gauge-track { stroke: rgba(255, 255, 255, 0.14); }
.mb-hud-gauge-fill {
  stroke: var(--mb-orange);
  stroke-linecap: round;
  stroke-dasharray: 295.3;
  stroke-dashoffset: 295.3;
  filter: drop-shadow(0 0 5px rgba(255, 92, 0, 0.55));
}

/* ── the three scroll beats ────────────────────────────────────────
   Stacked in one grid cell, bottom-aligned, and crossfaded by src/hero.js as
   the pinned scene is scrubbed. The first is shown by default, so the hero
   reads as finished even without the script. */
.mb-cine-beats { display: grid; }
.mb-beat {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s var(--mb-ease),
    transform 0.55s var(--mb-ease);
}
.mb-beat.is-on { opacity: 1; transform: none; }
.mb-beat-tag {
  display: inline-block;
  margin-bottom: clamp(12px, 1.6vw, 20px);
  font-family: var(--mb-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mb-orange);
}
.mb-beat h1,
.mb-beat .mb-beat-h { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .mb-stage { height: auto; }
  .mb-stage-pin { position: static; height: 92vh; }
  .mb-stage.is-live [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Phone: unpin, but keep the full-bleed dark scene and its console. */
@media (max-width: 900px) {
  .mb-stage { height: auto; }
  .mb-stage-pin { position: static; height: 92vh; min-height: 560px; }
  .mb-cine-inner { max-width: none; }
  .mb-hud-read { right: 12px; top: 13px; padding: 8px 10px; }
  .mb-hud-bar { width: 60px; }
}

/* ── media ────────────────────────────────────────────────────────── */

.mb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mb-figure img {
  width: 100%;
  border-radius: var(--mb-r-lg);
  background: var(--mb-beige-2);
}
.mb-figure figcaption {
  font-size: 0.85rem;
  color: var(--mb-ink-3);
  line-height: 1.45;
}
/* Transparent hardware renders: capped, centred, floated on the ground rather
   than boxed, so they read as objects instead of photographs. */
.mb-figure-object img {
  max-width: 210px;
  margin-inline: auto;
  background: none;
  border-radius: 0;
  filter: drop-shadow(0 22px 28px rgba(18, 18, 18, 0.18));
}
.mb-figure-object figcaption {
  text-align: center;
}

/* ── cards, lists, stats ──────────────────────────────────────────── */

.mb-card {
  background: var(--mb-paper);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-r-lg);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
/* Cards in a row rarely hold the same amount of copy, so pin the action to the
   bottom and let the whitespace absorb the difference. */
.mb-card > .mb-tlink:last-child,
.mb-card > .mb-btn:last-child {
  margin-top: auto;
  padding-top: 6px;
}

.mb-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.mb-item .mb-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mb-orange);
}

/* The deck's statistic table: figure left, meaning right, hairline between. */
.mb-rules {
  border-top: 1px solid var(--mb-line);
  width: 100%;
}
.mb-rules .mb-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.38fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--mb-line);
}
.mb-rules .mb-fig {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--mb-orange);
  line-height: 1;
}
.mb-rules .mb-fig .mb-unit {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-left: 0.35em;
}
.mb-rules .mb-meaning {
  color: var(--mb-ink-2);
  font-size: 0.98rem;
  line-height: 1.45;
}
.mb-rules .mb-src {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--mb-ink-3);
}
@media (max-width: 560px) {
  .mb-rules .mb-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* Numbered spec list, for "What's included". */
.mb-specs {
  width: 100%;
  border-top: 1px solid var(--mb-line);
}
.mb-specs > div {
  display: grid;
  grid-template-columns: 2.4rem minmax(7rem, 0.3fr) minmax(0, 1fr);
  gap: clamp(12px, 2.4vw, 32px);
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--mb-line);
  align-items: baseline;
}
.mb-specs .mb-n {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mb-ink-3);
  font-variant-numeric: tabular-nums;
}
.mb-specs h3 {
  font-size: 1.05rem;
}
@media (max-width: 620px) {
  .mb-specs > div {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
  .mb-specs > div p {
    grid-column: 2;
  }
}

/* ── dark section (Athena, product-in-use moments) ────────────────── */

.mb-dark {
  background: var(--mb-dark);
  --mb-line: rgba(255, 255, 255, 0.14);
  --mb-line-soft: rgba(255, 255, 255, 0.09);
  --mb-ink: #f5f2ec;
  --mb-ink-2: #a9a49b;
  --mb-ink-3: #7d786f;
  --mb-paper: var(--mb-dark-2);
  --mb-beige: var(--mb-dark);
  --mb-beige-2: #232323;
  --mb-beige-3: #303030;
  color: var(--mb-ink);
}
.mb-dark .mb-frame::before {
  background-image: radial-gradient(
      120% 105% at 50% 45%,
      var(--mb-dark) 30%,
      transparent 76%
    ),
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.1px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1.1px);
}

/* Risk-signal chips: the green, amber, red the Athena copy refers to. */
.mb-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mb-sig {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--mb-line);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--mb-ink);
}
.mb-sig::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent);
}
.mb-sig-green {
  --c: #22c55e;
}
.mb-sig-amber {
  --c: #eab308;
}
.mb-sig-red {
  --c: #ef4444;
}

/* ── team ─────────────────────────────────────────────────────────── */

/* Five explicit columns above 1000px rather than auto-fit: the team is five
   people, and letting the browser choose put one portrait on a row of its own
   whenever the gap maths landed a few pixels over the content width. */
.mb-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}
/* Five across only once the content width can give each card about 195px.
   Below that the cards get too narrow for the longest bio on the back, so the
   grid is left to wrap to four. */
@media (min-width: 1180px) {
  .mb-team {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.mb-person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mb-person .mb-name {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--mb-ink);
}
.mb-person .mb-role {
  font-size: 0.88rem;
  color: var(--mb-ink-3);
  margin-top: 3px;
}
/* ── flip cards ───────────────────────────────────────────────────────
 *
 * The portrait turns to show the bio. Driven by a checkbox, not script, so it
 * works on touch, where there is no hover, and survives Squarespace's own page
 * transitions. On a pointer device the card also turns on hover, which is the
 * behaviour people expect from a card like this.
 */
.mb-flip-toggle {
  /* Visually gone but still focusable, so the keyboard can reach the card. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.mb-flip {
  display: block;
  position: relative;
  margin: 0 0 16px;
  aspect-ratio: 4 / 5;
  border-radius: var(--mb-r);
  background: var(--mb-beige-2);
  cursor: pointer;
  perspective: 1200px;
  /* Suppresses the blue tap flash on iOS, which otherwise fires on every tap. */
  -webkit-tap-highlight-color: transparent;
}
.mb-flip-inner {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.mb-flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--mb-r);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mb-flip-back {
  transform: rotateY(180deg);
  background: var(--mb-ink);
  color: #f5f2ec;
  display: flex;
  align-items: center;
  padding: clamp(13px, 1.3vw, 18px);
  /* Safety valve. The card is a fixed 4:5 box, so a bio longer than the ones
     written today would be silently cut off. Scrolling is not elegant, but
     losing the last sentence of someone's biography without any sign is worse,
     and this file is handed to a client who will edit these. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mb-bio {
  font-size: clamp(0.7rem, 0.6rem + 0.25vw, 0.8rem);
  line-height: 1.42;
  color: #d8d3ca;
  text-wrap: pretty;
}

/* Turned by hover, by keyboard focus, or by tap. */
@media (hover: hover) {
  .mb-flip:hover .mb-flip-inner {
    transform: rotateY(180deg);
  }
}
.mb-flip-toggle:focus-visible + .mb-flip {
  outline: 2px solid var(--mb-orange);
  outline-offset: 3px;
}
.mb-flip-toggle:focus-visible + .mb-flip .mb-flip-inner,
.mb-flip-toggle:checked + .mb-flip .mb-flip-inner {
  transform: rotateY(180deg);
}

/* A quiet affordance, so it is discoverable that the card does anything. */
.mb-flip-hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.62);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: opacity 0.25s ease;
}
.mb-flip:hover .mb-flip-hint,
.mb-flip-toggle:checked + .mb-flip .mb-flip-hint {
  opacity: 0;
}

/* Rotation is the whole effect, so with reduced motion the faces cross-fade
   in place rather than snapping through a turn that was asked not to happen. */
@media (prefers-reduced-motion: reduce) {
  .mb-flip-inner {
    transform-style: flat;
    transition: none;
  }
  .mb-flip-face {
    backface-visibility: visible;
    transition: opacity 0.2s ease;
  }
  .mb-flip-back {
    transform: none;
    opacity: 0;
  }
  .mb-flip:hover .mb-flip-inner,
  .mb-flip-toggle:checked + .mb-flip .mb-flip-inner,
  .mb-flip-toggle:focus-visible + .mb-flip .mb-flip-inner {
    transform: none;
  }
  .mb-flip:hover .mb-flip-back,
  .mb-flip-toggle:checked + .mb-flip .mb-flip-back,
  .mb-flip-toggle:focus-visible + .mb-flip .mb-flip-back {
    opacity: 1;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── updates ──────────────────────────────────────────────────────── */

.mb-posts {
  border-top: 1px solid var(--mb-line);
}
.mb-posts article {
  display: grid;
  grid-template-columns: minmax(8rem, 0.24fr) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 40px);
  padding-block: clamp(22px, 2.6vw, 32px);
  border-bottom: 1px solid var(--mb-line);
}
.mb-posts time {
  font-size: 0.85rem;
  color: var(--mb-ink-3);
  font-weight: 600;
}
/* A post title is an h2 for document structure, but sits at h3's size: it is
   an item in a list, not a section heading. */
.mb-posts h2 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  letter-spacing: -0.024em;
  line-height: 1.2;
  margin-bottom: 7px;
}
@media (max-width: 620px) {
  .mb-posts article {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}
.mb-empty {
  padding: clamp(34px, 5vw, 60px);
  border: 1px dashed var(--mb-beige-3);
  border-radius: var(--mb-r-lg);
  text-align: center;
  color: var(--mb-ink-3);
}

/* ── featured update ──────────────────────────────────────────────────
 *
 * A post that points at something worth opening gets a card carrying that
 * thing's own look, so the link is recognisable before it is clicked. The Ares
 * brochure is a dark document with a gradient headline, so the card is too.
 *
 * The movement is a hover lift and the arrow sliding out, which is the same
 * language as every other link here. Nothing animates on scroll: content that
 * starts invisible and waits to be revealed is the one effect this site
 * deliberately does not use.
 */
.mb-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  margin-top: 20px;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--mb-r-lg);
  background: var(--mb-dark);
  color: #f5f2ec;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  max-width: 34rem;
}
/* Each card carries a picture of whatever it opens, as a bright tile on the
   right rather than a wash behind everything.

   Laying the artwork under the copy was the wrong instinct: the copy here is
   light, so any image bright enough to be worth showing takes the contrast
   below the point where the headline is readable, and any image dark enough
   to be safe is a black rectangle on a beige page. Keeping the two apart lets
   the picture run at full brightness and the type keep the plain dark card. */
.mb-feature::before {
  content: "";
  position: absolute;
  inset: 0 0 0 46%;
  z-index: -1;
  background-image: var(--mb-card-img, none);
  background-size: cover;
  background-position: var(--mb-card-pos, 50% 50%);
  /* dissolved into the card on its inner edge, so it is a tile and not a seam */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  transition: opacity 0.18s ease;
  opacity: 0.92;
}
.mb-feature:hover::before { opacity: 1; }
.mb-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(18, 18, 18, 0.18);
}
.mb-feature-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Lifted from #7d786f: at this size it has to clear the artwork behind it. */
  color: #c9c2b6;
  margin-bottom: 14px;
}
.mb-feature-quote {
  display: block;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #f5f2ec;
}
/* The brochure's own headline gradient, so the card reads as a window on to
   it rather than as another beige panel. */
.mb-feature-accent {
  background: linear-gradient(105deg, #8b5cf6, #ef4444 62%, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mb-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #f5f2ec;
  border-bottom: 2px solid var(--mb-orange);
  padding-bottom: 3px;
  transition: gap 0.18s ease;
}
.mb-feature:hover .mb-feature-cta {
  gap: 12px;
}

/* ── callout ──────────────────────────────────────────────────────── */

.mb-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
  background: var(--mb-orange-soft);
  border: 1px solid #fbd5b8;
  border-radius: var(--mb-r-lg);
}
.mb-callout p {
  color: #7c2d12;
  max-width: 54ch;
}

/* ── footer ───────────────────────────────────────────────────────────
 *
 * Scoped under .mb like everything else, because on Squarespace the footer is
 * a Code Block dropped into the platform's footer area rather than markup this
 * project controls. The standalone build uses the same component, so there is
 * one definition of the footer rather than two that drift.
 */
.mb-footer {
  background: var(--mb-dark);
  color: #a9a49b;
  padding-block: clamp(44px, 5vw, 72px) 30px;
  --mb-knockout: var(--mb-dark);
}
.mb-footer a {
  color: #d8d3ca;
  text-decoration: none;
  transition: color 0.16s ease;
}
.mb-footer a:hover {
  color: #fff;
}
/* The knockout has to be re-set here, not just on .mb-footer: .mb-mark sets
   --mb-knockout on the mark element itself, which beats an inherited value, so
   the glyph would come through beige on a near-beige disc and vanish. */
.mb-footer .mb-mark {
  color: #f5f2ec;
  --mb-knockout: var(--mb-dark);
}
.mb-footer .mb-lockup-name {
  color: #f5f2ec;
}
.mb-foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 52px);
  padding-bottom: clamp(30px, 3.6vw, 46px);
  border-bottom: 1px solid var(--mb-dark-line);
}
@media (max-width: 900px) {
  .mb-foot-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .mb-foot-top {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mb-foot-line {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f5f2ec;
  margin: 18px 0 0;
  max-width: 22ch;
}
.mb-foot-col h4 {
  color: #f5f2ec;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 14px;
}
/* The list reset is stated here rather than relying on `.mb ul`: in the
   standalone build the footer sits outside the .mb wrapper, so that rule does
   not reach it and the links come through bulleted. */
.mb-foot-col ul {
  display: grid;
  gap: 10px;
  font-size: 0.93rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mb-foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 0.83rem;
  color: #7d786f;
}


/* ── no scroll reveals, deliberately ──────────────────────────────────
 *
 * A fade-up-on-scroll was built and removed. Any such effect starts content at
 * opacity 0 and depends on something later restoring it, and this stylesheet
 * lives in a Squarespace panel where the client edits pages, blocks get
 * reordered, and the platform re-renders on its own schedule. The failure mode
 * is an invisible section that nobody notices until a customer sees it.
 *
 * The design does not need it: the brand voice is calm confidence, not motion.
 * Movement here is limited to hover and focus states, which cannot hide
 * anything.
 */

/* Site chrome: header, navigation and footer.
 *
 * Used by the standalone build (dist/, deployed to Cloudflare) and by the
 * sandbox, which are the same pages with a banner added. On Squarespace the
 * chrome is the platform's own instead, restyled by the SQUARESPACE CHROME
 * block in site.css, so this file is never pasted into that panel.
 */

html {
  background: var(--mb-beige);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--mb-beige);
  font-family: var(--mb-sans);
  color: var(--mb-ink);
  overflow-x: hidden;
}

/* Keyboard users get past the navigation without tabbing through it. Off
   screen until focused, which is the only time it is useful. */
.site-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--mb-ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  font-family: var(--mb-sans);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.site-skip:focus {
  left: 0;
}

/* ── header ───────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--mb-beige) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--mb-line);
}
.site-bar {
  max-width: var(--mb-col);
  margin-inline: auto;
  padding: 14px var(--mb-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 30px);
}
.site-nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--mb-ink-2);
  text-decoration: none;
  padding-block: 4px;
  position: relative;
  transition: color 0.16s ease;
}
.site-nav a:hover {
  color: var(--mb-ink);
}
.site-nav a[aria-current="page"] {
  color: var(--mb-ink);
  font-weight: 700;
}
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--mb-orange);
}
.site-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid var(--mb-line);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mb-ink);
  cursor: pointer;
}
.site-toggle i {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--mb-ink);
  margin: 3px 0;
}
@media (max-width: 940px) {
  .site-toggle {
    display: inline-flex;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--mb-beige);
    border-block: 1px solid var(--mb-line);
    padding: 8px var(--mb-pad) 20px;
  }
  .site-header[data-open="true"] .site-nav {
    display: flex;
  }
  .site-nav a {
    padding: 13px 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--mb-line-soft);
  }
  .site-nav a[aria-current="page"]::after {
    display: none;
  }
  .site-nav .mb-btn {
    margin-top: 16px;
    justify-content: center;
    border-bottom: 0;
  }
}

/* The footer now lives in site.css as the .mb-footer component, so the
 * standalone build and the Squarespace Code Block share one definition
 * instead of two that drift apart. */

/* ── sandbox banner ───────────────────────────────────────────────── */

.site-banner {
  background: var(--mb-ink);
  color: #f5f2ec;
  font-family: var(--mb-sans);
  font-size: 0.82rem;
  padding: 9px var(--mb-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.site-banner strong {
  color: var(--mb-orange);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.site-banner a {
  color: #f5f2ec;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Stand-in for a native Squarespace Form Block, so the sandbox shows the
   layout around it. Non-submitting by design. */
.site-form {
  display: grid;
  gap: 18px;
}
.site-form .site-row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 620px) {
  .site-form .site-row2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.site-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.site-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mb-ink-2);
}
.site-field input,
.site-field select,
.site-field textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--mb-ink);
  background: var(--mb-paper);
  border: 1px solid var(--mb-beige-3);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}
.site-field textarea {
  min-height: 118px;
  resize: vertical;
}
.site-field input:focus,
.site-field select:focus,
.site-field textarea:focus {
  outline: none;
  border-color: var(--mb-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-orange) 18%, transparent);
}
.site-formnote {
  font-size: 0.8rem;
  color: var(--mb-ink-3);
  border-top: 1px dashed var(--mb-beige-3);
  padding-top: 14px;
  margin: 4px 0 0;
}