/* =========================================================================
   RSS Recycling Shredders & Solutions

   The design system of the approved demo, rebuilt as a stylesheet: pill
   buttons, rounded cards, generous space and very little else. The colours
   are taken off the machines themselves: anthracite like the frames and
   gearboxes, light grey like the hoppers and housings, and the lime of the
   logo as the one colour that is not steel. Hand written, no build step.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
  /* Surfaces: RAL 7022 umbra grey, the underside of the machines */
  --bg: #4c4a44;
  --panel: #56544e;
  --panel-2: #615f58;
  --deep: #423f3a;

  /* Ink */
  --ink: #f3f2ef;
  --muted: #cfcdc6;

  /* Rules */
  --faint: rgb(255 255 255 / 10%);
  --hair: rgb(255 255 255 / 7%);
  --strong: rgb(255 255 255 / 35%);

  /* Accent. The fill stays lime; the text variant changes with the surface,
     because lime type on a light surface does not carry enough contrast. */
  --accent: #bcd530;
  --accent-ink: #2b2d2f;
  --accent-text: #bcd530;

  /* Type */
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --shell: 1280px;
  --gutter: clamp(20px, 4vw, 32px);
  --band: clamp(72px, 10vw, 128px);
  --radius: 18px;

  /* How far a surface curves in where it slides over the one above it. */
  --sheet: clamp(24px, 3.6vw, 56px);

  --ease: cubic-bezier(0.16, 0.84, 0.3, 1);
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /*
   * "clip" and not "hidden": hidden on one axis turns the body into a scrolling
   * box, and every position:sticky inside it quietly stops working. Clip holds
   * back horizontal overflow without taking the scroll away from the viewport.
   */
  overflow-x: clip;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-color: var(--faint);
  text-underline-offset: 0.22em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol,
li {
  list-style: none;
}

/* A focus ring that is always visible against both the dark and accent
   surfaces, which the demo never had. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.btn:focus-visible,
.card:focus-visible {
  outline-offset: 4px;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* -------------------------------------------------------------------------
   3. Layout
   ---------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: var(--band);
  background: var(--bg);
}

.band--panel {
  background: var(--panel);
  border-top: 1px solid var(--hair);
}

.band--tight {
  padding-block: calc(var(--band) * 0.62);
}

/*
 * The light surface, the grey of a machine housing gone a shade paler. Long
 * technical reading sits here; the dark surfaces carry the brand moments.
 */
.band--light {
  --bg: #e8e8e3;
  --panel: #f6f6f3;
  --panel-2: #eeeee9;
  --ink: #2a2926;
  --muted: #5c5a54;
  --faint: rgb(42 41 38 / 12%);
  --hair: rgb(42 41 38 / 8%);
  --strong: rgb(42 41 38 / 30%);
  --accent-text: #4a650e;

  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid rgb(42 41 38 / 10%);
}

/*
 * Once a band of its own in the machine's hopper grey; now simply the light
 * surface, so the site has one light and one dark grey and nothing between.
 */
.band--steel {
  --bg: #e8e8e3;
  --panel: #f6f6f3;
  --panel-2: #eeeee9;
  --ink: #2a2926;
  --muted: #5c5a54;
  --faint: rgb(42 41 38 / 12%);
  --hair: rgb(42 41 38 / 8%);
  --strong: rgb(42 41 38 / 30%);
  --accent-text: #4a650e;

  background: var(--bg);
  color: var(--ink);
}

.band--light + .band--light {
  border-top: 0;
}

/* Two light bands in a row are one surface: the second needs no top margin. */
.band--light + .band--steel,
.band--steel + .band--light {
  padding-top: 0;
  border-top: 0;
}

