/* ==========================================================================
   Sthavor Partners — production stylesheet
   Public Sans (display/body) + IBM Plex Mono (data/labels). No gradients,
   no glassmorphism, no card-grid decoration. Square edges, thin rules.
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. Design tokens
   ----------------------------------------------------------------------- */
:root {
  /* Core surfaces */
  --color-ink-1000: #080b0b;
  --color-ink-950: #0b0e0f;
  --color-ink-900: #111516;
  --color-ink-800: #1a2021;
  --color-ink-700: #252c2d;

  /* Paper surfaces */
  --color-paper-50: #f4f1e9;
  --color-paper-100: #eae5da;
  --color-paper-200: #d9d3c6;

  /* Text on dark */
  --color-text-primary: #f5f3ed;
  --color-text-secondary: #a9aeaa;
  --color-text-tertiary: #79807c;

  /* Text on paper */
  --color-text-ink: #101313;
  --color-text-ink-soft: #4f5653;
  --color-text-ink-faint: #686e6a;

  /* Brand accents */
  --color-mineral-700: #243b37;
  --color-mineral-500: #526f67;
  --color-mineral-300: #8fa9a1;
  --color-brass-500: #b79a5b;
  --color-copper-400: #c0895c;

  /* Status colors — data interfaces only */
  --color-positive: #668b76;
  --color-watch: #b79a5b;
  --color-risk: #b46c64;

  /* Rules */
  --color-rule-dark: rgba(245, 243, 237, 0.14);
  --color-rule-light: rgba(16, 19, 19, 0.18);
  --color-rule-focus: #c9b477;

  /* Fonts */
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Type scale */
  --type-display: clamp(3.25rem, 6.6vw, 7rem);
  --type-h1: clamp(3rem, calc(2.5rem + 2.2vw), 4.875rem);
  --type-h2: clamp(2rem, 3.6vw, 3.9rem);
  --type-h3: clamp(1.35rem, 2.05vw, 2.25rem);
  --type-h4: clamp(1.125rem, 1.35vw, 1.375rem);
  --type-lede: clamp(1.15rem, 1.5vw, 1.4375rem);
  --type-body: 1.125rem;
  --type-small: 0.9375rem;
  --type-micro: 0.75rem;

  /* Grid */
  --page-max: 1440px;
  --page-gutter: clamp(20px, 4.5vw, 72px);
  --grid-gap: clamp(16px, 2vw, 28px);
  --measure-body: 62ch;
  --measure-lede: 52ch;
  --measure-narrow: 38ch;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 192px;

  /* Radius */
  --radius-none: 0;
  --radius-control: 2px;
  --radius-media: 4px;

  /* Motion durations */
  --motion-instant: 0ms;
  --motion-fast: 140ms;
  --motion-control: 180ms;
  --motion-base: 260ms;
  --motion-reveal: 420ms;
  --motion-emphasis: 560ms;
  --motion-line-long: 640ms;

  /* Motion easing */
  --ease-precision: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-mask: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-line: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Motion distance */
  --shift-xs: 4px;
  --shift-sm: 8px;
  --shift-md: 12px;
  --shift-max: 15px;
  --shift-hover: 5px;
}

/* -----------------------------------------------------------------------
   2. Reset
   ----------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(72px + var(--space-5));
}

@media (max-width: 1100px) {
  html {
    scroll-padding-top: calc(64px + var(--space-5));
  }
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

a {
  color: inherit;
}

/* -----------------------------------------------------------------------
   3. Base typography and surfaces
   ----------------------------------------------------------------------- */
body {
  background: var(--color-ink-1000);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: inherit;
}

h1 {
  font-size: var(--type-h1);
  line-height: 0.94;
  letter-spacing: -0.05em;
}

h2 {
  font-size: var(--type-h2);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

h3 {
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h4 {
  font-size: var(--type-h4);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.lede {
  font-size: var(--type-lede);
  line-height: 1.45;
  letter-spacing: -0.012em;
  max-width: var(--measure-lede);
}

p {
  max-width: var(--measure-body);
}

.on-paper {
  background: var(--color-paper-50);
  color: var(--color-text-ink);
}

.on-ink {
  background: var(--color-ink-1000);
  color: var(--color-text-primary);
}

/* -----------------------------------------------------------------------
   4. Grid
   ----------------------------------------------------------------------- */
.page-grid {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

@media (max-width: 1023px) {
  .page-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .page-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -----------------------------------------------------------------------
   5. Section labels, rules, utility text
   ----------------------------------------------------------------------- */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.section-label--on-ink {
  color: var(--color-mineral-300);
}

.section-label--on-paper {
  color: var(--color-text-ink-soft);
}

.rule {
  border: none;
  height: 1px;
  background: var(--color-rule-dark);
}

.rule--paper {
  background: var(--color-rule-light);
}

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

.skip-link {
  position: absolute;
  top: -200px;
  left: var(--space-5);
  z-index: 1000;
  background: var(--color-paper-50);
  color: var(--color-text-ink);
  padding: var(--space-3) var(--space-5);
  font-size: var(--type-small);
  font-weight: 600;
  transition: top var(--motion-control) var(--ease-precision);
}

.skip-link:focus {
  top: var(--space-5);
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-rule-focus);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------
   6. Buttons and text links
   ----------------------------------------------------------------------- */
.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding-inline: 22px;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--motion-control) var(--ease-precision),
    color var(--motion-control) var(--ease-precision),
    border-color var(--motion-control) var(--ease-precision);
}

.button-primary {
  border: 1px solid var(--color-paper-50);
  background: var(--color-paper-50);
  color: var(--color-text-ink);
}

.button-primary:hover {
  background: var(--color-mineral-500);
  border-color: var(--color-mineral-500);
  color: var(--color-paper-50);
}

.button-primary:active {
  transform: translateY(1px);
}

.button-primary[disabled] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.button-secondary {
  border: 1px solid var(--color-rule-dark);
  background: transparent;
  color: var(--color-text-primary);
}

.on-paper .button-secondary {
  border-color: var(--color-rule-light);
  color: var(--color-text-ink);
}

.button-secondary:hover {
  background: rgba(245, 243, 237, 0.06);
}

.on-paper .button-secondary:hover {
  background: rgba(16, 19, 19, 0.06);
}

.button-secondary:active {
  transform: translateY(1px);
}

.button-arrow {
  display: inline-block;
  transition: transform var(--motion-control) var(--ease-precision);
}

.button-primary:hover .button-arrow,
.button-secondary:hover .button-arrow,
.text-action:hover .button-arrow {
  transform: translateX(4px);
}

.text-action {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-small);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .text-action:hover {
    text-decoration-thickness: 2px;
  }
}

/* -----------------------------------------------------------------------
   7. Global navigation
   ----------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--motion-control) var(--ease-precision),
    border-color var(--motion-control) var(--ease-precision);
}

.site-nav.is-scrolled {
  background: var(--color-ink-1000);
  border-bottom-color: var(--color-rule-dark);
}

.site-nav__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav__logo {
  display: flex;
  align-items: center;
}

.site-nav__logo a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.site-nav__logo img {
  height: 43px;
  width: auto;
}

@media (max-width: 1199px) {
  .site-nav__logo img {
    height: 38px;
  }
}

@media (max-width: 1099px) {
  .site-nav__logo img {
    height: 35px;
  }
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: color var(--motion-fast) var(--ease-precision);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-control) var(--ease-precision);
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--color-text-primary);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}

.site-nav__cta {
  margin-left: var(--space-5);
}

.site-nav__toggle {
  display: none;
}

@media (max-width: 1100px) {
  .site-nav {
    height: 64px;
  }

  .site-nav__links {
    display: none;
  }

  .site-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: calc(-1 * var(--space-3));
  }

  .site-nav__toggle-icon {
    position: relative;
    width: 20px;
    height: 14px;
  }

  .site-nav__toggle-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-text-primary);
    transition: transform var(--motion-control) var(--ease-precision),
      opacity var(--motion-control) var(--ease-precision);
  }

  .site-nav__toggle-icon span:nth-child(1) {
    top: 0;
  }

  .site-nav__toggle-icon span:nth-child(2) {
    top: 6px;
  }

  .site-nav__toggle-icon span:nth-child(3) {
    top: 12px;
  }

  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span:nth-child(2) {
    opacity: 0;
  }

  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-ink-1000);
  flex-direction: column;
  padding-top: 64px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-precision),
    transform var(--motion-base) var(--ease-precision);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu:not([hidden]) {
  display: flex;
}

.mobile-menu[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6) var(--page-gutter) var(--space-8);
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
}

.mobile-menu__link {
  display: block;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-rule-dark);
  font-family: var(--font-sans);
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-primary);
}

.mobile-menu__cta {
  margin-top: var(--space-7);
  width: 100%;
  justify-content: center;
}

@media (min-width: 1101px) {
  .mobile-menu {
    display: none;
  }
}

body[data-menu-open="true"] {
  overflow: hidden;
}

/* -----------------------------------------------------------------------
   8. Motion reveal primitives (progressive enhancement)

   Content is visible by default in source CSS. main.js assigns a "pending"
   state only to elements it is about to observe, immediately before
   observing them; a 1.5s fail-safe strips pending state if JS init does
   not complete. Nothing may depend on JS to become visible.
   ----------------------------------------------------------------------- */
[data-reveal],
[data-reveal-artifact] {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-reveal) var(--ease-precision),
    transform var(--motion-reveal) var(--ease-precision);
}

[data-reveal].reveal-pending,
[data-reveal-artifact].reveal-pending {
  opacity: 0;
  transform: translateY(var(--shift-sm));
}

[data-reveal-artifact].reveal-pending {
  transform: translateY(10px);
}

[data-reveal].reveal-pending.is-visible,
[data-reveal-artifact].reveal-pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-mask] {
  overflow: hidden;
}

