/*
 * Generated always-on bundle: tokens + base + layout + components + chrome + sections.
 * Edit those source files, then reload a front-end page (or delete this file) to rebuild.
 * Do not @import here — this file is the single render-blocking core sheet.
 */

/* --- tokens.css --- */
/**
 * Remotation design tokens — "surveyed technical document".
 *
 * Two grounds: graphite ink and cool concrete. One signal: site orange,
 * reserved for actions, live data and active states. Never decoration.
 */

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display/clash-display-variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/satoshi-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Grounds ---------------------------------------------------------- */
  /* Slate graphite, lifted one visible step from near-black so dark chapters
     read as a graphite sheet, not a void. Text-on-light stays #101216. */
  --rm-ink-900: #1d232b;
  --rm-ink-850: #1d232b;
  --rm-ink-800: #272e37;
  --rm-ink-700: #323a44;
  --rm-ink-600: #404a56;

  --rm-concrete: #f5f6f4;
  --rm-concrete-deep: #e2e4e1;
  --rm-surface: #ffffff;

  /**
   * Ink on light. The faint tier carries real content (dates, roles, spec
   * keys, dimension labels) at 11px, so it is set to clear 4.5:1 on both
   * concrete and white rather than to look decoratively light.
   */
  --rm-text: #101216;
  --rm-text-muted: #545a62;
  --rm-text-faint: #666c73;

  /* ---- Ink on dark ------------------------------------------------------ */
  --rm-text-invert: #f4f5f3;
  --rm-text-invert-muted: rgba(244, 245, 243, 0.76);
  --rm-text-invert-faint: rgba(244, 245, 243, 0.62);

  /* ---- Signal ----------------------------------------------------------- */
  --rm-signal: #fb8500;
  --rm-signal-hover: #e07500;
  /* Label colour on an orange plate: warm near-black, not graphite, which goes
     muddy against the signal. */
  --rm-signal-ink: #17100a;

  /* ---- Hairlines (drawing-sheet rules) ---------------------------------- */
  --rm-rule: rgba(16, 18, 22, 0.13);
  --rm-rule-strong: rgba(16, 18, 22, 0.26);
  --rm-rule-invert: rgba(244, 245, 243, 0.15);
  --rm-rule-invert-strong: rgba(244, 245, 243, 0.32);

  /* ---- Blueprint grid --------------------------------------------------- */
  --rm-grid-size: 4.5rem;
  --rm-grid-line: rgba(16, 18, 22, 0.055);
  --rm-grid-line-invert: rgba(244, 245, 243, 0.062);

  /**
   * Resolved ground. Components read these, never the raw palette, so the same
   * component works on any ground. The document default is the light ground;
   * .rm-ground--ink and .rm-ground--concrete re-point them per chapter. Defining
   * them here means a section that forgets to claim a ground still resolves
   * instead of silently dropping its hairlines and marks.
   */
  --rm-ground: var(--rm-concrete);
  --rm-ground-raised: var(--rm-surface);
  --rm-ink: var(--rm-text);
  --rm-ink-muted: var(--rm-text-muted);
  --rm-ink-faint: var(--rm-text-faint);
  --rm-hairline: var(--rm-rule);
  --rm-hairline-strong: var(--rm-rule-strong);
  --rm-grid: var(--rm-grid-line);
  --rm-plate-inset: var(--rm-inset-hairline-light);

  /* ---- Type families ---------------------------------------------------- */
  --rm-font-display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --rm-font-body: "Satoshi", system-ui, -apple-system, sans-serif;
  --rm-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Fluid type scale ------------------------------------------------- */
  --rm-text-mega: clamp(3rem, 1.2rem + 7.4vw, 5.75rem);
  --rm-text-display: clamp(2.75rem, 1.35rem + 5.2vw, 5rem);
  --rm-text-h1: clamp(2.375rem, 1.5rem + 3.2vw, 4rem);
  --rm-text-h2: clamp(1.875rem, 1.25rem + 2.2vw, 3rem);
  --rm-text-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --rm-text-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --rm-text-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --rm-text-body: 1.0625rem;
  --rm-text-body-sm: 0.9375rem;
  --rm-text-caption: 0.8125rem;
  --rm-text-nav: 0.9375rem;
  --rm-text-btn: 0.9375rem;
  --rm-text-btn-lg: 1rem;
  --rm-text-label: 0.6875rem;
  /* Mono runs small for its size, so measured data sits one step above label. */
  --rm-text-data: 0.75rem;

  --rm-leading-mega: 0.98;
  --rm-leading-display: 1.03;
  --rm-leading-heading: 1.1;
  --rm-leading-body: 1.62;

  --rm-tracking-mega: -0.035em;
  --rm-tracking-display: -0.03em;
  --rm-tracking-heading: -0.02em;
  --rm-tracking-label: 0.14em;
  --rm-tracking-mono: 0.02em;

  --rm-weight-display: 600;
  --rm-weight-heading: 550;
  --rm-weight-body: 400;
  --rm-weight-medium: 500;
  --rm-weight-strong: 600;

  --rm-measure: 68ch;
  --rm-measure-tight: 46ch;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --rm-space-1: 0.25rem;
  --rm-space-2: 0.5rem;
  --rm-space-3: 0.75rem;
  --rm-space-4: 1rem;
  --rm-space-5: 1.5rem;
  --rm-space-6: 2rem;
  --rm-space-7: 3rem;
  --rm-space-8: 4rem;
  --rm-space-9: 6rem;
  --rm-space-10: 8rem;
  --rm-space-11: 10rem;
  --rm-space-12: 14rem;

  --rm-section-y: clamp(6rem, 9vw, 11rem);
  --rm-section-y-tight: clamp(4rem, 6vw, 7rem);

  /* ---- Layout ----------------------------------------------------------- */
  --rm-container: 78rem;
  --rm-container-wide: 88rem;
  --rm-container-narrow: 44rem;
  --rm-container-measure: 68rem;
  --rm-gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);

  /**
   * Radii — architectural. Plates are kept near-square because a 20px corner
   * with a white fill is the SaaS card vocabulary this page refuses; the corner
   * ticks do the corner work instead. The pill is reserved for buttons.
   */
  --rm-radius-xs: 2px;
  --rm-radius-sm: 4px;
  --rm-radius-plate: 4px;
  --rm-radius-plate-inner: 2px;
  --rm-radius-pill: 999px;

  /* ---- Depth — offset plus soft blur, never a flat halo ---------------- */
  --rm-border-width: 1px;
  --rm-shadow-1: 0 1px 2px rgba(11, 12, 14, 0.05), 0 2px 8px rgba(11, 12, 14, 0.04);
  --rm-shadow-2: 0 2px 4px rgba(11, 12, 14, 0.06), 0 10px 28px rgba(11, 12, 14, 0.08);
  --rm-shadow-3: 0 4px 8px rgba(11, 12, 14, 0.07), 0 24px 56px rgba(11, 12, 14, 0.12);
  --rm-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --rm-inset-hairline-light: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* ---- Motion ----------------------------------------------------------- */
  --rm-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --rm-ease-mask: cubic-bezier(0.32, 0.72, 0, 1);
  --rm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rm-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --rm-duration-fast: 160ms;
  --rm-duration-ui: 280ms;
  --rm-duration-panel: 420ms;
  --rm-duration-reveal: 800ms;
  --rm-duration-chapter: 1100ms;

  /* ---- Z-index ---------------------------------------------------------- */
  --rm-z-grain: 1;
  --rm-z-header: 100;
  --rm-z-overlay: 200;
  --rm-z-modal: 300;
  --rm-z-toast: 400;

  /* ---- Breakpoints (reference) ----------------------------------------- */
  --rm-bp-sm: 640px;
  --rm-bp-md: 768px;
  --rm-bp-lg: 1024px;
  --rm-bp-xl: 1280px;
  --rm-bp-2xl: 1440px;

  /* Darkest step of the signal, for a link that has to hold AA on white. */
  --rm-link-hover: #7a4100;
}

/**
 * Ground contexts. Any section can claim a ground and every component
 * inside it resolves its ink, rules and grid from these two blocks.
 */
.rm-ground--ink {
  /* Light sheet — same readable ink as surface. The photographic hero
     hardcodes invert type over a graphite scrim; this alias stays white. */
  --rm-ground: var(--rm-surface);
  --rm-ground-raised: var(--rm-concrete);
  --rm-ink: var(--rm-text);
  --rm-ink-muted: var(--rm-text-muted);
  --rm-ink-faint: var(--rm-text-faint);
  --rm-hairline: var(--rm-rule);
  --rm-hairline-strong: var(--rm-rule-strong);
  --rm-grid: var(--rm-grid-line);
  --rm-plate-inset: var(--rm-inset-hairline-light);
  background-color: var(--rm-ground);
  color: var(--rm-ink);
}

.rm-ground--concrete {
  --rm-ground: var(--rm-concrete);
  --rm-ground-raised: var(--rm-surface);
  --rm-ink: var(--rm-text);
  --rm-ink-muted: var(--rm-text-muted);
  --rm-ink-faint: var(--rm-text-faint);
  --rm-hairline: var(--rm-rule);
  --rm-hairline-strong: var(--rm-rule-strong);
  --rm-grid: var(--rm-grid-line);
  --rm-plate-inset: var(--rm-inset-hairline-light);
  background-color: var(--rm-ground);
  color: var(--rm-ink);
}

.rm-ground--surface {
  --rm-ground: var(--rm-surface);
  --rm-ground-raised: var(--rm-concrete);
  --rm-ink: var(--rm-text);
  --rm-ink-muted: var(--rm-text-muted);
  --rm-ink-faint: var(--rm-text-faint);
  --rm-hairline: var(--rm-rule);
  --rm-hairline-strong: var(--rm-rule-strong);
  --rm-grid: var(--rm-grid-line);
  --rm-plate-inset: var(--rm-inset-hairline-light);
  background-color: var(--rm-ground);
  color: var(--rm-ink);
}

/* --- base.css --- */
/**
 * Base reset, typography, accessibility, browser surfaces.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The document ends on a concrete footer, so overscroll matches the light page. */
  background-color: var(--rm-concrete);
}

body {
  margin: 0;
  font-family: var(--rm-font-body);
  font-size: var(--rm-text-body);
  font-weight: var(--rm-weight-body);
  line-height: var(--rm-leading-body);
  color: var(--rm-text);
  background-color: var(--rm-concrete);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Browser surfaces: the parts we did not draw still carry the design -- */

::selection {
  background-color: var(--rm-signal);
  color: var(--rm-signal-ink);
}

:root {
  scrollbar-color: var(--rm-ink-600) var(--rm-concrete-deep);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--rm-concrete-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--rm-ink-600);
  border: 3px solid var(--rm-concrete-deep);
  border-radius: var(--rm-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--rm-signal);
}

