/* The theme's own fonts, latin subset, served from the website itself (fonts/). Plus Jakarta Sans
   and Space Grotesk are variable fonts: one file carries every weight. The layout preloads the two the
   first screen needs. Each has a fallback sized to take the same space (size-adjust and the metric
   overrides, measured from the font files the way Next.js and Capsize do), so nothing moves when the
   web font arrives. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(/orbit-runtime/bdc6c6bed9317137200d495f/plus-jakarta-sans.woff2) format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 103.32%;
  ascent-override: 100.46%;
  descent-override: 21.49%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url(/orbit-runtime/bdc6c6bed9317137200d495f/space-grotesk.woff2) format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 109.46%;
  ascent-override: 89.9%;
  descent-override: 26.68%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Space Mono';
  src: url(/orbit-runtime/bdc6c6bed9317137200d495f/space-mono-bold.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono Fallback';
  src: local('Courier New'), local('CourierNewPSMT'), local('Courier');
  size-adjust: 102%;
  ascent-override: 109.8%;
  descent-override: 35.4%;
  line-gap-override: 0%;
}

/* Prism, Pixel Plugins' design system: the values the theme's settings start from
   (snippets/theme-style.liquid prints the website's own values over these). */

:root {
  /* Canvas: warm cream, never lavender */
  --paper: #fffcf6;
  --paper-deep: #f8f3ec;
  --card: #fffffc;
  --ink: #211b12;
  --ink-soft: #4a4232;
  --muted: #786f5c;
  --faint: #736b59;
  --line: #ece1cb;

  /* The palette: accents with a job each, never a gradient wash */
  --mint: #95ddac;
  --mint-dark: #5fbe85;
  --mint-text: #3d7b56;
  --mint-deep: #1c5e4f;
  --coral: #ff6b57;
  --coral-dark: #e5503c;
  /* Coral for small text: deepened with ink to 5:1 on the page and cards (WCAG AA). */
  --coral-text: color-mix(in srgb, var(--coral-dark) 80%, var(--ink));
  --emerald: #14b88a;
  --emerald-dark: #0e9670;
  --amber: #ffb01f;
  --amber-dark: #db8f0c;
  --teal: #3e8fa8;

  /* The products' own colours */
  --dmnexa: #ec4767;
  --orbit-navy: #0c202b;
  --orbit-navy-light: #25434c;
  --orbit-mint: #afebe0;
  --orbit-text: #f3f8f7;
  --orbit-muted: #acbec5;
  --orbit-teal: #087e8b;
  --orbit-deep: #173b45;
  --orbit-deep-light: #245460;

  --font-display: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', sans-serif;
  --font-logo: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  --font-mono: 'Space Mono', 'Space Mono Fallback', monospace;

  --radius: 0.625rem;
  --radius-large: 1rem;
  --radius-pill: 1.875rem;
  --width-page: 71.25rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 20px 44px -22px rgba(27, 23, 48, 0.22);
  --header-height: 5rem;
}

/* The page, its containers and the parts every section shares: buttons, labels, highlights, focus. */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--mint);
  color: var(--mint-deep);
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* Icons sit in the line of text they belong to. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}

main {
  display: block;
}

.container {
  max-width: var(--width-page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 0.86rem;
}

.skip-link:focus {
  top: 1rem;
}

/* Buttons: bold pills. Primary is mint on deep mint; outline is ink on the page. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.button .icon {
  font-size: 1.05rem;
}

.button--primary {
  background: var(--mint);
  color: var(--mint-deep);
}

.button--primary:hover {
  background: var(--mint-deep);
  color: var(--card);
  transform: translateY(-2px);
}

.button--outline {
  color: var(--ink);
  border: 1.5px solid var(--ink);
  background: transparent;
}

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

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

/* The small label above a heading: a coral rule and uppercase words. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mint-text);
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--coral);
}

.eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

/* A word or phrase of a heading in mint. */
.highlight {
  color: var(--mint);
}

/* A band of the page with a hairline above it. */
.section {
  position: relative;
  z-index: 2;
  padding: 6rem 0;
  border-top: 1px solid var(--line);
}

.section-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  margin-top: 2rem;
}

.section-actions .button--outline {
  justify-content: center;
}

@media (min-width: 37.5625em) {
  .container {
    padding: 0 2.5rem;
  }

  .section-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: normal;
  }

  .section-actions .button--outline {
    justify-content: normal;
  }
}

/* The site header: a sticky, frosted bar with the logo, the menu and the call to action. On narrow
   screens the menu folds into a panel under the bar (browser.ts opens it); wide screens show it inline,
   each group's submenu opening below its name. */

/* The frosted ground sits on a layer behind the bar, not on the bar itself: a backdrop-filter on the
   header would trap the fixed full-screen menu inside it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header__inner {
  position: relative;
  max-width: var(--width-page);
  margin: 0 auto;
  height: var(--header-height);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* The logo */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The word sets the logo's size; the line under it is sized from the text around it, as designed. */
.brand__lockup {
  font-size: 24px;
  display: inline-flex;
  align-items: baseline;
  gap: 0.16em;
  font-family: var(--font-logo);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.brand__word {
  letter-spacing: -0.045em;
}

.brand__mark {
  width: calc(0.62em * 85 / 65);
  height: 0.62em;
  margin-bottom: 0.02em;
}

.brand__tagline {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.79em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.35em;
  padding-left: 0.12em;
  font-size: 0.42em;
}

.brand--on-dark .brand__word {
  color: var(--paper);
}

.brand--on-dark .brand__tagline {
  color: color-mix(in srgb, var(--card) 62%, transparent);
}

/* The menu on narrow screens: a full-screen panel under the bar (browser.ts opens it), big numbered
   links that ease in one after another, the groups opening in place, the call to action and the email
   at its foot. Without a script it is not folded (layout.liquid's <noscript>). */
.site-navigation {
  position: fixed;
  inset: var(--header-height) 0 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease),
    visibility 0s linear 0.3s;
}

.site-navigation.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}

/* The page behind the open menu does not scroll. */
.has-open-menu {
  overflow: hidden;
}

.site-navigation__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  counter-reset: navigation;
}

.site-navigation__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.site-navigation.is-open .site-navigation__item {
  opacity: 1;
  transform: none;
}

.site-navigation.is-open .site-navigation__item:nth-child(2) {
  transition-delay: 40ms;
}

.site-navigation.is-open .site-navigation__item:nth-child(3) {
  transition-delay: 80ms;
}

.site-navigation.is-open .site-navigation__item:nth-child(n + 4) {
  transition-delay: 120ms;
}

.site-navigation__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  counter-increment: navigation;
  transition: color 0.25s var(--ease);
}

.site-navigation__link::before {
  content: counter(navigation, decimal-leading-zero);
  flex: 0 0 1.6rem;
  font: 700 0.78rem/1 var(--font-mono);
  letter-spacing: 0;
  color: var(--muted);
}

.site-navigation__sublink {
  display: block;
  padding: 0.55rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.25s var(--ease);
}

.site-navigation__link:hover,
.site-navigation__sublink:hover {
  color: var(--mint-deep);
}

.site-navigation__group {
  width: 100%;
}

.site-navigation__toggle {
  list-style: none;
  cursor: pointer;
}

.site-navigation__toggle::-webkit-details-marker {
  display: none;
}