/* Two light bands in a row should read as one surface, not two blocks. */
.band--flush-top {
  padding-top: 0;
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.split--wide-first {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.split--narrow-first {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.split--top {
  align-items: start;
}

/* Reading column plus a narrow form beside it. */
.split--form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.rule {
  height: 1px;
  background: var(--hair);
  border: 0;
}

/* -------------------------------------------------------------------------
   4. Type
   ---------------------------------------------------------------------- */

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.h-hero {
  font-size: clamp(44px, 6.4vw, 92px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.h-hero em {
  font-style: normal;
  color: var(--accent-text);
}

.h-section {
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.05;
}

.h-sub {
  font-size: clamp(22px, 2.2vw, 30px);
}

.lede {
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
}

.prose {
  max-width: 68ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2 {
  color: var(--ink);
  font-size: clamp(22px, 2.2vw, 30px);
  margin-top: 1.9em;
  margin-bottom: 0.55em;
}

.prose h3 {
  color: var(--ink);
  font-size: 21px;
  margin-top: 1.7em;
}

.prose ul {
  padding-left: 1.2em;
  list-style: disc;
}

.prose ol {
  padding-left: 1.4em;
  list-style: decimal;
}

/* The reset above takes the bullet off every li; in running text it follows its list again. */
.prose li {
  list-style: inherit;
}

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

.prose li + li {
  margin-top: 0.4em;
}

.prose a {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

.numeral {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------
   5. Buttons and links
   ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s var(--ease), transform 0.2s var(--ease),
    background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  border-color: var(--strong);
  color: var(--ink);
}

.btn--ghost:hover {
  filter: none;
  background: rgb(255 255 255 / 10%);
}

.btn--outline {
  background: transparent;
  border-color: var(--faint);
  color: var(--ink);
  font-weight: 600;
}

.btn--outline:hover {
  filter: none;
  border-color: var(--accent);
}

.btn--small {
  min-height: 44px;
  padding: 11px 20px;
  font-size: 14px;
}

.btn--block {
  width: 100%;
}

.btn__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* A label and an arrow, nothing more; the arrow moves on with the card. */
.arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
}

.arrow::after {
  content: '\2192';
  transition: transform 0.25s var(--ease);
}

.arrow:hover::after,
a:hover .arrow::after {
  transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   6. Header
   ---------------------------------------------------------------------- */

/*
 * The header and the mobile menu are RAL 7030 stone grey, the top of the
 * machines, above the RAL 7022 umbra grey of their frames. On that grey only
 * the dark ink reads well enough, so muted text and accents use it too.
 */
.masthead,
.drawer {
  --bg: #939388;
  --panel: #f6f6f3;
  --panel-2: #eeeee9;
  --ink: #232220;
  --muted: #232220;
  --faint: rgb(35 34 32 / 20%);
  --hair: rgb(35 34 32 / 14%);
  --strong: rgb(35 34 32 / 40%);
  --accent-text: #232220;

  color: var(--ink);
}

/* The dropdowns open on a light panel, where the usual tones apply again. */
.masthead .subnav {
  --muted: #5c5a54;
  --accent-text: #4a650e;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.brand span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: #4c4a44;
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

.brand img {
  height: 34px;
  width: auto;
}

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.7vw, 30px);
}

/*
 * Only the top level is styled here: a rule on ".nav a" would reach into the
 * dropdown as well and draw a line under every item in it.
 */
.nav__item > a {
  position: relative;
  display: block;
  padding-block: 8px;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

/* Where you are is a dot under the label, not a line across it. */
.nav__item > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  scale: 0.3;
  transition: opacity 0.2s var(--ease), scale 0.24s var(--ease);
}

.nav__item > a:hover,
.nav__item > a:focus-visible,
.nav__item.is-open > a,
.nav__item > [aria-current='page'],
.nav__item > [data-section='true'] {
  color: var(--ink);
}

.nav__item > [aria-current='page']::after {
  opacity: 1;
  scale: 1;
}

/* Inside a machine or a solution, its overview stays marked but quieter. */
.nav__item > [data-section='true']::after {
  opacity: 0.4;
  scale: 1;
}

.nav__item {
  display: flex;
  align-items: center;
}

.nav__item--parent {
  position: relative;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s var(--ease), transform 0.3s var(--ease);
}

.nav__toggle svg {
  width: 9px;
  height: auto;
}

.nav__item.is-open .nav__toggle {
  color: var(--ink);
  transform: rotate(180deg);
}

/* More has no page of its own: the label and the chevron are one button. */
.nav__toggle--label {
  gap: 6px;
  width: auto;
  height: auto;
  margin-left: 0;
  padding-block: 8px;
  white-space: nowrap;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav__toggle--label:hover,
.nav__toggle--label:focus-visible {
  color: var(--ink);
}

.nav__item.is-open .nav__toggle--label {
  transform: none;
}

.nav__toggle--label svg {
  transition: transform 0.3s var(--ease);
}

.nav__item.is-open .nav__toggle--label svg {
  transform: rotate(180deg);
}

.subnav {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  z-index: 60;
  min-width: 320px;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--faint);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 18%);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity 0.22s var(--ease), translate 0.26s var(--ease), visibility 0.22s;
}

.nav__item.is-open .subnav {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* A hover bridge, so the pointer can cross the gap without the panel closing. */
.subnav::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.subnav__inner {
  padding: 10px;
  max-width: none;
}

.subnav__list {
  display: grid;
  gap: 2px;
}

.subnav__item a {
  position: relative;
  display: block;
  padding: 12px 14px 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s var(--ease);
}

/* A short accent bar grows in on the left, rather than a flat grey wash. */
.subnav__item a::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--accent);
  translate: 0 -50%;
  transition: height 0.24s var(--ease);
}

.subnav__item a:hover,
.subnav__item a:focus-visible {
  background: var(--panel-2);
}

.subnav__item a:hover::before,
.subnav__item a:focus-visible::before,
.subnav__item [aria-current='page']::before {
  height: calc(100% - 24px);
}

.subnav__title {
  display: block;
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/*
 * The machines dropdown: one column, every machine with its animation in a
 * small light tile beside its name.
 */
.nav .subnav {
  width: min(360px, calc(100vw - 48px));
}

.nav .subnav__inner {
  padding: 10px;
}

.subnav__item a {
  display: flex;
  align-items: center;
  gap: 14px;
}

.subnav__marker {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 46px;
  padding: 3px 6px;
  background: #eeeeec;
  border-radius: 8px;
}

.subnav__marker .shredanim {
  height: 100%;
  aspect-ratio: auto;
}

.subnav__text {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.subnav__item [aria-current='page'] {
  background: rgb(188 213 48 / 12%);
}

.subnav__item [aria-current='page'] .subnav__title {
  color: var(--accent-text);
}

.masthead__aside {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.langswitch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.langswitch a,
.langswitch > span:not(.langswitch__sep) {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.langswitch a:hover {
  color: var(--ink);
  background: var(--hair);
}

.langswitch [aria-current='true'] {
  color: var(--accent-text);
}

.langswitch__sep {
  width: 1px;
  height: 12px;
  background: var(--faint);
  flex: none;
}

.navtoggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: none;
  border: 0;
  cursor: pointer;
}

.navtoggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}

/*
 * The mobile menu, as a page of its own.
 *
 * It fills the window under the header, scrolls on its own and locks the page
 * behind it. Every item with children carries a real disclosure button, so the
 * submenu folds out here the way the dropdown opens on a wide screen.
 */
.drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--masthead-h, 78px) + 12px) 0 40px;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}

body.nav-open {
  overflow: hidden;
}

body.nav-open .drawer {
  display: block;
  animation: rss-drawer 0.28s var(--ease) both;
}

@keyframes rss-drawer {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}

.drawer__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.drawer__list > .nav__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hair);
}

.drawer__list > .nav__item:first-child {
  border-top: 1px solid var(--hair);
}

.drawer .nav__item > a {
  flex: 1 1 auto;
  padding: 18px 2px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

/* In the drawer the rows already have dividers, so the dot has no place. */
.drawer .nav__item > a::after {
  display: none;
}

.drawer .nav__item > [aria-current='page'],
.drawer .nav__item > [data-section='true'] {
  color: var(--accent);
}

/* A target big enough for a thumb, and a chevron that turns when it opens. */
.drawer .nav__toggle {
  display: flex;
  flex: none;
  width: 48px;
  height: 48px;
  margin: 0 -12px 0 0;
  color: var(--muted);
}

.drawer .nav__toggle svg {
  width: 12px;
}

.drawer .nav__toggle--label {
  flex: 1 1 auto;
  justify-content: space-between;
  width: auto;
  height: auto;
  margin: 0;
  padding: 18px 2px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.drawer .subnav {
  display: none;
  position: static;
  z-index: auto;
  flex: 1 0 100%;
  min-width: 0;
  transform: none;
  translate: none;
  opacity: 1;
  visibility: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.drawer .nav__item.is-open .subnav {
  display: block;
}

.drawer .subnav::before {
  display: none;
}

.drawer .subnav__inner {
  padding: 0 0 10px;
  max-width: none;
}

.drawer .subnav__list {
  gap: 0;
  border-left: 1px solid var(--faint);
  padding-left: 14px;
}

.drawer .subnav__item a {
  padding: 12px 4px;
  border-radius: 0;
}

.drawer .subnav__item a:hover {
  background: none;
}

.drawer .subnav__item a::before {
  left: -15px;
  top: 50%;
  width: 8px;
  height: 1px;
  border-radius: 0;
  translate: 0 -50%;
}

.drawer .subnav__item a:hover::before,
.drawer .subnav__item [aria-current='page']::before {
  height: 1px;
}

.drawer .subnav__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}

.drawer .subnav__marker {
  width: 56px;
  height: 36px;
}

.drawer .subnav__item [aria-current='page'] .subnav__title {
  color: var(--accent-text);
}

.drawer .subnav__text {
  display: none;
}

.drawer__foot {
  margin-top: 32px;
}

.drawer__foot .btn + .btn {
  margin-top: 10px;
}

.drawer__mail {
  display: block;
  margin-top: 18px;
  font-size: 16px;
  color: var(--ink);
  text-decoration-color: var(--accent);
}

.drawer__place {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------------- */

/*
 * The hero and the page headers do not stop at a straight line. What follows
 * them is pulled up over the dark and curves in at the top, so the page reads as
 * one surface sliding over another rather than as stacked blocks. The overlap
 * swallows the last stretch of the header, so every one of them adds the curve
 * to the padding it already had.
 */
.hero {
  padding-bottom: var(--sheet);
}

.hero + *,
.pagehead + * {
  position: relative;
  z-index: 1;
  border-start-start-radius: var(--sheet);
  border-start-end-radius: var(--sheet);
  margin-top: calc(var(--sheet) * -1);
}

.hero {
  position: relative;
  background: var(--deep);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 9vw, 104px);
}

.hero__text {
  max-width: 46ch;
  margin-top: 26px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: #dfe3e4;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--faint);
}

.hero__meta dt {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__meta dd {
  margin-top: 6px;
  font-size: 26px;
}

.hero__meta small {
  font-size: 0.5em;
  color: var(--muted);
}

/* Drawing and machine, in two panels of the same size. */
.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.proof__panel {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.proof__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.proof__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #eef0f0;
  background: rgb(52 50 46 / 72%);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}

.band--light .proof__caption {
  color: #eef0f0;
}

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

/* A YouTube video, shown as its own still until it is asked for. */
.ytframe {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.ytframe__play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--panel-2);
  border: 0;
  cursor: pointer;
}

.ytframe__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.3s var(--ease);
}

.ytframe__play:hover .ytframe__poster {
  transform: scale(1.03);
  opacity: 0.82;
}

.ytframe__button {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
  transition: scale 0.25s var(--ease);
}

.ytframe__play:hover .ytframe__button {
  scale: 1.08;
}

.ytframe__button svg {
  width: 26px;
  height: 26px;
  margin-left: 2px;
}

/* Once it is playing, the frame takes the whole panel. */
.ytframe iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.ytframe__caption {
  padding: 14px 18px 16px;
}

.ytframe__title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.ytframe__note {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   9. Section heads
   ---------------------------------------------------------------------- */

.sectionhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 54px;
}

.sectionhead .eyebrow {
  margin-bottom: 18px;
}

.sectionhead h2 {
  max-width: 16ch;
}

.sectionhead p {
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.sectionhead--single h2 {
  max-width: 24ch;
}

/* -------------------------------------------------------------------------
   10. Cards
   ---------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 18px;
}

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

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

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

.card--compact .card__body {
  padding: 20px 22px 24px;
}

.card--compact .card__title {
  font-size: 19px;
}

.card--compact .card__tagline {
  font-size: 14.5px;
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.band--panel .card {
  background: var(--bg);
}

a.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.card__figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel-2);
}

.card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

a.card:hover .card__figure img {
  transform: scale(1.04);
}

/* A machine stands free in its card, smaller than the card is wide. */
.card__figure--drawn {
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 22px 22px 0;
  background: none;
}

/* The body fills the card, so a foot with margin-top:auto reaches the bottom. */
.card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 30px 30px 32px;
}

.card__index {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-text);
}

.card__title {
  margin-top: 8px;
  font-size: 25px;
  letter-spacing: -0.01em;
}

.card__tagline {
  margin-top: 6px;
  font-size: 15.5px;
  color: var(--accent-text);
}

.card__text {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.card__foot {
  margin-top: auto;
  padding-top: 22px;
}

.card--accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

.band--panel .card--accent {
  background: var(--accent);
}

.card--accent .card__index {
  color: inherit;
  opacity: 0.75;
}

.card--accent .card__text {
  color: inherit;
  opacity: 0.85;
}

.card--accent .arrow {
  color: inherit;
}

a.card--accent:hover {
  border-color: transparent;
}

/* Status badge on a machine that is on offer. */
.card__figure {
  position: relative;
}

.badge-status {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge-status--reserved {
  background: #e0a92e;
}

.badge-status--sold {
  background: rgb(0 0 0 / 62%);
  color: #fff;
}

.card--sold .card__figure {
  opacity: 0.55;
}

.pagehead .badge-status {
  position: static;
  display: inline-block;
  margin-top: 22px;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}

.card__meta dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.card__meta dd {
  margin-top: 3px;
  font-weight: 600;
}

/* Photographs of a machine on offer. */
/*
 * One photograph beside the main image should not read as a stray thumbnail, so
 * the row divides the width over however many there are, up to three.
 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  margin-top: 12px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tag {
  padding: 5px 12px;
  border: 1px solid var(--faint);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   11. Machine range strip
   ---------------------------------------------------------------------- */

.range {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 34px clamp(22px, 4vw, 48px);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.band--panel .range {
  background: var(--bg);
}

.range__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.range__unit {
  font-size: 0.45em;
  color: var(--muted);
}

/* A machine's specifications, as a sheet of label and value. */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 76px);
  border-top: 1px solid var(--hair);
}

.specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 15px;
  border-bottom: 1px solid var(--hair);
}

.specs__row dt {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.specs__row dd {
  flex: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.specs__row dd small {
  margin-left: 2px;
  font-size: 0.66em;
  font-weight: 600;
  color: var(--muted);
}

.range__label {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   12. Figures
   ---------------------------------------------------------------------- */

.figure {
  position: relative;
}

.figure img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.figure--portrait img {
  aspect-ratio: 4 / 5;
}

.figure--wide img {
  aspect-ratio: 16 / 10;
}

.figure--panorama img {
  aspect-ratio: 21 / 9;
}

.figure__caption {
  position: absolute;
  left: -14px;
  bottom: -14px;
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 40px rgb(0 0 0 / 35%);
}

.figure__caption strong {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.1;
}

.figure__caption span {
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0.82;
}

.collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.collage__wide {
  grid-column: 1 / 3;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel-2);
}

.collage__square {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel-2);
}

.collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage__stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1;
  padding: 22px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
}

.collage__stat p:first-child {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1;
}

.collage__stat p:last-child {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0.85;
}

.quote {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* -------------------------------------------------------------------------
   13. Callout band with a photograph behind it
   ---------------------------------------------------------------------- */

.callout {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.callout__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.callout__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.callout__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    var(--bg) 30%,
    color-mix(in srgb, var(--bg) 50%, transparent)
  );
}

.callout__inner {
  position: relative;
  z-index: 2;
  max-width: 58ch;
  padding-block: var(--band);
}

/* -------------------------------------------------------------------------
   14. Machine animations
   ---------------------------------------------------------------------- */

/*
 * The four animations are drawn by assets/js/shredders.js, cut out: no plate
 * behind them, only the machine, so they sit small on a light surface.
 */
.shredanim {
  width: 100%;
  aspect-ratio: 16 / 10;
}

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

.card__figure .shredanim {
  height: 100%;
  aspect-ratio: auto;
}

/* A machine with neither an animation nor a photograph: its number, quietly. */
.plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  background: #eeeeec;
}

