/* ==========================================================================
   METAFLIGHT HUD - ABOUT (post 100)
   Load order: mf-hud-tokens.css, mf-hud-chrome.css, then this file.

   SELF-CONTAINED. Enqueued on page 100 only, so no class from roles/world/
   pricing exists here. Everything is redeclared under the mf-a- prefix. The
   only borrowed classes are .mf-rv (reveal) and .mf-bd-btn* from
   mf-hud-chrome.css, which loads on every page.

   SPECIFICITY: every rule is prefixed body.breakdance so it wins against
   post-100-defaults.css, which ties on weight and may load after this file.

   Z-INDEX: the background field is injected at wp_footer and is last in the
   DOM. Every section declares position:relative + z-index:2. Do not remove.

   SCROLL CHOREOGRAPHY: mf-hud-about.js writes --p (0 to 1) on each section
   carrying .mf-a-scrub, and --x (px) on the timeline track. Nothing here
   depends on JS for legibility: the markup default of every element is the
   readable state, and .mf-a-js is added by the page script itself as its very
   first action, never by the site-wide guard.
   ========================================================================== */

/* ==========================================================================
   SHELL
   ========================================================================== */
body.mf-about{overflow-x:clip}

body.breakdance .mf-a-sec,
body.breakdance .mf-a-pin{
  position:relative;z-index:2;padding:0;background:transparent;
}
body.breakdance .mf-a-sec > .section-container{
  align-items:stretch;max-width:1240px;margin:0 auto;width:100%;
  padding:6rem 2rem;
}
/* A pinned child is constrained by its containing block: the container must
   span the whole track or there is no travel and nothing sticks. */
body.breakdance .mf-a-pin > .section-container{
  align-items:stretch;max-width:none;width:100%;padding:0;height:100%;
}

/* post-100-defaults.css ships .bde-div{display:flex;flex-direction:column;
   align-items:flex-start}. flex-direction:column and align-items:flex-start
   both survive a switch to grid, so every layout container is listed here and
   every horizontal container declares flex-direction:row explicitly. */
body.breakdance .mf-a-hero-in,
body.breakdance .mf-a-stick,
body.breakdance .mf-a-ch-grid,
body.breakdance .mf-a-ch-rail,
body.breakdance .mf-a-ch-body,
body.breakdance .mf-a-pull,
body.breakdance .mf-a-tl-vp,
body.breakdance .mf-a-tl-card,
body.breakdance .mf-a-head,
body.breakdance .mf-a-gaps,
body.breakdance .mf-a-gap-c,
body.breakdance .mf-a-stats,
body.breakdance .mf-a-stat,
body.breakdance .mf-a-mis-box,
body.breakdance .mf-a-crew-grid,
body.breakdance .mf-a-crew-c,
body.breakdance .mf-a-crew-txt,
body.breakdance .mf-a-logos,
body.breakdance .mf-a-cta-box{align-items:stretch}

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */
body.breakdance .mf-a-eb{
  display:flex;flex-direction:row;align-items:center;gap:1rem;
  font-family:var(--mf-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--mf-cyan);
  margin:0 0 1.3rem;
}
body.breakdance .mf-a-eb::before{
  content:'';height:1px;width:clamp(24px,5vw,58px);flex:none;
  background:linear-gradient(90deg,transparent,var(--mf-cyan-lit));
}
body.breakdance .mf-a-eb-c{justify-content:center}
body.breakdance .mf-a-eb-c::after{
  content:'';height:1px;width:clamp(24px,5vw,58px);flex:none;
  background:linear-gradient(90deg,var(--mf-cyan-lit),transparent);
}
body.breakdance .mf-a-h1{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.02;letter-spacing:.02em;
  text-transform:uppercase;color:var(--mf-text);margin:0;
}
body.breakdance .mf-a-h2{
  font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.45rem,3.2vw,2.35rem);letter-spacing:.03em;line-height:1.16;
  color:var(--mf-text);margin:0 0 .9rem;
}
body.breakdance .mf-a-h3{
  font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1rem;letter-spacing:.05em;line-height:1.25;
  color:var(--mf-text);margin:0 0 .6rem;
}
body.breakdance .mf-a-p{
  font-family:'Rajdhani',sans-serif;font-size:1.08rem;line-height:1.72;
  color:var(--mf-muted);margin:0 0 1.25rem;
}
body.breakdance .mf-a-sub{
  font-family:'Rajdhani',sans-serif;font-size:1.05rem;line-height:1.7;
  color:var(--mf-muted);max-width:680px;margin:0 auto;
}
body.breakdance .mf-a-head{text-align:center;max-width:820px;margin:0 auto 3.4rem}
body.breakdance .mf-a-head .mf-a-eb,
body.breakdance .mf-a-head .mf-a-h2,
body.breakdance .mf-a-head .mf-a-sub{width:100%}