input,
textarea,
select {
  caret-color: var(--rm-signal);
  font-family: inherit;
  font-size: inherit;
}

::placeholder {
  color: var(--rm-text-muted);
  opacity: 1;
}

:focus-visible {
  outline: 2px solid var(--rm-signal);
  outline-offset: 3px;
  border-radius: var(--rm-radius-xs);
}

/* ---- Links -------------------------------------------------------------- */

a {
  color: var(--rm-signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition:
    color var(--rm-duration-fast) var(--rm-ease-out),
    text-decoration-color var(--rm-duration-fast) var(--rm-ease-out);
}

a:hover {
  color: var(--rm-link-hover);
  text-decoration-color: currentColor;
}

.rm-btn,
.rm-btn:hover,
.rm-nav__list a,
.rm-header__phone,
.rm-site-title,
.rm-card__link,
.rm-footer a {
  text-decoration: none;
}

/* ---- Headings ----------------------------------------------------------- */

h1,
h2,
h3,
h4,
.rm-page-title,
.rm-section-heading__title,
.rm-card__title {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-weight-heading);
  line-height: var(--rm-leading-heading);
  letter-spacing: var(--rm-tracking-heading);
  text-wrap: balance;
  color: inherit;
  margin-block: 0;
}

h1,
.rm-page-title {
  font-size: var(--rm-text-h1);
  font-weight: var(--rm-weight-display);
  letter-spacing: var(--rm-tracking-display);
  line-height: var(--rm-leading-display);
}

h2 {
  font-size: var(--rm-text-h2);
  font-weight: var(--rm-weight-display);
  letter-spacing: var(--rm-tracking-display);
  line-height: var(--rm-leading-display);
}

h3 {
  font-size: var(--rm-text-h3);
}

h4 {
  font-size: var(--rm-text-h4);
}

p {
  max-width: var(--rm-measure);
  margin-block: 0;
}

/* ---- Type utilities ----------------------------------------------------- */

.rm-text-mega {
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-mega);
  line-height: var(--rm-leading-mega);
  letter-spacing: var(--rm-tracking-mega);
  font-weight: var(--rm-weight-display);
  text-wrap: balance;
}

.rm-text-display {
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-display);
  line-height: var(--rm-leading-display);
  letter-spacing: var(--rm-tracking-display);
  font-weight: var(--rm-weight-display);
  text-wrap: balance;
}

.rm-text-body-lg {
  font-size: var(--rm-text-body-lg);
  line-height: 1.55;
}

.rm-text-body-sm {
  font-size: var(--rm-text-body-sm);
}

.rm-text-caption {
  font-size: var(--rm-text-caption);
  color: var(--rm-ink-muted, var(--rm-text-muted));
}

/**
 * Measured data only: prices, phone numbers, indices, step numbers,
 * dimension labels. Never prose.
 */
.rm-data {
  font-family: var(--rm-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--rm-tracking-mono);
}

.rm-label {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  font-weight: 500;
  letter-spacing: var(--rm-tracking-label);
  text-transform: uppercase;
  color: var(--rm-ink-faint, var(--rm-text-faint));
}

.rm-content > * + * {
  margin-top: var(--rm-space-4);
}

/* ---- Drawing-sheet ornaments ------------------------------------------- */

/**
 * Blueprint grid. Always a non-interactive layer, never attached to a
 * scrolling container.
 */
.rm-gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rm-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rm-grid) 1px, transparent 1px);
  background-size: var(--rm-grid-size) var(--rm-grid-size);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 20%, #000 35%, transparent 100%);
}

.rm-rule {
  border: 0;
  border-top: 1px solid var(--rm-hairline, var(--rm-rule));
  margin: 0;
}

.rm-rule--signal {
  border-top-color: var(--rm-signal);
  width: 3.5rem;
  border-top-width: 2px;
}

/* ---- Accessibility ----------------------------------------------------- */

.rm-visually-hidden,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rm-skip-link {
  position: absolute;
  left: var(--rm-space-4);
  top: -100%;
  z-index: var(--rm-z-toast);
  padding: var(--rm-space-3) var(--rm-space-5);
  background: var(--rm-ink-900);
  color: var(--rm-text-invert);
  border: var(--rm-border-width) solid var(--rm-rule-invert-strong);
  border-radius: var(--rm-radius-sm);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-caption);
}

.rm-skip-link:focus {
  top: var(--rm-space-4);
  color: var(--rm-text-invert);
}

/**
 * Reveal targets stay visible unless JS is running. Nothing critical is
 * ever hidden behind an animation.
 */
.rm-js [data-rm-reveal],
.rm-js [data-rm-lines],
.rm-js [data-rm-plate] {
  will-change: auto;
}

/**
 * Line masks, built at runtime by motion.js and removed again once the
 * heading has finished entering. The negative margin keeps descenders out
 * of the clip while the mask is in place.
 */
.rm-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.rm-line__inner {
  display: block;
}

.rm-word {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- layout.css --- */
/**
 * Layout — container, grid, chapter rhythm.
 */

.rm-container {
  width: min(100% - (var(--rm-gutter) * 2), var(--rm-container));
  margin-inline: auto;
}

.rm-container--wide {
  width: min(100% - (var(--rm-gutter) * 2), var(--rm-container-wide));
}

.rm-container--measure {
  width: min(100% - (var(--rm-gutter) * 2), var(--rm-container-measure));
}

.rm-container--narrow {
  width: min(100% - (var(--rm-gutter) * 2), var(--rm-container-narrow));
}

.rm-main {
  padding-block: var(--rm-space-8) var(--rm-space-9);
  min-height: 50vh;
}

/* The homepage is a sequence of full-bleed chapters; it sets its own rhythm. */
.rm-main--front {
  padding: 0;
}

/**
 * A chapter: one full-bleed band that owns its ground and vertical rhythm.
 */
.rm-chapter {
  position: relative;
  padding-block: var(--rm-section-y-tight);
}

.rm-chapter--tight {
  padding-block: var(--rm-section-y-tight);
}

.rm-chapter--flush-bottom {
  padding-bottom: 0;
}

.rm-chapter__head {
  position: relative;
  margin-bottom: var(--rm-space-8);
}

.rm-chapter__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.rm-chapter__body {
  position: relative;
  z-index: 1;
}

.rm-grid {
  display: grid;
  gap: var(--rm-space-5);
}

.rm-grid--services,
.rm-grid--blog {
  grid-template-columns: 1fr;
}

.rm-grid--profiles {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .rm-grid--services,
  .rm-grid--blog {
    grid-template-columns: repeat(2, 1fr);
  }

  .rm-grid--profiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .rm-grid--services,
  .rm-grid--blog {
    grid-template-columns: repeat(3, 1fr);
  }

  .rm-grid--profiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rm-archive-header {
  margin-bottom: var(--rm-space-7);
}

/* Inner pages sit below the fixed header bar.
   Front + landing + utility heroes are full-bleed under the bar — no main offset. */
.rm-main:not(.rm-main--front):not(.rm-main--landing):not(.rm-main--utility):not(.rm-main--job):not(.rm-main--profile) {
  padding-top: calc(var(--rm-space-8) + 4.75rem);
}

/* --- components.css --- */
/**
 * Components — buttons, plates, media, headings, cards, marquee.
 *
 * Buttons never transform or scale their root. All hover energy is internal:
 * a field wipes across, the label recolours, the trailing disc travels.
 */

/* ==========================================================================
   Buttons
   ========================================================================== */

.rm-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-4);
  min-height: 3.125rem;
  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  border: var(--rm-border-width) solid transparent;
  border-radius: var(--rm-radius-pill);
  font-family: var(--rm-font-body);
  font-size: var(--rm-text-btn);
  font-weight: var(--rm-weight-medium);
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    color var(--rm-duration-ui) var(--rm-ease-expo),
    border-color var(--rm-duration-ui) var(--rm-ease-expo),
    background-color var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-btn__label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* The travelling disc: a button inside the button. */
.rm-btn__disc {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rm-radius-pill);
  overflow: hidden;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition:
    transform var(--rm-duration-ui) var(--rm-ease-expo),
    background-color var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-btn__arrows {
  display: grid;
  place-items: center;
  width: 0.8125rem;
  height: 0.8125rem;
  transition: transform 460ms var(--rm-ease-mask);
}

.rm-btn__arrows svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

/* Second arrow waits one tile down-left, then takes the first one's place. */
.rm-btn__arrows svg:last-child {
  transform: translate3d(-115%, 115%, 0);
}

.rm-btn:hover .rm-btn__arrows,
.rm-btn:focus-visible .rm-btn__arrows {
  transform: translate3d(115%, -115%, 0);
}

.rm-btn:hover .rm-btn__disc,
.rm-btn:focus-visible .rm-btn__disc {
  transform: translate3d(1px, -1px, 0);
  background: color-mix(in srgb, currentColor 22%, transparent);
}

/* -- Primary: orange at rest, ink field wipes in on hover ----------------- */

.rm-btn--primary {
  background-color: var(--rm-signal);
  color: var(--rm-signal-ink);
}

.rm-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--rm-ink-900);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 560ms var(--rm-ease-mask);
}

.rm-btn--primary:hover,
.rm-btn--primary:focus-visible {
  color: var(--rm-text-invert);
}

.rm-btn--primary:hover::before,
.rm-btn--primary:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

/* -- Secondary: hairline plate ------------------------------------------- */

.rm-btn--secondary {
  background-color: transparent;
  color: var(--rm-ink, var(--rm-text));
  border-color: var(--rm-hairline-strong, var(--rm-rule-strong));
}

.rm-btn--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  opacity: 0;
  transition: opacity var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-btn--secondary:hover,
.rm-btn--secondary:focus-visible {
  color: var(--rm-signal);
  border-color: var(--rm-signal);
}

.rm-btn--secondary:hover::before,
.rm-btn--secondary:focus-visible::before {
  opacity: 1;
  background-color: color-mix(in srgb, var(--rm-signal) 8%, transparent);
}

/* -- Ghost: text action --------------------------------------------------- */

.rm-btn--ghost {
  background: transparent;
  color: var(--rm-signal);
  padding-inline: 0;
  min-height: 2.75rem;
  gap: var(--rm-space-2);
}

.rm-btn--ghost .rm-btn__disc {
  background: transparent;
  width: 1.125rem;
  height: 1.125rem;
}

