* {
  box-sizing: border-box;
}

:root {
  --site-ink: #0b1c2e;
  --site-ink-soft: #344b61;
  --site-paper: #f7f8f6;
  --site-paper-blue: #edf3f7;
  --site-paper-warm: #fbf7ed;
  --site-line: #cbd5dc;
  --site-line-strong: #8ca2b3;
  --site-white: #ffffff;
  --site-amber: var(--color-accent);
  --site-blue: #316e96;
  --site-max: max(82.5rem, min(104rem, 79vw));
  --site-reading: 46rem;
  --site-gutter: clamp(1.2rem, 4vw, 4rem);
  --site-section: clamp(5rem, 8vw, 8.5rem);
  --site-gap: clamp(3rem, 6vw, 7.5rem);
  --site-mark: 0.75rem;
  --site-body-strong: var(--site-ink);
  --site-plate: clamp(44rem, 55vw, 56rem);
  --site-plate-gap: clamp(2.6rem, 4vw, 3.8rem);
  --site-shoulder: minmax(0, 0.62fr);
  --site-shoulder-hang: calc(var(--site-gap) * 0.4);
  --site-heading: clamp(2rem, 1.45rem + 1.55vw, 3.2rem);
  --site-shoulder-heading: clamp(2rem, 3.3cqi, 3.2rem);
  --site-closing-heading: clamp(2.2rem, 4cqi, 3.6rem);
  --site-deck: clamp(1.15rem, 1.02rem + 0.4vw, 1.4rem);
  --site-column-text: clamp(1.08rem, 1rem + 0.25vw, 1.25rem);
  --site-column-leading: 1.58;
}

html {
  scroll-behavior: smooth;
  background: var(--site-paper);
}

body.site-body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--site-paper);
  color: var(--site-ink-soft);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.12vw, 1.125rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

.site-body p {
  text-wrap: pretty;
}

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

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

::selection {
  background: rgba(var(--color-accent-rgb), 0.28);
  color: var(--site-ink);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--site-line-strong);
  border-radius: var(--radius-control);
  background: var(--site-white);
  color: var(--site-ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  width: min(100%, var(--site-max));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(140, 162, 179, 0.5);
  background: rgba(247, 248, 246, 0.95);
  backdrop-filter: blur(12px);
}

.site-nav {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-logo {
  --brand-lockup-height: 2.25rem;
  display: inline-flex;
  flex: 0 0 auto;
}

.site-logo:focus-visible,
.site-nav__link:focus-visible,
.site-nav__login:focus-visible,
.site-footer a:focus-visible,
.text-link:focus-visible,
.button:focus-visible,
.nav-toggle:focus-visible {
  outline: 3px solid rgba(49, 110, 150, 0.28);
  outline-offset: 4px;
  box-shadow: none;
}

.site-nav__panel,
.site-nav__links {
  display: flex;
  align-items: center;
}

.site-nav__panel {
  gap: clamp(1.4rem, 2.4vw, 2.7rem);
}

.site-nav__links {
  gap: clamp(1.15rem, 2vw, 2rem);
}

.site-nav__link {
  position: relative;
  color: var(--site-ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.65rem;
  left: 0;
  height: 2px;
  background: var(--site-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--site-ink);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* The form link is a quiet control that sits with the nav: it is one page among the others,
   so it does not get the site's only filled button (the hero keeps that). The customer route
   is a utility on its own past a short rule, lighter than both the nav (500 against 600) and
   the control, with a stroke icon so it reads as an account action at a glance. No amber. */
.site-nav__login::before {
  content: "";
  width: 1px;
  height: 1.5rem;
  margin-right: clamp(0.6rem, 1.2vw, 1.1rem);
  background: var(--site-line-strong);
}

.site-nav__login {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--site-ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

.site-nav__login-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.site-nav__login:hover {
  color: var(--site-ink);
}

.site-nav .site-nav__mobile-contact {
  display: none;
}

.nav-toggle {
  display: none;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.7rem;
  border: 1px solid var(--site-line);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--site-ink);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 1px;
  margin-block: 0.32rem;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}

.nav-open .nav-toggle span:first-child {
  transform: translateY(0.33rem) rotate(45deg);
}

.nav-open .nav-toggle span:last-child {
  transform: translateY(-0.33rem) rotate(-45deg);
}

.button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--site-ink);
  border-radius: var(--radius-control);
  background: var(--site-ink);
  color: var(--site-white);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.button:hover {
  border-color: #1c3349;
  background: #1c3349;
  color: var(--site-white);
  transform: translateY(-1px);
}

.button--quiet {
  border-color: var(--site-line-strong);
  background: transparent;
  color: var(--site-ink);
}

.button--quiet:hover {
  border-color: var(--site-ink);
  background: var(--site-white);
  color: var(--site-ink);
}

.button--light {
  border-color: rgba(255, 255, 255, 0.72);
  background: var(--site-white);
  color: var(--site-ink);
}

.button--light:hover {
  border-color: var(--site-white);
  background: var(--site-paper-blue);
  color: var(--site-ink);
}

.button__arrow,
.text-link__arrow {
  font-size: 1.15em;
  line-height: 1;
}

.hero {
  position: relative;
  min-height: min(50rem, calc(100svh - 5rem));
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 6vw, 6.5rem);
  border-bottom: 1px solid var(--site-line);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
  align-items: end;
  gap: clamp(2.5rem, 5vw, 5.5rem);
}

.hero__copy {
  align-self: start;
  max-width: 46rem;
  container-type: inline-size;
}

.hero__copy::before {
  content: "";
  display: block;
  width: 3rem;
  height: 0.35rem;
  margin-bottom: clamp(1.6rem, 2.4vw, 2.4rem);
  background: var(--site-amber);
}

.hero h1,
.page-hero h1,
.closing h2,
.not-found h1 {
  margin: 0;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero h1 {
  max-width: none;
  font-size: clamp(3.2rem, 13cqi, 5.4rem);
  line-height: 0.98;
}

.hero__lead {
  max-width: 42rem;
  margin: 2rem 0 0;
  color: var(--site-ink-soft);
  font-size: clamp(1.17rem, 1.04rem + 0.45vw, 1.45rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.hero__actions,
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.2rem;
}

.hero-figure {
  align-self: end;
  margin: 0;
}

.hero-figure__frame,
.section-figure__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--site-line-strong);
  border-radius: var(--radius-tile);
  background: #f2f3ef;
}

.hero-figure picture,
.hero-figure img,
.section-figure picture,
.section-figure img {
  width: 100%;
}

.hero-figure img,
.section-figure img {
  display: block;
  height: auto;
}

.section-figure--lead {
  margin: 0 0 clamp(2rem, 3vw, 2.8rem);
}

.section-figure {
  margin: clamp(2.6rem, 4vw, 3.6rem) 0 0;
}

.section {
  position: relative;
  padding-block: var(--site-section);
}

.section--line {
  border-top: 1px solid var(--site-line);
}

.section--blue {
  background: var(--site-paper-blue);
}

.section--warm {
  background: var(--site-paper-warm);
}

/* Figure bands. An illustration is a paragraph-scale object, not a poster: it is set to the
   plate width (half the viewport, 44 to 54rem) and registered to the spine like every heading,
   never stretched to the shell. A free figure band opens the section that follows it: both sit
   on paper, the hairline between them is dropped and the beat between them is the plate gap.
   A band carrying --attached closes the band before it: it takes that band's field and sits
   under its last rule, so the figure reads as the section's last word rather than an island. */
.site-shell > .section-figure:only-child {
  width: min(100%, var(--site-plate));
  margin: 0;
}

.section--figure {
  padding-block: var(--site-section);
}

.section--figure:not(.section--figure-attached):has(+ .section--line) {
  padding-bottom: 0;
}

.section--figure:not(.section--figure-attached) + .section--line {
  padding-top: var(--site-plate-gap);
  border-top: 0;
}

.section--figure-attached {
  padding-top: 0;
}

.section--blue + .section--figure-attached,
.principles + .section--figure-attached {
  background: var(--site-paper-blue);
}

.section--warm + .section--figure-attached {
  background: var(--site-paper-warm);
}

.section--ink + .section--figure-attached {
  --site-body-strong: var(--site-white);
  background: var(--site-ink);
}

.section:has(+ .section--figure-attached),
.principles:has(+ .section--figure-attached) {
  padding-bottom: var(--site-plate-gap);
}

.principles:has(+ .section--figure-attached) .principle:nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--site-line-strong);
}