.plate span {
  font-family: var(--display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #c9cbc9;
}

/* A machine page: the animation and one photograph, side by side. */
.machineview {
  display: grid;
  gap: 18px;
}

.machineview--pair {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}

.machineview__figure {
  overflow: hidden;
  border-radius: var(--radius);
}

/*
 * The animation explains the machine; it does not need the whole width. On its
 * own, without a photograph beside it, it stays the size it has in a pair.
 */
.machineview__figure .shredanim {
  max-width: 480px;
  margin-inline: auto;
}

.machineview:not(.machineview--pair) .machineview__figure {
  max-width: 480px;
}

.machineview__figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* A machine in stock: the other photographs in a row under the main one. */
.stockgallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.stockgallery a {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius) / 2);
}

.stockgallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.stockgallery a:hover img {
  transform: scale(1.04);
}

/* A machine page's blocks sit closer together than a long story's chapters. */
.chapters--tight {
  gap: clamp(36px, 5vw, 56px);
}

/* A machine without a photograph shows its animation under "How it works". */
.chapter__figure {
  max-width: 380px;
  margin-top: 24px;
}

/* The first block opens the band; a line above it would divide nothing. */
.chapters > .chapter:first-child {
  padding-top: 0;
  border-top: 0;
}

.chapter .prose {
  max-width: 62ch;
}

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

