@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/archivo-latin-wght-normal.woff2?v=8f704806dbed") format("woff2-variations");
}

/* Inter, the face of the text and the interface: tall lowercase, open shapes and
   tabular figures, legible at the sizes of a form or a table. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2?v=3100e775e861") format("woff2-variations");
}

/* Karla, the face of the logos, cut down to the letters of the products' names
   (DRIVEN2U, DeCA2U, OneSend2U, Time2U, Agent2U) at weights 600 to 800. Any
   other letter falls back to Archivo. */
@font-face {
  font-family: "Karla Brand";
  font-style: normal;
  font-display: swap;
  font-weight: 600 800;
  src: url("/fonts/karla-brand.woff2?v=7c59a3051c86") format("woff2-variations");
}

/*
 * The three blues are the three blades of the isotype: slate, royal and sky.
 * Everything that comes in threes on this site wears them in that order.
 */
:root {
  --paper: #ffffff;
  --wash: #f4f7fa;
  --ink: #222c3c;
  --slate: #44546a;
  --muted: #637187;
  --royal: #4472c4;
  --sky: #5b9bd5;
  --accent-strong: #3a61a6;
  --accent-strong-hover: #2f4f88;
  --accent-link: #2e75b5;
  --accent-wash: #e8f0f9;
  --rule: #e2e7ee;

  --screen: #1c2531;
  --screen-raised: #232e3d;
  --screen-rule: #33404f;
  --screen-quiet: #8695a8;
  --screen-text: #c3cddb;
  --screen-bright: #f2f6fa;

  --measure: 66ch;
  --gutter: clamp(1rem, 4vw, 4rem);
  --shell: 1160px;
  --radius: 10px;
  --masthead-height: 5.25rem;

  /* The hand-drawn stroke under a section's eyebrow: a file of the site's own,
     since the policy lets images come only from here. */
  --marker: url("/img/marker.svg?v=9201b20cda33");

  --display: "Archivo", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mark: "Karla Brand", "Archivo", system-ui, sans-serif;
}

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

/* Form controls take the page's type: a button says "Enviar" in Inter too. */
button,
input,
select,
textarea {
  font-family: inherit;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-link);
}

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

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

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 40;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  background: var(--accent-strong);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 0.75rem;
}

.shell {
  width: min(100% - calc(var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

[id] {
  scroll-margin-top: var(--masthead-height);
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--accent-strong);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

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

.eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-strong);
  margin: 0 0 0.9rem;
  width: fit-content;
}

/* The hand-drawn stroke under an eyebrow: the house mark of the site. */
.eyebrow::after {
  content: "";
  display: block;
  width: calc(100% + 0.3em);
  height: 0.46em;
  margin-top: 0.14em;
  background-color: var(--sky);
  -webkit-mask: var(--marker) left center / 100% 100% no-repeat;
  mask: var(--marker) left center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------ wordmarks */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--mark);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.0208em;
  color: var(--sky);
  text-decoration: none;
  line-height: 1;
}

.wordmark__mark {
  width: 1.6em;
  height: 1.6em;
  flex: none;
}

.wordmark__name span {
  color: var(--royal);
}

/* The official horizontal logo, slogan included. Its file carries the clear
   space the brand asks for, so it sits flush with the edge of the shell. */
.logo {
  display: block;
  flex: none;
}

/* The logo is drawn edge to edge, so its slogan is legible at this height. */
.logo img {
  display: block;
  width: auto;
  height: 3.6rem;
}

.footer__brand .logo img {
  height: 9.5rem;
}

@media (max-width: 560px) {
  :root {
    --masthead-height: 4.65rem;
  }

  .logo img {
    height: 3rem;
  }
}

/* A product of the family: its own name, the family's surname. */
.product {
  font-family: var(--mark);
  font-weight: 800;
  letter-spacing: -0.0208em;
  color: var(--slate);
}

.product span {
  color: var(--sky);
}

/* ------------------------------------------------------------- masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.97);
  border-bottom: 1px solid var(--rule);
  transition: background-color 220ms ease, border-color 220ms ease;
}

.logo .logo__dark {
  display: none;
}

/*
 * On the home page the masthead starts navy, one piece with the hero beneath
 * it, and turns white once the hero has scrolled away (`masthead--light`, set
 * by the script). Its panels stay white either way.
 */
body:has(.hero--home) .masthead:not(.masthead--light) {
  background: var(--screen);
  border-bottom-color: transparent;
}

body:has(.hero--home) .masthead:not(.masthead--light) .logo__light {
  display: none;
}

body:has(.hero--home) .masthead:not(.masthead--light) .logo__dark {
  display: block;
}

body:has(.hero--home) .masthead:not(.masthead--light) .lang > summary,
body:has(.hero--home) .masthead:not(.masthead--light) .menu > summary {
  color: var(--screen-text);
}

body:has(.hero--home) .masthead:not(.masthead--light) .lang > summary:hover,
body:has(.hero--home) .masthead:not(.masthead--light) .lang[open] > summary,
body:has(.hero--home) .masthead:not(.masthead--light) .menu > summary:hover,
body:has(.hero--home) .masthead:not(.masthead--light) .menu[open] > summary {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

@media (min-width: 921px) {
  body:has(.hero--home) .masthead:not(.masthead--light) nav > a,
  body:has(.hero--home) .masthead:not(.masthead--light) .sub > summary {
    color: var(--screen-bright);
  }

  body:has(.hero--home) .masthead:not(.masthead--light) nav > a:hover,
  body:has(.hero--home) .masthead:not(.masthead--light) nav > a:focus-visible,
  body:has(.hero--home) .masthead:not(.masthead--light) .sub > summary:hover,
  body:has(.hero--home) .masthead:not(.masthead--light) .sub[open] > summary {
    color: #fff;
  }
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  padding-block: 0.8rem;
}

.menu {
  margin-left: auto;
}

.menu > summary {
  display: none;
}

/* The sections: body size in a medium weight, so they read as navigation and
   not as headlines; dark enough to pass contrast; each a 44px target. */
.masthead nav {
  display: flex;
  gap: 1.75rem;
  font-size: 1rem;
  font-weight: 500;
}

.masthead nav {
  align-items: center;
}

.masthead nav > a,
.sub > summary {
  position: relative;
  color: var(--slate);
  text-decoration: none;
  padding-block: 0.6rem;
  transition: color 120ms ease;
}

.masthead nav > a:hover,
.masthead nav > a:focus-visible,
.sub > summary:hover,
.sub > summary:focus-visible,
.sub[open] > summary {
  color: var(--accent-strong);
}

/* Under the section pointed at or open, the eyebrows' hand-drawn stroke. On a
   phone the menu is a list, and its rules already part the entries. */
@media (min-width: 921px) {
  .masthead nav > a::after,
  .sub > summary::after {
    content: "";
    position: absolute;
    left: -0.15em;
    right: -0.15em;
    bottom: 0.05rem;
    height: 0.42em;
    background-color: var(--sky);
    -webkit-mask: var(--marker) left center / 100% 100% no-repeat;
    mask: var(--marker) left center / 100% 100% no-repeat;
    opacity: 0;
    transition: opacity 120ms ease;
  }

  .masthead nav > a:hover::after,
  .masthead nav > a:focus-visible::after,
  .sub > summary:hover::after,
  .sub > summary:focus-visible::after,
  .sub[open] > summary::after {
    opacity: 1;
  }
}

/* A submenu: its name opens a panel with each page, a line on what it is. */
.sub {
  position: relative;
}

.sub > summary {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  list-style: none;
}

.sub > summary::-webkit-details-marker {
  display: none;
}

.sub__caret {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}

.sub[open] .sub__caret {
  transform: rotate(180deg);
}

.sub__menu {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: -1rem;
  z-index: 30;
  display: grid;
  gap: 0;
  width: 21rem;
  padding: 0.4rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 18px 36px -18px rgb(34 44 60 / 0.35);
}

.sub__menu a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  color: var(--slate);
  text-decoration: none;
}

/* The gap between the name and the panel still counts as the submenu, so the
   pointer can cross it without the panel closing. */
.sub__menu::before {
  content: "";
  position: absolute;
  inset: -0.8rem 0 100% 0;
}

.sub__menu a {
  position: relative;
}

.sub__menu a:hover,
.sub__menu a:focus-visible {
  background: var(--accent-wash);
  box-shadow: inset 3px 0 0 var(--sky);
}

.sub__icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.45rem;
  border-radius: 8px;
  background: var(--wash);
}

.sub__menu a:hover .sub__icon,
.sub__menu a:focus-visible .sub__icon {
  background: var(--royal);
  stroke: #fff;
  --icon-accent: #fff;
}