.site-navigation__toggle::after {
  content: '';
  align-self: center;
  width: 9px;
  height: 9px;
  margin: -4px 0.25rem 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.site-navigation__group[open] > .site-navigation__toggle {
  color: var(--mint-deep);
}

.site-navigation__group[open] > .site-navigation__toggle::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.site-navigation__submenu {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0 0.9rem 2.6rem;
  border-bottom: 1px solid var(--line);
}

/* The call to action closes the list, then the email under it */
.site-navigation__item--call {
  margin-top: 2rem;
}

.site-navigation__email {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.site-navigation__email-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.site-navigation__call {
  display: block;
  width: 100%;
  text-align: center;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: all 0.3s var(--ease);
}

.site-navigation__call:hover {
  background: var(--ink);
  color: var(--card);
}

/* The menu button: three bars that become a cross */
.menu-button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.6rem;
  margin-right: -0.6rem;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-button__bar {
  width: 24px;
  height: 2px;
  background: var(--ink);
  display: block;
  transition:
    transform 0.3s var(--ease),
    opacity 0.3s var(--ease);
}

.menu-button[aria-expanded='true'] .menu-button__bar:nth-child(2) {
  transform: translateY(7px) rotate(45deg);
}

.menu-button[aria-expanded='true'] .menu-button__bar:nth-child(3) {
  opacity: 0;
}

.menu-button[aria-expanded='true'] .menu-button__bar:nth-child(4) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 37.5625em) {
  .site-header__inner {
    padding: 0 2.5rem;
  }

  .site-navigation {
    padding-inline: 2.5rem;
  }
}

/* Wide screens: the menu inline, submenus as panels under their group */
@media (min-width: 67.5625em) {
  .site-navigation {
    position: static;
    display: flex;
    flex-direction: row;
    align-self: stretch;
    padding: 0;
    overflow: visible;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-navigation__list {
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    gap: 1.8rem;
  }

  .site-navigation__item {
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    width: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-navigation__item--call {
    margin-top: 0;
  }

  .site-navigation__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    padding: 0;
    border: 0;
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: inherit;
    letter-spacing: normal;
    color: var(--ink-soft);
  }

  .site-navigation__link::before {
    content: none;
  }

  .site-navigation__link:hover {
    color: var(--mint);
  }

  .site-navigation__group {
    display: flex;
    align-items: center;
    align-self: stretch;
    width: auto;
  }

  .site-navigation__toggle::after {
    width: 6px;
    height: 6px;
    margin: -3px 0 0;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
  }

  .site-navigation__group[open] > .site-navigation__toggle::after {
    margin-top: 3px;
  }

  .site-navigation__group:hover > .site-navigation__toggle,
  .site-navigation__group:focus-within > .site-navigation__toggle {
    color: var(--mint-deep);
  }

  .site-navigation__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-large);
    padding: 0.6rem;
    box-shadow: var(--shadow);
    z-index: 50;
  }

  .site-navigation__sublink {
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-size: 0.84rem;
  }

  .site-navigation__sublink:hover {
    background: var(--paper-deep);
    color: var(--mint-deep);
  }

  .site-navigation__call {
    display: inline-block;
    width: auto;
    padding: 0.6rem 1.3rem;
    font-size: 0.86rem;
  }

  .site-navigation__email,
  .menu-button {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-navigation,
  .site-navigation__item {
    transform: none;
    transition: none;
  }
}

/* The site footer, and the cookie banner the layout draws on every page (snippets/consent-banner.liquid,
   on Orbit's consent hooks). */

.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  padding: 3rem 2.5rem;
}

.site-footer__inner {
  max-width: var(--width-page);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 1.5rem;
}

.site-footer__promise,
.site-footer__place {
  color: var(--muted);
  font-size: 0.94rem;
  margin-top: 0.8rem;
  font-weight: 500;
}

.site-footer__promise {
  max-width: 390px;
  color: var(--ink-soft);
  font-weight: 600;
}

.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__link {
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-weight: 600;
  transition: color 0.25s;
}

.site-footer__link:hover {
  color: var(--mint);
}

.site-footer__bottom {
  max-width: var(--width-page);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-footer__legal {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.site-footer__legal-link {
  color: var(--muted);
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.site-footer__legal-link:hover {
  color: var(--mint-deep);
  text-decoration: underline;
}

@media (min-width: 37.5625em) {
  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
  }

  .site-footer__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.8rem;
  }

  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* The cookie banner: a card floating above the page's bottom edge */
.consent-banner {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 0.65rem;
  transform: translateX(-50%);
  width: calc(100% - 1rem);
  max-height: calc(100dvh - 1.3rem);
  overflow-y: auto;
  padding: 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  box-shadow: 0 24px 70px -22px color-mix(in srgb, var(--ink) 42%, transparent);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1rem;
}

.consent-banner__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.consent-banner__message {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 68ch;
}

.consent-banner__message a {
  color: var(--mint-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-banner__choices {
  grid-column: 1 / -1;
  font-size: 0.86rem;
}

.consent-banner__summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-soft);
}

.consent-banner__categories {
  list-style: none;
  display: grid;
  gap: 0.8rem;
  margin: 0.9rem 0;
}

.consent-banner__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: var(--ink);
}

.consent-banner__option input {
  /* 24 px: the WCAG 2.2 AA target size. */
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--mint-deep);
}

.consent-banner__description {
  margin: 0.2rem 0 0 2.05rem;
  color: var(--muted);
  line-height: 1.5;
}

.consent-banner__save {
  padding: 0.65rem 1.2rem;
}

.consent-banner__id {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

/* The ID exists only once the visitor has chosen: until then the whole line stays hidden. */
.consent-banner__id:has(code:empty) {
  display: none;
}

.consent-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  width: 100%;
}

/* Accepting and rejecting look the same (CNIL). */
.consent-banner__button {
  min-height: 44px;
  padding: 0.72rem 1.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--mint-deep);
  background: var(--mint);
  border: 1.5px solid var(--mint);
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.consent-banner__button:hover {
  color: var(--card);
  background: var(--mint-deep);
  border-color: var(--mint-deep);
}

@media (min-width: 37.5625em) {
  .consent-banner {
    bottom: 1.25rem;
    width: min(920px, calc(100% - 2rem));
    padding: 1.35rem;
  }

  .consent-banner__actions {
    display: flex;
    flex-wrap: wrap;
    width: auto;
  }
}

@media (min-width: 55.0625em) {
  .consent-banner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.5rem;
  }

  .consent-banner__choices {
    grid-row: 2;
  }

  .consent-banner__actions {
    justify-content: flex-end;
  }
}

/* The heading of an inner page and long formatted text: together most of the website's pages. */

.page-hero {
  padding: 4rem 0 2.25rem;
  border-bottom: 1px solid var(--line);
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.5vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}

.page-hero__subtitle {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 640px;
}

.page-hero__subtitle--wide {
  max-width: 760px;
}

/* Long formatted text: guides, articles, policies, service pages. Articles keep the same width (as the
   design's own stylesheet ends up drawing them) and open with a larger first paragraph. */
.rich-text {
  max-width: 720px;
  padding: 2rem 0 3rem;
}

.rich-text--article > p:first-child {
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.rich-text h2,
.rich-text h3 {
  font-size: 1.25rem;
  margin: 2.25rem 0 1rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  border-left: 3px solid var(--mint-deep);
  padding-left: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rich-text h2:first-child,
.rich-text h3:first-child {
  margin-top: 0;
}

.rich-text p {
  margin-bottom: 1.5rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.rich-text ul,
.rich-text ol {
  margin: 0 0 1.5rem;
  padding-left: 1.2rem;
  color: var(--muted);
}

.rich-text li ul,
.rich-text li ol {
  margin: 0.5rem 0 0;
}

.rich-text li {
  margin-bottom: 0.5rem;
  line-height: 1.8;
}

.rich-text a {
  color: var(--mint-text);
  text-decoration: underline;
}

.rich-text strong {
  color: var(--ink-soft);
}

.rich-text .button {
  text-decoration: none;
}

.rich-text .button--primary {
  color: var(--mint-deep);
}

.rich-text .button--primary:hover,
.rich-text .button--outline:hover {
  color: var(--card);
}

@media (min-width: 37.5625em) {
  .rich-text {
    padding: 2.5rem 0 5rem;
  }
}

/* The decorations (snippets written by tools/decorations.mjs): floating pixels, a watercolour wash
   and a strip of pixels. They sit behind the content and never take a click. */

.section--clipped {
  overflow: hidden;
}

.pixel-field {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pixel-field--hero {
  top: -100px;
  right: -160px;
  width: 460px;
  height: 460px;
}

.pixel-field--contact {
  top: 20px;
  right: -140px;
  width: 480px;
  height: 480px;
}

.pixel-field__pixel {
  position: absolute;
  border-radius: 3px;
  opacity: var(--opacity);
  animation: pixel-float 5s ease-in-out infinite;
}

.pixel-field__pixel--mint {
  background: var(--mint);
}

.pixel-field__pixel--teal {
  background: var(--teal);
}

.pixel-field__pixel--emerald {
  background: var(--emerald);
}

.pixel-field__pixel--amber {
  background: var(--amber);
}

.pixel-field__pixel--coral {
  background: var(--coral);
}

@keyframes pixel-float {
  0%,
  100% {
    transform: translateY(0);
    opacity: var(--opacity);
  }

  50% {
    transform: translateY(-10px);
    opacity: calc(var(--opacity) * 0.5);
  }
}

.watercolor {
  position: absolute;
  left: -160px;
  bottom: -140px;
  z-index: 0;
  width: 520px;
  height: 400px;
  pointer-events: none;
  opacity: 0.7;
}

.watercolor svg {
  width: 100%;
  height: 100%;
}

.watercolor__layer {
  mix-blend-mode: multiply;
}

.watercolor__shape--mint {
  fill: var(--mint);
}

.watercolor__shape--emerald {
  fill: var(--emerald);
}

.watercolor__shape--amber {
  fill: var(--amber);
}

.dot-strip {
  width: 100%;
  max-width: 520px;
  height: 32px;
  margin: 0 auto 3rem;
}

.dot-strip svg {
  width: 100%;
  height: 100%;
}

.dot-strip__dot {
  mix-blend-mode: multiply;
}

.dot-strip__dot--mint {
  fill: var(--mint);
}

.dot-strip__dot--teal {
  fill: var(--teal);
}

.dot-strip__dot--emerald {
  fill: var(--emerald);
}

.dot-strip__dot--amber {
  fill: var(--amber);
}

.dot-strip__dot--coral {
  fill: var(--coral);
}

@media (min-width: 37.5625em) {
  .pixel-field--hero {
    right: -140px;
    width: 720px;
    height: 720px;
  }
}

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

/* The home page's opening: a very large title over floating pixels. */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--width-page);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mint-text);
}

.hero__title {
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hero__subtitle {
  max-width: 520px;
  margin-top: 1.8rem;
  color: var(--ink-soft);
  font-size: 1.16rem;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 37.5625em) {
  .hero__inner {
    padding: 4.5rem 2.5rem 6rem;
  }
}

/* A part of the page's numbered heading, and grids of cards with hand-drawn icons. */

.section-heading {
  max-width: 680px;
  margin-bottom: 3.5rem;
}

.section-heading--center {
  margin: 0 auto 2rem;
  text-align: center;
}

.section-heading__label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mint-text);
}

