/* ==========================================================================
   Apex Fides LLC — corporate site
   One stylesheet, no external requests, system font stacks only.

   Design system in one paragraph:
   Deep navy field + cool mist ground + a jade accent that always means the
   same thing (price held / compliant), and a single red tint that only ever
   marks the zone below MAP. Display type is the system grotesk pushed to 800
   with tight tracking; every label, annotation and form caption is monospace
   with tabular figures. The signature device is the MAP floor: a jade rule a
   price line never crosses, echoed as the tick that opens each section.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* color */
  --ink:        #0a1222;
  --ink-soft:   #1b2740;
  --field:      #0b1730;
  --field-lift: #16294d;
  --mist:       #edf1f6;
  --mist-deep:  #e3e9f1;
  --paper:      #ffffff;
  --line:       #dde3ec;
  --line-soft:  #e9edf3;
  --line-dark:  rgba(203, 219, 240, 0.16);
  --muted:      #5a6579;
  --muted-dark: #9fb0c8;
  --jade:       #00a87e;
  --jade-deep:  #00775a;
  --jade-glow:  rgba(0, 168, 126, 0.16);
  --zone:       #e2485f;

  /* type */
  --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-display: clamp(2.5rem, 1.45rem + 3.6vw, 4.35rem);
  --fs-h1:      clamp(2rem, 1.45rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.24rem + 1.55vw, 2.4rem);
  --fs-h3:      1.0625rem;
  --fs-lead:    clamp(1.05rem, 0.99rem + 0.35vw, 1.24rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.6875rem;

  /* layout */
  --wrap:   1160px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --band-y: clamp(3.25rem, 6.5vw, 6rem);
  --radius: 10px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1.1rem;
  font-size: var(--fs-sm);
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* --- Layout primitives --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 780px; }

.band {
  position: relative;
  padding-block: var(--band-y);
}
.band--tight { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }
.band--paper { background: var(--paper); }
.band--mist  { background: var(--mist); }

/* The spine: every light band opens with the floor rule, jade at the left. */
.band--ruled::before,
.band--ruled::after {
  content: "";
  position: absolute;
  top: 0;
  height: 2px;
}
.band--ruled::before {
  left: 0;
  right: 0;
  background: var(--line);
  height: 1px;
}
/* the tick starts where the content column starts, not at the viewport edge */
.band--ruled::after {
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  width: clamp(2.25rem, 4vw, 3.5rem);
  background: var(--jade);
  transform-origin: 0 50%;
}

/* `overflow: clip` rather than `hidden`: it clips the depth layers and keeps
   them out of the page's scroll area, without turning the band into a scroll
   container — an element inside one of those can never drive a view()
   timeline, which is what every layer below the hero runs on. */