.sub__menu a:hover strong[lang],
.sub__menu a:focus-visible strong[lang] {
  color: var(--accent-strong);
}

.sub__menu strong {
  display: block;
  font-family: var(--display);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.25;
}

.sub__menu small {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
}

.masthead__tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* The one call to action: as tall as the sections' targets, a step heavier. */
.masthead .button--small {
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

@media (max-width: 920px) {
  .masthead__tools {
    display: contents;
  }

  .masthead .button--small {
    order: 1;
  }

  .lang {
    order: 2;
    margin-left: auto;
  }

  .menu {
    order: 3;
    position: relative;
    margin-left: 0;
  }

  .menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    color: var(--slate);
  }

  .menu > summary::-webkit-details-marker {
    display: none;
  }

  .menu > summary:hover,
  .menu > summary:focus-visible,
  .menu[open] > summary {
    background: var(--wash);
    color: var(--accent-strong);
  }

  .menu > summary svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .masthead nav {
    position: fixed;
    top: var(--masthead-height);
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    gap: 0;
    padding: 0.35rem var(--gutter) 0.6rem;
    border-block: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: 0 12px 28px -14px rgb(34 44 60 / 0.3);
  }

  .masthead nav {
    align-items: stretch;
    max-height: calc(100svh - var(--masthead-height));
    overflow-y: auto;
  }

  .masthead nav > a,
  .sub > summary {
    padding: 0.7rem 0.35rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
  }

  .sub > summary {
    justify-content: space-between;
  }

  .masthead nav > a:last-child {
    border-bottom: none;
  }

  .masthead nav > a:hover,
  .masthead nav > a:focus-visible,
  .sub > summary:hover,
  .sub > summary:focus-visible {
    background: var(--wash);
  }

  .sub__menu {
    position: static;
    width: auto;
    padding: 0.25rem 0 0.5rem;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 560px) {
  .wordmark {
    font-size: 1.1875rem;
  }

  .lang__code {
    display: none;
  }

  .masthead .button--small {
    display: none;
  }
}

/* ------------------------------------------------------- language switch */

.lang {
  position: relative;
}

.lang > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.3rem 0.5rem 0.3rem 0.45rem;
  color: var(--slate);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background-color 120ms ease;
}

.lang > summary::-webkit-details-marker {
  display: none;
}

.lang > summary:hover,
.lang > summary:focus-visible,
.lang[open] > summary {
  background: var(--wash);
  color: var(--accent-strong);
}

.lang__flag {
  width: 1.25rem;
  height: 0.8333rem;
  border-radius: 2px;
  flex: none;
  overflow: hidden;
}

.lang__caret {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}

.lang[open] .lang__caret {
  transform: rotate(180deg);
}

.lang__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 9rem;
  padding: 0.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 12px 28px -14px rgb(34 44 60 / 0.3);
}

.lang__menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  color: var(--slate);
  font-size: 0.875rem;
  text-decoration: none;
}

.lang__menu a:hover,
.lang__menu a:focus-visible {
  background: var(--wash);
}

.lang__menu a[aria-current] {
  color: var(--accent-strong);
  font-weight: 600;
}

/* --------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color 130ms ease, border-color 130ms ease, transform 130ms ease;
}

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

/* On a phone every button in the page takes the width of its column: one
   target the thumb cannot miss, and the same edge for all of them. */
@media (max-width: 560px) {
  main .button {
    width: 100%;
    justify-content: center;
  }
}

.button--solid {
  background: var(--accent-strong);
  color: #fff;
}

.button--solid:hover,
.button--solid:focus-visible {
  background: var(--accent-strong-hover);
}

.button--solid::after {
  content: "";
  width: 0.38em;
  height: 0.38em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate 130ms ease;
}

.button--solid:hover::after,
.button--solid:focus-visible::after {
  translate: 0.15em 0;
}

/* A button that opens a new tab shows that instead of the arrow. */
.button--solid:has(.link__out)::after {
  content: none;
}

.button--quiet {
  border-color: var(--muted);
  color: var(--accent-strong);
  background: var(--paper);
}

.button--quiet:hover,
.button--quiet:focus-visible {
  border-color: var(--accent-strong);
  background: var(--accent-wash);
}

.button--small {
  padding: 0.45rem 0.95rem;
  font-size: 0.875rem;
}

.link__out {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon {
  fill: none;
  stroke: var(--slate);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  --icon-accent: var(--sky);
}

/* ------------------------------------------------------------------ hero */

/*
 * The brand's own background: navy crossed by a royal and a sky stripe, as on
 * every DRIVEN2U cover. The stripes leave from the isotype, the white version
 * the brand asks for on dark, and run off the right edge.
 */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(3rem, 6vw, 4.75rem);
  background: var(--screen);
  color: var(--screen-text);
}

.hero .eyebrow {
  color: var(--sky);
}

.hero .button--quiet {
  background: transparent;
  border-color: rgb(255 255 255 / 0.55);
  color: #fff;
}

.hero .button--quiet:hover,
.hero .button--quiet:focus-visible {
  background: rgb(255 255 255 / 0.1);
  border-color: #fff;
}

.hero :focus-visible {
  outline-color: #fff;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--screen-bright);
}

/* One idea per line: the headline breaks where its sense does, not where the
   width happens to run out. */
.hero h1 span {
  display: block;
}

.hero__lede {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--screen-text);
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@keyframes throw {
  from {
    transform: rotate(-240deg) scale(0.55);
  }
  to {
    transform: rotate(0deg) scale(1);
  }
}

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


/*
 * The home hero fills the first screen. Two stripes cross it from edge to
 * edge and never break: the thread that runs through every scene, with a
 * gleam travelling along it. Above them, four scenes of the brand's own pieces
 * take turns, each fading into the next: the isotype turning, the butterfly,
 * the isotype sending out rings, and the isotype thrown into place. Whoever
 * asks for less motion sees the first one, still.
 */
.hero--home {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--masthead-height));
  padding-block: clamp(2.5rem, 6vh, 4.5rem) 14.5rem;
}

.hero--home .hero__grid {
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  z-index: 1;
}

.hero--home .hero__grid > div {
  max-width: 44rem;
}

/* The headline is two sentences, one per line: on a wide screen neither
   breaks, even past the column the lede keeps to. */
.hero--home h1 {
  font-size: clamp(2.3rem, 1.1rem + 2.6vw, 3.3rem);
}

@media (min-width: 1320px) {
  .hero--home h1 span {
    white-space: nowrap;
  }
}

.stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The stripes: full-bleed shapes cut from the whole hero, so their ends are
   always the hero's own edges. */
.thread {
  position: absolute;
  inset: 0;
  background-size: 260% 100%;
  animation: gleam 9s linear infinite;
}

.thread--sky {
  background-image: linear-gradient(90deg, var(--sky) 0 38%, #8cbbe6 47%, var(--sky) 56% 100%);
  clip-path: polygon(0 calc(100% - 6.6rem), 100% calc(100% - 19.6rem), 100% calc(100% - 17rem), 0 calc(100% - 4rem));
}

.thread--royal {
  background-image: linear-gradient(90deg, var(--royal) 0 38%, #6f93d6 47%, var(--royal) 56% 100%);
  clip-path: polygon(0 calc(100% - 2.6rem), 100% calc(100% - 15.6rem), 100% calc(100% - 11.2rem), 0 calc(100% + 1.8rem));
  animation-delay: -4.5s;
}

@keyframes gleam {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.stage__scene {
  position: absolute;
  inset: 0 0 13rem;
  opacity: 0;
  animation: scene 28s ease-in-out infinite;
}

/* The first is already there on arrival, and comes back after the fourth. */
.stage__scene--neural {
  opacity: 1;
  animation-name: scene-first;
}

/* With script, the stage stands still until the page has loaded and the
   browser has a moment to spare (`is-live`, set by the script), so its
   thousands of points never compete with what the visitor came to read.
   Without script it moves from the start. */
@media (scripting: enabled) {
  html:not(.is-live) :is(.thread, .stage__scene, .stage__scene *) {
    animation-play-state: paused;
  }
}

.stage__scene--scan { animation-delay: 7s; }
.stage__scene--morph { animation-delay: 14s; }
.stage__scene--flow { animation-delay: 21s; }

/* Visibility goes with the opacity: a hidden scene's own animations must not
   keep it on screen. */
@keyframes scene {
  0% { opacity: 0; visibility: hidden; }
  4%, 25% { opacity: 1; visibility: visible; }
  29%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes scene-first {
  0%, 25% { opacity: 1; visibility: visible; }
  29%, 96% { opacity: 0; visibility: hidden; }
  100% { opacity: 1; visibility: visible; }
}

/* Every scene is one drawing at the same spot: the middle of the space the
   stripes leave. Each speaks of what we do, abstractly: a network that learns,
   a field under study, pixels becoming the butterfly, data flowing into the
   isotype. */
.art {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--shell)) / 2));
  top: 50%;
  translate: 0 -50%;
  width: clamp(17rem, 30vw, 27rem);
  height: auto;
  overflow: visible;
}