.rm-btn--ghost:hover,
.rm-btn--ghost:focus-visible {
  color: var(--rm-signal);
}

.rm-ground--ink .rm-btn--ghost {
  color: var(--rm-signal);
}

.rm-ground--ink .rm-btn--ghost:hover {
  color: var(--rm-signal);
}

/* -- Sizes and inverted grounds ----------------------------------------- */

.rm-btn--sm {
  min-height: 2.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  font-size: var(--rm-text-body-sm);
  gap: var(--rm-space-3);
}

.rm-btn--sm .rm-btn__disc {
  width: 1.5rem;
  height: 1.5rem;
}

.rm-btn--lg {
  min-height: 3.5rem;
  padding-left: 1.75rem;
  font-size: var(--rm-text-btn-lg);
}

.rm-btn--on-dark.rm-btn--secondary {
  color: var(--rm-text-invert);
  border-color: var(--rm-rule-invert-strong);
}

.rm-btn--on-dark.rm-btn--secondary:hover,
.rm-btn--on-dark.rm-btn--secondary:focus-visible {
  color: var(--rm-signal);
  border-color: var(--rm-signal);
}

.rm-btn--block {
  width: 100%;
}

/* ==========================================================================
   Plates — nested enclosure: outer shell, inner core
   ========================================================================== */

.rm-plate {
  position: relative;
  border-radius: var(--rm-radius-plate);
  background: color-mix(in srgb, var(--rm-ink-900) 4%, transparent);
  border: var(--rm-border-width) solid var(--rm-hairline, var(--rm-rule));
  padding: 0.4375rem;
}

.rm-ground--ink .rm-plate {
  background: color-mix(in srgb, var(--rm-ink-900) 4%, transparent);
}

.rm-plate__core {
  position: relative;
  overflow: hidden;
  border-radius: var(--rm-radius-plate-inner);
  background: var(--rm-ground-raised, var(--rm-surface));
  box-shadow: var(--rm-plate-inset, none);
}

/**
 * Corner ticks: the drawing-sheet signature. They are drawn at rest in
 * graphite so the mark is present on a static page and on touch, where there
 * is no hover to reveal it, and they only take the signal colour when the
 * element is actually engaged.
 */
.rm-ticks::before,
.rm-ticks::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 0.6rem;
  height: 0.6rem;
  pointer-events: none;
  border-color: var(--rm-hairline-strong);
  /* Plates that clip their contents pass a positive inset so the ticks land
     inside the frame instead of being cropped away by overflow: hidden. */
  --rm-tick-inset: -1px;
  transition:
    border-color var(--rm-duration-ui) var(--rm-ease-expo),
    width var(--rm-duration-ui) var(--rm-ease-expo),
    height var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-ticks::before {
  top: var(--rm-tick-inset);
  left: var(--rm-tick-inset);
  border-top: 1px solid;
  border-left: 1px solid;
}

.rm-ticks::after {
  bottom: var(--rm-tick-inset);
  right: var(--rm-tick-inset);
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.rm-ticks:hover::before,
.rm-ticks:hover::after,
.rm-ticks:focus-within::before,
.rm-ticks:focus-within::after,
.rm-ticks.is-active::before,
.rm-ticks.is-active::after {
  border-color: var(--rm-signal);
  width: 0.9rem;
  height: 0.9rem;
}

/* ==========================================================================
   Media — one grading rule so mixed photography reads as one family
   ========================================================================== */

/* On a clipping plate the ticks ride inside the frame. */
.rm-media.rm-ticks {
  --rm-tick-inset: 0.5rem;
}

.rm-media {
  position: relative;
  overflow: hidden;
  background: var(--rm-ink-800);
}

.rm-media picture {
  display: contents;
}

.rm-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rm-media--graded img {
  filter: contrast(1.06) brightness(1.02);
}

/* Graphite duotone wash. Light chapters take a thin grade so the plate still
   reads as a photograph; ink chapters take a heavier one to sit in the ground. */
.rm-media--graded::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 12, 14, 0.1), rgba(11, 12, 14, 0.3)),
    linear-gradient(0deg, var(--rm-ink-700), var(--rm-ink-700));
  mix-blend-mode: multiply;
  opacity: var(--rm-grade, 0.3);
}

.rm-ground--ink .rm-media--graded {
  --rm-grade: 0.28;
}

.rm-media--signal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--rm-signal);
  mix-blend-mode: multiply;
  opacity: 0.06;
}

.rm-media--zoom img {
  transition: transform 900ms var(--rm-ease-expo), filter 900ms var(--rm-ease-expo);
}

.rm-media--placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, var(--rm-ink-800), var(--rm-ink-700));
  color: var(--rm-text-invert-faint);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  text-transform: uppercase;
  min-height: 12rem;
}

/* Legacy hook kept so older markup keeps a sane fallback. */
.rm-media-placeholder {
  background: linear-gradient(135deg, var(--rm-ink-800), var(--rm-ink-700));
  min-height: 12rem;
}

/* Profile portrait fallback when no featured image is set. */
.rm-profile-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background:
    linear-gradient(145deg, var(--rm-ink-700), var(--rm-ink-800));
  color: var(--rm-text-invert);
  overflow: hidden;
}

.rm-profile-placeholder__mark {
  position: absolute;
  inset: 0.65rem;
  border: 1px solid rgba(244, 245, 243, 0.22);
  pointer-events: none;
}

.rm-profile-placeholder__initials {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--rm-font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.75rem);
  font-weight: var(--rm-weight-heading);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
}

/* ==========================================================================
   Section headings
   ========================================================================== */

.rm-section-heading {
  display: grid;
  gap: var(--rm-space-5);
  max-width: var(--rm-container-measure);
}

.rm-section-heading__title {
  font-size: var(--rm-text-h2);
  max-width: 24ch;
}

.rm-section-heading__lede {
  color: var(--rm-ink-muted, var(--rm-text-muted));
  font-size: var(--rm-text-body-lg);
  max-width: 58ch;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.rm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-4);
  background: var(--rm-ground-raised, var(--rm-surface));
  border: var(--rm-border-width) solid var(--rm-hairline, var(--rm-rule));
  border-radius: var(--rm-radius-plate);
  padding: var(--rm-space-6);
  box-shadow: var(--rm-shadow-1);
  transition:
    box-shadow 520ms var(--rm-ease-expo),
    border-color 320ms var(--rm-ease-expo),
    transform 520ms var(--rm-ease-expo);
}

.rm-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-4);
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.rm-card__title {
  font-size: var(--rm-text-h4);
  transition: color var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-card__meta {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  text-transform: uppercase;
  color: var(--rm-ink-faint, var(--rm-text-faint));
  display: flex;
  align-items: center;
  gap: var(--rm-space-3);
}

.rm-card__excerpt {
  color: var(--rm-ink-muted, var(--rm-text-muted));
  font-size: var(--rm-text-body-sm);
  max-width: 44ch;
}

.rm-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--rm-radius-plate-inner);
  background: var(--rm-ink-800);
}

/**
 * Drawn icons: the stroke draws itself when the card is engaged. They rest in
 * graphite — the signal is reserved for actions, live data and active state,
 * so a dozen decorative marks never spend it.
 */
.rm-card__icon {
  color: var(--rm-ink-muted);
  width: 2.25rem;
  height: 2.25rem;
}

.rm-card__icon svg {
  width: 100%;
  height: 100%;
}

.rm-icon-draw path,
.rm-icon-draw line,
.rm-icon-draw circle,
.rm-icon-draw rect,
.rm-icon-draw polyline {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .rm-card:hover,
  .rm-card:focus-within {
    box-shadow: var(--rm-shadow-3);
    border-color: var(--rm-hairline-strong, var(--rm-rule-strong));
    transform: translate3d(0, -3px, 0);
  }

  .rm-card:hover .rm-card__title,
  .rm-card:focus-within .rm-card__title {
    color: var(--rm-signal);
  }

  .rm-ground--ink .rm-card:hover .rm-card__title,
  .rm-ground--ink .rm-card:focus-within .rm-card__title {
    color: var(--rm-signal);
  }

  .rm-card:hover .rm-media--zoom img,
  .rm-card:focus-within .rm-media--zoom img {
    transform: scale(1.055);
  }

  .rm-card:hover .rm-icon-draw path,
  .rm-card:hover .rm-icon-draw line,
  .rm-card:hover .rm-icon-draw circle,
  .rm-card:hover .rm-icon-draw rect,
  .rm-card:hover .rm-icon-draw polyline,
  .rm-card:focus-within .rm-icon-draw path,
  .rm-card:focus-within .rm-icon-draw line,
  .rm-card:focus-within .rm-icon-draw circle,
  .rm-card:focus-within .rm-icon-draw rect,
  .rm-card:focus-within .rm-icon-draw polyline {
    animation: rm-draw 900ms var(--rm-ease-expo);
  }
}

@keyframes rm-draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* -- Spec rows: the measured card body ---------------------------------- */

.rm-spec {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.rm-spec li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rm-space-4);
  padding-block: var(--rm-space-3);
  border-top: 1px solid var(--rm-hairline, var(--rm-rule));
  font-size: var(--rm-text-body-sm);
}

.rm-spec__key {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  text-transform: uppercase;
  color: var(--rm-ink-faint, var(--rm-text-faint));
}

.rm-spec__value {
  font-family: var(--rm-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--rm-ink, var(--rm-text));
}

/* -- Testimonial -------------------------------------------------------- */

.rm-card--testimonial {
  gap: var(--rm-space-5);
}

.rm-card__quote {
  margin: 0;
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-h3);
  line-height: 1.24;
  letter-spacing: var(--rm-tracking-heading);
}

.rm-card__cite {
  font-style: normal;
  display: grid;
  gap: var(--rm-space-1);
}

/* ==========================================================================
   Marquee
   ========================================================================== */

.rm-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.rm-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;
}

.rm-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-6);
  padding-inline: var(--rm-space-6);
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-h2);
  font-weight: var(--rm-weight-heading);
  letter-spacing: var(--rm-tracking-heading);
  white-space: nowrap;
  color: var(--rm-ink, var(--rm-text));
}

.rm-marquee__item::after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-signal);
  flex: 0 0 auto;
}

/* ==========================================================================
   Reusable dark CTA band (inner pages)
   ========================================================================== */

.rm-cta {
  background: var(--rm-ink-900);
  color: var(--rm-text-invert);
  border-radius: var(--rm-radius-plate);
  padding: var(--rm-space-8) var(--rm-space-7);
  display: grid;
  gap: var(--rm-space-5);
}

