/*
 * Generated always-on bundle: tokens + base + layout + components + chrome.
 * 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 ---------------------------------------------------------- */
  --rm-ink-900: #0b0c0e;
  --rm-ink-850: #101216;
  --rm-ink-800: #16191e;
  --rm-ink-700: #1e232a;
  --rm-ink-600: #2a3038;

  --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 {
  --rm-ground: var(--rm-ink-900);
  --rm-ground-raised: var(--rm-ink-800);
  --rm-ink: var(--rm-text-invert);
  --rm-ink-muted: var(--rm-text-invert-muted);
  --rm-ink-faint: var(--rm-text-invert-faint);
  --rm-hairline: var(--rm-rule-invert);
  --rm-hairline-strong: var(--rm-rule-invert-strong);
  --rm-grid: var(--rm-grid-line-invert);
  --rm-plate-inset: var(--rm-inset-hairline);
  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;
  background-color: var(--rm-ink-900);
}

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-ink-900);
  scrollbar-width: thin;
}

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

::-webkit-scrollbar-track {
  background: var(--rm-ink-900);
}

::-webkit-scrollbar-thumb {
  background: var(--rm-ink-600);
  border: 3px solid var(--rm-ink-900);
  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);
}

.rm-ground--ink :focus-visible {
  outline-color: var(--rm-signal);
}

/* ---- 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-ground--ink a:not(.rm-btn) {
  color: var(--rm-ink);
}

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

.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);
}

.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) {
  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,
.rm-ground--ink .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,
.rm-ground--ink .rm-btn--secondary:hover,
.rm-ground--ink .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, #ffffff 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 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.48;
}

.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;
  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;
}

/* ==========================================================================
   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(11, 12, 14, 0.62);
  --rm-bar-line: rgba(244, 245, 243, 0.14);
  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), 0 12px 32px rgba(11, 12, 14, 0.22);
  backdrop-filter: blur(18px) saturate(1.3);
  color: var(--rm-text-invert);
  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);
}

/* On light pages the bar inverts to a bright plate on concrete. */
.rm-header:not(.rm-header--over-ink) .rm-header__bar {
  --rm-bar-ground: rgba(255, 255, 255, 0.78);
  --rm-bar-line: rgba(16, 18, 22, 0.12);
  color: var(--rm-text);
  box-shadow: var(--rm-inset-hairline-light), 0 10px 30px rgba(11, 12, 14, 0.08);
}

/* 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(11, 12, 14, 0.9);
  translate: 0 -0.4375rem;
  box-shadow: var(--rm-inset-hairline), 0 8px 24px rgba(11, 12, 14, 0.42);
}

.rm-header:not(.rm-header--over-ink).is-compressed .rm-header__bar {
  --rm-bar-ground: rgba(255, 255, 255, 0.95);
  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-ink-900);
    backdrop-filter: none;
  }

  .rm-header:not(.rm-header--over-ink) .rm-header__bar {
    --rm-bar-ground: var(--rm-surface);
  }
}

/* -- 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;
}

.rm-header--over-ink .rm-brand__mark--dark {
  visibility: hidden;
}

.rm-header--over-ink .rm-brand__mark--light {
  visibility: visible;
}

/* 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-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-text-invert-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-text-invert);
  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-rule-invert);
  border-radius: var(--rm-radius-pill);
  color: var(--rm-text-invert-muted);
  transition:
    color 260ms var(--rm-ease-expo),
    border-color 260ms var(--rm-ease-expo),
    background-color 260ms var(--rm-ease-expo);
}

.rm-footer.rm-ground--ink .rm-footer__social a {
  color: var(--rm-text-invert-muted);
}

.rm-footer.rm-ground--ink .rm-footer__social a:hover,
.rm-footer.rm-ground--ink .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-text-invert-faint);
}

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

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

.rm-footer__list a {
  display: block;
  padding-block: 0.6875rem;
  color: var(--rm-text-invert-muted);
  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-text-invert);
  transform: translateX(0.4375rem);
}

/* -- Watermark wordmark -------------------------------------------------- */

.rm-footer__wordmark {
  margin-top: var(--rm-space-9);
  pointer-events: none;
}

/* The SVG scales to the column, so the mark is always the whole word. */
.rm-footer__wordmark-svg {
  display: block;
  width: 100%;
  height: auto;
}

.rm-footer__wordmark-svg text {
  font-family: var(--rm-font-display);
  font-size: 96px;
  font-weight: 600;
  text-transform: uppercase;
  fill: rgba(244, 245, 243, 0.08);
}

/* -- 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-5);
  padding-top: var(--rm-space-5);
  border-top: 1px solid var(--rm-rule-invert);
}

.rm-footer__copy {
  margin: 0;
  color: var(--rm-text-invert-faint);
  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-text-invert-faint);
  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-text-invert);
}

@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-rule-invert);
  }
}