.section-heading__number {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--faint);
}

.section-heading__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.section-heading__intro p {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.75;
}

.section-actions--single {
  flex-direction: row;
  align-items: normal;
}

/* The cards */
.card-grid__cards {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

/* A crisp coloured ring inside the card's edge */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  /* --draw: how much of the ring is drawn; scripts/motion.ts draws it round on the home page */
  background: conic-gradient(from 0deg, var(--card-ring) var(--draw, 100%), transparent var(--draw, 100%));
  pointer-events: none;
  -webkit-mask:
    linear-gradient(var(--ink) 0 0) content-box,
    linear-gradient(var(--ink) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.card--mint {
  --card-ring: var(--mint-deep);
}

.card--coral {
  --card-ring: var(--coral-dark);
}

.card--amber {
  --card-ring: var(--amber);
}

.card--emerald {
  --card-ring: var(--emerald-dark);
}

.card--dmnexa {
  --card-ring: color-mix(in srgb, var(--dmnexa) 82%, var(--ink));
}

.card__body {
  display: block;
  height: 100%;
  padding: 2.1rem;
}

.card__title {
  margin-bottom: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card__text {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.7;
}

/* The icon: a blob of colour behind a line drawing that wiggles, with a spark, when hovered */
.blob-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 1.2rem;
  transition: transform 0.5s var(--ease);
}

.blob-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.blob-icon__blob {
  transition: fill 0.4s var(--ease);
}

.blob-icon__dot {
  fill: currentColor;
  stroke: none;
}

.blob-icon__spark {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}

.card:hover .blob-icon {
  transform: rotate(-6deg) scale(1.08);
}

.card:hover .blob-icon__glyph {
  animation: blob-wiggle 0.6s ease-in-out;
}

.card:hover .blob-icon__spark {
  opacity: 1;
  transform: scale(1);
}

.blob-icon--mint {
  color: var(--mint-deep);
}

.blob-icon--mint .blob-icon__blob {
  fill: color-mix(in srgb, var(--mint) 40%, transparent);
}

.blob-icon--mint .blob-icon__spark {
  fill: var(--coral-dark);
}

.blob-icon--coral {
  color: var(--coral-dark);
}

.blob-icon--coral .blob-icon__blob {
  fill: color-mix(in srgb, var(--coral) 24%, transparent);
}

.blob-icon--coral .blob-icon__spark {
  fill: var(--mint-deep);
}

.blob-icon--amber {
  color: var(--amber);
}

.blob-icon--amber .blob-icon__blob {
  fill: color-mix(in srgb, var(--amber) 26%, transparent);
}

.blob-icon--amber .blob-icon__spark {
  fill: var(--coral-dark);
}

.blob-icon--emerald {
  color: var(--emerald-dark);
}

.blob-icon--emerald .blob-icon__blob {
  fill: color-mix(in srgb, var(--emerald) 22%, transparent);
}

.blob-icon--emerald .blob-icon__spark {
  fill: var(--amber);
}

.blob-icon--dmnexa {
  color: var(--dmnexa);
}

.blob-icon--dmnexa .blob-icon__blob {
  fill: color-mix(in srgb, var(--dmnexa) 20%, transparent);
}

.blob-icon--dmnexa .blob-icon__spark {
  fill: var(--mint-deep);
}

@keyframes blob-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(-7deg);
  }

  65% {
    transform: rotate(6deg);
  }
}

/* The callout: a dark card with a rainbow edge that leads a grid of cards */
.callout {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.4rem;
  color: var(--ink);
  border: 1.5px solid transparent;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    linear-gradient(90deg, var(--mint), var(--teal), var(--emerald), var(--amber), var(--coral)) border-box;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.callout:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 52px -24px color-mix(in srgb, var(--ink) 50%, transparent);
}

.callout__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink);
  font-size: 1.7rem;
}

.callout__text {
  display: grid;
  gap: 0.35rem;
}

.callout__kicker {
  color: var(--amber);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.callout__title {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
}

.callout__description {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: 0.92rem;
  line-height: 1.55;
}

.callout__link {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--mint);
  font-size: 0.85rem;
  font-weight: 800;
}

@media (min-width: 37.5625em) {
  .card-grid__cards--two,
  .card-grid__cards--three {
    grid-template-columns: 1fr 1fr;
  }

  .callout {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1.7rem 1.8rem;
  }

  .callout__link {
    grid-column: auto;
    white-space: nowrap;
  }
}

@media (min-width: 55.0625em) {
  .card-grid__cards--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .blob-icon {
    transform: none;
  }

  .card:hover .blob-icon__glyph {
    animation: none;
  }
}

/* A part that continues the one above it, without space above */
.section--flush {
  padding-top: 0;
}

/* A card's round line icon, filled when the card is hovered */
.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--mint);
  font-size: 1.6rem;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.card:hover .card__icon {
  border-color: var(--mint-deep);
  background: var(--mint-deep);
  color: var(--card);
}

/* A featured path: one wide card with its button beside the words on wide screens */
.feature-lane {
  padding-bottom: 3rem;
}

.feature-lane__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.feature-lane__card--featured {
  border-top: 4px solid var(--mint);
}

.feature-lane__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.feature-lane__text {
  margin-top: 0.8rem;
  color: var(--muted);
  line-height: 1.75;
}

.feature-lane__button {
  flex: none;
}

/* A closing invitation's buttons */
.call-to-action__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 55.0625em) {
  .feature-lane__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
}

/* A part that opens the page body, without a line above */
.section--borderless {
  border-top: 0;
}

/* Soft edges: a wider border in the card's colour instead of the crisp line inside it */
.card-grid__cards--soft .card {
  border-width: 1.5px;
}

.card-grid__cards--soft .card::before {
  content: none;
}

.card-grid__cards--soft .card--mint {
  border-color: color-mix(in srgb, var(--mint-dark) 40%, transparent);
}

.card-grid__cards--soft .card--mint:hover {
  border-color: color-mix(in srgb, var(--mint-dark) 70%, transparent);
}

.card-grid__cards--soft .card--coral {
  border-color: color-mix(in srgb, var(--coral) 40%, transparent);
}

.card-grid__cards--soft .card--coral:hover {
  border-color: color-mix(in srgb, var(--coral) 70%, transparent);
}

.card-grid__cards--soft .card--amber {
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
}

.card-grid__cards--soft .card--amber:hover {
  border-color: color-mix(in srgb, var(--amber) 75%, transparent);
}

.card-grid__cards--soft .card--emerald {
  border-color: color-mix(in srgb, var(--emerald) 40%, transparent);
}

.card-grid__cards--soft .card--emerald:hover {
  border-color: color-mix(in srgb, var(--emerald) 70%, transparent);
}

.card-grid__cards--soft .card--dmnexa {
  border-color: color-mix(in srgb, var(--dmnexa) 40%, transparent);
}

.card-grid__cards--soft .card--dmnexa:hover {
  border-color: color-mix(in srgb, var(--dmnexa) 70%, transparent);
}

/* A note under the cards, marked with an amber rule */
.card-grid__note {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--amber);
  background: var(--paper-deep);
  color: var(--muted);
  line-height: 1.7;
}

.card-grid__note a {
  color: var(--mint-text);
  text-decoration: underline;
}

/* A callout that points to Orbit carries Orbit's mark on its colours */
.callout--orbit .callout__icon {
  background: var(--orbit-mint);
  color: var(--orbit-navy);
}

.callout--orbit .orbit-mark {
  width: 34px;
  height: 34px;
}

/* Our products: one large card each, the words beside a picture of the product. */

.product {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.product + .product {
  margin-top: 2rem;
}

/* A thin band of the product's colours along the top */
.product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 3px;
  background: linear-gradient(90deg, var(--dmnexa), var(--coral));
}