.rm-cta__text {
  color: var(--rm-text-invert-muted);
}

.rm-empty {
  color: var(--rm-ink-muted, var(--rm-text-muted));
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-body-sm);
}

/* ==========================================================================
   Sheet frame — filed enclosure (blog mast, utility sheets, receipts)
   ========================================================================== */

.rm-sheet-frame {
  position: absolute;
  inset: var(--rm-space-3);
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  color: var(--rm-hairline-strong, var(--rm-rule-strong));
}

.rm-sheet-frame__border,
.rm-sheet-frame__stamp {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.rm-sheet-frame__stamp {
  stroke: var(--rm-signal);
  stroke-width: 1.5px;
}

.rm-js [data-rm-sheet-draw] .rm-sheet-frame__border,
.rm-js [data-rm-sheet-draw] .rm-sheet-frame__stamp {
  stroke-dashoffset: 100;
}

.rm-js [data-rm-sheet-draw].is-drawn .rm-sheet-frame__border {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.85s cubic-bezier(0.32, 0.72, 0, 1);
}

.rm-js [data-rm-sheet-draw].is-drawn .rm-sheet-frame__stamp {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.32, 0.72, 0, 1) 0.55s;
}

@media (prefers-reduced-motion: reduce) {
  .rm-js [data-rm-sheet-draw] .rm-sheet-frame__border,
  .rm-js [data-rm-sheet-draw] .rm-sheet-frame__stamp {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* --- chrome.css --- */
/**
 * Chrome — the detached header instrument bar and the closing footer chapter.
 *
 * Scroll compression and the nav indicator move on transform/opacity only, so
 * nothing in the fixed header can thrash layout while the page scrolls.
 */

/* ==========================================================================
   Header
   ========================================================================== */

.rm-header {
  position: sticky;
  top: 0;
  z-index: var(--rm-z-header);
  padding-top: 1rem;
}

.rm-header--over-ink {
  position: fixed;
  left: 0;
  right: 0;
}

.rm-header__rail {
  width: min(100% - (var(--rm-gutter) * 2), var(--rm-container-wide));
  margin-inline: auto;
}

.rm-header__bar {
  --rm-bar-ground: rgba(255, 255, 255, 0.78);
  --rm-bar-line: rgba(16, 18, 22, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-5);
  min-height: 3.75rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 1.375rem;
  border: 1px solid var(--rm-bar-line);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-bar-ground);
  box-shadow: var(--rm-inset-hairline-light), 0 10px 30px rgba(11, 12, 14, 0.08);
  backdrop-filter: blur(18px) saturate(1.3);
  color: var(--rm-text);
  transition:
    translate 480ms var(--rm-ease-expo),
    background-color 480ms var(--rm-ease-expo),
    border-color 480ms var(--rm-ease-expo),
    box-shadow 480ms var(--rm-ease-expo);
}

/* Compressed once the hero is behind us: the bar settles and its ground densifies. */
.rm-header.is-compressed .rm-header__bar {
  --rm-bar-ground: rgba(255, 255, 255, 0.95);
  translate: 0 -0.4375rem;
  box-shadow: var(--rm-inset-hairline-light), 0 8px 24px rgba(11, 12, 14, 0.12);
}

@media (prefers-reduced-transparency: reduce) {
  .rm-header__bar {
    --rm-bar-ground: var(--rm-surface);
    backdrop-filter: none;
  }
}

/* -- Brand --------------------------------------------------------------- */

.rm-header__brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.rm-site-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-family: var(--rm-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: currentColor;
  text-decoration: none;
}

.rm-site-title__mark {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--rm-radius-xs);
  background: var(--rm-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-signal) 22%, transparent);
}

/**
 * Two marks, one slot: the uploaded logo reads on light grounds, the light
 * variant on ink. Only one is ever painted.
 */
.rm-brand {
  display: grid;
  line-height: 0;
}

.rm-brand__mark {
  grid-area: 1 / 1;
  height: 2.125rem;
  width: auto;
  max-width: none;
}

.rm-brand__mark--light {
  visibility: hidden;
}

/* No light variant available: fall back to the uploaded mark. */
.rm-brand:not(:has(.rm-brand__mark--light)) .rm-brand__mark--dark {
  visibility: visible;
}

.rm-header .custom-logo-link img {
  max-height: 2.25rem;
  width: auto;
}

/* -- Nav with sliding indicator ----------------------------------------- */

.rm-nav {
  display: flex;
  align-items: center;
}

.rm-nav__inner {
  position: relative;
}

/**
 * The indicator is a fixed 100px plate that JS positions and scales, so the
 * slide never animates width. Small radius keeps the caps honest under scaleX.
 */
.rm-nav__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 2rem;
  margin-top: -1rem;
  transform-origin: left center;
  transform: translateX(0) scaleX(0);
  border-radius: var(--rm-radius-sm);
  background: color-mix(in srgb, currentColor 10%, transparent);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 540ms var(--rm-ease-expo),
    opacity 260ms var(--rm-ease-expo);
}

.rm-nav__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--rm-space-1);
  font-size: var(--rm-text-nav);
}

.rm-nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.875rem;
  color: color-mix(in srgb, currentColor 76%, transparent);
  text-decoration: none;
  font-weight: var(--rm-weight-medium);
  transition: color 240ms var(--rm-ease-expo);
}

.rm-nav__list a:hover,
.rm-nav__list a:focus-visible {
  color: currentColor;
}

.rm-nav__list .current-menu-item > a,
.rm-nav__list .current_page_item > a {
  color: var(--rm-signal);
}

.rm-nav__panel {
  display: none;
}

/* -- Morphing burger ---------------------------------------------------- */

.rm-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit;
  cursor: pointer;
  position: relative;
  z-index: calc(var(--rm-z-overlay) + 1);
  transition: border-color 240ms var(--rm-ease-expo), background-color 240ms var(--rm-ease-expo);
}

.rm-nav__toggle:hover {
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.rm-nav__burger {
  display: grid;
  gap: 5px;
  width: 1.0625rem;
}

.rm-nav__burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 420ms var(--rm-ease-mask);
}

[aria-expanded="true"] .rm-nav__burger span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

[aria-expanded="true"] .rm-nav__burger span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* -- Right-hand actions -------------------------------------------------- */

.rm-header__actions {
  display: none;
  align-items: center;
  gap: var(--rm-space-4);
}

.rm-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  color: color-mix(in srgb, currentColor 80%, transparent);
  text-decoration: none;
  font-size: var(--rm-text-body-sm);
  font-weight: 500;
  transition: color 240ms var(--rm-ease-expo);
}

.rm-header__phone:hover {
  color: currentColor;
}

.rm-header__phone-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-signal);
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .rm-nav__toggle {
    display: none;
  }

  .rm-nav__panel {
    display: block;
  }

  .rm-nav__foot {
    display: none;
  }

  .rm-nav__list {
    display: flex;
  }

  .rm-header__actions {
    display: flex;
  }
}

/* -- Mobile overlay ------------------------------------------------------ */

@media (max-width: 1023px) {
  body.rm-nav-open {
    overflow: hidden;
  }

  /* The bar's glass and its compression translate each make it the containing
     block for the fixed panel nested inside it, which collapses the overlay to
     the size of the bar. Both are dropped while the overlay is up. */
  /* The glass and the compression translate each make the bar the containing
     block for the fixed panel nested inside it, which collapses the overlay to
     the size of the bar. */
  body.rm-nav-open .rm-header.is-compressed .rm-header__bar,
  body.rm-nav-open .rm-header .rm-header__bar {
    backdrop-filter: none;
    translate: none;
    transition: none;
  }

  /* The panel is a descendant of the bar, so the brand has to outrank it to stay
     visible over the overlay. */
  body.rm-nav-open .rm-header__brand {
    z-index: calc(var(--rm-z-overlay) + 1);
    color: var(--rm-text-invert);
  }

  body.rm-nav-open .rm-brand__mark--dark {
    visibility: hidden;
  }

  body.rm-nav-open .rm-brand__mark--light {
    visibility: visible;
  }

  body.rm-nav-open .rm-nav__toggle {
    color: #fff;
  }

  body.rm-nav-open .rm-nav__panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    inset: 0;
    z-index: var(--rm-z-overlay);
    padding: 6.5rem var(--rm-gutter) var(--rm-space-7);
    background: var(--rm-ink-900);
    color: var(--rm-text-invert);
  }

  body.rm-nav-open .rm-nav__indicator {
    display: none;
  }

  body.rm-nav-open .rm-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body.rm-nav-open .rm-nav__list li {
    border-top: 1px solid var(--rm-rule-invert);
    overflow: hidden;
  }

  body.rm-nav-open .rm-nav__list li:last-child {
    border-bottom: 1px solid var(--rm-rule-invert);
  }

  body.rm-nav-open .rm-nav__list a {
    display: flex;
    width: 100%;
    padding: var(--rm-space-4) 0;
    font-family: var(--rm-font-display);
    font-size: var(--rm-text-h3);
    font-weight: var(--rm-weight-heading);
    letter-spacing: var(--rm-tracking-heading);
    color: var(--rm-text-invert);
    animation: rm-nav-line-in 520ms var(--rm-ease-mask) both;
  }

  body.rm-nav-open .rm-nav__list li:nth-child(1) a { animation-delay: 60ms; }
  body.rm-nav-open .rm-nav__list li:nth-child(2) a { animation-delay: 105ms; }
  body.rm-nav-open .rm-nav__list li:nth-child(3) a { animation-delay: 150ms; }
  body.rm-nav-open .rm-nav__list li:nth-child(4) a { animation-delay: 195ms; }
  body.rm-nav-open .rm-nav__list li:nth-child(5) a { animation-delay: 240ms; }
  body.rm-nav-open .rm-nav__list li:nth-child(6) a { animation-delay: 285ms; }
  body.rm-nav-open .rm-nav__list li:nth-child(7) a { animation-delay: 330ms; }

  .rm-nav__foot {
    display: grid;
    gap: var(--rm-space-3);
    padding-top: var(--rm-space-6);
    animation: rm-nav-line-in 520ms var(--rm-ease-mask) 380ms both;
  }

  .rm-nav__contact {
    color: var(--rm-text-invert-muted);
    font-size: var(--rm-text-body-sm);
    text-decoration: none;
  }

  .rm-nav__panel-cta {
    margin-top: var(--rm-space-3);
  }

  .rm-nav__panel-cta .rm-btn {
    width: 100%;
  }
}