.section--ink {
  --site-body-strong: var(--site-white);
  background: var(--site-ink);
  color: #cdd8e1;
}

.section--ink h2,
.section--ink h3,
.section--ink .section-heading,
.section--ink .text-link,
.section--ink strong {
  color: var(--site-white);
}

.section-heading,
.content-section h2,
.feature-heading {
  margin: 0;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: var(--site-heading);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.07;
  text-wrap: balance;
}

.split {
  display: grid;
  grid-template-columns: var(--site-shoulder) minmax(22rem, 1fr);
  gap: var(--site-gap);
  align-items: start;
}

/* Shoulder headings. A heading beside a body column sizes from its grid rather than the
   viewport (3.3cqi, which against the shoulder's 0.38 share of the shell is about 23
   characters a line) and may run into the first 40 percent of the gutter. Under those two
   rules every line of a heading carries two words or more; at the old size the shoulder held
   16 characters and a five-word heading broke into stubs. The full-width section heading
   keeps the larger display size: a headline over a section is a bigger event than a heading
   beside one, and the two sizes give the page its rhythm. */
.split,
.ink-grid,
.example-intro,
.recommendation,
.contact-layout {
  container-type: inline-size;
}

.split > .section-heading,
.ink-grid > .section-heading,
.example-intro > .section-heading,
.recommendation .section-heading,
.contact-layout .section-heading {
  font-size: var(--site-shoulder-heading);
}

.split > .section-heading,
.ink-grid > .section-heading,
.example-intro > .section-heading,
.recommendation > :first-child {
  margin-right: calc(var(--site-shoulder-hang) * -1);
}

.split__body,
.ink-grid > :last-child,
.example-intro__body,
.recommendation > :last-child,
.trust-item__body {
  align-self: end;
}

.split__body {
  max-width: var(--site-reading);
}

.split__body p:first-child {
  margin-top: 0;
}

.split__body p:last-child {
  margin-bottom: 0;
}

/* Column text. Every paragraph and list item in a body column shares one size and one
   leading. The lead paragraph is set in ink and the paragraphs after it in the soft ink, so
   tone alone marks the lead. A follower that was also smaller and more open read as a
   footnote to the paragraph above it rather than the next paragraph. */
.split__body,
.ink-grid > div,
.recommendation > div,
.trust-item__body,
.content-section__body,
.example-intro__body,
.closing p {
  font-size: var(--site-column-text);
  line-height: var(--site-column-leading);
}

.split__body p,
.ink-grid p,
.recommendation p,
.trust-item__body p,
.content-section__body p,
.example-intro__body p {
  margin: 0 0 0.95em;
}

.split__body > p:first-child,
.ink-grid > div > p:first-child,
.recommendation > div > p:first-child,
.trust-item__body > p:first-child,
.content-section__body > h2 + p,
.example-intro__body > p:first-child {
  color: var(--site-body-strong);
}

/* A figure written inside a body column is the section's closing plate: the text keeps its
   column, the figure drops beneath both columns at plate width on the spine. In the column it
   was either squeezed (a shoulder-width thumbnail) or tall enough to leave the shoulder dead
   for its whole height. Same rule as the figure bands, so every plate on the site is one object. */
