/* ============================================================================
   browse.css — THE FLEET CATALOGUE
   The live Browse screen for /en/home-v4-browse. Hosted, so a change here is
   live with NO Webflow publish.

   Chosen by the company on 2026-08-24 from six directions (the set is kept at
   assets.moedatech.net/v/). It replaces the previous list-beside-a-map layout,
   which was rejected for reading as an Airbnb clone — a pattern built for
   browsing by desire, where hiring plant is procurement.

   Idea: the fleet is the asset. Machines shown large enough to judge, grouped
   by what they ARE, navigated by a category index in the margin. No map, no
   filter pills, no rounded feed cards, no card-list-beside-map split.

   NAMESPACING IS LOAD-BEARING. Every class is prefixed `fc-` and every rule is
   descended from `.fc`. The design's natural names — .bar .grid .body .hero
   .cta .note .tile .sub — all exist in Webflow's own stylesheet on this site,
   and an unprefixed version silently fought the site chrome.

   Previous version preserved as browse.css.airbnb-listmap.
   ============================================================================ */

.fc {
  --fc-pg:    #f3efea;
  --fc-tile:  #fffefc;
  --fc-ink:   #0e0f10;
  --fc-soft:  #3c3a37;
  --fc-mut:   #7b736a;
  --fc-line:  #ded4c7;
  --fc-line2: #ece4d9;
  --fc-cta:   #e65d00;   /* the site's CTA orange */
  --fc-cta-d: #c04d00;   /* pressed/hover, and the AA-safe fill */
  --fc-ok:    #147a4b;

  --fc-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;
  --fc-ease: cubic-bezier(.23, 1, .32, 1);
  --fc-gut:  clamp(18px, 3vw, 40px);

  /* Same cap approved for the previous layout: without one, an ultrawide puts
     the logo and the CTA a metre apart. One shared edge value keeps the sticky
     bar's contents aligned with the content column below it, since the bar is
     full-width for its background but its contents are not. */
  --fc-max:  2200px;
  --fc-edge: max(var(--fc-gut), calc((100% - var(--fc-max)) / 2 + var(--fc-gut)));

  /* SMOOTH, not sharp. The first version used 0px corners deliberately — a
     catalogue "plate" look — but the rest of the site is rounded, and a square
     grid inside a rounded site reads as unfinished rather than as a choice.
     One radius scale, matching the v4 language (cards ~18px, controls as
     pills), plus soft shadows instead of hard hairlines alone. */
  --fc-r:      18px;   /* cards, panels */
  --fc-r-media:14px;   /* the photo inside a card */
  --fc-r-ctl:  999px;  /* inputs, buttons, chips */
  --fc-r-sm:   10px;   /* small surfaces */

  --fc-sh:     0 1px 2px rgba(14,15,16,.04), 0 2px 8px -4px rgba(14,15,16,.10);
  --fc-sh-lift:0 2px 4px rgba(14,15,16,.05), 0 18px 40px -20px rgba(14,15,16,.30);

  display: block;
  background: var(--fc-pg);
  color: var(--fc-soft);
  font: 400 15px/1.55 var(--fc-font);
  -webkit-font-smoothing: antialiased;
}

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

.fc h1, .fc h2, .fc h3 {
  margin: 0;
  font-family: var(--fc-font);
  color: var(--fc-ink);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
}
.fc p { margin: 0; }
.fc ul { margin: 0; padding: 0; list-style: none; }
.fc a { color: inherit; text-decoration: none; }
.fc button { font: inherit; color: inherit; cursor: pointer; }
.fc img { display: block; }
.fc :focus-visible { outline: 2px solid var(--fc-ink); outline-offset: 2px; }

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

/* ---------------------------------------------------------------- top bar */
/* The bar element carries BOTH `fc` (for the tokens, since it lives outside
   the root) and `fc-bar`. `.fc` sets display:block, so the flex layout has
   to be restated here or the bar stacks vertically. */
.fc.fc-bar, .fc-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 62px; padding: 10px var(--fc-edge);
  background: rgba(243, 239, 234, .93);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--fc-line);
}
.fc-brand { flex: none; display: flex; align-items: center; }
/* 20px left the wordmark floating in a 62px bar. The bar has the room, so
   the mark takes it - tapered on narrow screens, where the bar wraps and a
   large logo would push the search box onto its own line sooner. */
.fc-brand img { height: clamp(24px, 2vw, 28px); width: auto; }
.fc-sp { flex: 1 1 auto; }

/* Scoped to the text input. As a bare `.fc-bar input` this also matched the
   filter checkboxes and stretched each to 300px — the collision is invisible
   in the source and obvious on screen. */
