/*
 * Cargo: dependable and on the move, like a waybill and a route map.
 *
 * The frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the blocks the theme draws
 * itself (the two openings, the article body, the divider) and the theme's marks on the Theme Kit's stock blocks, which
 * it finds by the type includes/bind.php writes on each section (data-block). Everything inside a kit block that is not
 * one of those marks is in kit-theme.css.
 *
 * The marks, each drawn once here and used everywhere:
 *   .cargo-road     a road marking: dashes of the accent colour. It closes the header bar, runs along the foot of the
 *                   opening, opens the footer and closes a band that asks for something.
 *   .cargo-route    a route: a ring, a dashed line and a dot. It stands over the opening's heading and over every section
 *                   heading of a stock block; the page not found draws one that runs out before its stop.
 *   .cargo-barcode  a barcode, as printed on a shipping label: on the opening picture's tab, on cards, in the footer.
 *   --cargo-ribs    the ribs of a container's side, on the main colour: the footer and the dark bands.
 *   .cargo-stops    stops on a route: a ring for each, joined by a dashed line (the opening's selling points, the steps
 *                   of a process, the milestones of a timeline, the phone menu's pages).
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair. The accent colour on the
 * main colour (the road marking, a route) is decoration only, never words. Words on a photograph are white on the
 * theme's own dark shade, the one place the palette does not decide.
 *
 * Type comes from the layout: --font-heading, --font-body, --cargo-heading-weight and --cargo-body-strong (the
 * heaviest weights the font palette loads), and --cargo-scale (one per heading face, set by the class the layout
 * writes on <body>). Never write a font-weight number other than 400 here.
 */

/* ------------------------------------------------------------------ Tokens */

/* :where(:root) has no weight: the layout's inline values, the palette and a website's own colours always win over these
   defaults, wherever this file is linked. A plain :root rule here would override them (Loom drew every website in its
   fallback colours that way until 4.x). */