[data-reveal-mask] > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-emphasis) var(--ease-mask),
    transform var(--motion-emphasis) var(--ease-mask);
}

[data-reveal-mask].reveal-pending > * {
  opacity: 0;
  transform: translateY(var(--shift-md));
}

[data-reveal-mask].reveal-pending.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-rule-grow] {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--motion-line-long) var(--ease-line);
}

[data-rule-grow].reveal-pending {
  transform: scaleX(0);
}

[data-rule-grow].reveal-pending.is-visible {
  transform: scaleX(1);
}

[data-rule-grow-y] {
  transform: scaleY(1);
  transform-origin: top;
  transition: transform var(--motion-line-long) var(--ease-line);
}

[data-rule-grow-y].reveal-pending {
  transform: scaleY(0);
}

[data-rule-grow-y].reveal-pending.is-visible {
  transform: scaleY(1);
}

@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;
    transition-delay: 0ms !important;
  }

  [data-reveal],
  [data-reveal-mask] > *,
  [data-reveal-artifact] {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-rule-grow],
  [data-rule-grow-y] {
    transform: none !important;
  }

  [data-motion-sticky] {
    position: static !important;
  }
}

/* -----------------------------------------------------------------------
   9. Section scaffolding
   ----------------------------------------------------------------------- */
.section {
  position: relative;
  width: 100%;
}

.section--hero {
  min-height: calc(100svh - 72px);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--major {
  padding-block: var(--space-9);
}

.section--contact {
  padding-block: var(--space-9);
}

@media (max-width: 1023px) {
  .section--major {
    padding-block: var(--space-7);
  }

}

@media (max-width: 767px) {
  .section--hero {
    min-height: auto;
    padding-top: var(--space-7);
    padding-bottom: var(--space-6);
  }

  .section--major {
    padding-block: var(--space-6);
  }

  .section--contact {
    padding-block: var(--space-7);
  }
}

/* -----------------------------------------------------------------------
   10. Hero (Section 01)
   ----------------------------------------------------------------------- */
.hero {
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media picture,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 40%;
  filter: saturate(0.42) contrast(1.12) brightness(1.06);
}

.hero__media-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-ink-1000);
  opacity: 0.7;
}

@media (max-width: 767px) {
  .hero__media img {
    object-position: 68% 32%;
  }

  .hero__media-overlay {
    opacity: 0.77;
  }
}

.hero__grid {
  position: relative;
  z-index: 1;
}

.hero__copy {
  grid-column: 1 / 13;
  max-width: 1280px;
}

.hero__copy > * + * {
  margin-top: var(--space-5);
}

/* An intentional, scoped exception to the site's Public Sans / IBM Plex
   Mono system: a single serif weight, used only for this headline, to
   carry the rotating-audience treatment with genuine editorial weight
   rather than forcing a grotesque sans to do a display serif's job.
   Sized down from the original display-scale draft at the user's
   explicit request -- confident but no longer oversized relative to
   the rest of the page. */
.hero__copy h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

@media (max-width: 699px) {
  .hero__copy h1 {
    font-size: clamp(1.4rem, -0.2rem + 8vw, 2rem);
    line-height: 1.15;
  }
}

.hero__lead-in {
  color: var(--color-text-primary);
}

/* The rotating phrase is set in italic copper against the lead-in's
   upright white, so the two roles (fixed statement vs. cycling detail)
   are legible at a glance without needing a size difference. Cursor
   matches the same copper so it reads as one continuous accent. */
.hero__typewriter {
  display: inline;
  font-style: italic;
  color: var(--color-copper-400);
}

.hero__typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.8em;
  margin-left: 5px;
  vertical-align: -0.05em;
  background: var(--color-copper-400);
  animation: none;
}

/* solid while letters appear or disappear; blinks only while a phrase is held */
.hero__typewriter-cursor.is-idle {
  animation: hero-cursor-blink 1s steps(1) infinite;
}

@keyframes hero-cursor-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__typewriter-cursor {
    display: none;
  }
}

.hero__lede {
  color: var(--color-text-secondary);
  max-width: 56ch;
}

@media (min-width: 1024px) {
  :root {
    --measure-body: 66ch;
    --measure-lede: 60ch;
  }

  .hero__lede {
    max-width: 76ch;
  }
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7) !important;
}

@media (max-width: 1023px) {
  .hero__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .hero__copy {
    grid-column: 1 / 9;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .hero__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero__copy {
    grid-column: 1 / 5;
    max-width: none;
  }
}

@media (max-width: 430px) {
  .hero__cta-group .button-primary,
  .hero__cta-group .button-secondary {
    padding-inline: 14px;
  }

  .hero__cta-group {
    gap: var(--space-2);
  }
}

@media (max-width: 389px) {
  .hero__cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta-group .button-primary,
  .hero__cta-group .button-secondary {
    width: 100%;
    justify-content: center;
  }
}

.evidence-rail-wrap {
  position: relative;
  z-index: 1;
  margin-top: var(--space-9);
  border-top: 1px solid var(--color-rule-dark);
  padding-top: var(--space-6);
}

/* .evidence-rail is a <ul class="evidence-rail page-grid">: the global
   `ul[class]{padding:0}` reset (specificity 0,0,1,1) outranks the single
   class `.page-grid{padding-inline:...}` (specificity 0,0,1,0) and strips
   its gutter. The compound selector below (0,0,2,0) restores it. */
.evidence-rail.page-grid {
  padding-inline: var(--page-gutter);
}

.evidence-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.evidence-rail__item {
  padding-right: var(--space-5);
}

.evidence-rail__label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mineral-300);
  margin-bottom: var(--space-2);
}

.evidence-rail__statement {
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  max-width: 26ch;
}

@media (max-width: 1023px) {
  .evidence-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-5);
  }
}

@media (max-width: 767px) {
  .evidence-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-5);
  }

  .evidence-rail__item {
    grid-column: 1 / 5;
    padding-right: 0;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-rule-dark);
  }

  .evidence-rail__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* -----------------------------------------------------------------------
   11. Monitoring ledger artifact (shared component)
   ----------------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding-left: var(--space-3);
  border-left: 2px solid currentColor;
}

/* -----------------------------------------------------------------------
   13. Section 03 — Monitoring Outputs
   ----------------------------------------------------------------------- */
/* Opening photo band behind the Illustrative outputs heading (moved here
   from the former Capabilities section). The band is absolutely placed at
   the top of the section; the intro reserves the same height so the
   output rows never start until the band has ended, and the gradient's
   last stop matches .on-ink so the hand-off is seamless. */

.outputs-body {
  row-gap: var(--space-7);
}

/* Each narrative pairs with its own artifact directly after it in DOM
   order -- this is what mobile uses (plain linear flow, every artifact
   permanently visible). Desktop repositions both onto an explicit grid:
   narratives stack down a right-hand column; every artifact occupies the
   same left-hand cell, sticky, with only the active one visible. */
.output-narrative__trigger {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding-block: var(--space-3);
  margin-block: calc(-1 * var(--space-3)) var(--space-1);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  transition: transform var(--motion-control) var(--ease-precision),
    color var(--motion-control) var(--ease-precision);
}

.output-narrative .rule {
  margin-bottom: var(--space-4);
}

.output-narrative h3 {
  margin: 0;
}

.output-narrative p {
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  max-width: 42ch;
}

.output-narrative__trigger.is-active {
  color: var(--color-text-primary);
}

.output-narrative__trigger:not(.is-active) {
  color: var(--color-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .output-narrative__trigger:hover {
    transform: translateX(var(--shift-hover));
    color: var(--color-text-primary);
  }
}

.output-artifact {
  margin-top: var(--space-2);
}

/* Mobile / tablet: linear flow. Every artifact stays visible regardless
   of tab-selection state -- there is no shared distant panel to switch. */
@media (max-width: 1023px) {
  .output-narrative,
  .output-artifact {
    grid-column: 1 / 9;
  }
}

@media (max-width: 767px) {
  .output-narrative,
  .output-artifact {
    grid-column: 1 / 5;
  }
}

/* Desktop: explicit two-column layout. Narratives occupy rows 1-4 of the
   right column; every artifact spans the full row range of the left
   column so the active one can stick within that combined height. */
@media (min-width: 1024px) {
  .output-narrative[data-outputs-pair="covenant"] {
    grid-column: 9 / 13;
    grid-row: 1;
  }

  .output-narrative[data-outputs-pair="watchlist"] {
    grid-column: 9 / 13;
    grid-row: 2;
  }

  .output-narrative[data-outputs-pair="liquidity"] {
    grid-column: 9 / 13;
    grid-row: 3;
  }

  .output-narrative[data-outputs-pair="reporting"] {
    grid-column: 9 / 13;
    grid-row: 4;
  }

  .output-artifact {
    grid-column: 1 / 8;
    grid-row: 1 / 5;
    margin-top: 0;
    align-self: start;
    position: sticky;
    top: calc(72px + var(--space-6));
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--motion-fast) var(--ease-exit),
      transform var(--motion-control) var(--ease-precision);
  }

  /* Both artifacts share the same sticky grid cell, so no repositioning
     is needed for the crossfade -- they already overlap exactly. */
  .output-artifact.is-leaving {
    opacity: 0;
    pointer-events: none;
  }

  .output-artifact.is-entering {
    opacity: 0;
    transform: translateY(5px);
  }

  .output-artifact[hidden] {
    display: none !important;
  }
}

/* -----------------------------------------------------------------------
   14b. Ways to work — the two offerings
   Paper section, same vocabulary as Leadership: thin rules, mono labels,
   two columns split by a hairline. On desktop the two offerings share row
   tracks (subgrid), so each fact lines up with its counterpart and the
   comparison reads across.
   ----------------------------------------------------------------------- */