.split__body:has(> .section-figure),
.trust-item__body:has(> .section-figure) {
  display: contents;
}

.split:has(> .split__body > .section-figure),
.trust-item:has(> .trust-item__body > .section-figure) {
  row-gap: 0;
}

/* The heading spans the text rows so the paragraphs flow as one column beside it; the plate
   takes the row after. If the heading ever outgrows the text the slack spreads thinly across
   the twelve rows instead of opening one hole after the first paragraph. */
.split:has(> .split__body > .section-figure) > :first-child,
.trust-item:has(> .trust-item__body > .section-figure) > :first-child {
  grid-row: 1 / span 12;
}

.split__body:has(> .section-figure) > *,
.trust-item__body:has(> .section-figure) > * {
  grid-column: 2;
  max-width: var(--site-reading);
  margin: 0 0 1rem;
}

.split__body:has(> .section-figure) > :nth-last-child(2),
.trust-item__body:has(> .section-figure) > :nth-last-child(2) {
  margin-bottom: 0;
}

.split__body:has(> .section-figure) > .section-figure,
.trust-item__body:has(> .section-figure) > .section-figure {
  grid-row: 13;
  grid-column: 1 / -1;
  width: min(100%, var(--site-plate));
  max-width: none;
  margin: var(--site-plate-gap) 0 0;
}

/* An illustration set beside the argument it belongs to. The shoulder carries the heading
   and then goes dead for the rest of the section, and a closing plate under both columns
   opened a second hole to its right, wider than the plate was tall. One move closes both:
   the figure takes the shoulder directly under its own heading, at the 400 to 700 pixels
   the Worklines are drawn for. The heading now reads as the image's caption because it sits
   on top of it, which is the relationship the closing plate could only imply. */
.split--aside {
  row-gap: 0;
}

.split--aside > .section-heading {
  grid-column: 1;
  grid-row: 1;
}

/* Body text bottom-aligns with its heading everywhere else on the site, which works when
   the two columns are a heading and a paragraph. Here the shoulder carries a heading and an
   image, so bottom-aligning the text opened a hole in the top of the wider column. The two
   columns start together instead. */
