/* ==========================================================================
   Rhinomed homepage 2026  (rm-home.css)
   Scope: everything under body.rm-home (template-rm-home.php adds the class).
   Source of truth: design/build/SPEC.md + design_handoff_rhinomed_site/README.md

   Consolidated 2026-09-08 from the layered build file. Every value here is the
   rule that won the cascade in that file; the golden computed-style capture
   (design/build/golden.json) is identical. Where a quirk is reproduced on
   purpose it is marked "cascade note".

   Contents
     0  Tokens
     1  Page state, GeneratePress resets
     2  Header (GeneratePress + Menu Plus)
     3  Type, links, selection
     4  Shared section pieces
     5  Hero            [rm_hero]
     6  Brand sections
     7  Platform        section, map rest, hover, selected, blurb, idle, flood
     8  Datasheet
     9  Pipeline
    10  Company
    11  News
    12  (footer moved to rm-site.css, loaded site-wide)
    13  Two-column grid (shared)
    14  Responsive: 1024 / 767 / 640
    15  hover: none
    16  prefers-reduced-motion
   ========================================================================== */

/* Inter is enqueued from inc/rm-home.php */

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
body.rm-home {
  --rm-black: #000;
  --rm-white: #fff;
  --mute-blue: #006FBA;
  --mute-cyan: #00ADD7;
  --turbine-orange: #EA7600;
  --rs-grey: #F2F2F2;
  --g800: #2A2A2A;
  --g700: #404040;
  --g600: #595959;
  --g500: #757575;
  --g400: #9E9E9E;
  --g300: #C4C4C4;
  --g200: #E0E0E0;
  --font-display: 'Brandon Grotesque', sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --rm-max: 1600px;
  --pad-min: 40px;
  --pad-x: max(var(--pad-min), calc((100% - var(--rm-max)) / 2 + var(--pad-min)));
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Page state and GeneratePress resets
   -------------------------------------------------------------------------- */
body.rm-home {
  background: var(--rm-black);
  color: var(--rm-white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .8s var(--ease), color .8s var(--ease);
}

/* Colour takeover: JS sets data-rm-theme from the brand section at mid-viewport */
body.rm-home[data-rm-theme="mute"]      { background: #95358C;      color: #fff; }
body.rm-home[data-rm-theme="mutetape"]  { background: #006FBA;      color: #fff; }
body.rm-home[data-rm-theme="turbine"]   { background: #FFC72C;      color: #000; }
body.rm-home[data-rm-theme="rhinoswab"] { background: var(--rs-grey); color: #000; }
body.rm-home[data-rm-theme="dark"]      { background: var(--rm-black); color: #fff; }

/* GP wrappers: full bleed, no background. !important beats GP's container width and backgrounds. */
body.rm-home #page.grid-container,
body.rm-home .site.grid-container,
body.rm-home .site-content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.rm-home #page,
body.rm-home .site-content {
  background: transparent !important;
}

body.rm-home .rm-main {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

body.rm-home .rm-main > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Classic theme: core group renders an inner wrapper. Flatten it so section grids see their real children. */
body.rm-home .wp-block-group__inner-container {
  display: contents;
}

body.rm-home .rm-main .wp-block-columns,
body.rm-home .rm-main .wp-block-column {
  margin: 0;
  padding: 0;
}

body.rm-home .rm-main .alignfull {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
}

/* --------------------------------------------------------------------------
   2. Header: shared with the rest of the site (rm-site.css): solid black bar,
      white nav and logo, in normal flow above the hero.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. Type, links, selection
   -------------------------------------------------------------------------- */
body.rm-home .rm-main {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.rm-home .rm-main p {
  margin: 0;
}

body.rm-home .rm-main ul,
body.rm-home .rm-main ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Headings: display face, uppercase, inherit colour. Weight and size are set per class. */
body.rm-home .rm-main h1,
body.rm-home .rm-main h2,
body.rm-home .rm-main h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: inherit;
  margin: 0;
}

body.rm-home .rm-main img {
  max-width: 100%;
  height: auto;
  display: block;
}

body.rm-home .rm-main a {
  color: inherit;
  text-decoration: none;
  transition: none;
}

body.rm-home .rm-main a:hover,
body.rm-home .rm-main a:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

body.rm-home ::selection {
  background: #fff;
  color: #000;
}

body.rm-home .rm-section--white ::selection,
body.rm-home[data-rm-theme="turbine"] .rm-section--brand ::selection,
body.rm-home[data-rm-theme="rhinoswab"] .rm-section--brand ::selection {
  background: #000;
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Shared section pieces
   -------------------------------------------------------------------------- */
body.rm-home .rm-section {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
}

body.rm-home .rm-section--white {
  background: #fff;
  color: #000;
}

body.rm-home .rm-section--black {
  background: #000;
  color: #fff;
}

/* Brand sections have no background of their own: body colour shows through */
body.rm-home .rm-section--brand {
  background: transparent;
}

/* Display heading (Brandon 700 40px). Class rules that carry margins are prefixed with
   .rm-main so they outrank the `.rm-main h2` / `.rm-main p` resets above. */
body.rm-home .rm-main .rm-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .02em;
  margin: 0 0 28px;
}

body.rm-home .rm-main .rm-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .1em;
  line-height: 1.2;
  margin: 0 0 12px;
}

body.rm-home .rm-muted {
  font-size: 15px;
  line-height: 1.55;
  color: var(--g400);
}

/* Hairline list (pipeline, footer investors) */
body.rm-home .rm-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.4;
}

body.rm-home .rm-rules li {
  padding: 16px 0;
  border-top: 1px solid var(--g700);
  margin: 0;
}

body.rm-home .rm-rules li:last-child {
  border-bottom: 1px solid var(--g700);
}

body.rm-home .rm-rules--tight {
  font-size: 15px;
}

body.rm-home .rm-rules--tight li {
  padding: 10px 0;
  border-color: var(--g800);
}

body.rm-home .rm-rules--tight li:last-child {
  border-bottom-color: var(--g800);
}

/* Placeholder image slot */
body.rm-home .rm-slot {
  position: relative;
  width: 100%;
  min-height: 240px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 0;
  margin: 0;
  padding: 0;
  opacity: 1;
}

body.rm-home .rm-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed currentColor;
  opacity: .35;
  pointer-events: none;
}

body.rm-home .rm-slot--tall {
  height: 70vh;
}

body.rm-home .rm-slot__label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  opacity: .5;
  margin: 0;
  padding: 0 16px;
}

/* Brand text link */
body.rm-home .rm-brand__link {
  margin: 0;
  font-size: 13px;
  line-height: 1;
}

body.rm-home .rm-brand__link a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
}

body.rm-home .rm-brand__link a:hover,
body.rm-home .rm-brand__link a:focus-visible {
  text-decoration: none;
  opacity: .7;
}

/* --------------------------------------------------------------------------
   5. Hero  (.rm-section--hero, emitted by [rm_hero])
   -------------------------------------------------------------------------- */
body.rm-home .rm-section--hero,
body.rm-home .rm-hero {
  height: 340vh;
  padding: 0;
  margin: 0;
  background: #000;
  color: #fff;
}

body.rm-home .rm-hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

body.rm-home .rm-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

body.rm-home .rm-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  margin: 0;
  max-width: none;
}

body.rm-home .rm-hero__poster.is-hidden {
  display: none;
}

body.rm-home .rm-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}

body.rm-home .rm-hero__copy {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 96px;
  max-width: none;
  pointer-events: none;
}

body.rm-home .rm-hero__word {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(56px, 8.4vw, 148px);
  line-height: .85;
  letter-spacing: -.02em;
  color: #fff;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

body.rm-home .rm-main .rm-hero__line {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  color: var(--g200);
  max-width: none;
  margin: 20px 0 0;
}
body.rm-home .rm-main .rm-hero__line strong,
body.rm-home .rm-main .rm-hero__line b { color: #fff; font-weight: 600; }

body.rm-home .rm-hero__progress {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 72px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
  pointer-events: none;
}

body.rm-home .rm-hero__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
}

/* --------------------------------------------------------------------------
   6. Brand sections  (.rm-section--brand .rm-brand--mute|mutetape|turbine|rhinoswab)
   -------------------------------------------------------------------------- */
body.rm-home .rm-section--brand {
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding: 80px var(--pad-x);
}

/* Grid itself is in section 13. Core sets align-items: normal !important on columns. */
body.rm-home .rm-brand__grid {
  align-items: center !important;
  margin: 0;
}

body.rm-home .rm-brand__grid > .wp-block-column {
  flex: none;
  width: auto;
  min-width: 0;
  margin: 0;
  flex-basis: auto !important; /* core: flex-basis 100% !important below 782px */
}

body.rm-home .rm-brand__text {
  display: block;
}

body.rm-home .rm-brand__media {
  display: block;
  min-width: 0;
}

/* Alternate sides: MUTE image left, Mouth Tape right, Turbine left, Rhinoswab right */
body.rm-home .rm-brand--turbine .rm-brand__media {
  order: -1;
}

body.rm-home .rm-main .rm-brand__logo {
  height: 44px;
  width: auto;
  max-width: min(320px, 80%);
  margin: 0 0 32px;
}

body.rm-home .rm-brand__logo img {
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

body.rm-home .rm-brand--turbine .rm-brand__logo img {
  filter: invert(1);
}

body.rm-home .rm-main .rm-brand__headline {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 84px);
  line-height: .88;
  letter-spacing: -.015em;
  max-width: 11ch;
  margin: 0 0 28px;
  color: inherit;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

body.rm-home .rm-main .rm-brand__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  opacity: .9;
  max-width: 40ch;
  margin: 0 0 28px;
}

/* Turbine copy is always black, whatever the page colour behind it */
body.rm-home .rm-main .rm-brand--turbine,
body.rm-home .rm-main .rm-brand--turbine .rm-brand__link {
  color: #000;
}

body.rm-home .rm-main .rm-brand--turbine .rm-slot {
  border-color: rgba(0, 0, 0, .35);
  color: #000;
}

/* --------------------------------------------------------------------------
   7. Platform  (.rm-section--platform + [rm_venn])
   -------------------------------------------------------------------------- */

/* 7a. Section */
body.rm-home .rm-section--platform {
  padding: 96px var(--pad-x) 104px;
  background: #000;
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.rm-home .rm-section--platform .wp-block-columns {
  position: relative;
  z-index: 2;
}

body.rm-home .rm-main .rm-platform__h {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: .9;
  letter-spacing: -.01em;
  margin: 0 0 32px;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Cascade note: these paragraph rules also style .rmv-blurb__text
   (both are <p> inside the section) and outrank their own class rules: the blurb
   text renders at 18px / 46ch / 16px bottom margin (17px / 1.55 when it is the
   last child), and the idle line's own colour is #000 (its spans set their own). */
body.rm-home .rm-section--platform p {
  font-size: 18px;
  line-height: 1.5;
  max-width: 46ch;
  margin: 0 0 16px;
  color: #000;
}

body.rm-home .rm-section--platform p:last-child,
body.rm-home .rm-section--platform p + p {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 0;
}

body.rm-home .rm-main .rm-platform__lead {
  margin: 0 0 20px;
  color: #fff;
}

body.rm-home .rm-main .rm-platform__body {
  margin: 0;
  color: var(--g300);
}

body.rm-home .rm-main .rm-section--platform .rm-platform__h,
body.rm-home .rm-main .rm-section--platform .rm-platform__lead,
body.rm-home .rm-main .rm-section--platform .rm-platform__body {
  transition: color .5s var(--ease) .2s;
}

body.rm-home .rm-main .rm-section--platform.is-flooded .rm-platform__h,
body.rm-home .rm-main .rm-section--platform.is-flooded .rm-platform__lead,
body.rm-home .rm-main .rm-section--platform.is-flooded .rm-platform__body,
body.rm-home .rm-main .rm-section--platform.is-flooded .rm-venn2 {
  color: var(--ink);
}

/* 7b. Map at rest: monochrome discs, white labels */
.rm-venn2 {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  user-select: none;
  overflow: visible;
  border: 0;
}

.rm-venn2 svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.rm-venn2 .rmv-dom {
  transform-origin: 500px 500px;
  transform-box: view-box;
  will-change: transform;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
}

.rm-venn2 .rmv-fill {
  fill: #fff;
  opacity: .09;
  mix-blend-mode: normal;
  filter: none;
  transition: fill .4s var(--ease), opacity .4s var(--ease);
}

.rm-venn2 .rmv-label {
  fill: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .18em;
  opacity: .7;
  transition: font-size .35s var(--ease), opacity .3s var(--ease);
}

.rm-venn2 .rmv-node {
  cursor: pointer;
  outline: none;
}

.rm-venn2 .rmv-node-hit {
  fill: transparent;
}

.rm-venn2 .rmv-node:focus-visible .rmv-node-hit {
  fill: rgba(255, 255, 255, .08);
  stroke: currentColor;
  stroke-width: 1.5;
}

.rm-venn2 .rmv-node.is-active:focus-visible .rmv-node-hit {
  stroke: var(--ink);
}

.rm-venn2 .rmv-node-dot {
  fill: var(--c);
  stroke: none;
  stroke-width: 2;
  transition: r .3s var(--ease), fill .4s var(--ease);
}

.rm-venn2 .rmv-node--dev .rmv-node-dot {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 3 3;
  opacity: .6;
}

.rm-venn2 .rmv-node text {
  fill: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .12em;
  opacity: .7;
  transition: font-size .35s var(--ease), transform .35s var(--ease), opacity .3s var(--ease), fill .4s var(--ease);
}


/* Close cross, drawn in place of the dot once selected */
.rm-venn2 .rmv-node-x line {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.rm-venn2 .rmv-core {
  transition: opacity .3s var(--ease);
}

.rm-venn2 .rmv-core circle {
  fill: #fff;
}

.rm-venn2 .rmv-core text {
  fill: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .22em;
}

/* 7c. Hover: domain grows (JS transform) and tints; its labels come forward */
.rm-venn2 .rmv-dom:hover .rmv-fill {
  fill: var(--c);
  opacity: .35;
}

.rm-venn2 .rmv-dom.is-hover .rmv-fill {
  fill: var(--c);
  opacity: .38;
}

.rm-venn2 .rmv-dom.is-hover {
  z-index: 1;
}

.rm-venn2[data-hover]:not([data-hover=""]) .rmv-label {
  opacity: .35;
}

.rm-venn2[data-hover]:not([data-hover=""]) .rmv-label[data-dom] {
  transition: opacity .3s var(--ease);
}

.rm-venn2[data-hover]:not([data-hover=""]) .rmv-label.is-hover {
  opacity: 1;
}

.rm-venn2 .rmv-label.is-hover {
  font-size: 21px;
}

.rm-venn2[data-hover]:not([data-hover=""]) .rmv-node {
  opacity: .45;
  transition: opacity .3s var(--ease);
}

.rm-venn2[data-hover]:not([data-hover=""]) .rmv-node.is-hover {
  opacity: 1;
}

.rm-venn2 .rmv-node.is-hover text {
  font-size: 18px;
}

.rm-venn2 .rmv-node.is-hover .rmv-node-dot {
  r: 8;
}

/* Pointer directly on a product name: 22px per spec, whichever domain is hovered */
.rm-venn2 .rmv-node:hover text,
.rm-venn2 .rmv-node:focus-visible text,
.rm-venn2 .rmv-node.is-hover:hover text {
  font-size: 22px;
  opacity: 1;
}

.rm-venn2 .rmv-node:hover .rmv-node-dot,
.rm-venn2 .rmv-node:focus-visible .rmv-node-dot {
  r: 10;
}

/* 7d. Selected: section floods with the domain colour, only the selected product stays */
.rm-venn2[data-active]:not([data-active=""]) .rmv-dom,
.rm-venn2[data-active]:not([data-active=""]) .rmv-label,
.rm-venn2[data-active]:not([data-active=""]) .rmv-core,
.rm-venn2[data-active]:not([data-active=""]) .rmv-node:not(.is-selected) {
  opacity: 0;
  pointer-events: none;
}

.rm-venn2[data-active]:not([data-active=""]) .rmv-node.is-selected {
  opacity: 1;
}

.rm-venn2 .rmv-node.is-active text {
  fill: var(--ink);
  opacity: 1;
}

.rm-venn2 .rmv-node.is-active .rmv-node-dot {
  fill: var(--ink);
  stroke: var(--ink);
}

/* Selected title: large, in ink, shifted clear of the cross. The :hover variants keep
   it above the hover rules and the hover:none reset (touch keeps :hover on a tapped node). */
.rm-venn2 .rmv-node.is-selected text,
.rm-venn2 .rmv-node.is-selected:hover text {
  font-size: 40px;
  fill: var(--ink);
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}

.rm-venn2 .rmv-node.is-selected text[text-anchor="start"] { transform: translate(28px, 6px); }
.rm-venn2 .rmv-node.is-selected text[text-anchor="end"]   { transform: translate(-28px, 6px); }
.rm-venn2 .rmv-node.is-selected text[text-anchor="middle"] { transform: translate(0, 26px); }

.rm-venn2 .rmv-node.is-selected .rmv-node-dot {
  r: 12;
  fill: var(--ink);
  opacity: 0;
}

.rm-venn2 .rmv-node--dev.is-active .rmv-node-dot {
  fill: none;
  stroke: var(--ink);
}

.rm-venn2 .rmv-node.is-selected .rmv-node-x {
  transform: scale(1.25);
  transform-box: fill-box;
  transform-origin: center;
}

.rm-venn2 .rmv-node.is-selected .rmv-node-x line {
  opacity: 1;
}

.rm-venn2 .rmv-node.is-selected:hover .rmv-node-x line {
  opacity: .6;
}

/* Flood disc (appended by JS, scaled from the domain centre) */
.rmv-flood {
  position: absolute;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform .6s cubic-bezier(.7, 0, .2, 1), opacity .01s;
}

.rmv-flood.is-on {
  opacity: 1;
}

/* 7e. Blurb: opens below the selected title (floating) or under the map (narrow) */
.rm-venn2 .rmv-blurb {
  position: absolute;
  z-index: 3;
  width: min(380px, 56%);
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  color: var(--ink);
}

.rm-venn2 .rmv-blurb.is-floating {
  text-align: left;
}

.rm-venn2 .rmv-blurb:not(.is-floating) {
  position: relative;
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid currentColor;
}

.rm-venn2 .rmv-blurb[hidden],
.rm-venn2 .rmv-blurb__item[hidden] {
  display: none;
}

.rm-venn2 .rmv-blurb.is-open {
  opacity: 1;
  transform: none;
}

/* .rmv-blurb__text: see the cascade note on the section paragraph rules above */
body.rm-home .rm-main .rm-section--platform .rmv-blurb p {
  color: inherit;
}

body.rm-home .rm-main .rm-section--platform.is-flooded .rmv-blurb,
body.rm-home .rm-main .rm-section--platform.is-flooded .rmv-blurb p,
body.rm-home .rm-main .rm-section--platform.is-flooded .rmv-blurb a {
  color: var(--ink);
  transition: color .5s var(--ease) .2s;
}

.rm-venn2 .rmv-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .1em;
  padding: 12px 20px;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
  transition: opacity .2s var(--ease);
}

.rm-venn2 .rmv-btn:hover {
  opacity: .7;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   8. Datasheet  (.rm-section--datasheet .rm-section--black)
   -------------------------------------------------------------------------- */
body.rm-home .rm-section--datasheet {
  padding: 88px var(--pad-x);
}

body.rm-home .rm-data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #333;
  border: 1px solid #333;
  margin: 0;
  padding: 0;
}

body.rm-home .rm-data__cell {
  background: #000;
  color: #fff;
  padding: 36px 32px 40px;
  margin: 0;
  min-width: 0;
}

body.rm-home .rm-data__fig {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(52px, 6vw, 96px);
  line-height: .85;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  color: #fff;
}

body.rm-home .rm-data__label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 1.2;
  margin: 0; /* cascade note: the 22px top margin never applied */
  color: #fff;
}

body.rm-home .rm-data__note {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--g300);
  margin: 0; /* cascade note: the 8px top margin never applied */
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   9. Pipeline + Compliance  (.rm-section--pipeline .rm-section--black)
   -------------------------------------------------------------------------- */
body.rm-home .rm-section--pipeline {
  padding: 72px var(--pad-x);
  border-top: 1px solid var(--g800);
}

body.rm-home .rm-section--pipeline p {
  font-size: 18px;
  line-height: 1.5;
  max-width: 44ch;
  margin: 0 0 20px;
}

body.rm-home .rm-section--pipeline p.rm-muted {
  font-size: 15px;
  line-height: 1.55;
  color: var(--g400);
  margin: 0;
}

body.rm-home .rm-main .rm-section--pipeline .wp-block-column > p {
  margin: 0 0 20px;
}

body.rm-home .rm-main .rm-section--pipeline .wp-block-column > p:last-child {
  margin-bottom: 0;
}

/* Divider sits in the gutter so column 2 text aligns with the other sections */
body.rm-home .rm-section--pipeline .wp-block-columns > .wp-block-column:nth-child(2) {
  position: relative;
}

body.rm-home .rm-section--pipeline .wp-block-columns > .wp-block-column:nth-child(2)::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--g800);
}

/* --------------------------------------------------------------------------
   10. Company  (.rm-section--company .rm-section--white)
   -------------------------------------------------------------------------- */
body.rm-home .rm-section--company {
  padding: 88px var(--pad-x);
}

body.rm-home .rm-main .rm-company__h {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: .9;
  letter-spacing: -.01em;
  margin: 0 0 28px;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

body.rm-home .rm-section--company p {
  font-size: 18px;
  line-height: 1.5;
  max-width: 50ch;
  margin: 0 0 16px;
  color: #000;
}

body.rm-home .rm-section--company p + p,
body.rm-home .rm-section--company p.rm-muted {
  font-size: 15px;
  line-height: 1.55;
  color: var(--g600);
  max-width: 54ch;
  margin: 0;
}

body.rm-home .rm-main .rm-company__lead {
  margin: 0 0 20px;
}

body.rm-home .rm-main .rm-company__body {
  margin: 0;
}

/* Nested columns: Board | Management */
body.rm-home .rm-section--company .wp-block-column > .wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-top: 8px;
  margin: 0;
}

body.rm-home .rm-people {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #000;
}

body.rm-home .rm-people li {
  padding: 14px 0;
  border-top: 1px solid #000;
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
  color: #000;
}

body.rm-home .rm-people__role {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--g600);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   11. News  (.rm-section--news .rm-section--black)
   -------------------------------------------------------------------------- */
body.rm-home .rm-section--news {
  padding: 72px var(--pad-x);
}

body.rm-home .rm-news {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--g700);
}