@media (max-width: 880px) {
  .machineview--pair {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   15. Page header
   ---------------------------------------------------------------------- */

/*
 * The page header carries on in the RAL 7030 stone grey of the header, the
 * grey of the feed hoppers. The RAL 7022 umbra grey of the machines' frames
 * comes lower on the page, so the colours stand as they do on a machine.
 */
.pagehead {
  --bg: #939388;
  --panel: #f6f6f3;
  --panel-2: #eeeee9;
  --ink: #232220;
  --muted: #232220;
  --faint: rgb(35 34 32 / 20%);
  --hair: rgb(35 34 32 / 14%);
  --strong: rgb(35 34 32 / 40%);
  --accent-text: #232220;

  color: var(--ink);
  padding-block: clamp(40px, 7vw, 76px) calc(clamp(36px, 5vw, 56px) + var(--sheet));
}

.pagehead .machinetabs__number {
  color: rgb(35 34 32 / 62%);
}

/* The way back up, small, above the page's own heading. */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  font-size: 14px;
  color: var(--muted);
}

.crumbs li + li::before {
  content: '/';
  margin-inline: 10px;
  opacity: 0.5;
}

.crumbs a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

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

.crumbs li:first-child a::before {
  content: '\2190';
  margin-right: 8px;
}

.pagehead h1 {
  max-width: 20ch;
  margin-top: 20px;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.pagehead__intro {
  max-width: 54ch;
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

.pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.pagehead__figure {
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel-2);
}

/* A short record of the essentials beside the machine. */
.keyvalues div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--hair);
}

.keyvalues div:first-child {
  border-top: 1px solid var(--hair);
}

.keyvalues dt {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.keyvalues dd {
  font-weight: 600;
  text-align: right;
}

.pagehead__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   16. Lists that carry detail
   ---------------------------------------------------------------------- */

.checklist {
  border-top: 1px solid var(--hair);
}

.checklist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--hair);
}

.checklist svg {
  width: 15px;
  height: 15px;
  align-self: center;
  color: var(--accent-text);
}

.checklist__note {
  font-size: 14px;
  color: var(--muted);
  text-align: right;
}

.faq {
  border-top: 1px solid var(--hair);
}

.faq__item {
  border-bottom: 1px solid var(--hair);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease);
}

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

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

.faq__sign {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}

.faq__sign::before {
  width: 100%;
  height: 2px;
}

.faq__sign::after {
  width: 2px;
  height: 100%;
  transition: transform 0.28s var(--ease);
}

.faq__item[open] .faq__sign::after,
.story[open] > summary .faq__sign::after {
  transform: scaleY(0);
}

.faq__answer {
  max-width: 64ch;
  padding-bottom: 20px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
}

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

