/* Anodyne site. Plain CSS, no framework. */

@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/nunito-sans-latin-wght.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --accent: #0E6A80;
  --ink: #4F5862;
  --bg: #FFFFFF;
  --rule: #DCDEE0;    /* ink, 20% tint */
  --gutter: clamp(20px, 5.6vw, 88px);
  --ease: cubic-bezier(0.3, 0.1, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Avenir Next", "Nunito Sans", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img {
  max-width: 100%;
}

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

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

h1,
h2,
p,
ul {
  margin: 0;
}

/* Header and footer: shared by all pages.
   The header holds the wordmark, the main links and the "Talk to us" button. At 960 px and wider it sits over the top of the first section, with the links and the button at the right.
   Under 960 px it is a block of fixed height (--header-h): the wordmark and the button, then one row of links under them. */

:root {
  --header-h: 120px;   /* the height of the header under 960 px */
}

.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  padding: 32px var(--gutter);
}

.brand {
  display: block;
  flex: none;
}

.brand img {
  display: block;
  width: auto;
  height: 84px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 36px;
  margin-left: auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.site-nav a {
  padding: 8px 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--accent);
}

.site-nav > a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

.nav-cta {
  flex: none;
  padding: 8px 18px;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.nav-cta:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* The Examples menu: a details element, so that it opens with no script. nav.js closes it on a click outside and on Escape.
   The open list has an opaque background, because the graph layer is under the header. */

.nav-menu {
  position: relative;
}

.nav-menu summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  color: var(--ink);
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}

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

.nav-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.nav-menu[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.nav-menu summary:hover,
.nav-menu[open] summary {
  color: var(--accent);
}

.nav-menu summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.nav-menu-list {
  position: absolute;
  top: calc(100% + 10px);
  left: -20px;
  z-index: 4;
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--bg);
  border: 1px solid #CFE1E6;   /* accent, 20% tint */
  border-radius: 2px;
  box-shadow: 0 12px 32px rgba(79, 88, 98, 0.12);
}

.site-nav .nav-menu-list a {
  display: block;
  padding: 10px 20px;
}

.site-nav .nav-menu-list a:hover,
.site-nav .nav-menu-list a:focus-visible {
  background: #EEF5F6;   /* accent, 7% tint */
  color: var(--accent);
}

.site-nav .nav-menu-list a:focus-visible {
  outline-offset: -2px;
}

.site-nav .nav-menu-list a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 32px var(--gutter);
  font-size: 14px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.site-footer a {
  color: var(--ink);
  text-underline-offset: 4px;
}

.site-footer a:hover {
  color: var(--accent);
}

@media (max-width: 959px) {
  .site-header {
    position: static;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand cta" "nav nav";
    align-content: center;
    align-items: center;
    gap: 6px 16px;
    height: var(--header-h);
    padding: 0 var(--gutter);
  }

  .brand {
    grid-area: brand;
    justify-self: start;
  }

  .brand img {
    height: 52px;
  }

  .site-nav {
    grid-area: nav;
    flex-wrap: nowrap;
    gap: 18px;
    margin-left: 0;
    font-size: 15px;
  }

  .site-nav a,
  .nav-menu summary {
    padding: 7px 0;
  }

  .nav-cta {
    grid-area: cta;
    padding: 6px 12px;
    font-size: 15px;
  }

  .site-nav .nav-menu-list a {
    padding: 10px 16px;
  }

  .nav-menu-list {
    left: 0;
  }
}

/* Shared type */