.art__edge,
.art__trace {
  fill: none;
  stroke: rgb(91 155 213 / 0.28);
  stroke-width: 1.2;
}

.art__trace {
  stroke: rgb(91 155 213 / 0.35);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* A signal: a short bright dash running the length of its line. */
.art__pulse {
  fill: none;
  stroke: #cfe3f6;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 10 400;
  stroke-dashoffset: 410;
  animation: signal 2.8s linear infinite;
}

@keyframes signal {
  to { stroke-dashoffset: 0; }
}

.art__node {
  fill: var(--sky);
  animation: twinkle 3s ease-in-out infinite;
}

.art__node--far {
  fill: var(--royal);
}

@keyframes twinkle {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.art__d1 { animation-delay: -0.5s; }
.art__d2 { animation-delay: -1s; }
.art__d3 { animation-delay: -1.5s; }
.art__d4 { animation-delay: -2s; }
.art__d5 { animation-delay: -2.5s; }

.art__halo {
  fill: rgb(68 114 196 / 0.18);
  stroke: rgb(255 255 255 / 0.3);
  stroke-dasharray: 2 5;
}

.art__mark--float {
  animation: hover 5s ease-in-out infinite alternate;
}

@keyframes hover {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}

.art__hud {
  fill: none;
  stroke: rgb(255 255 255 / 0.18);
}

.art__hud--dash {
  stroke: rgb(91 155 213 / 0.45);
  stroke-dasharray: 3 9;
}

.art__tick {
  stroke: rgb(255 255 255 / 0.3);
}

.art__spin {
  transform-origin: 200px 200px;
  animation: turn 30s linear infinite;
}

.art__spin--back {
  animation-direction: reverse;
  animation-duration: 22s;
}

.art__spin--slow {
  animation-duration: 60s;
}

@keyframes turn {
  to { rotate: 360deg; }
}

.art__dot {
  fill: rgb(195 205 219 / 0.22);
}

/* The points that make up a mark or a word take their colour and their
   opacity from the group that animates them: a group is one animation, and a
   scene of thousands of points runs as many animations as it has groups. */
.art__dot--hit {
  fill: inherit;
  opacity: 1;
}

.art__a0 { animation-delay: -6.00s; }
.art__a1 { animation-delay: -5.75s; }
.art__a2 { animation-delay: -5.50s; }
.art__a3 { animation-delay: -5.25s; }
.art__a4 { animation-delay: -5.00s; }
.art__a5 { animation-delay: -4.75s; }
.art__a6 { animation-delay: -4.50s; }
.art__a7 { animation-delay: -4.25s; }
.art__a8 { animation-delay: -4.00s; }
.art__a9 { animation-delay: -3.75s; }
.art__a10 { animation-delay: -3.50s; }
.art__a11 { animation-delay: -3.25s; }
.art__a12 { animation-delay: -3.00s; }
.art__a13 { animation-delay: -2.75s; }
.art__a14 { animation-delay: -2.50s; }
.art__a15 { animation-delay: -2.25s; }
.art__a16 { animation-delay: -2.00s; }
.art__a17 { animation-delay: -1.75s; }
.art__a18 { animation-delay: -1.50s; }
.art__a19 { animation-delay: -1.25s; }
.art__a20 { animation-delay: -1.00s; }
.art__a21 { animation-delay: -0.75s; }
.art__a22 { animation-delay: -0.50s; }
.art__a23 { animation-delay: -0.25s; }

/* The radar in the brand's blues: a sky wedge and beam, and every point of
   the isotype and of the word flashing white as the beam finds it, then
   holding its blue. */
.art--scan .art__hud { stroke: rgb(68 114 196 / 0.55); }
.art--scan .art__hud--dash { stroke: rgb(91 155 213 / 0.7); }
.art--scan .art__tick { stroke: rgb(91 155 213 / 0.5); }
.art--scan .art__grid-dot { fill: rgb(91 155 213 / 0.2); }
.art--scan .art__sweep path { fill: rgb(91 155 213 / 0.26); }

.art--scan .art__beam {
  stroke: var(--sky);
  stroke-width: 2;
}

/* The dots are lit by sector, one animation for all those the beam reaches at
   once: the delay comes from the sector's own class. */
.art--scan .art__sector {
  fill: var(--sky);
  opacity: 0.65;
  animation-name: found;
  animation-duration: 6s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.art--scan .art__sector--word {
  opacity: 0.85;
  animation-name: found-word;
}

@keyframes found {
  0% { fill: #fff; opacity: 1; }
  12% { fill: #8cc0ee; opacity: 0.95; }
  35%, 100% { fill: var(--sky); opacity: 0.65; }
}

@keyframes found-word {
  0% { fill: #fff; opacity: 1; }
  12% { fill: #8cc0ee; opacity: 1; }
  40%, 100% { fill: var(--sky); opacity: 0.85; }
}

/* The scan: a wedge of light turning about the centre. */
.art__sweep {
  transform-origin: 200px 200px;
  animation: turn 6s linear infinite;
}

.art__sweep path {
  fill: rgb(91 155 213 / 0.14);
}

.art__beam {
  stroke: rgb(207 227 246 / 0.75);
  stroke-width: 1.5;
}

.art__mesh {
  fill: none;
  stroke: rgb(91 155 213 / 0.45);
  stroke-width: 1.2;
}

.art__mesh--faint {
  stroke: rgb(255 255 255 / 0.18);
}

/* Pixels rise from below into their places, then the butterfly they make
   shows through and they go. Their cycle is the scene's, so it starts as the
   scene appears. */
.art__pixels {
  opacity: 0;
  animation: assemble 28s cubic-bezier(0.2, 0.7, 0.3, 1) 14s infinite;
}

.art__pixel { fill: var(--sky); }
.art__pixel--royal { fill: var(--royal); }
.art__pixel--white { fill: #fff; }

.art__from0 { --from: -40px 190px; }
.art__from1 { --from: 30px 230px; }
.art__from2 { --from: -10px 160px; }
.art__from3 { --from: 50px 210px; }

.art__s1 { animation-delay: 14.15s; }
.art__s2 { animation-delay: 14.3s; }
.art__s3 { animation-delay: 14.45s; }
.art__s4 { animation-delay: 14.6s; }
.art__s5 { animation-delay: 14.75s; }

@keyframes assemble {
  0%, 3% { opacity: 0; translate: var(--from); }
  6% { opacity: 1; }
  13% { opacity: 1; translate: 0 0; }
  17%, 100% { opacity: 0; translate: 0 0; }
}

/* The pixels of the word under it rise the same way, and stay. */
.art__pixels--stay {
  animation-name: assemble-stay;
}

@keyframes assemble-stay {
  0%, 3% { opacity: 0; translate: var(--from); }
  6% { opacity: 1; }
  13%, 27% { opacity: 1; translate: 0 0; }
  29%, 100% { opacity: 0; translate: 0 0; }
}

/* The word under the circuit: a pulse runs through it left to right, as
   data runs the traces. */
.art--flow .art__sector--flow {
  fill: var(--sky);
  opacity: 0.35;
  animation-name: pulse-through;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pulse-through {
  0% { fill: #fff; opacity: 1; }
  10% { fill: var(--sky); opacity: 0.75; }
  25%, 100% { fill: var(--sky); opacity: 0.4; }
}


/* The words under the network twinkle like its nodes, a group of points at a
   time; the delay comes from the group's own class. */
.art__twinkle {
  fill: #cfe3f6;
  animation-name: twinkle;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.art__emerge {
  opacity: 0;
  animation: emerge 28s ease-in-out 14s infinite;
}

@keyframes emerge {
  0%, 13% { opacity: 0; }
  17%, 27% { opacity: 1; }
  29%, 100% { opacity: 0; }
}

.art__chip {
  fill: rgb(68 114 196 / 0.22);
  stroke: rgb(91 155 213 / 0.7);
  stroke-width: 1.5;
}

/* Before the circuit gives way to the network, its traces fade and its chip
   rounds into the circle the logo sits in there, as wide as the chip. Same
   length and delay as the scene, so both end together. */
.art--flow .art__chip {
  animation: chip-round 28s ease-in-out 21s infinite;
}

.art--flow .art__circuit {
  animation: circuit-fade 28s ease-in-out 21s infinite;
}

@keyframes chip-round {
  0%, 16% { rx: 18px; }
  24.5%, 100% { rx: 58px; }
}

@keyframes circuit-fade {
  0%, 16% { opacity: 1; }
  24.5%, 100% { opacity: 0; }
}

/* The logo is the same in both scenes that carry it: same place, same size and,
   turning from the same moment, the same angle when one gives way to the other. */
.art--neural .art__mark,
.art--flow .art__mark {
  transform-origin: 200px 200px;
  animation: turn 40s linear 1.75s infinite;
}

.art--neural .art__mark {
  animation: throw 1.6s cubic-bezier(0.22, 1.25, 0.36, 1) 0.15s both, turn 40s linear 1.75s infinite;
}

/* The ways in: one to talk, three to look around. */
.routes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.routes a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.25rem;
  color: var(--screen-bright);
  font-weight: 600;
  font-size: 0.9688rem;
  text-decoration: none;
  border-bottom: 2px solid rgb(91 155 213 / 0.45);
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, text-shadow 160ms ease;
}

/* On hover a flash of light runs along the line and the link lights up. */
.routes a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #fff 45%, var(--sky) 55%, transparent 100%) no-repeat;
  background-size: 40% 100%;
  background-position: -60% 0;
  box-shadow: 0 0 12px rgb(91 155 213 / 0);
  opacity: 0;
  pointer-events: none;
}

.routes a:hover,
.routes a:focus-visible {
  border-bottom-color: var(--sky);
  color: #fff;
  background-color: rgb(91 155 213 / 0.1);
  text-shadow: 0 0 14px rgb(91 155 213 / 0.8);
}

.routes a:hover::after,
.routes a:focus-visible::after {
  opacity: 1;
  box-shadow: 0 0 12px rgb(91 155 213 / 0.9);
  animation: flash 900ms ease-out both;
}

@keyframes flash {
  from { background-position: -60% 0; }
  to { background-position: 160% 0; }
}

.routes a:hover .icon,
.routes a:focus-visible .icon {
  stroke: var(--sky);
  translate: 0 -2px;
  filter: drop-shadow(0 0 6px rgb(91 155 213 / 0.9));
}

.routes .icon {
  width: 1.3rem;
  height: 1.3rem;
  stroke: var(--screen-text);
  transition: stroke 160ms ease, translate 160ms ease, filter 160ms ease;
}

/*
 * On a phone the headline comes first. Below the text, the drawing and its
 * word, and under them the two stripes, which close the hero. The button and
 * the three ways in take the whole width: one column, one thumb.
 */
@media (max-width: 860px) {
  .hero--home {
    align-items: start;
    min-height: 0;
    padding-block: clamp(1.75rem, 5vh, 2.5rem) 29rem;
  }

  .thread--sky {
    clip-path: polygon(0 calc(100% - 5.8rem), 100% calc(100% - 10.6rem), 100% calc(100% - 8.8rem), 0 calc(100% - 4rem));
  }

  .thread--royal {
    clip-path: polygon(0 calc(100% - 2.8rem), 100% calc(100% - 7.6rem), 100% calc(100% - 4.8rem), 0 calc(100% + 0rem));
  }

  .stage__scene {
    inset: 0;
  }

  .stage .art {
    right: auto;
    top: auto;
    left: 50%;
    bottom: 9.5rem;
    translate: -50% 0;
    width: min(16rem, 72vw);
  }

  .hero--home .hero__actions .button {
    width: 100%;
    justify-content: center;
  }

  .hero--home .routes {
    flex-direction: column;
    gap: 0.35rem;
  }

  .hero--home .routes a {
    display: flex;
    width: 100%;
    padding: 0.8rem 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thread,
  .stage__scene,
  .stage .art * {
    animation: none;
  }

  .stage__scene--neural {
    opacity: 1;
  }

  .stage__scene:not(.stage__scene--neural) {
    display: none;
  }

  .art__pulse,
  .art__pixels {
    display: none;
  }
}

/* --------------------------------------------------------------- clients */

/*
 * The logos travel right to left, the way the page is read, without end and
 * inside the page's margins: the list twice in a row, the pair shifted by one
 * list's width. Hovering stops it.
 */
.clients {
  padding-block: 3rem 3.5rem;
  border-block: 1px solid var(--rule);
}

.clients .eyebrow {
  margin: 0 0 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-strong);
}

/* On the home page the logos sit with the clients' own words, under the
   section's title. */
.clients__band {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

.marquee {
  display: flex;
  overflow: hidden;
  padding-block: 0.5rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin: 0;
  padding: 0 clamp(2.5rem, 5vw, 4.5rem) 0 0;
  list-style: none;
  animation: drift 55s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.marquee img {
  display: block;
  height: 2.6rem;
  width: auto;
  max-width: none;
  opacity: 0.8;
}

/* A logo that carries a line under its name needs the height to stay legible. */
.marquee .clients__tall {
  height: 3.6rem;
}

/* A long wordmark keeps the weight of the rest at a smaller height. */
.marquee .clients__wide {
  height: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    mask-image: none;
  }

  .marquee__track {
    flex-wrap: wrap;
    flex: 1 1 auto;
    gap: 1.5rem 2.5rem;
    animation: none;
  }

  .marquee__track[aria-hidden] {
    display: none;
  }
}

/* -------------------------------------------------------------- sections */

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.section--wash {
  background: var(--wash);
}

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section__head h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  font-weight: 800;
}

.section__head p:not(.eyebrow) {
  margin-top: 1.1rem;
  font-size: 1.0625rem;
}

/* -------------------------------------------------------------- services */

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.service {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.25rem clamp(1.25rem, 3vw, 2.25rem);
  border-left: 1px solid var(--rule);
}

.service:first-child {
  padding-left: 0;
  border-left: 0;
}

.service .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.service h3 {
  font-size: 1.5rem;
  color: var(--ink);
}

.service__claim {
  font-family: var(--display);
  font-weight: 650;
  color: var(--accent-strong);
}

/* Every way of working ends in the same place: a button into its page. */
.service .service__go {
  align-self: flex-start;
  margin-top: auto;
  border-color: var(--accent-strong);
}

.service__go::after {
  content: "";
  width: 0.38em;
  height: 0.38em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate 130ms ease;
}

.service__go:hover::after,
.service__go:focus-visible::after {
  translate: 0.15em 0;
}

@media (max-width: 860px) {
  .services {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  /* On a phone each way of working stands on its own, centred under its
     icon, a short sky rule above it, and its button the width of the column. */
  .service,
  .service:first-child {
    align-items: center;
    padding: 1.75rem 0 0;
    border-left: 0;
    text-align: center;
  }

  .service::before {
    content: "";
    width: 3rem;
    height: 3px;
    margin-bottom: 0.5rem;
    border-radius: 2px;
    background: var(--sky);
  }

  .service .service__go {
    align-self: stretch;
    justify-content: center;
  }
}

/* -------------------------------------------------------------- products */

.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

/* Every tile takes five rows of the list's grid - name, line, text, who it is
   for, ways in - so the same block of each starts at the same height. */
.tile {
  --blade: var(--royal);
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0.9rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--blade);
}

.tile:nth-child(2) {
  --blade: var(--sky);
}

.tile:nth-child(3) {
  --blade: var(--slate);
}

.tile h3 {
  font-family: var(--mark);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem);
  letter-spacing: -0.025em;
  color: var(--slate);
}

.tile h3 span:not(.send) {
  color: var(--sky);
}

/* A product made with a partner names both, under its own name. */
.tile__by {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.tile__line {
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ink);
}

/* Who a product is for: a block of its own, in the colour of the tile's blade. */
.tile__who {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: var(--wash);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.tile__who-icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--blade);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The same two actions on every tile, sharing the row equally. */
.tile__actions {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 0.5rem;
  padding-top: 0.6rem;
}

.tile__actions .tile__demo {
  flex-basis: 100%;
}

.tile__actions .button {
  flex: 1 1 auto;
  justify-content: center;
}

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

/* -------------------------------------------------------------- values */

/*
 * The six letters of the name, each one a value. The one loud thing on the
 * site: letters as tall as the column is wide, in the three blues in turn.
 */
/* The home's short 'who we are': the six letters, and the way to the full story. */
.teaser {
  background: var(--screen);
  color: var(--screen-text);
}

.teaser__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.teaser .eyebrow {
  color: var(--sky);
}

.teaser h2 {
  color: var(--screen-bright);
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
  font-weight: 800;
}

.teaser p:not(.eyebrow):not(.teaser__word) {
  margin-top: 1.1rem;
  max-width: 48ch;
  font-size: 1.125rem;
}

.teaser .button {
  margin-top: 1.75rem;
}

.teaser__word {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 1.5rem + 6vw, 7.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
}

.teaser__letter--r { color: var(--royal); }
.teaser__letter--k { color: var(--sky); }
.teaser__letter--s { color: #8fa3bd; }

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

/* The values fill the screen too, the next one down. */
.driven {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--masthead-height));
  background: var(--screen);
  color: var(--screen-text);
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
}

.driven .section__head h2 {
  color: var(--screen-bright);
}

.driven .eyebrow {
  color: var(--sky);
}

.driven .section__head p:not(.eyebrow) {
  color: var(--screen-text);
}

.driven__letters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 clamp(0.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.driven__letters li {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--screen-rule);
}

.driven__letter {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4rem, 2rem + 6vw, min(7.5rem, 13vh));
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--royal);
}

.driven__letters li:nth-child(3n + 2) .driven__letter {
  color: var(--sky);
}

.driven__letters li:nth-child(3n) .driven__letter {
  color: #8fa3bd;
}

.driven__letters p {
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .driven__letters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }
}

@media (max-width: 560px) {
  .driven__letters {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .driven__letters li {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
    padding-block: 1.1rem;
  }

  .driven__letter {
    font-size: 4rem;
  }
}

.manifesto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--screen-rule);
}

.manifesto p {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--screen-bright);
}

.manifesto b {
  font-family: var(--mark);
  font-weight: 800;
  color: var(--sky);
}

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

/* --------------------------------------------------------------- about */

/* Who we are, in one screen under the masthead: the title and the rings on
   one side, the four answers on the other. */
.intro {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--masthead-height));
  padding-block: clamp(2rem, 5vh, 3.5rem);
}

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.intro h1 {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 800;
  color: var(--ink);
}