.band--field {
  background: var(--field);
  color: #e7eefb;
  overflow: clip;
  isolation: isolate;
}
.band--field h1,
.band--field h2,
.band--field h3 { color: #f4f8ff; }
.band--field > .wrap { position: relative; z-index: 1; }

/* --- Depth layers --------------------------------------------------------
   Every band is printed on the same measuring paper, and the paper travels
   at its own speed behind the words. The layers carry nothing to read: they
   are aria-hidden, moved by transform only, clipped by their own band, and
   faded out well inside it so nothing ever shows an edge. */
.band--layered {
  overflow: clip;
  isolation: isolate;
}
.band--layered > .wrap { position: relative; z-index: 1; }

/* Overhang is fixed pixels, not a percentage: the layer travels a fixed
   distance, so the room it needs is the same in a 300px band and a 900px one.
   Half the pan plus a margin, and the ruled variant — the only one with a
   hard horizontal edge — never shows where it ends. */
.veil {
  position: absolute;
  left: 0;
  right: 0;
  top: -230px;
  bottom: -230px;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* graph paper, anchored to the side the content leaves free */
.veil--grid {
  background-image:
    linear-gradient(to right, rgba(10, 18, 34, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 18, 34, 0.045) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(56% 64% at var(--anchor, 80%) 42%, #000 0%, transparent 74%);
  mask-image: radial-gradient(56% 64% at var(--anchor, 80%) 42%, #000 0%, transparent 74%);
}

/* ruled lines only — the rows a price sits on */
.veil--rules {
  background-image: linear-gradient(to bottom, rgba(10, 18, 34, 0.055) 1px, transparent 1px);
  background-size: 100% 44px;
  -webkit-mask-image: linear-gradient(280deg, #000 0%, rgba(0, 0, 0, 0.32) 44%, transparent 70%);
  mask-image: linear-gradient(280deg, #000 0%, rgba(0, 0, 0, 0.32) 44%, transparent 70%);
}

/* on the dark bands the paper is lit instead of ruled */
.veil--field {
  background:
    radial-gradient(46% 54% at var(--anchor, 20%) 28%, var(--field-lift) 0%, transparent 68%),
    radial-gradient(34% 42% at 86% 82%, rgba(0, 168, 126, 0.12) 0%, transparent 70%);
}
.veil--mesh {
  background-image:
    linear-gradient(to right, rgba(182, 198, 221, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(182, 198, 221, 0.05) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(60% 66% at var(--anchor, 76%) 46%, #000 0%, transparent 76%);
  mask-image: radial-gradient(60% 66% at var(--anchor, 76%) 46%, #000 0%, transparent 76%);
}

/* --- The tape ------------------------------------------------------------
   This site owns exactly one mark: a 2px rule. It is the dash in front of a
   list item, the tick in front of a label, the tick that opens a band, the
   rule under the claim, and the MAP floor in the chart — the same line at
   five lengths. The tape takes that mark and puts a field of it in every
   navy band, travelling in one direction only: up, off the floor, never down
   through it. Readings coming off the instrument.

   Widths are the site's own rule lengths, not random. Roughly one in four is
   jade, the rest are the pale steel the annotations are set in. Three speed
   bands give the field depth. The whole layer is aria-hidden, generated by
   script, sits behind the content, is clipped by its band, masked soft at
   both ends, and animates transform and opacity only. It plays on load, so
   it does not wait for a scroll to be seen. */
.tape {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 80%, transparent 100%);
}
.tick {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: var(--w, 16px);
  height: 2px;
  background: var(--tick, #b6c6dd);
  opacity: 0;
  animation: tick-rise var(--t, 14s) linear var(--d, 0s) infinite;
}
.tick--jade { --tick: var(--jade); }
/* One layer instead of forty on the device that can least afford them, and
   the field sits a shade further back where the type is nearest to it. */
@media (max-width: 700px) {
  .tape { opacity: 0.82; }
}

@keyframes tick-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  16%  { opacity: var(--o, 0.3); }
  74%  { opacity: var(--o, 0.3); }
  100% { transform: translate3d(var(--dx, 0px), var(--rise, -320px), 0); opacity: 0; }
}

/* --- Typographic helpers ------------------------------------------------- */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-variant-numeric: tabular-nums;
}
/* There is one jade mark on this site and it is always a rule, never a dot:
   the MAP floor in the chart, the tick that opens each band, the checklist
   marks and this one are the same line at four lengths. */
.label::before {
  content: "";
  flex: 0 0 auto;
  width: 1rem;
  height: 2px;
  background: var(--jade-deep);
}
.band--field .label { color: var(--muted-dark); }
.band--field .label::before { background: var(--jade); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--muted);
  max-width: 58ch;
}
.band--field .lead { color: #b6c6dd; }

.prose { max-width: 66ch; }
.prose h3 {
  font-size: var(--fs-h3);
  margin-top: 2.1rem;
  margin-bottom: 0.5rem;
}
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--muted); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.section-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.section-head h2 { font-size: var(--fs-h2); max-width: 19ch; }
.section-head .lead { margin-top: 0.9rem; }

.subhead {
  font-size: var(--fs-h3);
  margin-bottom: 0.85rem;
}

.cta-title {
  font-size: var(--fs-h2);
  max-width: 20ch;
}

/* --- Links & buttons ----------------------------------------------------- */
.link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--jade-deep);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.link:hover { color: var(--jade-deep); }
.band--field .link { border-bottom-color: var(--jade); }
.band--field .link:hover { color: var(--jade); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 7px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.btn__arrow { transition: transform 0.18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--jade {
  background: var(--jade);
  color: #04201a;
}
.btn--jade:hover { background: #14c294; }

.btn--line {
  border-color: var(--line-dark);
  color: #e7eefb;
}
.btn--line:hover { border-color: #7f93b3; }

/* The header action: a stamp rather than a slab of green. Same mono caps as
   the links beside it, told apart by its border, and it fills with jade on
   hover — the loud version of the button lives in the hero, where it belongs. */
.btn--stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  gap: 0.5rem;
  padding: 0.66rem 0.95rem;
  border-radius: 4px;
  border-color: rgba(0, 168, 126, 0.5);
  color: #14c294;
  background: transparent;
}
.btn--stamp:hover {
  background: var(--jade);
  border-color: var(--jade);
  color: #04201a;
}

.btn--outline {
  border-color: rgba(10, 18, 34, 0.24);
  color: var(--ink);
}
.btn--outline:hover { border-color: var(--ink); background: rgba(10, 18, 34, 0.04); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

/* --- Wordmark ------------------------------------------------------------
   The name is Latin and means something, so it is set as a name: caps, wide
   tracking, a light weight. Nothing is attached to it: the mark is the word. */
.wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.wordmark--head { font-size: 0.95rem; }
.wordmark--foot { font-size: 1.02rem; }
.wordmark--sheet { font-size: 0.82rem; }

/* --- Header -------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11, 23, 48, 0.86);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  color: #e7eefb;
  border-bottom: 1px solid var(--line-dark);
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  flex-wrap: wrap;
}
/* Three items, one voice. The header is set in the same mono caps as every
   label on the site, so it reads as one set; hierarchy comes from structure,
   not from three different type styles. Two links divided by a hairline, then
   the action, boxed. */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.8vw, 1.25rem);
}
.site-nav__link {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #93a7c4;
  text-decoration: none;
  padding-block: 0.5rem;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.site-nav__link + .site-nav__link {
  padding-left: clamp(0.8rem, 1.8vw, 1.25rem);
  border-left: 1px solid var(--line-dark);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: #f4f8ff;
  text-decoration: underline;
  text-decoration-color: var(--jade);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
}
.site-nav .btn { margin-left: clamp(0.1rem, 1vw, 0.5rem); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 6.5vw, 5.75rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 4.5vw, 4rem);
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.038em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--jade);
}
/* The claim rests on the same rule the price line rests on in the chart
   beside it. Drawn last in the opening sequence, so the eye leaves the
   sentence along a jade line and lands on the one in the card. */
.hero h1::after {
  content: "";
  display: block;
  width: min(100%, 20rem);
  height: 2px;
  margin-top: clamp(1.1rem, 2vw, 1.45rem);
  background: var(--jade);
  transform-origin: 0 50%;
}
.hero .lead { margin-top: 1.5rem; max-width: 46ch; }

/* depth layers — moved by transform only, never layout */
.hero__intro,
.hero__panel { will-change: transform; }

.hero__glow,
.hero__grid-lines {
  position: absolute;
  inset: -20% -10% -30%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.hero__glow {
  background:
    radial-gradient(46% 52% at 76% 24%, var(--field-lift) 0%, transparent 68%),
    radial-gradient(38% 44% at 14% 8%, rgba(0, 168, 126, 0.14) 0%, transparent 70%);
}
.hero__grid-lines {
  background-image:
    linear-gradient(to right, rgba(182, 198, 221, 0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(182, 198, 221, 0.055) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 30%, #000 0%, transparent 76%);
  mask-image: radial-gradient(80% 70% at 70% 30%, #000 0%, transparent 76%);
}

/* --- The MAP floor chart (signature element) ----------------------------- */
.floor-card {
  background: rgba(8, 18, 38, 0.55);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  box-shadow: 0 34px 70px -44px rgba(0, 0, 0, 0.9);
  /* The card is glass on purpose — the lit field reads through it. The tape
     must not: a mark drifting up through the hatched zone would read as a
     price entering it, which is the one thing this chart says never happens.
     A blur leaves the gradient behind the card identical and dissolves a 2px
     rule completely. */
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.floor-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dark);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 0.9rem;
}
.floor-chart { display: block; width: 100%; height: auto; }
.floor-card__note {
  margin: 1rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #cddaee;
}
.floor-card__note strong { color: #f4f8ff; font-weight: 600; }
.floor-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--jade);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.floor-card__link:hover { border-bottom-color: var(--jade); }

/* chart drawing sequence */
.chart-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* The SVG scales down with the column, so the annotations scale up to stay
   legible on a phone. */
@media (max-width: 760px) {
  .chart-label { font-size: 16px; letter-spacing: 0.1em; }
}
.js .chart-anim .chart-draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.js .chart-anim .chart-fade { opacity: 0; }
.js .chart-anim.is-live .chart-draw {
  animation: chart-draw 1.05s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}
.js .chart-anim.is-live .chart-floor { animation-duration: 0.65s; }
.js .chart-anim.is-live .chart-price { animation-delay: 0.42s; }
.js .chart-anim.is-live .chart-fade {
  animation: chart-fade 0.6s ease forwards;
}
.js .chart-anim.is-live .chart-fade--late { animation-delay: 1.15s; }
.js .chart-anim.is-live .chart-fade--zone { animation-delay: 0.1s; }

@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-fade { to { opacity: 1; } }

/* --- Capability grid ----------------------------------------------------- */
/* Six capabilities, so the grid is set explicitly: 3x2, 2x3, then a column.
   auto-fit would leave a hole at four columns wide. */
.caps {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* clip, not hidden: `hidden` would make this grid a scroll container, and
     a card inside one measures its view() timeline against the grid instead
     of the page — which reads as the lower cards never arriving. */
  overflow: clip;
}
@media (max-width: 1000px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .caps { grid-template-columns: minmax(0, 1fr); } }
.cap {
  background: var(--paper);
  padding: clamp(1.3rem, 2.4vw, 1.75rem);
}
.cap__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jade-deep);
  display: block;
  margin-bottom: 0.85rem;
}
.cap h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
  letter-spacing: -0.018em;
}
.cap p {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --- Category strip ------------------------------------------------------ */
.cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.cats li {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
}
.cats-note {
  margin-top: 1.35rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 62ch;
}

/* --- Two-list block ------------------------------------------------------ */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  align-items: start;
}
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.72rem;
}
.checklist li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.7rem;
  height: 2px;
  background: var(--jade-deep);
}
.checklist--no li::before { background: #c3ccd9; }
.band--field .checklist li { color: #b6c6dd; }
.band--field .checklist li::before { background: var(--jade); }

/* --- Name band ----------------------------------------------------------- */
.name-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: center;
}
.name-band h2 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.name-band h2 .apex { color: var(--jade); }
.name-band p {
  margin: 0;
  max-width: 50ch;
  color: #b6c6dd;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.name-band em { font-style: italic; color: #f4f8ff; }

/* --- Partner form -------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.form-intro h2 {
  font-size: var(--fs-h2);
  max-width: 15ch;
}
.form-intro .lead { margin-top: 1rem; max-width: 40ch; }

.chips {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.chips li {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.chips li::before {
  content: "";
  width: 0.7rem;
  height: 2px;
  background: var(--jade-deep);
  flex: 0 0 auto;
}

.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2.15rem);
  box-shadow: 0 24px 48px -40px rgba(10, 18, 34, 0.55);
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.78rem 0.85rem;
  width: 100%;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.field textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.field input:hover,
.field textarea:hover { border-color: #c3ccd9; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--jade);
  box-shadow: 0 0 0 3px var(--jade-glow);
}
.form__foot {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.form__note {
  font-size: var(--fs-xs);
  color: var(--muted);
  flex: 1 1 15rem;
  max-width: 44ch;
  margin: 0;
}

/* Registered particulars appear once per page, in the footer. */

/* --- Policy sheet -------------------------------------------------------- */
.sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 3.2rem);
  max-width: 880px;
  margin-inline: auto;
  box-shadow: 0 1px 2px rgba(10, 18, 34, 0.04), 0 30px 60px -46px rgba(10, 18, 34, 0.55);
}
.sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.sheet__head .wordmark { color: var(--ink); }
.sheet__head-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.sheet__intro {
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--muted);
  max-width: 64ch;
}
.sheet__foot {
  margin-top: clamp(1.9rem, 4vw, 2.6rem);
  padding-top: 1.35rem;
  border-top: 2px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
}
.sheet__sig {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.sheet__sig strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.sheet__sig a { color: inherit; }

.clauses {
  margin-top: clamp(1.6rem, 3vw, 2.25rem);
  display: grid;
  gap: clamp(1.3rem, 2.4vw, 1.8rem);
}
.clause {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1.4rem;
  padding-top: clamp(1.3rem, 2.4vw, 1.8rem);
  border-top: 1px solid var(--line-soft);
}
.clauses > .clause:first-child { border-top: 0; padding-top: 0; }
.clause__no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--jade-deep);
  padding-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.clause__title {
  font-size: var(--fs-h3);
  margin-bottom: 0.45rem;
  letter-spacing: -0.018em;
}
.clause__body p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.clause--key .clause__body {
  border-left: 2px solid var(--jade);
  padding-left: clamp(1rem, 2vw, 1.4rem);
}
.clause--key .clause__lede {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.35;
  color: var(--ink);
  max-width: 36ch;
  margin-bottom: 0.7rem;
}

/* --- Page head (subpages) ------------------------------------------------ */
.page-head { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
.page-head h1 {
  font-size: var(--fs-h1);
  max-width: 20ch;
  letter-spacing: -0.032em;
}
.page-head .lead { margin-top: 1.15rem; }

/* --- Footer -------------------------------------------------------------- */
.site-foot {
  position: relative;
  background: var(--field);
  color: var(--muted-dark);
  padding-block: clamp(2.75rem, 5vw, 3.75rem);
  font-size: var(--fs-sm);
  overflow: clip;
  isolation: isolate;
}
.site-foot > .wrap { position: relative; z-index: 1; }
.site-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 1.9rem;
  border-bottom: 1px solid var(--line-dark);
}
.site-foot .wordmark { color: #f4f8ff; }
.site-foot__tag {
  display: block;
  margin-top: 0.85rem;
  max-width: 30ch;
  line-height: 1.55;
  color: var(--muted-dark);
}
.site-foot h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7f93b3;
  margin: 0 0 0.85rem;
}
.site-foot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.site-foot__list a {
  text-decoration: none;
  color: var(--muted-dark);
  transition: color 0.18s ease;
}
.site-foot__list a:hover { color: #f4f8ff; }
.site-foot address {
  font-style: normal;
  line-height: 1.6;
  color: var(--muted-dark);
}
.site-foot address a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.site-foot address a:hover { color: #f4f8ff; border-bottom-color: var(--jade); }
.site-foot__bottom {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  color: #7f93b3;
}
.site-foot__bottom a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.site-foot__bottom a:hover { color: #f4f8ff; }
.site-foot__legal { max-width: 64ch; }

/* --- Motion: the page is drawn, not dropped in ---------------------------
   Four moves, and only four:

     tape   the one ambient move, and the only one that does not wait for a
            scroll: a field of the site's own 2px rule rising through every
            navy band. Readings coming up off the floor. Built by script,
            documented at `.tape` above.
     draw   a jade rule extends from where it starts — under the claim in the
            hero, along the top of each band, down the side of each
            definition. The gesture of the site: the line is laid down first,
            and everything else settles onto it.
     rise   content arrives from below onto that line — the capability cards
            print in one after another, the categories are dealt from the
            left.
     depth  the whole page, not the first screen. In the hero the lit field
            sinks and swells while the measuring grid climbs and fades out of
            it, and the price card climbs out of its column against the text.
            Below it every band carries its own paper — graph grid, ruled
            rows, lit field — that lags behind the words as the band passes,
            and in three places the columns themselves travel at different
            speeds. Opposite directions throughout, so the separation is
            legible rather than a uniform slide.

   The opening sequence is time-based and runs on load. Everything else is a
   function of scroll position, so scrolling back up unwinds it. Native
   scroll-driven timelines do the work on the compositor; `html.no-sda` is the
   requestAnimationFrame fallback, which writes the same 0..1 progress into
   --p. Nothing scroll-linked moves unless JavaScript has confirmed it can run,
   so a blocked script can never leave the page blank. The small draws are
   declared on the native path only and default to fully drawn everywhere else.
   Transform and opacity, nothing that costs layout. */

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-deep {
  from { opacity: 0; transform: translate3d(0, 72px, 0); }
  to   { opacity: 1; transform: none; }
}
/* The six capability cards share one 1px hairline grid, so they cannot move
   independently without opening gaps in it. They arrive by ink instead: each
   card's range is offset a little further into the pass, so the block prints
   itself top-left to bottom-right. */
@keyframes ink { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-panel-in {
  from { opacity: 0; transform: translate3d(0, 46px, 0) scale(0.982); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw-x  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* A layer's whole journey across the viewport, centred on the middle of the
   pass: positive --pan lags behind the content and reads as further away,
   negative leads it and reads as nearer. */
@keyframes pan {
  from { transform: translate3d(0, calc(var(--pan) * -0.5), 0); }
  to   { transform: translate3d(0, calc(var(--pan) *  0.5), 0); }
}
@keyframes drift-far {
  to { transform: translate3d(0, var(--shift), 0) scale(calc(1 + var(--zoom, 0))); }
}
@keyframes drift-fade {
  to { transform: translate3d(0, var(--shift), 0); opacity: 0.25; }
}
@keyframes drift-y { to { transform: translate3d(0, var(--shift), 0); } }
@keyframes track   { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Travel is a variable so one keyframe serves every screen: on a phone the
   hero is a single column, and a card climbing the full desktop distance
   would walk into the paragraph above it.

   These are meant to be seen. Across the first screen of scroll the lit
   field sinks 340px while the measuring grid climbs 260px out of it and
   fades — the two layers cross, which is what makes the depth read as depth
   rather than as a slow slide. */
.drift-far  { --shift:  340px; --zoom: 0.2; }
.drift-near { --shift: -260px; }
.drift-lift { --shift: -132px; }
.drift-text { --shift:   78px; }

.veil        { --pan: 330px; }
.veil--lead  { --pan: -270px; }
/* content against content: a heading holds back while the block under it
   runs ahead, so the two separate by about 150px across a full pass */
.pan--drag   { --pan:  92px; }
.pan--lead   { --pan: -58px; }

@media (max-width: 940px) {
  .drift-far  { --shift:  240px; --zoom: 0.14; }
  .drift-near { --shift: -175px; }
  .drift-lift { --shift:  -44px; }
  .drift-text { --shift:    0px; }

  /* One column on a phone: the paper still travels, the content does not.
     Stacked blocks moving against each other would eat the gap between a
     heading and the block it belongs to. */
  .veil       { --pan: 230px; }
  .veil--lead { --pan: -190px; }
  .pan--drag,
  .pan--lead  { --pan: 0px; }
}

/* --- The opening sequence (time-based, pure CSS) ---
   Four beats in under a second: the company line, the claim, the explanation,
   the way in — then the rule under the claim, drawn last, so the eye leaves
   the sentence along a jade line and lands on the chart that proves it. */
@media (prefers-reduced-motion: no-preference) {
  .hero__intro > * {
    animation: hero-in 0.8s cubic-bezier(0.17, 0.67, 0.24, 1) backwards;
  }
  .hero__intro > :nth-child(1) { animation-delay: 0.05s; }
  .hero__intro > :nth-child(2) { animation-delay: 0.13s; }
  .hero__intro > :nth-child(3) { animation-delay: 0.29s; }
  .hero__intro > :nth-child(4) { animation-delay: 0.4s; }
  .hero .floor-card {
    animation: hero-panel-in 0.95s cubic-bezier(0.17, 0.67, 0.24, 1) 0.24s backwards;
  }
  .hero h1::after {
    animation: draw-x 0.72s cubic-bezier(0.22, 0.61, 0.3, 1) 0.58s backwards;
  }
}

/* --- native path --- */
@supports (animation-timeline: view()) {
  .js .rise {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 15%;
  }
  .js .rise--deep {
    animation: rise-deep linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 22%;
  }
  /* The hero clips its layers, and `overflow: hidden` makes the hero itself
     the nearest scroll container — a view() timeline anchored there never
     advances. These read the document scroller directly instead. */
  .js .drift-far,
  .js .drift-near,
  .js .drift-lift,
  .js .drift-text {
    animation: drift-y linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 100vh;
  }
  .js .drift-far  { animation-name: drift-far; }
  .js .drift-near { animation-name: drift-fade; }

  /* depth, band by band: the whole pass of the element through the viewport */
  .js .pan {
    animation: pan linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  /* Staggering on a scroll timeline is done with the range, not a delay:
     each item starts a few percent further into the same pass. */
  .js .caps .cap {
    animation: ink linear both;
    animation-timeline: view();
    animation-range: cover 2% cover 20%;
  }
  .js .caps .cap:nth-child(2) { animation-range: cover 5% cover 23%; }
  .js .caps .cap:nth-child(3) { animation-range: cover 8% cover 26%; }
  .js .caps .cap:nth-child(4) { animation-range: cover 11% cover 29%; }
  .js .caps .cap:nth-child(5) { animation-range: cover 14% cover 32%; }
  .js .caps .cap:nth-child(6) { animation-range: cover 17% cover 35%; }

  /* The categories are a row of separate objects, so they can move: they come
     in from the left, one after another, the way a list is dealt out. */
  .js .cats li {
    animation: slide-in cubic-bezier(0.2, 0.6, 0.28, 1) both;
    animation-timeline: view();
    animation-range: cover 4% cover 22%;
  }
  .js .cats li:nth-child(2) { animation-range: cover 7% cover 25%; }
  .js .cats li:nth-child(3) { animation-range: cover 10% cover 28%; }
  .js .cats li:nth-child(4) { animation-range: cover 13% cover 31%; }
  .js .cats li:nth-child(5) { animation-range: cover 16% cover 34%; }

  /* the draws */
  .js .band--ruled::after {
    animation: draw-x linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 18%;
  }

  .js .scroll-track__bar {
    animation: track linear both;
    animation-timeline: scroll(root block);
  }
}

/* --- requestAnimationFrame fallback --- */
.js.no-sda .rise {
  opacity: var(--p, 1);
  transform: translate3d(0, calc((1 - var(--p, 1)) * 40px), 0);
}
.js.no-sda .rise--deep {
  opacity: var(--p, 1);
  transform: translate3d(0, calc((1 - var(--p, 1)) * 72px), 0);
}
.js.no-sda .drift-far {
  transform: translate3d(0, calc(var(--p, 0) * var(--shift)), 0)
             scale(calc(1 + var(--p, 0) * var(--zoom)));
}
.js.no-sda .drift-near {
  transform: translate3d(0, calc(var(--p, 0) * var(--shift)), 0);
  opacity: calc(1 - var(--p, 0) * 0.75);
}
.js.no-sda .drift-lift,
.js.no-sda .drift-text { transform: translate3d(0, calc(var(--p, 0) * var(--shift)), 0); }
.js.no-sda .pan {
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * var(--pan)), 0);
}
.js.no-sda .scroll-track__bar { transform: scaleX(var(--p, 0)); }

/* A page too short to scroll cannot drive a scroll timeline, so it opts out.
   The tape is not scroll-driven and stays. */
.js.no-motion .rise,
.js.no-motion .rise--deep,
.js.no-motion .caps .cap,
.js.no-motion .cats li {
  animation: none;
  opacity: 1;
  transform: none;
}

/* --- scroll track ---
   Two pixels of jade across the top: the same rule the price line rests on,
   filling as the page is read. */
.scroll-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 40;
  pointer-events: none;
  background: transparent;
}
.scroll-track__bar {
  display: block;
  height: 100%;
  background: var(--jade);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 17ch; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .name-band { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .name-band h2 { max-width: 20ch; }
  .site-foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  /* A two-row sticky bar would eat an eighth of a phone screen for the whole
     visit. The hero carries the same call to action. */
  .site-head { position: static; }
  .site-head__inner {
    align-items: flex-start;
    padding-block: 0.8rem;
    gap: 0.75rem;
  }
  /* The two links keep one row; the action takes the full width below them
     rather than being squeezed into a third of the screen. */
  .site-nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-dark);
  }
  .site-nav__link { letter-spacing: 0.12em; padding-block: 0.1rem; }
  .site-nav__link + .site-nav__link { padding-left: 0.75rem; }
  .site-nav .btn--stamp {
    flex: 1 0 100%;
    margin-left: 0;
    padding-block: 0.62rem;
  }

  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .clause { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .clause__no { padding-top: 0; }
  .site-foot__top { grid-template-columns: minmax(0, 1fr); }
  .btn-row .btn,
  .form__foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Scroll-driven animations are progress-driven, not duration-driven, so the
     rule above does not reach them. They come off explicitly. */
  .js .rise,
  .js .rise--deep,
  .js .drift-far,
  .js .drift-near,
  .js .drift-lift,
  .js .drift-text,
  .js .pan,
  .js .caps .cap,
  .js .cats li,
  .js .band--ruled::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* The tape is motion and nothing else: with motion off there is nothing
     left of it to show. Script does not build it either. */
  .tape { display: none !important; }
  .hero__intro,
  .hero__panel,
  .veil { will-change: auto; }
  .scroll-track { display: none; }
  .js .chart-anim .chart-draw { stroke-dashoffset: 0; }
  .js .chart-anim .chart-fade { opacity: 1; }
}

/* --- Print: the policy is meant to be filed with an application ---------- */
@media print {
  :root { --band-y: 0.75rem; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .site-head,
  .site-foot,
  .band--field,
  .no-print,
  .skip-link { display: none !important; }
  .band { padding-block: 0.4rem; background: #fff !important; }
  .band--ruled::before,
  .band--ruled::after,
  .veil,
  .tape,
  .scroll-track { display: none; }
  .rise, .rise--deep,
  .caps .cap, .cats li { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sheet { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .wrap { max-width: none; padding-inline: 0; }
  .clause { break-inside: avoid; }
  .clause__body p,
  .clause--key .clause__lede { color: #000; max-width: none; }
  .clause--key .clause__body { border-left: 1.5pt solid #000; }
  .clause__no { color: #000; }
  a { text-decoration: none; color: #000; }
}