@keyframes rm-nav-line-in {
  from {
    opacity: 0;
    transform: translateY(90%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.rm-nav-open .rm-nav__list a,
  .rm-nav__foot {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Footer — the closing chapter
   ========================================================================== */

.rm-footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--rm-space-9) var(--rm-space-6);
}

.rm-footer__gridlines {
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}

.rm-footer__inner {
  position: relative;
  z-index: 1;
}

.rm-footer__grid {
  display: grid;
  gap: var(--rm-space-7) var(--rm-space-6);
}

.rm-footer__blurb {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-body-lg);
  max-width: 40ch;
  margin-bottom: var(--rm-space-6);
}

.rm-footer__contact {
  display: grid;
  gap: var(--rm-space-4);
  margin: 0 0 var(--rm-space-6);
}

.rm-footer__contact dt {
  margin-bottom: 0.25rem;
}

.rm-footer__contact dd {
  margin: 0;
}

.rm-footer__contact a {
  color: var(--rm-ink);
  font-size: var(--rm-text-body-sm);
  text-decoration: none;
  transition: color 200ms var(--rm-ease-expo);
}

.rm-footer__contact a:hover {
  color: var(--rm-signal);
}

.rm-footer__social {
  display: flex;
  gap: var(--rm-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rm-footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rm-hairline-strong);
  border-radius: var(--rm-radius-pill);
  color: var(--rm-ink-muted);
  transition:
    color 260ms var(--rm-ease-expo),
    border-color 260ms var(--rm-ease-expo),
    background-color 260ms var(--rm-ease-expo);
}

.rm-footer__social a:hover,
.rm-footer__social a:focus-visible {
  color: var(--rm-signal-ink);
  background: var(--rm-signal);
  border-color: var(--rm-signal);
}

.rm-footer__col {
  position: relative;
}

.rm-footer__heading {
  margin: 0 0 var(--rm-space-4);
  color: var(--rm-ink);
}

.rm-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.rm-footer__list li {
  border-top: 1px solid var(--rm-hairline);
}

.rm-footer__list a {
  display: block;
  padding-block: 0.6875rem;
  color: var(--rm-ink);
  font-size: var(--rm-text-body-sm);
  text-decoration: none;
  transition: color 220ms var(--rm-ease-expo), transform 320ms var(--rm-ease-expo);
}

.rm-footer__list a:hover {
  color: var(--rm-signal);
  transform: translateX(0.4375rem);
}

/* -- Legal --------------------------------------------------------------- */

.rm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-4);
  margin-top: var(--rm-space-7);
  padding-top: var(--rm-space-5);
  border-top: 1px solid var(--rm-hairline);
}

.rm-footer__copy {
  margin: 0;
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-caption);
}

.rm-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rm-footer__legal-list a {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-caption);
  text-decoration: none;
  transition: color 200ms var(--rm-ease-expo);
}

.rm-footer__legal-list a:hover {
  color: var(--rm-signal);
}

@media (min-width: 768px) {
  .rm-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
  }

  .rm-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .rm-footer {
    padding-block: var(--rm-space-10) var(--rm-space-6);
  }

  .rm-footer__grid {
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: var(--rm-space-8) var(--rm-space-7);
  }

  .rm-footer__brand {
    grid-column: auto;
    padding-right: var(--rm-space-6);
    border-right: 1px solid var(--rm-hairline);
  }
}

/* --- sections.css --- */
/**
 * Section styles — homepage conversion journey.
 */

.rm-main--front {
  padding-block: 0;
}

.rm-section {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem);
}

/* A section that claims a chapter takes the homepage rhythm, not the
   inner-page one. Compound selector so stylesheet order stops mattering. */
.rm-section.rm-chapter {
  padding-block: var(--rm-section-y-tight);
}

.rm-section.rm-chapter--tight {
  padding-block: var(--rm-section-y-tight);
}

/**
 * A ground change is what separates two chapters. Where the ground does not
 * change the two are one continuous sheet: split one chapter-rhythm across the
 * seam instead of stacking a full pad on the first and another on the second.
 */
.rm-chapter.rm-ground--concrete:has(+ .rm-chapter.rm-ground--concrete),
.rm-chapter.rm-ground--ink:has(+ .rm-chapter.rm-ground--ink),
.rm-chapter.rm-ground--surface:has(+ .rm-chapter.rm-ground--surface) {
  padding-bottom: var(--rm-space-7);
}

.rm-chapter.rm-ground--concrete + .rm-chapter.rm-ground--concrete,
.rm-chapter.rm-ground--ink + .rm-chapter.rm-ground--ink,
.rm-chapter.rm-ground--surface + .rm-chapter.rm-ground--surface {
  padding-top: var(--rm-space-7);
}

.rm-empty {
  color: var(--rm-text-muted);
}

/* Hero lives in hero.css. */

/* ——— Role reel ——— */
/* The reel is a thin band that closes on the marquee rule. Why, the next
   chapter, owns the seam with a full chapter-top so the gap does not sit
   under the track. */
.rm-chapter.rm-reel,
.rm-section.rm-reel {
  padding-bottom: 0;
}

.rm-reel {
  overflow: hidden;
  scroll-margin-top: 6.5rem;
}

.rm-reel__intro {
  display: grid;
  gap: var(--rm-space-5);
  margin-bottom: var(--rm-space-8);
}

.rm-reel__title {
  font-size: var(--rm-text-h2);
  max-width: 30ch;
}

.rm-reel__lede {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-body-lg);
  max-width: 62ch;
}

.rm-reel__marquee {
  padding-block: var(--rm-space-5);
  border-top: 1px solid var(--rm-hairline);
  border-bottom: 1px solid var(--rm-hairline);
}

.rm-reel__set {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .rm-reel__intro {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    gap: var(--rm-space-7);
  }

  .rm-reel__lede {
    padding-bottom: 0.35rem;      
  }
}

/* ——— Why (asymmetric bento) ——— */
.rm-why__head {
  display: grid;
  gap: var(--rm-space-5);
  margin-bottom: var(--rm-space-8);
}

.rm-why__heading {
  display: grid;
  gap: var(--rm-space-3);
}

.rm-why__title {
  font-size: var(--rm-text-h2);
  max-width: 26ch;
}

.rm-why__subtitle {
  font-size: var(--rm-text-h3);
  font-weight: 500;
  max-width: 28ch;
  color: var(--rm-ink-muted);
}

.rm-why__head-aside {
  display: grid;
  justify-items: start;
  gap: var(--rm-space-5);
}

.rm-why__lede {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-body-lg);
  max-width: 48ch;
}

.rm-why__bento {
  display: grid;
  grid-auto-flow: dense;
  gap: var(--rm-space-4);
}

/* -- The image plate -- */
.rm-why__plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.rm-why__plate .rm-plate__core {
  flex: 1 1 auto;
  min-height: 18rem;
}

.rm-why__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--rm-ease-expo);
}

.rm-why__img--portrait {
  object-position: center center;
}

.rm-why__plate:hover .rm-why__img {
  transform: scale(1.045);
}

.rm-why__plate-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rm-space-3);
  padding: 0.5rem 0.75rem 0.25rem;
}

.rm-why__plate-note {
  font-size: var(--rm-text-body-sm);
  color: var(--rm-ink-muted);
}

/* -- The spec cells -- */
.rm-why__cell {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--rm-space-3);
  padding: var(--rm-space-6);
  background: var(--rm-surface);
  border: 1px solid var(--rm-hairline);
  border-radius: var(--rm-radius-plate);
  box-shadow: var(--rm-shadow-1);
  transition:
    box-shadow 520ms var(--rm-ease-expo),
    border-color 320ms var(--rm-ease-expo),
    transform 520ms var(--rm-ease-expo);
}

.rm-why__index {
  position: absolute;
  top: var(--rm-space-5);
  right: var(--rm-space-5);
  font-size: var(--rm-text-data);
  color: var(--rm-ink-faint);
}

.rm-why__icon {
  display: block;
  color: var(--rm-ink-muted);
  height: 1.875rem;
}

.rm-why__cell-title {
  font-size: var(--rm-text-h4);
  max-width: 28ch;
}

.rm-why__cell-body {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-body-sm);
  max-width: 42ch;
}

@media (hover: hover) and (pointer: fine) {
  .rm-why__cell:hover {
    box-shadow: var(--rm-shadow-2);
    border-color: var(--rm-hairline-strong);
    transform: translate3d(0, -3px, 0);
  }

  .rm-why__cell:hover .rm-why__icon .rm-icon-draw path,
  .rm-why__cell:hover .rm-why__icon .rm-icon-draw line,
  .rm-why__cell:hover .rm-why__icon .rm-icon-draw circle,
  .rm-why__cell:hover .rm-why__icon .rm-icon-draw rect {
    animation: rm-draw 900ms var(--rm-ease-expo);
  }
}

@media (min-width: 640px) {
  .rm-why__bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .rm-why__head {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
    gap: var(--rm-space-7);
  }

  .rm-main--front .rm-why__head {
    align-items: end;
  }

  .rm-why__bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(0, auto);
  }

  /* Plate holds the full-height left block; the four cells fill the right
     half across three rows (wide / narrow narrow / wide) with no dead slot. */
  .rm-why__plate {
    grid-column: span 2;
    grid-row: span 3;
  }

  .rm-why__cell {
    grid-column: span 1;
  }

  .rm-why__cell:nth-of-type(1),
  .rm-why__cell:nth-of-type(4) {
    grid-column: span 2;
  }
}

/* ——— Proof (surveyed ledger sheet + rail) ——— */
.rm-proof {
  position: relative;
  overflow: clip;
}

.rm-proof__gridlines {
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}

.rm-proof__layout {
  position: relative;
  z-index: 1;
}

/* One sheet, four hairline-separated entries — a schedule from a drawing
   set, not a shelf of cards. */
.rm-proof__sheet {
  margin-top: var(--rm-space-8);
  box-shadow: var(--rm-shadow-1);
}

.rm-proof__ledger {
  position: relative;
  background: var(--rm-surface);
}

.rm-proof__rail {
  position: absolute;
  top: var(--rm-space-7);
  bottom: var(--rm-space-7);
  left: var(--rm-space-6);
  width: 2px;
  display: none;
}

.rm-proof__rail-track {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--rm-hairline);
}

.rm-proof__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--rm-signal);
  transform: scaleY(1);
  transform-origin: 50% 0%;
}

.rm-js .rm-proof__rail-fill {
  transform: scaleY(0);
}

.rm-proof__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
  grid-template-areas:
    "index icon"
    "title title"
    "body  body";
  align-items: start;
  row-gap: var(--rm-space-3);
  margin: 0;
  padding: var(--rm-space-6) var(--rm-space-5);
}

