/* components part 9 of 11 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

.fgroup.open .extra{display:flex}
.fg-more{align-self:flex-start;margin-top:3px;background:none;border:0;padding:6px 10px;
         cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:700;
         letter-spacing:.03em;color:var(--muted);text-decoration:underline;
         text-underline-offset:3px}
.fg-more:hover,.fg-more:focus{color:var(--ink);background:none}
.fg-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.fg-more .mo-b,.fgroup.open .fg-more .mo-a{display:none}
.fgroup.open .fg-more .mo-b{display:inline}

/* ------------------------------------------------------------------ the rail,
   below 1100px. There was no rule here at all: `.pf` kept its `212px minmax(0,1fr)`
   grid down to every width, so on a 375px phone the sidebar took 212 of it and the
   wall was left 129px wide — every frame rendered about 55px across, which is a
   thumbnail of a thumbnail. The comment above `.pf` has described this breakpoint
   since the file was written; the breakpoint itself was never added.

   The rail becomes four horizontal scrollers, one per axis, label first. Swiping a
   row of chips is the mobile idiom for this and it costs four short rows above the
   wall instead of a full screen of stacked filters. The long-tail markets that hide
   behind "more" on desktop are simply shown here — in a scroller there is nothing
   to save by folding them, and it removes a tap. */
/* On desktop the wrapper must not exist as a box — display:contents drops it out of
   the layout entirely so the three groups stay direct flex children of the rail. */
.fg-rest{display:contents}
.fg-toggle{display:none}@media(max-width:1100px){
  .pf{grid-template-columns:minmax(0,1fr);gap:0;padding-left:0;padding-right:0}
  .pf-side{position:sticky;top:var(--head-h);z-index:40;max-height:none;overflow:visible;
           flex-direction:column;gap:7px;
           padding:10px 0 9px;background:var(--white);
           border-bottom:1px solid var(--hair)}
  /* One ROW PER GROUP, not one long scroller for all three. Sharing a single
     horizontal track meant reaching Markets took a long sideways drag past every
     sector and light chip; now each axis scrolls independently and only as far as
     its own chips. Each group must be its own overflow container for that, and its
     chips must not shrink (see .fg-rest .fgroup below). */
  .fg-rest{display:flex;flex-direction:column;align-items:stretch;gap:7px;
           overflow:visible;padding-inline:0}
  /* ...and collapsed by default, because four rows of chips above the work is the
     "slightly overwhelming" the owner reported. Type of work stays out, since it is
     the axis most people want; the other three come in on a tap. */
  .pf-side:not(.filters-open) .fg-rest{display:none}
  .fg-toggle{display:flex;align-items:center;gap:8px;align-self:flex-start;
    margin-inline:clamp(16px,4.4vw,34px);padding:7px 13px;cursor:pointer;
    border:1px solid var(--hair);border-radius:999px;background:none;
    font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--muted);transition:border-color .18s,background .18s}
  .fg-toggle:hover,.fg-toggle:focus-visible{border-color:var(--ink);background:var(--wash-lt)}
/* The parent theme paints every button/anchor #CC3366 on :active, and on a phone that
   is the state you SEE, because a tap is a press. Pinning the colour in all three
   states is the fix; :hover alone never covered it. */
.fg-toggle,.fg-toggle:active,.fg-toggle:focus,.fg-toggle:visited,
.fg-toggle:active .ft-l,.fg-toggle:focus .ft-l{color:var(--ink)}
.fg-toggle{-webkit-tap-highlight-color:transparent}
  .fg-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
  .pf-side.filters-open .fg-toggle svg{transform:rotate(180deg)}
  .fg-toggle .ft-n{min-width:17px;height:17px;display:grid;place-items:center;
    border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;padding:0 5px}
  .fg-toggle .ft-n[hidden]{display:none}
  .fgroup{flex-direction:row;align-items:center;gap:8px;
          overflow-x:auto;overscroll-behavior-x:contain;
          scrollbar-width:none;-webkit-overflow-scrolling:touch;
          padding-inline:clamp(16px,4.4vw,34px)}
  /* the inner groups are no longer scrollers of their own — .fg-rest scrolls for all
     three, so they collapse to plain inline runs of chips with a divider between them */
  /* flex:0 0 auto is load-bearing. The default 0 1 auto let each group SHRINK to fit the
     375px bar while its chips kept their natural width — group 3 was 163px wide holding
     1,498px of content — and because these groups are overflow:visible (the outer
     .fg-rest scrolls for all three) the chips spilled straight over the next group.
     That is the overlapping text. Let them take their natural width and scroll. */
  .fg-rest .fgroup{flex:0 0 auto;width:100%;flex-direction:row;align-items:center;gap:8px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-inline:clamp(16px,4.4vw,34px)}
  .fg-rest .fgroup::-webkit-scrollbar{display:none}
  .fg-rest .fgroup>*{flex:0 0 auto}
  .fg-rest .fgroup + .fgroup{border-left:1px solid var(--hair);padding-left:10px}
  .fgroup::-webkit-scrollbar,.fg-rest::-webkit-scrollbar{display:none}
  .pf-side .fg-t{display:none}
  .f{width:auto;flex:0 0 auto;white-space:nowrap}
  .fgroup .extra{display:flex}
  .fgroup .fg-more{display:none}
  .fg-foot{padding-inline:clamp(16px,4.4vw,34px);padding-top:0;border-top:0}}@media(max-width:760px){ .pf-side{top:64px}}