.services-section__intro {
  row-gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.services-section__copy {
  grid-column: 1 / 8;
}

.services-section__copy > * + * {
  margin-top: var(--space-5);
}

/* ---- Product windows (dark), sitting on the paper section */
.win {
  background: var(--color-ink-900);
  color: var(--color-text-primary);
  border: 1px solid #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(8, 11, 11, 0.25), 0 24px 48px -20px rgba(8, 11, 11, 0.55);
  font-family: var(--font-body);
}

.win__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 30px;
  padding: 0 12px;
  background: var(--color-ink-1000);
  border-bottom: 1px solid var(--color-rule-dark);
}

.win__dots {
  display: inline-flex;
  gap: 6px;
}

.win__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-ink-700);
}

.win__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win__sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.2;
}

.win__sheet th,
.win__sheet td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-rule-dark);
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.win__sheet th {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  background: var(--color-ink-950);
}

.win__sheet th:first-child,
.win__sheet td:first-child {
  text-align: left;
  font-family: var(--font-body);
  color: var(--color-text-secondary);
}

.win__sheet th:first-child {
  font-family: var(--font-mono);
}

.win__sheet .is-test td {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ---- Services in three beats. Beat 3 is the resting state; main.js moves
   the frame through beats 1-2-3 as the steps pass the middle of the screen
   (desktop only). Below 1200px the pieces sit in reading order. */

/* covenant sheet, EWS, tabs (shared window pieces) */
.win__sheet--cc .cc-section td {
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mineral-300);
  background: var(--color-ink-950);
  text-align: left;
}

.win__sheet--cc .cc-strong td {
  color: var(--color-text-primary);
  font-weight: 600;
}

.cc-pass {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #8fb39c;
}

.win__tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  background: var(--color-ink-1000);
  border-top: 1px solid var(--color-rule-dark);
  overflow: hidden;
}

.win__tabs span {
  padding: 5px 9px 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.win__tabs .is-active {
  background: var(--color-ink-900);
  color: var(--color-text-primary);
  border-top: 2px solid var(--color-brass-500);
}

.ews {
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
}

.ews::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

.ews--standard { color: #8fb39c; }
.ews--watch { color: #d4bb82; }
.ews--critical { color: #d98a82; }

/* credit monitor, in the real dashboard's dark palette */
.win--monitor {
  --dm-ground: #0b0e13;
  --dm-panel: #141922;
  --dm-line: #252c38;
  --dm-ink: #e7ebf0;
  --dm-ink-2: #9aa4b2;
  --dm-ink-3: #7e8896;
  --dm-accent: #46a7b8;
  background: var(--dm-ground);
}

.win--monitor .win__bar {
  background: #07090d;
}

.mon__panels {
  padding: 10px 12px 12px;
  outline: none;
}

.mon__panels:focus-visible {
  box-shadow: inset 0 0 0 2px var(--dm-accent);
}

.mon__asof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dm-ink);
  max-width: none;
}

.mon__asof [data-asof] {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--dm-ink-3);
}

.mon__asof .ews {
  margin-left: auto;
}

.dp {
  background: var(--dm-panel);
  border: 1px solid var(--dm-line);
  border-radius: 10px;
  padding: 10px 12px 6px;
}

.dp__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dp__t {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dm-ink);
}

.dp__pass {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #3fb27f;
  background: rgba(63, 178, 127, 0.12);
}

.dp__stats {
  display: flex;
  gap: 18px;
  margin: 6px 0 2px;
}

.dp__stats p:first-child {
  font-size: 10px;
  color: var(--dm-ink-3);
}

.dp__stats p:last-child {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--dm-ink);
}

.dp__plot {
  position: relative;
  touch-action: pan-y;
}

.dc {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}

.dc .dc-grid { stroke: var(--dm-line); stroke-width: 1; }
.dc .dc-ax { font-family: var(--font-mono); font-size: 9.5px; fill: var(--dm-ink-3); }
.dc .dc-limit { stroke: #aab3c0; stroke-width: 1.4; stroke-dasharray: 5 4; }
.dc .dc-line { fill: none; stroke: var(--dm-accent); stroke-width: 2; stroke-linejoin: round; }
.dc .dc-cross { stroke: var(--dm-ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.dc .dc-dot { fill: var(--dm-accent); stroke: var(--dm-panel); stroke-width: 2; }
.dc.is-inspecting .dc-cross { opacity: 1; }

.dp__tip {
  position: absolute;
  top: 4px;
  min-width: 118px;
  padding: 7px 9px;
  background: var(--dm-panel);
  border: 1px solid #333c4b;
  border-radius: 6px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  color: var(--dm-ink);
  pointer-events: none;
  white-space: nowrap;
}

.dp__tip p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: none;
}

.dp__tip p:first-child {
  margin-bottom: 3px;
  font-weight: 600;
}

.dp__tip b {
  font-family: var(--font-mono);
  font-weight: 600;
}

.dp__tip i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
}

.dp__tip .ews::before { display: none; }

/* memo strip: the top of Sthavor's memo */

/* ---- Services on a dark section, told as two chapters. The switch at
   the top of the sticky frame slides from "In your system" to "With our
   system"; each step shows one document at full size. Desktop >= 1200px. */
.services-section--dark .section-label {
  color: var(--color-mineral-300);
}

.services-section--dark .services-section__action .text-action {
  color: var(--color-text-primary);
}

/* product windows: rounder, with a crisp hairline (title bars unchanged),
   so they read as real software on the dark section. The site's own
   elements (buttons, cards) and paper documents stay square. */
.services-section--dark .win {
  border: 1px solid rgba(245, 243, 237, 0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(245, 243, 237, 0.05) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}

.chap {
  grid-column: 1 / -1;
}

.chap__lede {
  font-size: var(--type-lede);
  line-height: 1.45;
  color: var(--color-text-secondary);
  max-width: 40ch;
  margin-top: calc(var(--space-6) * -1);
  margin-bottom: var(--space-8);
}

.chap__k {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brass-500);
  margin-bottom: var(--space-2);
}

.chap__h {
  font-size: var(--type-h4);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.chap__t {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 34ch;
}

/* the switch */
.chap__switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 300px);
  margin: 0 auto var(--space-5);
  padding: 4px;
  border: 1px solid var(--color-rule-dark);
  border-radius: 999px;
  background: var(--color-ink-900);
}

