/* ==========================================================================
   RTD Electrical & Contracting Services: Rentals page only.
   rentals.html is the one page that loads this file, after styles.css and
   editorial.css, and every rule hangs off body.rentals, so nothing here can
   reach another page.

   It lays out the rental catalogue around RTD's inventory without touching
   it: the .equip-item entries in #equipment-list keep their markup, and
   only their presentation is set here. The base catalogue rules in
   styles.css still load; the ones below take over from them.

   · Desktop (1001px and up): the categories run down a sticky column on the
     left, the search bar sticks to the top of the results, and the entries
     run one to a ruled row, each with its own Request Rental button.
   · Tablet and phone: one column. The search bar and a category menu share
     one sticky row under the site header, so both stay in reach on a long
     list without a strip of chips to swipe through.
   · At every size a category heading holds under that bar while its own
     entries scroll past, so a long list never loses its place.
   · Without scripting: no search bar or buttons; the categories stay plain
     anchor links and the whole catalogue reads top to bottom.

   --rc-top is the height of the sticky site header and --rc-bar-h that of
   the search bar, both kept current by js/rentals.js, so the bar sits
   directly beneath the header and the headings directly beneath the bar.
   ========================================================================== */

.rentals [hidden] { display: none !important; }

/* While the request dialog is open the page behind it stays put. The
   script pads the page by the scrollbar's width so nothing shifts. */
html.rq-open { overflow: hidden; }

.rentals .rc { --rc-top: 95px; --rc-bar-h: 0px; }
@media (max-width: 1000px) {
  .rentals .rc { --rc-top: 71px; }
}
/* The search bar's height before the script has measured it. A link straight
   to a category is scrolled by the browser on the first paint, off this
   value, so it has to be close: the bar is a 50px field between 12px of
   padding. The script replaces it with the measured height. */
html.rc-js .rentals .rc { --rc-bar-h: 74px; }

/* The catalogue's own intro lede sits a little wider than the default. */
.rentals .rc .h-head .h-lede { max-width: 640px; }
.rentals .rc .h-lede a { color: var(--o-deep); font-weight: 600; text-underline-offset: 3px; }
.rentals a[href^="tel:"] { white-space: nowrap; }
.rentals .rc .h-lede a:hover { color: #141414; }

/* ──────────────────────────────────────── Layout */
.rentals .rc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2rem, 4.2vw, 3.2rem);
}

@media (min-width: 1001px) {
  .rentals .rc-layout {
    grid-template-columns: 284px minmax(0, 1fr);
    column-gap: clamp(2rem, 3.4vw, 3.25rem);
    align-items: start;
  }
}

/* ──────────────────────────────────────── Category column */
.rentals .rc-side__label {
  margin: 0 0 0.7rem;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--o-deep);
}

/* The chips from styles.css, re-set as a ruled list. */
.rentals .cat-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--l-line);
}

