/* ==========================================================================
   26  UK FRANCHISE GROWTH INDEX
   A new section of the Twine site, not a separate product. Everything here
   sits on the tokens above: page ink, brand orange, the 8/6/4 corner scale,
   Familjen on the h1 only, no shadows.

   Two rules from Mark's brief are load-bearing and are enforced in the CSS
   rather than left to whoever writes the markup:

   - Section 53: on dark, tan, never pure white. Nothing in this section
     resolves to #FFF. Where a label sits on brand orange it uses
     --chip-label, which is the one place white is allowed sitewide.
   - Section 15: the five fibre colours identify the fibres. They are not
     chart colours and must not be swapped for a palette.

   Namespaced `fi-` so nothing here can reach the rest of the site. */

/* --- the dummy data banner ---------------------------------------------
   Placeholder Five Fibre scores are attached to real, named companies while
   we build. This is deliberately loud and deliberately hard to miss. It is
   removed by the data, not by editing CSS: no dummy rows, no banner. */
.fi-dummy{position:fixed;inset-inline:0;bottom:0;z-index:65;background:#F04E24;color:var(--chip-label);
  padding:10px var(--s-5) calc(10px + env(safe-area-inset-bottom,0px));
  font:500 var(--t-small)/1.4 var(--font-body);text-align:center}
/* it was sticky at top:0, which sat on top of the fixed ticker and header.
   Pinned to the bottom it stays visible and never touches the chrome. */