.chap__knob {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: rgba(183, 154, 91, 0.16);
  border: 1px solid var(--color-brass-500);
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.chap__switch[data-mode="ded"] .chap__knob {
  transform: translateX(100%);
}

.chap__opt {
  position: relative;
  z-index: 1;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  transition: color 300ms;
}

.chap__switch[data-mode="emb"] .chap__opt--emb,
.chap__switch[data-mode="ded"] .chap__opt--ded {
  color: var(--color-text-primary);
}

.chap__opt:focus-visible {
  outline: 2px solid var(--color-rule-focus);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Embedded documents */
/* three sources of the same figure */
.emb__src {
  display: grid;
  gap: 12px;
}

.src__cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 5px;
  max-width: none;
}

.src mark {
  background: rgba(183, 154, 91, 0.28);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.src__page {
  padding: 12px 14px;
  background: #e8e5dd;
  color: #2a2a2a;
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}

.src__title {
  font-size: 10px;
  font-style: italic;
  color: #5a5a5a;
  margin-bottom: 6px;
  max-width: none;
}

.src__line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  max-width: none;
}

.src__line i {
  flex: 1;
  border-bottom: 1px dotted #9a968d;
}

.src__line b {
  font-weight: 400;
}

.src__line--dim {
  color: #777;
  font-size: 12px;
}

.src__grid {
  border-collapse: collapse;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  background: #ffffff;
  color: #1f1f1f;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}

.src__grid th {
  padding: 3px 8px;
  background: #eef0f2;
  color: #6b6f75;
  font-weight: 400;
  font-size: 10px;
  border: 1px solid #d6d9dd;
}

.src__grid td {
  padding: 4px 10px;
  border: 1px solid #d6d9dd;
  min-width: 70px;
}

.src__grid td:last-child {
  text-align: right;
}

.src__msg {
  padding: 10px 14px;
  background: #ffffff;
  color: #222;
  border-left: 3px solid #4c79c7;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}

.src__msg p {
  max-width: none;
}

.src__from {
  font-size: 10.5px;
  color: #6b6f75;
  margin-bottom: 4px;
}

/* the template's traced line */
.win__sheet .is-traced td {
  color: var(--color-text-primary);
}

.win__sheet .is-src {
  outline: 1.5px solid var(--color-brass-500);
  outline-offset: -3px;
  color: var(--color-brass-500);
}

/* the settle: papers start askew, then line up once (JS adds .is-settled);
   the resting layout is the default for no JS and reduced motion */
.src {
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 500ms;
}

.chap.is-ready .chap__emb:not(.is-settled) .src--pdf { transform: rotate(-4deg) translate(-10px, 8px); }
.chap.is-ready .chap__emb:not(.is-settled) .src--xls { transform: rotate(3deg) translate(18px, -4px); }
.chap.is-ready .chap__emb:not(.is-settled) .src--mail { transform: rotate(-2deg) translate(-4px, -10px); }

.chap__emb.is-settled .src mark {
  animation: src-glow 900ms ease-out both;
}

.chap__emb.is-settled .src--xls mark { animation-delay: 220ms; }
.chap__emb.is-settled .src--mail mark { animation-delay: 440ms; }

.chap__emb.is-settled .is-src,
.chap__emb.is-settled ~ .mw .mrow--traced .mc:last-child {
  animation: src-land 700ms ease-out 700ms both;
}

@keyframes src-glow {
  0% { background: rgba(183, 154, 91, 0.28); }
  40% { background: rgba(214, 182, 110, 0.85); }
  100% { background: rgba(183, 154, 91, 0.28); }
}

@keyframes src-land {
  0% { outline-color: transparent; color: var(--color-text-primary); }
  100% { outline-color: var(--color-brass-500); color: var(--color-brass-500); }
}

@media (prefers-reduced-motion: reduce) {
  .src,
  .chap__emb.is-settled .src mark,
  .chap__emb.is-settled .is-src,
.chap__emb.is-settled ~ .mw .mrow--traced .mc:last-child {
    transition: none;
    animation: none;
  }

  .chap.is-ready .chap__emb:not(.is-settled) .src--pdf,
  .chap.is-ready .chap__emb:not(.is-settled) .src--xls,
  .chap.is-ready .chap__emb:not(.is-settled) .src--mail {
    transform: none;
  }
}

.emb__note {
  padding: 18px 20px;
  background: #ffffff;
  color: #1a1d21;
  border-radius: 2px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  font-family: var(--font-serif);
}

.emb__note p {
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 8px;
  max-width: none;
}

.emb__note .emb__note-h {
  margin-top: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #c9ccd1;
}

.emb__note .emb__note-f {
  font-family: var(--font-serif);
  font-size: 10px;
  font-style: italic;
  color: #6b7079;
}

/* the two offerings, as a menu above the chapters */
.chap__cards {
  margin-bottom: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.chap__card {
  padding: var(--space-6);
  border: 1px solid var(--color-rule-dark);
  border-radius: 4px;
  background: var(--color-ink-950);
}

.chap__card-k {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brass-500);
  margin-bottom: var(--space-3);
}

.chap__card-name {
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.chap__card-receive {
  color: var(--color-text-primary);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.chap__card-suits {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.chap__card-suits span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 2px;
}

.chap__or {
  align-self: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--color-brass-500);
}

@media (min-width: 1200px) {
  .chap__body {
    display: grid;
    grid-template-columns: minmax(0, 3.3fr) minmax(0, 8.7fr);
    column-gap: var(--space-7);
  }

  .chap__step {
    min-height: 56vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.3;
    transition: opacity 280ms var(--ease-precision);
  }

  .chap__step:first-child {
    min-height: 60vh;
    justify-content: flex-start;
    padding-top: var(--space-9);
  }

  .chap__step--first:not(:first-child) {
    margin-top: 12vh;
  }

  /* room below the last step so the frame stays pinned while it is read */
  .chap__steps {
    padding-bottom: 34vh;
  }

  .chap.is-ready .chap__step.is-active,
  .chap:not(.is-ready) .chap__step {
    opacity: 1;
  }

  .chap__stage {
    position: sticky;
    top: max(84px, calc(50vh - 380px));
    align-self: start;
  }

  .chap__frame {
    position: relative;
    height: 690px;
  }

  .chap__doc {
    position: absolute;
    inset: 0 0 auto 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 320ms var(--ease-precision), transform 320ms var(--ease-precision), visibility 0s linear 320ms;
  }

  .chap__frame[data-step="1"] [data-doc="1"],
  .chap__frame[data-step="2"] [data-doc="1"],
  .chap__frame[data-step="3"] [data-doc="3"],
  .chap__frame[data-step="4"] [data-doc="4"],
  .chap__frame[data-step="5"] [data-doc="5"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 320ms var(--ease-precision), transform 320ms var(--ease-precision), visibility 0s;
  }

  /* Embedded: step 1 sources | template; step 2 template | commentary */
  .chap__emb {
    height: 640px;
  }

  .chap__emb > .emb__src,
  .chap__emb > .emb__win,
  .chap__emb > .emb__note {
    position: absolute;
    transition: left 520ms cubic-bezier(0.2, 0.7, 0.2, 1), width 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
      opacity 400ms var(--ease-precision), transform 400ms var(--ease-precision);
  }

  .emb__src { top: 24px; left: 0; width: 38%; }
  .emb__win { top: 40px; left: 43%; width: 57%; }
  .emb__note { top: 120px; left: 61%; width: 39%; opacity: 0; transform: translateY(18px); }

  .chap__frame[data-step="2"] .emb__src { opacity: 0; transform: translateX(-24px); pointer-events: none; }
  .chap__frame[data-step="2"] .emb__win { left: 0; width: 57%; }
  .chap__frame[data-step="2"] .emb__note { opacity: 1; transform: none; }

  /* no JS: first chapter showing, commentary included */
  .chap:not(.is-ready) .chap__frame [data-doc="1"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .chap:not(.is-ready) .emb__note {
    display: none;
  }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .chap__doc,
  .chap__knob,
  .chap__emb > .emb__src,
  .chap__emb > .emb__win,
  .chap__emb > .emb__note,
  .chap__step {
    transition: none;
  }
}

@media (max-width: 1199px) {
  .chap__body,
  .chap__steps,
  .chap__stage,
  .chap__frame {
    display: flex;
    flex-direction: column;
  }

  .chap__steps,
  .chap__stage,
  .chap__frame {
    display: contents;
  }

  .chap__switch {
    display: none;
  }

  .chap__step[data-step="1"] { order: 0; }
  .chap__doc[data-doc="1"] { order: 1; }
  .chap__step[data-step="2"] { order: 2; }
  .chap__step[data-step="3"] { order: 3; }
  .chap__doc[data-doc="3"] { order: 4; }
  .chap__step[data-step="4"] { order: 5; }
  .chap__doc[data-doc="4"] { order: 6; }
  .chap__step[data-step="5"] { order: 7; }
  .chap__doc[data-doc="5"] { order: 8; }

  .chap__step {
    margin: var(--space-6) 0 var(--space-4);
  }

  .chap__step--first:not(:first-child) {
    margin-top: var(--space-9);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-rule-dark);
  }

  .emb__note,
  .emb__win {
    margin-top: var(--space-4);
  }

  .chap__lede {
    margin-top: 0;
    margin-bottom: var(--space-7);
  }

  .chap__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .chap__or {
    text-align: center;
  }
}

/* The credit monitor, in the real dashboard's own dark palette */
.win--monitor {
  --dm-ground: #0b0e13;
  --dm-panel: #141922;
  --dm-line: #252c38;
  --dm-ink: #e7ebf0;
  --dm-ink-2: #9aa4b2;
  --dm-ink-3: #7e8896;
  --dm-accent: #46a7b8;
  background: var(--dm-ground);
  border-color: #000;
}

.win--monitor .win__bar {
  background: #07090d;
}

.win--monitor .win__sheet th {
  background: var(--dm-panel);
}

.mon__panels {
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  outline: none;
}

.mon__panels:focus-visible {
  box-shadow: inset 0 0 0 2px var(--dm-accent);
}

.mon__asof {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dm-ink);
  max-width: none;
}

.mon__asof [data-asof] {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--dm-ink-3);
}

.mon__asof .ews {
  margin-left: auto;
}

.dp {
  background: var(--dm-panel);
  border: 1px solid var(--dm-line);
  border-radius: 10px;
  padding: 12px 12px 8px;
  min-width: 0;
}

.dp__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dp__t {
  font-size: 13px;
  font-weight: 600;
  color: var(--dm-ink);
}

.dp__pass {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #3fb27f;
  background: rgba(63, 178, 127, 0.12);
}

.dp__pass::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

.dp__stats {
  display: flex;
  gap: 18px;
  margin: 8px 0 4px;
}

.dp__stats p:first-child {
  font-size: 10px;
  color: var(--dm-ink-3);
}

.dp__stats p:last-child {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--dm-ink);
  font-variant-numeric: tabular-nums;
}

.dp__plot {
  position: relative;
  touch-action: pan-y;
}

.dc {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}

.dc .dc-grid { stroke: var(--dm-line); stroke-width: 1; }
.dc .dc-ax { font-family: var(--font-mono); font-size: 9.5px; fill: var(--dm-ink-3); }
.dc .dc-limit { stroke: #aab3c0; stroke-width: 1.4; stroke-dasharray: 5 4; }
.dc .dc-line { fill: none; stroke: var(--dm-accent); stroke-width: 2; stroke-linejoin: round; }
.dc .dc-cross { stroke: var(--dm-ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.dc .dc-dot { fill: var(--dm-accent); stroke: var(--dm-panel); stroke-width: 2; }
.dc.is-inspecting .dc-cross { opacity: 1; }

.dp__tip {
  position: absolute;
  top: 4px;
  min-width: 118px;
  padding: 7px 9px;
  background: var(--dm-panel);
  border: 1px solid #333c4b;
  border-radius: 6px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  color: var(--dm-ink);
  pointer-events: none;
  white-space: nowrap;
}

.dp__tip b {
  font-family: var(--font-mono);
  font-weight: 600;
}

.dp__tip p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: none;
}

.dp__tip p:first-child {
  margin-bottom: 3px;
  font-weight: 600;
}

.dp__tip .ews::before { display: none; }

.dp__tip i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 0;
}

.dp__legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--dm-ink-2);
  max-width: none;
}

.dp__key {
  display: inline-block;
  width: 16px;
  margin-left: 8px;
  border-top: 2px solid var(--dm-accent);
}

.dp__key:first-child {
  margin-left: 0;
}

.dp__key--dash {
  border-top: 2px dashed #aab3c0;
}

@media (max-width: 767px) {
  .mon__panels {
    grid-template-columns: 1fr;
  }
}

/* ---- the memo: a faithful recreation of the top of Sthavor's memo */
.mpage {
  position: relative;
  max-height: 640px;
  overflow: hidden;
  padding: 26px 30px 0;
  background: #ffffff;
  color: #141922;
  font-family: var(--font-body);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(8, 11, 11, 0.18), 0 24px 48px -22px rgba(8, 11, 11, 0.5);
}

.mpage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
}

.mpage p {
  max-width: none;
}

.mpage__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.mpage__top img {
  width: 150px;
  height: auto;
}

.mpage__top div {
  text-align: right;
}

.mpage__doc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4c5461;
}

.mpage__for {
  font-size: 10.5px;
  font-style: italic;
  color: #4c5461;
}