/* Cascade note: the 110px date column applies at every width (the phone
   stacking below only moves items into column 1; see section 14). */
body.rm-home .rm-news li {
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 24px;
  align-items: start;
  padding: 18px 0;
  margin: 0;
  border-top: 1px solid var(--g700);
  font-size: 18px;
  line-height: 1.4;
}

/* Date is printed after the title by core; pull it into column 1 */
body.rm-home .rm-news li .wp-block-latest-posts__post-date {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--g400);
  padding-top: 3px;
  margin: 0;
}

body.rm-home .rm-news li > a {
  grid-column: 2;
  grid-row: 1;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
}

body.rm-home .rm-news li > a:hover,
body.rm-home .rm-news li > a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .2em;
}

body.rm-home .rm-main .rm-section--news .rm-brand__link {
  margin-top: 32px;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   13. Shared two-column grid: equal halves, 64px gutter
   (brand, platform, pipeline, company outer, news)
   -------------------------------------------------------------------------- */
body.rm-home .rm-main .rm-section--brand .rm-brand__grid,
body.rm-home .rm-main .rm-section--platform .wp-block-columns,
body.rm-home .rm-main .rm-section--pipeline .wp-block-columns,
body.rm-home .rm-main .rm-section--company .wp-block-columns:not(.wp-block-column .wp-block-columns),
body.rm-home .rm-main .rm-section--news .wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  row-gap: 0;
}