.intro__lead > p:not(.eyebrow) {
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  max-width: 46ch;
}

.intro .rings {
  display: block;
  max-width: min(19rem, 38vh);
  margin-top: clamp(1.25rem, 4vh, 2.25rem);
  justify-self: start;
}

.intro .facts {
  gap: clamp(0.9rem, 2.2vh, 1.4rem);
}

.intro .facts dt {
  font-size: 1.125rem;
}

@media (max-width: 860px) {
  .intro {
    min-height: 0;
  }

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

  .intro .rings {
    justify-self: center;
    max-width: 18rem;
  }
}


/* Why at the core, how and what around it, and the team around all of it:
   each answer wears the colour of its ring. */
.rings {
  width: 100%;
  height: auto;
}

.rings__who {
  fill: var(--wash);
  stroke: var(--slate);
  stroke-width: 2;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
}

.rings__person {
  stroke: var(--paper);
  stroke-width: 4;
}

.rings__person--r { fill: var(--royal); }
.rings__person--k { fill: var(--sky); }
.rings__person--s { fill: var(--slate); }

.rings__what { fill: var(--slate); }
.rings__how { fill: var(--sky); }
.rings__why { fill: var(--royal); }

.rings__label {
  fill: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  text-anchor: middle;
}

.rings__label--dark {
  fill: var(--slate);
}