.product--orbit::before {
  background: linear-gradient(90deg, var(--orbit-teal), var(--orbit-mint));
}

.product__main {
  padding: 3rem;
}

.product__logo {
  margin-bottom: 1.4rem;
  font-size: inherit;
}

.product__logo-image {
  width: auto;
  height: 46px;
}

.product__name {
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
}

/* Orbit's logo is its mark and a lowercase name, set in Arial as the product itself is. */
.product__wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  line-height: 1;
  color: var(--orbit-navy);
}

.product__wordmark .orbit-mark {
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--orbit-teal);
}

.product__wordmark-name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-transform: lowercase;
}

.product__tag {
  margin-bottom: 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dmnexa);
}

.product__description {
  max-width: 42ch;
  margin-bottom: 1.8rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}

.product__features {
  list-style: none;
  display: grid;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.product__feature {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.product__feature .icon {
  font-size: 1.25rem;
  color: var(--mint);
}

.product--orbit .product__tag,
.product--orbit .product__feature .icon {
  color: var(--orbit-teal);
}

.product__works-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.product__works-with-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.product__partner {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 7.2rem;
  height: 2.25rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.product__partner:hover {
  transform: translateY(-2px);
  border-color: var(--dmnexa);
}

.product--orbit .product__partner:hover {
  border-color: var(--orbit-teal);
}

.product__partner-logo {
  width: auto;
  height: 18px;
}

.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.button--dmnexa {
  background: var(--dmnexa);
  color: var(--card);
}

.button--dmnexa:hover {
  background: color-mix(in srgb, var(--dmnexa) 88%, var(--ink));
  transform: translateY(-2px);
}

.button--orbit {
  background: var(--orbit-deep);
  color: var(--orbit-text);
}

.button--orbit:hover {
  background: var(--orbit-deep-light);
  color: var(--orbit-text);
  transform: translateY(-2px);
}

/* The picture side: hidden on phones, under the words on tablets, beside them on wide screens */
.product__side {
  position: relative;
  display: none;
  min-height: 460px;
  overflow: hidden;
}

.product--dmnexa .product__side {
  background: color-mix(in srgb, var(--dmnexa) 70%, var(--ink));
}

.product__picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  animation: product-float 6s ease-in-out infinite;
}

@keyframes product-float {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }

  50% {
    transform: scale(1.03) translateY(-8px);
  }
}

.product__badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ink) 40%, transparent);
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emerald-dark);
}

.product__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dmnexa);
  animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dmnexa) 45%, transparent);
  }

  70% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--dmnexa) 0%, transparent);
  }

  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dmnexa) 0%, transparent);
  }
}

/* DMNexa: the app's tab bar over its screens */
.product__tab-bar {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.7rem 0.5rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--ink) 50%, transparent);
}

.product__tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  font-size: 0.62rem;
  font-weight: 600;
}

.product__tab .icon {
  font-size: 1.15rem;
}

.product__tab--current {
  color: var(--card);
}

/* Orbit: the platform drawn as a planet, its paths and the labels that circle it */
.product--orbit .product__side {
  background:
    radial-gradient(ellipse at 50% 55%, var(--orbit-navy-light), transparent 62%),
    var(--orbit-navy);
  color: var(--orbit-text);
}

.product--orbit .product__badge {
  color: var(--orbit-navy);
}

.product--orbit .product__badge-dot {
  background: var(--orbit-teal);
  animation: none;
}

.orbit-system {
  position: absolute;
  inset: 0;
}

.orbit-system__path {
  position: absolute;
  left: 50%;
  top: 45%;
  border: 1px solid color-mix(in srgb, var(--orbit-mint) 20%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
}

.orbit-system__path--outer {
  width: 118%;
  height: 56%;
}

.orbit-system__path--inner {
  width: 88%;
  height: 38%;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--orbit-mint) 32%, transparent);
}

.orbit-system__core {
  position: absolute;
  left: 50%;
  top: 45%;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border: 1px solid color-mix(in srgb, var(--orbit-mint) 24%, transparent);
  border-radius: 28px;
  background: linear-gradient(145deg, var(--orbit-navy-light), var(--orbit-navy));
  color: var(--orbit-mint);
  transform: translate(-50%, -50%) rotate(-8deg);
  box-shadow:
    0 0 80px color-mix(in srgb, var(--orbit-mint) 12%, transparent),
    0 24px 48px color-mix(in srgb, var(--ink) 25%, transparent);
}

.orbit-system__core .orbit-mark {
  width: 58px;
  height: 58px;
}

.orbit-system__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.1rem 0.8rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--orbit-mint) 16%, transparent);
  border-radius: 12px;
  background: linear-gradient(
    120deg,
    var(--orbit-navy-light),
    color-mix(in srgb, var(--orbit-navy-light) 55%, var(--orbit-navy))
  );
  box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--ink) 45%, transparent);
  animation: orbit-node-float 7s ease-in-out infinite;
}

.orbit-system__node--1 {
  left: 7%;
  top: 19%;
}

.orbit-system__node--2 {
  right: 6%;
  top: 63%;
  animation-delay: -2.3s;
}

.orbit-system__node--3 {
  left: 10%;
  bottom: 8%;
  animation-delay: -4.6s;
}

.orbit-system__node-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--orbit-mint) 16%, transparent);
  border-radius: 9px;
  color: var(--orbit-mint);
  font-size: 1.15rem;
}

.orbit-system__node-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.orbit-system__node-text {
  display: block;
  color: var(--orbit-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: nowrap;
}

@keyframes orbit-node-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@media (min-width: 37.5625em) {
  .product__side {
    display: block;
    border-top: 1px solid var(--line);
  }
}

@media (min-width: 55.0625em) {
  .product {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .product--orbit {
    grid-template-columns: 0.95fr 1.05fr;
  }

  .product__side {
    border-top: 0;
  }

  .product--orbit .product__side {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product__picture,
  .product__badge-dot,
  .orbit-system__node {
    animation: none;
  }
}

/* Work: the drifting row of client logos, and cards of websites and case studies. */

.logo-marquee {
  text-align: center;
}

.logo-marquee__window {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
}

.logo-marquee__track {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  animation: logo-drift 34s linear infinite;
}

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

@keyframes logo-drift {
  to {
    transform: translateX(-25%);
  }
}

.logo-marquee__item {
  flex: none;
  transition:
    transform 0.4s var(--ease),
    filter 0.4s var(--ease);
}

.logo-marquee__item:hover {
  transform: translateY(-3px);
  filter: brightness(0.85);
}

.logo-marquee__logo {
  width: auto;
  height: 30px;
}

.logo-marquee__item--named {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.logo-marquee__item--named .logo-marquee__logo {
  height: 44px;
}

.logo-marquee__name {
  font-family: var(--font-logo);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

/* Cards of work */
.showcase-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.showcase-grid--scattered {
  gap: 2rem 1.5rem;
}

.showcase-grid__item {
  display: flex;
}

.showcase-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.showcase-card:hover {
  transform: translateY(-7px) rotate(-0.4deg);
  box-shadow: var(--shadow);
}

.showcase-grid--scattered .showcase-card:hover {
  transform: none;
}

.showcase-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-deep);
}

.showcase-card__media--ink {
  background: var(--ink);
}

.showcase-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--ease);
}

.showcase-card__image--center {
  object-position: center;
}

.showcase-card__image--left {
  object-position: left center;
}

.showcase-card:hover .showcase-card__image {
  transform: scale(1.08);
}

/* The client's logo on a frosted badge, whatever its shape */
.showcase-card__logo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 62%;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ink) 40%, transparent);
}

.showcase-card__logo--dark {
  background: color-mix(in srgb, var(--ink) 78%, transparent);
}

.showcase-card__logo-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 22px;
  object-fit: contain;
}

.showcase-card__logo--large .showcase-card__logo-image {
  max-height: 38px;
}

.showcase-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem 1.6rem 1.7rem;
}

.showcase-card__title {
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.showcase-card__text {
  display: -webkit-box;
  min-height: calc(1.65em * 3);
  margin-bottom: 1rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.showcase-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  margin-bottom: 0.9rem;
}

.showcase-card__tag {
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.showcase-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--mint-text);
  font-size: 0.8rem;
  font-weight: 800;
}

@media (min-width: 37.5625em) {
  .showcase-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 55.0625em) {
  .showcase-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .showcase-grid--two {
    grid-template-columns: 1fr 1fr;
  }
}