/* For a set of three, so the last one does not sit alone on a second row. */
.features--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * What the machines reduce: one tile per material, numbered at the top and
 * named at the foot, and under them a strip for whatever is not listed.
 */
.materials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  counter-reset: material;
}

.materials__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  min-height: 150px;
  padding: 26px 28px 28px;
  background: var(--panel);
  border: 1px solid var(--faint);
  border-radius: var(--radius);
  counter-increment: material;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

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

.materials__item::before {
  content: counter(material, decimal-leading-zero);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text);
}

.materials__item h3 {
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.materials__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: 16px;
  padding: 26px 30px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
}

.materials__more p {
  font-size: 17px;
  line-height: 1.5;
}

.materials__more strong {
  display: block;
  font-size: 20px;
}

.materials__more .arrow {
  color: inherit;
  font-size: 17px;
  white-space: nowrap;
}

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

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

  .materials__item {
    min-height: 0;
    gap: 18px;
  }
}

.feature {
  padding-top: 20px;
  border-top: 1px solid var(--faint);
}

.feature h3 {
  font-size: 20px;
}

.feature p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   17. Contact and forms
   ---------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contactcard {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.band--panel .contactcard {
  background: var(--bg);
}

.contactcard img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.contactcard__body {
  padding: 26px 28px;
}

.contactcard dt {
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.contactcard dt:first-child {
  margin-top: 0;
}

.contactcard dd {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.7;
}

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

/* A stack of cards down one column, in the same rhythm as a card grid. */
.cardstack {
  display: grid;
  gap: 18px;
  align-content: start;
}

/*
 * A panel with reading room in it: the contact form, and the short cards
 * that stand beside it.
 */
.panelcard {
  padding: clamp(24px, 2.8vw, 38px);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.band--panel .panelcard {
  background: var(--bg);
}

.panelcard__title {
  font-size: 20px;
}

.panelcard > .form,
.panelcard > .prose,
.panelcard > .checklist {
  margin-top: 18px;
}

/* The line glyph on a contact card. */
.card__icon {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 22px;
  color: var(--accent-text);
}

.card__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* A phone number or an address reads as data, not as a headline. */
.card__value {
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.card__lines {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

/* Numbered steps, for what happens after a message is sent. */
.steplist {
  margin-top: 18px;
  counter-reset: rss-step;
}

.steplist li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  padding-block: 14px;
  border-top: 1px solid var(--faint);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

.steplist li::before {
  counter-increment: rss-step;
  content: counter(rss-step, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  color: var(--accent-text);
}

.steplist strong {
  display: block;
  font-size: 16.5px;
  color: var(--ink);
}

.formcard {
  padding: clamp(20px, 2.2vw, 26px);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

/* It rides along while you read the page beside it. */
.formcard--sticky {
  position: sticky;
  top: 104px;
}

.band--panel .formcard {
  background: var(--bg);
}

.formcard__title {
  font-size: 19px;
  line-height: 1.2;
}

.formcard__text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

/* Inside the compact card the rows sit closer together. */
.formcard .form__row {
  gap: 12px;
}

.formcard .field label {
  font-size: 11.5px;
  margin-bottom: 5px;
}

.formcard .field input,
.formcard .field textarea {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 10px;
}

.formcard .field textarea {
  min-height: 74px;
}

.formcard .btn {
  min-height: 46px;
  font-size: 15px;
}

.formcard .form__note {
  font-size: 13px;
  text-align: center;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__required {
  margin-left: 4px;
  color: var(--accent-text);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--faint);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--strong);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: #e2795f;
}

.field__error {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #e2795f;
}

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

.form__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/*
 * A confirmation carries its own mark, set beside the text rather than above it,
 * so it stays readable and stays a shape at 320 pixels wide.
 */
.notice {
  position: relative;
  padding: 18px 20px 18px 56px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.notice::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 19px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.4 3.4L13 4.6' fill='none' stroke='%2315140f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
}

.notice strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.notice p {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.notice--error {
  border-color: #e2795f;
  background: color-mix(in srgb, #e2795f 12%, transparent);
}

.notice--error::before {
  background-color: #e2795f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='1.2' fill='%23fff'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   18. Footer
   ---------------------------------------------------------------------- */

.colophon {
  padding-block: 60px 40px;
  background: var(--bg);
  border-top: 1px solid var(--faint);
}

.colophon__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.colophon__brand img {
  height: 34px;
  width: auto;
  margin-bottom: 18px;
}

.colophon__blurb {
  max-width: 36ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.colophon__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}

.colophon h2 {
  margin-bottom: 14px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c4c1b9;
}

.colophon ul {
  display: grid;
  gap: 9px;
}

.colophon li a,
.colophon li span {
  font-size: 14.5px;
  color: #cdd2d4;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.colophon li a:hover {
  color: var(--accent);
}

/* Three columns rather than space-between, so the credit sits in the middle of
   the line and not halfway between two labels of unequal length. */
.colophon__base {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 18px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--faint);
  font-size: 13px;
  color: #c4c1b9;
}

.colophon__base > span:last-child {
  justify-self: end;
  text-align: right;
}

/* Met <3 door, as on craftville.nl. */
.madeby {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.madeby__heart {
  width: 13px;
  height: 13px;
  fill: #f43f5e;
  transform-origin: center;
  animation: rss-heartbeat 1.6s ease-in-out infinite;
}

.madeby__link {
  display: inline-flex;
  align-items: center;
  opacity: 0.75;
  transition: opacity 0.25s var(--ease);
}

.madeby__link:hover,
.madeby__link:focus-visible {
  opacity: 1;
}

.madeby__logo {
  display: block;
  width: auto;
  height: 14px;
}

.madeby__logo--icon {
  height: 15px;
}

@keyframes rss-heartbeat {
  0%,
  40%,
  100% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.25);
  }

  20% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.2);
  }
}

/* -------------------------------------------------------------------------
   18b. The docked enquiry bar
   ---------------------------------------------------------------------- */

/*
 * The bar belongs to the phone, where there is no column beside the text to put
 * a form in. On a wide screen it does not exist at all: the form stands next to
 * what you are reading, and a bar repeating the phone number on every page would
 * only be in the way.
 */
.dock {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  pointer-events: none;
}

.dock__bar {
  background: color-mix(in srgb, #4c4a44 92%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: #eef0f0;
  translate: 0 100%;
  transition: translate 0.34s var(--ease);
}

.dock.is-visible .dock__bar {
  translate: 0 0;
  pointer-events: auto;
}

.dock.is-open .dock__bar {
  translate: 0 100%;
}

.dock__barinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 13px;
}

.dock__line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 15px;
}

.dock__line strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
}

.dock__sub {
  display: block;
  margin-top: 1px;
  font-size: 13.5px;
  color: #a4abb0;
}

/* A slow pulse, so the bar reads as live rather than as another banner. */
.dock__pulse {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.dock__pulse::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: rss-dock-pulse 2.8s var(--ease) infinite;
}

@keyframes rss-dock-pulse {
  0% { opacity: 0.5; scale: 0.6; }
  70% { opacity: 0; scale: 1.35; }
  100% { opacity: 0; scale: 1.35; }
}

.dock__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.dock__ask {
  display: inline-flex;
}

.dock__panel {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  width: min(28rem, calc(100vw - var(--gutter) * 2));
  max-height: min(80vh, 44rem);
  overflow-y: auto;
  padding: 24px 26px 26px;
  background: #56544e;
  color: #eef0f0;
  border: 1px solid rgb(255 255 255 / 10%);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 60px rgb(0 0 0 / 45%);
  pointer-events: auto;
  translate: 0 12px;
  opacity: 0;
  transition: translate 0.3s var(--ease), opacity 0.24s var(--ease);
}

.dock__panel[hidden] {
  display: none;
}

.dock.is-open .dock__panel {
  translate: 0 0;
  opacity: 1;
}

.dock__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dock__title {
  margin-top: 10px;
  font-size: 21px;
  line-height: 1.15;
}

.dock__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin: -4px -6px 0 0;
  color: #a4abb0;
  background: rgb(255 255 255 / 6%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.dock__close:hover {
  color: #eef0f0;
  background: rgb(255 255 255 / 12%);
}

.dock__close svg {
  width: 14px;
  height: 14px;
}

/* Inside the sheet the fields are always on the dark surface. */
.dock__body {
  --panel-2: #615f58;
  --faint: rgb(255 255 255 / 10%);
  --ink: #eef0f0;
  --muted: #a4abb0;
}

.dock__body .field input,
.dock__body .field textarea {
  min-height: 46px;
  padding: 11px 14px;
  font-size: 15px;
  border-radius: 11px;
}

.dock__body .field textarea {
  min-height: 76px;
}

.dock__body .form__note {
  color: #a4abb0;
}

.dock__body .form__note a {
  color: var(--accent);
}

/*
 * Only where the bar actually shows: room under the footer so it never sits on
 * the last line, and the cookie choice waiting above it rather than behind it.
 */
@media (max-width: 880px) {
  body.has-dock .colophon {
    padding-bottom: 96px;
  }

  body.has-dock .consent {
    bottom: calc(var(--gutter) + 64px);
  }
}

/* -------------------------------------------------------------------------
   19. Consent
   ---------------------------------------------------------------------- */

.consent {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 80;
  max-width: 30rem;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--faint);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgb(0 0 0 / 45%);
}

.consent[hidden] {
  display: none;
}

.consent p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.consent a {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* -------------------------------------------------------------------------
   20. Utilities and motion
   ---------------------------------------------------------------------- */

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.skiplink:focus {
  left: 0;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stack-lg {
  margin-top: clamp(40px, 6vw, 64px);
}

.stack-md {
  margin-top: clamp(24px, 3vw, 34px);
}

.stack-sm {
  margin-top: 12px;
}

/* -------------------------------------------------------------------------
   21. Responsive
   ---------------------------------------------------------------------- */

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

  .hero__inner,
  .split,
  .split--wide-first,
  .split--narrow-first,
  .contact {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .split--form {
    grid-template-columns: 1fr;
  }

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

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

  .figure--portrait {
    max-width: 460px;
  }

  .formcard--sticky {
    position: static;
  }

  .specs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .nav,
  .masthead__aside .btn {
    display: none;
  }

  .navtoggle {
    display: flex;
  }

  body.nav-open .drawer {
    display: block;
  }

  body.nav-open .navtoggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.nav-open .navtoggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .navtoggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 700px) {
  .cards--2,
  .cards--3,
  .cards--4,
  .features,
  .form__row {
    grid-template-columns: 1fr;
  }

  .range {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .colophon__base {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .colophon__base > span:last-child {
    justify-self: center;
    text-align: center;
  }

  .hero__meta {
    gap: 24px;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }

  .figure__caption {
    left: 0;
    bottom: -10px;
  }

  .consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }

  .dock__panel {
    right: 0;
    width: 100%;
    max-height: 86vh;
    border-left: 0;
    border-right: 0;
    border-radius: 18px 18px 0 0;
  }
}

/*
 * The mobile breakpoint, matching the one the navigation folds at. Here the
 * reading column has no room for a form, so the bar appears and carries it.
 */
@media (max-width: 880px) {
  .formcard--sticky {
    display: none;
  }

  .dock {
    display: block;
  }

  .dock__sub {
    display: none;
  }

  .dock__line strong {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .dock__line {
    display: none;
  }

  .dock__actions {
    flex: 1 1 auto;
  }

  .dock__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

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

  .madeby__heart {
    animation: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   22. Video hero
   ---------------------------------------------------------------------- */

/*
 * The home page opens on the hall itself: the film runs edge to edge behind
 * the heading, as it did on the first RSS site. The veil is the anthracite of
 * the frames, heavier at the foot where the text stands.
 */
.hero--video {
  display: flex;
  align-items: flex-end;
  min-height: min(calc(100svh - 74px), 920px);
  background: var(--deep);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(52 50 46 / 50%) 0%, rgb(52 50 46 / 22%) 38%, rgb(52 50 46 / 86%) 100%),
    linear-gradient(90deg, rgb(52 50 46 / 55%) 0%, rgb(52 50 46 / 0%) 70%);
}

.hero--video .hero__inner {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding-block: clamp(96px, 14vw, 160px) calc(clamp(48px, 7vw, 80px) + var(--sheet));
}

.hero--video .h-hero {
  max-width: 14ch;
  color: #fff;
}

.hero--video .hero__text {
  max-width: 54ch;
}

.hero__text p + p {
  margin-top: 12px;
}

/* The four things RSS makes, set as one line under the kicker's rule. */
.hero__range {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dfe3e4;
}

.hero__range::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--accent);
}

/* -------------------------------------------------------------------------
   23. Process steps and flows
   ---------------------------------------------------------------------- */

/* The steps a line can hold, as a row of plain labels. */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.steps li {
  padding: 9px 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--faint);
  border-radius: 999px;
}

/*
 * The route material takes, as a row of numbered stations on one line. Every
 * station gets the same width, so the row never wraps with an arrow left
 * dangling at the start of a line; a long label wraps under its own number
 * instead. The last station, where the material comes out, is lime. On a
 * phone the row stands up and the line runs down.
 */
.flow {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  counter-reset: flow;
}

.flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-inline: 4px;
  text-align: center;
  counter-increment: flow;
}

.flow li::before {
  content: counter(flow, decimal-leading-zero);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-2);
  border: 2px solid var(--accent);
  border-radius: 50%;
}

/* The line to the next station, from this circle's centre to the next one. */
.flow li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 21px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--strong));
}