.rings__label--core {
  font-size: 21px;
  font-weight: 700;
}

.facts {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
}

.facts > div {
  --ring: var(--royal);
  position: relative;
  padding-left: 2.6rem;
}

.facts > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--ring);
}

.facts .facts__how { --ring: var(--sky); }
.facts .facts__what { --ring: var(--slate); }

.facts .facts__who::before {
  background: var(--wash);
  border: 2px dashed var(--slate);
}

.facts dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.facts dd {
  margin: 0;
  max-width: 54ch;
}

/* What we do: three equal rows, each with the icon of its service on the home
   page, and each a way into the page that tells it. */
.facts__offer {
  display: grid;
  gap: 0.5rem;
  max-width: 28rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}

.offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.95rem 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-weight: 650;
  font-size: 0.9688rem;
  text-decoration: none;
  transition: border-color 130ms ease, background-color 130ms ease;
}

.offer::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-top: 2px solid var(--accent-strong);
  border-right: 2px solid var(--accent-strong);
  transform: rotate(45deg);
  transition: translate 130ms ease;
}

.offer:hover,
.offer:focus-visible {
  border-color: var(--accent-strong);
  background: var(--accent-wash);
}

.offer:hover::after,
.offer:focus-visible::after {
  translate: 0.15em 0;
}

.offer__icon {
  width: 1.65rem;
  height: 1.65rem;
}

/* ---------------------------------------------------------- testimonials */

/* Five voices, none above the others: equal cards flowing in columns, each
   wearing one of the three blades in turn. */
.voices {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.voice:nth-child(-n + 3) {
  grid-column: span 2;
}

.voice:nth-child(n + 4) {
  grid-column: span 3;
}

/*
 * Where they no longer fit side by side, the testimonials take turns: one at a
 * time, the whole width, swiped with a finger or moved on after a while for
 * reading it (site.js). The dots under them say how many there are and which
 * one is showing, and take you to any of them.
 */
@media (max-width: 960px) {
  .voices {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .voices::-webkit-scrollbar {
    display: none;
  }

  .voice:nth-child(n) {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
}

.voices__dots {
  display: none;
}

@media (max-width: 960px) {
  .voices__dots {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 1rem;
  }

  .voices__dots button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .voices__dots button::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--rule);
    transition: width 200ms ease, background-color 200ms ease;
  }

  .voices__dots button[aria-current="true"]::before {
    width: 1.6rem;
    background: var(--royal);
  }

  .voices__dots button:focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: 2px;
    border-radius: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voices {
    scroll-behavior: auto;
  }
}

.voice {
  --blade: var(--royal);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.4rem, 2.5vw, 1.8rem);
  border-radius: var(--radius);
  background: var(--wash);
}

.voice:nth-child(3n + 2) {
  --blade: var(--sky);
}

.voice:nth-child(3n) {
  --blade: var(--slate);
}

.voice blockquote {
  margin: 0;
}

.voice blockquote p {
  max-width: none;
  color: var(--ink);
  font-size: 1.0313rem;
  line-height: 1.6;
}

.voice blockquote p::before {
  content: "“";
  display: block;
  height: 0.5em;
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--blade);
}

.voice figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
}

.voice__face {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--blade);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.875rem;
}

.voice__who strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink);
}

/* --------------------------------------------------------------- contact */

/* Like the hero, the contact fills the screen under the masthead. */
.contact {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--masthead-height));
  background: var(--accent-strong);
  color: #e3ecf8;
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
}

.contact .eyebrow {
  color: #fff;
}

.contact h2 {
  color: #fff;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  font-weight: 800;
  max-width: 18ch;
}