.rentals .cat-chip {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  margin: 0;
  padding: 9px 10px 8px 16px;
  color: #2C2C2E;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--l-line);
  border-radius: 0;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.rentals .cat-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 3px;
  background: var(--o);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--ease);
}
.rentals .cat-chip b {
  flex: none;
  color: var(--txt-dim);
  font-variant-numeric: tabular-nums;
}
.rentals .cat-chip:hover { background: var(--bone); color: #141414; border-color: var(--l-line); }
.rentals .cat-chip.is-active {
  background: var(--bone);
  color: #141414;
  border-color: var(--l-line);
}
.rentals .cat-chip.is-active::before { transform: scaleY(1); }
.rentals .cat-chip.is-active b { color: var(--o-deep); }
/* Browsing all of them: the one on screen is marked, lighter than the
   chosen one so the two never read as the same thing. */
.rentals .cat-chip.is-current { color: #141414; }
.rentals .cat-chip.is-current b { color: var(--o-deep); }
.rentals .cat-chip.is-current::before { transform: scaleY(1); opacity: 0.38; }
/* During a search: a category with no matches steps back. */
.rentals .cat-chip.is-none { color: #8E8E92; }
.rentals .cat-chip.is-none b { color: #A5A5A8; }

@media (min-width: 1001px) {
  .rentals .rc-side {
    position: sticky;
    top: calc(var(--rc-top) + 20px);
    max-height: calc(100vh - var(--rc-top) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Without scripting on a smaller screen the list is the only way in, so it
   packs two to a row instead of running a long single column. */
@media (max-width: 1000px) {
  .rentals .rc-side { margin-bottom: 2rem; }
  .rentals .cat-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .rentals .rc-ready .rc-side { display: none; }
}
@media (max-width: 560px) {
  .rentals .cat-nav { grid-template-columns: minmax(0, 1fr); }
}

/* ──────────────────────────────────────── Search bar */
.rentals .rc-bar,
.rentals .rc-status { display: none; }
.rentals .rc-ready .rc-bar { display: flex; }
.rentals .rc-ready .rc-status { display: flex; }

.rentals .rc-bar {
  position: sticky;
  top: var(--rc-top);
  z-index: 30;
  align-items: center;
  gap: 10px;
  padding-block: 12px;
  background: #fff;
  border-bottom: 1px solid var(--l-line);
}

.rentals .rc-search {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.rentals .rc-search__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--txt-dim);
  pointer-events: none;
}
.rentals .rc-search input {
  width: 100%;
  height: 50px;
  padding: 0 46px 0 44px;
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: #141414;
  background: #fff;
  border: 1px solid rgba(24, 24, 24, 0.3);
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rentals .rc-search input::placeholder { color: #7C7D81; opacity: 1; }
.rentals .rc-search input::-webkit-search-cancel-button,
.rentals .rc-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.rentals .rc-search input:hover { border-color: rgba(24, 24, 24, 0.5); }
.rentals .rc-search input:focus-visible {
  outline: none;
  border-color: var(--o);
  box-shadow: 0 0 0 3px rgba(243, 107, 33, 0.22);
}
.rentals .rc-search.has-value input { border-color: #141414; }

.rentals .rc-clear {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #45464B;
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.rentals .rc-clear:hover { background: var(--bone); color: #141414; }

/* The category menu stands in for the column on tablets and phones. The
   native menu does the work, so a phone opens its own picker, but it sits
   transparent over a face that names it and shows the chosen category. */
.rentals .rc-select { display: none; position: relative; min-width: 0; }
@media (max-width: 1000px) {
  .rentals .rc-ready .rc-select { display: block; flex: 0 0 auto; width: min(46%, 240px); }
}
.rentals .rc-select__face {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  height: 50px;
  padding: 0 34px 0 13px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid rgba(24, 24, 24, 0.3);
  border-radius: 2px;
  pointer-events: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rentals .rc-select__cap {
  font-family: var(--font-head);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--o-deep);
}
.rentals .rc-select__val {
  overflow: hidden;
  font-family: var(--font-head);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #141414;
}
.rentals .rc-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 16px;      /* under 16px iOS zooms the page on focus */
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rentals .rc-select:hover .rc-select__face { border-color: rgba(24, 24, 24, 0.5); }
.rentals .rc-select:focus-within .rc-select__face {
  border-color: var(--o);
  box-shadow: 0 0 0 3px rgba(243, 107, 33, 0.22);
}
/* A chosen category shows on the menu itself: orange edge, bone fill. */
.rentals .rc-select.is-filtered .rc-select__face {
  padding-left: 16px;
  background-color: var(--bone);
  border-color: #141414;
  box-shadow: inset 4px 0 0 var(--o);
}
.rentals .rc-select.is-filtered:focus-within .rc-select__face {
  box-shadow: inset 4px 0 0 var(--o), 0 0 0 3px rgba(243, 107, 33, 0.22);
}

/* On a phone the menu gives its width back to the search field: it only has
   to show the category in use, and the phone's own picker lists them in
   full. Below about 360px the field would otherwise clip its placeholder. */
@media (max-width: 560px) {
  .rentals .rc-ready .rc-select { width: clamp(132px, 38%, 200px); }
  .rentals .rc-select__face {
    padding: 0 27px 0 11px;
    background-position: right 9px center;
  }
  .rentals .rc-select.is-filtered .rc-select__face { padding-left: 13px; }
  .rentals .rc-search__icon { left: 12px; }
  .rentals .rc-search input { padding: 0 44px 0 37px; }
  .rentals .rc-clear { right: 3px; }
}

/* ──────────────────────────────────────── Count and reset line */
.rentals .rc-status {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 18px;
  min-height: 3.4rem;
  padding: 12px 0 6px;
}
.rentals .rc-status__text {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--txt-dim);
}
.rentals .rc-status__text b { color: #141414; font-weight: 700; }
.rentals .rc-status__text q { quotes: "\201C" "\201D"; color: #141414; }
.rentals .rc-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
}

/* A text-weight action: the kicker's orange, on a hairline underline. */
.rentals .rc-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0;
  font-family: var(--font-head);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: var(--ls-btn);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--o-deep);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .25s var(--ease);
}
.rentals .rc-link span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.rentals .rc-link:hover { color: #141414; }
.rentals .rc-link svg { flex: none; }

/* Expand all / Collapse all: the same text action, with the chevron the
   category headings use instead of the arrow. */
.rentals .rc-link__chev { transition: transform .3s var(--ease); }
.rentals .rc-link__chev.is-up { transform: rotate(-180deg); }
@media (prefers-reduced-motion: reduce) {
  .rentals .rc-link__chev { transition: none; }
}

/* ──────────────────────────────────────── Category groups
   The catalogue reads as 17 ruled category rows: a name, its count and a
   chevron. The entries under a category only come into the page when it is
   opened, so the page opens short and a visitor goes straight to the one
   they came for. */
.rentals .catalogue { border-top: 1px solid var(--l-line); }
.rentals .equip-group { scroll-margin-top: calc(var(--rc-top) + var(--rc-bar-h) + 12px); }
.rentals .equip-group + .equip-group { margin-top: 0; }

/* Before the script builds the accordion the entries are already out of the
   page, so it never flashes the whole catalogue. Once built they sit inside
   .equip-group__body and this stops applying; if the script never runs at
   all, the head script takes rc-js off again and the whole list shows. */
html.rc-js .rentals .equip-group > .equip-list { display: none; }

/* The heading holds under the search bar while its own entries scroll past,
   so the category a row belongs to is always on screen. Without scripting
   --rc-bar-h is 0 and it simply sits under the site header. */
.rentals .equip-group__title {
  position: sticky;
  top: calc(var(--rc-top) + var(--rc-bar-h));
  z-index: 12;
  display: block;
  margin: 0;
  padding: 11px 0 10px;
  background: #fff;
  border-bottom: 2px solid var(--o);
  font-family: var(--font-head);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head-sm);
  text-transform: uppercase;
  color: #141414;
}
.rentals .equip-group__count {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 0.18em;
  color: var(--txt-dim);
  font-variant-numeric: tabular-nums;
}

/* With the accordion built, the heading is a hairline rule like the rest of
   the catalogue and the orange one draws across the category that is open. */
.rentals .is-accordion .equip-group__title {
  padding: 0;
  border-bottom-width: 1px;
  border-bottom-color: var(--l-line);
}
.rentals .is-accordion .equip-group__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--o);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s var(--ease);
}
.rentals .equip-group.is-open > .equip-group__title::after { transform: scaleX(1); }

/* The whole heading row is the control that opens the category. */
.rentals .equip-group__toggle {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 13px 2px 12px 0;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .25s var(--ease);
}
.rentals .equip-group__toggle:hover { color: var(--o-deep); }
.rentals .equip-group__toggle:focus-visible { outline: 2px solid var(--o); outline-offset: -2px; }
.rentals .equip-group__name { flex: 1 1 auto; min-width: 0; }
.rentals .is-accordion .equip-group__count { flex: none; margin-left: 0; }
.rentals .equip-group.is-open .equip-group__count { color: var(--o-deep); }
.rentals .equip-group__chev {
  flex: none;
  align-self: center;
  color: rgba(24, 24, 24, 0.4);
  transition: transform .34s var(--ease), color .25s var(--ease);
}
.rentals .equip-group__toggle:hover .equip-group__chev { color: var(--o-deep); }
.rentals .equip-group.is-open .equip-group__chev {
  color: var(--o-deep);
  transform: rotate(-180deg);
}

/* Opening and closing: the entries unfold out of the heading. A shut
   category stays out of the tab order and out of a screen reader's way. */
.rentals .equip-group__body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .34s var(--ease), visibility 0s linear .34s;
}
.rentals .equip-group.is-open > .equip-group__body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .34s var(--ease), visibility 0s linear 0s;
}
.rentals .equip-group__body > .equip-list { overflow: hidden; min-height: 0; }
/* The room under the last entry is drawn, not padded: padding on the list
   cannot shrink with the panel, and would hold every shut category open by
   its height. */
.rentals .equip-group__body > .equip-list::after {
  content: "";
  display: block;
  height: clamp(1.1rem, 2.2vw, 1.75rem);
}
/* Categories shutting while another is being scrolled to, and the whole
   catalogue opening or shutting at once, move without animating. */
.rentals .equip-group.is-instant > .equip-group__body,
.rentals .equip-group.is-instant > .equip-group__title::after,
.rentals .equip-group.is-instant .equip-group__chev { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .rentals .equip-group__body,
  .rentals .equip-group.is-open > .equip-group__body,
  .rentals .equip-group__title::after,
  .rentals .equip-group__chev { transition: none; }
}

/* ──────────────────────────────────────── Equipment entries
   One ruled row per entry: what it is on the left, the request on the
   right, so every name starts on the same line and every button sits in
   one column. On a phone the button drops under the details. */
.rentals .equip-list {
  display: block;
  margin: 0;
  padding: 0;
}

.rentals .equip-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  min-width: 0;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--l-line);
}
.rentals .equip-item > .equip-item__name,
.rentals .equip-item > .equip-item__note,
.rentals .equip-item > .equip-item__variants { grid-column: 1; }

.rentals .equip-item__name {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head-sm);
  text-transform: uppercase;
  color: #141414;
  overflow-wrap: anywhere;
}

.rentals .equip-item__note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  color: #55565B;
}

.rentals .equip-item__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 2px;
  padding: 0;
  list-style: none;
}
.rentals .equip-item__variants li {
  padding: 4px 9px 3px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: #2C2C2E;
  background: var(--bone);
  border: 1px solid var(--l-line);
  border-radius: 2px;
}

