/* ==========================================================================
   Logically Us · site.css

   One stylesheet for the whole site, in this order:

    1. Fonts          DM Sans and DM Mono, served from /fonts
    2. Tokens         colours, type, spacing
    3. Base           element defaults
    4. Layout         page width, sections, section heads, rows
    5. Type           shared text styles
    6. Components     buttons, links, pills, lists, cards, boxes, figures,
                      the comparison table, the form, long-form text
    7. Site header and footer
    8. Page sections  Home, Consultancy, Rio platform, About, Privacy policy
    9. Diagrams       Home "How it fits together", the Rio port map
   10. Motion         keyframes, and what changes for reduced motion

   Class names follow BEM: .block, .block__element, .block--modifier.
   Colours and sizes that recur live in the tokens; one-off values sit in
   the rule that uses them.
   ========================================================================== */


/* 1. Fonts
   -------------------------------------------------------------------------- */

/* DM Sans (variable: weight and optical size) and DM Mono, both under the
   SIL Open Font Licence (see the OFL files in /fonts). Each comes in two
   parts: Latin, and Latin Extended for accented letters, which browsers
   download only when a page needs them. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(../fonts/dm-sans-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(../fonts/dm-sans-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/dm-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/dm-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/dm-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/dm-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand colours, from the Oversee design system */
  --steel: #3b5e77;          /* primary */
  --deep: #2c4a60;           /* primary, darker */
  --ink: #1f2f3a;            /* body text */
  --muted: #4f6578;          /* secondary text */
  --night: #131c24;          /* dark surfaces */
  --night-raised: #1b2833;   /* cards on dark surfaces */
  --accent: #7fb56a;         /* decorative green: marks, lines, the headline */
  --live: #4fc27d;           /* status green, for live readings on dark */
  --danger: #b0302c;         /* errors: the form's messages, fields to correct */

  /* Light surfaces */
  --paper: #ffffff;
  --mist: #f4f6f8;
  --fog: #e9eef2;
  --tint: #f7f9fa;

  /* Text and marks on dark surfaces */
  --on-dark: #e8eef3;
  --on-dark-muted: #9fb2c1;
  --on-dark-link: #a8c4da;
  --on-dark-soft: #c9d5df;   /* footer links */
  --on-deep: #d3e0ea;        /* on the deep blue band */
  --on-deep-soft: #c9d8e4;   /* on the deep blue Rio card */
  --on-steel: #e3ecf3;       /* on steel blue */
  --steel-light: #6f93ad;

  /* Channels for lines and fades: rgb(var(--steel-rgb) / .14) */
  --steel-rgb: 59 94 119;
  --accent-rgb: 127 181 106;
  --night-rgb: 19 28 36;

  /* Type */
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --text-display: clamp(36px, 1.6rem + 3vw, 76px);
  --text-h2: clamp(30px, 1.3rem + 1.9vw, 50px);
  --text-h3-lg: clamp(24px, 1.1rem + 0.8vw, 32px);
  --text-lead: clamp(17px, 0.9rem + 0.35vw, 20px);
  --text-nav: clamp(14px, 0.6vw + 11px, 15px);

  /* Space */
  --page-width: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --space-section: clamp(64px, 8vw, 112px);
  --space-hero: clamp(56px, 7vw, 104px);
  --gap-section: clamp(32px, 4vw, 56px);
}


/* 3. Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-sans);
}

h1, h2, h3, h4, p, figure, dl, dd {
  margin: 0;
}

/* Every list on the site is laid out by its own component */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Footnote marks: raised without opening up the line */
sup {
  position: relative;
  top: -.5em;
  font-size: .65em;
  line-height: 0;
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}


/* 4. Layout
   -------------------------------------------------------------------------- */

/* The page column: 1240px wide at most, with side gutters */
.wrap {
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section backgrounds */
.section--white { background: var(--paper); }
.section--mist  { background: var(--mist); }
.section--fog   { background: var(--fog); }
.section--night { background: var(--night); color: var(--on-dark); }
.section--deep  { background: var(--deep); color: #fff; }

/* The usual section: vertical padding, and its parts stacked */
.section__body {
  padding-block: var(--space-section);
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}
.section__body--gap-sm { gap: clamp(28px, 3vw, 40px); }
.section__body--gap-md { gap: clamp(32px, 4vw, 48px); }

/* Eyebrow and title at the top of a section */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}
.section-head--narrow { max-width: 640px; }
.section-head--medium { max-width: 720px; }
.section-head--wide   { max-width: 900px; }

/* A section head with a short paragraph beside it, wrapping below on
   narrow screens */
.split-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 64px;
}
.split-head__text         { max-width: 460px; }
.split-head__text--narrow { max-width: 420px; }
.split-head__text--wide   { max-width: 480px; }

