/* Equipment hire — the section's one stylesheet.
   Replaces the per-page ITEM_CSS block gen_hire_pages.py used to embed and the
   two style blocks that lived inline on /services/hire/ (the original webshop
   skin plus the #catalogue-theme overlay). Everything here follows the site's
   own recipe from custom.css: token colours, the .sit-wwwith-card card (1px
   #d6dce6, 4px primary top border, 6px radius), hover lift ONLY on things that
   are links, 3px-radius uppercase 800 buttons, square #f7f7f7 form fields.
   Loaded last in the head so it wins ties against custom.css; basket styles
   stay in footer.css (which loads at the end of body and would win anyway). */

/* ---------------------------------------------------------------- document */
.itm-doc{box-sizing:content-box;max-width:var(--maxPageWidth);margin-left:auto;margin-right:auto;padding-left:max(23px,var(--pagePadding));padding-right:max(23px,var(--pagePadding))}
.itm-doc h1{font-size:clamp(30px,3.4vw,46px);line-height:1.12;letter-spacing:-.02em;font-weight:700;color:var(--c-navy);margin:14px 0 0}
.itm-doc h2{font-size:clamp(24px,2.2vw,32px);line-height:1.2;letter-spacing:-.015em;font-weight:700;color:var(--c-navy);margin:56px 0 20px}
.itm-doc p:not([class]){font-size:20px}
.itm-crumb{margin:0 0 6px}
.itm-crumb a{color:inherit}
.itm-stand{max-width:930px;margin:20px 0 0}