.split--aside > .split__body {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.split--aside > .section-figure {
  grid-column: 1;
  grid-row: 2;
  width: min(100%, 25rem);
  margin: clamp(1.6rem, 2.4vw, 2.4rem) 0 0;
}

/* About runs the other way. Its heading is three lines and its text only two short
   paragraphs, so a heading stacked above the image made the shoulder half again as tall as
   the column beside it: 511px against 208px. Nothing sized the image down out of that,
   because the heading alone was already taller than the text. The image leads the shoulder
   instead and the heading sits over the text it introduces, which puts 325 against 355. */
.split--aside-lead > .section-figure {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 100%;
  margin: 0;
}

.split--aside-lead > .section-heading {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-right: 0;
}

.split--aside-lead > .split__body {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: clamp(1.2rem, 2vw, 2rem);
}

.split__body a:not(.text-link),
.trust-item__body a:not(.text-link),
.contact-aside a:not(.text-link) {
  color: var(--site-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.form-note a {
  color: var(--site-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.form-note a:focus-visible {
  outline: 3px solid var(--site-blue);
  outline-offset: 4px;
}

.pull-line {
  max-width: 34rem;
  margin: 0;
  padding-left: 1.35rem;
  border-left: 0.35rem solid var(--site-amber);
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* A statement band: one pull line and one pointer, the pointer set to the statement's text
   edge past the bar. Reuses the Home pull line rather than a heading beside a two-line body. */
.statement .pull-line {
  max-width: 44rem;
}

.statement .text-link {
  margin-left: 1.7rem;
}

.text-link {
  display: inline-block;
  margin: 1.5rem 1.9rem 0 0;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-decoration: none;
  transition: color 160ms ease;
}

.text-link__arrow {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--site-amber);
  font-size: 1em;
  transition: transform 160ms ease;
}

.text-link:hover {
  color: var(--site-blue);
  text-decoration: none;
}

.text-link:hover .text-link__arrow {
  transform: translateX(0.25em);
}

.section--ink .text-link:hover {
  color: #cdd8e1;
}

/* Divided columns. The dividers sit in the middle of the gutter, drawn by the second and
   third items, so all three tracks carry one measure; padding the items unevenly gave the
   first column 30 to 60px more line than its peers. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.4rem);
  margin-top: clamp(3.2rem, 6vw, 5rem);
  border-top: 1px solid var(--site-line-strong);
}

.step {
  position: relative;
  padding: 2.2rem 0 0;
}

.step:not(:first-child)::after,
.path:not(:first-child)::after,
.support-example + .support-example::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--site-divide-gap) / -2);
  border-left: 1px solid var(--site-line);
}

.steps,
.paths {
  --site-divide-gap: clamp(2rem, 5vw, 4.4rem);
}

.support-examples {
  --site-divide-gap: clamp(2.5rem, 6vw, 5.5rem);
}

.step::before {
  content: "";
  position: absolute;
  top: calc(var(--site-mark) / -2 - 0.5px);
  left: 0;
  width: var(--site-mark);
  height: var(--site-mark);
  background: var(--site-amber);
}


.step__number,
.content-section__index::before,
.principle::before {
  display: block;
  color: var(--site-blue);
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.step__number {
  margin-bottom: 1rem;
  font-size: clamp(2.1rem, 1.5rem + 1.3vw, 3rem);
}

.step h3,
.principle h2,
.content-section h3,
.path h3,
.support-example h3 {
  margin: 0;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.24;
  text-wrap: balance;
}

.step p {
  margin: 0.9rem 0 0;
}

.ink-grid {
  display: grid;
  grid-template-columns: var(--site-shoulder) minmax(22rem, 1fr);
  gap: var(--site-gap);
}

.ink-grid p {
  margin-top: 0;
}

.page-hero {
  padding-block: clamp(3.5rem, 6vw, 6rem) clamp(3rem, 5vw, 5rem);
  border-bottom: 1px solid var(--site-line);
}

.page-hero__inner {
  container-type: inline-size;
}

.page-hero__inner::before {
  content: "";
  display: block;
  width: 3rem;
  height: 0.35rem;
  margin-bottom: clamp(1.6rem, 2.4vw, 2.4rem);
  background: var(--site-amber);
}

.page-hero h1 {
  max-width: 30ch;
  font-size: clamp(2.4rem, 1.5rem + 2.2vw, 3.8rem);
  line-height: 1.04;
}

.page-hero__lead {
  max-width: 36rem;
  margin: clamp(1.4rem, 2.2vw, 2rem) 0 0;
  color: var(--site-ink);
  font-size: var(--site-deck);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Our approach carries its illustration beside the copy: the same stack in the left column,
   the figure in the right, centred on the copy. */
.page-hero--figure .page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.8fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  column-gap: clamp(2.5rem, 5vw, 5rem);
  row-gap: 0;
}

.page-hero--figure .page-hero__inner::before {
  grid-row: 1;
  grid-column: 1;
}

.page-hero--figure .page-hero__inner h1 {
  grid-row: 2;
  grid-column: 1;
  max-width: 18ch;
}

.page-hero--figure .page-hero__lead {
  grid-row: 3;
  grid-column: 1;
}

.page-hero__figure {
  grid-row: 2 / -1;
  grid-column: 2;
  align-self: center;
  margin: 0;
}

.page-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.content-list {
  counter-reset: content-section;
}

.content-section {
  counter-increment: content-section;
  padding-block: clamp(4rem, 7vw, 6.8rem);
  border-bottom: 1px solid var(--site-line);
}

.content-section:nth-child(-n + 2) {
  background: var(--site-paper-blue);
}

.content-section:nth-child(n + 5) {
  background: var(--site-paper-warm);
}

.content-section:nth-child(2),
.content-section:nth-child(4),
.content-section:last-child {
  border-bottom: 0;
}

.content-section__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.4rem, 2.4vw, 2.4rem);
}

.content-section__grid:has(> .section-figure) {
  grid-template-columns: auto minmax(0, 1.05fr) minmax(16rem, 0.95fr);
}

.content-section__grid > .section-figure {
  grid-column: 3;
  align-self: end;
  margin: 0 0 0 clamp(1rem, 3vw, 3.5rem);
}

.content-section__index::before {
  content: counter(content-section, decimal-leading-zero);
  min-width: 2ch;
  line-height: 1.07;
}

/* One text width whether or not the section carries a figure (36.25rem is what the figure
   sections produce). A section without a figure puts its receive plate in the right column
   where the figure would sit, bottom edge on the last line of text, so the right half of the
   band is not dead. */
.content-section__body {
  max-width: 36.25rem;
}

.content-section__body:not(:has(> .section-figure)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: 0;
  max-width: none;
}

.content-section__body:not(:has(> .section-figure)) > * {
  grid-column: 1;
  max-width: 36.25rem;
  margin: 0 0 1.05rem;
}

.content-section__body:not(:has(> .section-figure)) > h2 {
  margin-bottom: 1.25rem;
}

.content-section__body:not(:has(> .section-figure)) > :last-child {
  margin-bottom: 0;
}

.content-section__body:not(:has(> .section-figure)) > .client-receives {
  grid-column: 2;
  grid-row: 2 / span 12;
  align-self: center;
  max-width: none;
  margin: 0;
}

.content-section__body:not(:has(> .section-figure)) > .text-link {
  margin-top: 0.6rem;
}

/* A figure inside a numbered section takes the right of the body instead of running
   under the text, so the section's evidence sits beside the words that name it and the
   wide right column stops being dead. Falls back to stacked below 64rem. */
.content-section__body:has(> .section-figure) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: 0;
  max-width: none;
}

/* Spacing lives on bottom margins rather than row-gap so the over-spanned figure's empty
   implicit rows cost nothing and its bottom edge lands on the last line of text. */
.content-section__body:has(> .section-figure) > * {
  grid-column: 1;
  max-width: var(--site-reading);
  margin: 0 0 1.05rem;
}

.content-section__body:has(> .section-figure) > h2 {
  margin-bottom: 1.25rem;
}

.content-section__body:has(> .section-figure) > .client-receives {
  margin-top: 0.5rem;
}

.content-section__body:has(> .section-figure) > :nth-last-child(2) {
  margin-bottom: 0;
}

.content-section__body:has(> .section-figure) > .section-figure {
  grid-column: 2;
  grid-row: 1 / span 12;
  align-self: end;
  max-width: none;
  margin: 0;
}

.content-section__body h2,
.content-section__index::before {
  font-size: var(--site-heading);
}

.content-section__body > p:first-of-type {
  margin-top: 1.25rem;
}

.content-section__body > p:last-child {
  margin-bottom: 0;
}

.client-receives {
  margin-top: 1.55rem;
  padding: 1.1rem 1.2rem;
  border-left: 0.25rem solid var(--site-amber);
  background: var(--site-white);
  color: var(--site-ink-soft);
}

.client-receives strong {
  color: var(--site-ink);
}

.proof-list,
.plain-list {
  margin: 1.25rem 0 1.4rem;
  padding: 0;
  list-style: none;
}

.split__body > :last-child,
.trust-item__body > :last-child {
  margin-bottom: 0;
}

/* A set, not a sequence and not a table: hanging square markers in ink, no rules. */
.proof-list li,
.plain-list li {
  position: relative;
  max-width: 38rem;
  padding-left: 1.4rem;
}

.proof-list li + li,
.plain-list li + li {
  margin-top: 0.55rem;
}

.proof-list li::before,
.plain-list li::before {
  content: "";
  position: absolute;
  top: 0.66em;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--site-ink);
}