/* ==========================================================================
   GLASS PANEL
   Chamfer is clip-path, never border-radius. A border cannot follow a
   clip-path so the frame is an inset box-shadow, and glows must use
   filter:drop-shadow() because clip-path clips box-shadow.
   ========================================================================== */
body.breakdance .mf-a-panel{
  position:relative;width:100%;
  background:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot)),rgba(8,10,14,.42);
  backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur);
  box-shadow:inset 0 0 0 1px var(--mf-hair),inset 0 1px 0 rgba(255,255,255,.085),0 18px 60px rgba(0,0,0,.45);
  clip-path:polygon(var(--mf-ch-sm) 0,100% 0,100% calc(100% - var(--mf-ch-sm)),calc(100% - var(--mf-ch-sm)) 100%,0 100%,0 var(--mf-ch-sm));
}
body.breakdance .mf-a-panel::before,
body.breakdance .mf-a-panel::after{
  content:'';position:absolute;width:13px;height:13px;z-index:4;pointer-events:none;
  transition:width .35s var(--mf-ease),height .35s var(--mf-ease),border-color .35s var(--mf-ease);
}
body.breakdance .mf-a-panel::before{
  top:0;right:0;border-top:1px solid rgba(140,232,255,.5);border-right:1px solid rgba(140,232,255,.5);
}
body.breakdance .mf-a-panel::after{
  bottom:0;left:0;border-bottom:1px solid rgba(140,232,255,.5);border-left:1px solid rgba(140,232,255,.5);
}
body.breakdance .mf-a-panel:hover::before,
body.breakdance .mf-a-panel:hover::after{width:26px;height:26px;border-color:var(--mf-cyan)}

/* ==========================================================================
   01 - COLD OPEN (pinned, scrubbed)
   ========================================================================== */
/* Cold open shortened from 200vh to 130vh (2026-08-25). The sticky child is
   100vh, so 200vh meant a full dead viewport of scroll before the crew
   section arrived. 130vh keeps 30vh of travel for the fade on --p. */
body.breakdance .mf-a-hero{height:112vh}
/* The site header is position:sticky top:0, so a pinned child at top:0 sits
   underneath it. The stick boxes reserve the header height instead of using a
   top offset, which would push the pin out of the track. */
body.breakdance .mf-a-stick{
  position:sticky;top:0;height:100vh;width:100%;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
  padding:78px 2rem 0;
}
body.breakdance .mf-a-hero-in{
  max-width:1240px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;
}
body.breakdance .mf-a-hero-in .mf-a-h1{max-width:15ch}
body.breakdance .mf-a-hero-s{
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:clamp(1rem,1.9vw,1.24rem);line-height:1.62;color:#A8BDD4;
  max-width:52ch;margin:1.8rem 0 0;
}
body.breakdance .mf-a-cue{
  font-family:var(--mf-mono);font-size:.58rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--mf-muted);margin:3.4rem 0 0;
  display:flex;flex-direction:row;align-items:center;gap:.9rem;
}
body.breakdance .mf-a-cue::after{
  content:'';width:1px;height:34px;
  background:linear-gradient(180deg,var(--mf-cyan),transparent);
}
/* Scrubbed only once the page script is alive. Default markup state is full
   opacity, so a blocked script leaves the hero perfectly readable. */
body.breakdance.mf-a-js .mf-a-hero-in{
  opacity:calc(1 - var(--p,0) * 1.14);
  transform:translate3d(0,calc(var(--p,0) * -70px),0);
}
body.breakdance.mf-a-js .mf-a-hero .mf-a-cue{opacity:calc(1 - var(--p,0) * 3)}

/* ==========================================================================
   02 - CHAPTER, STICKY RAIL
   ========================================================================== */