/* Scattered: each card laid down at its own slight angle, straightened when hovered */
@media (min-width: 55.0625em) and (prefers-reduced-motion: no-preference) {
  .showcase-grid--scattered .showcase-card {
    transition:
      transform 0.45s var(--ease),
      box-shadow 0.45s var(--ease);
  }

  .showcase-grid--scattered .showcase-card--tilt-1 {
    transform: rotate(-2.2deg);
  }

  .showcase-grid--scattered .showcase-card--tilt-2 {
    transform: rotate(1.8deg) translateY(10px);
  }

  .showcase-grid--scattered .showcase-card--tilt-3 {
    transform: rotate(-1.4deg) translateY(-6px);
  }

  .showcase-grid--scattered .showcase-card--tilt-4 {
    transform: rotate(2.4deg);
  }

  .showcase-grid--scattered .showcase-card:hover {
    z-index: 2;
    transform: rotate(0deg) translateY(-8px) scale(1.02);
    box-shadow: var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    animation: none;
  }

  .logo-marquee__item[aria-hidden='true'] {
    display: none;
  }
}

/* Getting in touch: the invitation beside the form, and the form itself (snippets/contact-form.liquid;
   Orbit's forms script sets data-orbit-state while it sends). Short fields come in pairs, side by side on wider screens. */

.contact {
  position: relative;
}

.contact__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 2.5rem;
}

.contact .section-heading {
  margin-bottom: 0;
}

.contact__booking {
  margin-top: 1.2rem;
}

.contact-form {
  padding: 2.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  margin-bottom: 1.6rem;
}

.contact-form__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-form__optional {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.contact-form__input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.3s var(--ease);
}

/* Deep mint, not the design's light mint: a focused field must stand out at 3:1 (WCAG 2.2). */
.contact-form__input:focus {
  outline: none;
  border-color: var(--mint-deep);
}

.contact-form__input::placeholder {
  color: var(--faint);
}

.contact-form__input--long {
  min-height: 110px;
  resize: vertical;
}

.contact-form[data-orbit-state='verifying'] .contact-form__send,
.contact-form[data-orbit-state='sending'] .contact-form__send {
  opacity: 0.58;
  cursor: wait;
  transform: none;
}

.contact-form__message {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.contact-form__message:empty,
.contact-form__verification:empty {
  display: none;
}

.contact-form[data-orbit-state='success'] .contact-form__message {
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--emerald) 25%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--emerald) 8%, transparent);
  color: var(--emerald-dark);
  font-weight: 600;
}

.contact-form[data-orbit-state='error'] .contact-form__message {
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--coral) 25%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--coral) 8%, transparent);
  color: var(--coral-dark);
}

.contact-form__note,
.contact-form__verification {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.contact-form__verification {
  font-size: 0.72rem;
}

.contact-form__note a,
.contact-form__verification a {
  color: var(--mint-deep);
  text-decoration: underline;
}

@media (min-width: 37.5625em) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 55.0625em) {
  .contact__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
  }
}

/* The contact page: one centred column */
.contact-page {
  max-width: 760px;
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}

.contact-page__booking {
  margin-bottom: 3.5rem;
  text-align: center;
}

.contact-page__prompt {
  margin-bottom: 1.4rem;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 600;
}

.contact-page__lead {
  margin-bottom: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

.contact-page__closing {
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* A case study as slides (sections/slideshow.liquid). Without the script the slides stack as cards;
   with it (.slideshow--deck) one shows at a time in a fixed frame, sliding sideways on wide screens. */

.slideshow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: calc(1000px + 3rem);
  min-height: calc(100vh - var(--header-height));
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.slideshow__slides {
  list-style: none;
  display: grid;
  gap: 1.5rem;
}

.slideshow__slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 500px;
  padding: 20px 20px 3rem;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.slideshow__slide--centred {
  text-align: center;
}

.slideshow__title {
  width: 100%;
  margin-bottom: 20px;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--mint);
}

.slideshow__title--page {
  margin-bottom: 15px;
  color: var(--muted);
}

.slideshow__subtitle {
  width: 100%;
  margin-bottom: 20px;
  font-size: 1rem;
  text-align: center;
  color: var(--mint);
}

.slideshow__text {
  width: 100%;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.7;
}

.slideshow__text--soft {
  color: var(--muted);
}

.slideshow__text p {
  margin-bottom: 1.5rem;
}

.slideshow__text a {
  color: var(--mint-text);
  text-decoration: underline;
}

.slideshow__text ul {
  list-style: none;
}

.slideshow__text ul li {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.slideshow__text ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: -0.2em;
  font-size: 1.5em;
  color: var(--mint);
}

.slideshow__text ol {
  padding: 0;
  list-style-position: inside;
}

.slideshow__text ol li {
  margin-bottom: 1rem;
  padding-left: 0.5rem;
}

.slideshow__text ol li strong {
  margin-left: 0.5rem;
}

.slideshow__logo {
  max-width: 200px;
  height: auto;
  margin: 50px auto 0;
}

.slideshow__screens {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 32px;
}

.slideshow__screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 180px;
  padding-bottom: 5px;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.slideshow__screen-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.slideshow__screen-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.slideshow__screen-button:hover .slideshow__screen-image {
  transform: scale(1.05);
}

.slideshow__caption {
  margin-top: 5px;
  padding: 0 5px;
  font-size: 0.8rem;
  text-align: center;
  color: var(--faint);
}

.slideshow__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  width: 100%;
  max-width: 600px;
  margin: 25px auto 10px;
  text-align: center;
}

.slideshow__list-item {
  padding: 15px;
  background: var(--paper);
  border: 1px solid var(--mint);
  border-radius: 8px;
  font-size: 1.1rem;
  color: var(--ink);
}

.slideshow__count {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--muted);
}

.slideshow__navigation {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.slideshow__navigation[hidden] {
  display: none;
}

.slideshow__button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: var(--mint);
  color: var(--mint-deep);
  font: 600 1rem var(--font-body);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.slideshow__button:hover {
  background: var(--mint-deep);
  color: var(--card);
}

.slideshow__button:disabled {
  background: var(--faint);
  color: var(--card);
  cursor: not-allowed;
}

/* The deck: one slide at a time */
.slideshow--deck .slideshow__slides {
  display: block;
  margin: 3rem auto;
}

.slideshow--deck .slideshow__slide {
  display: none;
}

.slideshow--deck .slideshow__slide.is-current {
  display: flex;
}

/* A screen shown large */
.slideshow__zoom {
  max-width: 90vw;
  max-height: 90vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.slideshow__zoom::backdrop {
  background: color-mix(in srgb, var(--ink) 90%, transparent);
}

.slideshow__zoom-image {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
}

.slideshow__close {
  position: fixed;
  top: 15px;
  right: 35px;
  border: 0;
  background: none;
  color: var(--paper);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.slideshow__close:hover {
  color: var(--mint);
}

@media (min-width: 37.5625em) {
  .slideshow__slide {
    align-items: center;
    padding: 35px 40px 3rem;
    text-align: left;
  }

  .slideshow__slide--centred {
    text-align: center;
  }

  .slideshow__title {
    font-size: 1.8rem;
  }

  .slideshow__title--page {
    margin-top: 0;
    font-size: 2.8rem;
  }

  .slideshow__subtitle {
    margin-bottom: 30px;
    font-size: 1.5rem;
  }

  .slideshow__text {
    margin-bottom: 0;
  }

  .slideshow__screens {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 0;
  }

  .slideshow__screen-image {
    max-height: 150px;
    object-fit: cover;
  }

  .slideshow__list {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 0;
  }

  /* Wide screens: a fixed frame; slides wait to its right and leave to its left */
  .slideshow--deck .slideshow__slides {
    position: relative;
    height: 535px;
    overflow: hidden;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .slideshow--deck .slideshow__slide {
    position: absolute;
    inset: 0;
    display: flex;
    min-height: 0;
    padding-bottom: 35px;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: all 0.5s ease-in-out;
  }

  .slideshow--deck .slideshow__slide.is-past {
    transform: translateX(-100%);
  }

  .slideshow--deck .slideshow__slide.is-current {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

@media (min-width: 37.5625em) and (prefers-reduced-motion: reduce) {
  .slideshow--deck .slideshow__slide {
    transition: none;
  }
}

/* The Work page: the reel of client websites, the counters, the filter buttons and the colour blurs
   behind the client websites. */

.work-reel {
  padding: 2.5rem 0 3rem;
}

.work-reel__stage {
  display: flex;
  align-items: center;
  min-height: 420px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Held in place while the page scrolls the row (scripts/motion.ts, wide screens only) */
.work-reel--pinned .work-reel__stage {
  overflow: hidden;
  scroll-snap-type: none;
}

.work-reel__track {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
  padding: 0 1.5rem;
  will-change: transform;
}

.work-reel__item {
  display: flex;
  flex: none;
  align-self: center;
  width: 76vw;
  max-width: 320px;
  scroll-snap-align: start;
}

.work-reel__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

a.work-reel__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.work-reel__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-deep);
}

.work-reel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--ease);
}

.work-reel__image--center {
  object-position: center;
}

.work-reel__image--left {
  object-position: left center;
}

a.work-reel__card:hover .work-reel__image {
  transform: scale(1.06);
}

.work-reel__body {
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.4rem 1.5rem;
}

.work-reel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}

.work-reel__tag {
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-reel__tag:first-child {
  background: color-mix(in srgb, var(--coral) 8%, transparent);
  color: var(--coral-text);
}

.work-reel__title {
  min-height: 1.4em;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
}

.work-reel__text {
  display: -webkit-box;
  min-height: calc(1.6em * 2);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* Counters */
.stats {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2.75rem;
}

.stats + .section-heading {
  margin-top: 3.5rem;
}

.stats__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.7rem 1.8rem;
  border: 1.5px solid var(--stats-border);
  border-radius: var(--radius-large);
  background: var(--card);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.stats__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.stats__item--mint {
  --stats-border: color-mix(in srgb, var(--mint-dark) 50%, transparent);
  --stats-colour: var(--mint-deep);
}

.stats__item--coral {
  --stats-border: color-mix(in srgb, var(--coral) 50%, transparent);
  --stats-colour: var(--coral-dark);
}

.stats__item--amber {
  --stats-border: color-mix(in srgb, var(--amber) 55%, transparent);
  --stats-colour: var(--amber-dark);
}

.stats__number {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--stats-colour);
}

.stats__suffix {
  margin-left: 0.12rem;
}

.stats__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Filter buttons */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.75rem;
}

.filters[hidden] {
  display: none;
}

.filters__button {
  padding: 0.6rem 1.2rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink-soft);
  font: 700 0.82rem var(--font-body);
  cursor: pointer;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.15s var(--ease);
}

.filters__button:hover {
  border-color: var(--mint);
  transform: translateY(-2px);
}

.filters__button:active {
  transform: translateY(0) scale(0.96);
}

.filters__button[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.showcase-grid__item[hidden] {
  display: none;
}

/* Soft blurs of colour behind the client websites */
.client-websites__inner {
  position: relative;
  z-index: 1;
}

.client-websites__blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: pixel-float 9s ease-in-out infinite;
}

.client-websites__blob--mint {
  --opacity: 0.55;
  top: -140px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, color-mix(in srgb, var(--mint) 55%, transparent), transparent 70%);
}