.section--ink .proof-list li::before,
.section--ink .plain-list li::before {
  background: var(--site-white);
}

.principles {
  counter-reset: principle;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: clamp(1.5rem, 3vw, 3rem);
  padding-inline: max(var(--site-gutter), calc((100% - var(--site-max)) / 2 + var(--site-gutter)));
  background: var(--site-paper-blue);
}

.principle.site-shell {
  width: auto;
  margin: 0;
  padding-inline: 0;
}

.principle {
  counter-increment: principle;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(1.2rem, 2vw, 2rem);
  row-gap: 1.1rem;
  padding-block: clamp(2.6rem, 4vw, 3.8rem);
  border-bottom: 1px solid var(--site-line-strong);
}

.principle:nth-child(odd) {
  padding-right: clamp(2rem, 4vw, 4.5rem);
  border-right: 1px solid var(--site-line-strong);
}

.principle:nth-child(even) {
  padding-left: clamp(2rem, 4vw, 4.5rem);
}

.principle:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.principle::before {
  content: counter(principle, decimal-leading-zero);
  grid-row: 1 / span 2;
  min-width: 2ch;
  font-size: clamp(1.7rem, 1.1rem + 1.2vw, 2.3rem);
  line-height: 1.12;
}

.principle h2 {
  max-width: 22ch;
  font-size: clamp(1.7rem, 1.1rem + 1.2vw, 2.3rem);
  line-height: 1.12;
}

.principle p {
  grid-column: 2;
  max-width: 32rem;
  margin: 0;
}

.example-intro {
  display: grid;
  grid-template-columns: var(--site-shoulder) minmax(22rem, 1fr);
  gap: var(--site-gap);
}

.example-intro__body {
  max-width: var(--site-reading);
}

.paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.4rem);
  margin-top: clamp(3.2rem, 6vw, 5rem);
  border-top: 1px solid var(--site-line-strong);
}

.path {
  position: relative;
  padding: 2.2rem 0 0;
}

.path h3 {
  max-width: 16em;
}

.path p {
  margin: 0.9rem 0 0;
  text-wrap: pretty;
}

.recommendation {
  display: grid;
  grid-template-columns: var(--site-shoulder) minmax(20rem, 1fr);
  gap: var(--site-gap);
}

.support-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
  margin-top: clamp(2.6rem, 4vw, 3.6rem);
  border-top: 1px solid var(--site-line-strong);
}

.support-example {
  position: relative;
  padding: 2.4rem 0 0;
}

.support-example h3 {
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  line-height: 1.15;
}

.support-example p {
  max-width: 34rem;
  margin: 1.1rem 0 0;
  line-height: 1.7;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(19rem, 0.75fr) minmax(24rem, 1fr);
  gap: var(--site-gap);
  align-items: start;
}

.contact-form {
  padding: clamp(1.4rem, 4vw, 3rem);
  border: 1px solid var(--site-line-strong);
  border-radius: var(--radius-tile);
  background: var(--site-white);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.form-field {
  display: grid;
  gap: 0.45rem;
}

.form-field--wide {
  grid-column: 1 / -1;
}

.form-field label {
  color: var(--site-ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.form-field .optional {
  color: var(--site-ink-soft);
  font-weight: 500;
}

.form-control {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--site-line-strong);
  border-radius: var(--radius-control);
  background: var(--site-paper);
  color: var(--site-ink);
}

textarea.form-control {
  min-height: 9rem;
  resize: vertical;
}

.form-control:focus {
  outline: 3px solid rgba(49, 110, 150, 0.2);
  outline-offset: 1px;
  border-color: var(--site-blue);
  box-shadow: none;
}

.form-note {
  margin: 1rem 0 0;
  color: var(--site-ink-soft);
  font-size: 0.875rem;
  line-height: 1.55;
}

.form-submit {
  width: 100%;
  margin-top: 1.35rem;
}

.form-status {
  display: none;
  margin: 1.25rem 0 0;
  padding: 1rem;
  border: 1px solid var(--site-line);
  border-radius: var(--radius-control);
}

.form-status.is-visible {
  display: block;
}

.form-status--success {
  border-color: #91c2a9;
  background: #e6f3ec;
}

.form-status--error {
  border-color: #dda6a2;
  background: #fbeae8;
}

.form-status h2 {
  margin: 0;
  color: var(--site-ink);
  font-family: var(--font-body);
  font-size: 1.25rem;
}

.form-status p {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

/* The form band's left column: who answers, then the email route. One column of text at
   body size, no heading of its own (the page headline and the button already say start). */
.contact-aside {
  max-width: 24rem;
  font-size: var(--site-column-text);
  line-height: var(--site-column-leading);
}

.contact-aside > p:first-child {
  margin: 0;
  color: var(--site-ink);
}

.contact-aside h2 {
  margin: 2rem 0 0.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--site-line-strong);
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.contact-aside p {
  margin: 0;
}

.trust-list {
  border-top: 1px solid var(--site-line-strong);
}

/* The trust list shares the shoulder and gutter of every other heading-left grid, so its body
   column sits on the same spine as the closing and the sections on other pages. */
.trust-item {
  display: grid;
  grid-template-columns: var(--site-shoulder) minmax(22rem, 1fr);
  gap: var(--site-gap);
  padding-block: clamp(3.3rem, 5.5vw, 5rem);
  border-bottom: 1px solid var(--site-line);
}

.trust-item h2 {
  margin: 0;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

/* A plate attached to a trust item is that item's last word: the item gives up its rule and
   its bottom beat to the plate, and the rule is drawn under the plate instead. */
.trust-item:has(+ .section--figure-attached) {
  padding-bottom: var(--site-plate-gap);
  border-bottom: 0;
}

.trust-item + .section--figure-attached {
  padding-bottom: clamp(3.3rem, 5.5vw, 5rem);
  border-bottom: 1px solid var(--site-line);
}

.trust-item__body {
  max-width: var(--site-reading);
}

.trust-item__body p:first-child {
  margin-top: 0;
}

/* A second beat inside a band. The pull line and its paragraph follow the heading and its
   paragraphs under one rule, on the same grid, so the band carries an argument in two moves
   instead of the second move sitting alone on bare paper. */
.split--follow {
  margin-top: clamp(2.4rem, 3.6vw, 3.4rem);
  row-gap: clamp(2.2rem, 3.2vw, 3rem);
}

.split--follow::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: var(--site-line-strong);
}

.split--follow .pull-line {
  max-width: none;
  margin-left: -1.7rem;
  margin-right: calc(var(--site-shoulder-hang) * -1);
}

/* Two page previews side by side, each a heading over its paragraph and pointer, divided by
   one rule. Peers get equal geometry; this is the only place on Home that does. */
.previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview {
  padding-right: clamp(2rem, 4vw, 4.5rem);
}

.preview + .preview {
  padding-right: 0;
  padding-left: clamp(2rem, 4vw, 4.5rem);
  border-left: 1px solid var(--site-line-strong);
}

.preview h2 {
  max-width: 14em;
  margin: 0;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

.preview p {
  max-width: 32rem;
  margin: 1.2rem 0 0;
  font-size: var(--site-column-text);
  line-height: var(--site-column-leading);
}

.preview .text-link {
  margin-top: 1.4rem;
}

/* The chosen first move carries the site's decision mark beside its numeral. One signal, so
   the reader can see which option the recommendation below picks up without a label. */
.path--chosen .step__number {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.path--chosen .step__number::after {
  content: "";
  width: var(--site-mark);
  height: var(--site-mark);
  background: var(--site-amber);
}

/* The authority boundary as two lists. What the work does and what stays with people, side
   by side under one rule; the second list's markers are hollow, because those items are the
   ones the work does not touch. */
/* The boundary pair is a peer comparison and needs the full measure: at half a body column it
   orphaned single words while the shoulder beside it sat empty. Its section stacks the heading
   over the content instead of running a shoulder. */
.split--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 2.4vw, 2.2rem);
}

.split--stack > .section-heading {
  margin-right: 0;
  font-size: var(--site-heading);
}

.split--stack > .split__body {
  max-width: none;
}

.split--stack > .split__body > p {
  max-width: var(--site-reading);
}

.boundary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  max-width: 62rem;
  margin: 1.4rem 0 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--site-line-strong);
}

.boundary h3 {
  margin: 0 0 0.7rem;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.boundary .plain-list {
  margin: 0;
}

.boundary__side--people .plain-list li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--site-ink);
}