body.breakdance .mf-a-ch-grid{
  display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,2.1fr);
  gap:clamp(2rem,6vw,5.5rem);align-items:start;
}
body.breakdance .mf-a-ch-rail{
  position:sticky;top:130px;display:flex;flex-direction:column;gap:.55rem;
}
body.breakdance .mf-a-ch-no{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(3.4rem,8vw,5.6rem);line-height:.9;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(140,232,255,.42);
}
body.breakdance .mf-a-ch-yr{
  font-family:var(--mf-mono);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mf-cyan);margin:.4rem 0 0;
}
body.breakdance .mf-a-ch-ti{
  font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.03em;line-height:1.25;color:var(--mf-text);
  margin:.2rem 0 0;
}
body.breakdance .mf-a-ch-body{display:flex;flex-direction:column;padding-top:.6rem}
body.breakdance .mf-a-ch-body .mf-a-p{max-width:62ch;font-size:1.14rem}
body.breakdance .mf-a-pull{
  display:flex;flex-direction:column;margin:1.2rem 0 .4rem;padding:1.6rem 0 1.6rem 1.8rem;
  border-left:1px solid rgba(140,232,255,.34);
}
body.breakdance .mf-a-pull-t{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:clamp(1.05rem,2.1vw,1.42rem);line-height:1.34;letter-spacing:.02em;
  color:var(--mf-text);margin:0;
}

/* ==========================================================================
   03 - TIMELINE, PINNED HORIZONTAL SWEEP
   ========================================================================== */
body.breakdance .mf-a-tl{height:440vh}
body.breakdance .mf-a-tl-stick{
  position:sticky;top:0;height:100vh;width:100%;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;gap:2.6rem;
  padding-top:78px;overflow:hidden;
}
body.breakdance .mf-a-tl-head{
  max-width:1240px;width:100%;margin:0 auto;padding:0 2rem;
  display:flex;flex-direction:column;
}
body.breakdance .mf-a-tl-vp{width:100%;display:flex;flex-direction:row;overflow:hidden}
body.breakdance .mf-a-tl-track{
  /* flex:0 0 auto is load-bearing: as a shrinkable flex item the track would
     collapse to the viewport width and scrollWidth would report almost no
     travel, so the horizontal sweep would barely move. */
  /* max-width:none is load-bearing. post--defaults.css ships
     .bde-div{max-width:100%}, which capped the track at the viewport width:
     offsetWidth reported 1905px instead of its real ~2990px content box, so
     the sweep span computed to ZERO and the track never moved. flex:0 0 auto
     alone does not defeat a max-width. */
  flex:0 0 auto;max-width:none;width:max-content;
  display:flex;flex-direction:row;align-items:stretch;gap:1.5rem;
  padding:0 max(2rem,calc((100vw - 1240px) / 2));
  will-change:transform;
}
body.breakdance.mf-a-js .mf-a-tl-track{transform:translate3d(var(--x,0px),0,0)}
body.breakdance .mf-a-tl-card{
  flex:0 0 clamp(272px,29vw,368px);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:0;height:min(66vh,520px);overflow:hidden;
}
body.breakdance .mf-a-tl-media{
  position:relative;flex:0 0 auto;height:44%;width:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(0,212,255,.10),transparent 70%),rgba(255,255,255,.02);
  box-shadow:inset 0 -1px 0 var(--mf-hair);
}
/* PLACEHOLDER STATE. The .mf-a-tl-ph modifier is the only thing to remove
   once a real in-sim capture replaces the logo: the slot itself stays. */
body.breakdance .mf-a-tl-media img{display:block;width:100%;height:100%;object-fit:cover}
body.breakdance .mf-a-tl-ph img{
  width:auto;height:auto;max-width:44%;max-height:52%;object-fit:contain;opacity:.16;
}
body.breakdance .mf-a-tl-ph::after{
  content:'PLACEHOLDER';position:absolute;bottom:10px;left:0;right:0;
  font-family:var(--mf-mono);font-size:.48rem;letter-spacing:.28em;
  text-align:center;color:var(--mf-muted);opacity:.42;
}
body.breakdance .mf-a-tl-body{
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  flex:1 1 auto;padding:1.5rem 1.6rem 1.7rem;min-height:0;
}
body.breakdance .mf-a-tl-y{
  font-family:var(--mf-mono);font-size:.64rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mf-cyan);margin:0 0 .55rem;
}
body.breakdance .mf-a-tl-d{
  font-family:'Rajdhani',sans-serif;font-size:.97rem;line-height:1.6;
  color:var(--mf-muted);margin:0;
}
body.breakdance .mf-a-tl-rail{
  max-width:1240px;width:100%;margin:0 auto;padding:0 2rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--mf-hair) 12%,var(--mf-hair) 88%,transparent);
  position:relative;
}