.mpage__band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #1b2638;
  color: #ffffff;
}

.mpage__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
}

.mpage__sub {
  font-size: 11px;
  color: #c9d0db;
  margin-top: 3px;
}

.mpage__rating {
  text-align: right;
  flex: none;
}

.mpage__rating p {
  font-size: 9.5px;
  color: #c9d0db;
  margin-top: 4px;
}

.mpage__badge {
  display: inline-block;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: #b27a14;
  border: 1px solid #d8a13b;
}

.mpage__h {
  margin-top: 16px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid #141922;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mpage__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.mtile {
  padding: 9px 10px;
  border: 1px solid #dce0e7;
}

.mtile__k {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4c5461;
}

.mtile__v {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.mtile__n {
  font-size: 9px;
  color: #4c5461;
  margin-top: 2px;
}

.spark {
  display: block;
  width: 100%;
  height: 20px;
}

.spark polyline {
  fill: none;
  stroke-width: 1.6;
}

.mpage__p {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.6;
  text-align: justify;
  color: #141922;
}

.mpage__note {
  margin-top: 4px;
  font-size: 9.5px;
  font-style: italic;
  color: #4c5461;
}

.mpage__table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 10.5px;
}

.mpage__table th {
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #ffffff;
  background: #1b2638;
}

.mpage__table td {
  padding: 6px 8px;
  border-bottom: 1px solid #dce0e7;
}

.mpage__table--num th:not(:first-child),
.mpage__table--num td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .win__sheet--cc th:nth-child(-n+5):not(:first-child),
  .win__sheet--cc td:nth-child(-n+5):not(:first-child) {
    display: none;
  }

  .win__sheet--portfolio th:nth-child(4),
  .win__sheet--portfolio td:nth-child(4) {
    display: none;
  }

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

  .mpage {
    padding: 18px 16px 0;
    max-height: 760px;
  }

  .mpage__top div {
    display: none;
  }

  .mpage__band {
    flex-direction: column;
    align-items: flex-start;
  }

  .mpage__rating {
    text-align: left;
  }

  .mpage__table--num th:nth-child(3),
  .mpage__table--num td:nth-child(3),
  .mpage__table--num th:nth-child(5),
  .mpage__table--num td:nth-child(5) {
    display: none;
  }

  .mpage__table:not(.mpage__table--num) th:nth-child(4),
  .mpage__table:not(.mpage__table--num) td:nth-child(4) {
    display: none;
  }
}

/* ---- Morph stage 1: the lender's template becomes Sthavor's workbook */
.mw {
  display: none;
}

.mw__sheet {
  font-size: 12.5px;
  line-height: 1.2;
}

.mrow {
  --cols: minmax(0, 2.2fr) minmax(0, 0fr) minmax(0, 0fr) minmax(0, 0fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  display: grid;
  grid-template-columns: var(--cols);
  border-bottom: 1px solid var(--color-rule-dark);
  transition: grid-template-columns 850ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms, max-height 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 450ms, border-color 450ms;
  max-height: 40px;
  overflow: hidden;
}

.ml,
.mc {
  display: grid;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.ml > span,
.mc > span {
  grid-area: 1 / 1;
  padding: 7px 10px;
  transition: opacity 360ms;
}

.ml {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
}

.mc {
  justify-items: end;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.mc--x {
  opacity: 0;
  transition: opacity 500ms 450ms;
}

.mrow--head {
  background: var(--color-ink-950);
}

.mrow--head .ml,
.mrow--head .mc {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}

.mrow--head .ml {
  color: var(--color-text-secondary);
}

/* the lender's template: the traced revenue line is brighter */
.mrow--traced .ml {
  color: var(--color-text-primary);
}

.mrow--strong .ml,
.mrow--strong .mc {
  color: var(--color-text-primary);
  font-weight: 600;
}

.mrow--section {
  background: var(--color-ink-950);
}

.mrow--section .ml > span {
  padding-top: 10px;
}

.mrow--section .ml {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mineral-300);
}

.mrow--traced .mc:last-child {
  outline: 1.5px solid var(--color-brass-500);
  outline-offset: -3px;
  color: var(--color-brass-500);
}

/* dual labels, values and title */
.ml--s,
.mv--s,
.mt--s {
  opacity: 0;
}

.mw__title {
  display: inline-grid;
}

.mw__title > span {
  grid-area: 1 / 1;
  transition: opacity 360ms;
}

.mc--swap > span {
  grid-area: 1 / 1;
}

/* rows that only exist in one mode */
.mrow--extra {
  max-height: 0;
  opacity: 0;
  border-bottom-width: 0;
}

.mw__tabs {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 700ms;
}

.mw__tabs-inner {
  min-height: 0;
  overflow: hidden;
}

/* ---- Sthavor mode (step 3 onwards) */
.chap__frame[data-step="3"] .mrow,
.chap__frame[data-step="4"] .mrow,
.chap__frame[data-step="5"] .mrow {
  --cols: minmax(0, 2.7fr) repeat(6, minmax(0, 1fr));
}

.chap__frame[data-step="3"] .mc--x,
.chap__frame[data-step="4"] .mc--x,
.chap__frame[data-step="5"] .mc--x {
  opacity: 1;
}

.chap__frame[data-step="3"] .mrow--extra,
.chap__frame[data-step="4"] .mrow--extra,
.chap__frame[data-step="5"] .mrow--extra {
  max-height: 40px;
  opacity: 1;
  border-bottom-width: 1px;
  transition-delay: 650ms;
}

.chap__frame[data-step="3"] .mrow--client,
.chap__frame[data-step="4"] .mrow--client,
.chap__frame[data-step="5"] .mrow--client {
  max-height: 0;
  opacity: 0;
  border-bottom-width: 0;
}

.chap__frame[data-step="3"] :is(.ml--c, .mv--c, .mt--c),
.chap__frame[data-step="4"] :is(.ml--c, .mv--c, .mt--c),
.chap__frame[data-step="5"] :is(.ml--c, .mv--c, .mt--c) {
  opacity: 0;
}

.chap__frame[data-step="3"] :is(.ml--s, .mv--s, .mt--s),
.chap__frame[data-step="4"] :is(.ml--s, .mv--s, .mt--s),
.chap__frame[data-step="5"] :is(.ml--s, .mv--s, .mt--s) {
  opacity: 1;
}

.chap__frame[data-step="3"] .mrow--traced .mc:last-child,
.chap__frame[data-step="4"] .mrow--traced .mc:last-child,
.chap__frame[data-step="5"] .mrow--traced .mc:last-child {
  outline-color: transparent;
  color: var(--color-text-primary);
  transition: outline-color 400ms, color 400ms;
}

.chap__frame[data-step="3"] .mw__tabs,
.chap__frame[data-step="4"] .mw__tabs,
.chap__frame[data-step="5"] .mw__tabs {
  grid-template-rows: 1fr;
}

@media (min-width: 1200px) {
  .mw {
    display: block;
    position: absolute;
    top: 40px;
    left: 43%;
    width: 57%;
    z-index: 2;
    transition: left 650ms cubic-bezier(0.2, 0.7, 0.2, 1), width 650ms cubic-bezier(0.2, 0.7, 0.2, 1),
      top 650ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 320ms, visibility 0s linear 320ms;
  }

  .chap__frame[data-step="2"] .mw {
    left: 0;
    width: 57%;
  }

  .chap__frame[data-step="3"] .mw {
    top: 0;
    left: 0;
    width: 100%;
  }

  .chap__frame[data-step="4"] .mw,
  .chap__frame[data-step="5"] .mw {
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
  }

  .chap__frame:not([data-step="4"]):not([data-step="5"]) .mw {
    visibility: visible;
    transition-delay: 0s;
  }

  /* the separate workbook and template copies are for phones only */
  .chap__frame .chap__doc[data-doc="3"],
  .chap__doc--phone-tpl {
    display: none;
  }

  /* the switch waits for the morph: step 3 shows no other document */
  .chap:not(.is-ready) .mw {
    visibility: visible;
  }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .mw,
  .mrow,
  .mc--x,
  .ml > span,
  .mc > span,
  .mw__title > span,
  .mw__tabs {
    transition: none;
  }
}

@media (max-width: 1199px) {
  .chap__emb {
    display: contents;
  }

  .chap__step[data-step="1"] { order: 0; }
  .emb__src { order: 1; }
  .chap__doc--phone-tpl { order: 2; margin-top: var(--space-4); }
  .chap__step[data-step="2"] { order: 3; }
  .emb__note { order: 4; }
  .chap__step[data-step="3"] { order: 5; }
  .chap__doc[data-doc="3"] { order: 6; }
  .chap__step[data-step="4"] { order: 7; }
  .chap__doc[data-doc="4"] { order: 8; }
  .chap__step[data-step="5"] { order: 9; }
  .chap__doc[data-doc="5"] { order: 10; }
}

.chap__emb.is-settled ~ .mw .mrow--traced .mc:last-child {
  animation-fill-mode: backwards;
}

/* ---- Morph stage 2: workbook figures fly to the dashboard chart */
.fly {
  display: none;
}

@media (min-width: 1200px) {
  .fly {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
  }

  .fly__num {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-primary);
    background: rgba(70, 167, 184, 0);
    white-space: nowrap;
    transition: transform 720ms cubic-bezier(0.3, 0.7, 0.2, 1), background 300ms, color 250ms,
      width 300ms, padding 300ms, opacity 300ms;
  }

  .fly__num.is-dot {
    color: transparent;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    background: #46a7b8;
    box-shadow: 0 0 0 2px #141922;
  }

  .fly__num.is-gone {
    opacity: 0;
  }

  /* while flying: the dashboard arrives without its lift; the chart waits */
  .chap__frame.is-flying [data-doc="4"] {
    transform: none;
  }

  .chap__frame.is-flying [data-doc="4"] .dc-line,
  .chap__frame.is-flying [data-doc="4"] .dc path,
  .chap__frame.is-flying [data-doc="4"] .dc-dot {
    opacity: 0;
  }

  .chap__frame.is-drawing [data-doc="4"] .dc-line {
    opacity: 1;
  }

  .chap__frame [data-doc="4"] .dc path,
  .chap__frame [data-doc="4"] .dc-dot {
    transition: opacity 400ms;
  }

  .chap__frame.is-flying [data-lev-row] .mc:last-child > span {
    opacity: 0;
    transition: none;
  }

  .chap__frame.is-flying .mw {
    transition: opacity 160ms, visibility 0s linear 160ms;
  }

  .chap__frame.is-flying [data-doc="4"] {
    transition: opacity 360ms var(--ease-precision) 140ms, visibility 0s;
  }
}

/* ---- Morph stage 3: the leverage figure lands on the memo's tile */
@media (min-width: 1200px) {
  .fly__num--carry {
    height: 26px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    background: #141922;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
  }

  .fly__num--carry.is-gone {
    transition: opacity 260ms;
  }

  .chap__frame.is-carrying [data-doc="4"] {
    transition: opacity 160ms, visibility 0s linear 160ms;
  }

  .chap__frame.is-carrying [data-doc="5"] {
    transform: none;
    transition: opacity 360ms var(--ease-precision) 140ms, visibility 0s;
  }

  .chap__frame.is-carrying [data-doc="5"] .mtile:first-child .mtile__v,
  .chap__frame.is-carrying [data-doc="5"] .mtile:first-child .spark circle {
    opacity: 0;
  }

  .chap__frame [data-doc="5"] .mtile:first-child .mtile__v,
  .chap__frame [data-doc="5"] .mtile:first-child .spark circle {
    transition: opacity 280ms;
  }

  .chap__frame.is-landed [data-doc="5"] .mtile:first-child .mtile__v,
  .chap__frame.is-landed [data-doc="5"] .mtile:first-child .spark circle {
    opacity: 1;
  }
}

/* ---- Services menu merges into the switch (desktop, motion allowed) */
.merge {
  display: none;
}

@media (min-width: 1200px) {
  .chap.has-menu:not(.is-merging):not(.is-merged) .chap__switch {
    opacity: 0;
    pointer-events: none;
  }

  .chap.is-merging .chap__knob,
  .chap.is-merging .chap__opt,
  .chap.is-merging .chap__card-word {
    opacity: 0;
    transition: none;
  }

  .chap.is-merging .chap__cards {
    overflow: hidden;
  }

  .chap.is-merged .chap__cards {
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
    visibility: hidden;
  }

  .chap.is-merging .merge {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
  }

  .merge__k,
  .merge__w {
    position: absolute;
    left: 0;
    top: 0;
    line-height: normal;
    white-space: nowrap;
    transform-origin: 0 0;
  }

  .merge__k {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .merge__or {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-brass-500);
    border-radius: 999px;
    background: rgba(183, 154, 91, 0.16);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-brass-500);
  }
}