/* The button shares the name's row, centred on it; details run on below. */
.rentals .rc-act {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-block: -9px;   /* overhangs into the row's padding, so a detail line
                           sits tight under its name */
}
.rentals .rc-req {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 9px 13px 8px 15px;
  font-family: var(--font-head);
  font-size: var(--fs-btn-sm);
  font-weight: 600;
  letter-spacing: var(--ls-btn);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #141414;
  background: #fff;
  border: 1px solid rgba(24, 24, 24, 0.26);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.rentals .rc-req svg { flex: none; color: var(--o-deep); transition: transform .3s var(--ease), color .3s var(--ease); }
.rentals .rc-req:hover { background: var(--o); border-color: var(--o); color: var(--o-ink); }
.rentals .rc-req:hover svg { color: var(--o-ink); transform: translateX(3px); }
.rentals .rc-req:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
@media (pointer: coarse) {
  .rentals .rc-req { min-height: 44px; }
}

/* On a phone the action drops under the details as a lighter text action,
   so a long catalogue does not read as a wall of boxes. It keeps a
   full-size target. */
@media (max-width: 640px) {
  .rentals .equip-item { grid-template-columns: minmax(0, 1fr); padding: 14px 0 6px; }
  .rentals .rc-act { grid-column: 1; grid-row: auto; margin: 2px 0 0; }
  .rentals .rc-req {
    min-height: 44px;
    padding: 6px 0;
    color: var(--o-deep);
    background: none;
    border: 0;
  }
  .rentals .rc-req svg { color: currentColor; }
  .rentals .rc-req:hover { background: none; color: #141414; }
  .rentals .rc-req:hover svg { color: currentColor; }
}

/* ──────────────────────────────────────── Nothing found */
.rentals .rc-empty {
  margin-top: 0.4rem;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem);
  background: var(--bone);
  border-left: 3px solid var(--o);
}
.rentals .rc-empty__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: #141414;
  overflow-wrap: anywhere;
}
.rentals .rc-empty__text {
  margin: 0.6rem 0 0;
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: var(--lh-copy);
  color: var(--txt);
}
.rentals .rc-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 0.6rem;
}
.rentals .rc-empty__actions:empty { display: none; }
.rentals .rc-empty__help {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--l-line);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--txt);
}
.rentals .rc-empty__help a { color: var(--o-deep); font-weight: 600; text-underline-offset: 3px; }
.rentals .rc-empty__help a:hover { color: #141414; }

/* ──────────────────────────────────────── Rental request dialog */
.rentals .rq {
  width: min(660px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--txt);
  background: #fff;
  border: 0;
  border-top: 3px solid var(--o);
  border-radius: 2px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}
.rentals .rq[open] { display: flex; flex-direction: column; }
.rentals .rq::backdrop { background: rgba(10, 9, 8, 0.72); }

.rentals .rq__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.rentals .rq__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 14px 14px clamp(20px, 4vw, 32px);
  border-bottom: 1px solid var(--l-line);
}
.rentals .rq__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: #141414;
}
.rentals .rq__title:focus { outline: none; }
.rentals .rq__title:focus-visible { outline: 2px solid var(--o); outline-offset: 4px; }
.rentals .rq__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #141414;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.rentals .rq__close:hover { background: var(--bone); border-color: var(--l-line); }

