/* =============================================================================
   VERSION 03 — SERVICE PANELS
   Homepage reference: #svc3 "Our Services".
   The services section's exact construction: a masked 64px grid behind the
   header, the largest heading on the site, a pill rail that sticks under the
   fixed bar as you scroll, and a record built like a service panel — a narrow
   summary column beside a wide detail column, both on a tinted ground.
   ============================================================================= */

.w3 .s1{ position: relative; background: var(--paper); }
.w3 .s2{ background: var(--paper); padding-top: clamp(30px, 3.4vw, 52px); }
.w3 .hp-h{ font-size: clamp(42px, 7.4vw, 88px); line-height: .96; }
.w3 .hp-head.is-sm .hp-h{ font-size: clamp(30px, 4.4vw, 50px); }

/* ---------- the company record as fact tiles ------------------------------- */
.w3 .w3-tiles{
  position: relative; z-index: 1;
  margin-top: clamp(28px, 3.4vw, 46px); display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.w3 .w3-t{
  display: grid; gap: 6px; align-content: start; padding: 20px;
  border: 1px solid var(--line-b); border-radius: var(--r-md);
  background: var(--pale);
}
.w3 .w3-t svg{ color: var(--accent); margin-bottom: 4px; }
.w3 .w3-tk{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.w3 .w3-tv{ font-size: 15.5px; font-weight: 700; line-height: 1.38; color: var(--ink); }
.w3 .w3-tk, .w3 .w3-tv, .w3 .w3-tn{ min-width: 0; overflow-wrap: break-word; }
.w3 .w3-t:nth-child(4) .w3-tv{ font-family: var(--mono); font-size: 13.5px; word-break: break-all; }
.w3 .w3-tn{ font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* ---------- the pill rail (#svc3 .s3-catwrap) ------------------------------
   NOT sticky. It was `position: sticky; top: var(--barh); z-index: 25` and it
   rode down the page over the records, a second travelling bar under the site
   header and the section tabs that are already fixed up there. It is a jump
   list, read once, so it stays where it is written: under the section head,
   centred, and it scrolls away with everything else. Nothing is left that can
   lift it out of flow or float it over a card — no sticky, no z-index. */
.w3 .w3-railwrap{
  margin-top: clamp(20px, 2.4vw, 30px); padding: 0; background: transparent;
}
.w3 .w3-rail{
  display: flex; gap: 4px; justify-content: center; align-items: stretch;
  padding: 5px; border: 1px solid var(--line-b); border-radius: 14px;
  background: var(--paper); box-shadow: var(--shadow-s);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  scroll-padding-inline: 5px;
  width: fit-content; max-width: 100%; margin-inline: auto;
}
.w3 .w3-rail::-webkit-scrollbar{ display: none; }
.w3 .w3-cat{
  flex: none; scroll-snap-align: center;
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 11px 18px; border-radius: 10px; border: 0;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); background: transparent;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.w3 .w3-cat svg{ color: var(--ink-4); transition: color .18s var(--ease); }
.w3 .w3-cat:hover{ background: var(--mist); color: var(--ink); }
.w3 .w3-cat[aria-current="true"]{ background: var(--hue-pale); color: var(--hue); }
.w3 .w3-cat[aria-current="true"] svg{ color: var(--hue); }

/* ---------- the records, built like service panels -------------------------
   All seven stand open, one under the next, with the section's own gap between
   them — the same construction as #svc3 .s3-rows on the home page. Nothing is
   hidden, so nothing has to be switched on to be read or printed. */
.w3 .w3-rows{
  margin-top: clamp(26px, 3.4vw, 44px);
  display: flex; flex-direction: column; gap: clamp(20px, 2.2vw, 30px);
}
.w3 .w3-row{
  --rp: clamp(20px, 2.3vw, 34px);
  /* was + 84px, the height of the rail while it travelled with the page */
  scroll-margin-top: calc(var(--barh) + 18px);
  display: grid; gap: clamp(22px, 2.4vw, 40px);
  grid-template-columns: minmax(238px, 300px) minmax(0, 1fr);
  padding: var(--rp);
  background: var(--hue-pale);
  border: 1px solid var(--hue-edge);
  border-radius: var(--r-lg);
}
.w3 .w3-row:target{ outline: 2px solid var(--hue); outline-offset: 3px; }

.w3 .w3-info{ display: flex; flex-direction: column; align-items: flex-start; }
.w3 .w3-info .hp-tile{ background: var(--paper); }
.w3 .w3-cat-l{
  margin-top: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hue); font-weight: 600;
}
.w3 .w3-info h3{
  margin-top: 9px; font-size: clamp(20px, 2.1vw, 26px); font-weight: 780;
  letter-spacing: -.03em; line-height: 1.18; color: var(--ink);
}
.w3 .w3-short{ margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.w3 .w3-info .ld-pill{ margin-top: 16px; background: var(--paper); }
.w3 .w3-note{ margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

.w3 .w3-detail{
  min-width: 0; padding: clamp(20px, 2.2vw, 30px);
  background: var(--paper); border: 1px solid var(--line-b); border-radius: var(--r-md);
}
.w3 .w3-g{ display: grid; gap: 20px 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.w3 .w3-g dt{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.w3 .w3-g dd{ margin-top: 7px; font-size: 14px; line-height: 1.62; color: var(--ink-2); }

.w3 .s2-safe{ background: var(--pale); border-color: var(--line-b); }

/* ---------- verification support: the next action, not a section ------------
   #verify was its own <section> — a full-bleed band with its own ground, its
   own top rule and the page's section padding (clamp(46px, 5vw, 92px)) above
   AND below. Three short things, a line of copy, an address and a button, were
   costing ~230px and reading as a second subject, when they are only what you
   do after the records.

   It is now a strip at the foot of #docs, inside that section's own wrap, so
   it sits under the notes and shares their measure: Legal Documents → what we
   never publish → this. It keeps id="verify" — the page's tab row resolves the
   tab by getElementById, not by section, and the hero's "Verification support"
   link points at the same id, so both still land here.

   The links keep .s3-mail / .s3-cta: those are .pg-scoped atoms in
   legal/_page.css and never belonged to the section that was removed. */
.w3 .ld-cta{
  margin-top: clamp(16px, 1.8vw, 24px);
  scroll-margin-top: calc(var(--barh) + 18px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px clamp(20px, 3vw, 36px);
  padding: clamp(15px, 1.7vw, 20px) clamp(16px, 1.9vw, 24px);
  background: var(--pale); border: 1px solid var(--line-b); border-radius: var(--r-md);
}
.w3 .ld-cta-s{ display: flex; align-items: flex-start; gap: 13px; min-width: 0; flex: 1 1 320px; }
.w3 .ld-cta-i{
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; color: var(--accent);
  background: var(--paper); border: 1px solid var(--line-b);
}
.w3 svg.vi{ width: 19px; height: 19px; }
.w3 .ld-cta-t h3{ font-size: 16.5px; font-weight: 750; letter-spacing: -.015em; color: var(--ink); }
.w3 .ld-cta-t p{ margin-top: 5px; max-width: 56ch; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.w3 .ld-cta-a{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.w3 .ld-cta-a .s3-mail{ margin-top: 0; font-size: 14px; }
.w3 .ld-cta-a .s3-cta{ height: 42px; padding: 0 20px; font-size: 14px; }

@media (max-width: 940px){
  .w3 .w3-row{ grid-template-columns: minmax(0, 1fr); }
  .w3 .w3-info{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 16px; }
  .w3 .w3-info .hp-tile{ margin: 0; }
  .w3 .w3-cat-l{ margin-top: 0; width: 100%; order: -1; margin-bottom: 12px; }
  .w3 .w3-info h3{ margin-top: 0; flex: 1 1 260px; }
  .w3 .w3-short{ flex: 1 1 100%; }
  .w3 .w3-info .ld-pill{ margin-top: 12px; }
  .w3 .w3-note{ flex: 1 1 100%; }
  /* the strip stacks: the words, then the two controls under them */
  .w3 .ld-cta{ justify-content: flex-start; }
  .w3 .ld-cta-a{ flex: 1 1 100%; }
}
@media (max-width: 760px){
  .w3 .w3-railwrap{ padding: 8px 0; }
  .w3 .w3-railwrap .wrap{ width: 100%; padding-inline: var(--pad); }
  .w3 .w3-rail{ width: auto; margin-inline: 0; justify-content: flex-start; border-radius: 12px; }
  .w3 .w3-cat{ padding: 10px 14px; font-size: 13.5px; border-radius: 9px; }
  .w3 .w3-row{ padding: 18px; border-radius: 18px; }
  .w3 .w3-detail{ padding: 18px; }
}

/* =============================================================================
   THE DOCUMENTS THEMSELVES                                      added 2026-09-05
   Three of the seven records carry a real scan. docfig() in _h.php renders it:
   a framed picture that opens the full-size copy in a new tab, with a caption
   under it.

   `height: auto` is not decoration — the width/height ATTRIBUTES on the img are
   a ratio hint the UA will otherwise honour literally and render a 760px-tall
   smear. The attributes stay because they reserve the right box before the
   file lands; this is what makes them a ratio rather than a size.
   ============================================================================= */
.w3 .w3-pv{ margin: 0; }

.w3 .w3-pv-a{
  position: relative; display: block; overflow: hidden; text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line-b); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(15, 27, 61, .06), 0 10px 24px -14px rgba(15, 27, 61, .30);
}
.w3 .w3-pv-a img{ display: block; width: 100%; height: auto; }

/* Always visible, never a hover-only affordance — half the readers of this page
   are on a phone and would never see it. */
.w3 .w3-pv-z{
  position: absolute; right: 9px; bottom: 9px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600;
  color: #FFFFFF; background: rgba(15, 27, 61, .84);
}
.w3 .w3-pv-z .zi{ width: 13px; height: 13px; }

.w3 .w3-pv-a:hover{ border-color: var(--hue, var(--ink-4)); }
.w3 .w3-pv-a:focus-visible{ outline: 2px solid var(--hue, var(--accent)); outline-offset: 3px; }

.w3 .w3-pv-c{
  margin-top: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.5; color: var(--ink-4);
}

/* ---------- inside a document record --------------------------------------- */
.w3 .w3-info .w3-pv{ margin-top: 18px; width: 100%; }

/* (A registered-office band lived here on 2026-09-05 and was removed the same
   day on request — the page carries the seven documents and nothing else. It
   used docfig() under an .ofc-pv prefix; .w3-pv above is now the only caller.) */

@media (max-width: 940px){
  /* .w3-info turns into a wrapping row here, so the picture has to claim its
     own line. Capped, or a portrait certificate becomes a 700px tower on a
     tablet where the column is suddenly the full page. */
  .w3 .w3-info .w3-pv{ flex: 1 1 100%; max-width: 340px; margin-top: 16px; }
}
@media (max-width: 760px){
  .w3 .w3-info .w3-pv{ max-width: none; }
}

/* A record that shows its certificate has a summary column ~400px taller than
   the detail column beside it, and the panel's content does not grow to match.
   Letting the panel shrink leaves a tinted hole; letting it stretch with the
   content at the top leaves a white one. So the panel stretches AND the buttons
   are pushed to its foot, where they line up with the bottom of the picture
   opposite. On every record with no scan the detail column is the taller of the
   two, its height is its content's height, and `margin-top: auto` has no room
   to add — so those rows are pixel-for-pixel what they were. */
.w3 .w3-detail{ display: flex; flex-direction: column; }
.w3 .w3-detail .ld-act{ margin-top: auto; padding-top: 4px; }


/* ---------- an account published in full ------------------------------------
   The bank record is the one entry whose payload is data rather than a scan,
   so it gets neither the .ld-ref pill (built for a single reference) nor the
   two-column .w3-g (built for prose). Both groups share ONE fixed label
   column, so every value on the record starts on the same left edge whatever
   its group — that alignment is the whole point of the block: a vendor team
   reads down the values, not across the labels. */
.w3 .ld-acct{
  margin: 18px 0 0; padding: 16px 18px;
  display: grid; gap: 18px 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  background: var(--hue-pale); border: 1px solid var(--hue-edge);
  border-radius: var(--r-md);
}
.w3 .ld-acct-h{
  margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--hue);
}
.w3 .ld-acct-l{
  margin: 9px 0 0;
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  column-gap: 16px; row-gap: 7px; align-items: baseline;
}
.w3 .ld-acct-l dt{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.7;
}
.w3 .ld-acct-l dd{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.w3 .ld-acct-l dd.is-mono{
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em;
  font-weight: 600; color: var(--ink); word-break: break-word;
}
.w3 .ld-acct-n{ margin: 9px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

/* A QR is a machine target, not a document. Two things follow. It keeps a
   white ground whatever tint the record carries — a QR read off a coloured
   plate is a QR that sometimes does not read. And the "Full size" cue, which
   on a certificate sits harmlessly over a margin, lands on the bottom-right
   of a QR, which is data and (at this version) an alignment pattern. Error
   correction M tolerates ~15% loss and the cue is close to it, so the cue is
   moved off the code instead of gambled on: the image reserves a band under
   itself and the cue sits in it, on white. */
.w3 .w3-pv-a.is-qr{ background: #FFFFFF; }
.w3 .w3-pv-a.is-qr img{ padding: 4px 4px 30px; }

@media (max-width: 620px){
  /* 132px of label against a 190px value column is two words a line; the
     label goes above its value instead. */
  .w3 .ld-acct{ grid-template-columns: minmax(0, 1fr); }
  .w3 .ld-acct-l{ grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .w3 .ld-acct-l dd{ margin-bottom: 8px; }
  .w3 .ld-acct-l dd:last-child{ margin-bottom: 0; }
}

@media (max-width: 620px){
  /* a 42px button beside a wrapping address is two stranded halves */
  .w3 .ld-cta-a .s3-cta{ flex: 1 1 100%; justify-content: center; }
}