/* ==========================================================================
   04 - THE GAP
   ========================================================================== */
body.breakdance .mf-a-gaps{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;
}
body.breakdance .mf-a-gap-c{display:flex;flex-direction:column;padding:2rem 1.8rem}
body.breakdance .mf-a-gap-c .mf-a-p{margin:0;font-size:1rem}

/* ==========================================================================
   05 - THE ANSWER, WORD REVEAL
   ========================================================================== */
/* Chapter 04 scrub shortened from 230vh to 150vh (2026-08-25, owner request).
   The word reveal is driven by normalised progress --p, so the choreography
   survives untouched: it simply resolves over less travel. No JS change. */
body.breakdance .mf-a-ans{height:150vh}
body.breakdance .mf-a-ans-in{
  max-width:1240px;margin:0 auto;width:100%;display:flex;flex-direction:column;
}
body.breakdance .mf-a-ans-t{
  font-family:'Orbitron',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.6rem,4.2vw,3.1rem);line-height:1.14;letter-spacing:.02em;
  color:var(--mf-text);margin:0 0 2rem;max-width:20ch;
}
body.breakdance .mf-a-w{transition:opacity .5s var(--mf-ease),color .5s var(--mf-ease)}
body.breakdance.mf-a-js .mf-a-w{opacity:.16}
body.breakdance.mf-a-js .mf-a-w.mf-on{opacity:1}
body.breakdance.mf-a-js .mf-a-w-hi.mf-on{color:var(--mf-cyan)}
body.breakdance .mf-a-ans-p{
  font-family:'Rajdhani',sans-serif;font-size:clamp(1.02rem,1.8vw,1.2rem);
  line-height:1.72;color:#A8BDD4;max-width:60ch;margin:0;
}
body.breakdance .mf-a-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:2.8rem;
}
body.breakdance .mf-a-stat{display:flex;flex-direction:column;padding:1.5rem 1.4rem}
body.breakdance .mf-a-stat-k{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.75rem;
  letter-spacing:.02em;color:var(--mf-cyan);margin:0 0 .45rem;
}
body.breakdance .mf-a-stat-l{
  font-family:var(--mf-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mf-muted);line-height:1.6;margin:0;
}

/* ==========================================================================
   06 - MISSION
   ========================================================================== */
body.breakdance .mf-a-mis-box{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(2.4rem,5vw,4rem);
}
body.breakdance .mf-a-mis-t{
  font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.35rem,3vw,2.15rem);line-height:1.22;letter-spacing:.02em;
  color:var(--mf-text);margin:0 0 1.5rem;max-width:22ch;
}
body.breakdance .mf-a-mis-p{
  font-family:'Rajdhani',sans-serif;font-size:1.1rem;line-height:1.72;
  color:var(--mf-muted);max-width:64ch;margin:0;
}
body.breakdance img.mf-a-sign{
  display:block;width:auto;max-width:210px;height:auto;margin:2.4rem auto .6rem;
  opacity:.9;filter:brightness(0) invert(1);
}
body.breakdance .mf-a-sign-n{
  font-family:var(--mf-mono);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mf-muted);margin:0;
}

/* ==========================================================================
   07 - CREW
   ========================================================================== */
body.breakdance .mf-a-crew-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;
}
body.breakdance .mf-a-crew-c{display:flex;flex-direction:column;overflow:hidden}
body.breakdance img.mf-a-crew-img{
  display:block;width:100%;height:300px;object-fit:cover;object-position:center 18%;
  filter:grayscale(1) contrast(1.06);transition:filter .45s var(--mf-ease);
}
/* Placeholder portrait: there is no photograph yet, so the logo is contained
   on glass rather than cropped like a face. Remove the .mf-a-crew-ph class
   when the real photo lands. Nothing else has to change. */