.rentals .rq__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(18px, 3.2vw, 26px) clamp(20px, 4vw, 32px) clamp(22px, 4vw, 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* The equipment being asked about, as read from the catalogue. */
.rentals .rq__equip {
  margin: 0 0 18px;
  padding: 14px 16px 15px 18px;
  background: var(--bone);
  border-left: 3px solid var(--o);
}
.rentals .rq__label {
  margin: 0;
  padding: 0;
  font-family: var(--font-head);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--o-deep);
}
.rentals .rq__label span,
.rentals .rq__optional {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt-dim);
}
.rentals .rq__name {
  margin: 6px 0 0;
  font-family: var(--font-head);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head-sm);
  text-transform: uppercase;
  color: #141414;
  overflow-wrap: anywhere;
}
.rentals .rq__meta {
  margin: 5px 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  color: #55565B;
}
.rentals .rq__meta:empty { display: none; }

.rentals .rq__opts {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--l-line);
  min-width: 0;
}
.rentals .rq__opts legend { float: left; width: 100%; margin-bottom: 8px; }
.rentals .rq__opt-list {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rentals .rq__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 7px 12px 7px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: #2C2C2E;
  background: #fff;
  border: 1px solid rgba(24, 24, 24, 0.22);
  border-radius: 2px;
  cursor: pointer;
}
.rentals .rq__opt input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--o-deep);
}
.rentals .rq__opt:has(input:checked) { border-color: #141414; box-shadow: inset 0 0 0 1px #141414; }
.rentals .rq__opt:has(input:focus-visible) { outline: 2px solid var(--o); outline-offset: 2px; }

.rentals .rq__intro {
  margin: 0 0 18px;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--txt);
}

