/* ================================================================
     Provider Register: UK managed IT and cybersecurity providers.

     Palette is near-monochrome on an off-white ground, with a single
     accent carried over from OurIdea. Type is the system stack, which
     renders as SF on Apple hardware, so the page is genuinely set in
     the typeface it is styled after rather than an approximation.
     ================================================================ */
  :root{
    color-scheme: light;
    --ground:#FBFBFD;
    --surface:#FFFFFF;
    --raised:#F5F5F7;
    --ink:#1D1D1F;
    --body:#424245;
    /* The grey ramp is set by the contrast floor, not by taste. #86868B, the
       obvious faint grey in this palette, measures 3.33:1 on the raised fill
       and 3.62:1 on white, so every 11 to 13px label set in it failed AA.
       Faint drops to the old muted value and muted drops a step below it, so
       the two-tier hierarchy survives and both tiers clear 4.5:1 everywhere. */
    --muted:#5A5A5F;
    --faint:#6E6E73;
    --hair:#D2D2D7;
    --hair-soft:#E8E8ED;
    /* The search box and the selects are filled, not outlined, and the fill
       sits 1.05:1 from the ground, so their hit area was invisible. This is
       the one hairline that has to carry 3:1 because it is what tells you a
       control is there at all. */
    --field-line:#8A8A8F;

    /* The accent is the pink end of the abi. wordmark gradient, pulled down
       until it clears 4.5:1 both ways: as text on the ground, and as the
       ground under the white text on a button. #EC4899 itself sits at 3.5:1
       and fails both, so it stays where it belongs, in the mark. */
    --accent:#C72876;
    --accent-ink:#A31459;
    --accent-wash:#FBE9F2;

    --good-ink:#1D6B4F;
    --good-wash:#E6F4EE;
    --good-line:#B9DECC;

    --note-ink:#8A5A00;
    --note-wash:#FDF3E0;
    --note-line:#F0DCB4;

    --r-sm:9px;
    --r:13px;
    --r-lg:20px;
    --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.05);

    --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
           "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      /* Without this the system-default dark visitor keeps the light
         color-scheme from :root, so the select popups, the search field's
         clear button, the caret and the scrollbars all render light on a
         black page. The attribute block below already set it; this one had
         been missed. */
      color-scheme: dark;
      --ground:#000000;
      --surface:#1C1C1E;
      --raised:#2C2C2E;
      --ink:#F5F5F7;
      --body:#C7C7CC;
      --muted:#98989D;
      --faint:#8E8E93;
      --hair:#38383A;
      --hair-soft:#2C2C2E;
      --field-line:#636366;
      --accent:#F06CAD;
      --accent-ink:#F58CBE;
      --accent-wash:#331725;
      --good-ink:#5BD6A0;
      --good-wash:#12241C;
      --good-line:#22412F;
      --note-ink:#E5B155;
      --note-wash:#2A2113;
      --note-line:#453519;
      --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --ground:#000000;
    --surface:#1C1C1E;
    --raised:#2C2C2E;
    --ink:#F5F5F7;
    --body:#C7C7CC;
    --muted:#98989D;
    --faint:#8E8E93;
    --hair:#38383A;
    --hair-soft:#2C2C2E;
    --field-line:#636366;
    --accent:#F06CAD;
    --accent-ink:#F58CBE;
    --accent-wash:#331725;
    --good-ink:#5BD6A0;
    --good-wash:#12241C;
    --good-line:#22412F;
    --note-ink:#E5B155;
    --note-wash:#2A2113;
    --note-line:#453519;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--ground); color:var(--body);
    font-family:var(--sans); font-size:17px; line-height:1.47059;
    letter-spacing:-.022em; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
  .wrap{max-width:1000px; margin:0 auto; padding:0 24px}

  /* ---------- prototype banner ---------------------------------- */
  .proto{
    background:var(--note-wash); border-bottom:1px solid var(--note-line);
    color:var(--note-ink); font-size:13px; letter-spacing:-.01em;
    padding:9px 24px; text-align:center;
  }
  .proto b{font-weight:600}

  /* ---------- header -------------------------------------------- */
  header{
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--ground) 82%, transparent);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--hair-soft);
  }
  .bar{display:flex; align-items:center; justify-content:space-between; height:52px}
  .brand{display:flex; align-items:baseline; gap:9px}
  .brand .name{font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.03em}
  .brand .by{font-size:12px; color:var(--faint)}
  .brand .by b{color:var(--muted); font-weight:500}
  nav{display:flex; gap:26px}
  nav a{font-size:13px; color:var(--muted)}
  nav a:hover{color:var(--ink)}
  nav a[aria-current]{color:var(--ink); font-weight:500}
  @media (max-width:760px){ nav{display:none} }

  /* ---------- hero ---------------------------------------------- */
  .hero{padding:72px 0 40px; text-align:center}
  .kicker{
    font-size:12px; font-weight:590; letter-spacing:.04em; text-transform:uppercase;
    color:var(--accent); margin:0 0 16px;
  }
  h1{
    margin:0 0 18px; color:var(--ink); font-weight:640;
    font-size:clamp(38px, 6vw, 60px); line-height:1.06; letter-spacing:-.035em;
    text-wrap:balance;
  }
  .lede{
    margin:0 auto; max-width:62ch; font-size:19px; line-height:1.42;
    color:var(--muted); letter-spacing:-.02em; text-wrap:pretty;
  }
  .stamp{
    margin:26px 0 0; font-family:var(--mono); font-size:11.5px;
    letter-spacing:.02em; color:var(--faint);
  }

  /* ---------- controls ------------------------------------------ */
  /* Sort carries the longest option text on the page, "Largest first (accounts
     filed)", which needs 184px and had 152px inside a 1fr column, so it was
     cut off mid word behind the arrow at every desktop width. Town has the
     same problem with "Newcastle upon Tyne". Both get wider tracks and search,
     which is a free text box and shrinks harmlessly, gives up the difference. */
  .controls{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.4fr); gap:8px; margin:40px 0 12px}
  @media (max-width:820px){ .controls{grid-template-columns:1fr 1fr} }
  @media (max-width:480px){ .controls{grid-template-columns:1fr} }
  .field{
    width:100%; padding:11px 14px; font:inherit; font-size:15px; letter-spacing:-.01em;
    color:var(--ink); background:var(--raised); border:1px solid var(--field-line);
    border-radius:var(--r-sm); appearance:none;
    /* If option text ever outruns its track on a system with wider metrics,
       an ellipsis says so rather than hiding the last word under the arrow. */
    text-overflow:ellipsis;
  }
  .field::placeholder{color:var(--faint)}
  select.field{
    cursor:pointer; padding-right:34px;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  }
  .segmented{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:26px}
  .seg{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    padding:7px 14px; border-radius:980px; font-size:13.5px; letter-spacing:-.01em;
    color:var(--body); background:var(--raised); border:1px solid transparent;
    font-family:inherit;
  }
  .seg:hover{color:var(--ink)}
  .seg[aria-pressed="true"]{background:var(--accent-wash); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
  .seg .n{font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums}
  .reset{background:none; border:none; font:inherit; font-size:13.5px; color:var(--faint); cursor:pointer; padding:7px 4px}
  .reset:hover{color:var(--accent-ink)}

  /* ---------- table --------------------------------------------- */
  .panel{background:var(--surface); border:1px solid var(--hair-soft); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
  .cols{
    display:grid; grid-template-columns:minmax(0,1.7fr) 128px 176px 92px;
    gap:16px; align-items:center; padding:0 22px;
  }
  .thead{
    height:38px; border-bottom:1px solid var(--hair-soft);
    font-size:11px; font-weight:590; letter-spacing:.045em; text-transform:uppercase; color:var(--faint);
  }
  .thead .end{text-align:right}
  @media (max-width:760px){
    .cols{grid-template-columns:minmax(0,1fr) 84px; gap:10px}
    .hide-sm{display:none}
  }

  .item{border-top:1px solid var(--hair-soft)}
  .item:first-child{border-top:none}
  .rowbtn{
    width:100%; background:none; border:none; font:inherit; color:inherit;
    text-align:left; cursor:pointer; padding-top:15px; padding-bottom:15px;
  }
  .rowbtn:hover{background:color-mix(in srgb, var(--accent) 3%, transparent)}
  /* The panel clips its overflow to keep the corner radius, which sliced the
     left and right of the row's focus ring off. Drawing the ring inside the
     row keeps all four sides visible. */
  .rowbtn:focus-visible{outline-offset:-3px; border-radius:0}
  .who{display:flex; align-items:center; gap:11px; min-width:0}
  .starbtn{
    background:none; border:none; cursor:pointer; padding:2px; line-height:1;
    font-size:15px; color:var(--hair); flex:none;
  }
  .starbtn[aria-pressed="true"]{color:var(--accent)}
  .whotext{min-width:0}
  .nameline{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .nm{font-size:15.5px; font-weight:550; color:var(--ink); letter-spacing:-.018em}
  .sub{font-size:12.5px; color:var(--faint); margin-top:2px; letter-spacing:-.01em}
  .cell{font-size:14px; color:var(--body); letter-spacing:-.015em; min-width:0}
  .end{text-align:right}

  /* The mark is the abi. full stop: same circle, same gradient, at badge size. */
  .mark{
    width:18px; height:18px; border-radius:50%; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #A855F7, #EC4899);
    box-shadow:0 1px 3px rgba(236,72,153,.32);
  }
  .mark svg{width:11px; height:11px; display:block}
  .mark-lg{width:26px; height:26px}
  .mark-lg svg{width:14px; height:14px}
  /* Featured and Active were mixed at the pale end of their hues, where the
     white glyph fell to 1.4:1 and the circle itself sat at 1.3:1 against the
     off-white ground, so the Active mark was invisible in light mode. Both
     gradients are deepened to the lightest tone that still clears 3:1 against
     white, the off-white ground and the black ground, which is as light as
     "lighter violet to blue" and "light green" can be and still be seen. */
  .mark-feat{background:linear-gradient(135deg, #9773F0, #4189D6); box-shadow:0 1px 3px rgba(65,137,214,.22)}
  .mark-live{width:15px; height:15px; background:linear-gradient(135deg, #2A9C6E, #16855A); box-shadow:none}
  .mark-live svg{width:7px; height:7px}

  .cell.end{display:flex; align-items:center; justify-content:flex-end; gap:9px}
  .legend{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 22px; margin:14px 2px 0}
  @media (max-width:760px){ .legend{grid-template-columns:1fr} }
  .lg b{font-weight:590; color:var(--body)}
  .lg{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--faint);
    letter-spacing:-.01em; line-height:1.45; text-wrap:pretty}
  .lg .mark{margin-top:1px}
  .chev{color:var(--faint); font-size:12px; transition:transform .2s ease; display:inline-block}
  .item.open .chev{transform:rotate(90deg)}

  .drawer{display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease}
  .item.open .drawer{grid-template-rows:1fr}
  .drawer > div{overflow:hidden}
  .drawer-in{
    padding:4px 22px 24px 52px; display:grid; grid-template-columns:1.25fr 1fr; gap:30px;
  }
  @media (max-width:760px){ .drawer-in{grid-template-columns:1fr; padding-left:22px} }
  .facts{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px}
  .k{font-size:10.5px; font-weight:590; letter-spacing:.045em; text-transform:uppercase; color:var(--faint)}
  .v{font-size:14px; color:var(--ink); margin-top:3px; letter-spacing:-.015em}
  .v.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px}
  .span2{grid-column:1/-1}
  .chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
  .chip{
    font-size:11.5px; padding:3px 10px; border-radius:980px; border:1px solid var(--hair);
    color:var(--faint); background:var(--raised); letter-spacing:-.01em;
  }
  .chip.on{border-color:var(--good-line); color:var(--good-ink); background:var(--good-wash)}
  .aside p{margin:0 0 14px; font-size:13.5px; line-height:1.5; color:var(--muted); letter-spacing:-.012em}
  .btn{
    display:inline-block; padding:9px 18px; border-radius:980px; font-size:14px; font-weight:520;
    letter-spacing:-.015em; background:var(--accent); color:#fff; border:1px solid var(--accent);
  }
  .btn:hover{filter:brightness(1.08)}
  .btn.quiet{background:transparent; color:var(--accent-ink); border-color:var(--hair)}
  .btn.quiet:hover{border-color:var(--accent); filter:none}
  .empty{padding:44px 22px; text-align:center; color:var(--faint); font-size:15px}

  /* ---------- sections ------------------------------------------ */
  section.block{padding:76px 0 0}
  .block h2{
    margin:0 0 12px; font-size:clamp(26px,3.4vw,34px); font-weight:620; color:var(--ink);
    letter-spacing:-.03em; line-height:1.12; text-wrap:balance;
  }
  .block .intro{margin:0 0 34px; max-width:64ch; font-size:17px; color:var(--muted); letter-spacing:-.018em}

  .tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  @media (max-width:820px){ .tiers{grid-template-columns:1fr} }
  .tier{
    background:var(--surface); border:1px solid var(--hair-soft); border-radius:var(--r-lg);
    padding:26px 24px 28px; display:flex; flex-direction:column;
  }
  .tier.lead{border-color:color-mix(in srgb, var(--accent) 34%, transparent)}
  .tier .tname{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin:0}
  .tier .tnote{font-size:12.5px; color:var(--faint); margin:3px 0 0; letter-spacing:-.01em}
  .tier .cost{margin:18px 0 20px; font-size:34px; font-weight:620; color:var(--ink); letter-spacing:-.035em}
  .tier .cost em{font-style:normal; font-size:14px; font-weight:450; color:var(--faint); letter-spacing:-.01em}
  .tier ul{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:9px}
  .tier li{font-size:13.5px; color:var(--body); padding-left:20px; position:relative; letter-spacing:-.012em; line-height:1.45}
  .tier li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-size:12px}
  .tier .cta{margin-top:auto}

  .notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px}
  .notes h3{margin:0 0 7px; font-size:14px; font-weight:590; color:var(--ink); letter-spacing:-.02em}
  .notes p{margin:0; font-size:13.5px; line-height:1.5; color:var(--muted); letter-spacing:-.012em}

  footer{margin-top:78px; border-top:1px solid var(--hair-soft); padding:28px 0 56px}
  footer p{margin:0; font-size:12.5px; color:var(--faint); line-height:1.55; letter-spacing:-.01em}
  footer b{color:var(--muted); font-weight:550}

  /* Transitions were already cut, but the drawer's grid-template-rows animation
     and any smooth scrolling are motion too, so the whole surface is stilled. */
  @media (prefers-reduced-motion:reduce){
    *, *::before, *::after{
      transition:none !important; animation:none !important; scroll-behavior:auto !important;
    }
    html{scroll-behavior:auto !important}
  }


  /* ---------- map ------------------------------------------------------
     Progressive enhancement: the list is the page, the map is an addition.
     Without JavaScript the map block never appears and nothing is lost.   */
  .mapwrap{display:none; margin:0 0 12px}
  .js .mapwrap{display:block}
  #map{
    height:460px; border-radius:var(--r-lg); border:1px solid var(--hair-soft);
    background:var(--raised); box-shadow:var(--shadow); overflow:hidden;
  }
  @media (max-width:760px){ #map{height:320px} }
  .mapnote{margin:9px 2px 0; font-size:12px; color:var(--faint); letter-spacing:-.01em}
  .leaflet-container{font-family:var(--sans) !important; background:var(--raised) !important}
  .leaflet-popup-content-wrapper{
    border-radius:var(--r) !important; box-shadow:var(--shadow) !important;
    background:var(--surface) !important; color:var(--body) !important;
  }
  .leaflet-popup-tip{background:var(--surface) !important}
  .leaflet-popup-content{margin:12px 14px !important; font-size:13.5px !important; letter-spacing:-.01em}
  .pop-nm{display:block; font-weight:600; color:var(--ink); font-size:14.5px; margin-bottom:2px}
  .pop-meta{display:block; color:var(--faint); font-size:12px; margin-bottom:8px}
  .pop-link{color:var(--accent-ink); font-weight:550}
  .cluster{
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent) 22%, var(--surface));
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color:var(--accent-ink); border-radius:50%; font-size:12px; font-weight:600;
    letter-spacing:-.01em;
  }

  /* ---------- footer ---------------------------------------------------- */
  footer{
    margin-top:64px; padding:26px 24px 54px; border-top:1px solid var(--hair-soft);
    font-size:12.5px; color:var(--faint); letter-spacing:-.01em; line-height:1.6;
  }
  footer p{margin:0 0 6px}
  footer a{color:var(--accent-ink)}
  .brand a{display:inline-flex; align-items:baseline}
  .empty{padding:40px 22px; text-align:center; color:var(--faint); font-size:14px}

  /* ---------- coverage statement ---------------------------------------- */
  .coverage{
    max-width:70ch; margin:22px auto 0; padding:14px 18px;
    background:var(--raised); border:1px solid var(--hair-soft);
    border-radius:var(--r); font-size:14px; line-height:1.5;
    color:var(--muted); letter-spacing:-.012em; text-align:left; text-wrap:pretty;
  }
  .coverage b{color:var(--ink); font-weight:590}
  .coverage a{color:var(--accent-ink); font-weight:550}
  .cc{display:block; font-size:11.5px; color:var(--faint); margin-top:2px; letter-spacing:-.005em}

  /* ---------- print -----------------------------------------------------
     People print a company entry to take into a meeting, so the sheet has to
     stand on its own: the facts, the marks and the date retrieved, with the
     controls and the map gone because neither survives paper. The marks are
     forced to print their colour, because a mark that drops out takes the
     one thing the page is for with it.                                     */
  @media print{
    :root{
      color-scheme:light;
      --ground:#FFFFFF; --surface:#FFFFFF; --raised:#FFFFFF;
      --ink:#000000; --body:#1A1A1A; --muted:#333333; --faint:#444444;
      --hair:#999999; --hair-soft:#BBBBBB; --field-line:#999999;
      --accent:#96114F; --accent-ink:#6B0B3A; --accent-wash:#FFFFFF;
      --shadow:none;
    }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
    body{background:#fff; font-size:11pt; line-height:1.4}
    .wrap{max-width:none; padding:0}

    /* Nothing here does anything on paper. */
    nav, .controls, .segmented, .mapwrap, .proto, .chev, .reset{display:none !important}

    /* The masthead stays, so a sheet handed round a meeting says where it came
       from, but sticky and blurred both misbehave in print layout. */
    header{position:static; background:none; border-bottom:1pt solid var(--hair);
           backdrop-filter:none; -webkit-backdrop-filter:none}
    .bar{height:auto; padding-bottom:8pt}

    .hero{padding:0 0 12pt; text-align:left}
    h1{font-size:20pt; line-height:1.15}
    .lede{font-size:11pt; max-width:none}
    .stamp{margin-top:8pt}
    .coverage{max-width:none; margin:8pt 0 0; padding:8pt 10pt; border:1pt solid var(--hair)}
    section.block{padding:16pt 0 0}
    .block h2{font-size:14pt}
    .block .intro{font-size:11pt}
    .notes h3{font-size:11pt}
    .panel, .tier{border:1pt solid var(--hair); border-radius:0; box-shadow:none; overflow:visible}

    /* An entry split across a page fold is the one thing worth guarding. */
    .item, .tier, .notes > div, .facts > div, .lg{break-inside:avoid; page-break-inside:avoid}
    h1, h2, h3{break-after:avoid; page-break-after:avoid}

    /* On paper a link cannot be followed, so the address has to be on the page. */
    a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:var(--muted); word-break:break-all}
    a[href^="/"]::after{content:" (europemsp.com" attr(href) ")"; font-size:9pt; color:var(--muted)}
    /* A URL under all fifty-seven rows doubles the sheet's length and says
       nothing the company number does not, so only prose links carry one. */
    .brand a::after, nav a::after, .rowbtn::after, .kicker a::after{content:"" !important}

    /* The register table only ever printed two of its four columns. */
    .hide-sm{display:block}
    .cols{grid-template-columns:minmax(0,1.7fr) 100px 60px 70px; padding:0 10pt}

    footer{margin-top:16pt; padding:8pt 0 0}
  }

  /* ---------- skip link and visually hidden text ------------------------
     The register column shows a mark and nothing else, so the word has to
     exist for anyone who cannot see the colour or the glyph.              */
  .vh{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .skip{
    position:absolute; left:-9999px; top:0; z-index:60;
    background:var(--surface); color:var(--ink); border:1px solid var(--hair);
    border-radius:var(--r-sm); padding:10px 16px; font-size:14px; font-weight:550;
  }
  .skip:focus{left:12px; top:12px}