.client-websites__blob--coral {
  --opacity: 0.4;
  bottom: -100px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--coral) 40%, transparent), transparent 70%);
  animation-duration: 11s;
  animation-direction: reverse;
}

.client-websites__more {
  margin-top: 3.5rem;
}

@media (min-width: 37.5625em) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 55.0625em) {
  .work-reel__track {
    padding: 0 2.5rem;
  }

  .work-reel__item {
    width: 320px;
  }
}

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

/* Openings with buttons (light, or in Orbit's dark colours) and the parts the product and service pages
   share: a heading beside text, steps, columns of lists, two columns, a checklist, questions and a
   contact card. */

.product-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 2.25rem;
  border-bottom: 1px solid var(--line);
}

.product-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
}

.product-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.5vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.product-hero__subtitle {
  max-width: 760px;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.product-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Light: paper fading warmer, with circles of colour in the corner */
.product-hero--light {
  background: linear-gradient(120deg, var(--paper) 55%, var(--paper-deep));
}

.product-hero--light::after {
  content: '';
  position: absolute;
  top: -130px;
  right: -100px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 28%, transparent);
  box-shadow:
    -120px 180px 0 color-mix(in srgb, var(--coral) 9%, transparent),
    -40px 250px 0 color-mix(in srgb, var(--amber) 12%, transparent);
  pointer-events: none;
}

/* Orbit: dark navy, Orbit's logo above the title and its rings beside it */
.product-hero--orbit {
  padding: 4.5rem 0 4rem;
  border-bottom-color: var(--orbit-navy);
  background:
    radial-gradient(ellipse at 78% 60%, color-mix(in srgb, var(--orbit-navy-light) 70%, transparent), transparent 60%),
    var(--orbit-navy);
  color: var(--orbit-text);
}

.product-hero--orbit .eyebrow {
  color: var(--orbit-muted);
}

.product-hero--orbit .eyebrow::before,
.product-hero--orbit .eyebrow__dot {
  background: var(--orbit-mint);
}

.product-hero--orbit .product-hero__title {
  color: var(--orbit-text);
}

.product-hero__highlight {
  color: var(--mint);
}

.product-hero--orbit .product-hero__highlight {
  color: var(--orbit-mint);
}

.product-hero--orbit .product-hero__subtitle {
  max-width: 620px;
  color: var(--orbit-muted);
}

.product-hero--orbit .button--primary {
  background: var(--orbit-mint);
  color: var(--orbit-navy);
}

.product-hero--orbit .button--primary:hover {
  background: var(--orbit-text);
  color: var(--orbit-navy);
}

.product-hero--orbit .button--outline {
  border-color: color-mix(in srgb, var(--orbit-text) 45%, transparent);
  color: var(--orbit-text);
}

.product-hero--orbit .button--outline:hover {
  border-color: var(--orbit-text);
  background: var(--orbit-text);
  color: var(--orbit-navy);
}

.product-hero__wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  line-height: 1;
  color: var(--orbit-text);
}

.product-hero__wordmark .orbit-mark {
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--orbit-mint);
}

/* Orbit's own name is set in Arial, as the product itself is. */
.product-hero__wordmark-name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-transform: lowercase;
}

.orbit-rings {
  position: relative;
  display: none;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  margin-left: auto;
}

.orbit-rings__ring {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--orbit-mint) 22%, transparent);
  border-radius: 50%;
  animation: orbit-spin 48s linear infinite;
}

.orbit-rings__ring::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--orbit-mint);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--orbit-mint) 14%, transparent);
}

.orbit-rings__ring--outer {
  inset: 0;
}

.orbit-rings__ring--middle {
  inset: 14%;
  border-style: dashed;
  animation-duration: 34s;
  animation-direction: reverse;
}

.orbit-rings__ring--middle::before {
  background: var(--orbit-text);
}

.orbit-rings__ring--inner {
  inset: 26%;
  animation-duration: 22s;
}

.orbit-rings__core {
  position: absolute;
  inset: 36%;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--orbit-mint) 24%, transparent);
  border-radius: 28%;
  background: linear-gradient(145deg, var(--orbit-navy-light), var(--orbit-navy));
  color: var(--orbit-mint);
  transform: rotate(-8deg);
  box-shadow: 0 24px 48px -12px color-mix(in srgb, var(--ink) 35%, transparent);
}

.orbit-rings__core .orbit-mark {
  width: 62%;
  height: 62%;
}

@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

/* A heading beside text */
.intro-split .callout {
  margin-bottom: 4rem;
}

.intro-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 2.5rem;
}

.intro-split .section-heading {
  margin-bottom: 0;
}

.intro-split .section-heading__title,
.two-columns__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.intro-split__text {
  font-size: 1.05rem;
}

.intro-split__text p,
.two-columns__text p,
.two-columns__link {
  margin-top: 0.8rem;
  color: var(--muted);
  line-height: 1.75;
}

/* Steps */
.steps__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.steps__step {
  padding: 1.7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
}

.steps__number {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--coral-text);
}