body:has(.fi-dummy){padding-bottom:52px}
.fi-dummy b{font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* --- shared shell ------------------------------------------------------- */
.fi-crumbs{font-size:var(--t-micro);color:var(--text-soft);margin-bottom:var(--s-5)}
.fi-crumbs a{color:var(--text-soft)}
.fi-crumbs a:hover{color:var(--orange)}
.fi-crumbs span{margin:0 6px;opacity:.5}

.fi-section{padding-block:clamp(40px,5vw,72px)}
/* The site header is position:fixed, lifted out of flow, so the first section
   of every page has to clear it. Site pages do that with
   main > .section:first-child. The Index opens with .fi-section instead, so it
   never matched and the hero slid under the header. Same calc as the site, so
   the Index clears it exactly as every other page does, on every template:
   the main Index, profiles, industry, category, sector and static pages. */
main > .fi-section:first-child{padding-top:calc(var(--header-h) + clamp(32px,4vw,56px))}
.fi-section + .fi-section{border-top:1px solid var(--line)}
.fi-section h2{font-size:var(--t-h2-sm);margin:0 0 var(--s-5)}
.fi-lede{font-size:var(--t-lead);color:var(--text);line-height:var(--lh-body);max-width:62ch;margin:0 0 var(--s-6)}

/* --- live snapshot ------------------------------------------------------ */
/* Wide enough, and sized, for the longest value that actually renders:
   eight characters, "£100,000" and "136 / 56". At the old 150px track and
   2.6rem the plus sign on "1,000+" hung outside the box. overflow-wrap is the
   safety net: if a longer value ever appears it wraps inside the tile rather
   than escaping it. */
.fi-snapshot{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s-3);margin-top:clamp(28px,3.4vw,44px)}
.fi-stat{padding:clamp(18px,2.2vw,24px);border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.fi-stat__n{font-family:var(--font-body);font-weight:500;letter-spacing:-.035em;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.05;color:var(--text-bright);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fi-stat__l{font-size:var(--t-micro);color:var(--text-soft);margin-top:8px;line-height:1.4}

/* --- search + filters --------------------------------------------------- */
.fi-search{position:relative;width:100%}
.fi-search .field__i{height:56px;font-size:var(--t-body);padding-left:44px}
.fi-search__ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-soft);pointer-events:none}
.fi-ac{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:30;
  border:1px solid var(--line-strong);border-radius:8px;background:#0B1114;overflow:hidden;display:none}
.fi-ac.is-on{display:block}
.fi-ac a{display:block;padding:11px 16px;font-size:var(--t-small);color:var(--text);border-bottom:1px solid var(--line)}
.fi-ac a:last-child{border-bottom:0}
.fi-ac a:hover,.fi-ac a:focus-visible{background:var(--surface);color:var(--text-bright)}
.fi-ac b{color:var(--orange);font-weight:500}

.fi-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
@media(max-width:900px){.fi-layout{grid-template-columns:1fr}}

/* Pinned clear of the floating header, not 24px from the viewport top, where
   it slid underneath the bar. The script unpins it when it is taller than
   the screen, since a pinned rail that overflows hides its own lower filters
   and an inner scrollbar was ruled out. */
.fi-filters{position:sticky;top:calc(var(--header-h) - var(--ticker-h,0px) + var(--s-5))}
@media(min-width:901px){.fi-filters.is-unpinned{position:static}}
.fi-fgroup{border-bottom:1px solid var(--line);padding:var(--s-4) 0}
.fi-fgroup:first-child{padding-top:0}
.fi-fgroup__h{display:flex;justify-content:space-between;align-items:center;width:100%;
  background:none;border:0;padding:0;cursor:pointer;
  font:500 var(--t-small)/1 var(--font-body);color:var(--text-bright);text-align:left}
.fi-fgroup__h svg{width:14px;height:14px;color:var(--text-soft);transition:transform .2s}
.fi-fgroup[open] .fi-fgroup__h svg{transform:rotate(180deg)}
.fi-fopts{display:grid;gap:9px;margin-top:var(--s-3)}
/* No scrolling box inside the rail. The first six options show, the rest sit
   behind "+ N more". Hidden only once JavaScript is running, so with it off
   every option is simply listed. A ticked option is never hidden, even when
   the group is collapsed, so an active filter cannot vanish from view. */
html:not(.no-js) .fi-fopt.is-extra{display:none}
html:not(.no-js) .fi-fgroup.is-expanded .fi-fopt.is-extra,
html:not(.no-js) .fi-fopt.is-extra:has(input:checked){display:flex}
.fi-fmore{display:none;align-items:center;gap:7px;margin-top:var(--s-3);padding:4px 0;
  background:none;border:0;cursor:pointer;color:var(--orange);
  font:500 var(--t-small)/1.4 var(--font-body)}
html:not(.no-js) .fi-fmore{display:inline-flex}
.fi-fmore svg{width:14px;height:14px;flex:none;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.fi-fmore:hover,.fi-fmore:focus-visible{color:var(--orange-hover)}
.fi-fmore:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
/* the plus turns into a cross when the group is open */
.fi-fgroup.is-expanded .fi-fmore svg{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.fi-fmore svg{transition:none}}
.fi-fopt{display:flex;align-items:center;gap:9px;font-size:var(--t-small);color:var(--text-soft);cursor:pointer}
.fi-fopt:hover{color:var(--text-bright)}
/* A drawn checkbox rather than the browser's own. The native one ignores the
   dark theme when unticked and paints a white square at 20:1, the brightest
   thing on the page. The outline is 40% sand, 3.18:1: the lowest that still
   reads as something you can tick. The site's usual subtle line (15%, 1.37:1)
   would make the boxes effectively invisible. Ticked stays brand orange with
   a white tick, which is the signal that a filter is on. */
.fi-fopt input{appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:16px;height:16px;border:1.5px solid rgba(233,227,212,.40);border-radius:4px;
  background:transparent;display:grid;place-content:center;cursor:pointer;
  transition:border-color .15s,background-color .15s}
.fi-fopt input::before{content:"";width:9px;height:9px;transform:scale(0);
  transition:transform .12s ease-out;background:var(--chip-label);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.fi-fopt:hover input{border-color:rgba(233,227,212,.55)}
.fi-fopt input:checked{background:var(--orange);border-color:var(--orange)}
.fi-fopt input:checked::before{transform:scale(1)}
.fi-fopt input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.fi-fopt input,.fi-fopt input::before{transition:none}}
.fi-fopt small{margin-left:auto;color:var(--text-soft);opacity:.7;font-variant-numeric:tabular-nums}

/* mobile: the brief asks for a drawer, not a page of filters */
.fi-fbtn{display:none}
@media(max-width:900px){
  .fi-fbtn{display:inline-flex}
  .fi-filters{position:fixed;inset:0;z-index:70;background:var(--ink);padding:var(--s-5);
    overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);visibility:hidden}
  .fi-filters.is-open{transform:none;visibility:visible}
  .fi-filters__close{position:sticky;top:0;display:flex;justify-content:space-between;
    align-items:center;background:var(--ink);padding-bottom:var(--s-4);margin-bottom:var(--s-3)}
}

/* --- result rows. Data, not a marketplace ------------------------------- */
.fi-results{display:grid;gap:var(--s-2)}
.fi-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);
  padding:clamp(16px,2vw,20px);border:1px solid var(--line);border-radius:8px;
  background:var(--surface);transition:border-color .2s}