body.rm-home .rm-main .rm-section--pipeline .wp-block-columns .wp-block-column,
body.rm-home .rm-main .rm-section--news .wp-block-columns .wp-block-column,
body.rm-home .rm-main .rm-section--company .wp-block-columns .wp-block-column {
  flex: none;
  flex-basis: auto !important; /* core: flex-basis 100% !important below 782px */
  width: auto;
  max-width: none;
  margin: 0;
}

/* Board | Management nested split keeps its own 40px gutter */
body.rm-home .rm-main .rm-section--company .wp-block-column .wp-block-columns {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 40px;
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  body.rm-home .rm-main .rm-brand--mute .rm-brand__media {
    order: -1;
  }

  /* Media columns break out of the 1600px content cap towards the viewport edge (40px from it),
     while the copy stays inside. Zero effect below 1600px wide. */
  body.rm-home .rm-main .rm-platform__media,
  body.rm-home .rm-main .rm-brand--mutetape .rm-brand__media,
  body.rm-home .rm-main .rm-brand--rhinoswab .rm-brand__media {
    margin-right: min(0px, calc((var(--rm-max) - 100vw) / 2));
  }

  /* The platform column keeps core's flex sizing; let it stretch across track + margin like the brand columns */
  body.rm-home .rm-main .rm-platform__media {
    width: auto;
    flex: none;
    flex-basis: auto !important;
    justify-self: stretch;
  }

  body.rm-home .rm-main .rm-brand--mute .rm-brand__media,
  body.rm-home .rm-main .rm-brand--turbine .rm-brand__media {
    margin-left: min(0px, calc((var(--rm-max) - 100vw) / 2));
  }
}