/* Questions and answers as a compact list: question in the shoulder, answer in the measure,
   a hairline between pairs and a shorter beat than a full section. */
.section--compact {
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.faq {
  border-top: 1px solid var(--site-line-strong);
}

.faq__item {
  display: grid;
  grid-template-columns: var(--site-shoulder) minmax(22rem, 1fr);
  column-gap: var(--site-gap);
  padding-block: clamp(1.7rem, 2.8vw, 2.4rem);
  border-bottom: 1px solid var(--site-line);
}

.faq__item h2 {
  max-width: 16em;
  margin: 0;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
}

.faq__item > div {
  max-width: var(--site-reading);
  font-size: var(--site-column-text);
  line-height: var(--site-column-leading);
}

.faq__item p {
  margin: 0 0 0.95em;
}

.faq__item p:first-child {
  color: var(--site-body-strong);
}

.faq__item p:last-child {
  margin-bottom: 0;
}

.legal-main {
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

.legal-copy {
  max-width: 52rem;
}

.legal-copy h1 {
  margin: 0;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.legal-copy h2 {
  margin: 3.2rem 0 1rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--site-line);
  color: var(--site-ink);
  font-size: 1.35rem;
}

.legal-copy li + li {
  margin-top: 0.6rem;
}

.meta {
  color: var(--site-blue);
  font-size: 0.82rem;
  font-weight: 700;
}

/* The closing is a strip: one statement, one action, centred on each other. The button sits
   at the right edge of the shell, where a strip's action belongs; the sections above it put
   their text on the spine, and the strip deliberately does not repeat that skeleton. */
.closing {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.2rem, 5.5vw, 5rem);
  background: var(--site-ink);
  color: #cdd8e1;
}

/* The register echo: the approved symbol, oversized to about 2.2 times the strip's height,
   cropped off the right and bottom edges, in the rail colour at ten percent, the same
   treatment as the LinkedIn cover. It sits behind the action; the action is opaque. */
.closing__echo {
  position: absolute;
  right: -4%;
  bottom: -55%;
  width: auto;
  height: 220%;
  color: #e6eef6;
  opacity: 0.1;
  pointer-events: none;
}

.closing__inner {
  position: relative;
}

.section--ink + .closing {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.closing__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--site-gap);
  container-type: inline-size;
}

.closing h2 {
  max-width: 28ch;
  color: var(--site-white);
  font-size: var(--site-closing-heading);
  line-height: 1.05;
}

.closing .button {
  justify-self: end;
}

.site-footer {
  padding-block: 3rem 1.6rem;
  border-top: 1px solid var(--site-line-strong);
  background: var(--site-paper-blue);
  color: var(--site-ink-soft);
}

main:has(> .closing:last-child) + .site-footer {
  border-top: 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(12rem, 1.45fr) repeat(3, minmax(8rem, 0.65fr));
  gap: 2.5rem;
}

/* The footer lockup. One object in two parts: the approved horizontal lockup, and the brand
   line beneath it. Everything about the line is stated in the lockup's own units, so the pair
   scales as one asset. --site-lockup-h is the lockup height. The wordmark's em is 0.769 of
   it (72 of the file's 93.6 units); the line is set at half that em, which makes its first
   line ("Make AI earn its place") span the lockup's width; the gap under the symbol is the
   wordmark's x-height (0.369, less the file's own bottom clearance and the line box's cap
   offset); the left edge is the symbol's, which is the site spine. Same face and weight as
   the wordmark (Outfit 500), letter-spacing zero, ink; the full stop is ink, so the
   wordmark's stop stays the only amber. A locked SVG of the pair carries this same geometry
   (see .site-footer__brand--line), so the choice between live text and a locked file is a
   rendering choice, not a design one. */