/* A plain column with 16px between its parts */
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* A hero's lead paragraph with its buttons beside it */
.lead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* 5. Type
   -------------------------------------------------------------------------- */

.eyebrow {
  font: 500 14px/1.4 var(--font-mono);
  letter-spacing: .02em;
  color: var(--steel);
}
.eyebrow--on-dark { color: var(--on-dark-link); }

.display {
  font-size: var(--text-display);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display--on-dark { color: #fff; }

.h2,
.cta__title {
  font-size: var(--text-h2);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.h2 { text-wrap: balance; }
.h2--on-dark { color: #fff; }

/* Headings inside sections and cards, largest first */
.title-lg {
  font-size: var(--text-h3-lg);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.title    { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.title-sm { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.title-xs { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

/* Running text, largest first */
.lead {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.lead--on-dark { color: var(--on-dark-muted); }

.text-xl { font-size: 18px; line-height: 1.6; color: var(--muted); }
.text-lg { font-size: 17px; line-height: 1.6; color: var(--muted); }
.text    { font-size: 16px; line-height: 1.6; color: var(--muted); }
.text-sm { font-size: 15px; line-height: 1.6; color: var(--muted); }
.text-lg--on-dark,
.text-sm--on-dark { color: var(--on-dark-muted); }

/* Short descriptions: 15px, set a little tighter */
.blurb { font-size: 15px; line-height: 1.55; color: var(--muted); }
.blurb--on-dark  { color: var(--on-dark-muted); }
.blurb--on-steel { color: var(--on-steel); }

.meta { font-size: 14px; color: var(--muted); }

/* Small monospace labels: card numbers, kinds, stages */
.label {
  font: 500 13px/1 var(--font-mono);
  color: var(--steel);
}

.caption {
  font: 400 13px/1.5 var(--font-mono);
  color: var(--muted);
}
.caption--on-dark { color: var(--on-dark-muted); }

.accent-text { color: var(--accent); }

/* Read by screen readers, not shown */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


/* 6. Components
   -------------------------------------------------------------------------- */

/* Buttons, on links and on <button> */
.btn {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  font: 500 16px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.btn--light { background: #fff; color: var(--ink); }
.btn--steel { background: var(--steel); color: #fff; }
.btn--ghost-dark {
  padding: 0 22px;
  border: 1px solid rgb(255 255 255 / .28);
  background: transparent;
  color: var(--on-dark);
}
.btn--outline {
  height: 44px;
  padding: 0 18px;
  border: 1px solid rgb(var(--steel-rgb) / .35);
  background: #fff;
  color: var(--deep);
  font-size: 15px;
}

/* A text link followed by an arrow icon */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  width: fit-content;
  font-size: 16px;
  font-weight: 500;
  color: var(--deep);
  text-decoration: none;
}

/* Icons drawn with stroke="currentColor" */
.icon { color: var(--steel); }

/* Pills: protocols, standards, capabilities */
.pill-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pill-group__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgb(var(--steel-rgb) / .2);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
}
.pill--protocol {
  background: #fff;
  font: 500 14px/1 var(--font-mono);
  color: var(--ink);
}
.pill--more {
  border: 1px dashed rgb(var(--steel-rgb) / .35);
  color: var(--deep);
}
.pill--sm {
  height: 36px;
  padding: 0 12px;
  border-color: rgb(var(--steel-rgb) / .18);
  background: #fff;
  font-size: 14px;
}

/* A list with a small square before each item */
.ticks {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgb(var(--steel-rgb) / .12);
}
.ticks__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgb(var(--steel-rgb) / .12);
  font-size: 16px;
}
.ticks__mark {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--steel);
}
.ticks__mark--accent { background: var(--accent); }

/* A ruled list of features */
.feature-list {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgb(var(--steel-rgb) / .12);
}
.feature-list__item {
  padding: 11px 0;
  border-bottom: 1px solid rgb(var(--steel-rgb) / .12);
  font-size: 16px;
}

/* Cards */
.card {
  background: var(--mist);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.challenge-card__title { line-height: 1.3; }

.service-card {
  background: #fff;
  border: 1px solid rgb(var(--steel-rgb) / .14);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-card {
  background: var(--mist);
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oversee-card {
  background: #fff;
  border: 1px solid rgb(var(--steel-rgb) / .14);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.principle-card {
  background: var(--mist);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* A box in a diagram: the systems Rio reads from and delivers to, and the
   gateway's ports */
.node {
  min-height: 64px;
  padding: 8px 16px;
  border: 1px solid rgb(var(--steel-rgb) / .16);
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.node--tint   { background: var(--tint); }
.node--accent { border-color: rgb(var(--accent-rgb) / .45); }
.node__title  { font-size: 16px; line-height: 1.3; font-weight: 600; }
.node__detail { font-size: 14px; line-height: 1.4; color: var(--muted); }

/* Specification and company details lists: a term above its value */
.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0 32px;
}
.spec__row {
  padding: 16px 0;
  border-top: 1px solid rgb(var(--steel-rgb) / .16);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.details {
  display: flex;
  flex-direction: column;
}
.details__row {
  padding: 13px 0;
  border-top: 1px solid rgb(var(--steel-rgb) / .12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spec__term,
.details__term {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.spec__value,
.details__value { font-size: 16px; }
.details__value--mono { font: 400 15px/1.5 var(--font-mono); }
.details__note { font-size: 13px; color: var(--muted); }
.details__link { color: var(--deep); }

/* A screenshot with its caption */
.shot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shot__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(var(--steel-rgb) / .16);
  border-radius: 14px;
}
/* Two screenshots taking turns in one frame (the Logic editor and triage
   mode on the Rio page): the second fades in over the first, holds, and
   fades out, with its caption. Both images share one shape. Hovering pauses
   them, so either can be read */
.shot__frames,
.shot__captions { display: grid; }
.shot__frames > *,
.shot__captions > * { grid-area: 1 / 1; }
.shot__caption { animation: shot-first 14s ease-in-out infinite; }
.shot__img--second,
.shot__caption--second { animation: shot-second 14s ease-in-out infinite; }
.shot--swap:hover :is(.shot__img--second, .shot__caption) { animation-play-state: paused; }

/* The comparison table: scrolls sideways on a phone */
.compare-table__scroll {
  overflow-x: auto;
  background: #fff;
  border: 1px solid rgb(var(--steel-rgb) / .14);
  border-radius: 16px;
}
.compare-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
/* The column widths were set with padding outside them */
.compare-table th,
.compare-table td {
  box-sizing: content-box;
  padding: 16px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(var(--steel-rgb) / .1);
}
.compare-table thead th {
  padding-block: 18px;
  vertical-align: middle;
  border-bottom-color: rgb(var(--steel-rgb) / .14);
}
.compare-table thead th:nth-child(1) { width: 18%; }
.compare-table thead th:nth-child(2),
.compare-table thead th:nth-child(3) { font: 500 13px/1.4 var(--font-mono); }
.compare-table thead th:nth-child(2) { width: 38%; color: var(--muted); }
.compare-table thead th:nth-child(3) { width: 44%; color: var(--steel); background: var(--tint); }
.compare-table tbody th { font-weight: 600; }
.compare-table tbody td:nth-of-type(1) { color: var(--muted); }
.compare-table tbody td:nth-of-type(2) { background: var(--tint); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }

/* Form fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label { font-size: 14px; font-weight: 500; }
.field__hint  { font-weight: 400; color: var(--muted); }
.field__control {
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgb(var(--steel-rgb) / .3);
  border-radius: 12px;
  background: #fff;
  font: 400 16px var(--font-sans);
  color: var(--ink);
}
.field__control--area {
  height: auto;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
/* A field the form handler sent back to be corrected */
.field__control[aria-invalid="true"] { border-color: var(--danger); }
/* The decoy field: off screen and out of the tab order, so only a bot that
   fills in every field it finds puts anything in it */
.field--decoy {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Long-form text: the privacy policy. Its paragraphs, lists and headings
   are plain elements, styled here rather than given a class each */
.prose {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  overflow-wrap: break-word;
}
.prose :is(p, li) { text-wrap: pretty; }
.prose h3 {
  margin-top: 10px;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.prose ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* A small square before each item, level with its first line */
.prose li {
  position: relative;
  padding-left: 24px;
}
.prose li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: calc(.825em - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--steel);
}
.prose strong { font-weight: 600; }
.prose a {
  color: var(--deep);
  text-underline-offset: .18em;
}


/* 7. Site header and footer
   -------------------------------------------------------------------------- */

.site-header {
  background: #fff;
  border-bottom: 1px solid rgb(var(--steel-rgb) / .14);
}
.site-header__inner {
  padding-block: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
}
.site-header__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.site-header__logo img {
  display: block;
  width: auto;
  height: 36px;
}
.site-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 18px;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
}
.site-nav__link {
  display: block;
  padding: 11px 0;
  border-bottom: 2px solid transparent;
  font-size: var(--text-nav);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--steel);
  color: var(--ink);
}
.site-header__cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--steel);
  color: #fff;
  font-size: var(--text-nav);
  font-weight: 500;
  text-decoration: none;
}

.site-footer {
  background: var(--night);
  color: var(--on-dark);
}
.site-footer__inner {
  padding-block: 64px 32px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 40px 32px;
}
.site-footer__brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-footer__logo {
  display: block;
  width: fit-content;
}
.site-footer__logo img {
  display: block;
  width: auto;
  height: 40px;
}
.site-footer__tagline {
  max-width: 260px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-dark-muted);
}
.site-footer__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-footer__heading {
  margin-bottom: 8px;
  font: 500 13px/1.4 var(--font-mono);
  letter-spacing: .02em;
  color: var(--on-dark-link);
}
.site-footer__link {
  padding: 5px 0;
  font-size: 15px;
  color: var(--on-dark-soft);
  text-decoration: none;
}
.site-footer__link--bright { color: var(--on-dark); }
.site-footer__legal {
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / .1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}


/* 8. Page sections
   -------------------------------------------------------------------------- */

/* --- Shared by several pages ---------------------------------------------- */

/* The hero on Consultancy, Rio platform and About */
.page-hero__body {
  padding-block: var(--space-hero) clamp(48px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.page-hero__body--tall { padding-bottom: var(--space-section); }
.page-hero__title { max-width: 1060px; }
.page-hero__lead { max-width: 720px; }
.page-hero__lead--narrow { max-width: 680px; }

/* The closing call to action, on the deep blue band */
.cta__body {
  padding-block: clamp(56px, 7vw, 96px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 64px;
}
.cta__copy {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cta__text { color: var(--on-deep); }
.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.cta__contact {
  font: 400 14px/1.6 var(--font-mono);
  color: var(--on-deep);
}

/* --- Home ----------------------------------------------------------------- */

/* Hero: the headline over the live 3D unit */
.hero { overflow: hidden; }
.hero__body {
  padding-top: var(--space-hero);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* The headline's second phrase always starts a new line, so it reads as two
   halves at any width. No max-width: the type grows with the window, and a
   fixed cap would push the headline onto a third line on wide screens. */
.hero__title-end { display: block; }
.hero__lead { max-width: 600px; }
.hero__media {
  max-width: 1600px;
  margin: clamp(8px, 2vw, 24px) auto 0;
  display: flex;
  flex-direction: column;
}
/* The picture and the readings over it. The stage is a container, so the
   readings can size and place themselves by the picture's width */
.hero__stage {
  position: relative;
  container-type: inline-size;
}
.hero__video,
.hero__still {
  width: 100%;
  height: clamp(220px, 40vw, 640px);
  object-fit: cover;
  object-position: 50% 55%;
}
.hero__video { display: block; }
/* The picture fades into the section's own colour at every edge */
.hero__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--night), rgb(var(--night-rgb) / 0) 8%, rgb(var(--night-rgb) / 0) 92%, var(--night)),
    linear-gradient(to right, var(--night), rgb(var(--night-rgb) / 0) 5%, rgb(var(--night-rgb) / 0) 95%, var(--night));
}
.hero__readings {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Phones and small tablets: the whole unit, a little smaller, with room
   above (44px) and below (28px) for the readings to sit around it */
@container (width < 720px) {
  .hero__video,
  .hero__still {
    height: 44cqw;
    margin: 44px 0 28px;
  }
  .hero__fade { inset: 44px 0 28px; }
}
.hero__caption {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 4px var(--gutter) clamp(40px, 5vw, 64px);
  text-wrap: balance;
}

/* A live reading floating over the unit. Its size follows the picture's
   width: full size from 1000px wide, down to a legible minimum on phones */
.reading {
  position: absolute;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1cqw, 10px);
  padding: clamp(6px, 1cqw, 10px) clamp(10px, 1.6cqw, 16px) clamp(6px, 1cqw, 10px) clamp(8px, 1.2cqw, 12px);
  border: 1px solid rgb(168 196 218 / .24);
  border-radius: clamp(8px, 1.2cqw, 12px);
  background: rgb(var(--night-rgb) / .84);
  box-shadow: 0 16px 32px -16px rgb(0 0 0 / .7);
  color: #fff;
  white-space: nowrap;
  animation: float 6.5s ease-in-out infinite;
}
/* Each sits beside the part it describes; the supply side runs along the
   bottom, in the order the air goes through the unit */
.reading--outside  { left: 3%;  top: 50%; animation-duration: 6.5s; animation-delay: -0.5s; }
.reading--filter   { left: 20%; top: 72%; animation-duration: 6.8s; animation-delay: -4.2s; }
.reading--recovery { left: 27%; top: 3%;  animation-duration: 7s;   animation-delay: -2.1s; }
.reading--extract  { left: 75%; top: 8%;  animation-duration: 6s;   animation-delay: -3.4s; }
.reading--fan      { left: 52%; top: 84%; animation-duration: 7.2s; animation-delay: -2.8s; }
.reading--supply   { left: 80%; top: 77%; animation-duration: 7.5s; animation-delay: -1.2s; }
/* Phones and small tablets: the same arrangement around the smaller
   picture. Each top is a point on the picture (a share of its 44cqw height,
   below the 44px band) plus a fixed offset, because the readings stay the
   same size while the picture scales with the screen */
@container (width < 720px) {
  .reading--outside  { left: 2%;  top: calc(14px + 4.4cqw); }
  .reading--recovery { left: 33%; top: calc(4px + 4.4cqw); }
  .reading--extract  { left: 67%; top: calc(24px + 4.4cqw); }
  .reading--filter   { left: 2%;  top: calc(60px + 24.2cqw); }
  .reading--fan      { left: 43%; top: calc(56px + 33cqw); }
  .reading--supply   { left: 71%; top: calc(40px + 39.6cqw); }
}
/* The narrowest phones: slightly tighter readings */
@container (width < 345px) {
  .reading {
    gap: 5px;
    padding-inline: 6px 7px;
  }
}
.reading__dot {
  position: relative;
  flex: 0 0 auto;
  width: clamp(6px, .8cqw, 8px);
  height: clamp(6px, .8cqw, 8px);
  border-radius: 50%;
  background: var(--live);
}
/* A disc of the same green that spreads from the dot and fades */
.reading__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--live);
  opacity: 0;
  animation: live-ring 2.4s ease-out infinite;
}
.reading--outside  .reading__ring { animation-delay: -0.3s; }
.reading--recovery .reading__ring { animation-delay: -1.1s; }
.reading--extract  .reading__ring { animation-delay: -1.9s; }
.reading--supply   .reading__ring { animation-delay: -0.7s; }
.reading__body {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .4cqw, 4px);
}
.reading__label {
  font: 500 clamp(9px, 1.1cqw, 11px)/1 var(--font-mono);
  letter-spacing: .06em;
  color: var(--on-dark-link);
}
.reading__value {
  font-size: clamp(13px, 1.8cqw, 18px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* What sets us apart: four points in a ruled band */
.strengths { border-bottom: 1px solid rgb(var(--steel-rgb) / .12); }
.strengths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0 32px;
}
.strength {
  padding: 28px 0;
  border-top: 2px solid var(--steel);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* What we do: consultancy and the platform */
.offer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 24px;
}
.offer-card {
  background: #fff;
  border: 1px solid rgb(var(--steel-rgb) / .14);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.offer-card__label {
  font: 500 13px/1.4 var(--font-mono);
  color: var(--steel);
}
.offer-card__link { margin-top: auto; }

/* Sectors */
.sectors__grid,
.challenge__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}
.sectors__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding: 22px 28px;
  border: 1px solid rgb(var(--steel-rgb) / .16);
  border-radius: 16px;
}
.sectors__aside-text {
  flex: 1 1 420px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.sectors__aside-text strong {
  font-weight: 600;
  color: var(--ink);
}

/* Rio, alongside the BMS: the dark band */
.rio-band__body {
  padding-block: var(--space-section);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}
.rio-band__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rio-facts {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgb(255 255 255 / .1);
}
.rio-facts__row {
  padding: 16px 0;
  border-bottom: 1px solid rgb(255 255 255 / .1);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 4px 24px;
}
.rio-facts__term {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.rio-band__figure {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rio-band__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 14px;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7);
}

/* Integrations */
.home-int__body {
  padding-block: var(--space-section);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 40px 72px;
}
.home-int__aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Who we are. The columns are at least 470px, so the section only goes
   side by side once the heading fits its column on two lines (from about
   1100px wide); narrower than that it stacks, heading above the text */
.who__body {
  padding-block: var(--space-section);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(470px, 100%), 1fr));
  align-items: start;
  gap: 24px 72px;
}
.who__copy {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* The heading stops growing at 48px, a touch under the other h2s' 50px, so
   it stays on two lines at every desktop width: at 50px it needs 554px and
   its column is 536px, so it would wrap onto a third line above 1452px wide */
.who__title { font-size: min(var(--text-h2), 48px); }

/* --- Consultancy ---------------------------------------------------------- */

/* Who the work is for, under the hero */
.audiences {
  margin-top: clamp(16px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0 32px;
}
.audience {
  padding-top: 24px;
  border-top: 1px solid rgb(var(--steel-rgb) / .25);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.challenge__intro { max-width: 720px; }

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

/* Across the project: four stages */
.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 32px;
}
.stage {
  padding-top: 20px;
  border-top: 2px solid var(--steel);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stage--accent { border-top-color: var(--accent); }

/* --- Rio platform --------------------------------------------------------- */

.rio-hero__title { max-width: 1100px; }
.rio-hero__lead { max-width: 580px; }

/* From plant room to twin: four steps */
.data-path {
  margin-top: clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.data-path__title {
  font: 500 14px/1.4 var(--font-mono);
  color: var(--on-dark-link);
}
.data-path__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 12px;
}
.path-step {
  background: var(--night-raised);
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.path-step--gateway {
  background: var(--steel);
  border-color: rgb(255 255 255 / .12);
}
.path-step--yours { border-color: rgb(var(--accent-rgb) / .45); }
.path-step__label {
  font: 500 12px/1 var(--font-mono);
  color: var(--on-dark-muted);
}
.path-step__label--gateway { color: var(--on-deep); }
.path-step__title,
.qa__answer {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.path-step__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / .08);
  font: 400 12px/1.5 var(--font-mono);
  color: var(--on-dark-link);
}
.path-step__foot--gateway {
  border-top-color: rgb(255 255 255 / .18);
  color: var(--on-steel);
}

/* On the gateway: Graphics, Logic and the smaller applications */
.apps__media {
  border-radius: 20px;
  overflow: hidden;
  background: var(--fog);
  display: flex;
  flex-direction: column;
}
.apps__video,
.apps__still {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
}
.apps__video { display: block; }
.graphics-feature {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.graphics-feature__grid,
.logic-feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 28px 64px;
}
.graphics-feature__grid { align-items: start; }
.logic-feature {
  align-items: center;
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid rgb(var(--steel-rgb) / .12);
}
.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px;
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid rgb(var(--steel-rgb) / .12);
}

/* Oversee */
.oversee__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  align-items: center;
  gap: 32px 64px;
}
.oversee__img { box-shadow: 0 30px 60px -36px rgb(44 74 96 / .55); }
.oversee__cards,
.exports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.oversee__cards { gap: 16px; }
.exports { gap: 0 32px; }
.export-option {
  padding: 18px 0;
  border-top: 2px solid var(--steel);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.export-option__title {
  font-size: 17px;
  font-weight: 600;
}

/* Integrations */
.protocols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 10px;
}
.protocol {
  padding: 18px 20px;
  border: 1px solid rgb(var(--steel-rgb) / .18);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.protocol--more {
  justify-content: center;
  border: 1px dashed rgb(var(--steel-rgb) / .35);
}
.protocol__name { font: 500 16px/1.3 var(--font-mono); }
.protocol__more {
  font-size: 16px;
  font-weight: 600;
  color: var(--deep);
}

/* Security */
.security__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0 40px;
}
.security-point {
  padding: 22px 0;
  border-top: 1px solid rgb(255 255 255 / .12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.security-point__title,
.customer-card__title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
/* What the client's IT team will ask */
.qa-card {
  background: var(--night-raised);
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.qa-card__title {
  font-size: 21px;
  font-weight: 600;
  color: #fff;
}
.qa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px 32px;
}
.qa__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.qa__question {
  font-size: 15px;
  color: var(--on-dark-muted);
}
.footnotes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}

/* From a hospital estate to a single home */
.scale__grid,
.principles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 16px;
}
.scale-card {
  background: var(--mist);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scale-card__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* --- About ---------------------------------------------------------------- */

.contact__layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
.contact__aside {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.details-card {
  background: #fff;
  border: 1px solid rgb(var(--steel-rgb) / .14);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.customer-card {
  background: var(--night);
  border-radius: 18px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--on-dark);
}
.customer-card__link {
  font: 500 14px/1.4 var(--font-mono);
  color: var(--on-dark-link);
}
.enquiry-panel {
  flex: 1.4 1 460px;
  min-width: 0;
  background: #fff;
  border: 1px solid rgb(var(--steel-rgb) / .14);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 40px);
}
.enquiry__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.enquiry__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.enquiry__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 20px;
}
/* The send button, and beside it Cloudflare's check, which shows only when
   it needs the visitor to tick it */
.enquiry__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.enquiry__submit { padding: 0 26px; }
.enquiry__submit[aria-disabled="true"] { cursor: progress; }
.enquiry__error {
  font-size: 15px;
  line-height: 1.5;
  color: var(--danger);
}
.enquiry__link {
  color: inherit;
  font-weight: 500;
  text-underline-offset: .18em;
}
.enquiry__thanks {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* It takes the focus when it appears, so a screen reader starts there; it
   isn't something to click, so it shows no focus ring */
.enquiry__thanks:focus { outline: none; }

/* --- Remote support ------------------------------------------------------- */

.support-hero__title { max-width: 900px; }
.support-hero__lead { max-width: 640px; }

/* The two downloads, Windows and Mac: a card each, with its button at the
   foot so the two buttons line up */
.downloads {
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}
.download-card {
  background: var(--night-raised);
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.download-card__label {
  font: 500 12px/1 var(--font-mono);
  color: var(--on-dark-muted);
}
.download-card__title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.download-card__action {
  margin-top: auto;
  padding-top: 8px;
}

/* --- Privacy policy ------------------------------------------------------- */

/* The contents list above the text, until the column is wide enough for
   the list to sit beside the text and stay in view as it scrolls. The
   column is a container, so the switch follows its own width */
.policy { container-type: inline-size; }
.policy__layout {
  display: grid;
  gap: 40px;
}
.policy__contents {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.policy__contents-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  column-gap: 28px;
  border-top: 1px solid rgb(var(--steel-rgb) / .14);
}
.policy__contents-link {
  display: block;
  height: 100%;
  padding: 10px 0;
  border-bottom: 1px solid rgb(var(--steel-rgb) / .14);
  font-size: 15px;
  line-height: 1.4;
  color: var(--deep);
  text-decoration: none;
}
.policy__body {
  min-width: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 5vw, 64px);
}
.policy__summary {
  background: var(--mist);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.policy__section {
  scroll-margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@container (min-width: 900px) {
  .policy__layout {
    grid-template-columns: 240px minmax(0, 760px);
    gap: 72px;
  }
  .policy__contents {
    position: sticky;
    top: 32px;
  }
  .policy__contents-list { grid-template-columns: 1fr; }
}

/* Names and what they mean: the cookies, and how long data is kept. The
   name sits beside its description when there is room, above it when not */
.policy-list {
  container-type: inline-size;
  border-top: 1px solid rgb(var(--steel-rgb) / .14);
}
.policy-list__row {
  padding: 14px 0;
  border-bottom: 1px solid rgb(var(--steel-rgb) / .14);
  display: grid;
  align-content: start;
  gap: 4px 28px;
}
.policy-list__term {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.policy-list__term code { font: 500 15px/1.5 var(--font-mono); }
.policy-list__value {
  font-size: 16px;
  line-height: 1.6;
}
.policy-list__note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
@container (min-width: 560px) {
  /* A name longer than its description takes the extra height in the
     second row, so the note stays just under the description */
  .policy-list__row { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .policy-list__term { grid-row: span 2; }
  .policy-list__value,
  .policy-list__note { grid-column: 2; }
}


/* 9. Diagrams
   -------------------------------------------------------------------------- */

/* Both diagrams are rows of columns joined by lines. Each is a container:
   below its breakpoint (940px for Home, 840px for the port map) the columns
   stack, joined by short vertical lines; at or above it they sit side by
   side, joined by horizontal wires. */

/* --- Home: How it fits together ------------------------------------------- */

.diagram {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.diagram__row {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.diagram__col {
  flex: 0 1 100%;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diagram__label {
  font: 500 12px/1 var(--font-mono);
  color: var(--steel);
}

/* The wires between the columns; each leads to a box in the list beside
   it, 74px apart. The outgoing list starts 74px lower than the incoming. */
.diagram__wires {
  flex: 1 1 0;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  display: none;
}
.diagram__wires--out { margin-top: 74px; }
.diagram__wire {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgb(var(--steel-rgb) / .45);
}
.diagram__wire:nth-child(2) { top: 128px; }
.diagram__wire:nth-child(3) { top: 202px; }
.diagram__wire:nth-child(4) { top: 276px; }
.diagram__wire:nth-child(5) { top: 350px; }

/* A streak runs along each wire. The element that moves is as long as the
   wire plus the streak, so translateX(100%) carries the streak from just
   before the wire's start to just past its end. */
.diagram__pulse {
  position: absolute;
  top: -1px;
  left: -30px;
  right: 0;
  height: 3px;
  opacity: 0;
  animation: wire-run-x 2.8s linear -0.4s infinite;
}
.diagram__wire:nth-child(2) .diagram__pulse { animation-duration: 3.1s; animation-delay: -1.6s; }
.diagram__wire:nth-child(3) .diagram__pulse { animation-duration: 2.6s; animation-delay: -0.9s; }
.diagram__wire:nth-child(4) .diagram__pulse { animation-duration: 3s;   animation-delay: -2.2s; }
.diagram__wire:nth-child(5) .diagram__pulse { animation-duration: 2.7s; animation-delay: -1.2s; }
.diagram__wires--out .diagram__wire:nth-child(1) .diagram__pulse { animation-duration: 2.4s; animation-delay: -0.2s; }
.diagram__wires--out .diagram__wire:nth-child(2) .diagram__pulse { animation-duration: 2.6s; animation-delay: -1.4s; }
.diagram__wires--out .diagram__wire:nth-child(3) .diagram__pulse { animation-duration: 2.5s; animation-delay: -0.8s; }
.diagram__streak {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--steel-rgb) / 0), var(--steel));
}
.diagram__wires--out .diagram__streak {
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0), var(--accent));
}

/* The short vertical lines between stacked columns, with their own streak */
.diagram__drop {
  flex: 0 1 100%;
  height: 0;
  padding-top: 32px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgb(var(--steel-rgb) / .45), rgb(var(--steel-rgb) / .45)) center / 1px 100% no-repeat;
}
.diagram__drop-pulse {
  position: absolute;
  top: -22px;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1px;
  opacity: 0;
  animation: wire-run-y 1.8s linear infinite;
}
.diagram__drop-streak {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(var(--steel-rgb) / 0), var(--steel));
}

/* Rio in the middle */
.rio-node {
  position: relative;
  flex: 0 1 100%;
  min-width: 0;
  max-width: 560px;
  align-self: stretch;
  margin: 0 auto;
  padding: 28px;
  border-radius: 16px;
  background: var(--deep);
  box-shadow: 0 24px 48px -28px rgb(44 74 96 / .8);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
/* A green ring that breathes around the card */
.rio-node__halo {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / .2);
  opacity: 0;
  pointer-events: none;
  animation: halo 4s ease-in-out infinite;
}
.rio-node__name {
  font-size: 34px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.rio-node__part {
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / .16);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rio-node__part-title {
  font-size: 15px;
  font-weight: 600;
}
.rio-node__part-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-deep-soft);
}

@container (min-width: 940px) {
  .diagram__col { flex-basis: 272px; }
  .diagram__col--out { margin-top: 74px; }
  .diagram__wires { display: block; }
  .diagram__drop { display: none; }
  .rio-node {
    flex-basis: 300px;
    margin-top: 22px;
  }
}

/* --- Rio platform: the gateway's port map --------------------------------- */

.portmap {
  container-type: inline-size;
  padding: clamp(24px, 3vw, 40px);
  background: #fff;
  border: 1px solid rgb(var(--steel-rgb) / .14);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.portmap__col {
  flex: 0 1 100%;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.portmap__label {
  font: 500 12px/1 var(--font-mono);
  color: var(--muted);
}
.portmap__wires {
  flex: 1 1 0;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  display: none;
}
.portmap__wires--out { margin-top: 74px; }
.portmap__wire {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgb(var(--steel-rgb) / .35);
}
.portmap__wire:nth-child(2) { top: 128px; }
.portmap__wire:nth-child(3) { top: 202px; }
.portmap__wire:nth-child(4) { top: 276px; }
.portmap__wire--accent { background: rgb(var(--accent-rgb) / .7); }
.portmap__drop {
  flex: 0 1 100%;
  height: 0;
  padding-top: 32px;
  background: linear-gradient(rgb(var(--steel-rgb) / .35), rgb(var(--steel-rgb) / .35)) center / 1px 100% no-repeat;
}
.portmap__device {
  flex: 0 1 100%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@container (min-width: 840px) {
  .portmap__col { flex-basis: 272px; }
  .portmap__col--out { margin-top: 74px; }
  .portmap__wires { display: block; }
  .portmap__drop { display: none; }
  .portmap__device {
    flex-basis: 0;
    margin-top: 47px;
  }
}

/* The gateway itself, drawn in CSS */
.device {
  width: 200px;
  height: 236px;
  padding: 22px 18px;
  border-radius: 18px;
  background: var(--steel);
  box-shadow: 0 24px 48px -24px rgb(44 74 96 / .7), inset 0 1px 0 rgb(255 255 255 / .18);
  display: flex;
  flex-direction: column;
}
.device__vent {
  height: 2px;
  border-radius: 2px;
  background: var(--steel-light);
}
.device__vent + .device__vent { margin-top: 8px; }
.device__spacer { flex: 1 1 auto; }
.device__name {
  text-align: center;
  font-size: 34px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.device__model {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--on-deep-soft);
}
.device__leds {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.device__led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on-deep-soft);
}
.device__led--on { background: var(--accent); }
.device__lead {
  width: 1px;
  height: 24px;
  background: rgb(var(--steel-rgb) / .35);
}
.device__power {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  white-space: nowrap;
}
.device__power-title {
  font-size: 16px;
  font-weight: 600;
}


/* 10. Motion
   -------------------------------------------------------------------------- */

/* Every animation moves or fades something and nothing else (transform and
   opacity), so browsers run it on the graphics chip and the page is not
   laid out or repainted while it plays. Keep it that way: animating
   anything else, such as position, size or shadows, makes the browser
   redraw the page on every frame. */

@keyframes wire-run-x {
  0%   { transform: translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes wire-run-y {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@keyframes live-ring {
  0%        { transform: scale(1); opacity: .6; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

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

@keyframes shot-second {
  0%, 43%  { opacity: 0; }
  50%, 93% { opacity: 1; }
  100%     { opacity: 0; }
}

@keyframes shot-first {
  0%, 43%  { opacity: 1; }
  50%, 93% { opacity: 0; }
  100%     { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* The still pictures of the 3D unit stand in for the videos when a visitor
   has asked for less motion */
.still-only { display: none; }

@media (prefers-reduced-motion: reduce) {
  .diagram__pulse,
  .diagram__drop-pulse,
  .reading,
  .reading__ring,
  .rio-node__halo,
  .shot__caption {
    animation: none;
  }
  .motion-only { display: none; }
  .still-only { display: block; }
  .shot__img--second,
  .shot__caption--second { display: none; }
}