@media (max-width: 1024px) {
  body.rm-home .rm-section--brand {
    min-height: 0;
  }

  body.rm-home .rm-main .rm-brand__headline {
    font-size: clamp(40px, 9vw, 96px);
  }

  body.rm-home .rm-slot--tall {
    height: 50vh;
  }

  /* Two-column grids stack (company excepted, below). column-gap stays 64px (single track, no effect). */
  body.rm-home .rm-main .rm-section--brand .rm-brand__grid,
  body.rm-home .rm-main .rm-section--platform .wp-block-columns,
  body.rm-home .rm-main .rm-section--pipeline .wp-block-columns,
  body.rm-home .rm-main .rm-section--news .wp-block-columns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  /* Cascade note: the company outer grid keeps two columns at every width (Text | Board+Management);
     the layered file's stacking rule never outranked its base selector. Only the row gap applied. */
  body.rm-home .rm-main .rm-section--company .wp-block-columns:not(.wp-block-column .wp-block-columns) {
    row-gap: 48px;
  }

  body.rm-home .rm-main .rm-section--brand .wp-block-column {
    align-self: start;
  }

  body.rm-home .rm-main .rm-brand--turbine .rm-brand__media { order: 2; }
  body.rm-home .rm-main .rm-brand--turbine .rm-brand__text  { order: 1; }

  body.rm-home .rm-section--pipeline .wp-block-columns > .wp-block-column:nth-child(2)::before {
    display: none;
  }

  body.rm-home .rm-section--pipeline .wp-block-columns > .wp-block-column:nth-child(2) {
    border-top: 1px solid var(--g800);
    padding-top: 48px;
  }

  body.rm-home .rm-data {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.rm-home .rm-main .rm-section--news .rm-h2 {
    margin-bottom: 0;
  }

}

@media (max-width: 767px) {
  body.rm-home .rm-section--hero,
  body.rm-home .rm-hero {
    height: 220vh;
  }

  body.rm-home .rm-hero__word {
    font-size: clamp(48px, 14vw, 100px);
  }

  body.rm-home .rm-main .rm-hero__line {
    font-size: 16px;
  }

  body.rm-home .rm-hero__copy {
    bottom: 88px;
  }

  body.rm-home .rm-hero__progress {
    bottom: 64px;
  }

  body.rm-home .rm-main .rm-h2 {
    font-size: 32px;
    margin-bottom: 20px;
  }

  body.rm-home .rm-section--brand {
    padding: 72px var(--pad-x);
  }

  body.rm-home .rm-slot--tall {
    height: 52vh;
  }

  body.rm-home .rm-main .rm-brand__logo {
    margin-bottom: 24px;
  }

  body.rm-home .rm-main .rm-brand__headline,
  body.rm-home .rm-main .rm-platform__h,
  body.rm-home .rm-main .rm-company__h {
    margin-bottom: 20px;
  }

  body.rm-home .rm-main .rm-brand__body {
    margin-bottom: 24px;
  }

  body.rm-home .rm-section--platform {
    padding: 72px var(--pad-x) 80px;
  }

  body.rm-home .rm-section--datasheet,
  body.rm-home .rm-section--company {
    padding: 64px var(--pad-x);
  }

  body.rm-home .rm-section--pipeline,
  body.rm-home .rm-section--news {
    padding: 56px var(--pad-x);
  }

  body.rm-home .rm-data__cell {
    padding: 28px 24px 32px;
  }

  /* Board and Management stack */
  body.rm-home .rm-main .rm-section--company .wp-block-column .wp-block-columns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  body.rm-home .rm-news li {
    column-gap: 16px;
    font-size: 17px;
  }

  body.rm-home .rm-news li > a {
    font-size: 17px;
  }

  /* Map type at phone widths */
  .rm-venn2 .rmv-label,
  .rm-venn2 .rmv-label.is-hover {
    font-size: 24px;
  }

  .rm-venn2 .rmv-node text,
  .rm-venn2 .rmv-node.is-hover text {
    font-size: 21px;
  }

  .rm-venn2 .rmv-node.is-selected text,
  .rm-venn2 .rmv-node.is-selected:hover text {
    font-size: 44px;
  }

  .rm-venn2 .rmv-core text {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  body.rm-home {
    --pad-min: 24px;
  }

  body.rm-home .rm-data {
    grid-template-columns: minmax(0, 1fr);
  }

  /* News rows: date above title, both in column 1 */
  body.rm-home .rm-news li {
    row-gap: 6px;
  }

  body.rm-home .rm-news li .wp-block-latest-posts__post-date {
    grid-column: 1;
    grid-row: 1;
  }

  body.rm-home .rm-news li > a {
    grid-column: 1;
    grid-row: 2;
  }

}

/* --------------------------------------------------------------------------
   15. Touch: no hover affordances (a tapped node keeps :hover)
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .rm-venn2 .rmv-node:hover text {
    font-size: 15px;
  }

  .rm-venn2 .rmv-node:hover .rmv-node-dot {
    r: 7;
  }

  .rm-venn2 .rmv-node.is-selected:hover .rmv-node-x line {
    opacity: 1;
  }

  .rm-venn2 .rmv-dom:hover .rmv-fill {
    fill: #fff;
    opacity: .09;
  }
}

/* --------------------------------------------------------------------------
   16. Motion preferences
   !important here is deliberate: one blanket rule has to beat every
   state-specific transition above (including the attribute-selector ones).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.rm-home,
  body.rm-home .rm-hero__word,
  body.rm-home .rm-hero__line,
  body.rm-home .rm-brand__link a,
  body.rm-home .rm-main .rm-section--platform .rm-platform__h,
  body.rm-home .rm-main .rm-section--platform .rm-platform__lead,
  body.rm-home .rm-main .rm-section--platform .rm-platform__body,
  body.rm-home .rm-main .rm-section--platform.is-flooded .rmv-blurb,
  body.rm-home .rm-main .rm-section--platform.is-flooded .rmv-blurb p,
  body.rm-home .rm-main .rm-section--platform.is-flooded .rmv-blurb a,
  .rm-venn2 .rmv-dom,
  .rm-venn2 .rmv-fill,
  .rm-venn2 .rmv-label,
  .rm-venn2 .rmv-node,
  .rm-venn2 .rmv-node text,
  .rm-venn2 .rmv-node-dot,
  .rm-venn2 .rmv-node-x line,
  .rm-venn2 .rmv-core,
  .rm-venn2 .rmv-blurb,
  .rm-venn2 .rmv-blurb.is-open,
  .rm-venn2 .rmv-btn,
  .rmv-flood,
  .rmv-flood.is-on {
    transition: none !important;
  }
}

/* ==========================================================================
   Intentional fixes after consolidation (2026-09-08). These are the cascade
   quirks the consolidation reproduced on purpose; now resolved as visible changes.
   ========================================================================== */
/* Blurb text and idle line get their own type instead of inheriting section paragraphs */
body.rm-home .rm-main .rm-section--platform .rmv-blurb p,
body.rm-home .rm-main .rm-section--platform .rmv-blurb p:last-child {
  font-size: 16px; line-height: 1.5; max-width: 34ch; margin: 0 0 18px;
}
/* Dev node reads as tentative */
.rm-venn2 .rmv-node--dev text { opacity: .55; }
/* Datasheet spacing per spec */
body.rm-home .rm-main .rm-data__label { margin-top: 22px; }
body.rm-home .rm-main .rm-data__note { margin-top: 8px; }
/* Company outer grid stacks like every other two-column section */
@media (max-width: 1024px) {
  body.rm-home .rm-main .rm-section--company .wp-block-columns:not(.wp-block-column .wp-block-columns) { grid-template-columns: minmax(0, 1fr); }
}
/* News rows stack cleanly on phones: date above title, full width */
@media (max-width: 640px) {
  body.rm-home .rm-main .rm-news li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}
/* Node hit box: invisible, catches the pointer across the whole label and dot */
.rm-venn2 .rmv-node-box { fill: transparent; stroke: none; pointer-events: all; }
.rm-venn2 .rmv-node text, .rm-venn2 .rmv-node-dot, .rm-venn2 .rmv-node-x { pointer-events: none; }
.rm-venn2 .rmv-node-hit { pointer-events: all; }

/* Safari: a backdrop-filter on the (absolutely positioned) header makes it the containing block
   for the fixed sticky clone, so the bar scrolled away with the page. The header is transparent
   at the top of this page anyway; the frosted effect stays on the sticky bar itself. */
body.rm-home .site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Editor-friendly text columns: any paragraph works, no special class needed.
   First paragraph in a text column is the lead (18px), the rest 17px, 16px apart. */
body.rm-home .rm-main .rm-section--platform .wp-block-column > p,
body.rm-home .rm-main .rm-section--company .wp-block-column > p,
body.rm-home .rm-main .rm-section--pipeline .wp-block-column > p { font-size: 17px; line-height: 1.55; margin: 0 0 16px; max-width: 46ch; }
body.rm-home .rm-main .rm-section--platform .wp-block-column > p:first-of-type,
body.rm-home .rm-main .rm-section--company .wp-block-column > p:first-of-type,
body.rm-home .rm-main .rm-section--pipeline .wp-block-column > p:first-of-type { font-size: 18px; line-height: 1.5; }
body.rm-home .rm-main .rm-section--platform .wp-block-column > p:last-of-type,
body.rm-home .rm-main .rm-section--company .wp-block-column > p:last-of-type,
body.rm-home .rm-main .rm-section--pipeline .wp-block-column > p:last-of-type { margin-bottom: 0; }
body.rm-home .rm-main .rm-section--company .wp-block-column > p.rm-muted,
body.rm-home .rm-main .rm-section--pipeline .wp-block-column > p.rm-muted,
body.rm-home .rm-main .rm-section--company .wp-block-column > p:not(:first-of-type) { color: var(--g600); }
body.rm-home .rm-main .rm-section--pipeline .wp-block-column > p:not(:first-of-type) { color: var(--g400); font-size: 15px; }
body.rm-home .rm-main .rm-section--platform .wp-block-column > p:not(:first-of-type) { color: var(--g300); }
body.rm-home .rm-main .rm-section--platform.is-flooded .wp-block-column > p { color: var(--ink); }

/* Hero phases: all four pre-rendered and stacked; JS slides them up through the box as you scroll */
body.rm-home .rm-main .rm-hero__copy { display: grid; overflow: hidden; padding-top: 12px; }
body.rm-home .rm-main .rm-hero__phase { grid-area: 1 / 1; will-change: transform, opacity; }
body.rm-home .rm-main .rm-hero__phase .rm-hero__word { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .85; letter-spacing: -.02em; color: #fff; }
@media (prefers-reduced-motion: reduce) { body.rm-home .rm-main .rm-hero__phase { transition: none; } }
/* Hero phases travel the full frame, so the copy box no longer clips; the sticky frame does */
body.rm-home .rm-main .rm-hero__copy { overflow: visible; }
body.rm-home .rm-main .rm-hero__phase { opacity: 1 !important; }

/* Map: ambient breathing once settled; each disc on its own rhythm. Pauses on hover/selection. */
@keyframes rmv-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.rm-venn2.is-settled .rmv-fill { transform-box: fill-box; transform-origin: center; animation: rmv-breathe 7s ease-in-out infinite; }
.rm-venn2.is-settled .rmv-dom--sport .rmv-fill { animation-duration: 8.5s; animation-delay: -2s; }
.rm-venn2.is-settled .rmv-dom--diag  .rmv-fill { animation-duration: 9.5s; animation-delay: -4.5s; }
.rm-venn2.is-settled .rmv-dom--drug  .rmv-fill { animation-duration: 11s;  animation-delay: -6s; }
.rm-venn2[data-hover]:not([data-hover=""]) .rmv-fill, .rm-venn2[data-active]:not([data-active=""]) .rmv-fill { animation-play-state: paused; }
.rm-venn2 .rmv-dom { transition: transform .35s var(--ease), opacity .4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .rm-venn2 .rmv-fill { animation: none !important; } }


/* --------------------------------------------------------------------------
   16. Datasheet as a flight board (v11). Figures are plain paragraphs in the
       editor; rm-home.js splits them into flaps and ticks them in on view.
   -------------------------------------------------------------------------- */
body.rm-home .rm-data__cell { container-type: inline-size; }

/* Sized from the cell so the longest figure (ISO 13485, 8 flaps) always fits on one line */
body.rm-home .rm-data__fig.is-board {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: clamp(30px, 13cqw, 60px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

body.rm-home .rm-board {
  display: inline-flex;
  align-items: stretch;
  gap: .07em;
  vertical-align: top;
}

body.rm-home .rm-board__flap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .82em;
  height: 1.28em;
  background: #161616;
  color: #fff;
  border-radius: .07em;
  box-shadow: inset 0 0 0 1px #2a2a2a, inset 0 -.5em .6em -.6em rgba(0,0,0,.9);
  overflow: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Hinge line across the middle of every flap */
body.rm-home .rm-board__flap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: #000;
  opacity: .95;
}

body.rm-home .rm-board__gap { width: .28em; flex: 0 0 .28em; }

@keyframes rm-flap {
  0%   { transform: scaleY(.55); filter: brightness(.55); }
  60%  { transform: scaleY(1.06); filter: brightness(1.15); }
  100% { transform: none; filter: none; }
}

body.rm-home .rm-board__flap.is-flip { animation: rm-flap .13s ease-out; }

/* Labels read as the board's destination text: a little more air and a dimmer tone */
body.rm-home .rm-main .rm-data__fig.is-board + .rm-data__label {
  margin-top: 22px;
  color: var(--g300);
}


@media (prefers-reduced-motion: reduce) {
  body.rm-home .rm-board__flap.is-flip { animation: none; }
}

/* --------------------------------------------------------------------------
   17. News on a white section (editor switched the section to rm-section--white)
   -------------------------------------------------------------------------- */
body.rm-home .rm-section--white .rm-news,
body.rm-home .rm-section--white .rm-news li { border-color: var(--g200); }
body.rm-home .rm-section--white .rm-news li > a { color: #000; }
body.rm-home .rm-section--white .rm-news li .wp-block-latest-posts__post-date { color: var(--g600); }

/* --------------------------------------------------------------------------
   17. Brand links as buttons (v12). Outline button in the section's text colour;
       hover fills with that colour and the label takes the section background.
       External links (target="_blank") get the external-link glyph.
   -------------------------------------------------------------------------- */
body.rm-home .rm-main .rm-section--brand .rm-brand__link a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 15px 22px;
  border: 1px solid currentColor;
  border-bottom-width: 1px;
  background: transparent;
  color: inherit;
  transition: background .15s var(--ease), color .15s var(--ease);
}

body.rm-home .rm-main .rm-section--brand .rm-brand__link a:hover,
body.rm-home .rm-main .rm-section--brand .rm-brand__link a:focus-visible { opacity: 1; }

/* Hover: fill with the text colour, label takes the brand background */
body.rm-home .rm-main .rm-brand--mute .rm-brand__link a:hover,
body.rm-home .rm-main .rm-brand--mute .rm-brand__link a:focus-visible      { background: #fff; color: #95358C; }
body.rm-home .rm-main .rm-brand--mutetape .rm-brand__link a:hover,
body.rm-home .rm-main .rm-brand--mutetape .rm-brand__link a:focus-visible  { background: #fff; color: #006FBA; }
body.rm-home .rm-main .rm-brand--turbine .rm-brand__link a:hover,
body.rm-home .rm-main .rm-brand--turbine .rm-brand__link a:focus-visible   { background: #000; color: #FFC72C; }
body.rm-home .rm-main .rm-brand--rhinoswab .rm-brand__link a:hover,
body.rm-home .rm-main .rm-brand--rhinoswab .rm-brand__link a:focus-visible { background: #000; color: #F2F2F2; }

/* External-link glyph (Font Awesome Free v7.3.1 "up-right-from-square", CC BY 4.0) in the current colour */
body.rm-home .rm-main .rm-section--brand .rm-brand__link a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M354.4 83.8C359.4 71.8 371.1 64 384 64L544 64C561.7 64 576 78.3 576 96L576 256C576 268.9 568.2 280.6 556.2 285.6C544.2 290.6 530.5 287.8 521.3 278.7L464 221.3L310.6 374.6C298.1 387.1 277.8 387.1 265.3 374.6C252.8 362.1 252.8 341.8 265.3 329.3L418.7 176L361.4 118.6C352.2 109.4 349.5 95.7 354.5 83.7zM64 240C64 195.8 99.8 160 144 160L224 160C241.7 160 256 174.3 256 192C256 209.7 241.7 224 224 224L144 224C135.2 224 128 231.2 128 240L128 496C128 504.8 135.2 512 144 512L400 512C408.8 512 416 504.8 416 496L416 416C416 398.3 430.3 384 448 384C465.7 384 480 398.3 480 416L480 496C480 540.2 444.2 576 400 576L144 576C99.8 576 64 540.2 64 496L64 240z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M354.4 83.8C359.4 71.8 371.1 64 384 64L544 64C561.7 64 576 78.3 576 96L576 256C576 268.9 568.2 280.6 556.2 285.6C544.2 290.6 530.5 287.8 521.3 278.7L464 221.3L310.6 374.6C298.1 387.1 277.8 387.1 265.3 374.6C252.8 362.1 252.8 341.8 265.3 329.3L418.7 176L361.4 118.6C352.2 109.4 349.5 95.7 354.5 83.7zM64 240C64 195.8 99.8 160 144 160L224 160C241.7 160 256 174.3 256 192C256 209.7 241.7 224 224 224L144 224C135.2 224 128 231.2 128 240L128 496C128 504.8 135.2 512 144 512L400 512C408.8 512 416 504.8 416 496L416 416C416 398.3 430.3 384 448 384C465.7 384 480 398.3 480 416L480 496C480 540.2 444.2 576 400 576L144 576C99.8 576 64 540.2 64 496L64 240z'/></svg>") center / contain no-repeat;
}

/* Several link paragraphs in one brand block sit side by side and wrap on small screens */
body.rm-home .rm-main .rm-section--brand .rm-brand__link { display: inline-block; margin: 0 12px 12px 0; vertical-align: top; }

/* Mouth Tape logo is a stacked lockup; give it more height than the single-line marks */
body.rm-home .rm-main .rm-brand--mutetape .rm-brand__logo,
body.rm-home .rm-main .rm-brand--mutetape .rm-brand__logo img { height: 64px; }

/* Photo in a slot: fills the box, no dashed outline. Focal point sits upper-centre where the faces are. */
body.rm-home .rm-main .rm-slot .rm-slot__img,
body.rm-home .rm-main .rm-slot .rm-slot__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-width: none;
}
body.rm-home .rm-main .rm-slot .rm-slot__img img { object-fit: cover; object-position: 50% 30%; display: block; }
body.rm-home .rm-main .rm-slot:has(.rm-slot__img)::before { display: none; }
body.rm-home .rm-main .rm-slot:has(.rm-slot__img) { overflow: hidden; }
body.rm-home .rm-main .rm-brand--mute .rm-slot .rm-slot__img img { object-position: 50% 12%; }

/* Cut-out artwork (transparent PNG) sits inside the slot with air around it instead of filling it */
body.rm-home .rm-main .rm-slot .rm-slot__img--contain img { object-fit: contain; object-position: 50% 50%; padding: 8%; box-sizing: border-box; }
body.rm-home .rm-main .rm-brand--mutetape .rm-slot .rm-slot__img img { object-position: 50% 72%; }

/* Brand reveal: media, logo and text ease in when the section's colour takes over
   (body[data-rm-theme] is set by initTheme at mid-viewport). Reverses on scroll back. */
body.rm-home .rm-main .rm-section--brand .rm-brand__media {
  opacity: .35;
  filter: saturate(.2);
  transform: scale(.94);
  transition: opacity .7s var(--ease), filter .7s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform, filter;
}
body.rm-home .rm-section--brand :where(.rm-brand__logo, .rm-brand__text > *) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s;
}
body.rm-home[data-rm-theme="mute"]      .rm-brand--mute .rm-brand__media,
body.rm-home[data-rm-theme="mutetape"]  .rm-brand--mutetape .rm-brand__media,
body.rm-home[data-rm-theme="turbine"]   .rm-brand--turbine .rm-brand__media,
body.rm-home[data-rm-theme="rhinoswab"] .rm-brand--rhinoswab .rm-brand__media {
  opacity: 1;
  filter: saturate(1);
  transform: none;
}
body.rm-home[data-rm-theme="mute"]      .rm-brand--mute .rm-brand__logo,
body.rm-home[data-rm-theme="mute"]      .rm-brand--mute .rm-brand__text > *,
body.rm-home[data-rm-theme="mutetape"]  .rm-brand--mutetape .rm-brand__logo,
body.rm-home[data-rm-theme="mutetape"]  .rm-brand--mutetape .rm-brand__text > *,
body.rm-home[data-rm-theme="turbine"]   .rm-brand--turbine .rm-brand__logo,
body.rm-home[data-rm-theme="turbine"]   .rm-brand--turbine .rm-brand__text > *,
body.rm-home[data-rm-theme="rhinoswab"] .rm-brand--rhinoswab .rm-brand__logo,
body.rm-home[data-rm-theme="rhinoswab"] .rm-brand--rhinoswab .rm-brand__text > * {
  opacity: 1;
  transform: none;
}
/* Stagger the text a touch behind the logo */
body.rm-home .rm-section--brand :where(.rm-brand__text > :not(.rm-brand__logo)) { transition-delay: .3s; }
/* No JS or reduced motion: everything visible, nothing moves */
body.rm-home:not([data-rm-theme]) .rm-main .rm-section--brand .rm-brand__media,
body.rm-home:not([data-rm-theme]) .rm-main .rm-section--brand .rm-brand__logo,
body.rm-home:not([data-rm-theme]) .rm-main .rm-section--brand .rm-brand__text > * { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.rm-home .rm-main .rm-section--brand .rm-brand__media,
  body.rm-home .rm-main .rm-section--brand .rm-brand__logo,
  body.rm-home .rm-main .rm-section--brand .rm-brand__text > * { opacity: 1; filter: none; transform: none; transition: none; }
}