.site-footer__intro {
  --site-lockup-h: 3rem;
}

.site-footer__brand {
  --brand-lockup-height: var(--site-lockup-h);
  display: flex;
  width: fit-content;
}

/* The locked file variant: the lockup and the line as one SVG, 204.12 units tall against the
   lockup's 93.6, so the symbol renders at --site-lockup-h and the line at the size above. */
.site-footer__brand--line {
  --brand-lockup-height: calc(var(--site-lockup-h) * 2.181);
}

.site-footer__brand img {
  filter: none;
}

p.site-footer__line {
  max-width: 10em;
  margin: calc(var(--site-lockup-h) * 0.24) 0 0;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: calc(var(--site-lockup-h) * 0.385);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.15;
  text-wrap: wrap;
}

/* The strip variant: lockup, hairline, line, on one row. The line's two lines register to
   the lockup itself: cap top of the first on the symbol's top (0.033 of the height), baseline
   of the second on the wordmark's baseline (0.9). That span is 0.867 of the height; two lines
   at 1.15 leading are 1.85em, so the size is 0.4686 of the height. The rule spans the same
   extent, and the line stands off it by the lockup's own symbol-to-wordmark gap (0.423).
   Wraps to the stack when the row cannot hold it (narrow screens, enlarged text). */
.site-footer__intro--strip {
  --site-lockup-h: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: calc(var(--site-lockup-h) * 0.45);
}

.site-footer__intro--strip .site-footer__brand {
  margin-right: calc(var(--site-lockup-h) * 0.423);
}

.site-footer__intro--strip p.site-footer__line {
  position: relative;
  max-width: calc(10em + var(--site-lockup-h) * 0.423);
  margin: calc(var(--site-lockup-h) * 0.033 - 0.245em) 0 0;
  padding-left: calc(var(--site-lockup-h) * 0.423);
  font-size: calc(var(--site-lockup-h) * 0.4686);
}

.site-footer__intro--strip p.site-footer__line::before {
  content: "";
  position: absolute;
  top: 0.245em;
  bottom: 0.205em;
  left: 0;
  width: 1px;
  background: var(--site-line-strong);
}

.site-footer h2 {
  margin: 0 0 0.9rem;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0.7rem;
}

.site-footer a {
  color: var(--site-ink-soft);
  font-size: 0.9rem;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--site-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--site-line);
  font-size: 0.76rem;
}

body:has(.site-nav__link[href="/about/"][aria-current="page"]) {
  --site-section: clamp(3.6rem, 5.5vw, 5.5rem);
}

.not-found {
  min-height: calc(100svh - 5rem);
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.not-found__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr);
  align-items: center;
  gap: var(--site-gap);
}

.not-found__visual {
  min-width: 0;
  container-type: inline-size;
}