.fi-row:hover{border-color:var(--line-strong)}
.fi-row__name{font-size:var(--t-emph);font-weight:500;color:var(--text-bright);margin:0 0 6px}
.fi-row__name a::after{content:"";position:absolute;inset:0}
.fi-row{position:relative}
.fi-row__meta{font-size:var(--t-small);color:var(--text-soft);line-height:1.5}
.fi-row__meta span{margin:0 7px;opacity:.45}
.fi-row__facts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.fi-tag{display:inline-block;font-size:var(--t-micro);color:var(--text-soft);
  border:1px solid var(--line-strong);border-radius:4px;padding:3px 9px;line-height:1.5}
.fi-tag--live{border-color:rgba(240,78,36,.4);color:var(--orange)}
.fi-row__score{text-align:right;flex:none}
.fi-row__score b{display:block;font-family:var(--font-body);font-weight:500;letter-spacing:-.03em;
  font-size:1.9rem;line-height:1;color:var(--text-bright);font-variant-numeric:tabular-nums}
.fi-row__score small{display:block;font-size:var(--t-micro);color:var(--text-soft);margin-top:5px}
@media(max-width:560px){
  .fi-row{grid-template-columns:1fr}
  .fi-row__score{text-align:left;display:flex;align-items:baseline;gap:9px}
  .fi-row__score small{margin:0}
}

.fi-more{display:flex;justify-content:center;margin-top:var(--s-6)}
.fi-count{font-size:var(--t-small);color:var(--text-soft);margin-bottom:var(--s-4)}
.fi-count b{color:var(--text-bright);font-weight:500}

/* --- profile hero ------------------------------------------------------- */
.fi-phero__meta{font-size:var(--t-body);color:var(--text-soft);margin:0 0 var(--s-6)}
.fi-phero__meta a{color:var(--text-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.fi-phero__meta a:hover{color:var(--orange)}
.fi-phero__meta span{margin:0 8px;opacity:.45}

.fi-headline{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s-3);margin-bottom:clamp(28px,3.4vw,44px)}
.fi-headline__c{padding:clamp(18px,2.2vw,24px);border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.fi-headline__k{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:9px}
.fi-headline__v{font-family:var(--font-body);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.4rem,2.3vw,1.85rem);line-height:1.05;color:var(--text-bright);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fi-headline__v small{font-size:.46em;color:var(--text-soft);margin-left:5px;letter-spacing:-.01em}
.fi-headline__v.is-text{font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:-.02em}

/* Independent vs Verified. A status, never a rating. */
.fi-status{display:inline-block;font-size:var(--t-micro);border-radius:4px;padding:4px 10px;line-height:1.5;
  border:1px solid var(--line-strong);color:var(--text-soft)}
.fi-status--verified{border-color:rgba(240,78,36,.45);color:var(--orange)}

/* --- at a glance -------------------------------------------------------- */
.fi-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s-2)}
.fi-fact{padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.fi-fact dt{font-size:var(--t-micro);color:var(--text-soft);margin-bottom:5px}
.fi-fact dd{margin:0;font-size:var(--t-body);color:var(--text-bright);font-weight:500}

/* --- the five fibre assessment ------------------------------------------
   One visualisation, five bars, each in its own fibre colour, the number
   always beside it. Section 16: never make somebody read a chart to find
   out the score, and section 59: colour is never the only signal. */
.fi-fibres{display:grid;gap:var(--s-3)}
.fi-fibre{padding:clamp(18px,2.2vw,24px);border:1px solid var(--line);
  border-left:3px solid var(--fc);border-radius:8px;background:var(--surface)}
.fi-fibre__top{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-3);flex-wrap:wrap}
.fi-fibre__n{font-size:var(--t-micro);letter-spacing:.1em;color:var(--fc);font-variant-numeric:tabular-nums}
.fi-fibre__name{font-size:var(--t-h3);font-weight:500;color:var(--text-bright)}
.fi-fibre__score{margin-left:auto;font-family:var(--font-body);font-weight:500;
  letter-spacing:-.025em;font-size:1.35rem;color:var(--text-bright);font-variant-numeric:tabular-nums}