:where(:root) {
  --cargo-width: 76rem;
  --cargo-gutter: clamp(1rem, 4vw, 2.25rem);
  --cargo-bar: 4.5rem;
  --cargo-radius: 0.25rem;
  --cargo-button-radius: 0.25rem;
  --cargo-heading-weight: 700;
  --cargo-body-strong: 600;
  --cargo-speed: 160ms;
  --cargo-line: var(--border, #d4d1c9);
  --cargo-road-height: 0.3125rem;
  /* A face this file does not know is taken for an ordinary, wide one. */
  --cargo-scale: 0.74;
}

/* Condensed faces differ in width by a third: each heading face is set at the size where an ordinary word takes the
   same room, so the sizes below (and in kit-theme.css, and in the theme's guide) hold for every font palette and for a
   face a website brings of its own. Barlow Condensed is 1. */
.cargo-face--barlow-condensed { --cargo-scale: 1; }
.cargo-face--big-shoulders { --cargo-scale: 0.9; }
.cargo-face--sofia-sans-extra-condensed { --cargo-scale: 1.12; }
.cargo-face--fira-sans-extra-condensed { --cargo-scale: 0.94; }
.cargo-face--saira-condensed { --cargo-scale: 1; }
.cargo-face--bebas-neue { --cargo-scale: 1.1; }
.cargo-face--oswald { --cargo-scale: 0.93; }
.cargo-face--anton { --cargo-scale: 0.9; }
.cargo-face--roboto-condensed { --cargo-scale: 0.9; }
.cargo-face--ibm-plex-sans { --cargo-scale: 0.77; }
.cargo-face--archivo { --cargo-scale: 0.72; }

/* ------------------------------------------------------------------ Base */

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

html {
  scroll-padding-top: calc(var(--cargo-bar) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #f2f1ed);
  color: var(--text-primary, #1a1e22);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-ink, #a64404);
  outline-offset: 3px;
}

.cargo-main {
  display: block;
  min-height: 40vh;
}

.cargo-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--cargo-button-radius);
  background: var(--primary, #1c2126);
  color: var(--on-primary, #f6f5f1);
  font-weight: var(--cargo-body-strong);
  text-decoration: none;
}

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

.cargo-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* ------------------------------------------------------------------ The marks */

/* A road marking: dashes of the accent colour, as painted down the middle of a road. */
.cargo-road {
  display: block;
  height: var(--cargo-road-height);
  background: repeating-linear-gradient(90deg, var(--accent, #f26b1d) 0 2.25rem, transparent 2.25rem 3.5rem);
}

/* A route: a ring where it starts, a dashed line, a dot where it ends. In the accent colour, or in the colour of the
   words around it where the accent would not show (--cargo-route-ink; the dot is --cargo-route-stop). */
.cargo-route {
  --cargo-route-ink: var(--accent, #f26b1d);
  --cargo-route-stop: var(--cargo-route-ink);
  display: block;
  width: 5.25rem;
  height: 0.875rem;
  background:
    radial-gradient(circle closest-side, transparent 0 calc(100% - 0.2rem), var(--cargo-route-ink) calc(100% - 0.19rem) 98%, transparent 100%) 0 50% / 0.875rem 0.875rem no-repeat,
    radial-gradient(circle closest-side, var(--cargo-route-stop) 0 96%, transparent 100%) 100% 50% / 0.625rem 0.625rem no-repeat,
    repeating-linear-gradient(90deg, var(--cargo-route-ink) 0 0.4rem, transparent 0.4rem 0.7rem) 1.2rem 50% / calc(100% - 2.05rem) 0.1875rem no-repeat;
}

/* The route that runs out before its stop (the page not found): no dot, and the dashes fade. */
.cargo-route--lost {
  width: 7rem;
  background:
    radial-gradient(circle closest-side, transparent 0 calc(100% - 0.2rem), var(--cargo-route-ink) calc(100% - 0.19rem) 98%, transparent 100%) 0 50% / 0.875rem 0.875rem no-repeat,
    repeating-linear-gradient(90deg, var(--cargo-route-ink) 0 0.4rem, transparent 0.4rem 0.7rem) 1.2rem 50% / calc(100% - 1.2rem) 0.1875rem no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 96%);
}

/* A barcode, as printed on a shipping label. Bars of the colour of the words around it; decoration only. */
.cargo-barcode {
  display: inline-block;
  flex: none;
  width: 3.25rem;
  height: 1rem;
  background: linear-gradient(90deg,
    currentColor 0 2px, transparent 0 4px, currentColor 0 5px, transparent 0 7px, currentColor 0 10px, transparent 0 11px,
    currentColor 0 12px, transparent 0 15px, currentColor 0 17px, transparent 0 18px, currentColor 0 19px, transparent 0 21px,
    currentColor 0 24px, transparent 0 25px, currentColor 0 26px, transparent 0 28px, currentColor 0 29px, transparent 0 31px,
    currentColor 0 33px, transparent 0 34px, currentColor 0 35px, transparent 0 37px, currentColor 0 40px, transparent 0 42px,
    currentColor 0 43px, transparent 0 45px, currentColor 0 48px, transparent 0 49px, currentColor 0 50px, transparent 0 52px) 0 0 / 52px 100% no-repeat;
}

/* The ribs of a container's side: light upright ribs on the main colour. A custom property, so every container (the
   footer, a dark band, the opening without a picture) draws the same ribs at the same pitch. */
:where(:root) {
  --cargo-ribs: repeating-linear-gradient(90deg,
    transparent 0 0.9rem,
    color-mix(in srgb, var(--on-primary, #ffffff) 4%, transparent) 0.9rem 1.15rem,
    color-mix(in srgb, var(--on-primary, #ffffff) 8%, transparent) 1.15rem 1.3rem,
    color-mix(in srgb, var(--on-primary, #ffffff) 2%, transparent) 1.3rem 1.65rem,
    transparent 1.65rem 1.9rem);
}

/* Stops on a route: each item has a ring (with its icon or number in it), and a dashed line joins one ring to the next. */
.cargo-stops {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cargo-stops__stop {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  padding-bottom: 1rem;
}

.cargo-stops__stop:last-child {
  padding-bottom: 0;
}

.cargo-stops__stop:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.5rem;
  bottom: 0.25rem;
  left: calc(1.125rem - 1px);
  border-left: 2px dashed var(--accent, #f26b1d);
}

.cargo-stops__mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--accent, #f26b1d);
  border-radius: 50%;
  background: var(--background, #f2f1ed);
  color: var(--accent-ink, #a64404);
}

.cargo-stops__mark .cargo-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.cargo-stops__text {
  min-width: 0;
  padding-top: 0.3rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ Buttons */

/* One shape for every button the theme draws itself: a firm rectangle with a small corner and an arrow after the words.
   kit-theme.css gives the kit's buttons the same corner, and the line of this theme in resilience.css
   (--chrome-button-radius) gives it to the cookie notice and the phone action bar: theme-chrome.test.mjs holds the three
   together. A label may take two lines; it never runs out of the button. */
.cargo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--cargo-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: var(--cargo-body-strong);
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--cargo-speed) ease, border-color var(--cargo-speed) ease, box-shadow var(--cargo-speed) ease;
}

/* The label is a span that may shrink: a flex item's text otherwise keeps its longest word's width and runs out of the
   button and off a phone's screen. "anywhere" breaks only a word wider than the whole button, as the kit's buttons do. */
.cargo-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The arrow after the words of a filled button: it moves on a little when the button is pointed at. */
.cargo-button:is(.cargo-button--primary, .cargo-button--accent)::after {
  content: "\2192";
  flex: none;
  font-family: var(--font-body, sans-serif);
  font-weight: 400;
  line-height: 1;
  transition: transform var(--cargo-speed) ease;
}

.cargo-button:is(.cargo-button--primary, .cargo-button--accent):hover::after {
  transform: translateX(0.2rem);
}

.cargo-button--primary {
  background: var(--primary, #1c2126);
  color: var(--on-primary, #f6f5f1);
}

.cargo-button--primary:hover {
  background: var(--primary-alt, #2a3138);
}

.cargo-button--accent {
  background: var(--accent, #f26b1d);
  color: var(--on-accent, #16191c);
}

/* The hover is a ring in the words' colour, not a lighter fill: a lighter fill would bring the words' contrast under
   what the colour contract promises for this pair. */
.cargo-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #16191c) 55%, transparent);
}

.cargo-button--secondary {
  border-color: var(--text-primary, #1a1e22);
  background: transparent;
  color: var(--text-primary, #1a1e22);
}

.cargo-button--secondary:hover {
  background: color-mix(in srgb, var(--text-primary, #1a1e22) 8%, transparent);
}

/* A framed button on a photograph (the opening) or on the main colour (an opening without a picture). */
.cargo-button--onphoto {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.cargo-button--onphoto:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.cargo-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-size: 0.9375rem;
}

.cargo-button--block {
  width: 100%;
}

/* ------------------------------------------------------------------ Announcement */

/* A hi-vis notice above everything: the accent colour with its own ink. */
.cargo-announcement {
  background: var(--accent, #f26b1d);
  color: var(--on-accent, #16191c);
  font-size: 0.9375rem;
  font-weight: var(--cargo-body-strong);
}

.cargo-announcement[hidden] {
  display: none;
}

.cargo-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  max-width: calc(var(--cargo-width) + 2 * var(--cargo-gutter));
  margin-inline: auto;
  padding: 0.45rem var(--cargo-gutter);
  text-align: center;
}

.cargo-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
}

.cargo-announcement__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.cargo-announcement a {
  font-weight: var(--cargo-body-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.cargo-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.cargo-announcement .announcement-dismiss:hover {
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.cargo-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* ------------------------------------------------------------------ Header */

/* A bar of the main colour, like the cab of a lorry, closed at its foot by a road marking. It stays at the top. The
   bar has one height for every kind; the centred kind adds a row for the menu. */
.cargo-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--primary, #1c2126);
  color: var(--on-primary, #f6f5f1);
}

.cargo-header__bar {
  position: relative;
  padding-bottom: var(--cargo-road-height);
}

.cargo-header__bar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--cargo-road-height);
  background: repeating-linear-gradient(90deg, var(--accent, #f26b1d) 0 2.25rem, transparent 2.25rem 3.5rem);
}

.cargo-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: var(--cargo-bar);
  max-width: calc(var(--cargo-width) + 2 * var(--cargo-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--cargo-gutter);
}

.cargo-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The centred kind: the name in the middle column, the actions in the right one, so a long name never runs under them. */
.cargo-header--centered .cargo-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

.cargo-header--centered .cargo-header__brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.cargo-header--centered .cargo-header__actions {
  grid-column: 3;
  justify-self: end;
}

.cargo-header__rail {
  max-width: calc(var(--cargo-width) + 2 * var(--cargo-gutter));
  margin-inline: auto;
  padding: 0 var(--cargo-gutter) 0.55rem;
}

.cargo-header__rail .cargo-nav {
  justify-content: center;
}

.cargo-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.cargo-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  font-size: 1rem;
  font-weight: var(--cargo-body-strong);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.cargo-header__phone-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.cargo-header__phone:hover span {
  text-decoration: underline;
  text-decoration-color: var(--accent, #f26b1d);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.cargo-header__slot {
  display: flex;
  align-items: center;
}

/* The website's name, in the heading face. Its line height and the small padding leave room for what letters carry
   above and below (the caron of Š, the tail of Ų, the descender of g): a tighter line in a box that clips cuts them
   (theme-clipped-marks.test.mjs, with "Šilėnų Žirgynas"). The shared rule (resilience.css) keeps a long name to two
   balanced lines and the shared script sets it smaller before a word would break; this rule only sets its look. */
.cargo-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.cargo-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(27rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.6rem * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  letter-spacing: 0.005em;
  line-height: 1.2;
}

/* A long name (more than 28 characters, includes/chrome.php) is set in the body face at a plain size: in the heading
   face eighty characters would take three lines. */
.cargo-brand__name--long {
  font-family: var(--font-body, sans-serif);
  font-size: 1.0625rem;
  font-weight: var(--cargo-body-strong);
  letter-spacing: 0;
  line-height: 1.3;
}

/* On a wide screen the name is never clipped: a very long one takes a third line rather than losing its end. The
   shared two-line rule is a clamp, and a clamp needs a box that hides its overflow, which would cut the marks; so the
   name here is a plain block. */
.cargo-header .cargo-brand__name {
  display: block;
  overflow: visible;
}

/* On a phone the shared rule keeps the name to two lines (it wins there). The box clips a little past its edges, so a
   caron above the first line and a tail under the second stay whole, but not so far that the top of a third line
   shows under the second. */
@media (max-width: 39.99rem) {
  .cargo-header .cargo-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: calc(1.375rem * var(--cargo-scale));
  }

  .cargo-header .cargo-brand__name--long {
    font-size: 1rem;
  }
}

.cargo-brand:has(.cargo-brand__logo, .brand-logo-original, .logo-mask) .cargo-brand__name:not(.cargo-brand__name--long) {
  font-size: calc(1.375rem * var(--cargo-scale));
}

.cargo-header .cargo-brand__logo,
.cargo-header .brand-logo-original {
  max-height: 2.75rem;
  width: auto;
}

/* A drawn logo (an SVG file) saved without a width and a height has a shape but no size of its own, and beside the name
   in a row it then takes no room at all: the logo is simply not there (Folio's lesson, CMS 4.32.0). Given a height, its
   width follows from its shape. A photograph of a logo keeps its own size under the limits above. */
.cargo-header .brand-logo-original[src*=".svg"] {
  height: 2.75rem !important;
}

.cargo-footer .brand-logo-original[src*=".svg"] {
  height: 3rem !important;
}

.cargo-header .logo-mask {
  background-color: var(--on-primary, #f6f5f1) !important;
}

/* ------------------------------------------------------------------ Topbar */

/* A slim line above the bar, like a dispatch board: the phone, the email and the social links (wide screens only). */
.cargo-topbar {
  border-bottom: 1px solid color-mix(in srgb, var(--on-primary, #f6f5f1) 14%, transparent);
  background: var(--primary-alt, #2a3138);
  color: var(--on-primary, #f6f5f1);
  font-size: 0.875rem;
}

.cargo-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--cargo-width) + 2 * var(--cargo-gutter));
  min-height: 2.25rem;
  margin-inline: auto;
  padding: 0 var(--cargo-gutter);
}

.cargo-topbar__contact {
  display: flex;
  gap: 1.75rem;
  min-width: 0;
}

.cargo-topbar__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Each contact detail is a stop: a small ring before it. */
.cargo-topbar__contact a::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid var(--accent, #f26b1d);
  border-radius: 50%;
}

.cargo-topbar a {
  color: inherit;
  text-decoration: none;
}

.cargo-topbar a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.cargo-topbar__social,
.cargo-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cargo-topbar__social svg,
.cargo-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

@media (max-width: 63.99rem) {
  .cargo-topbar {
    display: none;
  }
}

/* ------------------------------------------------------------------ Navigation */

.cargo-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.15rem;
  min-width: 0;
}

.cargo-header--simple .cargo-nav,
.cargo-header--topbar .cargo-nav {
  margin-left: auto;
}

.cargo-nav__item {
  position: relative;
}

.cargo-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--cargo-button-radius);
  color: inherit;
  font-size: 1rem;
  font-weight: var(--cargo-body-strong);
  line-height: 1.3;
  text-decoration: none;
}

/* A label is allowed to wrap: resilience.js counts a wrapped label as a crowded menu and folds it into the menu button.
   Without scripts nothing folds, and a label kept on one line would run off the screen instead. */
.cargo-nav__item {
  min-width: 0;
}

.cargo-nav__item > a:hover,
.cargo-nav__item--parent:focus-within > a {
  background: var(--primary-alt, #2a3138);
}

/* The page being shown: a short bar of the accent colour under its name, like the stop the lorry is at. */
.cargo-nav__item.is-current > a {
  box-shadow: inset 0 -3px 0 var(--accent, #f26b1d);
  border-radius: var(--cargo-button-radius) var(--cargo-button-radius) 0 0;
}

.cargo-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.cargo-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.4rem;
  border: 1px solid var(--cargo-line);
  border-top: 3px solid var(--accent, #f26b1d);
  border-radius: 0 0 var(--cargo-radius) var(--cargo-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1a1e22);
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--text-primary, #1a1e22) 40%, transparent);
  visibility: hidden;
  opacity: 0;
}

.cargo-nav__item--parent:is(:hover, :focus-within) > .cargo-nav__children {
  visibility: visible;
  opacity: 1;
}

.cargo-nav__children a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--cargo-radius);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.cargo-nav__children a:hover {
  background: var(--surface-alt, #e4e2dc);
}

/* The menu button: three lines that turn into a cross. Hidden on a wide screen unless resilience.js folds the menu into
   it (theme-nav-compact on #site-header, whose shared rules show it). */
.cargo-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--on-primary, #f6f5f1) 35%, transparent);
  border-radius: var(--cargo-button-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.cargo-menu-button:hover {
  border-color: currentColor;
}

.cargo-menu-button__lines {
  display: grid;
  gap: 0.28rem;
  width: 1.15rem;
}

.cargo-menu-button__lines i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--cargo-speed) ease, opacity var(--cargo-speed) ease;
}

.cargo-menu-button[aria-expanded="true"] .cargo-menu-button__lines i:nth-child(1) {
  transform: translateY(0.4rem) rotate(45deg);
}

.cargo-menu-button[aria-expanded="true"] .cargo-menu-button__lines i:nth-child(2) {
  opacity: 0;
}

.cargo-menu-button[aria-expanded="true"] .cargo-menu-button__lines i:nth-child(3) {
  transform: translateY(-0.4rem) rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A panel of the main colour under the bar with every page, set as the stops of a route. It scrolls inside itself when
   the pages are many, so the last one is always reachable. */
.cargo-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--cargo-head). With the bar's own height here, the foot of a long menu lay under the window's edge and its last
     link could not be reached (verify-theme-stress.mjs, menu-unreachable). */
  max-height: calc(100dvh - var(--cargo-head, var(--cargo-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--primary, #1c2126);
  color: var(--on-primary, #f6f5f1);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--primary, #1c2126) 70%, transparent);
}

.cargo-drawer[hidden] {
  display: none;
}

.cargo-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 1rem var(--cargo-gutter) 1.75rem;
}

.cargo-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cargo-drawer__nav {
  display: grid;
}

/* Each page is a stop: a ring at the left, a dashed line down to the next ring. */
.cargo-drawer__item {
  position: relative;
  padding-left: 2rem;
}

.cargo-drawer__item::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 0.125rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--accent, #f26b1d);
  border-radius: 50%;
}

.cargo-drawer__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.2rem;
  bottom: -0.05rem;
  left: calc(0.5625rem - 1px);
  border-left: 2px dashed color-mix(in srgb, var(--on-primary, #f6f5f1) 45%, transparent);
}

/* A page name in the heading face. data-fit-text (includes/chrome.php) lets the shared script set a long single word
   smaller instead of breaking it. */
.cargo-drawer__link {
  display: block;
  padding: 0.6rem 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.6rem * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  line-height: 1.25;
  text-decoration: none;
}

.cargo-drawer__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent, #f26b1d);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2em;
}

.cargo-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.75rem;
}

.cargo-drawer__children a {
  padding: 0.3rem 0;
  color: inherit;
  text-decoration: none;
}

.cargo-drawer__children a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.cargo-drawer__footer {
  display: grid;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--on-primary, #f6f5f1) 18%, transparent);
}

.cargo-drawer__contact {
  width: fit-content;
  color: inherit;
  font-weight: var(--cargo-body-strong);
  text-decoration: none;
}

/* Below the desktop width the menu, the phone, the button and the slot move into the phone menu. */
@media (max-width: 63.99rem) {
  .cargo-nav,
  .cargo-header__rail,
  .cargo-header__phone,
  .cargo-header__cta,
  .cargo-header__slot {
    display: none;
  }

  .cargo-menu-button {
    display: inline-flex;
  }

  .cargo-header--centered .cargo-header__inner {
    display: flex;
  }
}

/* A phone menu left open while the window grows to a desktop is put away, unless the bar is folded. */
@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact) .cargo-drawer {
    display: none;
  }
}

@media (max-width: 79.99rem) {
  .cargo-header--simple .cargo-header__phone {
    display: none;
  }
}

/* ------------------------------------------------------------------ Breadcrumbs */

/* The way to this page, as a route: a short dashed line between one stop and the next. */
.cargo-breadcrumbs {
  max-width: calc(var(--cargo-width) + 2 * var(--cargo-gutter));
  margin-inline: auto;
  padding: 1.25rem var(--cargo-gutter) 0;
}

.cargo-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #4d545b);
  font-size: 0.9375rem;
  list-style: none;
}

.cargo-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.cargo-breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 2px;
  margin-right: 0.6rem;
  background: repeating-linear-gradient(90deg, var(--accent, #f26b1d) 0 4px, transparent 4px 7px);
}

.cargo-breadcrumbs a {
  text-decoration: none;
}

.cargo-breadcrumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.cargo-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #1a1e22);
  font-weight: var(--cargo-body-strong);
}

/* ------------------------------------------------------------------ The full opening */

/* The photograph, the shade and the words (includes/hero.php). Words here are white on the theme's own shade. The
   opening takes what is left of the first screen: theme.js says where it starts (--cargo-opening-start); until then,
   the header, and under the breadcrumb one breadcrumb line and the space around it. */
.cargo-opening {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(26rem, calc(100svh - var(--cargo-opening-start, var(--cargo-head, var(--cargo-bar)))), 50rem);
  overflow: hidden;
  background: #17191b;
  color: #fff;
}

.cargo-main > nav[aria-label]:first-child + .cargo-opening {
  margin-top: 1.25rem;
  min-height: clamp(20rem, calc(100svh - var(--cargo-opening-start, calc(var(--cargo-head, var(--cargo-bar)) + 1.25rem + 0.9375rem * 1.6 + 1.25rem))), 50rem);
}

.cargo-opening__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cargo-opening__image,
.cargo-opening__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deep at the left, where the words stand, and at the foot; light at the right, so the picture stays a picture.
   --pgs-tint is the block's own word on the shade (lighter, darker). On a phone the words take the whole width, so
   the shade rises from the foot instead. */
.cargo-opening__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgb(10 12 14 / min(0.92, calc(0.62 * var(--pgs-tint, 1)))) 0%, rgb(10 12 14 / 0) 46%),
    linear-gradient(90deg, rgb(10 12 14 / min(0.92, calc(0.72 * var(--pgs-tint, 1)))) 0%, rgb(10 12 14 / min(0.9, calc(0.42 * var(--pgs-tint, 1)))) 48%, rgb(10 12 14 / min(0.9, calc(0.08 * var(--pgs-tint, 1)))) 100%);
}

@media (max-width: 47.99rem) {
  .cargo-opening__shade {
    background: linear-gradient(0deg, rgb(10 12 14 / min(0.94, calc(0.8 * var(--pgs-tint, 1)))) 0%, rgb(10 12 14 / min(0.9, calc(0.55 * var(--pgs-tint, 1)))) 55%, rgb(10 12 14 / min(0.9, calc(0.2 * var(--pgs-tint, 1)))) 100%);
  }
}

/* Without a picture: the words on the main colour, between the ribs of a container. */
.cargo-opening--bare {
  min-height: 0;
  background-color: var(--primary, #1c2126);
  background-image: var(--cargo-ribs);
  color: var(--on-primary, #f6f5f1);
}

.cargo-main > nav[aria-label]:first-child + .cargo-opening--bare {
  min-height: 0;
}

.cargo-opening__inner {
  width: 100%;
  max-width: calc(var(--cargo-width) + 2 * var(--cargo-gutter));
  margin-inline: auto;
  padding: clamp(5rem, 12vh, 9rem) var(--cargo-gutter) clamp(3rem, 2rem + 4vw, 5.5rem);
}

.cargo-opening--bare .cargo-opening__inner {
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
}

.cargo-opening__copy {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  max-width: 46rem;
}

/* On the photograph the route is drawn in the words' white, which reads on any shade, and only its stop keeps the accent. */
.cargo-opening__route {
  --cargo-route-ink: currentColor;
  --cargo-route-stop: var(--accent, #f26b1d);
  margin-bottom: 0.25rem;
}

/* The page's heading: large condensed letters, never larger than a word of fourteen letters can stand at 320 px. */
.cargo-opening__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.75rem, 1.5rem + 5vw, 5.75rem) * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.04;
  text-wrap: balance;
}

.cargo-opening__lead {
  max-width: 36rem;
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
}

.cargo-opening__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 0.5rem;
}

/* The road marking along the opening's foot. */
.cargo-opening__road {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ------------------------------------------------------------------ Split opening */

.cargo-hero {
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--cargo-gutter) clamp(3rem, 7vw, 6rem);
}

.cargo-hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  max-width: var(--cargo-width);
  margin-inline: auto;
}

@media (min-width: 56rem) {
  .cargo-hero:not(.cargo-hero--words) .cargo-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.cargo-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  min-width: 0;
}

/* Without a picture: the words on the main colour, between the ribs of a container. */
.cargo-hero--words {
  background-color: var(--primary, #1c2126);
  background-image: var(--cargo-ribs);
  color: var(--on-primary, #f6f5f1);
}

.cargo-hero--words .cargo-hero__copy {
  max-width: 48rem;
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit at 320 px without it. */
.cargo-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.6rem, 1.6rem + 4vw, 5rem) * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.05;
  text-wrap: balance;
}

.cargo-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #4d545b);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
}

.cargo-hero--words .cargo-hero__lead {
  color: inherit;
}

.cargo-hero__points {
  margin-block: 0.25rem;
}

.cargo-hero--words .cargo-stops__mark {
  background: var(--primary, #1c2126);
  color: var(--on-primary, #f6f5f1);
}

.cargo-hero__actions,
.cargo-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.cargo-hero__actions {
  margin-top: 0.25rem;
}

.cargo-hero--words .cargo-button--secondary {
  border-color: currentColor;
  color: inherit;
}

.cargo-hero--words .cargo-button--secondary:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.cargo-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #4d545b);
  font-size: 0.9375rem;
}

.cargo-hero--words .cargo-hero__rating {
  color: inherit;
}

.cargo-stars {
  display: inline-flex;
  gap: 0.1rem;
}

.cargo-stars svg {
  width: 1rem;
  height: 1rem;
  fill: color-mix(in srgb, currentColor 22%, transparent);
}

.cargo-stars svg.is-full {
  fill: var(--accent, #f26b1d);
}

.cargo-hero__trustpilot {
  color: var(--accent-ink, #a64404);
  font-weight: var(--cargo-body-strong);
}

.cargo-hero--words .cargo-hero__trustpilot {
  color: inherit;
}

.cargo-hero__media {
  position: relative;
  margin: 0 0 1rem;
}

.cargo-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--cargo-radius);
  object-fit: cover;
}

/* The picture's shipping-label tab: a white label with a heavy rule on top and a barcode, stuck over its lower corner. */
.cargo-hero__tab {
  position: absolute;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: -1rem;
  display: grid;
  padding: 0.6rem 0.8rem 0.65rem;
  border-top: 0.375rem solid var(--text-primary, #1a1e22);
  border-radius: var(--cargo-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1a1e22);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--text-primary, #1a1e22) 50%, transparent);
}

.cargo-hero__tab .cargo-barcode {
  width: 4.5rem;
  height: 1.6rem;
  background-size: 4.5rem 100%;
}

/* ------------------------------------------------------------------ Sections (the kit's stock blocks) */

/* Every mark below is drawn on the stock blocks only, which includes/bind.php marks with their type. A module's section
   (x_...) keeps what its module asked for. */

/* The route over a section's heading. It stands in the flow above the heading group, on the side the heading is set,
   so it can never cross the heading, on the first section under a breadcrumb either (rule 18). */
.cargo-main [data-block]:not([data-block^="x_"]) .kit-heading-group:has(> .kit-heading--2)::before {
  content: "";
  display: block;
  width: 5.25rem;
  height: 0.875rem;
  margin: 0 0 1rem;
  background:
    radial-gradient(circle closest-side, transparent 0 calc(100% - 0.2rem), var(--kit-accent, #f26b1d) calc(100% - 0.19rem) 98%, transparent 100%) 0 50% / 0.875rem 0.875rem no-repeat,
    radial-gradient(circle closest-side, var(--kit-accent, #f26b1d) 0 96%, transparent 100%) 100% 50% / 0.625rem 0.625rem no-repeat,
    repeating-linear-gradient(90deg, var(--kit-accent, #f26b1d) 0 0.4rem, transparent 0.4rem 0.7rem) 1.2rem 50% / calc(100% - 2.05rem) 0.1875rem no-repeat;
}

.cargo-main [data-block]:not([data-block^="x_"]) .kit-heading-group.kit-text--center:has(> .kit-heading--2)::before {
  margin-inline: auto;
}

.cargo-main [data-block]:not([data-block^="x_"]) .kit-heading-group.kit-text--right:has(> .kit-heading--2)::before {
  margin-inline: auto 0;
}

/* One mark over a heading: where the block already stands an icon over it (an enquiry form), the icon is the mark. */
.cargo-main [data-block]:not([data-block^="x_"]) .kit-icon + .kit-heading-group:has(> .kit-heading--2)::before {
  content: none;
}

/* The dark bands are the sides of a container: the main colour with its ribs. A band that asks for something
   (cta_banner, and cta_section on a photograph) ends in a road marking. */
.cargo-main [data-block]:not([data-block^="x_"]).kit-section--inverse,
.cargo-main [data-block]:not([data-block^="x_"]) .kit-section--inverse {
  background-image: var(--cargo-ribs);
}

.cargo-main :is([data-block="cta_banner"], [data-block="cta_section"]):is(.kit-section--inverse, .kit-section--accent, .kit-section--image)::after,
.cargo-main :is([data-block="cta_banner"], [data-block="cta_section"]) .kit-section--inverse::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--cargo-road-height);
  background: repeating-linear-gradient(90deg, var(--accent, #f26b1d) 0 2.25rem, transparent 2.25rem 3.5rem);
}

.cargo-main :is([data-block="cta_banner"], [data-block="cta_section"]).kit-section--accent::after {
  background: repeating-linear-gradient(90deg, var(--on-accent, #16191c) 0 2.25rem, transparent 2.25rem 3.5rem);
}

/* Cards that are labels carry a small barcode in their upper right corner, in the label's rule above the title. A card
   with a picture at its top keeps the picture there instead. */
.cargo-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-card--surface:not(:has(> .kit-card__media))::after {
  content: "";
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  width: 2.6rem;
  height: 0.7rem;
  opacity: 0.55;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--kit-text) 0 2px, transparent 0 4px, var(--kit-text) 0 5px, transparent 0 7px, var(--kit-text) 0 10px, transparent 0 11px,
    var(--kit-text) 0 12px, transparent 0 15px, var(--kit-text) 0 17px, transparent 0 18px, var(--kit-text) 0 19px, transparent 0 21px,
    var(--kit-text) 0 24px, transparent 0 25px, var(--kit-text) 0 26px, transparent 0 28px, var(--kit-text) 0 29px, transparent 0 31px,
    var(--kit-text) 0 33px, transparent 0 34px, var(--kit-text) 0 35px, transparent 0 37px, var(--kit-text) 0 40px, transparent 0 42px) 0 0 / 42px 100% no-repeat;
}

.cargo-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-card--surface:not(:has(> .kit-card__media)) > .kit-card__content {
  padding-top: calc(var(--kit-card-pad) + 0.85rem);
}

/* The colour of the band a mark stands on, so a ring can cover the route that runs behind it. */
.cargo-main .kit-section {
  --cargo-band: var(--background, #f2f1ed);
}

.cargo-main .kit-section--muted {
  --cargo-band: var(--surface-alt, #e4e2dc);
}

.cargo-main :is(.kit-section--inverse, .kit-section--accent, .kit-section--image) {
  --cargo-band: var(--kit-section-bg);
}

/* Steps: the stops of a delivery. A dashed route runs across the top of the row and each step starts at a stop on it.
   One lead mark per step (the kit's rule): a step without an icon has a ring on the route and its number large under
   it; a step with an icon has the icon in the ring, and its number is the kit's small label over the title. On a
   phone (one step under another) the route runs down the left side. */
/* The route of the last step in a row runs on into the gap; the row keeps it inside its own width, so the page never
   scrolls sideways. */
.cargo-main [data-block="process_steps"] .kit-steps {
  overflow-x: clip;
}

.cargo-main [data-block="process_steps"] .kit-steps > .kit-card {
  --cargo-stop: 1.125rem;
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cargo-main [data-block="process_steps"] .kit-steps > .kit-card:has(.kit-card__body > .kit-icon:first-child) {
  --cargo-stop: 3rem;
}

.cargo-main [data-block="process_steps"] .kit-steps > .kit-card::before {
  content: "";
  position: absolute;
  top: calc(var(--cargo-stop) / 2 - 1.5px);
  right: calc(-1 * var(--kit-gap-large));
  left: 0;
  border-top: 3px dashed var(--kit-accent);
}

.cargo-main [data-block="process_steps"] .kit-steps > .kit-card:last-child::before {
  right: 0;
}

.cargo-main [data-block="process_steps"] .kit-steps > .kit-card:not(:has(.kit-card__body > .kit-icon:first-child))::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cargo-stop);
  height: var(--cargo-stop);
  border: 3px solid var(--kit-accent);
  border-radius: 50%;
  background: var(--cargo-band);
}

.cargo-main [data-block="process_steps"] .kit-steps > .kit-card > .kit-card__content {
  padding: calc(var(--cargo-stop) + 0.6rem) 1rem 0 0;
}

.cargo-main [data-block="process_steps"] .kit-steps > .kit-card:has(.kit-card__body > .kit-icon:first-child) > .kit-card__content {
  padding-top: 0;
}

.cargo-main [data-block="process_steps"] .kit-steps .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow {
  margin-bottom: 0.35rem;
  color: var(--kit-text);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.75rem, 2rem + 2.4vw, 4rem) * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

/* The icon in its ring, on the route. */
.cargo-main [data-block="process_steps"] .kit-steps .kit-card__body > svg.kit-icon:first-child {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: var(--cargo-stop);
  height: var(--cargo-stop);
  margin-bottom: 0.9rem;
  padding: 0.6rem;
  border: 3px solid var(--kit-accent);
  border-radius: 50%;
  background: var(--cargo-band);
  color: var(--kit-accent-text);
}

@media (max-width: 39.99rem) {
  .cargo-main [data-block="process_steps"] .kit-steps > .kit-card {
    --cargo-stop: 1.125rem;
    padding-left: 2rem;
  }

  .cargo-main [data-block="process_steps"] .kit-steps > .kit-card:has(.kit-card__body > .kit-icon:first-child) {
    --cargo-stop: 1.125rem;
  }

  .cargo-main [data-block="process_steps"] .kit-steps > .kit-card::before,
  .cargo-main [data-block="process_steps"] .kit-steps > .kit-card:last-child::before {
    top: 1.5rem;
    right: auto;
    bottom: calc(-1 * var(--kit-gap-large) + 0.25rem);
    left: calc(var(--cargo-stop) / 2 - 1.5px);
    border-top: 0;
    border-left: 3px dashed var(--kit-accent);
  }

  .cargo-main [data-block="process_steps"] .kit-steps > .kit-card:last-child::before {
    display: none;
  }

  .cargo-main [data-block="process_steps"] .kit-steps > .kit-card::after,
  .cargo-main [data-block="process_steps"] .kit-steps > .kit-card:not(:has(.kit-card__body > .kit-icon:first-child))::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0;
    width: var(--cargo-stop);
    height: var(--cargo-stop);
    border: 3px solid var(--kit-accent);
    border-radius: 50%;
    background: var(--cargo-band);
  }

  .cargo-main [data-block="process_steps"] .kit-steps > .kit-card > .kit-card__content,
  .cargo-main [data-block="process_steps"] .kit-steps > .kit-card:has(.kit-card__body > .kit-icon:first-child) > .kit-card__content {
    padding: 0;
  }

  .cargo-main [data-block="process_steps"] .kit-steps .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow {
    margin: 0;
    font-size: calc(2.25rem * var(--cargo-scale));
  }

  .cargo-main [data-block="process_steps"] .kit-steps .kit-card__body > svg.kit-icon:first-child {
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
}

/* Milestones: stops down a route. The dashed line runs down the left of the column and each milestone hangs from a ring
   on it, its date or year in a small label. */
.cargo-main [data-block="timeline"] .kit-grid.kit-cols--1 {
  position: relative;
  padding-left: 2.25rem;
}

.cargo-main [data-block="timeline"] .kit-grid.kit-cols--1::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 0.4375rem;
  border-left: 3px dashed var(--kit-accent);
}

.cargo-main [data-block="timeline"] .kit-grid.kit-cols--1 > .kit-card {
  position: relative;
  overflow: visible;
}

.cargo-main [data-block="timeline"] .kit-grid.kit-cols--1 > .kit-card::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: -2.25rem;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  border: 3px solid var(--kit-accent);
  border-radius: 50%;
  background: var(--background, #f2f1ed);
}

.cargo-main [data-block="timeline"] .kit-section--muted .kit-grid.kit-cols--1 > .kit-card::after,
.cargo-main [data-block="timeline"].kit-section--muted .kit-grid.kit-cols--1 > .kit-card::after {
  background: var(--surface-alt, #e4e2dc);
}

.cargo-main [data-block="timeline"] :is(.kit-section--inverse, .kit-section--accent) .kit-grid.kit-cols--1 > .kit-card::after,
.cargo-main [data-block="timeline"]:is(.kit-section--inverse, .kit-section--accent) .kit-grid.kit-cols--1 > .kit-card::after {
  background: var(--kit-section-bg);
}

/* Figures: large numerals under a short bar of the accent colour, as a distance on a road sign. One lead mark: a figure
   with an icon has the icon instead. */
.cargo-main [data-block="stats_counter"] .kit-stack:not(:has(> .kit-icon)) > .kit-stat::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 0.3125rem;
  margin: 0 auto 0.85rem;
  background: var(--kit-accent);
}

.cargo-main [data-block="stats_counter"] .kit-align--start:not(:has(> .kit-icon)) > .kit-stat::before {
  margin-inline: 0;
}

/* ------------------------------------------------------------------ Article body */

.cargo-article {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--cargo-gutter);
}

.cargo-article__inner {
  max-width: 44rem;
  margin-inline: auto;
}

.cargo-article__header {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-bottom: 2.25rem;
}

/* The date and the author on a label: a small tag of the main colour, like the date stamp on a waybill. */
.cargo-article__byline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  margin: 0;
  padding: 0.3rem 0.65rem;
  border-radius: var(--cargo-radius);
  background: var(--primary, #1c2126);
  color: var(--on-primary, #f6f5f1);
  font-size: 0.8125rem;
  font-weight: var(--cargo-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cargo-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.3rem, 1.6rem + 2.8vw, 3.75rem) * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.08;
  text-wrap: balance;
}

.cargo-prose > :first-child {
  margin-top: 0;
}

.cargo-prose > :last-child {
  margin-bottom: 0;
}

.cargo-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.25em;
}

.cargo-prose :where(h2, h3, h4) {
  margin: 1.8em 0 0.5em;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--cargo-heading-weight);
  line-height: 1.15;
}

.cargo-prose h2 {
  font-size: calc(2rem * var(--cargo-scale));
}

.cargo-prose h3 {
  font-size: calc(1.55rem * var(--cargo-scale));
}

.cargo-prose h4 {
  font-size: calc(1.3rem * var(--cargo-scale));
}

.cargo-prose a {
  color: var(--accent-ink, #a64404);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.cargo-prose blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--accent, #f26b1d);
  font-size: 1.125rem;
}

.cargo-prose img {
  display: block;
  border-radius: var(--cargo-radius);
}

.cargo-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #4d545b);
  font-size: 0.875rem;
}

.cargo-prose :where(th, td) {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--cargo-line);
  text-align: left;
}

.cargo-prose th {
  border-bottom: 2px solid var(--text-primary, #1a1e22);
  font-weight: var(--cargo-body-strong);
}

/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.cargo-prose table {
  font-variant-numeric: lining-nums tabular-nums;
}

.cargo-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--cargo-radius);
  background: var(--surface-alt, #e4e2dc);
}

/* ------------------------------------------------------------------ Divider block */

.cargo-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: calc(var(--cargo-width) + 2 * var(--cargo-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--cargo-gutter);
}

.cargo-divider__line {
  width: 100%;
  border-top: 1px solid var(--cargo-line);
}

/* Dashed: the road marking, in short dashes of the accent colour. */
.cargo-divider--dashed .cargo-divider__line {
  height: 0.1875rem;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--accent, #f26b1d) 0 1.5rem, transparent 1.5rem 2.5rem);
}

/* Dotted: three stops, two rings and the dot where the route ends. */
.cargo-divider--dotted span {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--accent, #f26b1d);
  border-radius: 50%;
}

.cargo-divider--dotted span:last-child {
  background: var(--accent, #f26b1d);
}

/* ------------------------------------------------------------------ Footer */

/* The footer is the side of a container: the main colour with its ribs, opened by a road marking. Words are the main
   colour's own ink, in every palette and with a website's own colours. */
.cargo-footer {
  position: relative;
  padding-top: var(--cargo-road-height);
  background-color: var(--primary, #1c2126);
  background-image: var(--cargo-ribs);
  color: var(--on-primary, #f6f5f1);
}

.cargo-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--cargo-road-height);
  background: repeating-linear-gradient(90deg, var(--accent, #f26b1d) 0 2.25rem, transparent 2.25rem 3.5rem);
}

.cargo-footer__inner {
  max-width: calc(var(--cargo-width) + 2 * var(--cargo-gutter));
  margin-inline: auto;
  padding: clamp(2.75rem, 5vw, 4.25rem) var(--cargo-gutter) 1.5rem;
}

.cargo-footer--minimal .cargo-footer__inner {
  padding-block: 1.75rem;
}

.cargo-footer__brand {
  display: inline-flex;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.cargo-footer .cargo-brand__name {
  max-width: 100%;
  font-size: calc(1.75rem * var(--cargo-scale));
}

.cargo-footer .cargo-brand__name--long {
  font-size: 1.125rem;
}

.cargo-footer .cargo-brand__logo,
.cargo-footer .brand-logo-original {
  max-height: 3rem;
  width: auto;
}

.cargo-footer .logo-mask {
  background-color: var(--on-primary, #f6f5f1) !important;
}

.cargo-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid color-mix(in srgb, var(--on-primary, #f6f5f1) 18%, transparent);
}

.cargo-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2rem, 1.4rem + 2.4vw, 3.25rem) * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  line-height: 1.1;
  text-wrap: balance;
}

/* Two to six columns, each at least a readable width; more rows where the screen is narrow. */
.cargo-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2rem 2.5rem;
}

.cargo-footer__about {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.85rem;
}

.cargo-footer__tagline,
.cargo-footer__contact p:not(.cargo-footer__title),
.cargo-footer__copyright {
  margin: 0;
  font-size: 0.9375rem;
}

/* A column's title: small spaced capitals after a ring, like a stop's name on a timetable. */
.cargo-footer__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: var(--cargo-body-strong);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cargo-footer__title::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid var(--accent, #f26b1d);
  border-radius: 50%;
}

.cargo-footer__links,
.cargo-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  font-style: normal;
}

.cargo-footer__links a,
.cargo-footer__contact a,
.cargo-footer__legal a,
.cargo-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.cargo-footer__links a:hover,
.cargo-footer__contact a:hover,
.cargo-footer__legal a:hover,
.cargo-footer__inline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent, #f26b1d);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.cargo-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid color-mix(in srgb, var(--on-primary, #f6f5f1) 32%, transparent);
  border-radius: 50%;
  color: inherit;
}

.cargo-footer__social a:hover {
  border-color: var(--accent, #f26b1d);
}

.cargo-footer__bottom,
.cargo-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.cargo-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--on-primary, #f6f5f1) 18%, transparent);
}

.cargo-footer__barcode {
  width: 4.25rem;
  height: 1.25rem;
  margin-left: auto;
  opacity: 0.7;
  background-size: 4.25rem 100%;
}

.cargo-footer__legal,
.cargo-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.cargo-footer__legal a {
  font-size: 0.875rem;
}

.cargo-footer--minimal .cargo-footer__legal {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------------ Page not found */

.cargo-not-found {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--cargo-gutter);
  text-align: center;
}

.cargo-not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 38rem;
  margin-inline: auto;
}

.cargo-not-found__route {
  margin-bottom: -0.25rem;
}

/* The number as large as a container's own number, in the accent's readable shade. The paragraph rule below names the
   number out, or its grey (it was more specific) won over this colour in every theme made from the starter. */
.cargo-not-found__number {
  margin: 0;
  color: var(--accent-ink, #a64404);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(6rem, 4rem + 9vw, 10.5rem) * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}

.cargo-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem) * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  line-height: 1.1;
  text-wrap: balance;
}

.cargo-not-found p:not(.cargo-not-found__number) {
  margin: 0;
  color: var(--text-secondary, #4d545b);
}

/* ------------------------------------------------------------------ Form thanks */

.cargo-form-success {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0;
}

.cargo-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.75rem * var(--cargo-scale));
  font-weight: var(--cargo-heading-weight);
  line-height: 1.15;
}

.cargo-form-success p {
  margin: 0;
}

/* ------------------------------------------------------------------ The phone action bar */

/* The shared bar (resilience.css) on the theme's surface, with its button. */
body .theme-action-bar {
  border-top: 3px solid var(--primary, #1c2126);
  background: var(--surface, #ffffff);
}

/* ------------------------------------------------------------------ Without scripts, and with less motion */

/* Without scripts the menu button does nothing, so it is hidden and the phone menu is a plain list under the bar on a
   phone: every page stays reachable (verify-theme-browser.mjs --chrome --no-js). */
@media (scripting: none) {
  .cargo-menu-button {
    display: none !important;
  }

  .cargo-drawer[hidden] {
    position: static;
    display: block;
    max-height: none;
    box-shadow: none;
  }
}

@media (scripting: none) and (min-width: 64rem) {
  .cargo-drawer[hidden] {
    display: none;
  }
}

/* Nothing in this theme moves for a visitor who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}