body.breakdance .mf-a-crew-ph{position:relative;background:rgba(255,255,255,.02);box-shadow:inset 0 -1px 0 var(--mf-hair)}
body.breakdance .mf-a-crew-ph img.mf-a-crew-img{height:300px;object-fit:contain;padding:3.4rem;opacity:.17;filter:none}
body.breakdance .mf-a-crew-ph::after{
  content:'PHOTO PENDING';position:absolute;bottom:14px;left:0;right:0;
  font-family:var(--mf-mono);font-size:.48rem;letter-spacing:.28em;
  text-align:center;color:var(--mf-muted);opacity:.45;
}
body.breakdance .mf-a-crew-c:hover img.mf-a-crew-img{filter:grayscale(0) contrast(1)}
body.breakdance .mf-a-crew-txt{display:flex;flex-direction:column;padding:1.5rem 1.4rem 1.7rem}
body.breakdance .mf-a-crew-r{
  font-family:var(--mf-mono);font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mf-cyan);margin:0 0 .4rem;
}
body.breakdance .mf-a-crew-n{
  font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.08rem;letter-spacing:.04em;color:var(--mf-text);margin:0 0 .7rem;
}
body.breakdance .mf-a-crew-txt .mf-a-chip{align-self:flex-start;margin-top:auto}
body.breakdance .mf-a-crew-b{
  font-family:'Rajdhani',sans-serif;font-size:.97rem;line-height:1.62;
  color:var(--mf-muted);margin:0 0 1.1rem;
}

/* ==========================================================================
   LINK CHIP - own primitive, not .mf-bd-btn-ghost (that one is hidden below
   1023px by the header rules in mf-hud-chrome.css)
   ========================================================================== */
body.breakdance .mf-a-chip{display:inline-flex;flex:0 0 auto;margin:0}
body.breakdance .mf-a-chip a.bde-button__button.button-atom,
body.breakdance .mf-a-chip .bde-button__button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.62rem 1.15rem;background-color:rgba(255,255,255,.05);color:var(--mf-cyan-lit);
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.34);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background-color .3s var(--mf-ease),color .3s var(--mf-ease);
}
body.breakdance .mf-a-chip a.bde-button__button.button-atom:hover,
body.breakdance .mf-a-chip .bde-button__button:hover{
  background-color:rgba(0,212,255,.14);color:var(--mf-text);
}

/* ==========================================================================
   08 - PARTNERS
   ========================================================================== */
/* PARTNER MARQUEE, v2 (2026-08-25). The hand-built .mf-a-logo-track - two
   copies of seven logos travelling -50 percent - is REPLACED by the same
   Breakdance LogoList the Contact page uses, so one component is maintained
   instead of two that drift apart. Its markup, animation and duplication are
   owned by the element; everything below only reconciles it with the void
   page. The old .mf-a-logo-track / .mf-a-logo / img.mf-a-logo-img rules were
   deleted here in the same pass rather than left behind selecting classes
   that no longer exist on the page. */
body.breakdance .mf-a-logos{
  display:block;width:100%;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 0 var(--mf-hair),inset 0 -1px 0 var(--mf-hair);
  padding:1.6rem 0;
}
body.breakdance .mf-a-logos .mf-a-logo-slider{width:100%}
/* The element ships a white gradient veil at each edge, authored for a light
   page. On the void field it reads as two bright smears, so the fade is
   redrawn as a real alpha mask on the strip itself. rgba with alpha 1 is the
   carrier, not a palette colour. */
body.breakdance .mf-a-logos{
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,1) 8%,rgba(0,0,0,1) 92%,rgba(0,0,0,0));
  mask-image:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,1) 8%,rgba(0,0,0,1) 92%,rgba(0,0,0,0));
}
body.breakdance .mf-a-logos .mf-a-logo-slider [class*='gradient']{display:none}

body.breakdance .mf-a-legal{
  font-family:var(--mf-mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mf-muted);opacity:.6;line-height:1.9;
  margin:1.6rem 0 0;text-align:center;
}

/* ==========================================================================
   09 - CTA
   ========================================================================== */
body.breakdance .mf-a-cta-box{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(2.6rem,5vw,4.2rem);
}
body.breakdance .mf-a-cta-row{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:.8rem;margin-top:2.2rem;
}