.not-found__code {
  display: flex;
  justify-content: center;
  color: var(--site-ink);
  font-family: var(--font-display);
  font-size: clamp(7rem, 48cqi, 24rem);
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.not-found__zero {
  display: inline-block;
  transform: translateY(0.07em) rotate(-12deg);
}

@supports (-webkit-text-stroke: 2px currentColor) {
  .not-found__zero {
    color: var(--site-paper);
    -webkit-text-stroke: 2px var(--site-ink);
  }
}

.not-found__accessible-code {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.not-found h1 {
  max-width: var(--site-reading);
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: pretty;
}

.not-found p {
  max-width: 34rem;
  margin: 1rem 0 0;
  font-size: 1.125rem;
}

/* The aside collapses before the other splits do. Its shoulder has to hold a legible
   illustration, not just a heading, and below about 1090px the shoulder squeezes the
   Worklines under the 400px they are drawn for. Stacked, the figure follows the text
   it supports at plate width. */
@media (max-width: 68rem) {
  .split--aside {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.6rem;
  }

  .split--aside > .section-heading,
  .split--aside > .split__body,
  .split--aside > .section-figure {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }

  .split--aside > .section-figure {
    width: min(100%, 36rem);
    margin-top: clamp(1.6rem, 2.4vw, 2.4rem);
  }

  .split--aside-lead > .split__body {
    margin-top: 0;
  }
}

@media (max-width: 64rem) {
  /* the hero figure variant collapses to one column with everything stacked */
  .page-hero--figure .page-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }

  .page-hero--figure .page-hero__inner h1 {
    max-width: 22ch;
  }

  .page-hero__figure {
    grid-row: 4;
    grid-column: 1;
    margin-top: clamp(2rem, 5vw, 3rem);
    max-width: 34rem;
  }

  :root {
    --site-shoulder-heading: clamp(2rem, 3.6cqi, 3.2rem);
  }

  .site-nav__panel {
    gap: 1rem;
  }

  .site-nav__links {
    gap: 1rem;
  }

  .site-nav__link {
    font-size: 0.82rem;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr);
    gap: 2.5rem;
  }

  .hero h1 {
    font-size: clamp(3rem, 12.5cqi, 4rem);
  }

  .content-section__body:has(> .section-figure),
  .content-section__body:not(:has(> .section-figure)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-section__body:not(:has(> .section-figure)) > .client-receives {
    grid-column: 1;
    grid-row: auto;
    max-width: 36.25rem;
    margin-top: 0.5rem;
  }

  .content-section__body:has(> .section-figure) > .section-figure {
    grid-column: 1;
    grid-row: auto;
    max-width: 42rem;
    margin-top: 1.6rem;
  }

  .principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .principle:nth-child(odd),
  .principle:nth-child(even) {
    padding-inline: 0;
    border-right: 0;
  }

  .principle:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--site-line-strong);
  }

  .principle:last-child {
    border-bottom: 0;
  }

  .principles:has(+ .section--figure-attached) .principle:last-child {
    border-bottom: 1px solid var(--site-line-strong);
  }

  .principle h2 {
    max-width: none;
  }

  .paths,
  .steps {
    grid-template-columns: 1fr;
    margin-top: 2.6rem;
  }

  .path,
  .step {
    padding: 2rem 0 2.2rem;
    border-bottom: 1px solid var(--site-line);
  }

  .step:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .step:not(:first-child)::after,
  .path:not(:first-child)::after {
    display: none;
  }

  .path h3 {
    max-width: none;
  }

  .path:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 52rem) {
  .site-header {
    background: var(--site-paper);
    backdrop-filter: none;
  }

  .not-found {
    min-height: calc(100svh - 4.5rem);
  }

  .not-found__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    max-width: 36rem;
  }

  .site-nav {
    min-height: 4.5rem;
    gap: 0.75rem;
  }

  .site-nav .site-nav__mobile-contact {
    display: inline-flex;
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-inline: 0.75rem;
  }

  .nav-toggle {
    display: block;
    flex: 0 0 auto;
  }

  .site-nav__panel {
    position: fixed;
    top: 4.5rem;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    overflow-y: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 2rem;
    padding: 2.2rem var(--site-gutter) 3rem;
    border-top: 1px solid var(--site-line);
    background: var(--site-paper);
  }

  .nav-open .site-nav__panel {
    display: flex;
  }

  html:not(.js) .site-nav {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 1.1rem;
  }

  html:not(.js) .site-header {
    position: static;
  }

  html:not(.js) .nav-toggle,
  html:not(.js) .site-nav__mobile-contact {
    display: none;
  }

  html:not(.js) .site-nav__panel {
    position: static;
    display: flex;
    width: 100%;
    padding: 0;
    border-top: 0;
  }

  .site-nav__links {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .site-nav__link {
    padding-block: 1rem;
    border-bottom: 1px solid var(--site-line);
    font-size: 1.15rem;
  }

  .site-nav__link::after {
    display: none;
  }

  .site-nav__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 1.3rem;
  }

  .site-nav__login::before {
    display: none;
  }

  .site-nav__login {
    align-self: flex-start;
    min-height: 2.75rem;
    padding-block: 0.7rem;
    font-size: 1rem;
  }

  .site-nav__actions .button {
    width: 100%;
  }

  .hero {
    min-height: auto;
  }

  .hero h1 {
    font-size: clamp(3rem, 7vw, 4.2rem);
  }

  :root {
    --site-shoulder-heading: var(--site-heading);
    --site-shoulder-hang: 0px;
    --site-reading: 37rem;
  }

  .recommendation > div,
  .ink-grid > div {
    max-width: var(--site-reading);
  }

  .split--follow .pull-line {
    margin-left: 0;
    margin-right: 0;
  }

  .support-example + .support-example::after {
    display: none;
  }

  .hero__grid,
  .split,
  .ink-grid,
  .example-intro,
  .recommendation,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .hero-figure {
    max-width: 42rem;
  }

  .content-section__grid,
  .trust-item {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .split:has(> .split__body > .section-figure) > :first-child {
    grid-row: auto;
    margin-bottom: var(--site-gap);
  }

  .trust-item:has(> .trust-item__body > .section-figure) > :first-child {
    grid-row: auto;
    margin-bottom: 1.2rem;
  }

  .split__body:has(> .section-figure) > *,
  .trust-item__body:has(> .section-figure) > * {
    grid-column: 1;
  }

  .split__body:has(> .section-figure) > .section-figure,
  .trust-item__body:has(> .section-figure) > .section-figure {
    grid-row: auto;
  }

  .split--aside > .section-heading,
  .split--aside > .split__body,
  .split--aside > .section-figure {
    grid-column: 1;
    grid-row: auto;
  }

  .content-section__grid {
    gap: 0.5rem;
  }

  .principle {
    gap: 1rem;
  }

  .closing__inner {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
  }

  .closing__echo {
    right: -12%;
    bottom: -40%;
    height: 170%;
  }

  .closing .button {
    justify-self: start;
  }

  .previews {
    grid-template-columns: 1fr;
  }

  .preview,
  .preview + .preview {
    padding-inline: 0;
    border-left: 0;
  }

  .preview + .preview {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--site-line-strong);
  }

  .faq__item {
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
  }

  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__intro {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .site-shell {
    padding-inline: 1.15rem;
  }

  .principles {
    padding-inline: 1.15rem;
  }

  .site-logo {
    --brand-lockup-height: 1.9rem;
  }

  .site-footer__intro {
    --site-lockup-h: 2.625rem;
  }

  .site-footer__intro--strip {
    --site-lockup-h: 2.125rem;
  }

  .hero {
    padding-block: 4.2rem 5.5rem;
  }

  .hero h1 {
    font-size: clamp(3rem, 15vw, 4.2rem);
  }

  .hero__lead {
    font-size: 1.1rem;
  }

  .hero__actions,
  .page-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions .button,
  .page-actions .button,
  .closing .button {
    width: 100%;
  }

  .boundary {
    grid-template-columns: 1fr;
    row-gap: 1.2rem;
  }

  :root {
    --site-heading: clamp(1.9rem, 8vw, 3rem);
  }

  .support-examples {
    grid-template-columns: 1fr;
  }

  .support-example + .support-example {
    margin-top: 1.8rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--site-line);
  }

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

  .form-field--wide {
    grid-column: auto;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__intro {
    grid-column: 1 / -1;
  }

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

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

}

@media print {
  .site-header,
  .site-footer,
  .button {
    display: none !important;
  }

  body.site-body {
    background: #fff;
    color: #000;
  }
}