.fi-fibre__score small{font-size:.58em;color:var(--text-soft)}
.fi-fibre__track{height:7px;border-radius:4px;background:var(--line-strong);overflow:hidden;margin-bottom:var(--s-3)}
.fi-fibre__track i{display:block;height:100%;background:var(--fc);border-radius:4px}
.fi-fibre p{margin:0;font-size:var(--t-body);color:var(--text);line-height:var(--lh-body);max-width:74ch}

.fi-overall{padding:clamp(22px,2.8vw,32px);border:1px solid var(--line-strong);border-radius:8px;
  background:var(--surface);margin-top:var(--s-4)}
.fi-overall__top{display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-3)}
.fi-overall__n{font-family:var(--font-body);font-weight:500;letter-spacing:-.04em;
  font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--text-bright);font-variant-numeric:tabular-nums}
.fi-overall__n small{font-size:.3em;color:var(--text-soft);margin-left:7px;letter-spacing:-.01em}
.fi-overall p{margin:0;font-size:var(--t-body);color:var(--text);line-height:var(--lh-body);max-width:74ch}

/* --- benchmarks. Like with like only, per section 23 -------------------- */
.fi-bench{display:grid;gap:var(--s-3)}
.fi-bench__row{padding:clamp(16px,2vw,20px);border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.fi-bench__k{font-size:var(--t-small);color:var(--text-soft);margin-bottom:var(--s-3)}
.fi-bench__k b{color:var(--text-bright);font-weight:500}
.fi-bench__bars{display:grid;gap:9px}
.fi-bench__bar{display:grid;grid-template-columns:92px minmax(0,1fr) 62px;gap:var(--s-3);align-items:center;
  font-size:var(--t-micro);color:var(--text-soft)}
.fi-bench__bar i{display:block;height:6px;border-radius:3px;background:var(--line-strong)}
.fi-bench__bar.is-this i{background:var(--orange)}
.fi-bench__bar b{text-align:right;color:var(--text-bright);font-weight:500;font-variant-numeric:tabular-nums}
@media(max-width:480px){.fi-bench__bar{grid-template-columns:78px minmax(0,1fr) 54px}}

/* --- sources, confidence, claim, corrections ---------------------------- */
.fi-sources summary{cursor:pointer;font-size:var(--t-small);color:var(--text-bright);
  padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--surface);list-style:none}
.fi-sources summary::-webkit-details-marker{display:none}
.fi-sources summary::after{content:" +";color:var(--orange)}
.fi-sources[open] summary::after{content:" -"}
.fi-sources ol{margin:var(--s-3) 0 0;padding-left:20px;display:grid;gap:8px}
.fi-sources li{font-size:var(--t-small);color:var(--text-soft);word-break:break-word}
.fi-sources a{color:var(--text)}
.fi-sources a:hover{color:var(--orange)}