/* ==========================================================================
   SOCIAL ROW - monoline CSS-mask icons
   The design forbids an icon library default and forbids emoji, so each glyph
   is an inline SVG data URI driven through mask-image: it inherits the cyan
   via background-color and needs no extra HTTP request. The Button element
   still carries its real text label, which is what a screen reader reads; the
   label is clipped visually, never display:none.
   ========================================================================== */
body.breakdance .mf-a-soc-wrap{
  display:flex;flex-direction:column;align-items:center;width:100%;
  margin:2.6rem 0 0;padding:1.9rem 0 0;
  box-shadow:inset 0 1px 0 var(--mf-hair);
}
body.breakdance .mf-a-soc-note{
  font-family:var(--mf-mono);font-size:.58rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--mf-muted);margin:0 0 1.1rem;text-align:center;
}
body.breakdance .mf-a-soc-row{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:.7rem;
}
/* Monoline brand glyphs as inline data URIs, scoped to the social row so
   nothing here declares :root - mf-hud-tokens.css stays the single source.
   They are masks, so the colour comes from background-color and follows the
   hover state for free. */
body.breakdance .mf-a-soc-row{
  --mf-i-yt:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.2%22%20y%3D%225.4%22%20width%3D%2219.6%22%20height%3D%2213.2%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M10.3%209.6l5.2%202.4-5.2%202.4z%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-ig:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%223.2%22%20width%3D%2217.6%22%20height%3D%2217.6%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.1%22%2F%3E%3Ccircle%20cx%3D%2217.1%22%20cy%3D%226.9%22%20r%3D%221.15%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-tt:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.1%203.4v10.8a3.35%203.35%200%201%201-2.9-3.32%22%2F%3E%3Cpath%20d%3D%22M14.1%203.4c.45%202.6%202.05%204.25%204.6%204.55%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-x:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.4%204.4l15.2%2015.2%22%2F%3E%3Cpath%20d%3D%22M19.6%204.4L4.4%2019.6%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-li:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%223.2%22%20width%3D%2217.6%22%20height%3D%2217.6%22%20rx%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M7.5%2010.5v6.1%22%2F%3E%3Cpath%20d%3D%22M7.5%207.5v.02%22%2F%3E%3Cpath%20d%3D%22M11.6%2016.6v-6.1%22%2F%3E%3Cpath%20d%3D%22M11.6%2013.1c0-1.45%201.05-2.5%202.45-2.5s2.45%201.05%202.45%202.5v3.5%22%2F%3E%3C%2Fsvg%3E");
}
body.breakdance .mf-a-soc{display:inline-flex;flex:0 0 auto;margin:0}
body.breakdance .mf-a-soc a.bde-button__button.button-atom,
body.breakdance .mf-a-soc .bde-button__button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;background-color:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background-color .3s var(--mf-ease),box-shadow .3s var(--mf-ease);
}
body.breakdance .mf-a-soc a.bde-button__button.button-atom:hover,
body.breakdance .mf-a-soc .bde-button__button:hover{
  background-color:rgba(0,212,255,.14);box-shadow:inset 0 0 0 1px rgba(0,212,255,.45);
}
/* Label kept in the accessibility tree, clipped visually. */
body.breakdance .mf-a-soc .button-atom__text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
body.breakdance .mf-a-soc a.bde-button__button.button-atom::before,
body.breakdance .mf-a-soc .bde-button__button::before{
  content:'';width:19px;height:19px;flex:0 0 auto;
  background-color:var(--mf-cyan-lit);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .3s var(--mf-ease);
}
body.breakdance .mf-a-soc a.bde-button__button.button-atom:hover::before,
body.breakdance .mf-a-soc .bde-button__button:hover::before{background-color:var(--mf-cyan)}
body.breakdance .mf-a-soc-yt .bde-button__button::before{-webkit-mask-image:var(--mf-i-yt);mask-image:var(--mf-i-yt)}
body.breakdance .mf-a-soc-ig .bde-button__button::before{-webkit-mask-image:var(--mf-i-ig);mask-image:var(--mf-i-ig)}
body.breakdance .mf-a-soc-tt .bde-button__button::before{-webkit-mask-image:var(--mf-i-tt);mask-image:var(--mf-i-tt)}
body.breakdance .mf-a-soc-x  .bde-button__button::before{-webkit-mask-image:var(--mf-i-x);mask-image:var(--mf-i-x)}
body.breakdance .mf-a-soc-li .bde-button__button::before{-webkit-mask-image:var(--mf-i-li);mask-image:var(--mf-i-li)}