/* ---------------------------------------------------------------- buttons */
.itm-btn{display:inline-block;background:var(--c-primary);color:#fff!important;text-decoration:none!important;text-transform:uppercase;font-weight:800;font-size:14px;letter-spacing:.05em;padding:14px 26px;text-align:center;border:2px solid var(--c-primary);border-radius:3px;cursor:pointer;transition:background .2s,color .2s}
.itm-btn:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark)}
.itm-btn--ghost{background:transparent;color:var(--c-primary)!important}
.itm-btn--ghost:hover{background:var(--c-primary);color:#fff!important}
/* the availability checker's own buttons live in custom.css with 0 radius;
   bring them onto the site's 3px button radius (hire.css loads later) */
.eq-avail-go,.eq-avail-cta{border-radius:3px}
.eq-avail-fields{display:flex;flex-wrap:wrap;gap:16px 18px;align-items:flex-end;margin-top:20px}
.eq-avail-field{display:flex;flex-direction:column;gap:6px}
.eq-avail-field label{font-size:14px;font-weight:600;color:#39393b}
.eq-avail-field input,.eq-avail-field select{box-sizing:border-box;height:46px;background:#f7f7f7;border:1px solid #39393b;border-radius:0;color:#39393b;font-family:inherit;font-size:15px;padding:0 12px}
.eq-avail-field input:focus,.eq-avail-field select:focus{outline:2px solid var(--c-primary);outline-offset:-2px}
.eq-avail-field--item{flex:1 1 100%}
.eq-avail-field--item select{width:100%;max-width:420px}
.eq-avail-go{box-sizing:border-box;height:46px;padding:0 28px;font-size:14px;letter-spacing:.05em;border-radius:3px}
@media (max-width:560px){
.eq-avail-field{flex:1 1 40%}
.eq-avail-field input{width:100%}
.eq-avail-go{width:100%}
}
/* the rail's quiet rows: checking dates and building a list sit as calm,
   matching rows under the one strong button */
.itm-quiet,.itm-add{display:block;width:100%;box-sizing:border-box;background:transparent;border:none;border-top:1px solid var(--c-border);margin:2px 0 0;padding:14px 0 0;font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c-primary);text-align:center;cursor:pointer;text-decoration:none!important;transition:color .2s}
.itm-quiet:hover,.itm-add:hover{color:var(--c-primary-dark);text-decoration:underline!important}
.itm-quiet--check::after{content:"";display:inline-block;width:9px;height:5px;margin-left:7px;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpolyline points='1,1 6,6 11,1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpolyline points='1,1 6,6 11,1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.itm-add::before{content:"+";margin-right:7px;font-size:14px;line-height:1;vertical-align:-1px}
.itm-add--on{color:var(--c-navy)}
.itm-add--on::before{content:"\2713"}

/* ---------------------------------------------------------------- item page */
.itm-price b{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--c-text-dark);line-height:1}
.itm-price span{font-size:15px;color:var(--c-text-body);margin-left:7px}
.itm-price .from{font-size:15px;color:var(--c-text-body);margin:0 7px 0 0}
.a-wrap{display:grid;grid-template-columns:1fr minmax(280px,340px);gap:0 56px;align-items:start}
.a-main{min-width:0}
.a-rail{position:sticky;top:110px;background:#fff;border:1px solid #d6dce6;border-top:4px solid var(--c-primary);border-radius:6px;box-shadow:0 2px 10px rgba(0,75,120,.06);padding:24px;display:flex;flex-direction:column;gap:14px}
.a-rail img{width:100%;height:auto;display:block;border-radius:0;background:#f7f7f7}
.a-note{font-size:13.5px;color:var(--c-text-body);line-height:1.5;margin:0}
.a-main h2:first-child,.itm-doc>h2:first-child{margin-top:0}
.a-read{max-width:790px}
.a-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 36px}
.a-list div{padding:12px 0;border-top:1px solid var(--c-border);font-size:16px;line-height:1.55;color:var(--c-text-body)}
.a-facts{background:#fff;border:1px solid #d6dce6;border-top:4px solid var(--c-primary);border-radius:6px;box-shadow:0 2px 10px rgba(0,75,120,.06);overflow:hidden;margin:0 0 8px}
.a-facts>div{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:0 28px;padding:16px 22px;border-top:1px solid var(--c-border)}
.a-facts>div:first-child{border-top:0}
.a-facts dt{font-weight:700;font-size:15px;color:var(--c-text-dark);margin:0}
.a-facts dd{margin:0;font-size:16px;line-height:1.55;color:var(--c-text-body)}
/* the spec table is an accordion, so it follows the site accordion recipe */
.a-tech{border:1.5px solid var(--c-border);border-radius:6px;overflow:hidden;margin:8px 0 0;background:#fff}
.a-tech>summary{cursor:pointer;padding:15px 22px;font-weight:700;font-size:16px;color:var(--c-text-dark);list-style:none;display:flex;justify-content:flex-start;gap:8px;align-items:center;transition:background .2s}
.a-tech>summary span{color:var(--c-text-body);font-weight:400;font-size:14px}
.a-tech>summary:hover,.a-tech[open]>summary{background:#f0f8fc}
.a-tech>summary::-webkit-details-marker{display:none}
.a-tech>summary:after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--c-primary);border-bottom:2px solid var(--c-primary);transform:rotate(45deg);transition:transform .2s}
.a-tech[open]>summary:after{transform:rotate(-135deg)}
.a-tech .rows{padding:0 22px 10px}
.a-specs{width:100%;border-collapse:collapse;font-size:15px}
.a-specs th{text-align:left;padding:11px 16px 11px 0;border-top:1px solid var(--c-border);font-weight:600;color:var(--c-text-dark);width:34%;vertical-align:top}
.a-specs td{padding:11px 0;border-top:1px solid var(--c-border);color:var(--c-text-body);line-height:1.55;vertical-align:top}
/* the theme caps accordion answers at 300px wide — the guide pages already
   override it, and the FAQ answers here need the full column too */
.itm-doc .accordion-item__description{max-width:none!important}
/* rates table — shared component instead of hand-inlined styles */
.itm-rates{overflow-x:auto}
.itm-rates table{width:100%;border-collapse:collapse}
.itm-rates th{text-align:left;padding:8px 0;border-bottom:2px solid #d6dce6;font-weight:700;color:var(--c-text-dark)}
.itm-rates thead th:last-child,.itm-rates td:last-child{text-align:right;white-space:nowrap}
.itm-rates td{padding:10px 0;border-bottom:1px solid var(--c-border);font-size:16px;color:var(--c-text-body)}

/* ------------------------------------------------- product / shelf cards */
/* The shelf on category pages and the "More …" row on product pages. The
   clickable-tile behaviour mirrors .s1t-tile; the body mirrors .sit-wwwith-card. */
/* auto-fit, not auto-fill: a category with three products used to draw three
   250px cards and leave the rest of a wide screen empty, because auto-fill
   kept the unfilled columns. auto-fit collapses them so the shelf fills the
   row; a full shelf still wraps at 230px. */
.hire-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:28px 0 12px}
a.hire-card,a.hire-card:link,a.hire-card:visited{text-decoration:none}
.hire-card{display:flex;flex-direction:column;background:#fff;border:1px solid #d6dce6;border-top:4px solid var(--c-primary);border-radius:6px;box-shadow:0 2px 10px rgba(0,75,120,.06);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-top-color .2s ease}
.hire-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,75,120,.13);border-top-color:var(--c-navy)}
.hire-card-img{aspect-ratio:4/3;background:#f7f7f7;display:flex;align-items:center;justify-content:center;color:#cbd5e1;font-size:2rem;border-bottom:1px solid var(--c-border)}
.hire-card-img img,.hire-card-img picture{width:100%;height:100%}
.hire-card-img img{object-fit:contain;display:block}
.hire-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.hire-card-body h3{margin:0;padding:0;font-size:17px;font-weight:700;color:var(--c-navy);line-height:1.3;letter-spacing:-.01em}
.hire-card:hover .hire-card-body h3{color:var(--c-primary)}
.hire-card-body p:not(.hire-card-price){margin:0;padding:0;font-size:14.5px;line-height:1.55;color:var(--c-text-body);flex:1}
.hire-card-body p.hire-card-price{flex:0 0 auto;margin:0;padding:0;font-size:15px;color:var(--c-text-body)}
.hire-card-price b{font-size:18px;font-weight:800;color:var(--c-text-dark)}
.hire-card-arrow{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c-primary);display:inline-flex;align-items:center;gap:6px;margin-top:2px;transition:gap .2s ease}
.hire-card-arrow::after{content:"";display:inline-block;width:5px;height:9px;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpolyline points='1,1 6,6 1,11' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpolyline points='1,1 6,6 1,11' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.hire-card:hover .hire-card-arrow{gap:9px}

/* ----------------------------------------------------- hub category band */
/* Tiles reuse the home page's .s1t-tile recipe (custom.css); this wrapper
   sets a 3-column rhythm for the category tiles (nine today: a clean 3x3). */
.hire-cats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;box-sizing:border-box;margin:0 0 18px}
.equipment-catalogue .sit-wwwith-callout{margin:0 0 8px}
.eq-cat-heading{font-size:clamp(24px,2.6vw,34px);line-height:1.2;letter-spacing:-.015em;margin:36px 0 14px}
@media (min-width:768px){.eq-cat-heading{margin:56px 0 24px}}

/* ---------------------------------------------------------- catalogue app */
.equipment-catalogue{font-family:inherit;background:none;color:var(--c-text-dark);padding:0;line-height:1.6}
/* No universal reset here: custom.css components (.s1t-tile, .sit-wwwith-callout)
   live inside the catalogue now, and a `*` reset in a later stylesheet would
   strip their padding. Reset only what the theme actually leaks into. */
.equipment-catalogue-container{box-sizing:content-box;max-width:var(--maxPageWidth);margin:0 auto;padding-left:max(23px,var(--pagePadding));padding-right:max(23px,var(--pagePadding))}
/* Below the Squarespace mobile breakpoint the section already has a 6vw
   gutter. Keeping this component's second 23px gutter as well left a 320px
   phone with only 236px for a card, cramped the price controls and clipped
   otherwise useful taglines. Use the section gutter on its own; it is still
   19px at 320px and grows with the screen. */
@media (max-width:767px){
  .equipment-catalogue-container{padding-left:0;padding-right:0}
}
.equipment-name,.equipment-description,.equipment-price,.equipment-category-badge{margin:0;padding:0}
.equipment-category-badge{padding:4px 8px}
/* the row above the grid: search on the left, the price-unit switch on the
   right. Without JavaScript the switch stays hidden and this is just the
   search box, spaced exactly as it was. */
.equipment-controls{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 24px}
.equipment-controls .equipment-search-container{margin:0;flex:1 1 260px}
.equipment-search-container{position:relative;max-width:400px;margin:0 0 24px}
/* per day / per week: one joined either/or control, so it reads as a unit
   switch rather than two more of the category filters below it */
/* "Price for [a day][a week][your dates]" plus the dates themselves. The
   toggle used to be two buttons that quietly changed a unit; it is a question
   now, with the dates beside it, because the dates are the real answer and
   asking for them here saves a visitor building a list to find out what their
   week costs. */
  /* On a phone this control is the first thing under the search box, so it
     has to earn its height: three equal buttons on one line, the two dates
     side by side under them, labels stacked above their own field. */

/* ---- "Price for" ---------------------------------------------------------
   Written narrow first, then widened, because this control is the first thing
   under the search box on a phone and it was taking a third of the screen
   before a single product appeared: a label, three buttons, two date fields
   nobody had asked for, a summary and a discount pill, each on its own line.

   Narrow: the ask on one line, the dates only once someone chooses them, and
   the price line and the discount sharing the last row. Wide: all of it on
   one row beside the search field. */
/* min-width:0 — a flex item defaults to min-width:auto, and this one's widest
   child is the pair of date fields, so the whole control used to run 60px past
   a 375px phone the moment the dates were open (and they open on arrival when
   dates are remembered from a product page) */
.eq-rate{display:flex;flex-direction:column;gap:10px;min-width:0}
/* Reserve the control's space while the script is still on its way, the way
   .eq-avail does: unhiding it used to push the whole grid down (a 0.2 layout
   shift on the lean page, whose grid starts right underneath). Without
   JavaScript the space stays blank — a small price, paid by almost nobody. */
.eq-rate[hidden]{visibility:hidden}
.eq-rate-ask{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eq-rate-label{color:#4a5568;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap}
.eq-rate-toggle{display:flex;flex:1 1 auto;min-width:0}
.eq-rate-option{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}

.eq-rate-dates{display:flex;align-items:flex-end;gap:8px}
.eq-rate-dates[hidden]{display:none}
/* #4a5568, not #6b7789: the lighter grey was 4.2:1 on the hub's tinted band,
   under AA for 12-13px text — Lighthouse flagged "ex VAT" on every run */
.eq-rate-date{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:3px;
  font-size:12.5px;color:var(--c-text-body)}
/* #7f8b9c, not #c3cddb: a field's border is its only boundary, and WCAG asks
   3:1 of it against the band behind (this is 3.2:1 on #f5f7fa) */
.eq-rate-input{box-sizing:border-box;width:100%;min-width:0;padding:9px 8px;
  border:1px solid #7f8b9c;border-radius:3px;background:#fff;color:var(--c-text-dark);
  font-family:inherit;font-size:14px;line-height:1.2}
.eq-rate-input:focus{border-color:var(--c-primary);outline:2px solid var(--c-primary);outline-offset:-2px;
  box-shadow:0 0 0 3px rgba(0,117,163,.14)}
.eq-rate-clear{-webkit-appearance:none;appearance:none;flex:0 0 auto;border:0;
  background:none;padding:0 2px 10px;color:var(--c-primary);font-family:inherit;
  font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}

/* min-height holds the row at the discount pill's height before the script
   fills the slot, so the grid below does not jump when the pill lands */
.eq-rate-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:38px}
.eq-rate-sum{flex:0 0 auto;color:var(--c-text-body);font-size:13px;letter-spacing:.02em}
.eq-edu-slot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}

/* 320px phones: two date fields will not sit side by side (each is ~140px
   wide before it can be squeezed), and the pair pushed the whole control
   past the right edge, taking the "To" field and the info button with it.
   Stack them, and let the three options give up some padding. */
@media (max-width:359px){
  .eq-rate-option{padding:11px 8px;font-size:13px}
  .eq-rate-dates{flex-wrap:wrap}
  .eq-rate-date{flex:1 1 100%}
  .eq-rate-clear{flex:1 1 100%;text-align:left;padding:0 2px 2px}
}

@media (min-width:768px){
  /* One line: the search box, the question, and the two things that modify
     what a price means. The discount and "ex VAT" travel together at the right
     rather than being flung to opposite ends of an empty row, and the dates
     drop underneath only when somebody opens them. */
  /* Top-aligned, not centred: the control below wraps to two lines when the
     dates are open, and centring left the search box floating in the middle
     of it like a second column that had wandered in. */
  .equipment-controls{align-items:flex-start;gap:12px 18px}
  .equipment-controls .equipment-search-container{flex:0 1 300px}
  .eq-rate{flex:1 1 460px;flex-direction:row;align-items:center;flex-wrap:wrap;
    gap:10px 14px}
  .eq-rate-ask{flex:0 0 auto}
  .eq-rate-toggle{flex:0 0 auto}
  .eq-rate-option{flex:0 0 auto}
  .eq-rate-meta{flex:1 1 auto;justify-content:flex-end;gap:14px}
  .eq-edu-slot{margin-left:0}
  /* "ex VAT" qualifies the price switch, so it sits next to it, before the
     discount pill — it used to trail the info button, three controls away
     from the figure it was describing */
  .eq-rate-dates{order:3;flex:1 1 100%;align-items:center;
    padding-top:11px;border-top:1px solid #e6ecf1}
  .eq-rate-date{flex:0 0 auto;flex-direction:row;align-items:center;gap:6px;
    font-size:13px}
  .eq-rate-input{width:auto}
  .eq-rate-clear{padding-bottom:0;margin-left:2px}
}
.eq-rate-toggle{box-sizing:border-box;border:1px solid #c3cddb;border-radius:3px;overflow:hidden;background:#fff}
/* Without this the control shows for visitors with no JavaScript, who have no
   factor table and so no week price behind it. Setting `display` above beats
   both rules that would otherwise hide it: the UA sheet's [hidden] loses to any
   author rule, and site.css's [hidden] ties on specificity but loses on order,
   because hire.css is last in the head. Same fix as .equipment-show-all[hidden]. */
.eq-rate-toggle[hidden]{display:none}
.eq-rate-option{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;margin:0;padding:11px 14px;border:0;background:#fff;color:var(--c-text-body);font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .2s ease,color .2s ease}
.eq-rate-option+.eq-rate-option{border-left:1px solid #c3cddb}
.eq-rate-option:hover:not(.is-active){color:var(--c-primary)}
.eq-rate-option.is-active{background:var(--c-primary);color:#fff}
.eq-rate-option:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}
/* the selected option is already filled with --c-primary, so a primary-coloured
   focus ring would vanish on exactly the button most likely to hold focus */
.eq-rate-option.is-active:focus-visible{outline-color:#fff}
.equipment-search-input{box-sizing:border-box;width:100%;padding:12px 16px 12px 44px;background:#f7f7f7;border:1px solid #39393b;border-radius:0;color:var(--c-text-dark);font-size:15px;transition:all .2s ease}
.equipment-search-input:focus{outline:2px solid var(--c-primary);outline-offset:-2px;background:#fff}
.equipment-search-input::placeholder{color:#5d6979}
/* the jump link from the top of the band, and the search field it lands on:
   clear the fixed header so the field is not hidden under it on arrival */
.equipment-search-input{scroll-margin-top:130px}
.equipment-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#6b7789}
/* tabs are FILTERS, styled apart from both buttons (uppercase 800) and the
   category tiles (which navigate): sentence case, weight 600, quiet borders */
/* align-items, or the tabs stretch to whatever is tallest on their line —
   below 768px that is the educational pill and its info button, and eight
   category tabs grow to 57px for no reason anyone can see. */
/* min-height: the row is filled by the script, and the grid below must not
   move when the tabs land */
.equipment-category-tabs{display:flex;align-items:center;justify-content:left;gap:8px;margin-bottom:36px;flex-wrap:wrap;min-height:38px}
/* Pinned, like the rate options next to them: a control that inherits its
   line-height is a control whose height depends on the page it landed on,
   which is how the same pill came out 38.5px in one place and 57px in
   another. */
.equipment-category-tab{padding:9px 18px;line-height:1.2;border:1px solid #d6dce6;border-radius:3px;background:#fff;color:var(--c-text-body);font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease}
.equipment-category-tab:hover{border-color:var(--c-primary);color:var(--c-primary)}
.equipment-category-tab.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
/* The educational rate rides at the end of the category row. margin-left:auto
   pushes it to the right on a wide row and does nothing once the row wraps, so
   it never strands itself on a line of its own on a phone. */
/* and never break the label: squeezed into the hub's side-scrolling tab row
   it wrapped onto two lines and stood half again as tall as the tabs */
.eq-edu-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;line-height:1.2;white-space:nowrap;border:1px dashed var(--c-primary);border-radius:3px;background:#fff;color:var(--c-primary);font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease}
.eq-edu-pill:hover{background:#f0f8fc}
.eq-edu-pill.is-on{background:var(--c-primary);border-style:solid;color:#fff}
.eq-edu-sign{font-size:15px;line-height:1;font-weight:700}
.eq-edu-info{width:32px;height:32px;flex:0 0 auto;border:1px solid #d6dce6;border-radius:50%;background:#fff;color:var(--c-text-body);font-size:13px;font-weight:700;font-style:italic;cursor:pointer;line-height:1}
.eq-edu-info:hover{border-color:var(--c-primary);color:var(--c-primary)}
.eq-edu-panel{flex:1 1 100%;margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--c-text-body);max-width:62ch}
/* the price it replaces, kept visible: a discount nobody can see the size of
   is not worth offering */
.eq-was,.itm-was{color:var(--c-text-body);font-weight:400;font-size:.8em;margin-right:.15em}
.itm-price .itm-was{display:block;font-size:15px;margin:0 0 2px}
.eq-edu-flag{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-primary)}
.equipment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:48px;min-height:200px}
/* Pin the card's own line-height. It had none, so it took whatever it was
   nested in: 1.6 inside the hub's section markup, an inherited 25.8px flat
   on /catalogue/, where the badge then set an 11px label on a 25.8px line
   and stood 8px too tall. A card has to look the same wherever it is put.
   1.6 is the figure the hub was already resolving to, so nothing there
   moves. The badge and the price are pinned too rather than left to
   inherit again — those were the two that drifted. */
.equipment-card{line-height:1.6;display:flex;flex-direction:column;background:#fff;border:1px solid #d6dce6;border-top:4px solid var(--c-primary);border-radius:6px;box-shadow:0 2px 10px rgba(0,75,120,.06);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-top-color .2s ease}
.equipment-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,75,120,.13);border-top-color:var(--c-navy)}
.equipment-image{width:100%;height:180px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;color:#cbd5e1;font-size:2.5rem;position:relative;border-bottom:1px solid var(--c-border)}
.equipment-image img,.equipment-image picture{width:100%;height:100%}
.equipment-image img{object-fit:contain}
/* A photograph or a screenshot has no cut-out edge, so letterboxing it
   inside the card leaves a rim of panel down each side. Cover instead:
   it reaches both edges, and the transparent bands on an image that is
   wider than the box read as the vertical padding they are. */
.equipment-image img.is-bleed{object-fit:cover}

.equipment-content{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.equipment-category-badge{display:inline-block;align-self:flex-start;font-size:11px;line-height:1.6;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:0;background:#eef3f7;color:var(--c-primary-dark)}
.equipment-featured-badge{position:absolute;top:10px;right:10px;background:var(--c-navy);color:#fff;border-radius:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;z-index:1}
/* "New" is red because the rest of the shelf is blue and a second blue
   badge would not read as a different claim. Not the two reds already in
   play: #bd0000 marks a form error and #a92222 was once the destructive hover
   on an in-basket button, so a badge sharing either would borrow a meaning it
   does not have, and a clean mid red sits too close to that hover to be worth
   the risk. #a4133c leans crimson instead: unmistakably red beside this much
   blue, but read as an accent rather than an alert. White on it is 7.68:1,
   near the navy badge's 9.17 so the pair reads as a set, and it holds up
   over a busy product photo. Only one badge is ever rendered per card —
   see render_catalogue.py. */
.equipment-featured-badge.is-new{background:#a4133c}
/* Popular is the third claim a card can make, so it needs a third hue that
   survives being 11px in a corner. Navy and crimson are cool and warm; a
   deep green reads as neither at that size and stays clear of both. White
   on #1f6b4d is 6.42:1, which sits between the other two rather than
   shouting over them — the badge is reassurance, not an alarm. */
.equipment-featured-badge.is-popular{background:#1f6b4d}
.equipment-name{font-size:17px;font-weight:700;color:var(--c-navy);line-height:1.3;letter-spacing:-.01em}
.equipment-name a{color:inherit;text-decoration:none}
.equipment-name a:hover{color:var(--c-primary);text-decoration:underline}
/* three lines, not two: nine taglines were cut mid-sentence on a phone, and
   the sentence is the card's whole pitch */
.equipment-description{font-size:14px;color:var(--c-text-body);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
/* The narrowest supported phones have less text width. One extra line keeps
   the card's sentence intact instead of ending it halfway through the useful
   distinction between two pieces of kit. */
@media (max-width:359px){.equipment-description{-webkit-line-clamp:4}}
.equipment-price{font-size:18px;line-height:1.6;font-weight:800;color:var(--c-text-dark)}
.equipment-price span{font-size:13px;font-weight:400;color:var(--c-text-body)}
.equipment-basket-button{background:var(--c-primary);color:#fff;border:none;border-radius:3px;padding:11px 16px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:background .2s ease}
.equipment-basket-button:hover{background:var(--c-primary-dark)}
.equipment-basket-button.in-basket{background:var(--c-navy)}
.equipment-no-results{grid-column:1/-1;text-align:center;padding:48px 0;color:var(--c-text-body)}
.equipment-no-results-icon{font-size:2rem;margin-bottom:8px}
.equipment-no-results h3{color:var(--c-text-dark);font-size:18px;font-weight:700;margin-bottom:4px}
.equipment-pagination{display:none;justify-content:center;gap:6px;margin-bottom:48px}
.equipment-pagination-button{padding:9px 15px;border:1px solid #d6dce6;border-radius:3px;background:#fff;color:var(--c-text-dark);font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease}
.equipment-pagination-button:hover:not(.disabled){border-color:var(--c-primary);color:var(--c-primary)}
.equipment-pagination-button.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.equipment-pagination-button.disabled{opacity:.45;cursor:default}
.equipment-footer{text-align:center;padding:8px 0 16px;color:var(--c-text-body);font-size:16px}
.equipment-quote-button{display:inline-block;margin-top:14px;background:var(--c-primary);color:#fff!important;text-decoration:none!important;text-transform:uppercase;font-weight:800;font-size:14px;letter-spacing:.05em;padding:14px 26px;border-radius:3px;transition:background .2s}
.equipment-quote-button:hover{background:var(--c-primary-dark)}
/* loading skeletons: only reachable via the app's fetch fallback (the grid is
   normally server-rendered), but the markup showLoading() injects must not
   render unstyled if that path ever runs */
.equipment-loading-card{background:#fff;border:1px solid #d6dce6;border-radius:6px;overflow:hidden}
.equipment-loading-image{height:180px;background:linear-gradient(90deg,#f2f5f8 25%,#e9eef3 50%,#f2f5f8 75%);background-size:200% 100%;animation:eq-shimmer 1.4s infinite}
.equipment-loading-content{padding:20px;display:flex;flex-direction:column;gap:10px}
.equipment-loading-bar{height:12px;border-radius:3px;background:linear-gradient(90deg,#f2f5f8 25%,#e9eef3 50%,#f2f5f8 75%);background-size:200% 100%;animation:eq-shimmer 1.4s infinite}
.equipment-loading-bar.badge{width:30%}
.equipment-loading-bar.title{width:75%;height:16px}
.equipment-loading-bar.description{width:100%}
.equipment-loading-bar.price{width:40%}
.equipment-loading-bar.button{width:100%;height:36px}
@keyframes eq-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.equipment-error-message{grid-column:1/-1;text-align:center;padding:48px 0;color:var(--c-text-body)}
.equipment-error-message h3{color:var(--c-text-dark);font-weight:700;margin-bottom:6px}
.equipment-retry-button{margin-top:12px;background:var(--c-primary);color:#fff;border:none;border-radius:3px;padding:11px 20px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.equipment-retry-button:hover{background:var(--c-primary-dark)}

/* ------------------------------------------------------------- responsive */
@media (max-width:880px){
.a-wrap{grid-template-columns:1fr}
.a-rail{position:static;margin:0 0 32px;order:-1}
.a-facts>div{grid-template-columns:1fr;gap:4px}
}
@media (max-width:1100px){
.hire-cats-grid{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media (max-width:900px){
.hire-cats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
/* an odd ninth tile spans the pair rather than sitting alone in the left column */
.hire-cats-grid .s1t-tile:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:600px){
/* 600, not 768: an iPad in portrait has room for two columns, and one 705px
   column of 180px image boxes was a 10,000px page */
.equipment-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
/* One scrolling row rather than four wrapped ones. It only became safe
   again when the discount pill left this row: a pill appended after eight
   categories was a discount nobody would ever swipe to. */
.equipment-category-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  /* the row scrolls sideways, and a tab cut off at the edge was the only clue.
     Fade the edge instead; the script drops the fade once the row is scrolled
     to its end (.is-end) so the last tab is never dimmed for good. */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
  scrollbar-width:none}
.equipment-category-tabs::-webkit-scrollbar{display:none}
.equipment-category-tabs.is-end{-webkit-mask-image:none;mask-image:none}
.equipment-category-tab{scroll-snap-align:start}
.equipment-category-tab{flex-shrink:0}
}
@media (max-width:560px){
/* Two compact tiles a row rather than nine full-height ones stacked: at 375px
   the band ran to ~3,600px and the search box sat some 7,000px down the page.
   The tagline stays down to 480px and gives way to the heading alone below. */
.hire-cats-grid{grid-template-columns:1fr 1fr;gap:10px}
.hire-cats-grid .s1t-tile{padding:16px 14px 14px;border-radius:8px}
.hire-cats-grid .s1t-tile h3{font-size:16px;line-height:1.25;margin:0 0 6px}
.hire-cats-grid .s1t-tile p{font-size:13px;line-height:1.45;margin:0 0 10px}
.hire-cats-grid .s1t-arrow{font-size:10.5px;letter-spacing:.05em;white-space:nowrap}
}
@media (max-width:480px){
.hire-cats-grid .s1t-tile p{display:none}
}
/* the way down to the search box from the top of the band */
.eq-jump{margin:-6px 0 22px;font-size:15px}
.eq-jump a{color:var(--c-primary);font-weight:700;text-decoration:none}
.eq-jump a::after{content:"\2193";margin-left:6px}
.eq-jump a:hover{text-decoration:underline}
/* hover lift and arrow nudges are decoration: honour reduced motion */
@media (prefers-reduced-motion:reduce){
.equipment-card,.hire-card,.s1t-tile,.hire-card-arrow,.s1t-arrow{transition:none}
.equipment-card:hover,.hire-card:hover,.s1t-tile:hover{transform:none}
}

/* A catalogue card deep-links to its own line (#v-<rentmanId>). Clear the
   fixed header on arrival, and hold the line highlighted (:target) so the
   visitor sees which one their card meant. */
.itm-opt,.itm-size,.itm-fam,#check{scroll-margin-top:140px}
/* the header grows with the viewport (129px at 1920), so the sticky rail and
   the jump targets need more room on a big monitor */
@media (min-width:1600px){.a-rail{top:150px}.itm-opt,.itm-size,.itm-fam,#check{scroll-margin-top:170px}}

/* ------------------------------------------------ variant picker (option list)
   Product pages list their lines as options rather than table rows: a
   product is a real radio, an add-on a real checkbox, a cable's lengths a
   row of pills. The native inputs stay in the tree (keyboard, screen readers:
   one tab stop per group, arrow keys move) and the label draws the control.
   Category pages keep the plain .itm-rates table rules above; everything here
   is scoped to .itm-rates--pick. */
.itm-rates--pick{overflow:visible}
.itm-fam{border:0;padding:0;margin:0 0 20px;min-width:0}
.itm-fam legend{float:left;width:100%;padding:0;margin:0 0 10px;font-weight:700;font-size:16px;line-height:1.3;color:var(--c-navy)}
.itm-fam>.itm-opt:first-of-type{clear:both}
.itm-fam-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.itm-fam-nav a{display:inline-block;padding:7px 11px;border:1px solid #d6dce6;border-radius:3px;background:#fff;font-size:13px;font-weight:600;color:var(--c-primary);text-decoration:none}
.itm-fam-nav a:hover{border-color:var(--c-primary);background:#f0f8fc}
/* one option: a bordered row, the whole of it the label */
.itm-opt{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 8px;padding:12px 14px;background:#fff;border:1px solid #d6dce6;border-radius:4px}
.itm-opt:hover{border-color:#9fb3c8}
.itm-opt.is-on,.itm-opt:has(.itm-opt-in:checked){border-color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-primary);background:#f4fafd}
.itm-opt:target{border-color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-primary)}
/* the native control is kept in the tree (keyboard, AT) but drawn by the label */
.itm-opt-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.itm-opt-lab{position:relative;display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0;padding-left:34px;cursor:pointer}
.itm-opt-lab::before{content:"";position:absolute;left:0;top:50%;width:22px;height:22px;margin-top:-11px;box-sizing:border-box;border:2px solid #39393b;border-radius:50%;background:#f7f7f7}
.itm-opt:hover .itm-opt-lab::before{border-color:var(--c-primary)}
.itm-opt-in:checked+.itm-opt-lab::before{background:var(--c-primary);border-color:var(--c-primary);box-shadow:inset 0 0 0 4px #fff}
.itm-opt--add .itm-opt-lab::before{border-radius:3px}
.itm-opt--add .itm-opt-in:checked+.itm-opt-lab::before{box-shadow:none;background:var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1.5,5 4.5,8 10.5,1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.itm-opt-in:focus-visible+.itm-opt-lab{outline:2px solid var(--c-primary);outline-offset:8px;border-radius:2px}
.itm-opt-img{flex:0 0 64px;width:64px;height:48px;display:flex;background:#f7f7f7;border:1px solid var(--c-border);border-radius:3px;overflow:hidden}
.itm-opt-img img,.itm-opt-img picture{width:100%;height:100%;display:block}
.itm-opt-img img{object-fit:contain}
.itm-opt-txt{flex:1 1 auto;min-width:0}
.itm-opt-name{display:block;font-size:16px;line-height:1.35;color:var(--c-text-dark)}
.itm-opt-in:checked+.itm-opt-lab .itm-opt-name,.itm-opt.is-on .itm-opt-name{font-weight:700;color:var(--c-navy)}
.itm-opt-tag{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--c-text-body)}
.itm-badge{display:inline-block;margin-left:8px;padding:2px 7px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c-primary);background:#eaf6fb;border-radius:3px;vertical-align:2px}
.itm-opt-price{flex:0 0 auto;margin-left:auto;padding-left:12px;text-align:right;white-space:nowrap}
.itm-p{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--c-text-dark)}
.itm-opt-price small{display:block;font-size:12.5px;color:var(--c-text-body)}
.itm-opt--add .itm-p::before{content:"+ "}
.itm-p .itm-was{font-size:.8em}
/* add-ons: their own block after the products */
.itm-addons{margin-top:28px}
.itm-addons h3{margin:0 0 4px;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--c-navy)}
.itm-addons>p{margin:0 0 14px}
@media (min-width:881px){.itm-opt-price small{display:inline;margin-left:4px}}
@media (max-width:600px){
/* one scrolling row of chips on a phone, like the hub's tab row, rather than
   fourteen wrapped ones standing between the heading and the first cable */
.itm-fam-nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.itm-fam-nav::-webkit-scrollbar{display:none}
.itm-fam-nav a{flex-shrink:0;scroll-snap-align:start;white-space:nowrap}
}
/* lengths: one row per cable, each length a pill that is its own radio */
.itm-opt--sizes{align-items:flex-start}
.itm-opt--sizes .itm-opt-img{margin-top:2px}
.itm-sizes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.itm-size{position:relative}
.itm-size-lab{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;min-height:46px;padding:5px 10px;box-sizing:border-box;border:1px solid #d6dce6;border-radius:3px;background:#fff;cursor:pointer;line-height:1.15;white-space:nowrap}
.itm-size-lab b{font-size:14px;font-weight:700;color:var(--c-text-dark)}
.itm-size-lab .itm-p{font-size:12px;font-weight:600;letter-spacing:0;color:var(--c-text-body)}
.itm-size-lab .itm-was{font-size:1em}
.itm-size-lab:hover{border-color:var(--c-primary)}
.itm-opt-in:checked+.itm-size-lab{background:var(--c-primary);border-color:var(--c-primary)}
.itm-opt-in:checked+.itm-size-lab b,.itm-opt-in:checked+.itm-size-lab .itm-p,.itm-opt-in:checked+.itm-size-lab .itm-was{color:#fff}
.itm-opt-in:focus-visible+.itm-size-lab{outline:2px solid var(--c-primary);outline-offset:2px}
.itm-size:target .itm-size-lab{border-color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-primary)}
/* the chosen line, restated where the choice was made: only on narrow
   screens, where the rail is at the top of the page rather than beside the list */
.itm-pick-sum{display:none}
@media (max-width:880px){
.itm-pick-sum{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:8px 0 18px;padding:12px 14px;background:#fff;border:1px solid #d6dce6;border-top:4px solid var(--c-primary);border-radius:6px;box-shadow:0 2px 10px rgba(0,75,120,.06)}
.itm-pick-sum[hidden]{display:none}
.itm-pick-sum-img{flex:0 0 56px;width:56px;height:42px;display:flex;background:#f7f7f7;border-radius:3px;overflow:hidden}
.itm-pick-sum-img img,.itm-pick-sum-img picture{width:100%;height:100%;display:block}
.itm-pick-sum-img img{object-fit:contain}
.itm-pick-sum-txt{flex:1 1 120px;min-width:0;font-size:13.5px;line-height:1.35;color:var(--c-text-body)}
.itm-pick-sum-txt b{display:block;font-size:15px;color:var(--c-navy)}
.itm-pick-sum-adds{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.itm-pick-sum-price{text-align:right;white-space:nowrap}
.itm-pick-sum-price .itm-p{font-size:20px}
.itm-pick-sum-price small{display:block;font-size:12px;color:var(--c-text-body)}
.itm-pick-sum .itm-add{flex:1 1 100%;margin:4px 0 0;padding-top:12px}
}
@media (max-width:480px){
.itm-opt{gap:10px;padding:10px 12px}
.itm-opt-lab{gap:10px;padding-left:30px}
.itm-opt-img{flex-basis:48px;width:48px;height:36px}
.itm-opt-name{font-size:15px}
.itm-p{font-size:16px}
}
/* Windows high-contrast mode erases drawn backgrounds, so the native control
   is shown in place of the drawn one */
@media (forced-colors:active){
.itm-opt-in{position:static;opacity:1;width:auto;height:auto;margin:0 4px 0 0;pointer-events:auto}
.itm-opt-lab{padding-left:0}
.itm-opt-lab::before{display:none}
.itm-opt.is-on,.itm-opt:has(.itm-opt-in:checked){outline:2px solid CanvasText}
/* a pill is an inline span: without this its restored radio is pushed onto a
   line of its own, a row of circles floating above the lengths */
.itm-size{display:inline-flex;align-items:center;gap:4px}
.itm-opt-in:checked+.itm-size-lab{outline:2px solid Highlight;outline-offset:1px}
}
dl.a-facts { margin: 0; }
/* In-copy links need more than colour to be links. */
.itm-doc .a-main p a { text-decoration: underline; }
/* The availability widget occupies its space before JS reveals it, so the
   reveal is a visibility change rather than a layout shift. */
.eq-avail[hidden] { display: block; visibility: hidden; }

/* Off-screen cards skip layout and paint until scrolled near — the browser
   renders the grid as you approach it, not all 265 cards up front. The
   intrinsic size keeps the scrollbar honest for unrendered cards. */
.equipment-card { content-visibility: auto; contain-intrinsic-size: auto 440px; }

/* Browse shows the shelf's first two dozen; the rest are one click away. */
.equipment-show-all[hidden] { display: none; }
.equipment-show-all { display: block; margin: 28px auto 0; padding: 14px 32px; background: none; border: 1px solid #0075a3; color: #0075a3; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.equipment-show-all:hover { background: #0075a3; color: #fff; }
.equipment-show-all:focus-visible { outline: 2px solid #0075a3; outline-offset: 3px; }

/* The catalogue grid quotes daily rates on every card; this says what that means
   over a longer hire. Sits under the section heading, above the search box. */
.eq-cat-rates{max-width:60ch;margin:-4px 0 18px;font-size:14px;line-height:1.55;color:#4a5568}
@media (min-width:768px){.eq-cat-rates{margin:-8px 0 26px;font-size:14.5px;line-height:1.6}}
/* What the checked dates come to, above the availability answer. */
.eq-avail-price { margin: 16px 0 0; font-size: 15px; color: var(--c-text-dark); font-weight: 600; }
.eq-avail-price[hidden] { display: none; }

/* ---- /catalogue/ : the catalogue with nothing in front of it -------------
   With no hero and no standfirst, the controls are the first thing on the
   page, so they have to carry it. They were three rows that had each sized
   themselves independently — a 42px search field, 38px tabs, 44px toggle,
   and an educational pill shoved to the far right by margin-left:auto with
   nothing beside it. Here they are one toolbar on a matching baseline. Only
   the lean page is touched; the hub introduces its catalogue in prose and
   wants the lighter treatment. */
.eq-lean-head{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;
  overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.eq-lean-bar{background:#f7f9fb;border:1px solid #e2e8f0;border-radius:4px;
  padding:18px 20px 20px;margin:0 0 34px}
/* Only the surface differs on the lean page — layout is the shared rules'
   job, and these were quietly outranking them from a higher specificity. */
.eq-lean .equipment-controls{margin:0 0 14px}
.eq-lean .equipment-search-input{padding:12px 16px 12px 46px;background:#fff;
  border-color:#7f8b9c;font-size:15px}
.eq-lean .equipment-search-input:focus{border-color:var(--c-primary);outline:2px solid var(--c-primary);outline-offset:-2px;
  box-shadow:0 0 0 3px rgba(0,117,163,.14)}
.eq-lean .equipment-search-icon{left:16px}
/* the switch and the field share a row, so they share a height rather than
   each landing wherever their own padding put them */
/* what the price covers, next to the switch that chooses it */
.eq-lean .equipment-category-tabs{margin:0}
.eq-lean .equipment-category-tab{padding:9px 16px;border-color:#c3cddb}
/* It belongs with the categories, not exiled to the right margin — but not
   in the queue with them either. The tab row scrolls sideways on a phone, and
   a pill appended after the categories is a discount nobody ever sees. Give
   it the row below at every width, where it is always in view and reads as
   the different kind of control it is. */
/* A category tab and this pill do different jobs, and switched on they were
   the same solid blue — two identical controls, one filtering and one
   repricing. The dashed border stays on when it is on, so it keeps reading
   as the odd one out that it is. */
.eq-lean .eq-edu-pill{padding:9px 15px}
.eq-lean .eq-edu-pill.is-on{border-style:dashed;border-color:#fff}
.eq-lean .eq-edu-info{width:26px;height:26px}
.eq-lean .eq-edu-panel{margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0;
  max-width:70ch}

@media (max-width:640px){
  .eq-lean-bar{padding:14px 14px 16px;margin-bottom:26px}
}

/* ---- phones ------------------------------------------------------------
   iOS Safari zooms the page into any field whose text is under 16px and
   leaves it zoomed. Every hire-section field was 14-15px; the contact form
   (17.9px) never had the problem. Desktop keeps the designed sizes. */
@media (max-width:767px){
  .equipment-search-input,.eq-lean .equipment-search-input,.eq-rate-input,.eq-avail-field input,.eq-avail-field select{font-size:16px}
  .eq-rate-clear{padding:8px 6px}
}
/* the reserved availability box is for the script that fills it; on paper
   (and with no script) it is just a gap */
@media print{.eq-avail,.itm-quiet--check,.itm-fam-nav,.itm-pick-sum{display:none}
/* backgrounds are dropped when printing, so the chosen line is marked with
   ink: a thick ring on its control and a heavier border on the chosen pill */
.itm-opt-in:checked+.itm-opt-lab::before{border-width:7px;background:#fff}
.itm-opt-in:checked+.itm-size-lab{border-width:3px}}