.rm-proof__item + .rm-proof__item {
  border-top: 1px solid var(--rm-hairline);
}

/* Station pip riding the rail at each entry. Signal by default so a no-JS
   sheet reads complete; JS rests it and lights it with the scrub. */
.rm-proof__marker {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(var(--rm-space-6) + 1px - 0.25rem);
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border: 1px solid var(--rm-signal);
  border-radius: 1px;
  background: var(--rm-signal);
  transition:
    background-color 320ms var(--rm-ease-expo),
    border-color 320ms var(--rm-ease-expo);
}

.rm-js .rm-proof__marker {
  background: var(--rm-surface);
  border-color: var(--rm-hairline-strong);
}

.rm-js .rm-proof__marker.is-lit {
  background: var(--rm-signal);
  border-color: var(--rm-signal);
}

.rm-proof__index {
  grid-area: index;
  color: var(--rm-ink-faint);
}

.rm-proof__icon {
  grid-area: icon;
  justify-self: end;
  display: block;
  color: var(--rm-ink-muted);
  height: 2.5rem;
}

.rm-proof__title {
  grid-area: title;
  margin: 0;
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-h3);
  font-weight: var(--rm-weight-heading);
  letter-spacing: var(--rm-tracking-heading);
  line-height: var(--rm-leading-heading);
  max-width: 24ch;
  text-wrap: balance;
  transition: color var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-proof__body-text {
  grid-area: body;
  margin: 0;
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-body);
  max-width: 44ch;
}

.rm-proof__cta {
  margin-top: var(--rm-space-7);
}

@media (prefers-reduced-motion: no-preference) {
  .rm-js .rm-proof__item .rm-icon-draw path,
  .rm-js .rm-proof__item .rm-icon-draw circle,
  .rm-js .rm-proof__item .rm-icon-draw line,
  .rm-js .rm-proof__item .rm-icon-draw rect {
    stroke-dashoffset: 100;
  }

  .rm-js .rm-proof__item.is-drawn .rm-icon-draw path,
  .rm-js .rm-proof__item.is-drawn .rm-icon-draw circle,
  .rm-js .rm-proof__item.is-drawn .rm-icon-draw line,
  .rm-js .rm-proof__item.is-drawn .rm-icon-draw rect {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.9s var(--rm-ease-mask);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rm-js .rm-proof__rail-fill {
    transform: scaleY(1);
  }

  .rm-js .rm-proof__marker {
    background: var(--rm-signal);
    border-color: var(--rm-signal);
  }
}

@media (hover: hover) and (pointer: fine) {
  .rm-proof__item:hover .rm-proof__title,
  .rm-proof__item:focus-within .rm-proof__title {
    color: var(--rm-signal);
  }

  .rm-proof__item:hover .rm-proof__icon {
    color: var(--rm-ink);
  }
}

@media (min-width: 900px) {
  .rm-proof__rail {
    display: block;
  }

  .rm-proof__marker {
    display: block;
  }

  /* Ledger row: index · icon · title · body, asymmetric on purpose. */
  .rm-proof__item {
    grid-template-columns: 3rem 4rem minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "index icon title body";
    column-gap: var(--rm-space-6);
    align-items: start;
    padding: var(--rm-space-7) var(--rm-space-7) var(--rm-space-7) var(--rm-space-8);
  }

  .rm-proof__index {
    padding-top: 0.5em;
  }

  .rm-proof__icon {
    justify-self: start;
    margin-top: 0.125rem;
  }

  .rm-proof__body-text {
    padding-top: 0.35em;
  }
}


/* ——— Process (blueprint schematic chapter) ——— */
.rm-schematic {
  position: relative;
}

.rm-schematic__gridlines {
  overflow: hidden;
  mask-image: radial-gradient(ellipse 100% 70% at 30% 25%, #000 30%, transparent 100%);
}

.rm-schematic__inner {
  position: relative;
  z-index: 1;
}

.rm-schematic__layout {
  margin-top: var(--rm-space-8);
  display: grid;
  gap: var(--rm-space-7);
}

/**
 * The sheet ships on every breakpoint. Below 900px it sits in flow above the
 * annotated list; only the ≥900px spread pins it beside the steps.
 */
.rm-schematic__canvas {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

.rm-schematic__hold {
  display: grid;
  gap: var(--rm-space-3);
}

.rm-schematic__svg {
  display: block;
  width: 100%;
  height: auto;
  --rm-hairline: rgba(16, 18, 22, 0.42);
  --rm-hairline-strong: rgba(16, 18, 22, 0.7);
  color: var(--rm-hairline-strong);
  overflow: visible;
}

.rm-schematic__frame {
  color: var(--rm-hairline);
}

.rm-schematic__title-rule {
  stroke: var(--rm-hairline);
}

/* Stages share one field; inactive ones are opacity-gated. */
.rm-schematic__stage {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--rm-ease-expo);
}

.rm-schematic__stage.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Undrawn stages hold strokes collapsed until the first-activation timeline. */
.rm-schematic__stage:not(.is-drawn) path[pathLength]:not(.rm-schematic__marker),
.rm-schematic__stage:not(.is-drawn) rect[pathLength],
.rm-schematic__stage:not(.is-drawn) circle[pathLength] {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.rm-schematic__stage:not(.is-drawn) .rm-schematic__pip,
.rm-schematic__stage:not(.is-drawn) .rm-schematic__desk,
.rm-schematic__stage:not(.is-drawn) .rm-schematic__chair,
.rm-schematic__stage:not(.is-drawn) .rm-schematic__overlap {
  opacity: 0;
}

.rm-schematic__tick {
  stroke: var(--rm-hairline);
}

.rm-schematic__tick--keep {
  stroke: var(--rm-hairline-strong);
}

/* The screening sweep only exists while it is running. */
.rm-schematic__scan {
  stroke: var(--rm-signal);
  stroke-width: 1.25;
  opacity: 0;
}

.rm-schematic__leader {
  stroke: var(--rm-hairline-strong);
}

.rm-schematic__crossing {
  stroke: var(--rm-signal);
}

.rm-schematic__station {
  stroke: var(--rm-hairline-strong);
}

.rm-schematic__pip {
  fill: var(--rm-ink-faint);
  stroke: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.rm-schematic__pip--signal {
  fill: var(--rm-signal);
}

.rm-schematic__enclosure,
.rm-schematic__ledger,
.rm-schematic__client,
.rm-schematic__tangle,
.rm-schematic__gather {
  stroke: var(--rm-hairline);
}

.rm-schematic__client {
  stroke: var(--rm-hairline-strong);
}

.rm-schematic__plan,
.rm-schematic__door,
.rm-schematic__door-swing,
.rm-schematic__desk,
.rm-schematic__chair,
.rm-schematic__hours,
.rm-schematic__hour-tick {
  stroke: var(--rm-hairline);
}

.rm-schematic__desk {
  stroke: var(--rm-hairline-strong);
}

.rm-schematic__overlap {
  fill: var(--rm-signal);
  stroke: none;
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: 0% 50%;
}

.rm-schematic__circuit {
  stroke: var(--rm-hairline-strong);
}

/**
 * The marker is a short dash riding the loop, so the dash pattern is a CSS
 * default rather than a JS-only setup — without it a no-JS reader would get
 * the whole circuit painted solid signal.
 */
.rm-schematic__marker {
  stroke: var(--rm-signal);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 5 95;
}

/* -- Title block + progress rail -- */
.rm-schematic__titleblock {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rm-space-4);
  padding-top: var(--rm-space-2);
  border-top: 1px solid var(--rm-hairline);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  text-transform: uppercase;
}

.rm-schematic__titleblock-meta {
  display: flex;
  align-items: baseline;
  gap: var(--rm-space-3);
  min-width: 0;
}

.rm-schematic__titleblock-key {
  color: var(--rm-ink-faint);
  flex-shrink: 0;
}

.rm-schematic__titleblock-mark {
  color: var(--rm-ink);
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition: clip-path 320ms var(--rm-ease-mask);
}

.rm-schematic__titleblock-mark.is-wiping {
  clip-path: inset(0 0 100% 0);
}

.rm-schematic__titleblock-value {
  color: var(--rm-signal);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.rm-schematic__rail {
  display: grid;
  gap: 0.375rem;
}

.rm-schematic__rail-track {
  position: relative;
  display: block;
  height: 2px;
  background: var(--rm-hairline);
  overflow: hidden;
}

.rm-schematic__rail-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--rm-signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 420ms var(--rm-ease-expo);
  will-change: transform;
}

.rm-schematic__rail-ticks {
  display: flex;
  justify-content: space-between;
}

.rm-schematic__rail-tick {
  width: 0.375rem;
  height: 0.375rem;
  border: 1px solid var(--rm-hairline-strong);
  border-radius: 1px;
  transition:
    background-color 320ms var(--rm-ease-expo),
    border-color 320ms var(--rm-ease-expo);
}

.rm-schematic__rail-tick.is-lit {
  background: var(--rm-signal);
  border-color: var(--rm-signal);
}

/* -- The annotated steps -- */
.rm-schematic__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rm-space-6);
  counter-reset: none;
}

.rm-schematic__step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    "index icon"
    "index title"
    "index body";
  gap: 0.5rem var(--rm-space-4);
  padding-top: var(--rm-space-5);
  border-top: 1px solid var(--rm-hairline);
  transition: border-color 520ms var(--rm-ease-expo);
}

.rm-schematic__step-index {
  grid-area: index;
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  color: var(--rm-ink-faint);
  padding-top: 0.5rem;
  transition: color 420ms var(--rm-ease-expo);
}

.rm-schematic__step-icon {
  grid-area: icon;
  color: var(--rm-ink-faint);
  height: 1.875rem;
  transition: color 420ms var(--rm-ease-expo);
}

.rm-schematic__step-title {
  grid-area: title;
  margin: 0;
  font-size: var(--rm-text-h3);
  max-width: 26ch;
}

.rm-schematic__step-body {
  grid-area: body;
  margin: 0;
  color: var(--rm-ink-muted);
  max-width: 56ch;
}

.rm-schematic__step.is-current {
  border-color: var(--rm-signal);
}

.rm-schematic__step.is-current .rm-schematic__step-index,
.rm-schematic__step.is-current .rm-schematic__step-icon {
  color: var(--rm-signal);
}

.rm-schematic__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-3);
  margin-top: var(--rm-space-8);
}