/* ==========================================================================
   MOTION
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  body.breakdance.mf-a-js .mf-a-hero-in{opacity:1;transform:none}
  body.breakdance.mf-a-js .mf-a-tl-track{transform:none}
  body.breakdance.mf-a-js .mf-a-w{opacity:1}
  body.breakdance .mf-a-tl-vp{overflow-x:auto}
  /* the LogoList animates its own inner track; kill it at the element */
  body.breakdance .mf-a-logo-slider *{animation:none!important}
  body.breakdance .mf-a-logos{overflow-x:auto}
}

/* ==========================================================================
   RESPONSIVE - MUST STAY LAST IN THIS FILE
   Anything appended after a media query overrides it.
   ========================================================================== */
@media(max-width:1023px){
  body.breakdance .mf-a-sec > .section-container{padding:4.2rem 1.4rem}
  body.breakdance .mf-a-stick{padding:64px 1.4rem 0}
  body.breakdance .mf-a-tl-stick{padding-top:64px}
  body.breakdance .mf-a-hero{height:104vh}
  body.breakdance .mf-a-ans{height:140vh}
  body.breakdance .mf-a-tl{height:400vh}
  body.breakdance .mf-a-ch-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  body.breakdance .mf-a-ch-rail{position:static;top:auto}
  body.breakdance .mf-a-crew-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.breakdance .mf-a-tl-head{padding:0 1.4rem}
  body.breakdance .mf-a-tl-track{padding:0 1.4rem}
}
@media(max-width:767px){
  body.breakdance .mf-a-hero{height:150vh}
  body.breakdance .mf-a-tl{height:360vh}
  body.breakdance .mf-a-gaps{grid-template-columns:minmax(0,1fr)}
  body.breakdance .mf-a-stats{grid-template-columns:minmax(0,1fr)}
  body.breakdance .mf-a-crew-grid{grid-template-columns:minmax(0,1fr)}
  body.breakdance img.mf-a-crew-img{height:320px}
  body.breakdance .mf-a-tl-card{flex:0 0 78vw;min-height:min(52vh,380px)}
  body.breakdance .mf-a-ch-body .mf-a-p{font-size:1.05rem}
}

/* ==========================================================================
   10 - TIGHTENED APPROACH TO THE CREW SECTION + FLOATING FOUNDER PORTRAIT
   Appended after the responsive block ON PURPOSE: this block carries its own
   under-1024 rules at its end, so it stays internally ordered.
   ========================================================================== */

/* The crew block now sits directly under the cold open. The cold open already
   ends on a full viewport of held type, so a second 6rem of air on top of the
   crew head read as a gap rather than as rhythm. */
body.breakdance .mf-a-sec-tight > .section-container{padding-top:1.1rem}

/* --------------------------------------------------------------------------
   FLOATING FOUNDER PORTRAIT (.mf-a-por), section 713

   SIDE CHOSEN BY MEASUREMENT, not by taste. A 10x16 luminance grid of the
   source puts the whole subject in columns 3 to 8 with the left third at 0:
   the frame is void on its left and the man sits centre-right. Held on the
   LEFT of the statement his mass therefore lands against the panel edge and
   he reads into the copy. Held on the right the empty third would have opened
   a hole between the text and him.

   THE SOURCE HAD NO ALPHA. The uploaded PNG was believed to be transparent;
   measured, it was 0 percent transparent with all four corners at opaque
   rgb(0,0,0). It is now keyed server side by a FLOOD FILL from the four
   corners, not by a luminance threshold: the subject wears a black hoodie, so
   any threshold on brightness alone eats him. Contiguity is what separates
   the field from the garment. Result is 72 percent transparent with no black
   island left, including the wedge between his raised arm and his head.
   Attachment 11064, WebP q88 with alpha, 118 KB. Nothing here needs a blend
   mode or a mask any more.
   -------------------------------------------------------------------------- */

/* NO z-index and NO stacking context is needed on this wrapper: the portrait
   is placed AFTER the panel in the tree, so DOM order alone puts it on top. */