.contact p:not(.eyebrow) {
  margin-top: 1.1rem;
  font-size: 1.125rem;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* The contact form: a white card on the blue, beside the way to the calendar. */
.contact .contact__grid {
  align-items: start;
}

.contact .ways {
  margin-top: 2rem;
}

/*
 * The form is a white panel on the blue: filled fields with no borders, which
 * light up sky blue when written in, as the hero's threads do. What we can
 * help with is four choices in plain sight rather than a list to open.
 */
.enquiry {
  --field: #f0f4f9;
  --field-hover: #e8eef6;
  --line: #d3dce7;
  --label: var(--slate);
  --quiet: var(--muted);
  --wrong: #c42b2b;
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  accent-color: var(--accent-strong);
  box-shadow: 0 2rem 4rem -2.5rem rgb(8 16 32 / 0.65);
}

.contact .enquiry p {
  margin: 0;
  font-size: inherit;
}

.contact .enquiry .enquiry__title {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.enquiry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

@media (max-width: 34rem) {
  .enquiry__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.enquiry__field {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--label);
}

.enquiry__field legend {
  padding: 0;
  margin-bottom: 0.45rem;
}

.enquiry__optional {
  font-weight: 400;
  color: var(--quiet);
}

.enquiry :is(input:not([type="checkbox"], [type="radio"]), textarea) {
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--field);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  min-width: 0;
  width: 100%;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.enquiry :is(input:not([type="checkbox"], [type="radio"]), textarea):hover {
  background: var(--field-hover);
}

.enquiry :is(input:not([type="checkbox"], [type="radio"]), textarea):focus-visible {
  outline: none;
  background: var(--paper);
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgb(91 155 213 / 0.25);
}

.enquiry textarea {
  resize: vertical;
  min-height: 7.5rem;
}

/*
 * The four things we can help with: four tiles in one tray, each with its
 * icon. The chosen one lifts out of the tray, white with a royal edge.
 */
.enquiry__topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 14px;
  background: var(--field);
}

.enquiry__topic {
  position: relative;
  display: grid;
  cursor: pointer;
}

.enquiry__topic input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.enquiry__tile {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.35rem;
  min-height: 4.75rem;
  padding: 0.6rem 0.4rem;
  border-radius: 10px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--label);
  transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.enquiry__tile .icon {
  width: 1.4rem;
  height: 1.4rem;
  stroke: var(--quiet);
  transition: stroke 150ms ease;
}

.enquiry__topic:hover .enquiry__tile {
  background: var(--field-hover);
  color: var(--ink);
}

.enquiry__topic input:checked + .enquiry__tile {
  background: #fff;
  box-shadow: 0 0 0 2px var(--accent-strong), 0 0.5rem 1rem -0.6rem rgb(28 37 49 / 0.45);
  color: var(--ink);
  font-weight: 650;
}

.enquiry__topic input:checked + .enquiry__tile .icon {
  stroke: var(--accent-strong);
}

/* The product tile says which product once one is chosen: its icon and name in
   place of "A product", and a small chevron to open the list again. */
.enquiry__face {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.enquiry__face:not(.enquiry__face--none),
.enquiry:has(input[name="product"]:checked) .enquiry__face--none {
  display: none;
}

.enquiry:has(input[name="product"][value="deca2u"]:checked) .enquiry__face[data-product="deca2u"],
.enquiry:has(input[name="product"][value="onesend2u"]:checked) .enquiry__face[data-product="onesend2u"],
.enquiry:has(input[name="product"][value="time2u"]:checked) .enquiry__face[data-product="time2u"],
.enquiry:has(input[name="product"][value="custom"]:checked) .enquiry__face[data-product="custom"] {
  display: grid;
}

.enquiry__face b {
  color: var(--sky);
}

.enquiry__topic--product .enquiry__tile {
  position: relative;
}

.enquiry__again {
  display: none;
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: var(--quiet);
  stroke-width: 2;
}

.enquiry.is-picked .enquiry__again {
  display: block;
}

/* Once a product is chosen the list folds away; the tile opens it again. */
.enquiry.is-picked:has(input[name="topic"][value="product"]:checked) .enquiry__products {
  display: none;
}

.enquiry__topic input:focus-visible + .enquiry__tile {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/*
 * Which product: once "A product" is chosen, a list drops from its tile, the
 * way a menu opens, with a notch pointing back at it. Our three by name, and
 * last the one we would build for them.
 */
.enquiry__products {
  display: none;
  margin-top: -0.35rem;
}

.enquiry:has(input[name="topic"][value="product"]:checked) .enquiry__products {
  display: grid;
}

.enquiry__products legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.enquiry__menu {
  --notch: 62.5%;
  position: relative;
  display: grid;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1.25rem 2rem -1.4rem rgb(28 37 49 / 0.5);
  animation: drop 180ms ease-out;
}

.enquiry__menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--notch);
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: #fff;
  translate: -50% 0;
  rotate: 45deg;
}

@keyframes drop {
  from { opacity: 0; translate: 0 -0.4rem; }
}

.enquiry__product {
  position: relative;
  display: grid;
}

.enquiry__product + .enquiry__product {
  border-top: 1px solid #edf1f6;
}

.enquiry__product:last-child {
  border-top-color: var(--line);
}

.enquiry__product input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.enquiry__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 9px;
  transition: background-color 150ms ease;
}

/* The mark on the right: an empty ring, filled when it is the one. */
.enquiry__option::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transition: border-color 150ms ease, border-width 150ms ease;
}

.enquiry__option strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.enquiry__option strong b {
  color: var(--sky);
}

.enquiry__option small {
  font-size: 0.8125rem;
  color: var(--quiet);
}

.enquiry__product:hover .enquiry__option {
  background: var(--field);
}

.enquiry__product input:checked + .enquiry__option {
  background: #eef3fb;
}

.enquiry__product input:checked + .enquiry__option::after {
  border: 5px solid var(--accent-strong);
}

.enquiry__product input:focus-visible + .enquiry__option {
  outline: 2px solid var(--sky);
  outline-offset: -2px;
}

.enquiry__products.is-invalid .enquiry__menu {
  border-color: var(--wrong);
}

@media (max-width: 520px) {
  .enquiry__topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enquiry__menu {
    --notch: 25%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .enquiry__menu {
    animation: none;
  }
}

.enquiry__check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--label);
}

.enquiry__check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
}

.enquiry__check a {
  color: var(--accent-strong);
  text-decoration-color: var(--sky);
  text-underline-offset: 0.2em;
}

.enquiry__check .link__out {
  margin-inline-start: 0.25em;
  vertical-align: -0.05em;
}

/* A field that is not right: a red edge, and what it lacks under it. */
.enquiry .is-invalid :is(input:not([type="checkbox"]), textarea) {
  border-color: var(--wrong);
  background: #fff6f6;
}

.enquiry .is-invalid :is(input:not([type="checkbox"]), textarea):focus-visible {
  box-shadow: 0 0 0 3px rgb(196 43 43 / 0.15);
}

.enquiry__error {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--wrong);
}

.enquiry__check .enquiry__error {
  grid-column: 2;
}

.enquiry__check.is-invalid input {
  outline: 2px solid var(--wrong);
  outline-offset: 1px;
}

/* What we do with the data on the left, the button where a form ends: bottom right. */
.enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-top: 0.25rem;
}

.enquiry__actions .button {
  margin-left: auto;
}

.contact .enquiry .enquiry__note {
  flex: 1 1 14rem;
  font-size: 0.8125rem;
  color: var(--quiet);
}

.enquiry__outcome:empty {
  display: none;
}

.contact .enquiry .enquiry__outcome {
  font-weight: 600;
  color: var(--accent-strong);
}

@media (max-width: 860px) {
  .contact .contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * The other way in: a call in the calendar. A deeper pane of the same blue,
 * so the section shows through it, crossed at its corner by the hero's two
 * stripes; the whole pane is the link, and what it does is said by a button
 * that cannot be mistaken for text.
 */
.ways {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.way {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 1.1rem;
  padding: clamp(1.35rem, 2.6vw, 1.75rem) clamp(1.35rem, 2.6vw, 1.75rem) clamp(2.5rem, 4vw, 3rem);
  border-radius: 18px;
  background: rgb(28 37 49 / 0.32);
  color: var(--screen-text);
  text-decoration: none;
  border: 1px solid rgb(255 255 255 / 0.2);
  transition: border-color 160ms ease, background-color 160ms ease;
}

/* The stripes rise from the bottom edge and leave by the right one. */
.way::before,
.way::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.way::before {
  background: var(--sky);
  clip-path: polygon(45% 100%, 100% 52%, 100% 64%, 59% 100%);
}

.way::after {
  background: var(--royal);
  clip-path: polygon(64% 100%, 100% 69%, 100% 82%, 79% 100%);
}

.way:hover,
.way:focus-visible {
  border-color: var(--sky);
  background: rgb(28 37 49 / 0.42);
}

.way__icon {
  grid-row: span 3;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.7rem;
  border-radius: 14px;
  background: rgb(91 155 213 / 0.16);
  stroke: var(--sky);
}

.way__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
}

.way__line {
  font-size: 0.9375rem;
  color: var(--screen-text);
}

/* The button the panel is: white on navy, sky once pointed at. */
.way__go {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  background: #fff;
  color: var(--screen);
  font-weight: 700;
  font-size: 0.9688rem;
  transition: background-color 160ms ease, color 160ms ease;
}

.way__go .link__out {
  transition: translate 160ms ease;
}

.way:hover .way__go,
.way:focus-visible .way__go {
  background: var(--sky);
  color: #fff;
}

.way:hover .way__go .link__out,
.way:focus-visible .way__go .link__out {
  translate: 2px -2px;
}

/* On a phone the icon sits above the name, so the name keeps one line, and the
   button takes the width of the card. */
@media (max-width: 560px) {
  .way {
    grid-template-columns: minmax(0, 1fr);
  }

  .way__icon {
    grid-row: auto;
    margin-bottom: 0.4rem;
  }

  .way__go {
    justify-self: stretch;
    justify-content: center;
  }
}

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

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

.contact :focus-visible {
  outline-color: #fff;
}

/* ----------------------------------------------------------- inner pages */

.page-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3rem);
}

.page-hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.9rem);
  font-weight: 800;
  color: var(--ink);
  max-width: 20ch;
}

.page-hero p:not(.eyebrow) {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  max-width: 58ch;
}

/* The way back from a case or a product to the page that lists it. */
.page-hero > .shell {
  position: relative;
}