/* ---- The short band between the hero and Our Services: the two
   supporting paragraphs side by side; the two ways link to their chapters */
.brief {
  padding-top: var(--space-8);
}

.brief__link {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-brass-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 200ms;
}

.brief__link:hover {
  color: var(--color-brass-500);
}

.brief__link:focus-visible {
  outline: 2px solid var(--color-rule-focus);
  outline-offset: 3px;
}

/* offering cards: the description leads, the fit sentence supports */
.chap__card-receive,
.chap__card-suits {
  text-wrap: pretty;
}

/* ---- Hero: one supporting sentence under the lede, a size smaller */
.hero__detail {
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.hero__copy > .hero__detail {
  margin-top: var(--space-4);
}

/* the two ways of working: brighter text, a faint brass underline that
   comes up to full brass on hover */
.hero__detail .brief__link {
  text-decoration-color: rgba(183, 154, 91, 0.35);
  transition: text-decoration-color 200ms;
}

.hero__detail .brief__link:hover {
  color: var(--color-text-primary);
  text-decoration-color: var(--color-brass-500);
}

@media (max-width: 1023px) {
  .hero__detail {
    font-size: 0.9375rem;
  }
}

/* ---- Founder portraits: a matched pair, eyes on one line. With motion
   allowed, each develops from the paper colour into the image the first
   time the section comes into view (main.js arms it). */
.founder__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--color-paper-100);
}

.founder__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-paper-50);
  opacity: 0;
  pointer-events: none;
}

.leadership-grid.is-armed .founder__photo::after {
  opacity: 1;
}

.leadership-grid.is-armed .founder__photo img {
  filter: contrast(0.7) blur(3px);
}

.leadership-grid.is-armed .founder__photo.is-developed::after {
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(0.3, 0.6, 0.2, 1);
}

.leadership-grid.is-armed .founder__photo.is-developed img {
  filter: none;
  transition: filter 1600ms cubic-bezier(0.3, 0.6, 0.2, 1);
}

.leadership-grid.is-armed .founder--second .founder__photo.is-developed::after,
.leadership-grid.is-armed .founder--second .founder__photo.is-developed img {
  transition-delay: 280ms;
}

@media (max-width: 767px) {
}

/* ---- Audit fixes */
/* section headings break into balanced lines (no stranded last word) */
h2 {
  text-wrap: balance;
}

/* small laptops and landscape tablets: the two offering cards side by side */
@media (min-width: 1024px) and (max-width: 1199px) {
  .chap__cards {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-5);
  }

  .chap__or {
    text-align: left;
  }
}

/* the credit monitor stays in the keyboard order while another document
   is showing; focusing it brings its step into view (main.js) */
@media (min-width: 1200px) {
  .chap__frame [data-doc="4"] {
    visibility: visible;
    pointer-events: none;
  }

  .chap__frame[data-step="4"] [data-doc="4"] {
    pointer-events: auto;
  }
}

/* ---- Founders: portrait beside name, title, credential and LinkedIn;
   the bio runs full width underneath */
.founder__head {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-6);
}

.founder__id .founder__role {
  margin-bottom: var(--space-4);
}

.founder__id .founder__linkedin {
  margin-top: var(--space-3);
}

/* stacked founders: each column already opens with its own rule */
@media (max-width: 1199px) {
  .leadership-grid .founder--second {
    padding-top: 0;
    border-top: none;
  }
}

@media (max-width: 767px) {
  .founder__head {
    grid-template-columns: 110px minmax(0, 1fr);
    column-gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .founder__id .founder__name {
    font-size: 1.25rem;
  }

  .founder__id .founder__role {
    font-size: 0.875rem;
    margin-bottom: var(--space-3);
  }

  .founder__id .founder__linkedin {
    margin-top: var(--space-2);
  }
}

/* ---- Shorter screens: the pinned documents scale down to fit (main.js) */
@media (min-width: 1200px) {
  .chap__stage.is-scaled {
    transform: scale(var(--stage-scale));
    transform-origin: 50% 0;
  }
}

/* ---- "Discuss a pilot": a brass sheen passes over the button once when
   the mouse arrives or keyboard focus lands (main.js adds .is-sheening for
   one pass); behind the text, clipped to the button */
.button-sheen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button-sheen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 60%;
  /* pale brass over the green-grey hover colour */
  background: linear-gradient(105deg, rgba(236, 222, 186, 0) 15%, rgba(236, 222, 186, 0.45) 50%, rgba(236, 222, 186, 0) 85%);
  transform: translateX(-100%);
  pointer-events: none;
}

/* full brass over the dark outline button in the hero */
.button-secondary.button-sheen::after {
  background: linear-gradient(105deg, rgba(183, 154, 91, 0) 15%, rgba(183, 154, 91, 0.6) 50%, rgba(183, 154, 91, 0) 85%);
}

@media (prefers-reduced-motion: no-preference) {
  .button-sheen.is-sheening::after {
    animation: button-sheen 900ms cubic-bezier(0.42, 0, 0.58, 1) both;
  }
}

/* from just off the left edge to just off the right edge */
@keyframes button-sheen {
  from { transform: translateX(-100%); }
  to { transform: translateX(170%); }
}

/* ---- Operating model now opens with the binders photo, on a dark band */
.model-section--band {
  padding-top: 0;
}

.model-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 50vh, 480px);
  padding-block: var(--space-8) var(--space-7);
  margin-bottom: var(--space-8);
  overflow: hidden;
}

.model-band__media {
  position: absolute;
  inset: 0;
}

.model-band__media picture,
.model-band__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.55);
}

.model-band__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 11, 11, 0.55) 0%, rgba(8, 11, 11, 0.62) 55%, rgba(8, 11, 11, 0.88) 100%);
}

.model-band__intro {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-max));
}

.model-band .model-section__copy h2 {
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .model-band__media img {
    object-position: 14% 42%;
  }
}

.services-section__close {
  margin-top: var(--space-7);
}

.services-section__action {
  grid-column: 5 / 13;
  padding-left: 32px;
}

.services-section__action .text-action {
  color: var(--color-mineral-700);
}

@media (max-width: 1023px) {
  .services-section__copy {
    grid-column: 1 / 9;
  }

  .services-section__action {
    grid-column: 1 / 9;
  }
}

@media (max-width: 767px) {
  .services-section__copy,
  .fork,
  .services-section__action {
    grid-column: 1 / 5;
  }

  .win__sheet {
    font-size: 10.5px;
  }

  .win__sheet th,
  .win__sheet td {
    padding: 6px 5px;
  }

  .win__sheet th:first-child,
  .win__sheet td:first-child {
    padding-left: 8px;
  }

}

/* -----------------------------------------------------------------------
   15. Section 05 — Engagement Model
   ----------------------------------------------------------------------- */

.model-section__copy {
  grid-column: 1 / 8;
}

.model-section__copy > * + * {
  margin-top: var(--space-5);
}