.flow li:last-child::before {
  color: var(--accent-ink);
  background: var(--accent);
}

.flow li span {
  max-width: 100%;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.prose .flow {
  margin-block: 28px;
  padding: 0;
}

.prose .flow li + li {
  margin-top: 0;
}

/* A machine's closing line, in the voice of the brochure. */
.slogan {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.slogan span {
  display: block;
  margin-top: 10px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.slogan em {
  font-style: normal;
  color: var(--accent-text);
}

/* -------------------------------------------------------------------------
   24. Capacity: buy or rent
   ---------------------------------------------------------------------- */

.capacity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.capacity .card__body {
  padding: clamp(30px, 4vw, 48px);
}

.capacity .card__title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
}

.capacity .card__lead {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
}

.capacity__note {
  display: inline-block;
  margin-top: 18px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
}

/* -------------------------------------------------------------------------
   25. Chapters
   ---------------------------------------------------------------------- */

/*
 * A long story told in chapters: the heading stays beside the text while it is
 * read, and each chapter closes on the line it stands for.
 */
.chapters {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
}

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--hair);
}

.chapter__head {
  position: sticky;
  top: 7rem;
}

.chapter__index {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-text);
}

.chapter__title {
  margin-top: 10px;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.15;
}

.chapter__close {
  margin-top: 28px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent-text);
}