.page-hero p.back {
  position: absolute;
  top: -0.35rem;
  right: 0;
  margin: 0;
  font-size: 0.875rem;
}

@media (max-width: 700px) {
  .page-hero p.back {
    position: static;
    margin: 0 0 1.5rem;
  }
}

/* A quiet card: a round badge with the arrow, then where it leads. */
.back a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 0.35rem 1rem -0.6rem rgb(30 42 61 / 0.35);
  color: var(--slate);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.back a::before {
  content: "";
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent-wash);
  transition: background-color 160ms ease;
}

.back a::after {
  content: "";
  position: absolute;
  left: calc(0.3rem + 0.8rem);
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-left: 2px solid var(--accent-strong);
  border-bottom: 2px solid var(--accent-strong);
  transform: translateY(-50%) rotate(45deg);
  transition: translate 160ms ease, border-color 160ms ease;
}

.back a:hover,
.back a:focus-visible {
  border-color: var(--royal);
  box-shadow: 0 0.5rem 1.25rem -0.6rem rgb(68 114 196 / 0.55);
  color: var(--accent-strong);
}

.back a:hover::before,
.back a:focus-visible::before {
  background: var(--royal);
}

.back a:hover::after,
.back a:focus-visible::after {
  border-color: #fff;
  translate: -0.15rem 0;
}

.page-hero .product-name {
  margin: 0 0 0.75rem;
  font-family: var(--mark);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  letter-spacing: -0.025em;
  color: var(--slate);
}

/* A product's name as its logo draws it: the name in slate, "2U" in sky. */
.product-name span {
  color: var(--sky);
}

/* "Send" in OneSend2U: lighter than "One", as in its logo. */
.send {
  font-weight: 600;
}

/* A product's name inside running text, set like its logo: Karla, the name in
   slate and "2U" in sky; on dark grounds the name in white, and all of it in
   white on the royal of the contact band. The generator wraps every mention. */
.brand {
  font-family: var(--mark);
  font-weight: 800;
  /* Karla's lowercase is shorter than Inter's: a touch larger to read at the same size. */
  font-size: 1.08em;
  letter-spacing: -0.02em;
  color: var(--slate);
  white-space: nowrap;
}

.brand b {
  font-weight: inherit;
  color: var(--sky);
}

.hero .brand,
.teaser .brand,
.driven .brand,
.cta .brand {
  color: #fff;
}

.contact .brand,
.contact .brand b {
  color: #fff;
}

/* In a button the name takes the button's colour, which already says "act". */
.button .brand,
.button .brand b {
  color: inherit;
}

/* "2U" wherever it stands alone: the wordmark's face and blue. */
.two {
  font-family: var(--mark);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--sky);
}

/* ----------------------------------------------------------- case study */

/* The picture and the facts stay in view beside the story as it is read. */
.story {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.story__aside {
  position: sticky;
  top: calc(var(--masthead-height) + 1.5rem);
  display: grid;
  gap: 1.25rem;
}

.story__aside .scene {
  --tint: var(--accent-wash);
}

.story__facts {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}

.story__facts dt {
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--muted);
}

.story__facts dd {
  margin: 0.1rem 0 0;
  font-family: var(--display);
  font-weight: 650;
  color: var(--ink);
}

.story__body h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  color: var(--accent-strong);
}

.story__body h2:not(:first-child) {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.story__body p,
.story__body ul {
  margin-top: 0.85rem;
  max-width: 62ch;
}

.story__body ul {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  list-style: none;
}

.story__body li {
  position: relative;
  padding-left: 1.6rem;
}

.story__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--sky);
}

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

  .story__aside {
    position: static;
  }
}

/* -------------------------------------------------------------- pillars */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.pillars--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.pillars li {
  padding-top: 1rem;
  border-top: 4px solid var(--royal);
}

.pillars li:nth-child(3n + 2) {
  border-top-color: var(--sky);
}

.pillars li:nth-child(3n) {
  border-top-color: var(--slate);
}

.pillars h3 {
  font-size: 1.125rem;
  color: var(--ink);
}

.pillars p {
  margin-top: 0.45rem;
  font-size: 0.9688rem;
}

@media (max-width: 960px) {
  .pillars,
  .pillars--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pillars,
  .pillars--three {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------- partners */

.partners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.partners:last-child {
  margin-bottom: 0;
}

.partner {
  --blade: var(--royal);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  border-radius: var(--radius);
  border-left: 5px solid var(--blade);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform 140ms ease;
}

.partners li:nth-child(2) .partner {
  --blade: var(--sky);
}

.partners li:nth-child(3) .partner {
  --blade: var(--slate);
}

.partner:hover,
.partner:focus-visible {
  transform: translateY(-2px);
}

.partner__name {
  font-family: var(--display);
  font-weight: 750;
  font-size: 1.25rem;
}

.partner__focus {
  color: var(--muted);
  font-size: 0.9375rem;
}

.partner__go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.4rem;
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.9375rem;
}

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

/* ---------------------------------------------------------------- relay */

/*
 * How OneSend2U works, top to bottom: who sends, what OneSend2U does with each
 * message, the providers it goes out through and who receives it. Dashed
 * connectors join the rows, as the messages travel.
 */
.relay {
  display: grid;
  gap: 2.25rem;
  max-width: 62rem;
  margin: 0 auto;
}

.relay__from,
.relay__core,
.relay__providers,
.relay__to {
  position: relative;
}

.relay__core::before,
.relay__providers::before,
.relay__to::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  height: 2.25rem;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--sky) 0 6px, transparent 6px 11px);
  animation: flow 1.2s linear infinite;
}

@keyframes flow {
  from { background-position: 0 0; }
  to { background-position: 0 11px; }
}

.relay__core::after,
.relay__providers::after,
.relay__to::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.35rem);
  bottom: calc(100% + 0.05rem);
  border: 0.35rem solid transparent;
  border-bottom: 0;
  border-top: 0.45rem solid var(--sky);
}

.relay strong,
.relay span {
  display: block;
}

.relay__icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  margin: 0 auto 0.45rem;
  border-radius: 50%;
  background: var(--accent-wash);
  stroke: var(--royal);
  --icon-accent: var(--sky);
}

.relay__core li .relay__icon {
  margin: 0 0 0.5rem;
  background: var(--paper);
}

.relay__core li:nth-child(3n + 2) .relay__icon { stroke: var(--sky); --icon-accent: var(--royal); }
.relay__core li:nth-child(3n) .relay__icon { stroke: var(--slate); --icon-accent: var(--sky); }

.relay__to .relay__icon {
  background: rgb(255 255 255 / 0.08);
  stroke: var(--screen-bright);
}

.relay .relay__ch-icon {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.25rem;
  vertical-align: -0.12rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  --icon-accent: currentColor;
}

.relay strong {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
}

.relay span {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}

.relay__from {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 40rem;
  width: 100%;
  margin-inline: auto;
}

.relay__from p,
.relay__to {
  margin: 0;
  max-width: none;
  padding: 0.85rem 1.1rem;
  border: 2px solid #c3d1e3;
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
}

.relay__core {
  padding: 1.25rem clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.75rem);
  border-radius: 16px;
  background: var(--paper);
  border: 2px solid var(--royal);
  box-shadow: 0 0.75rem 2rem -1.25rem rgb(68 114 196 / 0.55);
}

.relay__name {
  margin: 0 auto 1rem;
  font-family: var(--mark);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  letter-spacing: -0.025em;
  color: var(--slate);
  text-align: center;
}

.relay__name .two {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--sky);
}

.relay__core ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.relay__core li {
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background: var(--accent-wash);
  border-left: 3px solid var(--royal);
}

.relay__providers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.relay__providers li {
  padding: 0.75rem 0.6rem;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--rule);
  text-align: center;
}

.relay .relay__chs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.relay .relay__ch {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--wash);
  color: var(--slate);
}