.fi-panel{padding:clamp(20px,2.6vw,30px);border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.fi-panel--accent{border-color:rgba(240,78,36,.3);border-left:2px solid var(--orange)}
.fi-panel h3{font-size:var(--t-h3-lg);margin:0 0 var(--s-3)}
.fi-panel p{font-size:var(--t-body);color:var(--text-soft);margin:0 0 var(--s-4);max-width:70ch}
.fi-panel .btn{margin-top:var(--s-2)}

.fi-note{font-size:var(--t-micro);color:var(--text-soft);line-height:1.6;max-width:78ch}
.fi-note a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

/* --- industry and category pages ---------------------------------------- */
.fi-avgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:var(--s-2);margin-top:var(--s-4)}
.fi-avg{padding:16px;border:1px solid var(--line);border-left:3px solid var(--fc);border-radius:6px;background:var(--surface)}
.fi-avg__k{font-size:var(--t-micro);color:var(--text-soft);margin-bottom:7px}
.fi-avg__v{font-family:var(--font-body);font-weight:500;letter-spacing:-.03em;font-size:1.5rem;
  line-height:1;color:var(--text-bright);font-variant-numeric:tabular-nums}
.fi-avg__v small{font-size:.5em;color:var(--text-soft);margin-left:4px}

.fi-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.fi-chip{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-small);color:var(--text);
  border:1px solid var(--line-strong);border-radius:6px;padding:7px 13px;line-height:1.5}
.fi-chip:hover{border-color:var(--text-soft);color:var(--text-bright)}
.fi-chip b{color:var(--text-soft);font-weight:400;font-variant-numeric:tabular-nums}

/* --- thin data notice ---------------------------------------------------
   Where the research genuinely has no figure for most of a group, say so
   rather than printing an average of the eleven networks that happen to
   have one. Section 51: a public page needs enough data to be useful. */
.fi-thin{font-size:var(--t-micro);color:var(--text-soft);font-style:normal;
  border-left:2px solid var(--line-strong);padding-left:12px;margin-top:var(--s-3);line-height:1.6}

/* --- site-vocabulary alignment ------------------------------------------
   The Index now uses the site's own hero, buttons, reveals, typed headings,
   icon tiles and orbit card. These rules only place those site components
   inside Index layouts; the components themselves come from twine.css. */

/* icon tiles sit above the figure, the way the site's meta and p-card tiles do */
.fi-stat .cs-ico,
.fi-headline__c .cs-ico,
.fi-panel .cs-ico{margin-bottom:var(--s-4)}
.fi-stat{display:flex;flex-direction:column;align-items:flex-start}