/* -------------------------------------------------------------------------
   25b. Blocks: a page's chapters, two to a row
   ---------------------------------------------------------------------- */

.blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 18px;
}

.block {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.6vw, 48px);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.block__title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.08;
  margin-bottom: 18px;
}

.block .prose {
  max-width: none;
  font-size: 17px;
}

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

/* A list in a wide block runs in two columns of ticked lines. */
.block--wide {
  grid-column: 1 / -1;
}

.block--wide .prose ul {
  columns: 2;
  column-gap: 40px;
  margin-block: 18px;
  padding: 0;
  list-style: none;
}

.block--wide .prose li {
  position: relative;
  break-inside: avoid;
  margin: 0 0 10px;
  padding: 0 0 10px 30px;
  color: var(--ink);
  border-bottom: 1px solid var(--hair);
}

.block--wide .prose li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  rotate: -45deg;
}

.block--wide .prose h3 {
  margin-top: 1.6em;
}

.block--accent {
  --ink: var(--accent-ink);
  --muted: rgb(52 50 46 / 78%);
  --accent-text: var(--accent-ink);

  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

.block__foot {
  margin-top: auto;
  padding-top: 28px;
}

.btn--dark {
  color: var(--accent);
  background: #212529;
}

.btn--dark:hover {
  background: #181b1e;
}

/* -------------------------------------------------------------------------
   26. The full enquiry form
   ---------------------------------------------------------------------- */

.form__heading {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.field--choices {
  border: 0;
}

.field--choices legend {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px solid var(--faint);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.choice:hover {
  border-color: var(--strong);
}

.choice:has(input:checked) {
  border-color: var(--accent);
}

/* A tick box is not a text field: undo what .field gives every input and label. */
.field .choice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.field .choice input {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  appearance: auto;
  background: none;
  border: 0;
  border-radius: 0;
  accent-color: var(--accent);
}

.field--file input {
  padding: 11px 14px;
  cursor: pointer;
}

.field--file input::file-selector-button {
  margin-right: 14px;
  padding: 7px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.field__hint {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

/* The enquiry form in steps: a bar of four, then one step at a time. */
.formsteps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-block: 12px 8px;
}

/* Every tab as tall as the tallest, so the lines under them run level. */
.formsteps li {
  display: flex;
}

.formsteps__tab {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0 0 12px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 3px solid var(--faint);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.formsteps__tab:disabled {
  cursor: default;
}

.formsteps__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  border: 2px solid var(--faint);
  border-radius: 50%;
}

.formsteps__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
}

.formsteps__tab.is-done {
  border-bottom-color: var(--accent);
}

.formsteps__tab.is-done .formsteps__number {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.formsteps__tab.is-current {
  border-bottom-color: var(--ink);
}

.formsteps__tab.is-current .formsteps__number {
  color: var(--ink);
  border-color: var(--ink);
}

.formsteps__tab.is-current .formsteps__title {
  color: var(--ink);
}

.formstep {
  display: grid;
  gap: 18px;
  min-width: 0;
  border: 0;
}

.formstep__title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.formstep__count {
  display: block;
  margin-bottom: 6px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* The step already asks the question; the tick boxes need no second heading. */
.formstep .field--choices legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.formstep__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.formstep__nav .btn:only-child,
.formstep__nav [data-step-back][hidden] + .btn {
  margin-left: auto;
}

/* Without JavaScript the steps stand under each other, divided by a line. */
.form--steps:not(.is-stepped) .formstep + .formstep {
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}

.form--steps.is-stepped .formstep:not(.is-current) {
  display: none;
}

/* The closing block on every page: the question, then one button and the phone beside it. */
.closing > * {
  max-width: 760px;
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 32px;
}

.closing__phone,
.pagehead__phone {
  font-size: 16px;
  color: var(--muted);
}

.closing__phone a,
.pagehead__phone a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.pagehead__phone {
  margin-top: 22px;
}

/* The enquiry form under the contact cards, as wide as they are together. */
.formpanel {
  padding: clamp(24px, 4vw, 48px);
}

/* Four reasons to rent: a number, the reason, its line and one sentence. */
/*
 * Reasons to rent: the label and its number on one line at the top, then the
 * promise in large type, a short accent bar and the explanation.
 */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.reasons__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  padding: 32px 32px 36px;
  background: var(--panel);
  border: 1px solid var(--faint);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

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

.reasons__number {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text);
}

.reasons__label {
  grid-column: 1;
  grid-row: 1;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.reasons__title {
  grid-column: 1 / -1;
  margin-top: 40px;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.reasons__title::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 20px;
  border-radius: 2px;
  background: var(--accent);
}

.reasons__text {
  grid-column: 1 / -1;
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* The row of machines at the top of a machine page. */
.machinetabs {
  margin-top: 36px;
}

.machinetabs ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.machinetabs a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 8px 12px 8px 8px;
  text-decoration: none;
  border: 1px solid var(--faint);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.machinetabs a:hover {
  border-color: var(--strong);
}

.machinetabs a[aria-current='page'] {
  background: var(--panel);
  border-color: var(--accent);
}

.machinetabs__tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 42px;
  padding: 3px 5px;
  background: #eeeeec;
  border-radius: 8px;
}

.machinetabs__tile .shredanim {
  height: 100%;
  aspect-ratio: auto;
}

.machinetabs__number {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: #9a9890;
}

.machinetabs__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

/* The same row for the eight process steps: four to a row, a number each. */
.machinetabs--steps ul {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.machinetabs--steps a {
  padding: 10px 14px;
}

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

/* About: four figures in a row. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--hair);
}

.facts dt {
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.facts dd {
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--muted);
}

/* About: the years, on one line from 2000 to today. */
.timeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
}

.timeline li {
  position: relative;
  padding: 26px 18px 0 0;
  border-top: 2px solid var(--faint);
}

.timeline li::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
}

.timeline__year {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}

/* The columns are narrow: long words break with a hyphen so every line fills up. */
.timeline__line {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* About: the full story, folded until asked for. */
.story > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  cursor: pointer;
  list-style: none;
}

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

/* The choice helper: a dialog of three questions and one advice. */
.chooser [hidden] {
  display: none !important;
}

.chooser {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 0;
  color: #2a2926;
  background: #f5f5f2;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgb(0 0 0 / 35%);
}

.chooser::backdrop {
  background: rgb(52 50 46 / 60%);
  backdrop-filter: blur(4px);
}

.chooser__inner {
  --bg: #f5f5f2;
  --panel-2: #ffffff;
  --ink: #2a2926;
  --muted: #5c5a54;
  --faint: rgb(42 41 38 / 12%);
  --hair: rgb(42 41 38 / 8%);
  --strong: rgb(42 41 38 / 30%);
  --accent-text: #4a650e;
  --panel: #ffffff;

  padding: clamp(24px, 4vw, 40px);
}

.chooser__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chooser__close {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: none;
  border: 1px solid var(--faint);
  border-radius: 50%;
  cursor: pointer;
}

.chooser__close svg {
  width: 18px;
  height: 18px;
}

.chooser__count {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.chooser__question {
  margin-top: 6px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
}

.chooser__options {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.chooser__option {
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--faint);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.chooser__option:hover,
.chooser__option:focus-visible {
  background: #fbfbf9;
  border-color: var(--accent);
}

.chooser__back {
  margin-top: 18px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}

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

.chooser__results {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.chooser__machine {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
}

.chooser__figure {
  padding: 8px;
  background: #eeeeec;
  border-radius: 10px;
}

.chooser__figure .plate {
  aspect-ratio: 16 / 10;
}

.chooser__name {
  font-size: 20px;
}

.chooser__text {
  margin: 8px 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.chooser__note {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}

/* An indication, not advice: on every step, and boxed above the outcome. */
.chooser__disclaimer {
  margin-top: 28px;
  padding-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--hair);
}

.chooser:has([data-chooser-step="result"]:not([hidden])) .chooser__disclaimer {
  display: none;
}

.chooser__caveat {
  margin-top: 18px;
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  background: rgb(0 0 0 / 4%);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}

.chooser__caveat strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.chooser__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 26px;
}

.chooser__actions .chooser__back {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   27. Responsive, for the sections above
   ---------------------------------------------------------------------- */

/* Seven menu items need the room; below this the drawer takes over. */
@media (max-width: 1240px) {
  .nav {
    display: none;
  }

  .navtoggle {
    display: flex;
  }

  body.nav-open .drawer {
    display: block;
  }

  body.nav-open .navtoggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.nav-open .navtoggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .navtoggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .masthead__aside {
    margin-left: auto;
  }
}

@media (max-width: 1080px) {
  .machinetabs ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .machinetabs--steps ul,
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline li {
    padding: 0 0 22px 28px;
    border-top: 0;
    border-left: 2px solid var(--faint);
  }

  .timeline li::before {
    top: 4px;
    left: -7px;
  }

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

  /* Three in a row of two: the last one takes the full width. */
  .reasons__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .blocks {
    grid-template-columns: 1fr;
  }

  .block--wide .prose ul {
    columns: 1;
  }

  .chapter {
    grid-template-columns: 1fr;
  }

  .chapter__head {
    position: static;
  }
}

@media (max-width: 700px) {
  .machinetabs ul {
    grid-template-columns: 1fr 1fr;
  }

  .machinetabs__tile {
    display: none;
  }

  .chooser__machine {
    grid-template-columns: 1fr;
  }

  .reasons {
    grid-template-columns: 1fr;
  }

  .formsteps__title {
    display: none;
  }

  .capacity,
  .choices {
    grid-template-columns: 1fr;
  }

  .flow {
    grid-auto-flow: row;
    gap: 14px;
  }

  .flow li {
    flex-direction: row;
    gap: 16px;
    padding-inline: 0;
    text-align: left;
  }

  .flow li:not(:last-child)::after {
    top: 44px;
    left: 21px;
    width: 2px;
    height: calc(100% - 30px);
    background: linear-gradient(180deg, var(--accent), var(--strong));
  }
}