.rentals .rq .form-grid { gap: 16px 18px; }
.rentals .rq .field input,
.rentals .rq .field textarea { min-width: 0; min-height: 48px; }
.rentals .rq .field textarea { min-height: 96px; }
.rentals .rq .field input[type="date"] {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  line-height: var(--lh-tight);
  text-align: left;
  background: #fff;
}
.rentals .rq .field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.rentals .rq .field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.75; }
.rentals .rq .field-error { margin: 0; }
.rentals .rq .form-status a { font-weight: 600; }
.rentals .rq .form-actions { margin-top: 2px; }
.rentals .rq .btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }

.rentals .rq__done { padding: 6px 0 4px; }
.rentals .rq__done-title {
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--o);
  font-family: var(--font-head);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: var(--lh-head);
  text-transform: uppercase;
  color: #141414;
}
.rentals .rq__done-title:focus { outline: none; }
.rentals .rq__done-text {
  margin: 14px 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-copy);
  color: var(--txt);
}
.rentals .rq__done-text strong { color: #141414; }
.rentals .rq__done-text a { color: var(--o-deep); font-weight: 600; }
.rentals .rq__done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* On a phone the request takes the whole screen. */
@media (max-width: 640px) {
  .rentals .rq {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .rentals .rq .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rentals .rq .field { grid-column: auto; }
  .rentals .rq .field.full,
  .rentals .rq .form-status,
  .rentals .rq .form-actions { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .rentals .rq .field { grid-column: 1 / -1; }
  /* The two dates stay side by side: they read as one range. */
  .rentals .rq .field.rq__date { grid-column: auto; }
  .rentals .rq .form-actions .btn { width: 100%; }
}
/* Below 375px a date and its picker no longer fit at half width. */
@media (max-width: 374px) {
  .rentals .rq .field.rq__date { grid-column: 1 / -1; }
}

/* ──────────────────────────────────────── Motion */
@media (prefers-reduced-motion: reduce) {
  .rentals .cat-chip,
  .rentals .cat-chip::before,
  .rentals .rc-req,
  .rentals .rc-req svg { transition: none; }
  .rentals .rc-req:hover svg { transform: none; }
}