/* components part 9 of 11 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */
@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)}
  .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}}
.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}
.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}
/* The map runs flush to the top of the hero, the way the photograph does in the right
   column of a service page — only the copy column carries a top inset.
   The bottom cannot also be flush, and the arithmetic says why: at this column width
   the map is 422px tall while the copy column's CONTENT alone is 426px, so the row is
   always at least as tall as the copy, and the leftover under the map is exactly
   4px + the copy's vertical padding. Zero padding would put the breadcrumb hard against
   the sticky header. So the top inset moved off the map entirely and the bottom padding
   went to 0, which is as close to flush as the proportions allow. */
.pf-hero .hero-map{align-self:start}@media(max-width:1100px){
  .pf-hero .hero-row{display:flex;flex-direction:column;gap:0;
                     grid-template-columns:none;
                     padding-inline:clamp(16px,2.2vw,34px)}
  .pf-hero .hero-txt{display:contents}
  /* Only the map needs a rule. The prototype ALREADY dissolves .hero-txt here and
     numbers its children (.eyebrow 2, h1 3, .hero-sub 4, .checks 5, .hero-btns 6,
     .hero-scarce 7) — so the map just needs a slot in that sequence, and 5 puts it
     after the subtext and before the buttons. This page has no .checks, so 5 is free.
     Do NOT try to renumber the text via `.hero-row > .crumb` and friends: the child
     combinator walks the DOM, and display:contents does not reparent anything, so
     those selectors match nothing at all — the elements are still children of
     .hero-txt. Only .hero-map is a real child of .hero-row. */
  /* Map directly under the H1 and above the subtext: "251 frames across these markets"
     is part of the claim the headline is making, so it should land before the prose
     that qualifies it, not after. The shared numbering gives .hero-sub 4, so the map
     takes 4 and the subtext moves to 5 — free here, since .checks does not exist on
     this page. Descendant selectors, not child: .hero-txt is display:contents at this
     width, which dissolves the box but does NOT reparent, so `.hero-row > .hero-sub`
     would match nothing. */
  /* The shared prototype numbers these children at 1040, not 1100, so between the two
     widths the stack was unordered — every item at order 0 — and the map fell to the
     bottom behind the buttons. Restate the whole sequence here, scoped to .pf-hero at
     (0,3,0) so it outranks the prototype's (0,2,0) in both directions and the order is
     identical on either side of 1040. */
  .pf-hero .hero-txt>.eyebrow{order:2}
  .pf-hero .hero-txt>h1{order:3}
  .pf-hero .hero-map{order:4;margin:6px 0 20px;align-self:stretch}
  .pf-hero .hero-sub{order:5}
  .pf-hero .hero-txt>.hero-btns{order:6}}

/* The map is the market filter and it lives in the hero, running to the edge. */
.hero-map{align-self:center;padding:0;min-width:0}
.mp{width:100%;height:auto;display:block}
/* the compact build's three panels: a tinted window each, a hairline frame, a label */
.mp-sea{fill:#faf9f7;pointer-events:none}
.mp-frame{fill:none;stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke;
          pointer-events:none}