/* the hero is centred, as every inner page hero on the site is */
/* snag 2: a hairline separates the breadcrumb trail from the eyebrow */
.hero .fi-crumbs{text-align:center;margin-bottom:0;padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
/* snag 1: the category line sits clear of the name, not tucked under it */
.hero .fi-phero__meta{text-align:center;margin:var(--s-5) 0 0}
.hero .fi-phero__meta a{color:var(--text)}

/* the secondary button sits beside the primary in the hero, as on the site */
.hero .btn--text{margin-left:var(--s-4)}
@media(max-width:560px){.hero .btn--text{margin:var(--s-3) 0 0;display:inline-flex}}

/* the mobile filter toggle is now a text button, keep it off desktop */
.fi-fbtn{margin-bottom:var(--s-4)}


/* --- snags 3 + 4: bars grow and figures count as they arrive -------------
   Ryan's benchmark for the level of motion on these pages. Every bar and
   headline figure in the Index gets it, not just the two he flagged: the
   fibre bars, the benchmark bars, the overall score, the headline tile, the
   snapshot stats and the fibre averages.

   Scoped to html:not(.no-js). The markup always carries the true final value
   and the true bar width, so with JavaScript off, or before it runs, every
   figure is correct and every bar is full. Nothing here can show a visitor a
   zero that is not real. */
html:not(.no-js) .fi-fibre__track i,
html:not(.no-js) .fi-bench__bar i{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.15s cubic-bezier(.22,.61,.36,1)}
html:not(.no-js) .is-grown .fi-fibre__track i,
html:not(.no-js) .fi-fibre.is-grown .fi-fibre__track i,
html:not(.no-js) .fi-bench__row.is-grown .fi-bench__bar i{transform:scaleX(1)}
/* the "this network" bar lands a beat after the average, so the eye reads the
   comparison rather than two bars moving at once */
html:not(.no-js) .fi-bench__bar.is-this i{transition-delay:.18s}
[data-count]{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){
  html:not(.no-js) .fi-fibre__track i,
  html:not(.no-js) .fi-bench__bar i{transform:none;transition:none}
}

/* --- the Index sub-navigation, under the hero on every Index page ------- */
.fi-subnav{border-bottom:1px solid var(--line);background:var(--ink)}
.fi-subnav .wrap{display:flex;gap:clamp(18px,2.6vw,32px);overflow-x:auto;scrollbar-width:none;
  padding-block:var(--s-4)}
.fi-subnav .wrap::-webkit-scrollbar{display:none}
.fi-subnav a{flex:none;font-size:var(--t-small);color:var(--text-soft);padding:4px 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.fi-subnav a:hover{color:var(--text-bright)}
.fi-subnav a[aria-current="page"]{color:var(--text-bright);border-bottom-color:var(--orange)}

/* --- methodology prose: a readable measure, not the full width ---------- */
.fi-prose{max-width:760px}
.fi-prose h2{margin-bottom:var(--s-5)}
.fi-prose > p{font-size:var(--t-body);color:var(--text);line-height:var(--lh-body);margin:0 0 var(--s-4)}
.fi-mh{font-size:var(--t-h3-lg);color:var(--text-bright);margin:var(--s-7) 0 var(--s-4)}
.fi-list{margin:0 0 var(--s-5);padding-left:0;list-style:none;display:grid;gap:10px}
.fi-list li{position:relative;padding-left:22px;color:var(--text);line-height:1.55}
.fi-list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--orange)}
.fi-cols{list-style:none;padding:0;margin:0 0 var(--s-5);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.fi-cols li{font-size:var(--t-small);color:var(--text);padding:9px 12px;border:1px solid var(--line);
  border-radius:6px;background:var(--surface)}

/* the hierarchy: Index, Industry, Category, Network, as a connected flow */
.fi-flow{list-style:none;padding:0;margin:var(--s-5) 0 var(--s-6);display:flex;flex-wrap:wrap;
  align-items:center;gap:10px}
.fi-flow li{font-size:var(--t-small);font-weight:500;color:var(--text-bright);padding:10px 16px;
  border:1px solid var(--line-strong);border-radius:6px;background:var(--surface)}
.fi-flow li + li::before{content:"\2192";color:var(--orange);margin-right:10px;font-weight:400}
@media(max-width:600px){.fi-flow{flex-direction:column;align-items:stretch}
  .fi-flow li + li::before{content:"\2193";display:block;margin:0 0 6px}}

/* at a glance: words where the value is a principle rather than a figure */
.fi-stat__n.is-text{font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:-.02em;line-height:1.2}

/* how to cite: set apart so it can be found and copied */
.fi-cite{margin-top:var(--s-6);padding:clamp(20px,2.6vw,28px);border:1px solid rgba(240,78,36,.35);
  border-left:2px solid var(--orange);border-radius:8px;background:var(--surface)}
.fi-cite__k{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.fi-cite p{margin:0;font-size:var(--t-body);color:var(--text-bright);line-height:1.7;font-variant-numeric:tabular-nums}

/* --- the live summary over the results ---------------------------------- */
.fi-summary{margin-bottom:var(--s-4);padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.fi-summary:empty{display:none}
.fi-summary__row{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--t-small);color:var(--text-soft)}
.fi-summary__row + .fi-summary__row{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.fi-summary b{color:var(--text-bright);font-weight:500;font-variant-numeric:tabular-nums}

/* --- the range filters ---------------------------------------------------- */
.fi-fpick .fi-fgroup__h{cursor:default;margin-bottom:var(--s-3)}
.fi-sel{min-height:42px;font-size:var(--t-small);padding-block:8px;cursor:pointer}

/* --- the methodology document, on the blog post layout ---------------------
   Same grid, same sticky offset and same contents box as the blog posts, so
   it reads as the same design. The rail comes first in the source, so it sits
   on the left on desktop and at the top on phones: the blog puts its contents
   after the article, which is fine for four sections and useless after three
   thousand words. The aside is left to stretch to the article's height (no
   align-items:start), or its sticky child would have nowhere to travel. */
.fi-docsec{padding-top:clamp(28px,3.4vw,48px)}
.fi-doc-layout{display:grid;gap:clamp(28px,3.4vw,64px);grid-template-columns:1fr}
@media(min-width:1000px){.fi-doc-layout{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.fi-doc-side{min-width:0}
@media(min-width:1000px){
  .fi-doc-side__stick{position:sticky;top:calc(var(--header-h) + var(--s-5))}
  .fi-doc-side__stick.is-unpinned{position:static}
}
.fi-toc{border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);
  padding:clamp(16px,2vw,22px)}
.fi-toc__k{margin:0 0 var(--s-3);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
/* fourteen items rather than the blog's four, so tighter, to fit a laptop screen */
.fi-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fi-toc a{display:block;padding:6px 10px;border-radius:var(--r-sm);color:var(--text-soft);text-decoration:none;
  font-size:var(--t-small);line-height:1.35;border-left:2px solid transparent;
  transition:color .2s,border-color .2s,background .2s}
.fi-toc a:hover,.fi-toc a.is-current{color:var(--text-bright);border-left-color:var(--orange);background:var(--surface-2)}
.fi-doc-side__cta{margin:var(--s-4) 0 0}

/* the document column fills its side of the grid; only running text is held
   to a readable measure, so tiles and fibre cards use the full width */
.fi-doc{min-width:0}
.fi-doc > p,.fi-doc__intro > p,.fi-doc .fi-list{max-width:68ch}
.fi-doc > p,.fi-doc__intro > p{margin:0 0 var(--s-4);color:var(--text);font-size:var(--t-body);line-height:var(--lh-body)}
.fi-doc__intro > p:first-child{font-size:var(--t-lead);color:var(--text-bright);line-height:1.5}
/* the blog's heading treatment: a hairline and room above every section */
.fi-doc h2{margin:var(--s-8) 0 var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line);
  font-size:var(--t-h2-sm)}
.fi-doc .fi-mh{margin-top:var(--s-6)}
.fi-doc .fi-snapshot{margin:0 0 var(--s-4)}
.fi-doc .fi-fibre{margin-bottom:var(--s-3)}

/* --- a declared relationship, stated beside the score, not buried ------- */
.fi-disclose{margin:var(--s-5) 0 0;padding:clamp(16px,2vw,22px);border:1px solid rgba(240,78,36,.35);
  border-left:2px solid var(--orange);border-radius:8px;background:var(--surface)}
.fi-disclose__k{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange);margin-bottom:8px}
.fi-disclose p{margin:0;font-size:var(--t-small);color:var(--text);line-height:1.65;max-width:78ch}
/* the band label the methodology defines, beside its score */
.fi-fibre__band{margin-left:auto;font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-soft)}
.fi-fibre__band + .fi-fibre__score{margin-left:var(--s-3)}


/* the five fibre averages carry their own colours, as they do everywhere else */
.fi-summary__fib span{display:inline-flex;align-items:center;gap:6px}
.fi-summary__fib span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fc);flex:none}

/* --- the full network list on the sitemap page -------------------------- */
.sm-all__grp{margin-top:var(--s-6)}
.sm-all__h{font-size:var(--t-small);font-weight:500;color:var(--text-bright);margin:0 0 var(--s-3);
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.sm-all__h span{color:var(--text-soft);font-weight:400;font-variant-numeric:tabular-nums}
.sm-all__list{list-style:none;margin:0;padding:0;columns:4;column-gap:var(--s-5)}
@media(max-width:1100px){.sm-all__list{columns:3}}
@media(max-width:800px){.sm-all__list{columns:2}}
@media(max-width:520px){.sm-all__list{columns:1}}
.sm-all__list li{break-inside:avoid;margin-bottom:6px}
.sm-all__list a{font-size:var(--t-small);color:var(--text-soft);line-height:1.4}
.sm-all__list a:hover{color:var(--orange)}