.fc-bar input[type="text"] {
  width: min(320px, 40vw); height: 42px; padding: 0 18px;
  border: 1px solid var(--fc-line); border-radius: var(--fc-r-ctl);
  box-shadow: var(--fc-sh);
  background: var(--fc-tile);
  font: 500 13.5px/1 var(--fc-font); color: var(--fc-ink);
}
.fc-bar input[type="text"]::placeholder { color: #a89e92; font-weight: 400; }
.fc-bar input[type="text"]:focus { outline: none; border-color: var(--fc-ink); }



.fc-clear {
  height: 36px; padding: 0 10px;
  border: 0; background: none;
  font-size: 12.5px; font-weight: 600; color: var(--fc-cta);
  text-decoration: underline; text-underline-offset: 3px;
}
/* Primary actions carry the brand orange, not near-black — black read as
   system chrome rather than as the site. Hover deepens rather than changing
   hue, so the button stays recognisably the same control. */
.fc-go {
  flex: none; padding: 13px 24px; border-radius: var(--fc-r-ctl);
  background: var(--fc-cta); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(192,77,0,.18), 0 8px 20px -10px rgba(192,77,0,.45);
  transition: background .15s ease, transform .15s var(--fc-ease);
}
.fc-go:hover { background: var(--fc-cta-d); }
.fc-go:active { transform: scale(.98); }


/* ------------------------------------------------------- custom controls */
/* Replaces two native <select>s ("All cities", "Any type") and two
   checkbox-in-a-pill filters. The native versions dropped an operating-system
   list into a rounded page and put a square checkbox inside a pill — two
   shapes arguing about one state. */
.fc-sel { position: relative; min-width: 0; }
.fc-sel-btn {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%; height: 42px; padding: 0 14px 0 18px;
  border: 1px solid var(--fc-line); border-radius: var(--fc-r-ctl);
  background: var(--fc-tile);
  font: 500 13.5px/1 var(--fc-font); color: var(--fc-mut);
  /* LOGICAL, not physical: `left` pinned the chosen value and the caret to
     the left of the control, so under RTL the text sat away from the edge
     the reader starts at, with dead space beside it. */
  text-align: start; white-space: nowrap;
  transition: border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.fc-sel-btn:hover:not(:disabled) { border-color: #c9bcab; }
.fc-sel-btn.fc-set { color: var(--fc-ink); font-weight: 600; }
.fc-sel-btn.fc-open {
  border-color: var(--fc-ink);
  box-shadow: 0 0 0 3px rgba(14,15,16,.06);
}
.fc-sel-btn:disabled { opacity: .55; cursor: not-allowed; }
.fc-sel-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.fc-sel-car { flex: none; display: grid; place-items: center; width: 16px; height: 16px; }
.fc-sel-car svg {
  width: 14px; height: 14px; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s var(--fc-ease);
}
.fc-sel-btn.fc-open .fc-sel-car svg { transform: rotate(180deg); }

/* The panel. Fixed, because the bar it hangs from is sticky. */
.fc-sel-panel {
  position: fixed; z-index: 820;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--fc-tile);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r);
  box-shadow: 0 2px 4px rgba(14,15,16,.05), 0 22px 48px -18px rgba(14,15,16,.36);
  opacity: 0; transform: scale(.98) translateY(-6px);
  transform-origin: 24px 0;
  transition: opacity .16s var(--fc-ease), transform .16s var(--fc-ease);
}
.fc-sel-panel[data-open] { opacity: 1; transform: none; }
.fc-sel-panel[data-closing] {
  opacity: 0; transform: scale(.99); transition-duration: .1s;
}
.fc-sel-list { overflow-y: auto; overscroll-behavior: contain; padding: 7px; }
.fc-sel-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 12px;
  font-size: 13.5px; color: var(--fc-soft);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
/* One highlight driven by BOTH keyboard and mouse, so arrowing and hovering
   cannot disagree about which row is current. */
.fc-sel-row.fc-at { background: #f4f0ea; }
.fc-sel-row.fc-on { color: var(--fc-ink); font-weight: 600; }
.fc-sel-tick { flex: none; width: 15px; height: 15px; display: grid;
  place-items: center; opacity: 0; }
.fc-sel-row.fc-on .fc-sel-tick { opacity: 1; }
.fc-sel-tick svg {
  width: 14px; height: 14px; fill: none; stroke: var(--fc-cta);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.fc-sel-lab { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fc-sel-n {
  flex: none; font-style: normal; font-size: 11.5px; color: var(--fc-mut);
  font-variant-numeric: tabular-nums;
}

/* Toggle: the pill IS the control. A tick slides in when it is on, and the
   pill inverts — one shape, one state, readable at a glance. */
.fc-tog {
  display: inline-flex; align-items: center; gap: 0;
  height: 42px; padding: 0 18px;
  border: 1px solid var(--fc-line); border-radius: var(--fc-r-ctl);
  background: var(--fc-tile);
  font-size: 13px; font-weight: 500; color: var(--fc-soft);
  cursor: pointer; white-space: nowrap;
  transition: background .16s var(--fc-ease), color .16s var(--fc-ease),
              border-color .16s var(--fc-ease), padding .16s var(--fc-ease);
}
.fc-tog:hover { border-color: #c9bcab; }
.fc-tog-tick {
  display: grid; place-items: center;
  width: 0; height: 15px; margin-right: 0;
  overflow: hidden;
  transition: width .16s var(--fc-ease), margin-right .16s var(--fc-ease);
}
.fc-tog-tick svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.fc-tog[aria-pressed="true"] {
  background: var(--fc-ink); border-color: var(--fc-ink); color: #fff;
  font-weight: 600; padding-left: 14px;
}
.fc-tog[aria-pressed="true"] .fc-tog-tick { width: 15px; margin-right: 8px; }

/* The finder uses the same component, sized up for a form row. */
.fc-field .fc-sel-btn {
  height: 48px; padding: 0 16px 0 18px;
  background: #fbf8f4; font-size: 14.5px;
}
.fc-field .fc-sel-btn:focus-visible { background: #fff; }

/* ------------------------------------------------------------- prism cover */
/* Header study 5. The title rides a turning four-sided bar, so the directory
   announces itself as somewhere you look things up rather than as another
   marketing panel - and it does that through movement and scale rather than
   through a change of colour.

   It sits on the page's own ground rather than on a dark band. The depth is
   carried by the rotation and by the faces taking different tones as they
   turn - it does not need a change of background to read as a solid. */
.fc-prism {
  --fc-ph: clamp(56px, 9vw, 116px);   /* the bar's section: height AND depth */
  height: var(--fc-ph);
  perspective: 1200px;
  display: grid; place-items: center;
}
.fc-rig {
  position: relative; transform-style: preserve-3d;
  height: var(--fc-ph); width: min(92vw, 900px);
  /* FINITE, deliberately. An endlessly moving headline is both a WCAG 2.2.2
     problem and an irritation on a page people come back to; two full turns
     show every face twice and then it rests on the title for good. */
  /* Strong ease-in-out per segment, so each quarter-turn accelerates and
     settles like a mechanism rather than sliding at constant speed. */
  /* Loops for good, but RESTS ON THE TITLE for about four seconds of every
     turn - the three numbers get a beat each, the name of the thing gets the
     long one. 0% and 100% are both face one (-360deg renders as 0deg), so the
     loop closes on the title with no visible seam. Hover pauses it, and anyone
     who has asked for less motion gets it stopped. */
  animation: fc-spin 16s cubic-bezier(.77, 0, .175, 1) infinite both;
}
.fc-prism:hover .fc-rig { animation-play-state: paused; }

/* Each face is one side of a solid bar: rotated a quarter turn from the last
   and pushed out by half the section, so the four of them meet at the edges
   instead of cross-fading through one another. */
.fc-rig .fc-face {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  backface-visibility: hidden;
  font-weight: 900;
  font-size: clamp(30px, 6.4vw, 84px);
  letter-spacing: -.05em; line-height: 1;
  white-space: nowrap;
  /* the flat-cover heading rules do not apply to a face */
  max-width: none;
  /* OPAQUE, and this is structural rather than cosmetic. Text alone gives the
     bar no surface, so the far side shows straight through the near one and
     mid-turn you read two headlines stacked over each other. A solid panel per
     face is what makes the four behave as one object. The fill is the page-s
     own ground, so the panels are invisible except where they occlude. */
  background: var(--fc-pg);
}
.fc-rig .fc-f1 { transform: rotateX(0deg)   translateZ(calc(var(--fc-ph) / 2)); color: var(--fc-ink); }
.fc-rig .fc-f2 { transform: rotateX(90deg)  translateZ(calc(var(--fc-ph) / 2)); color: var(--fc-cta); }
.fc-rig .fc-f3 { transform: rotateX(180deg) translateZ(calc(var(--fc-ph) / 2)); color: var(--fc-ink); }
.fc-rig .fc-f4 { transform: rotateX(270deg) translateZ(calc(var(--fc-ph) / 2)); color: var(--fc-ink); }

/* Four dwells and four quarter-turns. A constant rotation is decoration; this
   holds each face long enough to actually read it. */
/* 2.6s on each face, and 0.42s to turn between them. The first draft spent
   0.84s turning, which is slow enough that the halfway point - where two faces
   genuinely meet at an edge, as they would on a real bar - sat on screen long
   enough to read as two headlines rather than as one object turning. */
/* Each face holds still, then the bar turns a quarter. The LAST step used to
   arrive at the title in the final 3.5% of the cycle with no pause at all, so
   the title got no dwell of its own before the animation ended on it. It now
   lands at 88% and holds to 100%, which - with fill-mode `both` - is the frame
   the bar keeps for good. */
/* 16s cycle. The title holds from 84% round through 0% to 8% - 24% of the
   turn, about 3.8 seconds - while each number holds 14% (~2.2s). The quarter
   turns take 8-10% each. */
@keyframes fc-spin {
  0%,    8% { transform: rotateX(0deg); }      /* the title */
  16%,  30% { transform: rotateX(-90deg); }
  38%,  52% { transform: rotateX(-180deg); }
  60%,  74% { transform: rotateX(-270deg); }
  84%, 100% { transform: rotateX(-360deg); }   /* the title again */
}

@media (prefers-reduced-motion: reduce) {
  .fc-rig { animation: none; transform: none; }
  .fc-rig .fc-f2, .fc-rig .fc-f3, .fc-rig .fc-f4 { display: none; }
}

/* ------------------------------------------------------------------ cover */
/* A catalogue opens with a title page, not a search box. Centred, and given
   real air — the width is held by the lede, not by the heading. */
.fc-cover {
  padding: clamp(48px, 7vw, 104px) var(--fc-edge) clamp(34px, 4.5vw, 60px);
  text-align: center;
}
.fc-kicker {
  margin-bottom: 20px;
  font: 600 11px/1 var(--fc-font);
  letter-spacing: .22em; text-transform: uppercase; color: var(--fc-mut);
}
/* 8.5vw put a two-word heading edge to edge — 1,345px of a 1,425px viewport,
   which reads as shouting rather than as scale. Held back so the words sit
   inside a measure with air either side. */
.fc-cover h1 {
  font-size: clamp(38px, 6vw, 76px);
  letter-spacing: -.04em;
  line-height: 1;
  max-width: 22ch;
  margin: 0 auto;
}
.fc-cover h1 em { font-style: normal; color: var(--fc-cta); }
.fc-lede { margin: 18px auto 0; max-width: 62ch; }

/* Figures set as a measured row rather than a dashboard. Hairline separators
   between them, so it reads as one line of record. */
.fc-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 0;
  margin: clamp(28px, 4vw, 52px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--fc-line);
  max-width: 900px;
}
.fc-stats div {
  padding: 0 clamp(14px, 2.4vw, 30px);
  border-left: 1px solid var(--fc-line2);
}
.fc-stats div:first-child { border-left: 0; }
/* Intro copy. It exists for the crawler as much as the reader, so it is real
   prose about real coverage — not a tagline. */
.fc-lede {
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6;
  color: var(--fc-mut);
}

/* The category list in the server-rendered cover. This is the page's actual
   keyword surface, so it is real text and real links, never a script-built
   menu. It doubles as a jump list for the reader. */
.fc-catnav { margin-top: clamp(22px, 3vw, 34px); }
.fc-catnav h2 {
  margin-bottom: 10px;
  font: 600 10.5px/1 var(--fc-font);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-mut);
}
.fc-catnav ul {
  display: grid; gap: 2px 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
}
.fc-catnav a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; font-size: 13px; color: var(--fc-soft);
  border-bottom: 1px solid transparent;
}
.fc-catnav a b { font-weight: 500; }
.fc-catnav a i {
  font-style: normal; margin-left: auto;
  font-size: 11px; color: var(--fc-mut);
  font-variant-numeric: tabular-nums;
}
.fc-catnav a:hover { color: var(--fc-ink); border-bottom-color: var(--fc-line); }

.fc-stats b {
  display: block;
  font: 600 clamp(21px, 2.5vw, 32px)/1 var(--fc-font);
  color: var(--fc-ink); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.fc-stats span { font-size: 12px; color: var(--fc-mut); }

/* ------------------------------------------------------------ size finder */
/* "I need a 20 tonne excavator" is how this gets asked. Neither a category
   list nor a text box answers it, so this does: pick the machine, then the
   capacity — and the capacity options are built FROM the chosen machine, so
   every one is real and none leads to an empty result. */
.fc-find {
  max-width: min(1120px, calc(100% - 2 * var(--fc-gut)));
  margin: 0 auto clamp(30px, 4vw, 56px);
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  background: var(--fc-tile);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r);
  box-shadow: var(--fc-sh);
}
/* ── the wordmark, now inside the panel ─────────────────────────
   The animated bar used to sit on the page background above a separately
   titled box. It moved in here so the panel IS the public directory rather
   than a control under it, which means two things have to follow it: the
   faces are filled with the PAGE colour to make the bar solid, so inside a
   white panel they have to take the panel's fill instead or the bar reads as
   a grey stripe; and it gets the top of the panel to itself. */
.fc-find .fc-prism {
  --fc-ph: clamp(62px, 10vw, 132px);
  margin: clamp(2px, 1vw, 10px) 0 clamp(14px, 1.8vw, 22px);
}
.fc-find .fc-rig .fc-face { background: var(--fc-tile); }
.fc-find .fc-rig { width: min(100%, 860px); }
.fc-find .fc-rig .fc-face { font-size: clamp(32px, 6.8vw, 92px); }

.fc-find-h { text-align: center; margin-bottom: 18px; }
.fc-find-h h2 { font-size: clamp(19px, 2vw, 25px); letter-spacing: -.03em; }
.fc-find-h p { margin-top: 6px; font-size: 13.5px; color: var(--fc-mut); }

.fc-find-r {
  display: grid;
  /* machine · capacity · from · until · calculate */
  grid-template-columns:
    minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .82fr) minmax(0, .82fr) auto;
  gap: 12px; align-items: end;
}
.fc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-field > span {
  font: 600 10.5px/1 var(--fc-font);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fc-mut);
  padding-left: 2px;
}

.fc-find-go {
  height: 48px; padding: 0 28px;
  border: 0; border-radius: var(--fc-r-ctl);
  background: var(--fc-cta); color: #fff;
  font: 600 14.5px/1 var(--fc-font); letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(192,77,0,.18), 0 8px 20px -10px rgba(192,77,0,.45);
  transition: background .15s ease, transform .15s var(--fc-ease);
}
.fc-find-go:hover { background: var(--fc-cta-d); }
.fc-find-go:active { transform: scale(.98); }

/* The answer, before you commit to it. Empty until a machine is chosen, so it
   never occupies space with nothing to say. */
.fc-find-out:empty { display: none; }
.fc-find-out {
  margin-top: 15px; padding-top: 14px;
  border-top: 1px solid var(--fc-line2);
  text-align: center;
  font-size: 14px; color: var(--fc-mut);
}
.fc-find-out b { color: var(--fc-ink); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.fc-out-l1 { font-size: 14px; }
.fc-out-l2 { margin-top: 5px; font-size: 13px; }
.fc-find-out em { font-style: normal; color: #9a9187; }

/* The native input is still in the DOM holding the value, but out of sight.
   Kept in the layout rather than display:none so it stays a real form field. */
.fc-date-hid {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The visible field. Deliberately identical to the selects beside it - three
   controls in one row that agreed on nothing would be worse than any of them
   being wrong. */
.fc-dbtn {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%; height: 42px; padding: 0 14px 0 17px;
  border: 1px solid var(--fc-line); border-radius: var(--fc-r-ctl);
  background: var(--fc-tile);
  font: 500 13.5px/1 var(--fc-font); color: var(--fc-mut);
  /* LOGICAL, not physical: `left` pinned the chosen value and the caret to
     the left of the control, so under RTL the text sat away from the edge
     the reader starts at, with dead space beside it. */
  text-align: start; white-space: nowrap;
  transition: border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.fc-dbtn:hover { border-color: #c9bcab; }
.fc-dbtn.fc-set {
  color: var(--fc-ink); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fc-dbtn.fc-open, .fc-dbtn:focus-visible {
  outline: 0; border-color: var(--fc-ink);
  box-shadow: 0 0 0 3px rgba(14,15,16,.06);
}
.fc-dbtn-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.fc-dbtn-i { flex: none; display: grid; place-items: center; }
.fc-dbtn-i svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round;
}

/* ---------------------------------------------------------------- calendar */
/* Ours, because Chrome's own popup cannot be reached by CSS. Same surface as
   the select panels: the same fill, hairline, radius and lift, so opening a
   date reads as the same family of object as opening a dropdown. */
.fc-cal {
  position: fixed; z-index: 830;
  padding: 15px 16px 13px;
  background: var(--fc-tile);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r);
  box-shadow: var(--fc-sh-lift);
  opacity: 0; transform: translateY(-6px) scale(.985);
  transform-origin: top left;
  transition: opacity .16s var(--fc-ease), transform .16s var(--fc-ease);
}
.fc-cal[data-open] { opacity: 1; transform: none; }
.fc-cal[data-closing] { opacity: 0; transform: translateY(-6px) scale(.985); }

/* Month names sit centred over their own grid; the arrows are pinned to the
   outer edges so they never shift as the month name changes length. */
.fc-cal-hd {
  position: relative; display: flex; gap: 22px;
  align-items: center; margin-bottom: 12px;
}
.fc-cal-mn {
  width: 252px; text-align: center;
  font: 600 13.5px/1 var(--fc-font); color: var(--fc-ink);
  letter-spacing: -.01em;
}
.fc-cal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--fc-line); border-radius: 999px;
  background: var(--fc-tile); color: var(--fc-soft);
  transition: border-color .14s ease, color .14s ease, opacity .14s ease;
}
.fc-cal-l { left: -4px; }
.fc-cal-r { right: -4px; }
.fc-cal-nav svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.fc-cal-nav:hover:not(:disabled) { border-color: var(--fc-ink); color: var(--fc-ink); }
.fc-cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.fc-cal-ms { display: flex; gap: 22px; }
.fc-cal-m { width: 252px; }
.fc-cal-w, .fc-cal-g { display: grid; grid-template-columns: repeat(7, 36px); }
.fc-cal-w span {
  text-align: center; padding-bottom: 7px;
  font: 600 10px/1 var(--fc-font);
  letter-spacing: .06em; text-transform: uppercase; color: var(--fc-mut);
}

/* Zero gap between cells on purpose: the range shading has to run as one
   unbroken band, and a gap would comb it into stripes. */
.fc-cal-d {
  position: relative; height: 36px; border: 0; background: transparent;
  font: 500 13px/1 var(--fc-font); color: var(--fc-soft);
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}
.fc-cal-d > span { position: relative; z-index: 2; }
.fc-cal-d:disabled { color: #c6bcae; cursor: not-allowed; }

/* ::before is the band, ::after is the disc. Two layers because the endpoints
   need a round cap sitting on top of a square-ended band. */
.fc-cal-d::before { content: ''; position: absolute; inset: 3px 0; z-index: 0; }
.fc-cal-d.fc-in::before { background: #f7e7d7; }
.fc-cal-d.fc-in.fc-s::before { border-radius: 999px 0 0 999px; }
.fc-cal-d.fc-in.fc-e::before { border-radius: 0 999px 999px 0; }
.fc-cal-d.fc-in.fc-s.fc-e::before { border-radius: 999px; }

.fc-cal-d:not(:disabled):hover::after {
  content: ''; position: absolute; inset: 3px; z-index: 1;
  border-radius: 999px; background: rgba(14,15,16,.055);
}
.fc-cal-d.fc-today:not(.fc-sel)::after {
  content: ''; position: absolute; inset: 3px; z-index: 1;
  border-radius: 999px; border: 1px solid #d9cab7; background: transparent;
}
.fc-cal-d.fc-sel::after {
  content: ''; position: absolute; inset: 3px; z-index: 1;
  border-radius: 999px; background: var(--fc-cta-d); border: 0;
}
.fc-cal-d.fc-sel { color: #fff; font-weight: 600; }
.fc-cal-d:focus-visible { outline: 0; }
.fc-cal-d:focus-visible > span {
  box-shadow: 0 0 0 2px var(--fc-tile), 0 0 0 4px var(--fc-ink);
  border-radius: 999px;
}

.fc-cal-f {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--fc-line2);
}
.fc-cal-sum { font-size: 12.5px; color: var(--fc-mut); }
.fc-cal-sum b {
  color: var(--fc-ink); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fc-cal-clr {
  flex: none; border: 0; background: transparent; padding: 4px 2px;
  font: 600 12.5px/1 var(--fc-font); color: var(--fc-mut);
  text-decoration: underline; text-underline-offset: 3px;
}
.fc-cal-clr:hover { color: var(--fc-ink); }

@media (prefers-reduced-motion: reduce) {
  .fc-cal { transition: opacity .12s ease; transform: none; }
  .fc-cal[data-open], .fc-cal[data-closing] { transform: none; }
}

/* ---- the estimate itself.
   Two halves on purpose: the figure, and the reasoning behind the figure. The
   reasoning is not fine print — a number with no stated basis is the thing
   that turns an estimate into a promise nobody made. */
.fc-quote {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px); align-items: center;
  margin-top: 14px; padding: clamp(16px, 1.8vw, 22px);
  text-align: start;
  background: linear-gradient(170deg, #fff9f3 0%, #fdf4ec 100%);
  border: 1px solid #f0dcc8;
  border-radius: var(--fc-r);
}
/* the refusal variant: no figure, so the reasoning takes the full width */
.fc-quote-none {
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(170deg, #fbf9f6 0%, #f6f2ec 100%);
  border-color: var(--fc-line);
}
.fc-quote-fig { display: flex; flex-direction: column; gap: 4px; }
.fc-quote-lbl {
  font: 600 10.5px/1 var(--fc-font);
  letter-spacing: .12em; text-transform: uppercase; color: #a8734a;
}
.fc-quote-fig > b {
  font: 700 clamp(21px, 2.7vw, 31px)/1.05 var(--fc-font);
  letter-spacing: -.03em; color: var(--fc-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fc-quote-per {
  font-size: 12.5px; color: var(--fc-mut);
  font-variant-numeric: tabular-nums;
}
.fc-quote-how { font-size: 12.8px; line-height: 1.5; color: var(--fc-soft); }
.fc-quote-how b { font-weight: 600; color: var(--fc-ink); }
.fc-quote-how em { font-style: normal; color: #9a8a78; }
.fc-quote-cta {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; height: 40px; padding: 0 22px;
  border-radius: var(--fc-r-ctl);
  background: var(--fc-cta-d); color: #fff;
  font: 600 13.5px/1 var(--fc-font); text-decoration: none;
  transition: background .15s ease, transform .15s var(--fc-ease);
}
.fc-quote-cta:hover { background: #a54200; }
.fc-quote-cta:active { transform: scale(.98); }

@media (max-width: 1000px) {
  /* the dates pair off on their own row rather than crushing to 90px each */
  .fc-find-r { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-find-go { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 700px) {
  .fc-find-r { grid-template-columns: minmax(0, 1fr); }
  .fc-quote { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .fc-quote-cta { justify-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-find-go, .fc-quote-cta { transition: background .15s ease; }
  .fc-find-go:active, .fc-quote-cta:active { transform: none; }
}

/* ------------------------------------------------------------------ shell */
.fc-wrap {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding: 0 var(--fc-edge) 90px;
  align-items: start;
}

/* The index is the spine of a catalogue: it lives in the margin and moves the
   document, rather than querying it. */
/* The column starts level with the hairline under the first section heading,
   so the list and the grid share one baseline instead of the sidebar floating
   up on its own. The value is the heading's own height plus its padding. */
.fc-idx { position: sticky; top: 80px; margin-top: var(--fc-idx-drop, 96px); }
@media (max-width: 1020px) { .fc-idx { margin-top: 0; } }
.fc-idx h2 {
  margin-bottom: 9px;
  font: 600 10.5px/1 var(--fc-font);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-mut);
}
.fc-idx a {
  display: flex; align-items: baseline; gap: 7px;
  padding: 3px 0; font-size: 12.5px; color: var(--fc-mut);
}
.fc-idx a b {
  flex: 1 1 auto; font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-idx a i {
  font-style: normal; font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.fc-idx a:hover b, .fc-idx a.fc-on b { color: var(--fc-ink); }
.fc-idx a.fc-on b { font-weight: 700; }

/* ---------------------------------------------------------------- section */
.fc-sec { padding-top: clamp(34px, 4.6vw, 64px); scroll-margin-top: 80px; }
.fc-sechead {
  display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 20px;
  border-bottom: 1px solid var(--fc-ink);
}
.fc-sechead h2 {
  font-size: clamp(24px, 3.2vw, 42px);
  letter-spacing: -.04em;
}
.fc-sechead i {
  font-style: normal;
  font: 500 12px/1.4 var(--fc-font); color: var(--fc-mut);
  font-variant-numeric: tabular-nums;
}

/* Moved out of the foot of the section and into its head, on the right: it
   says how much more there is BEFORE you scroll past eight tiles, and it is
   the quickest way out of a category you do not want. */
.fc-showall {
  /* margin-inline-start, not margin-left: this pushes the link to the far end of
     the section head, which is the RIGHT in English and the LEFT in Arabic. With
     the physical margin-left it stayed pinned beside the heading in Arabic -
     "شاهد الـ185 كلها على معداتك" sat right next to "حفار" instead of across
     from it. 2026-09-07. */
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none;
  font: 600 13px/1 var(--fc-font); color: var(--fc-ink);
  border-bottom: 1px solid var(--fc-line);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color .14s ease, border-color .14s ease;
}
.fc-showall:hover { color: var(--fc-cta); border-bottom-color: var(--fc-cta); }
/* Once the page is showing everything it will ever show, the same control
   stops pretending and hands over to the app. */
.fc-showall-app { color: var(--fc-cta); border-bottom-color: var(--fc-cta); }
.fc-arrow { transition: transform .16s var(--fc-ease); font-weight: 400; }
.fc-showall:hover .fc-arrow { transform: translateX(3px); }

/* The category's real rate range — stated ONCE, where it is true of the whole
   section. It used to be printed on every tile, which meant eight identical
   figures in a row: honest, but it read as a bug and it buried the machines
   that do carry a published price. */
.fc-band {
  margin-left: auto;
  padding: 5px 11px;
  background: #fbf5ee; border: 1px solid #eadfd0;
  font-size: 12px; color: var(--fc-mut);
}
.fc-band b {
  color: var(--fc-ink); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fc-band em { font-style: normal; color: #9c9184; }

.fc-grid {
  display: grid; gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}

/* ------------------------------------------------------------------- tile */
/* Square corners and a hairline: a plate in a catalogue, not a rounded card
   in a feed. */
.fc-tile {
  display: flex; flex-direction: column;
  background: var(--fc-tile); border: 1px solid var(--fc-line);
  border-radius: var(--fc-r); box-shadow: var(--fc-sh); overflow: hidden;
  transition: border-color .18s var(--fc-ease), box-shadow .18s var(--fc-ease),
              transform .18s var(--fc-ease);
}
@media (hover: hover) and (pointer: fine) {
  .fc-tile:hover {
    border-color: var(--fc-ink);
    box-shadow: var(--fc-sh-lift);
    transform: translateY(-3px);
  }
}
.fc-tile:focus-within { border-color: var(--fc-ink); }

.fc-ph {
  position: relative; aspect-ratio: 4 / 3;
  margin: 7px 7px 0; border-radius: var(--fc-r-media);
  background: #ece5db; overflow: hidden;
}
.fc-ph img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--fc-ease);
}
.fc-tile:hover .fc-ph img { transform: scale(1.035); }

.fc-noph {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 5px;
  padding: 10px; text-align: center;
  color: #a89e92; font-size: 10.5px; font-weight: 500;
}
.fc-noph svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.fc-vf {
  position: absolute; top: 10px; inset-inline-start: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 3px rgba(20, 18, 16, .18);
}
.fc-vf svg { width: 20px; height: 20px; display: block; }
.fc-vf svg path { fill: var(--fc-ok); }
.fc-vf svg .fc-vf-tick {
  fill: none; stroke: #fff; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}

/* How many identical units the supplier holds. Sits opposite the verified mark
   so the two never collide, and reads as a fact rather than a badge. */
.fc-units {
  position: absolute; top: 10px; inset-inline-end: 10px;
  padding: 4px 10px; border-radius: var(--fc-r-ctl);
  background: rgba(14, 15, 16, .88);
  font: 600 10px/1 var(--fc-font);
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.fc[dir="rtl"] .fc-vf { left: auto; right: 9px; }
.fc[dir="rtl"] .fc-units { right: auto; left: 9px; }
.fc[dir="rtl"] .fc-idx a, .fc[dir="rtl"] .fc-sechead { text-align: right; }
.fc[dir="rtl"] .fc-band { margin-left: 0; margin-right: auto; }

.fc-body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 14px 15px 15px;
}
.fc-body h3 {
  font-size: 16px; letter-spacing: -.025em; line-height: 1.22;
}
.fc-body h3 a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Supplier line: mark then name. For the 71 companies registered in Arabic
   only, the mark is what a contractor recognises on the English page. */
.fc-sub {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 12px; color: var(--fc-mut);
  min-width: 0;
}
.fc-sub span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.fc-suplogo {
  flex: none; width: 20px; height: 20px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--fc-line2);
  border-radius: 6px; padding: 2px;
}

/* Specs set as one typographic line with dot separators, not a row of boxed
   chips. The chips were the single thing that made these read as an unstyled
   template — six bordered rectangles per card, competing with the photo and
   the price for attention while carrying the least information. */
/* The specification now sits ON the photograph, in the same chip language as
   the verified badge, with a short scrim so white text survives a pale sky. */
.fc-spec {
  position: absolute; inset-inline: 8px; bottom: 8px;
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 0; padding: 0; list-style: none;
  z-index: 1;
}
.fc-spec li {
  padding: 3px 8px; border-radius: var(--fc-r-ctl);
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 1px 2px rgba(20, 18, 16, .14);
  font: 600 10.5px/1.35 var(--fc-font);
  color: var(--fc-ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fc-ph::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 44%;
  background: linear-gradient(to top, rgba(12, 12, 13, .5), transparent);
  pointer-events: none;
}
.fc-ph:has(.fc-noph)::after { display: none; }

/* A hairline separates the identity of the machine from its commercial terms,
   so the eye can stop at either. */
.fc-foot {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 7px; margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--fc-line2);
}
.fc-rate-note {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; color: #a89e92;
}
.fc-rate-note.fc-rate-real { color: var(--fc-ok); }
.fc-rate-note.fc-rate-real::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.fc-price b {
  display: block;
  font: 600 18px/1.15 var(--fc-font); color: var(--fc-ink);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.fc-price .fc-per { font-weight: 500; font-size: 11.5px; color: var(--fc-mut); }
.fc-price small {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
}
/* A published rate gets a dot; the absence of one does not. */
.fc-price.fc-real small { color: var(--fc-ok); }
.fc-price.fc-real small::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--fc-ok); flex: none;
}
.fc-price.fc-none b { color: var(--fc-mut); font-weight: 500; font-size: 16px; }
.fc-price.fc-none small { color: #a89e92; }

.fc-ask {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  padding: 9px 14px; border-radius: var(--fc-r-ctl);
  border: 1px solid var(--fc-line); background: transparent;
  font-size: 12px; font-weight: 600; color: var(--fc-ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fc-ask b {
  font: 600 17px/1.15 var(--fc-font);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.fc-ask .fc-per { font-weight: 500; font-size: 11.5px; color: var(--fc-mut); }
.fc-ask:hover b, .fc-ask:hover .fc-per { color: inherit; }
.fc-ask:hover { background: var(--fc-cta); border-color: var(--fc-cta); color: #fff; }
.fc-ask:active { background: var(--fc-cta-d); border-color: var(--fc-cta-d); }
/* The card's own hover promotes its action, so the button is not shouting on
   every tile at once. */
@media (hover: hover) and (pointer: fine) {
  .fc-tile:hover .fc-ask { border-color: var(--fc-ink); }
}

/* ------------------------------------------------------------------ misc */
.fc-more { margin-top: 16px; }
.fc-more button {
  padding: 9px 18px;
  border: 1px solid var(--fc-line); background: var(--fc-tile);
  font-size: 13px; font-weight: 600; color: var(--fc-ink);
}
.fc-more button:hover { border-color: var(--fc-ink); }

.fc-empty { padding: 56px 0; max-width: 52ch; }
.fc-empty h2 { font-size: 24px; }
.fc-empty p { margin-top: 10px; color: var(--fc-mut); }
.fc-empty button {
  margin-top: 16px; padding: 12px 22px; border-radius: var(--fc-r-ctl);
  border: 0; background: var(--fc-cta); color: #fff;
  font-size: 13px; font-weight: 600;
}

/* Provenance, in the layout rather than a footnote nobody reaches. */
.fc-note {
  margin-top: 44px; padding: 18px 20px; border-radius: var(--fc-r);
  background: var(--fc-tile); border: 1px solid var(--fc-line);
  font-size: 12.5px; color: var(--fc-mut);
}
.fc-note::before {
  content: "Provenance";
  display: block; margin-bottom: 4px;
  font: 600 9.5px/1 var(--fc-font);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fc-cta);
}
.fc-note b { color: var(--fc-ink); font-weight: 600; }

/* Skeleton sized to the real tile, so the grid does not jump when data lands. */
.fc-skel {
  display: grid; gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  padding: 40px var(--fc-edge) 80px;
}
.fc-skel div {
  height: 320px; border-radius: var(--fc-r);
  background: linear-gradient(100deg, #efe9e1 30%, #f7f4f0 50%, #efe9e1 70%);
  background-size: 220% 100%;
  animation: fc-shim 1.15s linear infinite;
}
@keyframes fc-shim {
  from { background-position: 100% 0 }
  to   { background-position: -100% 0 }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 940px) {
  .fc-wrap { grid-template-columns: minmax(0, 1fr); }
  .fc-idx {
    position: static;
    display: flex; gap: 14px; overflow-x: auto;
    padding-bottom: 10px; border-bottom: 1px solid var(--fc-line);
    scrollbar-width: none;
  }
  .fc-idx::-webkit-scrollbar { display: none; }
  .fc-idx h2 { display: none; }
  .fc-idx a { flex: none; }
  .fc-idx a b { max-width: 140px; }
  .fc-band { margin-left: 0; }
}

@media (max-width: 640px) {
  .fc-bar { gap: 9px; }
  .fc-bar input[type="text"] { width: 100%; order: 5; }
  .fc-go { order: 4; }
  .fc-cover h1 { font-size: clamp(30px, 9vw, 44px); }
}

@media (hover: none) {
  .fc-tile:hover .fc-ph img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-tile, .fc-ph img, .fc-tog, .fc-go, .fc-ask { transition: none; }
  .fc-skel div { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SKIN GUARD
   This page is listed in the site skin's allow-list so it gets the shared
   mega header, and the header's own styles live under html.v4skin - so the
   class has to be on <html>. The skin also restyles page typography, which
   would reach inside the directory and resize every heading it owns
   (measured: section head 42 -> 36.8px, tile title 16 -> 22.3px, and the page
   ground turned cream). The directory has its own type scale and tokens, so
   it re-asserts them here rather than inheriting a scale meant for marketing
   pages. Scoped to .fc, so the header outside it keeps the skin.
   ══════════════════════════════════════════════════════════════════ */
/* The page ground, LITERAL and not via the token. --fc-pg is declared on .fc,
   and custom properties do not inherit upwards, so `var(--fc-pg, #fff)` on the
   body could never see it and silently took the #fff fallback. That painted a
   white band from the top of the document down to wherever .fc began - which
   read as a white header sitting on a cream page, and made the panel look
   pinned to the top no matter what its margin was, because the eye takes that
   white/cream edge for the header's bottom rather than the header itself. */
html.v4skin body { background: #f3efea; }
html.v4skin .fc,
html.v4skin .fc * { letter-spacing: inherit; }
html.v4skin .fc .fc-sechead h2 {
  font-size: clamp(24px, 3.2vw, 42px); line-height: 1.3;
  letter-spacing: -.04em; color: var(--fc-ink);
}
html.v4skin .fc .fc-tile h3 {
  font-size: 16px; line-height: 1.3; color: var(--fc-ink); font-weight: 600;
}
html.v4skin .fc .fc-tile h3 a { font-size: inherit; color: inherit; }
html.v4skin .fc .fc-ask b { font-size: 17px; line-height: 1.15; }
html.v4skin .fc .fc-ask small,
html.v4skin .fc .fc-spec li { font-size: 10.5px; }
html.v4skin .fc .fc-idx a b { font-size: 13px; }
html.v4skin .fc .fc-idx h2 {
  font-size: 10.5px; line-height: 1; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fc-mut);
}
html.v4skin .fc .fc-note { font-size: 12.5px; line-height: 1.7; }
/* The skin left-aligns body copy; this line belongs centred under the
   wordmark, and it needs a measure or it runs the full width of the panel. */
html.v4skin .fc .fc-find-h,
html.v4skin .fc .fc-find-h p { text-align: center; }
.fc-find-h p { max-width: 58ch; margin-inline: auto; }
html.v4skin .fc .fc-rig .fc-face { font-size: clamp(32px, 6.8vw, 92px); }
/* the header is fixed/sticky chrome; the directory starts under it */
/* Centred in the space it sits in: the same margin above and below means the
   panel is always midway between the header bar and the first category,
   whatever the viewport does to the clamp. */
/* Back to the original spacing, on request 2026-08-25: the reason the panel
   looked pinned to the top was never its margin, it was the white body band
   above it (see the note on the body background). With that gone the first
   gap reads correctly, so the enlarged margins are reverted. Only the top is
   set here; the bottom stays the panel's own base margin. */
html.v4skin .fc-find { margin-top: clamp(18px, 2.4vw, 34px); }

/* ══════════════════════════════════════════════════════════════════
   THE RAIL
   Four tiles in view, the rest of the eight one arrow away. Native overflow
   scrolling carries the easing and the snap, so a trackpad, the keyboard and
   the buttons all move the row the same way — and because the browser already
   counts scroll the other way under dir="rtl", the arrows sit at the correct
   ends in Arabic without a mirrored stylesheet.
   ══════════════════════════════════════════════════════════════════ */
.fc-rail { position: relative; }
.fc-view { overflow: hidden; }
.fc-rail .fc-grid {
  display: flex; gap: var(--fc-gap, 18px);
  grid-template-columns: none;            /* the base rule does not apply here */
  will-change: transform;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.fc-rail .fc-grid > * {
  flex: 0 0 calc((100% - 3 * var(--fc-gap, 18px)) / 4);
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .fc-rail .fc-grid { transition: none; }
}

.fc-nav {
  position: absolute; top: 38%; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--fc-line); background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 10px rgba(20, 18, 16, .14);
  font: 400 22px/1 var(--fc-font); color: var(--fc-ink);
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}
.fc-nav:hover { background: var(--fc-cta); border-color: var(--fc-cta); color: #fff; }
.fc-nav:disabled { opacity: 0; pointer-events: none; }
.fc-nav-prev { inset-inline-start: -14px; }
.fc-nav-next { inset-inline-end: -14px; }
@media (max-width: 900px) {
  .fc-rail .fc-grid > * { flex-basis: calc((100% - var(--fc-gap, 18px)) / 2); }
  .fc-nav-prev { inset-inline-start: 2px; }
  .fc-nav-next { inset-inline-end: 2px; }
}
@media (max-width: 560px) {
  .fc-rail .fc-grid > * { flex-basis: 82%; }
}

/* Motion. The wordmark now turns continuously, so anyone who has asked for
   less of it gets it stopped on the title rather than merely slowed. */
@media (prefers-reduced-motion: reduce) {
  .fc-rig { animation: none !important; }
}

/* A popover scales out of the corner it is anchored to, so under RTL the
   origin has to move with the anchor or the open animation grows away from
   the control it belongs to. */
[dir="rtl"] .fc-cal, [dir="rtl"] .fc-sel-panel { transform-origin: top right; }

/* ==========================================================================
   MACHINE RAILS: SWIPEABLE ON TOUCH                              2026-08-26
   Appended by hand - nothing generates this file.

   The rails were arrow-only. .fc-view is overflow:hidden and the track is
   moved by transform from the two .fc-nav buttons, which means on a phone
   the ONLY way through 6.9 screens of machines was tapping a 40px circle.
   Measured at 390px: ratio 6.93x, both arrows visible, swipe did nothing.

   Below 900px the same rail becomes a native scroller with snap, and the
   arrows go away - a thumb is the better control, and the scroll hint in
   v4mobile.js attaches itself to anything with overflow-x:auto, so the rail
   picks up "Swipe for more" without being named anywhere.
   ========================================================================== */
@media (max-width: 900px) {
  .fc-view {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* the peek is the point, so let the last card reach the edge and stop */
    scroll-padding-inline: 0;
  }
  .fc-view::-webkit-scrollbar { display: none; }

  /* paint() writes grid.style.transform inline on init and on every resize,
     so this has to be !important - it is the one thing holding the two
     mechanisms apart. */
  .fc-rail .fc-grid {
    transform: none !important;
    transition: none;
    will-change: auto;
  }
  .fc-rail .fc-grid > * { scroll-snap-align: start; }

  /* two 40px circles sitting on top of the first and last card, controlling
     something the thumb now does better */
  .fc-nav { display: none; }
}

/* The tail: categories with too few machines to fill a row. One quiet line of
   links at the end instead of eight half-empty shelves. 2026-09-22. */
.fc-tail{max-width:1080px;margin:56px auto 0;padding:26px 0 0;border-top:1px solid #ddd3c7}
.fc-tail h2{margin:0 0 6px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8a8078;font-weight:600}
.fc-tail-lede{margin:0 0 16px;font-size:.88rem;line-height:1.6;color:#5f5f5f;max-width:56ch}
.fc-tail-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.fc-tail-list a{display:inline-flex;align-items:center;height:34px;padding-inline:14px;
  border:1px solid #ddd3c7;border-radius:999px;font-size:.86rem;color:#1b1b1b;
  text-decoration:none;transition:border-color .18s,color .18s}
.fc-tail-list a:hover{border-color:#e65d00;color:#e65d00}

/* The kicker already had a rule above (11px, uppercase, muted) - it is the
   skin that was overriding its SIZE to 16px, so the label sat as big as body
   copy. This restores the intended size at the skin's own specificity, and
   centres it over the bar. 2026-09-22. */
html.v4skin body .fc-kicker,
.fc-find .fc-kicker{
  font-size:11px !important; line-height:1 !important;
  margin:0 0 10px !important; text-align:center; color:var(--fc-mut);
}

/* The margin index's last entry stands for the fold-away categories. It must
   not look like the twentieth category, or a reader counting the list will
   think there are twenty-one shelves and find twenty. A hairline above it, and
   the same muted weight the other entries carry until they are current.
   2026-09-22. */
.fc-tail{ scroll-margin-top:92px }
.fc-idx-more{ margin-top:10px; padding-top:9px; border-top:1px solid var(--fc-line) }
.fc-idx-more b{ font-weight:500 }

/* Under 940px the index is a horizontal scroller, so a top border would draw a
   line across the middle of the row. The separator becomes a leading rule. */
@media (max-width:940px){
  .fc-idx-more{
    margin-top:0; padding-top:0; border-top:0;
    margin-inline-start:4px; padding-inline-start:14px;
    border-inline-start:1px solid var(--fc-line);
  }
}