@media (min-width: 900px) {
  .rm-schematic__layout {
    grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr);
    gap: var(--rm-space-9);
  }

  /**
   * The column stretches the full height of the annotation list — that height
   * is the sticky travel — and the inner hold is what actually sticks, so the
   * drawing stays on screen for the whole sequence instead of scrolling away
   * after step 02.
   */
  .rm-schematic__canvas {
    max-width: none;
    margin-inline: 0;
    align-self: stretch;
    min-height: 100%;
  }

  .rm-schematic__hold {
    position: sticky;
    top: 8rem;
    align-self: start;
  }

  .rm-schematic__steps {
    align-self: start;
    gap: 0;
  }

  .rm-schematic__step {
    padding-block: var(--rm-space-7);
    min-height: 34vh;
    align-content: start;
  }

  .rm-schematic__step:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rm-schematic__stage {
    transition-duration: 200ms;
  }

  .rm-schematic__stage:not(.is-drawn) path[pathLength]:not(.rm-schematic__marker),
  .rm-schematic__stage:not(.is-drawn) rect[pathLength],
  .rm-schematic__stage:not(.is-drawn) circle[pathLength] {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .rm-schematic__stage:not(.is-drawn) .rm-schematic__pip,
  .rm-schematic__stage:not(.is-drawn) .rm-schematic__desk,
  .rm-schematic__stage:not(.is-drawn) .rm-schematic__chair,
  .rm-schematic__stage:not(.is-drawn) .rm-schematic__overlap {
    opacity: 1;
  }

  .rm-schematic__titleblock-mark,
  .rm-schematic__rail-fill,
  .rm-schematic__rail-tick,
  .rm-schematic__step,
  .rm-schematic__step-index,
  .rm-schematic__step-icon {
    transition: none;
  }

  .rm-schematic__titleblock-mark.is-wiping {
    clip-path: inset(0 0 0 0);
  }

  .rm-schematic__marker {
    display: none;
  }

  .rm-schematic__scan {
    opacity: 0;
  }
}

/* ——— Disciplines (spec-sheet cards) ——— */
.rm-specs__grid {
  display: grid;
  gap: var(--rm-space-4);
  margin-top: var(--rm-space-8);
}

.rm-card--spec {
  padding: var(--rm-space-5);
  gap: var(--rm-space-4);
}

.rm-card--spec .rm-card__link {
  gap: var(--rm-space-4);
  height: 100%;
}

.rm-card__index {
  position: absolute;
  top: var(--rm-space-5);
  right: var(--rm-space-5);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  color: var(--rm-ink-faint);
}

.rm-card--spec .rm-card__icon {
  color: var(--rm-ink-muted);
  height: 2rem;
  width: 2rem;
}

.rm-card--spec .rm-card__title {
  max-width: 14ch;
}

/* The spec block sits on the floor of the card so titles of different
   lengths still line their measurements up across the row. */
.rm-card--spec .rm-spec {
  margin-top: auto;
}

.rm-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--rm-text-body-sm);
  font-weight: var(--rm-weight-medium);
  color: var(--rm-signal);
}

.rm-card__action svg {
  transition: transform var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-specs__footer {
  margin-top: var(--rm-space-7);
}

@media (hover: hover) and (pointer: fine) {
  .rm-card:hover .rm-card__action svg,
  .rm-card:focus-within .rm-card__action svg {
    transform: translate3d(2px, -2px, 0);
  }
}

@media (min-width: 640px) {
  .rm-specs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .rm-specs__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Homepage dossier grid — also in profiles.css for /profiles/; here so core.css covers home. */
.rm-profile-listing__grid {
  display: grid;
  gap: var(--rm-space-7) var(--rm-space-5);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.rm-profile-listing__grid > .rm-profile {
  display: flex;
  height: 100%;
}

@media (min-width: 720px) {
  .rm-profile-listing__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .rm-profile-listing__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rm-profile--dossier .rm-profile__link {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: var(--rm-space-4);
  align-items: stretch;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: var(--rm-space-4);
  border: 1px solid var(--rm-hairline);
  border-radius: var(--rm-radius-plate);
  background: color-mix(in srgb, var(--rm-concrete) 55%, var(--rm-surface));
  color: inherit;
  text-decoration: none;
  transition:
    transform 180ms var(--rm-ease-expo),
    border-color 180ms var(--rm-ease-expo),
    box-shadow 220ms var(--rm-ease-expo);
}

.rm-ground--concrete .rm-profile--dossier .rm-profile__link {
  background: var(--rm-surface);
}

.rm-profile--dossier .rm-profile__plate {
  display: block;
  width: 5.75rem;
  aspect-ratio: 1;
  margin: 0;
  border-radius: var(--rm-radius-plate);
  border: 1px solid var(--rm-hairline);
  overflow: hidden;
  --rm-grade: 0.28;
}

.rm-profile--dossier .rm-profile__plate img,
.rm-profile--dossier .rm-profile__plate .rm-profile-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transition: filter 220ms var(--rm-ease-expo);
}

.rm-profile--dossier .rm-profile__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  min-height: 100%;
  padding-top: 0.15rem;
}

.rm-profile--dossier .rm-profile__name {
  font-family: var(--rm-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem);
  font-weight: var(--rm-weight-heading);
  letter-spacing: var(--rm-tracking-heading);
  line-height: 1.1;
}

.rm-profile--dossier .rm-profile__role {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  text-transform: uppercase;
  color: var(--rm-ink-faint);
}

.rm-profile__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 0.35rem;
  margin-top: 0.25rem;
  margin-bottom: var(--rm-space-3);
}

.rm-profile__chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rm-hairline);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-surface);
  font-family: var(--rm-font-body);
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--rm-text-muted);
}

.rm-profile__action {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 0.5rem;
  margin-top: auto;
  font-family: var(--rm-font-body);
  font-size: var(--rm-text-body-sm);
  font-weight: var(--rm-weight-medium);
  color: var(--rm-text);
}

.rm-profile__action-disc {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-signal) 18%, transparent);
  color: var(--rm-signal);
}

@media (hover: hover) and (pointer: fine) {
  .rm-profile--dossier .rm-profile__link:hover,
  .rm-profile--dossier .rm-profile__link:focus-visible {
    transform: translateY(-3px);
    border-color: var(--rm-hairline-strong);
    box-shadow: var(--rm-shadow-2);
  }

  .rm-profile--dossier .rm-profile__link:hover .rm-profile__plate img,
  .rm-profile--dossier .rm-profile__link:focus-visible .rm-profile__plate img {
    filter: contrast(1.06) brightness(1.02);
  }

  .rm-profile--dossier .rm-profile__link:hover .rm-profile__name,
  .rm-profile--dossier .rm-profile__link:focus-visible .rm-profile__name {
    color: var(--rm-signal);
  }

  .rm-profile--dossier .rm-profile__link:hover .rm-profile__action-disc,
  .rm-profile--dossier .rm-profile__link:focus-visible .rm-profile__action-disc {
    transform: translate(1px, -1px);
  }
}

/* ——— Profiles (dossier cards on homepage) ——— */
.rm-profiles__rail {
  margin-top: var(--rm-space-8);
}

.rm-profile {
  margin: 0;
}

.rm-profile__link {
  display: grid;
  gap: 0.375rem;
  color: inherit;
  text-decoration: none;
}

.rm-profile__plate {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--rm-radius-plate);
  border: 1px solid var(--rm-hairline);
  margin-bottom: var(--rm-space-3);
  --rm-grade: 0.34;
  transition:
    border-color 420ms var(--rm-ease-expo),
    box-shadow 520ms var(--rm-ease-expo);
}

.rm-profile__plate::after {
  transition: opacity 620ms var(--rm-ease-expo);
}

.rm-profile__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}

.rm-profile__name {
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-h4);
  font-weight: var(--rm-weight-heading);
  letter-spacing: var(--rm-tracking-heading);
  transition: color var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-profile__role {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  text-transform: uppercase;
  color: var(--rm-ink-faint);
}

.rm-profiles__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-3);
  margin-top: var(--rm-space-8);
}

/* Legacy rail-variant hovers (kept for any remaining rail cards). */
@media (hover: hover) and (pointer: fine) {
  .rm-profile--rail .rm-profile__link:hover .rm-profile__plate,
  .rm-profile--rail .rm-profile__link:focus-visible .rm-profile__plate {
    border-color: var(--rm-hairline-strong);
    box-shadow: var(--rm-shadow-2);
  }

  .rm-profile--rail .rm-profile__link:hover .rm-profile__plate img,
  .rm-profile--rail .rm-profile__link:focus-visible .rm-profile__plate img {
    filter: contrast(1.06) brightness(1.02);
  }

  .rm-profile--rail .rm-profile__link:hover .rm-profile__plate::after,
  .rm-profile--rail .rm-profile__link:focus-visible .rm-profile__plate::after {
    opacity: 0.1;
  }

  .rm-profile--rail .rm-profile__link:hover .rm-profile__name,
  .rm-profile--rail .rm-profile__link:focus-visible .rm-profile__name {
    color: var(--rm-signal);
  }
}

/* ——— Quotes (dark word-scrub chapter) ——— */
.rm-quotes {
  overflow: hidden;
}

.rm-quotes__gridlines {
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}

.rm-quotes__layout {
  position: relative;
  z-index: 1;
}

.rm-quotes__list {
  margin-top: var(--rm-space-8);
  display: grid;
  gap: var(--rm-space-7);
}

.rm-quotes__cta {
  margin-top: var(--rm-space-8);
}

.rm-quote {
  margin: 0;
  padding-top: var(--rm-space-5);
  border-top: 1px solid var(--rm-hairline);
  display: grid;
  gap: var(--rm-space-5);
}

.rm-quote__index {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  color: var(--rm-signal);
}

.rm-quote__text {
  margin: 0;
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-h2);
  font-weight: var(--rm-weight-heading);
  line-height: 1.22;
  letter-spacing: var(--rm-tracking-heading);
  text-wrap: pretty;
  max-width: 46ch;
}

/* Words are wrapped by motion.js. They stay inline so the quote remains one
   normal run of text for selection and assistive tech, and are never dimmed
   by CSS — only the scrub tween touches their opacity. */
.rm-quote__word {
  display: inline;
}

.rm-quote__cite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rm-space-3);
}

.rm-quote__name {
  font-style: normal;
  font-weight: var(--rm-weight-medium);
}

.rm-quote__role {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  text-transform: uppercase;
  color: var(--rm-ink-faint);
}

@media (min-width: 900px) {
  .rm-quote {
    grid-template-columns: 4rem minmax(0, 1fr) 14rem;
    align-items: start;
    gap: var(--rm-space-6);
  }

  .rm-quote__cite {
    display: grid;
    gap: 0.25rem;
    justify-items: start;
  }
}