.eyebrow {
  margin-bottom: 28px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Story: the hero and the steps. The text keeps to the left; the graph is one layer behind the whole page. */

.story {
  position: relative;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 156px var(--gutter) 112px;
}

.hero h1 {
  max-width: 11ch;
  margin-bottom: 32px;
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.lede {
  max-width: 27ch;
  margin-bottom: 44px;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
}

.hero .lede {
  max-width: 34ch;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.button {
  display: inline-block;
  padding: 17px 30px;
  border-radius: 2px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.button:hover {
  background: var(--ink);
}

/* The three short points under the button, with an accent dot between them */

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 32px;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
}

.hero-points li {
  display: flex;
  align-items: center;
}

.hero-points li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin: 0 16px;
  border-radius: 50%;
  background: var(--accent);
}

.step {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 0 var(--gutter);
}

.step:last-of-type {
  min-height: 110vh;
}

.step-body {
  max-width: min(34rem, 40vw);
}

.step-body::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 36px;
  background: var(--accent);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}

.js .step-body::before {
  opacity: 0.35;
  transform: scaleX(0.4);
}

.js .step.is-active .step-body::before {
  opacity: 1;
  transform: none;
}

.step h2 {
  margin-bottom: 24px;
  font-size: clamp(40px, 4.3vw, 66px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

.step p {
  max-width: 26ch;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.45;
}

/* The graph.
   No script: a static picture that sticks to the right half, beside the text.
   With script: one fixed layer behind the whole page. graph.js projects the 3D positions on each frame. */

.scene {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
}

.graph {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
}

/* The large viewport height keeps the layer still when a phone shows or hides its toolbars. */
.js .scene {
  position: fixed;
  bottom: auto;
  left: 0;
  width: auto;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
}

.js .graph {
  position: static;
  height: 100%;
}

.graph .edge,
.graph .node,
.graph .lbl,
.graph .cap {
  transform-origin: 0 0;
}

.graph text {
  font-family: "Avenir Next", "Nunito Sans", sans-serif;
  font-weight: 500;
}

.js .graph .labels {
  font-size: var(--lf, 18px);
}

.graph .ct {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.js .graph .caps {
  font-size: var(--cf, 14px);
}

.graph .n1,
.graph .n2,
.graph .e1,
.graph .e2,
.graph .g1,
.graph .g2 {
  transition: opacity 0.5s ease;
}

/* n2 and e2: the light accent state of a node and the lighter accent of a link. g1 and g2: the rings that show the overlap. */
.graph .n2,
.graph .e2,
.graph .g1,
.graph .g2 {
  opacity: 0;
}

.js .graph.focus .node:not(.on) .n1,
.js .graph.focus .edge:not(.on) .e1 {
  opacity: 0;
}

.graph .n0,
.graph .e0 {
  transition: opacity 0.5s ease;
}

/* On the scroll from the hero to step 1, graph.js sets the opacity of these layers on each frame, so they have no transition. */
.js .graph.blend .n1,
.js .graph.blend .n2,
.js .graph.blend .e1,
.js .graph.blend .e2,
.js .graph.blend .g1,
.js .graph.blend .g2 {
  transition: none;
}

/* When only the middle tier is active, the apps, the systems and their links go lighter. */
.js .graph.flat .node:not(.t-mid) .n0,
.js .graph.flat .edge.v .e0 {
  opacity: 0.35;
}

/* With no step active, a link between two tiers shows in the light tint, so the middle tier reads first. */
.graph:not(.focus) .edge.v .e1 {
  opacity: 0;
}

.js .graph.focus .node.soft .n2,
.js .graph.focus .edge.soft .e2,
.js .graph.focus .node.r1 .g1,
.js .graph.focus .node.r2 .g2 {
  opacity: 1;
}

.js .graph .lt,
.js .graph .ct {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.js .graph.focus .lbl.on .lt,
.js .graph.focus .cap.on .ct {
  opacity: 1;
  transition: opacity 0.5s ease 0.2s;
}

/* No script: the step text carries the meaning, so the static picture has no names. */
html:not(.js) .graph .labels,
html:not(.js) .graph .caps {
  display: none;
}

/* Points */

.points {
  padding: clamp(96px, 11vw, 168px) var(--gutter);
}

.points-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px;
  padding: 0;
  list-style: none;
}

.points-list li {
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 500;
  line-height: 1.4;
}

.points-list li::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 25px;
  background: var(--accent);
}

/* Home sections after the points: Method, What runs on Anodyne and the examples (id industries).
   Each section has space only at the bottom, so the space between two sections stays the same as after the points. */

.method,
.capabilities,
.industries {
  padding: 0 var(--gutter) clamp(96px, 11vw, 168px);
}

.method h2,
.capabilities h2,
.industries h2 {
  font-size: clamp(40px, 4.3vw, 66px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

.method h2,
.capabilities h2,
.industries-head {
  margin-bottom: clamp(48px, 5vw, 80px);
}

.method-list h3,
.tile h3,
.industry-card h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Method: three columns, joined by one line in the logo grammar (ink nodes, straight accent lines).
   Each column draws its node, and the line to the next node with a small gap at each end. */

.method-list {
  --node: 20px;
  --gap: 5px;
  --stroke: 4px;
  --col: clamp(32px, 4vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col);
  margin: 0;
  padding: 0;
  list-style: none;
}

.method-list li {
  position: relative;
}

.method-list li::before {
  content: "";
  display: block;
  width: var(--node);
  height: var(--node);
  margin-bottom: 36px;
  border-radius: 50%;
  background: var(--ink);
}

.method-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc((var(--node) - var(--stroke)) / 2);
  left: calc(var(--node) + var(--gap));
  width: calc(100% + var(--col) - var(--node) - 2 * var(--gap));
  height: var(--stroke);
  background: var(--accent);
}

.method-list h3 {
  margin-bottom: 16px;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.1;
}

.method-list p {
  max-width: 30ch;
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.5;
}

.method-close {
  margin-top: clamp(56px, 6vw, 96px);
  color: var(--accent);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* What runs on Anodyne: four tiles on one base. The accent strip under the tiles is Prove, which runs under all four.
   The tiles and the strip are opaque, and graph.js keeps the graph clear of them. */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #CFE1E6;   /* accent, 20% tint */
  border-bottom: 0;
  background: var(--bg);
}

.tile {
  padding: clamp(28px, 2.6vw, 44px) clamp(24px, 2.2vw, 36px) clamp(36px, 3.6vw, 60px);
}

.tile + .tile {
  border-left: 1px solid #CFE1E6;
}

.tile h3 {
  margin-bottom: 14px;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.15;
}

.tile p {
  font-size: 18px;
  line-height: 1.45;
}

/* The link in the Automate tile, to the Automations page */
.tile-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  text-underline-offset: 4px;
}

.tile-link:hover {
  color: var(--ink);
}

.prove-strip {
  padding: 22px clamp(24px, 2.2vw, 36px);
  background: var(--accent);
  color: #FFFFFF;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 500;
  line-height: 1.4;
}

/* Examples: "Built around how your business works", then one card for each example page, in alphabetical order. Each whole card is a link to its page.
   No heading gives a count of industries. */

.industries-line {
  max-width: 46ch;
  margin-top: 24px;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.5;
}

.industries-sub {
  margin-bottom: 24px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.industries-more {
  margin-top: 32px;
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.45;
}

.industries-more a {
  font-weight: 600;
  text-underline-offset: 4px;
}

.industries-more a:hover {
  color: var(--ink);
}

.industry-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.industry-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: clamp(260px, 22vw, 320px);
  padding: clamp(28px, 2.6vw, 44px) clamp(24px, 2.2vw, 36px);
  border: 1px solid #CFE1E6;   /* accent, 20% tint */
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.industry-card:hover {
  border-color: var(--accent);
}

.industry-card h3 {
  margin-bottom: 16px;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.15;
  transition: color 0.2s ease;
}

.industry-card:hover h3 {
  color: var(--accent);
}

.industry-card p {
  margin-bottom: 36px;
  font-size: 18px;
  line-height: 1.45;
}

/* The arrow: a straight accent line with a point, at the bottom of the card. It moves a little to the right on hover. */
.industry-go {
  position: relative;
  flex: none;
  width: 36px;
  height: 2px;
  margin-top: auto;
  background: var(--accent);
  transition: transform 0.2s ease;
}

.industry-go::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
}

.industry-card:hover .industry-go {
  transform: translateX(6px);
}

/* Systems */

.systems {
  padding-bottom: clamp(96px, 11vw, 168px);
}

.systems .eyebrow {
  padding: 0 var(--gutter);
  margin-bottom: 20px;
}

.marquee {
  overflow: hidden;
  padding: 16px 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 80s linear infinite;
}

.marquee-list {
  display: flex;
  align-items: center;
  padding: 0;
  list-style: none;
}

.marquee-list li {
  display: flex;
  align-items: center;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.3;
  white-space: nowrap;
}

.marquee-list li::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 clamp(28px, 3.2vw, 52px);
  border-radius: 50%;
  background: var(--accent);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.trademark {
  margin-top: 20px;
  padding: 0 var(--gutter);
  font-size: 14px;
}

/* Call to action */

.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: clamp(96px, 12vw, 184px) var(--gutter);
}

.contact-mark {
  flex: none;
  width: auto;
  height: clamp(180px, 20vw, 280px);
  margin-right: clamp(0px, 4vw, 80px);
}

.contact h2 {
  margin-bottom: 32px;
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

.contact-text {
  max-width: 34ch;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
}

.contact-close {
  margin: 24px 0 44px;
  color: var(--accent);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.4;
}

.contact-link {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  overflow-wrap: anywhere;
}

.contact-link:hover {
  color: var(--ink);
}

/* Under 960 px: the graph stays one fixed layer. Its active flow uses the upper part of the screen, and the step text sits low. */

@media (max-width: 959px) {
  /* The header is --header-h high. The hero keeps the rest of the first screen, so the steps keep their place. */
  .hero {
    justify-content: flex-start;
    min-height: 0;
    padding: 24px var(--gutter) 64px;
  }

  .js .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
  }

  .hero h1 {
    margin-bottom: 24px;
  }

  .lede {
    margin-bottom: 36px;
  }

  /* The points under the button: one under the other, each with its dot in front. */
  .hero-points {
    flex-direction: column;
    gap: 6px;
    margin-top: 28px;
    font-size: 15px;
  }

  .hero-points li:not(:last-child)::after {
    display: none;
  }

  .hero-points li::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    margin-right: 12px;
    border-radius: 50%;
    background: var(--accent);
  }

  .step-body {
    max-width: 34rem;
  }

  .step {
    align-items: flex-start;
    min-height: 0;
    padding: 56px var(--gutter);
  }

  .js .step {
    min-height: 100vh;
    min-height: 100svh;
    padding: 58vh var(--gutter) 0;
    padding-top: 58svh;
  }

  .js .step:last-of-type {
    min-height: 110vh;
    min-height: 110svh;
  }

  .step h2 {
    margin-bottom: 14px;
    font-size: clamp(30px, 8.4vw, 40px);
  }

  .step p {
    font-size: 19px;
  }

  .step-body::before {
    margin-bottom: 24px;
  }

  /* No script: the static picture sits between the hero and the steps. */
  .scene {
    position: static;
    width: auto;
    height: 56vh;
    padding: 0 var(--gutter);
  }

  .graph {
    position: static;
    height: 100%;
  }

  .js .scene {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 100vh;
    height: 100lvh;
    padding: 0;
  }

  .points-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .method h2,
  .capabilities h2,
  .industries h2 {
    font-size: clamp(30px, 8.4vw, 40px);
  }

  .method h2,
  .capabilities h2,
  .industries-head {
    margin-bottom: 36px;
  }

  /* Method: one column. The node sits at the left of each name, and the line runs down to the next node. */
  .method-list {
    --name-lh: 32px;
    grid-template-columns: minmax(0, 1fr);
  }

  .method-list li {
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    column-gap: 20px;
    padding-bottom: 36px;
  }

  .method-list li:last-child {
    padding-bottom: 0;
  }

  .method-list li::before {
    grid-row: 1 / span 2;
    align-self: start;
    margin: calc((var(--name-lh) - var(--node)) / 2) 0 0;
  }

  .method-list li:not(:last-child)::after {
    top: calc((var(--name-lh) + var(--node)) / 2 + var(--gap));
    bottom: calc(var(--gap) - (var(--name-lh) - var(--node)) / 2);
    left: calc((var(--node) - var(--stroke)) / 2);
    width: var(--stroke);
    height: auto;
  }

  .method-list h3 {
    grid-column: 2;
    margin-bottom: 8px;
    font-size: 28px;
    line-height: var(--name-lh);
  }

  .method-list p {
    grid-column: 2;
    font-size: 18px;
  }

  .method-close {
    margin-top: 40px;
    font-size: 22px;
  }

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

  .tile {
    padding: 24px 20px 28px;
  }

  .tile + .tile {
    border-top: 1px solid #CFE1E6;
    border-left: 0;
  }

  .tile h3 {
    margin-bottom: 8px;
    font-size: 26px;
  }

  .prove-strip {
    padding: 18px 20px;
    font-size: 18px;
  }

  .industries-line {
    margin-top: 16px;
    font-size: 19px;
  }

  .industry-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .industry-card {
    min-height: 0;
    padding: 24px 20px;
  }

  .industry-card h3 {
    margin-bottom: 8px;
    font-size: 26px;
  }

  .industry-card p {
    margin-bottom: 24px;
  }

  .contact-text,
  .contact-close {
    font-size: 19px;
  }

  .contact {
    display: block;
  }

  .contact-mark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graph .n0,
  .graph .e0,
  .graph .n1,
  .graph .n2,
  .graph .e1,
  .graph .e2,
  .graph .g1,
  .graph .g2,
  .js .graph .lt,
  .js .graph .ct,
  .js .graph.focus .lbl.on .lt,
  .js .graph.focus .cap.on .ct,
  .step-body::before,
  .button,
  .industry-card,
  .industry-card h3,
  .industry-go {
    transition: none;
  }

  .industry-card:hover .industry-go {
    transform: none;
  }

  .marquee-track {
    width: auto;
    animation: none;
  }

  .marquee-list {
    flex-wrap: wrap;
    gap: 12px clamp(28px, 3.2vw, 52px);
    padding: 0 var(--gutter);
  }

  .marquee-list[aria-hidden="true"],
  .marquee-list li::after {
    display: none;
  }
}