body.breakdance .mf-a-por{
  position:relative;display:block;width:100%;max-width:250px;
  margin:1.8rem auto 0;pointer-events:none;
}
body.breakdance img.mf-a-por-img{
  display:block;width:100%;height:auto;
  /* positioned so it paints above the bloom, z-index left at auto. */
  position:relative;
}
/* Cyan bloom seated behind him so he is lit by the page rather than pasted
   onto it. filter:blur, not box-shadow: the panel beside him is clipped. */
body.breakdance .mf-a-por::before{
  content:'';position:absolute;left:2%;right:2%;top:14%;bottom:-4%;z-index:0;
  background:radial-gradient(58% 54% at 54% 56%,rgba(0,212,255,.18),rgba(0,212,255,0) 74%);
  filter:blur(22px);
}
/* One-shot scan pass on reveal. It rides the wrapper box, which is exactly
   the keyed image box, so there is no rectangle to hide. */
body.breakdance .mf-a-por::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(0,212,255,0) 42%,rgba(0,212,255,.34) 50%,rgba(0,212,255,0) 58%);
}

/* Entrance. Overrides the generic .mf-rv translateY with a diagonal rise from
   the left, longer and slower than a card reveal because it is a person
   arriving beside his own words. Specificity is html + body + class, so it
   beats html.mf-js .mf-rv in chrome.css whatever the load order. */
html.mf-js body.breakdance .mf-a-por.mf-rv{
  opacity:0;transform:translate3d(-34px,34px,0) scale(.965);
  transition:opacity 1.05s var(--mf-ease),transform 1.2s var(--mf-ease);
}
html.mf-js body.breakdance .mf-a-por.mf-rv.mf-in{opacity:1;transform:none}
html.mf-js body.breakdance .mf-a-por.mf-in::after{animation:mf-a-scan 1.7s var(--mf-ease) .45s 1}
@keyframes mf-a-scan{
  0%{opacity:0;transform:translateY(-56%)}
  16%{opacity:1}
  84%{opacity:1}
  100%{opacity:0;transform:translateY(56%)}
}

/* --------------------------------------------------------------------------
   POSITIONING, ANCHORED TO THE TEXT COLUMN AND NOT TO THE CONTAINER MARGIN.

   The first two attempts derived left: from (100vw - 1240px) / 2, which is the
   container's own margin. That margin collapses to zero as soon as the
   viewport approaches 1240px while the text column keeps its width, so the
   portrait walked straight onto the paragraph on a narrower screen. Measured
   on the owner's 1276px viewport: it crossed the title by 165px.

   The panel is centred and the copy is centred inside it, so the text column
   is centred on the SECTION at every width. Anchoring the portrait's right
   edge to 50% minus half the text column is therefore constant by
   construction: the clearance is the same at 1280 and at 2560, and nothing
   has to be re-tuned per breakpoint.

   --mf-mis-half is half of the widest text block (the h2 at 22ch of Orbitron,
   measured at about 610px once the clamp caps the size at 2.15rem, so it does
   not grow past 1280px either).
   -------------------------------------------------------------------------- */
@media(min-width:1280px){
  body.breakdance .mf-a-mis-sec{--mf-mis-half:320px;--mf-por-gap:30px}
  body.breakdance .mf-a-por{
    position:absolute;margin:0;max-width:none;left:auto;
    right:calc(50% + var(--mf-mis-half) + var(--mf-por-gap));
    /* Not bottom:0. Absolute offsets resolve against the container's PADDING
       box, and that container pads 6rem, so 0 hangs his feet 6rem below the
       panel floor. */
    bottom:6rem;
    /* Whatever is left between the viewport edge and his anchored right edge,
       capped so he never outgrows the composition. */
    width:min(300px,calc(50vw - var(--mf-mis-half) - var(--mf-por-gap) - 16px));
  }
}
/* Under 1280px the gutter beside the text column is too narrow to hold a
   figure at all, so he stops floating and closes the statement instead,
   tucked under the panel floor rather than dropped below it. */
@media(max-width:1279px){
  body.breakdance .mf-a-por{max-width:210px;margin:-2.2rem auto 0}
}
@media(max-width:767px){
  body.breakdance .mf-a-por{max-width:168px;margin:-1.6rem auto 0}
}
@media(prefers-reduced-motion:reduce){
  html.mf-js body.breakdance .mf-a-por.mf-rv{opacity:1;transform:none;transition:none}
  html.mf-js body.breakdance .mf-a-por.mf-in::after{animation:none}
}