/* Desktop hides the toggle, so the bar collapses to the count alone and drops to the
   foot of the rail, which is where it used to live. */
.fg-bar{order:99;padding-top:14px;border-top:1px solid var(--hair)}
.fg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
         padding-top:14px;border-top:1px solid var(--hair)}
/* Clear filters sits ABOVE the groups, not under them. At the bottom of a rail that is
   taller than the viewport it was below the fold exactly when it was needed — you notice
   you want to reset while looking at the filters you set, which are at the top. It is
   hidden until a filter is actually on, so it costs nothing when there is nothing to
   clear. The X carries the meaning; the words are for anyone who needs them. */
.fg-clear{display:flex;align-items:center;gap:7px;width:100%;margin-bottom:14px;
  padding:8px 10px;border:1px solid var(--hair);border-radius:999px;cursor:pointer;
  background:none;font-family:var(--sans);
  transition:border-color .18s,background .18s}
.fg-clear svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round}
/* colour restated. Nothing in this sheet changes it on hover, but the parent theme
   has a bare button:hover that does, and the label visibly shifted colour for no
   reason. The affordance is the border and a 4% wash, the same pair every outline
   button on the site uses; the text does not move. */
.fg-clear:hover,.fg-clear:focus,.fg-clear:focus-visible{background:var(--wash-lt);
  border-color:rgba(20,19,16,.22);color:var(--ink)}
.fg-clear:hover span,.fg-clear:hover svg,.fg-toggle:hover{color:var(--ink)}
.fg-clear-legacy{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
          font-size:12.5px;font-weight:600;color:var(--faint);text-decoration:underline;
          text-underline-offset:3px}
.fg-clear:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fg-clear[hidden]{display:none}
/* The count rides on the toggle's row rather than owning a line of its own. On a
   phone that line was pure vertical cost above the wall, and "MORE FILTERS" left the
   right half of it empty anyway. */
.fg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
        margin-inline:clamp(16px,4.4vw,34px)}
.fg-bar .fg-toggle{margin-inline:0}
/* Expanded, the button reads as "Fewer filters", so it belongs UNDER the filters it
   collapses. order does that without moving it in the DOM, where it has to stay next to
   the group it controls for aria-controls and for tab order. */
.pf-side.filters-open .fg-bar{order:99;margin-top:4px}
.pf-count{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
          color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-count b{color:var(--ink)}

/* The hero's two columns were an even split, but the copy is capped at --measure and
   stops well short of its half, so the page opened on ~150px of nothing down the
   middle. Give the map the width the text was never using. Scoped to .pf-hero: the
   service pages want the even split, because their right column is a photograph that
   fills it. */
/* fit-content, not a fraction. At .88fr the copy column grew with the viewport while the
   copy itself did not — the H1 needs about 660px and stops there, so on a 2000px screen
   the column was ~870px holding 430px of text and the map started 440px later than it had
   to. fit-content sizes the track to the copy (capped at the measure) and hands every
   remaining pixel to the map, which both closes the gap and makes the map bigger. */
/* The copy column is capped at the measure, so on an ultra-wide display every extra
   pixel went to the map alone and it grew to a size no map needs to be. The wall and
   the filter rail below stay full-bleed on purpose — they are a grid of images and
   they use the room. This cap applies to the hero only. */
.pf-hero .hero-row{grid-template-columns:fit-content(calc(var(--measure) + var(--edge-vp))) minmax(0,1fr);
                   gap:clamp(12px,1.4vw,22px);max-width:2500px}
/* The hero copy used to start at var(--edge-vp) — the inset that aligns text with the
   site's centred 1560px column. On every other page that is right. Here it is not: this
   page has no centred column. The wall runs to both edges and starts at the .pf gutter,
   so at 1920px the H1 began 252px in while the first frame began 34px in, and the hero
   read as a different, narrower page bolted above the work. Same gutter as .pf, so the
   headline and the first frame share a left edge. */
.pf-hero .hero-txt{padding-left:clamp(16px,2.2vw,34px);
                   padding-top:clamp(26px,3vw,48px);
                   padding-bottom:0}