.relay .relay__ch--s { background: var(--royal); color: #fff; }
.relay .relay__ch--e { background: var(--sky); color: var(--screen); }
.relay .relay__ch--w { background: var(--slate); color: #fff; }

.relay__to {
  max-width: 28rem;
  width: 100%;
  margin-inline: auto;
  background: var(--screen);
  border-color: var(--screen);
}

.relay__to strong {
  color: var(--screen-bright);
}

.relay__to span {
  color: var(--screen-text);
}

@media (max-width: 760px) {
  .relay__core ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .relay__providers li:last-child {
    grid-column: 1 / -1;
  }
}

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

.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each case opens on a picture of what it changed, on a tint of one of the
   three blades, in turn. */
.case {
  --tint: #e6eef9;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.case:nth-child(3n + 2) {
  --tint: #e5f0fa;
}

.case:nth-child(3n) {
  --tint: #e9edf2;
}

.case h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  color: var(--ink);
}

.case__tag {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-size: 0.8125rem;
  font-weight: 650;
}

.case__where {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.case__body {
  font-size: 0.9688rem;
}

.case__body p + p {
  margin-top: 0.7rem;
}

.case__more {
  align-self: flex-start;
  margin-top: auto;
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--sky);
}

.cases--one {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

.cases--one .case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.75rem 1.75rem;
  align-items: start;
}

.cases--one .scene {
  grid-row: span 3;
}

.cases--one .case__more {
  grid-column: 2;
}

@media (max-width: 600px) {
  .cases--one .case {
    grid-template-columns: 1fr;
  }

  .cases--one .case__more {
    grid-column: auto;
  }
}

.scene {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 140;
  border-radius: var(--radius);
  background: var(--tint);
}

.scene .r { fill: var(--royal); }
.scene .k { fill: var(--sky); }
.scene .s { fill: var(--slate); }
.scene .w { fill: #fff; }
.scene .l { fill: #cfdbea; }

.scene .card {
  fill: #fff;
  stroke: #c3d1e3;
  stroke-width: 1.5;
}

.scene__route,
.scene__link,
.scene__rule,
.scene__trend,
.scene__hand,
.scene__seam,
.scene__white,
.scene__grid,
.scene__pulse,
.scene__weave,
.scene__windows,
.scene__head {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene__route {
  stroke: var(--royal);
  stroke-width: 3;
  stroke-dasharray: 1 7;
}

.scene__link {
  stroke: var(--royal);
  stroke-width: 2.5;
  stroke-dasharray: 5 6;
}

.scene__rule {
  stroke: #a9b8cc;
  stroke-width: 2;
}

.scene__trend {
  stroke: var(--slate);
  stroke-width: 2.5;
}

.scene__trend--sky,
.scene__head {
  stroke: var(--royal);
  stroke-width: 3;
}

.scene__alert {
  stroke: var(--royal);
  stroke-width: 3;
}

.scene__hand {
  stroke: var(--slate);
  stroke-width: 2.5;
}

.scene__seam,
.scene__white,
.scene__windows {
  stroke: #fff;
  stroke-width: 2.5;
}

.scene__windows {
  stroke-width: 5;
  stroke-linecap: butt;
  opacity: 0.75;
}

.scene__grid {
  stroke: #fff;
  stroke-width: 1.5;
  opacity: 0.7;
}

.scene__weave {
  stroke: #fff;
  stroke-width: 1.8;
  opacity: 0.85;
}

.scene__pulse {
  stroke: var(--sky);
  stroke-width: 3.5;
}

.scene__old {
  opacity: 0.6;
}

.scene__figure,
.scene__glyph {
  fill: #fff;
  font-family: var(--display);
  font-weight: 700;
  text-anchor: middle;
}

.scene__figure {
  font-size: 17px;
}

.scene__glyph {
  fill: var(--royal);
  font-size: 17px;
}

@media (max-width: 960px) {
  .cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-size: 0.8125rem;
  font-weight: 600;
}

.next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.next h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 800;
  max-width: 22ch;
}

/* ---------------------------------------------------------------- footer */

.footer {
  background: var(--wash);
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3.5rem;
  font-size: 0.875rem;
  color: var(--slate);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 52rem) {
  .footer__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.4fr) auto;
    align-items: start;
  }
  .footer__inner .footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* On a phone the logo, the block of links and the butterfly stand centred. */
@media (max-width: 51.99rem) {
  .footer__brand {
    align-items: center;
    text-align: center;
  }

  .footer__butterfly {
    justify-self: center;
  }

  /* The block of links sits centred under the logo; the links inside it
     stay aligned to the left. */
  .footer .footer__columns {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    column-gap: clamp(2.5rem, 12vw, 4rem);
  }

  .footer .footer__base {
    justify-content: center;
    text-align: center;
  }
}

/* The alternative logo, the butterfly, hovering by the brand. Still for
   whoever asks for less motion. */
.footer__butterfly img {
  display: block;
  width: 6rem;
  height: auto;
}

.footer__brand .wordmark {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

.footer__brand p {
  max-width: 28ch;
}

.footer__line {
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--slate);
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 2rem 1.5rem;
}

.footer__column h2 {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.footer__column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.footer a {
  color: var(--slate);
  text-decoration: none;
}

.footer__column a:hover,
.footer__column a:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--muted);
}

.footer__base p {
  max-width: none;
}

/* ----------------------------------------------------------------- legal */

.legal {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
}

.legal__inner > [lang] {
  max-width: var(--measure);
}

.legal h1 {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  max-width: 20ch;
}

.legal__lead {
  margin-top: 1rem;
  font-size: 1.0625rem;
}

.legal h2 {
  font-size: 1.25rem;
  margin-top: 2.5rem;
}

.legal p,
.legal ul {
  margin-top: 0.9rem;
}

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

.legal__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem 1.5rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

@media (min-width: 34rem) {
  .legal__facts {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 0.6rem 1.5rem;
  }
}

.legal__facts dt {
  font-weight: 600;
  color: var(--muted);
}

.legal__facts dd {
  margin: 0 0 0.6rem;
  color: var(--ink);
}

@media (min-width: 34rem) {
  .legal__facts dd {
    margin-bottom: 0;
  }
}

/* The icon sprite: defined once per page, drawn wherever `use` names it. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

.accent {
  stroke: var(--icon-accent);
}

/* A product's name in the menu: the wordmark's face, as everywhere. */
.sub__menu strong:not([lang]) {
  font-family: var(--mark);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--slate);
}

/* Pillars that carry an icon above their title. */
.pillars--icons li {
  padding-top: 1.1rem;
}

.pillars__icon {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  background: var(--accent-wash);
  stroke: var(--royal);
}

/* ----------------------------------------------------------------- steps */

/* A product's few steps, in order, joined by the path the work follows. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding: 1.5rem 1.35rem 1.35rem;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--rule);
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent-wash);
}

.steps li + li::after {
  content: "";
  position: absolute;
  top: 2.6rem;
  right: 100%;
  width: clamp(1.5rem, 4vw, 3.5rem);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--sky) 0 6px, transparent 6px 11px);
}

.steps__icon {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.55rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--accent-wash);
  stroke: var(--royal);
}

.steps strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ink);
}

.steps span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9688rem;
  color: var(--muted);
}

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

  .steps li + li::after {
    top: auto;
    bottom: 100%;
    right: auto;
    left: 2.7rem;
    width: 2px;
    height: clamp(1.5rem, 4vw, 3.5rem);
    background: repeating-linear-gradient(180deg, var(--sky) 0 6px, transparent 6px 11px);
  }
}

/* ------------------------------------------------------------------- cta */

/* The closing call to action: navy and a stripe, nothing like the footer below. */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--screen);
  color: var(--screen-text);
}

.cta::before,
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: 260% 100%;
  animation: gleam 9s linear infinite;
}

.cta::before {
  background-image: linear-gradient(90deg, var(--sky) 0 38%, #8cbbe6 47%, var(--sky) 56% 100%);
  clip-path: polygon(0 calc(100% - 2.6rem), 100% calc(100% - 7.4rem), 100% calc(100% - 6.2rem), 0 calc(100% - 1.4rem));
}

.cta::after {
  background-image: linear-gradient(90deg, var(--royal) 0 38%, #6f93d6 47%, var(--royal) 56% 100%);
  clip-path: polygon(0 calc(100% - 0.6rem), 100% calc(100% - 5.4rem), 100% calc(100% - 3.4rem), 0 calc(100% + 1.4rem));
  animation-delay: -4.5s;
}

.cta > .shell {
  padding-bottom: 3rem;
}

.cta .next h2 {
  color: var(--screen-bright);
}

.cta .button--quiet {
  background: transparent;
  border-color: rgb(255 255 255 / 0.55);
  color: #fff;
}

.cta .button--quiet:hover,
.cta .button--quiet:focus-visible {
  background: rgb(255 255 255 / 0.1);
  border-color: #fff;
}

.cta :focus-visible {
  outline-color: #fff;
}

@media (max-width: 760px) {
  .cta::before {
    clip-path: polygon(0 calc(100% - 2.2rem), 100% calc(100% - 4.4rem), 100% calc(100% - 3.6rem), 0 calc(100% - 1.4rem));
  }

  .cta::after {
    clip-path: polygon(0 calc(100% - 0.6rem), 100% calc(100% - 2.8rem), 100% calc(100% - 1.6rem), 0 calc(100% + 0.6rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta::before,
  .cta::after {
    animation: none;
  }
}