/* Operating model timeline. Static and fully visible by default (no JS,
   reduced motion). main.js adds .is-armed, then .is-playing once the
   timeline is actually on screen: the brass line draws from 01 to 04 and
   each step appears as the line reaches it. Desktop runs left to right;
   below 1024px it runs down the page. */
.timeline {
  --tl-gate-space: 56px;
  --tl-node: 11px;
  --tl-line: 2px;
  --tl-step-gap: 600ms;
  --tl-draw: calc(var(--tl-step-gap) * 4);
  grid-column: 1 / 13;
  position: relative;
}

.timeline__track {
  position: absolute;
  top: calc(var(--tl-gate-space) + (var(--tl-node) - var(--tl-line)) / 2);
  left: 0;
  right: 0;
  height: var(--tl-line);
  background: linear-gradient(90deg, var(--color-rule-light) 80%, transparent);
}

.timeline__progress {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-brass-500) 80%, transparent);
  transform-origin: left center;
}

/* stagger order for the draw (set here, not inline: the site's security
   policy only allows styles from this stylesheet) */
.timeline__step:nth-child(1) { --step: 0; }
.timeline__step:nth-child(2) { --step: 1; }
.timeline__step:nth-child(3) { --step: 2; }
.timeline__step:nth-child(4) { --step: 3; }

.timeline__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.timeline__step {
  position: relative;
  padding-top: var(--tl-gate-space);
  padding-right: var(--space-4);
}

.timeline__node {
  display: block;
  width: var(--tl-node);
  height: var(--tl-node);
  background: var(--color-brass-500);
  border: 1px solid var(--color-brass-500);
  margin-bottom: var(--space-6);
}

.timeline__title {
  margin-bottom: var(--space-3);
}

.timeline__text {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-text-ink);
  max-width: 34ch;
  text-wrap: pretty;
}

/* the supporting sentence: smaller and softer, so the four lead
   sentences can be read on their own */
.timeline__text--detail {
  margin-top: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-ink-soft);
  max-width: 38ch;
}

/* the one commitment worth underlining: the free, no-obligation pilot */
.timeline__em {
  text-decoration: underline;
  text-decoration-color: var(--color-brass-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* The go / no-go gate sits on the line between Pilot and Onboarding. */
.timeline__gate {
  position: absolute;
  top: 0;
  left: calc(var(--grid-gap) / -2);
  transform: translateX(-50%);
  height: calc(var(--tl-gate-space) + var(--tl-node) + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-mineral-700);
  max-width: none;
}

.timeline__gate::after {
  content: "";
  flex: 1;
  width: 1px;
  margin-top: var(--space-2);
  background: var(--color-mineral-700);
}

/* ---- Motion (only once main.js has armed it) */
.timeline.is-armed .timeline__progress {
  transform: scaleX(0);
}

.timeline.is-armed .timeline__node {
  background: var(--color-paper-50);
}

.timeline.is-armed .timeline__title,
.timeline.is-armed .timeline__text,
.timeline.is-armed .timeline__gate {
  opacity: 0;
  transform: translateY(8px);
}

.timeline.is-armed .timeline__gate {
  transform: translate(-50%, 8px);
}

.timeline.is-playing .timeline__progress {
  transform: none;
  transition: transform var(--tl-draw) linear;
}

.timeline.is-playing .timeline__node {
  background: var(--color-brass-500);
  transition: background var(--motion-base) var(--ease-precision);
  transition-delay: calc(var(--step) * var(--tl-step-gap));
}

.timeline.is-playing .timeline__title,
.timeline.is-playing .timeline__text {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-reveal) var(--ease-precision), transform var(--motion-reveal) var(--ease-precision);
  transition-delay: calc(var(--step) * var(--tl-step-gap) + 80ms);
}

.timeline.is-playing .timeline__title {
  transition-delay: calc(var(--step) * var(--tl-step-gap) + 140ms);
}

.timeline.is-playing .timeline__text {
  transition-delay: calc(var(--step) * var(--tl-step-gap) + 200ms);
}

.timeline.is-playing .timeline__text--detail {
  transition-delay: calc(var(--step) * var(--tl-step-gap) + 480ms);
}

.timeline.is-playing .timeline__gate {
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity var(--motion-emphasis) var(--ease-precision), transform var(--motion-emphasis) var(--ease-precision);
  transition-delay: calc(2.6 * var(--tl-step-gap));
}

/* Tail pulse: the faded line after Onboarding stands for "every reporting
   cycle". Once the line has drawn, a faint pulse travels along that tail
   every few seconds, only while the timeline is on screen (main.js toggles
   .is-in-view). The one-off steps before it stay still. */
.timeline__pulse {
  display: none;
  position: absolute;
  top: calc(var(--tl-gate-space) + (var(--tl-node) - var(--tl-line)) / 2);
  left: var(--tl-node);
  right: 0;
  height: var(--tl-line);
  background: linear-gradient(90deg, transparent, #7a6231, transparent) no-repeat;
  background-size: 22% 100%;
  background-position: -30% 0;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 95%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 95%);
  pointer-events: none;
}

.timeline.is-playing .timeline__pulse {
  display: block;
  animation: timeline-pulse-x 4.8s linear calc(var(--tl-draw) + 400ms) infinite;
  animation-play-state: paused;
}

.timeline.is-playing.is-in-view .timeline__pulse {
  animation-play-state: running;
}

@keyframes timeline-pulse-x {
  0% { background-position: -30% 0; }
  45% { background-position: 130% 0; }
  100% { background-position: 130% 0; }
}

@keyframes timeline-pulse-y {
  0% { background-position: 0 -40%; }
  45% { background-position: 0 140%; }
  100% { background-position: 0 140%; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline.is-armed .timeline__progress,
  .timeline.is-armed .timeline__node,
  .timeline.is-armed .timeline__title,
  .timeline.is-armed .timeline__text,
  .timeline.is-armed .timeline__gate {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .timeline__pulse,
  .timeline.is-playing .timeline__pulse {
    display: none;
    animation: none;
  }
}

/* ---- Tablet and phone: the line runs down the page */
@media (max-width: 1023px) {

  .timeline {
    --tl-rail: 32px;
    grid-column: 1 / 9;
  }

  .timeline__track {
    top: 6px;
    bottom: 0;
    left: calc((var(--tl-node) - var(--tl-line)) / 2);
    right: auto;
    width: var(--tl-line);
    height: auto;
    background: linear-gradient(180deg, var(--color-rule-light) 85%, transparent);
  }

  .timeline__progress {
    background: linear-gradient(180deg, var(--color-brass-500) 85%, transparent);
    transform-origin: center top;
  }

  .timeline.is-armed .timeline__progress {
    transform: scaleY(0);
  }

  .timeline.is-playing .timeline__progress {
    transform: none;
  }

  .timeline__text {
    max-width: 44ch;
  }

  .timeline__steps {
    grid-template-columns: 1fr;
    row-gap: var(--space-7);
  }

  .timeline__step {
    padding-top: 0;
    padding-right: 0;
    padding-left: var(--tl-rail);
  }

  .timeline__node {
    position: absolute;
    left: 0;
    top: 6px;
    margin: 0;
  }

  .timeline__step--after-gate {
    padding-top: calc(var(--space-7) + var(--space-2));
  }

  .timeline__pulse {
    top: calc(var(--space-7) + var(--space-2) + 6px + var(--tl-node));
    bottom: 0;
    left: calc((var(--tl-node) - var(--tl-line)) / 2);
    right: auto;
    width: var(--tl-line);
    height: auto;
    background-image: linear-gradient(180deg, transparent, #7a6231, transparent);
    background-size: 100% 40%;
    background-position: 0 -40%;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  }

  .timeline.is-playing .timeline__pulse {
    animation-name: timeline-pulse-y;
  }

  .timeline__step--after-gate .timeline__node {
    top: calc(var(--space-7) + var(--space-2) + 6px);
  }

  .timeline__gate {
    top: calc(var(--space-7) / -2 + 4px);
    left: calc(var(--tl-node) / 2);
    transform: none;
    height: auto;
    flex-direction: row-reverse;
    gap: var(--space-3);
  }

  .timeline__gate::after {
    flex: 0 0 24px;
    width: 24px;
    height: 1px;
    margin: 0 0 0 -12px;
  }

  .timeline.is-armed .timeline__gate {
    transform: translateY(8px);
  }

  .timeline.is-playing .timeline__gate {
    transform: none;
  }
}

@media (max-width: 767px) {
  .model-section__lede,
  .timeline {
    grid-column: 1 / 5;
  }
}

/* -----------------------------------------------------------------------
   17. Section 07 — Leadership
   ----------------------------------------------------------------------- */
.leadership-section__intro {
  margin-bottom: var(--space-9);
}

.leadership-section__copy {
  grid-column: 1 / 8;
}

.leadership-section__copy > * + * {
  margin-top: var(--space-5);
}

.leadership-section__lede {
  color: var(--color-text-ink-soft);
}

.leadership-grid {
  row-gap: var(--space-9);
  align-items: start;
}

.founder {
  grid-column: 1 / 7;
  padding-right: var(--space-8);
}

.founder--second {
  grid-column: 7 / 13;
  padding-right: 0;
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-rule-light);
}

.founder .rule {
  margin-bottom: var(--space-6);
}

.founder__name {
  margin-bottom: var(--space-2);
}

.founder__role {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-mineral-700);
  margin-bottom: var(--space-5);
}

.founder__bio {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text-ink-soft);
  max-width: 48ch;
  margin-bottom: var(--space-5);
}

@media (min-width: 1024px) {
  .founder__bio {
    max-width: 60ch;
  }
}

.founder__credential {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-ink-soft);
}

.founder__linkedin {
  margin-top: var(--space-5);
}