/* ——— FAQ (morphing accordion) ——— */
.rm-main--front .rm-section.rm-chapter.rm-faq {
  padding-block: var(--rm-section-y-tight);
}

.rm-faq__layout {
  display: grid;
  gap: var(--rm-space-7);
}

.rm-faq__action {
  margin: 0;
}

@media (min-width: 1024px) {
  .rm-faq__layout {
    grid-template-columns: minmax(16rem, 0.8fr) 1.2fr;
    align-items: start;
    gap: var(--rm-space-9);
  }

  .rm-faq__intro {
    position: sticky;
    top: 8rem;
  }
}

.rm-faq__list {
  border-top: 1px solid var(--rm-hairline);
}

.rm-faq__item {
  border-bottom: 1px solid var(--rm-hairline);
}

.rm-faq__question {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.rm-faq__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
  align-items: start;
  gap: var(--rm-space-4);
  padding: var(--rm-space-5) 0;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--rm-ink);
  cursor: pointer;
}

.rm-faq__index {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  color: var(--rm-ink-faint);
  padding-top: 0.35em;
  transition: color var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-faq__label {
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-h4);
  font-weight: var(--rm-weight-heading);
  letter-spacing: var(--rm-tracking-heading);
  line-height: 1.2;
  transition: color var(--rm-duration-ui) var(--rm-ease-expo);
}

/* Two hairlines that morph plus into minus. */
.rm-faq__sign {
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.3em;
  justify-self: end;
}

.rm-faq__sign-bar {
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--rm-ink);
  transform-origin: 50% 50%;
  transition: transform 420ms var(--rm-ease-mask);
}

.rm-faq__sign-bar--v {
  transform: rotate(90deg);
}

.rm-faq__trigger[aria-expanded="true"] .rm-faq__sign-bar--v {
  transform: rotate(90deg) scaleX(0);
}

.rm-faq__trigger[aria-expanded="true"] .rm-faq__index,
.rm-faq__trigger[aria-expanded="true"] .rm-faq__label {
  color: var(--rm-signal);
}

.rm-faq__trigger:focus-visible {
  outline: 2px solid var(--rm-signal);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .rm-faq__trigger:hover .rm-faq__label {
    color: var(--rm-signal);
  }
}

/* JS animates the wrapper height; the inner block carries the padding so
   there is nothing to interpolate on the text itself. */
.rm-faq__panel {
  overflow: hidden;
}

.rm-faq__answer {
  padding: 0 0 var(--rm-space-5);
  padding-left: calc(2.5rem + var(--rm-space-4));
}

.rm-faq__answer p {
  margin: 0;
  color: var(--rm-ink-muted);
  max-width: 62ch;
}

/* ——— Insights (editorial plates) ——— */
.rm-insights__grid {
  display: grid;
  gap: var(--rm-space-6) var(--rm-space-4);
  margin-top: var(--rm-space-8);
}

.rm-insight {
  margin: 0;
  height: 100%;
}

.rm-insight__link {
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-4);
  color: inherit;
  text-decoration: none;
  height: 100%;
  transition: transform 160ms var(--rm-ease-expo);
}

.rm-insight__frame {
  display: block;
  background: var(--rm-ground-raised, var(--rm-surface));
  box-shadow: var(--rm-shadow-1);
  transition:
    box-shadow 520ms var(--rm-ease-expo),
    border-color 320ms var(--rm-ease-expo),
    transform 520ms var(--rm-ease-expo);
}

.rm-insight__plate {
  display: block;
  aspect-ratio: 16 / 10;
  --rm-grade: 0.26;
}

.rm-insight--lead .rm-insight__plate {
  aspect-ratio: 16 / 10;
}

.rm-insight__plate::after {
  transition: opacity 620ms var(--rm-ease-expo);
}

.rm-insight__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  clip-path: inset(0);
  transition:
    transform 620ms var(--rm-ease-expo),
    filter 620ms var(--rm-ease-expo),
    clip-path 520ms cubic-bezier(0.32, 0.72, 0, 1);
}

.rm-insight__body {
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-3);
  flex: 1 1 auto;
}

.rm-insight__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rm-space-3);
  padding-top: var(--rm-space-3);
  border-top: 1px solid var(--rm-hairline);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-label);
  letter-spacing: var(--rm-tracking-label);
  text-transform: uppercase;
  color: var(--rm-ink-faint);
}

.rm-insight__date {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.rm-insight__title {
  font-size: var(--rm-text-h4);
  max-width: 26ch;
  transition: color var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-insight__excerpt {
  font-size: var(--rm-text-body-sm);
  color: var(--rm-ink-muted, var(--rm-text-muted));
  max-width: 42ch;
}

.rm-insight__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: start;
  margin-top: auto;
  font-size: var(--rm-text-body-sm);
  font-weight: var(--rm-weight-medium);
  line-height: 1;
  color: var(--rm-signal);
}

.rm-insight__more .rm-icon,
.rm-insight__more svg {
  display: block;
  flex: 0 0 auto;
  transition: transform var(--rm-duration-ui) var(--rm-ease-expo);
}

.rm-insights__footer {
  margin-top: var(--rm-space-8);
}

@media (hover: hover) and (pointer: fine) {
  .rm-insight__link:active {
    transform: scale(0.97);
  }

  .rm-insight__link:hover .rm-insight__frame,
  .rm-insight__link:focus-visible .rm-insight__frame {
    box-shadow: var(--rm-shadow-2);
    border-color: var(--rm-hairline-strong, var(--rm-rule-strong));
    transform: translate3d(0, -3px, 0);
  }

  .rm-insight__link:hover .rm-insight__frame.rm-ticks::before,
  .rm-insight__link:hover .rm-insight__frame.rm-ticks::after,
  .rm-insight__link:focus-visible .rm-insight__frame.rm-ticks::before,
  .rm-insight__link:focus-visible .rm-insight__frame.rm-ticks::after {
    border-color: var(--rm-signal);
    width: 0.9rem;
    height: 0.9rem;
  }

  .rm-insight__link:hover .rm-insight__plate img,
  .rm-insight__link:focus-visible .rm-insight__plate img {
    transform: scale(1.055);
    filter: contrast(1.06) brightness(1.02);
    clip-path: inset(0);
  }

  .rm-insight__link:hover .rm-insight__plate::after,
  .rm-insight__link:focus-visible .rm-insight__plate::after {
    opacity: 0.1;
  }

  .rm-insight__link:hover .rm-insight__title,
  .rm-insight__link:focus-visible .rm-insight__title {
    color: var(--rm-signal);
  }

  .rm-insight__link:hover .rm-insight__more svg,
  .rm-insight__link:focus-visible .rm-insight__more svg {
    transform: translate3d(2px, -2px, 0);
  }

  .rm-insight__link:hover .rm-insight__more .rm-icon-draw path,
  .rm-insight__link:hover .rm-insight__more .rm-icon-draw line,
  .rm-insight__link:focus-visible .rm-insight__more .rm-icon-draw path,
  .rm-insight__link:focus-visible .rm-insight__more .rm-icon-draw line {
    animation: rm-draw 900ms var(--rm-ease-expo);
  }
}

/* Rest state clip is only meaningful when motion is allowed + fine pointer. */
@media (hover: hover) and (pointer: fine) {
  .rm-insight__plate img {
    clip-path: inset(8% 0 0 0);
  }

  .rm-insight__link:hover .rm-insight__plate img,
  .rm-insight__link:focus-visible .rm-insight__plate img {
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rm-insight__link,
  .rm-insight__frame,
  .rm-insight__plate img,
  .rm-insight__more svg {
    transition: none;
  }

  .rm-insight__plate img {
    clip-path: none;
  }

  .rm-insight__link:hover .rm-insight__frame,
  .rm-insight__link:focus-visible .rm-insight__frame,
  .rm-insight__link:active {
    transform: none;
  }

  .rm-insight__link:hover .rm-insight__plate img,
  .rm-insight__link:focus-visible .rm-insight__plate img {
    transform: none;
  }

  .rm-insight__link:hover .rm-insight__more svg,
  .rm-insight__link:focus-visible .rm-insight__more svg {
    transform: none;
  }

  .rm-insight__link:hover .rm-insight__more .rm-icon-draw path,
  .rm-insight__link:hover .rm-insight__more .rm-icon-draw line,
  .rm-insight__link:focus-visible .rm-insight__more .rm-icon-draw path,
  .rm-insight__link:focus-visible .rm-insight__more .rm-icon-draw line {
    animation: none;
  }
}

@media (min-width: 768px) {
  .rm-insights__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* The middle plate rides lower so the row is not a shelf of three. */
  .rm-insights__grid > .rm-insight:nth-child(2) {
    margin-top: var(--rm-space-6);
  }
}

/* ——— Closing chapter — dark photographic ink band ——— */
.rm-close {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--rm-space-10);
  isolation: isolate;
  /* Graphite bed: `.rm-ground--ink` is aliased to white elsewhere. */
  background-color: var(--rm-ink-900);
  color: var(--rm-text-invert);
  /* Invert lines are tuned for a flat graphite field. On the photograph they need a little more weight to stay visible. */
  --rm-grid: rgba(244, 245, 243, 0.2);
}

.rm-close__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
}

.rm-close__media picture {
  display: contents;
}

.rm-close__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  opacity: 1;
  filter: none;
}

.rm-close__gridlines {
  z-index: 0;
  mask-image: radial-gradient(ellipse 90% 80% at 30% 30%, #000 25%, transparent 100%);
}

.rm-close__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: var(--rm-space-5);
}

.rm-close__title {
  margin: 0;
  font-size: var(--rm-text-h1);
  max-width: 22ch;
  color: var(--rm-text-invert);
}

.rm-close__rule {
  display: block;
  width: 4.5rem;
  height: 2px;
  background: var(--rm-signal);
}

.rm-close__text {
  margin: 0;
  color: var(--rm-text-invert-muted);
  font-size: var(--rm-text-body-lg);
  max-width: 52ch;
}

.rm-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-3);
  margin-top: var(--rm-space-4);
}

/* Below-fold homepage chapters skip layout until near the viewport. */
.rm-main--front > .rm-chapter {
  content-visibility: auto;
  contain-intrinsic-size: auto 36rem;
}

/* ScrollTrigger needs real chapter heights; motion-boot adds .rm-motion. */
html.rm-motion .rm-main--front > .rm-chapter {
  content-visibility: visible;
}

@media screen and (max-width: 768px) {
  .rm-close__img {
    object-position: 40% center;
  }
}