/* The Preference Bureau site: the one stylesheet every page shares.
   Converted from the inline styles of design/website-comps/site/.
   Link components are written as a.name so they outrank the base a:hover rule, as inline styles did in the comps. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");
}

@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/literata-latin-opsz-italic.woff2) format("woff2");
}

body {
  margin: 0;
  background: #fff;
  color: #13293d;
  font-family: "Schibsted Grotesk", Arial, Helvetica, sans-serif;
  /* A word longer than its line breaks there instead of running past the side padding. Only a word that cannot fit
     is broken, and break-word (unlike anywhere) leaves the minimum size of a box alone, so nothing that fits today
     is laid out any differently. */
  overflow-wrap: break-word;
}

a { color: #13293d; }
a:hover { color: #b03a26; }

/* A column that lines its items up at the start (align-items: flex-start) sizes each item to its text, and the widest
   unbreakable word in that text is as narrow as the item can get. A word longer than the column therefore makes the
   item wider than the column, and overflow-wrap never gets the chance to break it. Capping the item at the column's
   width lets the word break. An item with a max-width of its own (a lede) says min(its measure, 100%) instead.
   A wordmark is the logo and is sized to fit its own text, so it is left as it is. */
:where(
  .hero__main,
  .hero__mark,
  .card,
  .message__inner,
  .note,
  .footer__brand,
  .longform__inner--intro,
  .about-hero__main,
  .about-hero__mark
) > :where(:not(.wordmark)) {
  max-width: 100%;
}

/* Type */

.serif,
h1 em,
h2 em {
  font-family: Literata, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
}

.eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.eyebrow--gold { color: #f4b53b; }
.eyebrow--rust { color: #b03a26; }

.wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: var(--fs, 19px);
  line-height: 1;
  white-space: nowrap;
}
.wordmark .serif { font-size: 1.06em; }

.stacked-wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 40px;
  line-height: 0.98;
  display: flex;
  flex-direction: column;
}
.stacked-wordmark .serif { font-size: 1.12em; }

/* Buttons */

a.button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 52px;
  /* The gold edge is invisible on the gold fill, and shows on a navy section once the fill inverts. It is
     there in both states, with the padding 2px short of the 26px the comps use, so the button never resizes. */
  padding: 0 24px;
  border: 2px solid #f4b53b;
  background: #f4b53b;
  color: #13293d;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  /* A label longer than the line wraps inside the button. The text of an inline-flex box is a flex item that cannot
     shrink below its longest word, which break-word does not shorten, so anywhere is what lets a long word break. */
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

a.button:hover,
a.button:focus-visible {
  background: #13293d;
  color: #f4b53b;
}

@media (prefers-reduced-motion: reduce) {
  a.button { transition: none; }
}

/* Header */

.site-header {
  position: relative;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid #e8e3d8;
  color: #13293d;
}

.site-header__inner {
  container-type: inline-size;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

/* The lockup is 19px type, a 26px logo and a 30px rule where it fits, as in the comps. It needs 354.8px, and
   the comps run past the side padding or scroll sideways below about 403px (59px over at 320px). So the type
   size is also capped by the room in the header: what is left of the container's width, less 30px (the
   29.5px of gaps and rule, and half a pixel to spare), divided by the 17.12 em the rest of the lockup
   measures at 1em of type. The logo and rule scale with it. */
a.brand {
  --fs: min(19px, calc((100cqw - 30px) * 0.0584));
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #13293d;
}

.brand__logo {
  height: calc(var(--fs) * 26 / 19);
  width: auto;
  display: block;
}

.brand__rule {
  display: block;
  width: 1.5px;
  height: calc(var(--fs) * 30 / 19);
  background: #13293d;
  opacity: 0.6;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 28px;
  max-width: 100%;
}

/* A label longer than the row breaks at its longest word, which only overflow-wrap: anywhere reaches inside an
   inline-flex box. */
a.nav__link,
a.nav__cta {
  overflow-wrap: anywhere;
}

a.nav__link,
button.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: #13293d;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
/* "page" is the page itself, and "true" is Services on a service page (the current page is inside it). */
a.nav__link[aria-current],
button.nav__link[aria-current] { border-bottom-color: #f4b53b; }

/* Services: a link to /services that assets/menu.js swaps for a button opening the menu. Both look the same. */
button.nav__link {
  /* A button is border-box by default and the links are content-box, so without this it is 2px shorter and its
     underline sits 1px higher than About's. */
  box-sizing: content-box;
  padding: 0;
  border-width: 0 0 2px;
  border-style: solid;
  border-color: transparent;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.svc__toggle { gap: 6px; }
.svc__chevron { flex: none; }

.svc { position: relative; }

/* The panel hangs under Services, above the page, and never wider than the room between the gutters (the header's
   content box is that room). It starts at the left edge of Services. assets/menu.js adds `svc--hang` while it is open
   where Services is far enough in from the left edge of that room (the nav shares the logo's row), and then the panel
   hangs 20px out to the left, so the items' text lines up with the word, as in the comps. Where Services is at the
   edge, because the nav wraps under the logo, or with JavaScript off, it does not. */
.svc__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  box-sizing: border-box;
  width: min(300px, 100cqw);
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #13293d;
}
.svc--hang .svc__menu { left: -20px; }
.svc--open .svc__menu { display: block; }

/* With JavaScript off there is no button, so the menu follows the pointer and keyboard focus instead. */
@media (scripting: none) {
  .svc:hover .svc__menu,
  .svc:focus-within .svc__menu { display: block; }
}

a.svc__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 20px;
  box-sizing: border-box;
  text-decoration: none;
  color: #13293d;
}
a.svc__item:hover { color: #b03a26; }
.svc__name {
  font-size: 15px;
  font-weight: 700;
}
.svc__note {
  font-size: 13px;
  line-height: 1.35;
  color: #5e5a52;
}

a.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  box-sizing: border-box;
  border: 1.5px solid #13293d;
  font-size: 15px;
  font-weight: 700;
  color: #13293d;
  text-decoration: none;
}

/* Hero */

.hero {
  background: #003a3d;
  color: #fff;
}

.hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 112px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px 64px;
}

.hero__main {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hero h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1.02;
}
.hero h1 em { color: #ff7a66; }

.hero__lede {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  max-width: min(620px, 100%);
  color: #d4e2e2;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 8px;
}

a.hero__link {
  min-width: 0;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.hero__mark {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 40px 0;
}
.hero__mark .serif { color: #f4b53b; }

.hero__bar {
  display: block;
  width: 56px;
  height: 6px;
  background: #f4b53b;
}

.hero__tagline {
  font-family: Literata, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
}
.coral { color: #ff7a66; }

/* Home: the sections below the hero */

.eyebrow--sm { font-size: 12px; }
.eyebrow--muted { color: #5e5a52; }

/* 24px type where it fits. The wordmark does not wrap, and the card's content (its width less 83px of
   padding and border) is 9.4 em wide at the narrowest, so below about 355px the type shrinks to fill it. */
.wordmark--lg { --fs: min(24px, calc(100cqw / 9.4)); }

/* Sections paint white unless they set their own background, as in the comps. A coloured section above
   ends on a fractional pixel at some widths, and an opaque white one covers that row instead of letting
   the body show through it. */
main > section { background: #fff; }

.section--sand {
  background: #e6e0d1;
  color: #13293d;
}
.section--ruled { border-top: 1px solid #e8e3d8; }

.section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.section__inner--tight { gap: 40px; }

/* Two columns that wrap, with no padding above: the heading follows the section before it. */
.section__inner--split {
  padding: 0 24px 96px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 48px 72px;
}

/* Text on the left, one link or a call to action pinned to the bottom right. */
.section__inner--aside {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 64px;
}

.section__head {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.section__head--wide { max-width: 760px; }

.section__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

/* Section headings; the italic serif phrase in them is coloured here, its face is set under Type. */
.section-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
}
.section-title em { color: #b03a26; }
.section-title--xl {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.04;
}

.body-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}
.body-text--lg { font-size: 18px; }
.body-text--xl {
  font-size: 19px;
  max-width: 640px;
  color: #3f3b35;
}
.body-text--sm { font-size: 16px; }
.body-text--soft { color: #3f3b35; }
.body-text--note {
  color: #3f3b35;
  max-width: 760px;
}
.body-text--measure { max-width: 640px; }

a.link {
  /* In a row that wraps, a link shrinks to the row, so a long label wraps inside it. */
  min-width: 0;
  font-weight: 700;
  font-size: 16px;
}
a.link--sm { font-size: 15px; }
a.link--ink { color: #13293d; }
a.link--push { margin-top: auto; }
a.link--fixed {
  flex: 0 0 auto;
  /* It keeps its text's width, unless that is wider than the row: then it wraps there. */
  max-width: 100%;
}

/* Who we are */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}

.card {
  container-type: inline-size;
  border: 1.5px solid #13293d;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.card__logo {
  height: 30px;
  width: auto;
  display: block;
}

.card__title,
.step__title,
.insight__title {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
}
.step__title,
.insight__title { line-height: 1.25; }

.band {
  background: #e6e0d1;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
}

.band__lead {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.band__title {
  margin: 0;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
}

.band__body {
  flex: 999 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A line with a gold dot on it, a progress marker. */

.track {
  position: relative;
  height: 12px;
}
.track--short { max-width: 520px; }

.track__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  background: #13293d;
}

.track__dot {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f4b53b;
}
.track__dot--at-start { left: 0; }
.track__dot--at-18 { left: 18%; }
.track__dot--at-32 { left: 32%; }
.track__dot--at-33 { left: 33%; }
.track__dot--at-64 { left: 64%; }
.track__dot--at-66 { left: 66%; }
.track__dot--at-end { right: 0; }

/* The real competition, and who we work with: a text column beside a second column. */

.split__main {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.split__side {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.split__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.weigh-list {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.weigh-list__label { padding-bottom: 16px; }

.weigh {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid #13293d;
}
.weigh:last-child { border-bottom: 1px solid #13293d; }

.weigh__num {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: #13293d;
  color: #f4b53b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
}

.weigh__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weigh__title {
  font-weight: 700;
  font-size: 20px;
}

.weigh__text {
  font-size: 16px;
  line-height: 1.5;
  color: #3f3b35;
}

/* What we believe, and the closing call to action */

.aside__main {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.aside__main--cta { gap: 18px; }

.cta__aside {
  margin: 0;
  font-size: 15px;
  color: #5e5a52;
}

a.cta__openings {
  color: #13293d;
  font-weight: 600;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* How we work */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 32px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Who we work with */

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  min-width: 0;
  border: 1.5px solid #13293d;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
}

/* Co-founders */

.founders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 40px;
}

.founder {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.founder__photo {
  flex: 0 0 auto;
  width: 220px;
  height: 275px;
  object-fit: cover;
  display: block;
}
.founder__photo--top { object-position: center top; }

.founder__body {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.founder__name {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}

.founder__role {
  font-size: 14px;
  font-weight: 600;
  color: #5e5a52;
  line-height: 1.45;
}

/* Latest insights: linked cards for published articles, dashed "Coming next" cards for planned ones. */

.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}

.insight {
  background: #fff;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.insight--planned {
  background: none;
  border: 1.5px dashed #5e5a52;
}

a.insight__link {
  color: #13293d;
  text-decoration: none;
}
a.insight__link:hover { text-decoration: underline; }

.insight__meta {
  font-size: 13px;
  color: #5e5a52;
  margin-top: auto;
}

.disclaimer {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #13293d;
  font-size: 13px;
  line-height: 1.5;
  color: #5e5a52;
}

/* Insights: the featured article with its source card, the archive of cards, and how the articles are written. */

/* The Insights hero is wider than Contact's, and 64px short below because it has no search form under the text. The
   archive has no padding below it: the 72px above "How we write" is the space between them. */
.page-hero.page-hero--wide h1 { max-width: 920px; }
.page-hero--wide .page-hero__inner { padding-bottom: 64px; }

.feature {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: stretch;
}
.feature__main {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.feature__title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.06;
}
.feature__title em { color: #b03a26; }
a.feature__link {
  color: #13293d;
  text-decoration: none;
}
.feature__intro { line-height: 1.6; }
.feature__byline {
  font-size: 14px;
  color: #5e5a52;
}

/* The featured source card is the article page's, bordered a little more loosely and set beside the article. */
.source-card.source-card--feature {
  flex: 1 1 340px;
  min-width: 0;
  padding: 28px;
  gap: 14px;
  align-self: flex-start;
}
.source-card--feature .source-card__title { font-size: 18px; }
.source-card--feature .source-card__read { padding-top: 12px; }
.source-card--feature .source-card__text { line-height: 1.55; }

.archive__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* With no featured article the archive follows the hero directly, so it needs space above its rule. */
.page-hero + .archive .archive__inner { padding-top: 72px; }
.archive__title {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid #13293d;
  font-weight: 700;
  font-size: 24px;
}
.insight-grid--archive .insight:not(.insight--planned) { background: #e6e0d1; }

.standards {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 72px;
}
.standards__title {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
}
.standards__list {
  flex: 999 1 640px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 24px;
}
.standards__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #13293d;
  padding-top: 14px;
}
.standards__name {
  font-weight: 700;
  font-size: 17px;
}
.standards__text {
  font-size: 15px;
  line-height: 1.55;
  color: #3f3b35;
}

/* Message pages (404) */

.message__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.message h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
  max-width: min(760px, 100%);
}
.message h1 em { color: #b03a26; }

.message__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  max-width: min(640px, 100%);
}

/* Page hero (Contact) */

.page-hero { background: #e6e0d1; }

.page-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px 72px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.page-hero__bar {
  display: block;
  width: 56px;
  height: 6px;
  background: #f4b53b;
}

.page-hero h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.04;
  max-width: 860px;
}
.page-hero h1 em { color: #b03a26; }

.page-hero__lede {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  max-width: 700px;
}

/* Contact: the note panel and the details column */

.contact { background: #fff; }

.contact__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 96px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px 72px;
}

.note {
  flex: 999 1 600px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 36px 32px;
  border: 1.5px solid #13293d;
}
.note h2 {
  margin: 0;
  font-weight: 700;
  font-size: 26px;
}
.note__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  max-width: min(560px, 100%);
}
.note__candidates {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #5e5a52;
}

.details {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.details__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #13293d;
  padding-top: 18px;
}

.details__block--people { gap: 14px; }

.details__label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #5e5a52;
}

a.details__phone {
  font-weight: 800;
  font-size: 30px;
  text-decoration: none;
}
a.details__email { font-size: 16px; }

a.cofounder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 52px;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 1.5px solid #13293d;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.cofounder__focus {
  font-size: 14px;
  color: #5e5a52;
  font-weight: 500;
}

.details__offices {
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
}
.details__quiet { color: #5e5a52; }

/* What happens next (Contact) */

.next {
  background: #003a3d;
  color: #fff;
}

.next__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.next h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
}
.next h2 em { color: #ff7a66; }

.next .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.next .step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-top: 16px;
}
.next .step__number {
  font-weight: 800;
  font-size: 15px;
  color: #f4b53b;
}
.next .step__title {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
}
.next .step__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #d4e2e2;
}

/* Footer */

.site-footer {
  background: #003a3d;
  color: #fff;
  font-family: "Schibsted Grotesk", Arial, Helvetica, sans-serif;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
  justify-content: space-between;
}

.footer__brand {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 360px;
}
.stacked-wordmark--footer { font-size: 34px; }

.footer__tagline {
  font-family: Literata, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: #b9cfcf;
}

.footer__rule {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.footer__powered {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #b9cfcf;
  /* The words are a flex item beside the logo, and break-word does not let an item shrink below its longest word. */
  overflow-wrap: anywhere;
}
.footer__powered img {
  height: 22px;
  width: auto;
  display: block;
}

.footer__nav {
  flex: 999 1 560px;
  display: grid;
  gap: 32px;
}

/* The team address is 228px wide at 15px, more than the comp's 160px columns (173px at 1440px), so it
   breaks after the @. Its domain is 181px wide and has to fit, so the columns are at least 184px wide. The
   comp starts its fourth column at 1148px; here it starts at 1172px, where columns of at least 160, 160,
   160 and 184px fit, and the Contact column is the wide one. */
.footer__nav { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
@media (min-width: 1172px) {
  .footer__nav { grid-template-columns: repeat(3, minmax(160px, 1fr)) minmax(184px, 1.2fr); }
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__column .eyebrow { font-size: 12px; }

a.footer__link {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
}

.footer__note {
  font-size: 15px;
  color: #b9cfcf;
  line-height: 1.5;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #b9cfcf;
}

.footer__legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  min-width: 0;
}
.footer__legal a {
  min-width: 0;
  color: #b9cfcf;
}

/* Services */

.services-hero { background: #e6e0d1; }

.services-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px 72px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.services-hero__bar {
  display: block;
  width: 56px;
  height: 6px;
  background: #f4b53b;
}

.services-hero h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.04;
  max-width: 900px;
}
.services-hero h1 em { color: #b03a26; }

.services-hero__lede {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  max-width: 720px;
}

.jump { margin-top: 16px; }
.jump ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid #13293d;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  /* The text of an inline-flex box is a flex item that cannot shrink below its longest word, which break-word does
     not shorten. anywhere does, so a chip in a narrow column wraps its text instead of running past it. */
  overflow-wrap: anywhere;
}

/* One section per service. The rule and gold dot above each sit further along the page's story: the dot
   starts at the left edge for Research and ends at the right edge for Hire. */

.service { background: #fff; }

.service__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.service--research .service__inner { padding-top: 96px; padding-bottom: 72px; }
.service--hire .service__inner { padding-top: 72px; padding-bottom: 96px; }

.service__track {
  position: relative;
  height: 12px;
}
.service__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  background: #13293d;
}
.service__dot {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f4b53b;
}
.service--research .service__dot { left: 0; }
.service--position .service__dot { left: 33%; }
.service--attract .service__dot { left: 66%; }
.service--hire .service__dot { right: 0; }

.service__body {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
}

.service__lead,
.service__side {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.service__lead { gap: 18px; }
.service__side--roles { gap: 12px; }

.service h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.08;
}
.service h2 em { color: #b03a26; }

.service__question,
.service__intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.service__note {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #3f3b35;
}
.service__note strong { color: #13293d; }

/* The links from a service's section to its own page (and, in Attract's, to Candidate Experience's). */
.service__links {
  /* The links' 44px tap boxes centre their text, so pull the row up and down 12px: the text then sits the column's 18px below the paragraph above and the layout's gap above what follows, and the tap area stays. */
  margin: -12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}
.service__links a.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.service__label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #5e5a52;
}
.service__label + .service__list { margin-top: 12px; }

.service__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service__list li {
  padding: 16px 0;
  border-top: 1px solid #13293d;
  font-size: 17px;
  line-height: 1.5;
}
.service__list li:last-child { border-bottom: 1px solid #13293d; }

.service__roles {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

.service__also {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5e5a52;
}

.medsearch-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 8px;
}
.medsearch-link__logo { display: block; }
.medsearch-link__logo img { display: block; max-width: 100%; height: auto; }

.process {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.process h3 {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
}
.process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.process__steps li {
  background: #e6e0d1;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.process__number {
  font-weight: 800;
  font-size: 15px;
  color: #b03a26;
}
.process__name {
  font-weight: 700;
  font-size: 20px;
}
.process__text {
  font-size: 14px;
  line-height: 1.5;
}

/* Ways to work with us */

.start {
  background: #003a3d;
  color: #fff;
}

.start__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px 64px;
}

.start__text {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.start h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
}
.start h2 em { color: #ff7a66; }

.start p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #d4e2e2;
  max-width: 640px;
}

/* FAQ */

.faq__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
}

.faq__head {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.1;
}
.faq h2 em { color: #b03a26; }

.faq__list {
  flex: 999 1 640px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.faq__list > div {
  padding: 22px 0;
  border-top: 1px solid #13293d;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq__list > div:last-child { border-bottom: 1px solid #13293d; }
.faq__list dt {
  font-weight: 700;
  font-size: 20px;
}
.faq__list dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

/* Service pages (#52): the hero, the problem and its signs, the table of assumptions, the steps, what you can decide,
   the questions (the .faq above) and the link on to the next service. */

.sv-hero {
  background: #13293d;
  color: #fff;
}
.sv-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sv-hero__bar {
  display: block;
  width: 56px;
  height: 6px;
  background: #f4b53b;
}
.sv-hero .crumb {
  font-size: 14px;
  font-weight: 600;
}
.sv-hero .crumb a { color: #fff; }
.sv-hero .crumb a:hover { color: #f4b53b; }
.sv-hero h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.04;
  max-width: 900px;
}
.sv-hero h1 em { color: #ff7a66; }
.sv-hero__lede {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  max-width: 720px;
}

.sv-problem__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 24px 72px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
}
.sv-problem__text,
.sv-problem__signs {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sv-problem__text { gap: 18px; }
.sv-problem h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.08;
}
.sv-problem h2 em { color: #b03a26; }
.sv-problem__p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.sv-test__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sv-test h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.1;
}
.sv-test h2 em { color: #b03a26; }

/* The comp's table scrolls sideways below 640px. A box that runs past the gutters is a layout bug here, so the table
   keeps to the page and its columns narrow instead. */
.sv-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
.sv-table thead th {
  /* The 38% (44% below 640px) is the whole column, padding included, as in the comp. */
  box-sizing: border-box;
  padding: 0 24px 12px 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #5e5a52;
}
.sv-table thead th:first-child { width: 38%; }
.sv-table tbody tr { border-top: 1px solid #13293d; }
.sv-table tbody tr:last-child { border-bottom: 1px solid #13293d; }
.sv-table tbody th {
  padding: 20px 24px 20px 0;
  font-family: Literata, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  vertical-align: top;
  overflow-wrap: break-word;
}
.sv-table td {
  padding: 20px 0;
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
@media (max-width: 639px) {
  .sv-table thead th:first-child { width: 44%; }
  .sv-table thead th,
  .sv-table tbody th { padding-right: 16px; }
  .sv-table tbody th { font-size: 17px; }
  .sv-table td { font-size: 16px; }
}

.sv-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  padding-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #3f3b35;
}
.sv-evidence > strong {
  flex: 1 1 220px;
  color: #13293d;
}
.sv-evidence p {
  flex: 999 1 560px;
  min-width: 0;
  margin: 0;
}
.sv-evidence p strong { color: #13293d; }

.sv-run__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 96px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sv-run__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
}
/* min-width: 0 lets a word too long for the line break inside its box instead of holding the box wider than the page. */
.sv-run h2,
.sv-run__timing { min-width: 0; }
.sv-run h2 {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
}
.sv-run__timing {
  font-size: 15px;
  color: #5e5a52;
}
.sv-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.sv-steps li {
  background: #e6e0d1;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-steps__number {
  font-weight: 800;
  font-size: 15px;
  color: #b03a26;
}
.sv-steps__name {
  font-weight: 700;
  font-size: 22px;
}
.sv-steps__text {
  font-size: 16px;
  line-height: 1.5;
}
.sv-steps__ask {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #3f3b35;
}

.sv-decide {
  background: #003a3d;
  color: #fff;
}
.sv-decide__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 72px;
}
.sv-decide h2 {
  flex: 1 1 440px;
  min-width: 0;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.06;
}
.sv-decide h2 em { color: #ff7a66; }
.sv-decide__list {
  flex: 1 1 440px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sv-decide__list li {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 19px;
  line-height: 1.45;
}
.sv-decide__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.35); }

.sv-faq .faq__inner { padding: 88px 24px; }

.sv-next { background: #e6e0d1; }
.sv-next__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px 64px;
}
.sv-next h2 {
  flex: 999 1 560px;
  min-width: 0;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
}
.sv-next h2 em { color: #b03a26; }

/* Position, Attract and Candidate Experience (#53) build on the Research page above: the same hero, steps, questions
   and link on, and the pieces the three share (the intro with its larger problem, the journey of stops, the research
   band). */

.sv-hero--position h1 {
  font-size: clamp(40px, 4.8vw, 60px);
  line-height: 1.05;
  max-width: 960px;
}

/* The larger problem: the text, then a table (Position) or a row of stops (Attract and Candidate Experience). */
.sv-intro__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 24px 72px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sv-intro--mission .sv-intro__inner { padding-bottom: 80px; }
.sv-intro__text {
  min-width: 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sv-intro h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.08;
}
.sv-intro h2 em { color: #b03a26; }
.sv-intro__p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}
.sv-intro h3 {
  margin: 16px 0 0;
  font-weight: 700;
  font-size: 26px;
}

/* What the mission says against what the candidate is asking (Position). The comp scrolls this sideways below 640px;
   a box that runs past the gutters is a layout bug here, so the two columns stay and narrow instead. */
.sv-compare {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
.sv-compare thead th {
  box-sizing: border-box;
  padding: 20px 28px;
  background: #e6e0d1;
  color: #4a4640;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.sv-compare thead th:last-child {
  background: #13293d;
  color: #f4b53b;
}
.sv-compare tbody th,
.sv-compare tbody td {
  padding: 22px 28px;
  font-size: 18px;
  line-height: 1.45;
  vertical-align: top;
  overflow-wrap: break-word;
}
.sv-compare tbody th {
  background: #e6e0d1;
  border-top: 1px solid rgba(19, 41, 61, 0.25);
  font-weight: 400;
}
.sv-compare tbody td {
  background: #13293d;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-weight: 600;
}
@media (max-width: 639px) {
  .sv-compare thead th,
  .sv-compare tbody th,
  .sv-compare tbody td { padding-left: 14px; padding-right: 14px; }
  .sv-compare tbody th,
  .sv-compare tbody td { font-size: 16px; }
}

/* The stops a candidate passes (Attract and Candidate Experience): a short line with a gold dot over each, the line
   running on into the gap to the next stop so the stops read as one path. A stop that ends its row, or stands alone
   when they stack, stops its line at the edge of the page content: a line left running on would sit in the side gutter.
   Which stops end a row follows how many columns fit, so the columns are counted here by the width of the section's
   content (a container query) rather than left to the grid to work out. */
.sv-intro__inner { container-type: inline-size; }
.sv-journey {
  --join: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px var(--join);
}
.sv-journey--six {
  --join: 16px;
  gap: 24px 16px;
}
.sv-journey li {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-journey__line {
  position: relative;
  display: block;
  height: 12px;
}
.sv-journey__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  background: #13293d;
}
.sv-journey__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f4b53b;
}
.sv-journey__name {
  padding-top: 6px;
  font-weight: 700;
  font-size: 19px;
}
.sv-journey--six .sv-journey__name { font-size: 18px; }
.sv-journey__question {
  font-family: Literata, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
}
.sv-journey__text {
  font-size: 15px;
  line-height: 1.5;
  color: #3f3b35;
}
/* Five stops fit n across when the content is 210n - 20px wide (190px each, 20px between). */
@container (min-width: 400px) and (max-width: 609.98px) {
  .sv-journey--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-journey--five li:not(:nth-child(2n), :last-child) .sv-journey__rule { right: calc(-1 * var(--join)); }
}
@container (min-width: 610px) and (max-width: 819.98px) {
  .sv-journey--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-journey--five li:not(:nth-child(3n), :last-child) .sv-journey__rule { right: calc(-1 * var(--join)); }
}
@container (min-width: 820px) and (max-width: 1029.98px) {
  .sv-journey--five { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-journey--five li:not(:nth-child(4n), :last-child) .sv-journey__rule { right: calc(-1 * var(--join)); }
}
@container (min-width: 1030px) {
  .sv-journey--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sv-journey--five li:not(:last-child) .sv-journey__rule { right: calc(-1 * var(--join)); }
}
/* Six stops fit n across when the content is 186n - 16px wide (170px each, 16px between). */
@container (min-width: 356px) and (max-width: 541.98px) {
  .sv-journey--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-journey--six li:not(:nth-child(2n), :last-child) .sv-journey__rule { right: calc(-1 * var(--join)); }
}
@container (min-width: 542px) and (max-width: 727.98px) {
  .sv-journey--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-journey--six li:not(:nth-child(3n), :last-child) .sv-journey__rule { right: calc(-1 * var(--join)); }
}
@container (min-width: 728px) and (max-width: 913.98px) {
  .sv-journey--six { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-journey--six li:not(:nth-child(4n), :last-child) .sv-journey__rule { right: calc(-1 * var(--join)); }
}
@container (min-width: 914px) and (max-width: 1099.98px) {
  .sv-journey--six { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sv-journey--six li:not(:nth-child(5n), :last-child) .sv-journey__rule { right: calc(-1 * var(--join)); }
}
@container (min-width: 1100px) {
  .sv-journey--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sv-journey--six li:not(:last-child) .sv-journey__rule { right: calc(-1 * var(--join)); }
}

/* Position: the two gaps, beside the list of what goes into the brief. */
.sv-gaps__inner,
.sv-visibility__inner,
.sv-tech__inner,
.sv-get__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sv-gaps h2,
.sv-visibility h2,
.sv-tech h2,
.sv-get h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.1;
}
.sv-gaps h2 em,
.sv-visibility h2 em,
.sv-tech h2 em,
.sv-get h2 em { color: #b03a26; }
.sv-gaps__split {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
}
.sv-gaps__lead,
.sv-gaps__brief {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sv-gaps__lead { gap: 24px; }
.sv-gaps__gap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-gaps__gap h3 {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
}
.sv-gaps__gap p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

/* Position: what the research suggests, on a teal band (the comp's .onfield, whose links are white). */
.sv-field {
  margin-bottom: 88px;
  background: #003a3d;
  color: #fff;
}
.sv-field a { color: #fff; }
.sv-field a:hover { color: #f4b53b; }
.sv-field__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.sv-field__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 40px 72px;
}
.sv-field__title {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sv-field h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.06;
}
.sv-field h2 em { color: #ff7a66; }
.sv-field__figure {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sv-field__number {
  font-weight: 800;
  font-size: clamp(72px, 8vw, 112px);
  line-height: 0.95;
  color: #f4b53b;
}
.sv-field__caption {
  font-size: 16px;
  line-height: 1.4;
  color: #d4e2e2;
}
.sv-field__findings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px 40px;
}
.sv-field__findings > div {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-field__name {
  font-weight: 700;
  font-size: 20px;
}
.sv-field__text {
  font-size: 16px;
  line-height: 1.55;
  color: #d4e2e2;
}
.sv-field__sources {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #d4e2e2;
}

/* Attract: why visibility is evidence, beside the three habits. */
.sv-visibility__split {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 72px;
}
.sv-visibility__lead {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sv-visibility__p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}
.sv-visibility__list {
  flex: 999 1 520px;
  min-width: 0;
}

/* Candidate Experience: what you get, as cards. */
.sv-get__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px;
}
.sv-get__list li {
  min-width: 0;
  background: #e6e0d1;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-get__name {
  font-weight: 700;
  font-size: 21px;
}
.sv-get__text {
  font-size: 16px;
  line-height: 1.5;
}

/* Candidate Experience: where technology helps, and where it does not. */
.sv-tech__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px 40px;
}
.sv-tech__columns > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sv-tech__columns .service__label + .service__list { margin-top: 0; }
.sv-tech__columns .service__label { padding-bottom: 12px; }
.sv-tech__columns .service__list li {
  padding: 14px 0;
  line-height: normal;
}
.sv-tech__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #3f3b35;
}

/* The steps of Candidate Experience are four, in narrower cards, and a line under them says what is tracked. */
.sv-run--four .sv-steps { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.sv-run--four .sv-steps li { padding: 24px; }
.sv-run__track {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Long-form text: the article page's header and 760px body column (18px text at 1.7, 28px section headings).
   Privacy, Terms and Accessibility have no comp, so they are this column without the side rail; an article adds
   the rules under "Articles" below. */

.longform__inner {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
.longform__inner--intro {
  padding: 40px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.longform__inner--body { padding: 0 24px 96px; }

.longform__bar {
  display: block;
  width: 56px;
  height: 6px;
  background: #f4b53b;
  margin-top: 24px;
}

.longform h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(40px, 4.8vw, 62px);
  line-height: 1.04;
  max-width: min(960px, 100%);
}
.longform h1 em { color: #b03a26; }

.longform__lede {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  max-width: min(760px, 100%);
}

.longform__meta {
  margin: 0;
  align-self: stretch;
  border-top: 1px solid #e8e3d8;
  padding-top: 16px;
  font-size: 14px;
  color: #5e5a52;
}

.longform__body {
  /* In an article this column sits beside the side rail and wraps below it (the flex line); in a legal page it is
     in a block, where these two do nothing. */
  flex: 999 1 640px;
  min-width: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 46px;
  font-size: 18px;
  line-height: 1.7;
}
.longform__body section {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.longform__body h2 {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
}
.longform__body p { margin: 0; }
.longform__body ul {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.longform__body a[href^="tel:"] { white-space: nowrap; }

/* Articles: the long-form header and column above, a side rail beside the column, then the call to action and
   "Keep reading" bands. Rules for what an article's Markdown can hold (steps, a pull quote) are scoped to
   .longform__body, and the sections the layout adds (the short answer, related questions, references) to a
   class inside it, which wins over the generic section and heading rules by specificity. */

.crumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: #5e5a52;
}
.crumbs a { color: #5e5a52; }
/* The items of a row that wraps shrink to the row, so a long label wraps inside it. */
.crumbs > li,
.article__byline > * {
  min-width: 0;
}

.article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
a.article__author {
  color: #13293d;
  font-weight: 600;
}

.article__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
  align-items: flex-start;
}

.longform__body .answer {
  border: 1.5px solid #13293d;
  background: #e6e0d1;
  padding: 28px 32px;
  gap: 10px;
}
.longform__body .answer__heading {
  font-size: 13px;
  line-height: inherit;
  letter-spacing: 0.14em;
  color: #b03a26;
}
.longform__body .answer__text {
  font-size: 19px;
  line-height: 1.6;
}

.longform__body figure {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.longform__body blockquote {
  margin: 0;
  font-family: Literata, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  color: #b03a26;
}
.longform__body figcaption {
  font-size: 14px;
  color: #5e5a52;
}

/* A numbered list is a row per step: the number in a navy square, drawn by the list's counter. */
.longform__body ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
}
.longform__body ol > li {
  counter-increment: step;
  position: relative;
  min-height: 40px;
  padding: 16px 0 16px 58px;
  border-top: 1px solid #13293d;
}
.longform__body ol > li:last-child { border-bottom: 1px solid #13293d; }
.longform__body ol > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 16px;
  left: 0;
  width: 40px;
  height: 40px;
  background: #13293d;
  color: #f4b53b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}

.longform__body .questions { gap: 0; }
.longform__body .questions h2 { margin-bottom: 12px; }
.questions__item {
  padding: 18px 0;
  border-top: 1px solid #13293d;
}
.questions__item:last-child { border-bottom: 1px solid #13293d; }
.longform__body .questions h3 {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 19px;
}
.longform__body .questions p {
  font-size: 17px;
  line-height: 1.6;
}

.longform__body .refs {
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
}
.longform__body .refs h2 {
  font-size: 22px;
  line-height: inherit;
}
.longform__body .refs__note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #13293d;
  font-size: 14px;
  color: #5e5a52;
}

.rail {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rail__contents {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rail__label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #5e5a52;
}
.rail__label--rust { color: #b03a26; }
a.rail__link {
  font-size: 15px;
  text-decoration: none;
}

.source-card {
  border: 1.5px solid #13293d;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.source-card__kicker {
  font-size: 13px;
  color: #5e5a52;
}
.source-card__title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
}
.source-card__method {
  font-size: 14px;
  line-height: 1.5;
  color: #3f3b35;
}
.source-card__read {
  border-top: 1px solid #13293d;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.source-card__text {
  font-size: 15px;
  line-height: 1.5;
}

.share {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
a.share__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid #13293d;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  /* As on a.button: the text of an inline-flex box only shrinks below its longest word with anywhere. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.article-cta {
  background: #003a3d;
  color: #fff;
}
.article-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px 64px;
}
.article-cta__main {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-cta h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
}
.article-cta h2 em { color: #ff7a66; }
.article-cta p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #d4e2e2;
}

.keep { background: #e6e0d1; }
.keep__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.keep h2 {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
}
.keep__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.keep__card {
  background: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* A "Coming next" card: the Home page's dashed outline, with the padding short by the border's width so the card is the same size. */
.keep__card--planned {
  background: none;
  border: 1.5px dashed #5e5a52;
  padding: 26.5px;
}
.keep h3 {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}
.keep h3 a {
  color: #13293d;
  text-decoration: none;
}
.keep h3 a:hover { text-decoration: underline; }

/* About */

.about-hero { background: #e6e0d1; }

.about-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 56px 64px;
}

.about-hero__main {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.about-hero__bar {
  display: block;
  width: 56px;
  height: 6px;
  background: #f4b53b;
}

.about-hero h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.04;
}
.about-hero h1 em { color: #b03a26; }

.about-hero__lede {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  max-width: min(660px, 100%);
}

.about-hero__mark {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* The wordmark is 30px type in the comp, 332px wide, in a column the comp sizes at 300px, so it pokes out of
   the column by 32px. At 320px wide it also runs 36px past the side padding, and from about 970px to 1260px
   wide the column is the last thing in the row and the overflow runs into the padding too. So the type is
   sized to the room the wordmark has, which is 30px wherever the room is there (every width the comp is
   compared at). The section is the size container, so 100cqw is the page's width.
   Wrapped (under 972px), the column has its own row and the room is the row. Side by side, the room runs from
   the column's left edge, 300px in from the right edge of the content, to the right padding.
   The wordmark measures 11.06em wide; 11.1 leaves a little to spare. */
.about-hero { container-type: inline-size; }
.about-hero__wordmark { --fs: min(30px, calc((100cqw - 48px) / 11.1)); }
@container (min-width: 972px) {
  .about-hero__wordmark {
    --fs: min(30px, calc((100cqw - 24px - min(50cqw + 576px, 100cqw - 24px) + 300px) / 11.1));
  }
}

.about-hero__descriptor {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: #5e5a52;
}

.about-hero__rule {
  display: block;
  width: 260px;
  height: 1px;
  background: #c9c1ae;
}

.about-powered {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #5e5a52;
  /* The words are a flex item beside the logo, and break-word does not let an item shrink below its longest word. */
  overflow-wrap: anywhere;
}
.about-powered img {
  height: 22px;
  width: auto;
  display: block;
}

/* Headings shared by the About sections */

.about-h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
}
.about-h2 em { color: #b03a26; }
.about-h2--mission {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
}

.about-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #5e5a52;
}

/* Mission */

.about-mission { background: #fff; }

.about-mission__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 48px 72px;
}

.about-mission__main {
  flex: 999 1 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about-mission__philosophy {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 36px;
}

.about-mission__motto {
  font-family: Literata, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
}

.about-mission__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

/* Values */

.about-values { background: #fff; }

.about-values__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 96px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-values__rail {
  position: relative;
  height: 12px;
}
.about-values__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  background: #13293d;
}
.about-values__dot {
  position: absolute;
  left: 22%;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f4b53b;
}

.about-values__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

/* min(300px, 100%) lets a column shrink below 300px in a narrow viewport (the comp's 300px floor overflows
   the side gutters under about 348px wide); from there up it is the comp's grid. */
.about-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px;
}

.about-value {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about-value__number {
  width: 48px;
  height: 48px;
  background: #13293d;
  color: #f4b53b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
}

.about-value__title {
  margin: 0;
  font-weight: 700;
  font-size: 21px;
}

.about-value__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #3f3b35;
}

/* Story */

.about-story {
  background: #003a3d;
  color: #fff;
}

.about-story__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 48px 72px;
  align-items: center;
}

.about-story__main {
  flex: 999 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-story .about-h2 em { color: #ff7a66; }

.about-story__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #d4e2e2;
}

.about-story__facts {
  flex: 1 1 360px;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}

.about-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-top: 14px;
}

.about-fact__label {
  font-size: 13px;
  color: #b9cfcf;
}

.about-fact__value {
  margin: 0;
  font-weight: 800;
  font-size: 40px;
  color: #fff;
}
.about-fact__value--gold { color: #f4b53b; }
.about-fact__value--small {
  font-weight: 700;
  font-size: 22px;
}

/* Co-founders */

.about-founders { background: #fff; }

.about-founders__heading {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-founders__title { max-width: 760px; }

/* The comp's article is a 1200px box with a rule along its bottom edge, so in a viewport a little wider than
   1200px the rule runs into the side gutters. Here the article is as wide as the page, with side padding that
   gives the same 1152px of content, and the rule is drawn at the same place: edge to edge up to 1247px wide
   (as the comp's is up to 1200px) and 1200px from there. */
.about-person {
  position: relative;
  padding: 56px max(24px, calc(50% - 576px)) 72px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: flex-start;
}
.about-person--ruled {
  padding-bottom: 73px; /* the comp's 72px plus its 1px border, which takes room that a drawn rule does not */
}
.about-person--ruled::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e8e3d8;
}
@media (min-width: 1248px) {
  .about-person--ruled::after {
    left: calc(50% - 600px);
    right: calc(50% - 600px);
  }
}
.about-person--reverse {
  padding-top: 72px;
  padding-bottom: 96px;
  flex-wrap: wrap-reverse;
}

.about-person__image {
  flex: 1 1 320px;
  max-width: 420px;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.about-person__image--top { object-position: center top; }

.about-person__body {
  flex: 999 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-person__name {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 36px;
  line-height: 1.1;
}

.about-person__role {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #5e5a52;
}

.about-person__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}

.about-person__quote {
  border-top: 1px solid #13293d;
  border-bottom: 1px solid #13293d;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-person__quote-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #b03a26;
}

.about-person__quote-text {
  margin: 0;
  font-family: Literata, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.4;
}

a.about-person__link {
  font-weight: 700;
  font-size: 15px;
}

/* MedSearch team */

.about-team { background: #e6e0d1; }

.about-team__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px 48px;
}

.about-team__main {
  flex: 999 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-team__title {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
}

.about-team__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}