.steps__title {
  margin: 0.8rem 0 0.55rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.steps__text {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* Columns of lists */
.feature-columns__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.feature-columns__column {
  padding: 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
}

.feature-columns__title {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.feature-columns__list {
  padding-left: 1.15rem;
  color: var(--muted);
}

.feature-columns__list li {
  margin-bottom: 0.65rem;
  line-height: 1.6;
}

/* Two columns */
.two-columns__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.two-columns__text a,
.two-columns__link a {
  color: var(--mint-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A checklist */
.checklist__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.checklist__item {
  position: relative;
  padding: 1.1rem 1.1rem 1.1rem 2.7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-soft);
  font-weight: 600;
}

.checklist__item::before {
  content: '✓';
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  font-weight: 800;
  color: var(--emerald-dark);
}

/* Questions */
.questions__inner {
  max-width: 900px;
}

.questions__list {
  display: grid;
  gap: 0.9rem;
}

.questions__item {
  padding: 1.2rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.questions__question {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.questions__item[open] .questions__question {
  margin-bottom: 0.8rem;
}

.questions__answer p {
  color: var(--muted);
  line-height: 1.7;
}

.questions__answer a {
  color: var(--mint-text);
  text-decoration: underline;
}

/* A contact card */
.contact-card {
  overflow: hidden;
}

.contact-card .section-heading {
  margin-bottom: 0;
}

.contact-card__card {
  padding: 2.3rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}

.contact-card__title {
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.contact-card__text {
  margin: 0.65rem 0 1.5rem;
  color: var(--muted);
}

.contact-card__link {
  display: block;
  margin-top: 1.1rem;
  font-weight: 700;
  color: var(--mint-text);
}

@media (min-width: 37.5625em) {
  .steps__list,
  .feature-columns__grid,
  .checklist__list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 55.0625em) {
  .product-hero--orbit .product-hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .orbit-rings {
    display: block;
  }

  .intro-split__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
  }

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

  .feature-columns__grid,
  .checklist__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .two-columns__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

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

/* Orbit pricing: a larger title, ticked promises and wider orbits with two moons */
.product-hero--orbit-pricing {
  padding: 3.2rem 0 3.7rem;
  border-bottom-color: var(--orbit-navy);
  background:
    radial-gradient(ellipse at 82% 42%, var(--orbit-navy-light), transparent 56%),
    var(--orbit-navy);
  color: var(--orbit-text);
}

.product-hero--orbit-pricing .eyebrow {
  margin-bottom: 1.6rem;
  color: var(--orbit-muted);
}

.product-hero--orbit-pricing .eyebrow::before {
  display: none;
}

.product-hero--orbit-pricing .eyebrow__dot {
  background: var(--orbit-mint);
}

.product-hero--orbit-pricing .product-hero__wordmark {
  margin-bottom: 1.3rem;
}

.product-hero--orbit-pricing .product-hero__title {
  max-width: 700px;
  font-size: clamp(2.3rem, 10vw, 3.25rem);
  line-height: 1.08;
  color: var(--orbit-text);
}

.product-hero--orbit-pricing .product-hero__highlight {
  color: var(--orbit-mint);
}

.product-hero--orbit-pricing .product-hero__subtitle {
  max-width: 580px;
  color: var(--orbit-muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.product-hero--orbit-pricing .product-hero__actions {
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  margin-top: 2rem;
}

.product-hero--orbit-pricing .product-hero__actions .button {
  justify-content: center;
}

.product-hero--orbit-pricing .button--primary {
  background: var(--orbit-mint);
  color: var(--orbit-navy);
}

.product-hero--orbit-pricing .button--primary:hover {
  background: var(--orbit-text);
  color: var(--orbit-navy);
}

.product-hero--orbit-pricing .button--outline {
  border-color: color-mix(in srgb, var(--orbit-text) 44%, transparent);
  color: var(--orbit-text);
}

.product-hero--orbit-pricing .button--outline:hover {
  background: var(--orbit-text);
  color: var(--orbit-navy);
}

.product-hero__promises {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.3rem;
  margin-top: 2.15rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--orbit-muted);
}

.product-hero__promise {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.product-hero__promise .icon {
  font-size: 1.1rem;
  color: var(--orbit-mint);
}

.orbit-rings--orbit-pricing {
  max-width: 370px;
  margin-inline: auto;
}

.orbit-rings--orbit-pricing .orbit-rings__ring {
  border-color: color-mix(in srgb, var(--orbit-mint) 35%, transparent);
  animation-duration: 42s;
}

.orbit-rings--orbit-pricing .orbit-rings__ring::before {
  top: -5px;
  width: 10px;
  height: 10px;
  margin-left: 0;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--orbit-mint) 12%, transparent);
}

.orbit-rings--orbit-pricing .orbit-rings__ring--outer {
  inset: 3%;
}

.orbit-rings--orbit-pricing .orbit-rings__ring--middle {
  inset: 17%;
  animation-duration: 32s;
}

.orbit-rings--orbit-pricing .orbit-rings__ring--inner {
  inset: 30%;
  animation-duration: 26s;
}

.orbit-rings--orbit-pricing .orbit-rings__ring--inner::before {
  width: 8px;
  height: 8px;
}

.orbit-rings--orbit-pricing .orbit-rings__core {
  inset: 38%;
  border-radius: 27%;
  border-color: color-mix(in srgb, var(--orbit-mint) 35%, transparent);
  background: linear-gradient(150deg, var(--orbit-navy-light), var(--orbit-navy));
  transform: rotate(-12deg);
  box-shadow: 0 22px 54px color-mix(in srgb, var(--orbit-navy) 85%, transparent);
}

.orbit-rings--orbit-pricing .orbit-rings__core .orbit-mark {
  width: 66%;
  height: 66%;
}

.orbit-rings__moon {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orbit-mint);
}

.orbit-rings__moon--upper {
  top: 8%;
  right: 17%;
}

.orbit-rings__moon--lower {
  bottom: 20%;
  left: 3%;
}

@media (min-width: 37.5625em) {
  .product-hero--orbit-pricing {
    padding: 5rem 0 5.5rem;
  }

  .product-hero--orbit-pricing .product-hero__title {
    font-size: clamp(2.55rem, 4.8vw, 4rem);
  }

  .product-hero--orbit-pricing .product-hero__actions {
    flex-direction: row;
    align-items: center;
  }

  .product-hero--orbit-pricing .product-hero__actions .button {
    justify-content: normal;
  }
}

@media (min-width: 55.0625em) {
  .product-hero--orbit-pricing .product-hero__inner {
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
  }
}

/* Plans and prices: the plans with their billing switch, the one-time build options, the questions
   beside their heading, the dark contact panel, and the quiet text links they share. */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  font-weight: 750;
  color: var(--orbit-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--orbit-deep) 30%, transparent);
  text-underline-offset: 0.25rem;
}

.text-link:hover {
  color: var(--orbit-teal);
}

/* Plans */
.care-plans {
  padding-top: 4.5rem;
  background: var(--paper);
}

.care-plans__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  margin-bottom: 2.25rem;
}

.care-plans__intro .section-heading {
  margin: 0;
}

.care-plans__intro .section-heading__title {
  font-size: clamp(2rem, 3.7vw, 2.8rem);
}

.care-plans__intro .section-heading__intro p {
  font-size: 0.98rem;
}

.care-plans__period {
  flex: none;
}

.care-plans__switch {
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
}

.care-plans__switch[hidden] {
  display: none;
}

.care-plans__switch-button {
  padding: 0.67rem 0.85rem;
  border: 0;
  border-radius: 26px;
  background: transparent;
  color: var(--ink-soft);
  font: 700 0.82rem var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}

.care-plans__switch-button[aria-pressed='true'] {
  background: var(--orbit-deep);
  color: var(--orbit-text);
}

.care-plans__saving {
  margin-left: 0.15rem;
  padding: 0.22rem 0.4rem;
  border-radius: 20px;
  background: var(--orbit-mint);
  color: var(--orbit-navy);
  font-size: 0.68rem;
}

.care-plans__summary {
  max-width: 265px;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.care-plans__grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 1.7rem;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.8rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.plan--featured {
  padding: calc(1.8rem - 1px);
  border: 2px solid var(--orbit-teal);
  background: color-mix(in srgb, var(--orbit-mint) 8%, var(--card));
  box-shadow: 0 16px 35px -28px var(--orbit-navy);
}

.plan__badge {
  position: absolute;
  top: -16px;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: 50px;
  background: var(--orbit-navy);
  color: var(--orbit-mint);
  font-size: 0.68rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.plan__kicker {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--orbit-teal);
}

.plan__name {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.52rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.plan__tag {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 1.6rem;
  white-space: nowrap;
  color: var(--orbit-navy);
}

.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 2.65vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.06em;
}

.plan__unit {
  color: var(--muted);
  font-size: 0.75rem;
}

.plan__billing {
  min-height: 2.25rem;
  margin-top: 0.5rem;
  color: var(--orbit-teal);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.5;
}

.plan__description {
  margin: 1rem 0 1.3rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.6;
}

.plan__features {
  list-style: none;
  display: grid;
  flex: 1;
  align-content: start;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.plan__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.plan__feature .icon {
  margin-block: 0.175em;
  font-size: 1rem;
  color: var(--orbit-teal);
}

.plan__choose {
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 0.8rem;
  font-size: 0.78rem;
  text-align: center;
  white-space: normal;
}

.plan--featured .plan__choose {
  background: var(--orbit-navy);
  color: var(--orbit-mint);
}

.plan--featured .plan__choose:hover {
  background: var(--orbit-deep-light);
}

.plan__fine {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
}

.care-plans__note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.65;
}

.care-plans__note .icon {
  font-size: 1.2rem;
  color: var(--orbit-teal);
}

/* One-time build options */
.build-options {
  background: var(--paper-deep);
}

.build-options__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  margin-bottom: 2rem;
}

.build-options__intro .section-heading {
  margin: 0;
}

.build-options__intro .button {
  flex: none;
}

.build-options__grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.build-option {
  display: flex;
  flex-direction: column;
  padding: 1.7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
}

.build-option--highlighted {
  border-color: var(--orbit-teal);
}

.build-option__name {
  font-family: var(--font-display);
  font-size: 1.17rem;
  font-weight: 800;
}

.build-option__price {
  margin: 0.55rem 0;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--orbit-navy);
}

.build-option__price-note {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.build-option__text {
  color: var(--muted);
  font-size: 0.88rem;
}

.build-option__list {
  flex: 1;
  margin: 1.3rem 0;
  padding-left: 1.15rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.8;
}

.build-options__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.45rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.65;
}

.build-options__note .icon {
  font-size: 1.2rem;
  color: var(--orbit-teal);
}

/* Questions beside their heading */
.questions--beside .questions__inner {
  max-width: var(--width-page);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.questions--beside .section-heading {
  margin: 0;
}

.questions__heading .text-link {
  margin-top: 1.3rem;
}

.questions--beside .questions__list {
  align-content: start;
  gap: 0.65rem;
}

/* The dark contact panel */
.contact-panel {
  padding-top: 3rem;
}

.contact-panel__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.65rem;
  border-radius: var(--radius-large);
  background:
    radial-gradient(ellipse at 92% 16%, var(--orbit-navy-light), transparent 65%),
    var(--orbit-navy);
  color: var(--orbit-text);
}

.contact-panel__label {
  margin-bottom: 0.75rem;
  color: var(--orbit-mint);
}

.contact-panel__label .section-heading__number {
  color: var(--orbit-muted);
}

.contact-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.contact-panel__text {
  max-width: 590px;
  margin-top: 0.7rem;
  color: var(--orbit-muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

.contact-panel__button {
  flex: none;
  justify-content: center;
  white-space: normal;
}

.contact-panel .button--primary {
  background: var(--orbit-mint);
  color: var(--orbit-navy);
}

.contact-panel .button--primary:hover {
  background: var(--orbit-text);
  color: var(--orbit-navy);
}

.contact-panel__small-print {
  margin-top: 1.3rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.7;
}

.contact-panel__small-print a {
  color: var(--orbit-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 37.5625em) {
  .care-plans {
    padding-top: 5.5rem;
  }

  .care-plans__intro .section-heading__intro p {
    font-size: 1.06rem;
  }

  .care-plans__switch-button {
    padding: 0.7rem 0.95rem;
  }

  .care-plans__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
  }

  .plan {
    padding: 1.65rem 1.32rem 1.3rem;
  }

  .plan--featured {
    padding: calc(1.65rem - 1px) calc(1.32rem - 1px) calc(1.3rem - 1px);
  }

  .care-plans__note {
    padding: 1.1rem 1.3rem;
  }

  .contact-panel__panel {
    padding: 2.5rem;
  }

  .contact-panel__button {
    white-space: nowrap;
  }
}

@media (min-width: 55.0625em) {
  .care-plans__intro,
  .build-options__intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }

  .care-plans__period {
    text-align: center;
  }

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

  .questions--beside .questions__inner {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
  }

  .contact-panel__panel {
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 68.8125em) {
  .care-plans__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.95rem;
  }

  .plan__tag {
    min-height: 2.4em;
  }

  .plan__description {
    min-height: 5.2em;
  }
}

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

  .plan:hover {
    transform: none;
  }
}

/* The page of links (sections/link-hub.liquid): one narrow column on its own, without the site's header
   and footer. Each link carries its colour as --link-colour. */

.link-hub {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

.link-hub__top {
  position: relative;
  overflow: hidden;
  padding: 44px 0 22px;
  text-align: center;
}

.pixel-field--links {
  inset: 0;
}

.link-hub__brand {
  position: relative;
  display: inline-flex;
}

.link-hub__brand .brand {
  align-items: center;
}

.link-hub__brand .brand__lockup {
  font-size: 29px;
}

.link-hub__tagline {
  position: relative;
  max-width: 22em;
  margin: 16px auto 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.link-hub__place {
  position: relative;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.link-hub .dot-strip {
  max-width: none;
  height: 22px;
  margin: 18px 0 26px;
}

/* The featured product */
.link-hub__feature {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--ink) 55%, transparent);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.link-hub__feature::after {
  content: '';
  position: absolute;
  top: -90px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--dmnexa) 42%, transparent), transparent 70%);
}

.link-hub__feature:hover {
  transform: translateY(-2px);
}

.link-hub__feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dmnexa);
}