.founder__linkedin .text-action {
  color: var(--color-mineral-700);
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .founder,
  .founder--second {
    grid-column: 1 / 13;
    padding-right: 0;
  }

  .founder--second {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-rule-light);
  }
}

@media (max-width: 1023px) {
  .founder,
  .founder--second {
    grid-column: 1 / 9;
    padding-right: 0;
  }

  .founder--second {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-rule-light);
  }
}

@media (max-width: 767px) {
  .founder,
  .founder--second {
    grid-column: 1 / 5;
  }
}

/* -----------------------------------------------------------------------
   18. Section 08 — Conversation and Close
   ----------------------------------------------------------------------- */
.contact-section {
  position: relative;
}

/* Opening band (~40-55vh, capped) rather than a full standalone image.
   The image is mirrored horizontally so the tower sits toward the right
   of the frame, keeping the left column (where the section label,
   heading and lede actually render) over clear dark sky instead of
   behind the tower silhouette. No z-index here for the same reason as
   the capabilities-section media: it needs to stay ordered by DOM
   position, below the in-flow .contact-grid content that follows it. */
.contact-section__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(320px, 46vh, 460px);
  overflow: hidden;
}

.contact-section__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* The mirror lives on the img alone -- applying it to both the picture
   wrapper and the img (its ancestor) composes into a double flip that
   cancels out, silently undoing the mirror entirely. */
.contact-section__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scaleX(-1);
  filter: saturate(0.6);
}

/* Layered so the form column (right side, where the beam is brightest
   after the mirror) reads cleanly without dimming the heading side:
   a radial hotspot concentrated over the upper-right where the beam
   origin sits, a horizontal fade that stays clear on the left and
   darkens across the form, then the original vertical blend underneath
   for the top/bottom tonal transition. Gradual, not a hard-edged box. */
.contact-section__media-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 55% 75% at 80% 18%,
      rgba(8, 11, 11, 0.55) 0%,
      rgba(8, 11, 11, 0) 72%
    ),
    linear-gradient(
      90deg,
      rgba(8, 11, 11, 0) 0%,
      rgba(8, 11, 11, 0.12) 42%,
      rgba(8, 11, 11, 0.48) 62%,
      rgba(8, 11, 11, 0.58) 100%
    ),
    linear-gradient(
    180deg,
    rgba(8, 11, 11, 0.5) 0%,
    rgba(8, 11, 11, 0.3) 40%,
    rgba(8, 11, 11, 0.42) 70%,
    var(--color-ink-1000) 100%
  );
}

@media (max-width: 767px) {
  .contact-section__media {
    height: clamp(260px, 42vh, 340px);
  }

  .contact-section__media img {
    object-position: 60% 24%;
  }

  /* Copy and form stack full-width here rather than sitting side by
     side, so a spatially-targeted hotspot no longer lines up with
     anything in particular -- a uniform, sufficiently dark wash keeps
     every label and input readable regardless of exactly where the
     stacked content lands against the crop. */
  .contact-section__media-overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 11, 11, 0.68) 0%,
      rgba(8, 11, 11, 0.6) 45%,
      rgba(8, 11, 11, 0.66) 70%,
      var(--color-ink-1000) 100%
    );
  }
}

.contact-grid {
  position: relative;
  z-index: 1;
  row-gap: var(--space-9);
}

.contact-grid__copy {
  grid-column: 1 / 6;
}

.contact-grid__copy > * + * {
  margin-top: var(--space-5);
}

.contact-grid__copy .lede {
  color: var(--color-text-secondary);
}

.contact-details {
  margin-top: var(--space-8) !important;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule-dark);
}

.contact-details__row {
  display: flex;
  gap: var(--space-5);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-rule-dark);
}

.contact-details__row:last-child {
  border-bottom: none;
}

.contact-details__row dt {
  flex: 0 0 140px;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.contact-details__row dd {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--color-text-primary);
}

.contact-details__row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -10px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-rule-dark);
}

.contact-details__row a:hover {
  text-decoration-color: var(--color-text-primary);
}

.contact-grid__form {
  grid-column: 7 / 13;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
}

.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.field {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
}

.field--full {
  grid-column: 1 / 3;
}

.field label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.field__required {
  color: var(--color-brass-500);
}

.field__optional {
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.field input,
.field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(245, 243, 237, 0.34);
  border-radius: 0;
  padding: var(--space-3) 0;
  color: var(--color-text-primary);
  font-size: 1.0625rem;
  transition: border-color var(--motion-control) var(--ease-precision);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-tertiary);
}

.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--color-rule-focus);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-rule-focus);
  outline-offset: 3px;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-bottom-color: var(--color-risk);
}

.field__error {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-risk);
}

.contact-form__note {
  grid-column: 1 / 3;
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  max-width: 68ch;
}

.contact-form__note:first-of-type {
  margin-top: var(--space-6);
}

.contact-form__note a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-form__submit-row {
  grid-column: 1 / 3;
  margin-top: var(--space-6);
}

.contact-form__status {
  grid-column: 1 / 3;
  margin-top: var(--space-4);
  font-size: 0.9375rem;
}

.contact-form__status[data-state="success"] {
  color: var(--color-positive);
}

.contact-form__status[data-state="error"] {
  color: var(--color-text-secondary);
}

.contact-form__status[data-state="error"] a {
  color: var(--color-text-primary);
  text-decoration: underline;
}

@media (max-width: 1023px) {
  .contact-grid__copy {
    grid-column: 1 / 9;
  }

  .contact-grid__form {
    grid-column: 1 / 9;
  }
}

@media (max-width: 767px) {
  .contact-grid__copy {
    grid-column: 1 / 5;
  }

  .contact-grid__form {
    grid-column: 1 / 5;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .field--full,
  .contact-form__note,
  .contact-form__submit-row,
  .contact-form__status {
    grid-column: 1;
  }

  .contact-form__submit-row .button-primary {
    width: 100%;
    justify-content: center;
  }

  .contact-details__row {
    flex-direction: column;
    gap: var(--space-1);
  }

  .contact-details__row dt {
    flex: none;
  }
}

/* -----------------------------------------------------------------------
   19. Footer
   ----------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-rule-dark);
  padding-top: var(--space-7);
  padding-bottom: var(--space-4);
  overflow: hidden;
}

.site-footer__top {
  row-gap: var(--space-6);
  padding-bottom: var(--space-6);
}

.site-footer__descriptor {
  grid-column: 1 / 6;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.site-footer__nav {
  grid-column: 7 / 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__nav a {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  width: fit-content;
}

.site-footer__nav a:hover {
  color: var(--color-text-primary);
}

.site-footer__meta {
  grid-column: 10 / 13;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-end;
  text-align: right;
}

.site-footer__meta a {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.site-footer__meta a:hover {
  color: var(--color-text-primary);
}

.site-footer__legal {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule-dark);
  row-gap: var(--space-2);
}

.site-footer__legal p {
  grid-column: 1 / 13;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  max-width: none;
}

.site-footer__wordmark {
  margin-top: var(--space-6);
  padding-inline: var(--page-gutter);
  line-height: 0;
}

.site-footer__wordmark img {
  width: 100%;
  max-width: 220px;
  height: auto;
  opacity: 0.85;
}

@media (max-width: 1023px) {
  .site-footer__descriptor {
    grid-column: 1 / 9;
  }

  .site-footer__nav {
    grid-column: 1 / 4;
  }

  .site-footer__meta {
    grid-column: 4 / 9;
  }
}

@media (max-width: 767px) {
  .site-footer__descriptor {
    grid-column: 1 / 5;
  }

  .site-footer__nav {
    grid-column: 1 / 5;
  }

  .site-footer__meta {
    grid-column: 1 / 5;
    align-items: flex-start;
    text-align: left;
    margin-top: var(--space-2);
  }

  .site-footer__legal p {
    grid-column: 1 / 5;
  }

  /* Touch-target minimum on mobile only -- desktop stays compact. */
  .site-footer__nav a,
  .site-footer__meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* -----------------------------------------------------------------------
   20. Privacy Policy page
   ----------------------------------------------------------------------- */
/* No hero image on this page, so the nav has nothing to be transparent
   over -- keep it solid from the start rather than relying on the
   scroll-triggered .is-scrolled state. */
.page-privacy .site-nav {
  background: var(--color-ink-1000);
  border-bottom-color: var(--color-rule-dark);
}

.legal-section {
  padding-block: var(--space-10);
}

.legal-grid {
  row-gap: var(--space-8);
}

.legal-intro {
  grid-column: 1 / 4;
}

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

.legal-intro h1 {
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-ink-soft);
}

.legal-back a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -13px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legal-body {
  grid-column: 4 / 11;
}

.legal-body p {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--color-text-ink-soft);
  max-width: 68ch;
}

.legal-body p + p {
  margin-top: var(--space-4);
}

.legal-body h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-ink);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.legal-body > p:first-child {
  margin-top: 0;
}

.legal-body ul {
  margin: var(--space-3) 0 var(--space-4);
  padding-left: 1.25em;
}

.legal-body li {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text-ink-soft);
  padding: var(--space-1) 0;
  max-width: 62ch;
}

.legal-body a {
  color: var(--color-text-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Standalone (own-line) links get a full touch target; links inline within
   a sentence (e.g. the "contact <a>...</a>. We may need..." paragraph
   above) are intentionally left as plain inline text -- WCAG 2.5.8 exempts
   links inline within a run of text from the target-size minimum, and a
   forced 44px box there would visually break the paragraph's line-height. */
.legal-body__standalone-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -13px;
}

@media (max-width: 1023px) {
  .legal-intro {
    grid-column: 1 / 9;
  }

  .legal-body {
    grid-column: 1 / 9;
  }
}

@media (max-width: 767px) {
  .legal-section {
    padding-block: var(--space-7);
  }

  .legal-intro,
  .legal-body {
    grid-column: 1 / 5;
  }
}

/* END:HERO */