.link-hub__feature-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--dmnexa);
}

.link-hub__feature-title {
  position: relative;
  margin-top: 12px;
  font-family: var(--font-logo);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.link-hub__feature-accent {
  color: var(--dmnexa);
}

.link-hub__feature-text {
  position: relative;
  max-width: 26em;
  margin-top: 9px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.link-hub__feature-action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.link-hub__feature-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 11px;
  background: var(--dmnexa);
  color: var(--card);
  font-size: 14px;
  font-weight: 800;
}

.link-hub__feature-button .line-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.link-hub__feature-note {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

/* Groups of links */
.link-hub__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.link-hub__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.link-hub__links {
  list-style: none;
  display: grid;
  gap: 10px;
}

.link-hub__link {
  --link-colour: var(--mint-dark);
  display: grid;
  grid-template-columns: 34px 1fr 16px;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.link-hub__link--mint-deep {
  --link-colour: var(--mint-deep);
}

.link-hub__link--emerald {
  --link-colour: var(--emerald);
}

.link-hub__link--amber {
  --link-colour: var(--amber);
}

.link-hub__link--coral {
  --link-colour: var(--coral);
}

.link-hub__link:hover,
.link-hub__link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--link-colour);
  box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--ink) 40%, transparent);
}

.link-hub__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in oklch, var(--link-colour) 20%, var(--paper));
  color: var(--mint-deep);
}

.line-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link-hub__icon .line-icon {
  width: 17px;
  height: 17px;
}

.link-hub__link-text {
  display: grid;
  min-width: 0;
}

.link-hub__link-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.link-hub__link-line {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}

.link-hub__chevron {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.link-hub__chevron .line-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.link-hub__link:hover .link-hub__chevron,
.link-hub__link:focus-visible .link-hub__chevron {
  color: var(--link-colour);
}

/* Ways to reach us */
.link-hub__reach-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.link-hub__reach {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}

.link-hub__reach:hover,
.link-hub__reach:focus-visible {
  transform: translateY(-2px);
  border-color: var(--mint-dark);
}

.link-hub__reach .line-icon {
  width: 19px;
  height: 19px;
}

.link-hub__foot {
  margin-top: 36px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
  color: var(--muted);
}

.link-hub__foot a,
.link-hub__foot button {
  font: inherit;
  font-weight: 700;
  color: inherit;
}

.link-hub__foot button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

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

@media (min-width: 25.0625em) {
  .link-hub__brand .brand__lockup {
    font-size: 34px;
  }

  .link-hub__feature-action {
    flex-direction: row;
    align-items: center;
  }

  .link-hub__feature-note {
    text-align: right;
  }
}

/* The original website's motion. The scroll reveal (browser.ts adds .reveal, then .visible as the element
   comes into view) runs on every page; the counters roll up on the work page (scripts/motion.ts). Nothing
   here hides anything on its own: only the scripts add these classes. */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Counters: the odometer package's "minimal" theme, as the original loaded it, in the theme's font */
.odometer {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  font-family: var(--font-display);
  color: inherit;
}

.odometer .odometer-digit {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.odometer .odometer-digit .odometer-digit-spacer {
  display: inline-block;
  vertical-align: middle;
  visibility: hidden;
}

.odometer .odometer-digit .odometer-digit-inner {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  text-align: left;
}

.odometer .odometer-digit .odometer-ribbon,
.odometer .odometer-digit .odometer-ribbon-inner {
  display: block;
  backface-visibility: hidden;
}

.odometer .odometer-digit .odometer-value {
  display: block;
  transform: translateZ(0);
}

.odometer .odometer-digit .odometer-value.odometer-last-value {
  position: absolute;
}

.odometer.odometer-animating-up .odometer-ribbon-inner {
  transition: transform 2s;
}

.odometer.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
  transform: translateY(-100%);
}

.odometer.odometer-animating-down .odometer-ribbon-inner {
  transform: translateY(-100%);
}

.odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  transition: transform 2s;
  transform: translateY(0);
}

/* Small text controls get a taller hit area (WCAG 2.2 AA: at least 24 px; 44 px recommended) without
   moving the layout: the padding grows the target and the same negative margin gives the space back.
   Last in the cascade, so it applies over each control's own spacing. */

.site-header__brand,
.site-footer__brand > a,
.link-hub__brand,
.text-link,
.site-footer__legal-link,
.questions__question,
.consent-banner__summary {
  padding-block: 0.6rem;
  margin-block: -0.6rem;
}

/* A logo link is a box, so its padding is what the pointer can reach. */
.site-header__brand,
.site-footer__brand > a,
.link-hub__brand {
  display: inline-block;
}

/* An open question keeps its gap to the answer (0.8rem in 14-product.css, less the margin given back). */
.questions__item[open] .questions__question {
  margin-bottom: 0.2rem;
}