/* ============================================================================
   uksubsidiary.com — stylesheet.

   Andy, 7 Sep 2026, having rejected four attempts: "Look at
   https://www.british-business-bank.co.uk/ THIS is the style I am looking for".

   I opened it, measured it, and built this from what is actually there:

     Chamfer      Every panel, button, card and image has its top-left and
                  bottom-right corners cut at 45 degrees. Nothing is rounded,
                  nothing is a plain rectangle. 8px on controls, 24px on cards,
                  120px+ on hero imagery. This one device is what makes that
                  site look designed, and it is the thing to keep.
     Colour       Deep navy #142855 for dark bands and headings, a bright true
                  blue #0054BA for buttons and links, a pale blue-grey #EFF4F6
                  for quiet panels. Accents (mint, amber, pink) appear once or
                  twice a page, never as a section ground.
     Type         Light body (300), semibold headings (600), sentence case.
                  Headings 56/64 with -0.02em. Lead paragraphs 24/36 light.
     Rhythm       96px section padding, 1248px measure, generous white space.
     Footer       Short. Three links, a legal paragraph, one small legal row.

   Written once as a system. If a rule needs changing, change it where it lives.
   Do not append a patch block to the bottom of this file: the previous
   stylesheet reached 796 lines that way and had to be thrown out.

   Standing corrections, none of which may be undone:
     no Buzz lime, Anton or Lato; no prices; no phone number; no eyebrow labels
     above headings; no marker glyph; no saltire device; Inter throughout.
   ============================================================================ */

:root{
  /* Union flag. Two hues and white, per Andy: "I wanted union flag colours not
     just shades of blue". Pantone 280 blue and Pantone 186 red, the actual flag
     specification. Navy carries structure and text; red marks anything you can
     act on. The reference site's own accents (mint, amber, pink) are gone. */
  --navy:#012169; --navy-d:#000E38; --slate:#33456E;
  --red:#C8102E; --red-d:#A00D24; --red-l:#E8536B;
  --pale:#EEF1F7; --pale-2:#DCE3F0; --off:#F7F8FB;
  --ink:#141A24; --ink-70:#3F4A5E; --ink-50:#6A7488;
  --line:#DCE3F0; --line-2:#BEC8DE; --white:#fff;

  --ch:8px; --ch-lg:24px; --ch-xl:120px;
  --wrap:1248px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --sh:0 18px 40px -26px rgba(20,40,85,.4);
}

/* The signature. Applied by class so it can be reused, and by --ch so a
   component can widen its own cut without a second rule. */
.cut{ clip-path:polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
      calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch)); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ max-width:100%; overflow-x:hidden; }
body{ margin:0; background:var(--white); color:var(--ink-70);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:300; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 var(--s2); } p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 var(--s2); padding-left:1.15em; }
li{ margin-bottom:.5em; }
strong,b{ font-weight:600; color:var(--ink); }

h1,h2,h3,h4{ margin:0; color:var(--navy); font-weight:600; line-height:1.14; letter-spacing:-.02em; }
h1{ font-size:clamp(34px,4.4vw,56px); }
h2{ font-size:clamp(28px,3.4vw,44px); }
h3{ font-size:24px; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }
h4{ font-size:19px; letter-spacing:-.01em; }
h1,h2{ text-wrap:balance; } p{ text-wrap:pretty; }
.lead,.standfirst{ font-size:clamp(19px,2vw,24px); line-height:1.5; font-weight:300; color:var(--ink-70); }

.inner{ max-width:var(--wrap); margin:0 auto; padding:0 var(--s3); }
.section{ padding:var(--s7) 0; }
.bg-white{ background:var(--white); }
.bg-paper{ background:var(--pale); }
.bg-navy{ background:var(--navy); color:#C6D2E6; }
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{ color:#fff; }
.bg-navy strong,.bg-navy b{ color:#fff; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; gap:.55em; font:inherit; font-weight:500;
  font-size:17px; line-height:1; padding:16px 30px; border:0; cursor:pointer;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition:background .16s, color .16s; }
.btn::after{ content:"›"; font-size:1.35em; line-height:0; margin-top:-.05em; }
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-d); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ background:var(--navy-d); }
.btn-outline{ background:var(--white); color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--line-2); }
.btn-outline:hover{ background:var(--pale); }
.bg-navy .btn-outline,.masthead .btn-outline{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
.bg-navy .btn-outline:hover,.masthead .btn-outline:hover:hover{ background:#fff; color:var(--navy); }
.btn-row,.masthead-acts,.opener-foot{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4); }
.go{ color:var(--red); font-weight:500; font-size:16px; }
.go::after{ content:" ›"; }

/* ── utility strip and header ─────────────────────────────────────────── */
.utility{ background:var(--navy); color:#93A6C8; font-size:14px; }
.utility .inner{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding-top:10px; padding-bottom:10px; }
.u-left,.u-right{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.utility a{ color:#D3DDEE; } .utility a:hover{ color:#fff; }
.ctry-select{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25);
  font:inherit; font-size:14px; padding:5px 10px; cursor:pointer;
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
@media(max-width:860px){ .utility .inner{ justify-content:center; } .u-right{ display:none; } }

.site-header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; }
.nav-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--s3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:80px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:40px; height:40px; background:var(--navy); color:#fff; display:grid;
  place-items:center; font-weight:600; font-size:13px; letter-spacing:.03em;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.brand-word{ font-weight:600; font-size:20px; color:var(--navy); letter-spacing:-.025em; white-space:nowrap; }
.nav-menu{ display:flex; align-items:center; }
.nav-item{ position:relative; }
.nav-item>a,.nav-item>button{ display:inline-flex; align-items:center; gap:.35em; background:none;
  border:0; cursor:pointer; font:inherit; font-weight:400; font-size:16px; color:var(--ink);
  padding:12px 13px; }
.nav-item>a:hover,.nav-item>button:hover,.nav-item.open>button{ color:var(--red); }
.caret{ font-size:.6em; opacity:.65; }
.dropdown-panel{ position:absolute; top:calc(100% + 8px); left:0; display:none; background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh); padding:var(--s2); min-width:300px; z-index:70; }
.nav-item.open .dropdown-panel{ display:block; }
/* .nav-item.open .dropdown-panel is three classes and outranks
   .dropdown-panel.wide, so the services panel needs its display set here. */
.nav-item.open .dropdown-panel.wide{ display:flex; }
/* No display here: .dropdown-panel.wide (two classes) would outrank the base
   .dropdown-panel{display:none} and hold the services panel permanently open,
   which is exactly what shipped once. The open state sets display above. */
.dropdown-panel.wide{ min-width:920px; max-width:calc(100vw - 32px); flex-wrap:wrap;
  gap:var(--s3); align-items:flex-start; }
.dd-col{ flex:1 1 170px; min-width:0; }
.dd-all{ flex:1 0 100%; border-top:1px solid var(--line); padding-top:8px; }
.dropdown-panel a{ display:block; font-size:16px; color:var(--ink-70); padding:7px 10px; }
.dropdown-panel a:hover{ background:var(--pale); color:var(--red); }
.dd-head{ font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); padding:6px 10px 8px; }
.nav-cta{ display:flex; align-items:center; gap:var(--s2); }
.nav-toggle{ display:none; width:48px; height:44px; background:var(--navy); border:0; cursor:pointer;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ display:block; background:#fff;
  height:2px; width:20px; margin:0 auto; position:relative; content:""; }
.nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; }
@media(max-width:1240px){
  .nav-menu{ display:none; }
  .nav-toggle{ display:block; }
  .site-header.open .nav-menu{ display:block; position:absolute; top:80px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line); padding:var(--s2) var(--s3) var(--s4);
    max-height:76vh; overflow:auto; }
  .site-header.open .nav-item{ display:block; }
  .site-header.open .dropdown-panel{ position:static; display:none; box-shadow:none; border:0;
    background:var(--pale); min-width:0; margin:6px 0 12px; }
  .site-header.open .nav-item.open .dropdown-panel{ display:block; }
  .site-header.open .dd-col{ flex:none; }
}
@media(max-width:640px){ .nav-cta .btn{ display:none; } }

/* ── 1. masthead ──────────────────────────────────────────────────────── */
.masthead{ background:var(--navy); color:#C6D2E6; position:relative; overflow:hidden; }
.masthead::before{ content:""; position:absolute; inset:0 0 0 60%; background:var(--red);
  clip-path:polygon(240px 0, 100% 0, 100% 100%, 0 100%); }
.masthead::after{ content:""; position:absolute; inset:0 0 0 60%;
  background:url("/assets/img/uk/hero.webp") center/cover;
  clip-path:polygon(240px 0, 100% 0, 100% 100%, 0 100%); transform:translateX(7px); }
.masthead .inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.18fr .82fr;
  gap:var(--s5); align-items:center; padding-top:var(--s7); padding-bottom:var(--s7); }
.masthead h1{ color:#fff; max-width:19ch; }
.masthead .standfirst{ color:#C6D2E6; max-width:44ch; margin-top:var(--s3); }
.masthead-note{ color:#8FA3C6; font-size:15px; max-width:42ch; margin-top:var(--s4); }
.mast-panel,.form-card{ background:#fff; padding:var(--s4); box-shadow:var(--sh);
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.mast-panel h2{ font-size:24px; }
/* One field per row in the hero: two columns inside a panel this size gave
   170px inputs. */
.mast-panel .form-grid2{ grid-template-columns:1fr; }
.mast-panel .form-card{ padding:0; box-shadow:none; clip-path:none; }
.mast-panel>p{ color:var(--ink-50); font-size:16px; margin:8px 0 var(--s3); }
@media(max-width:1000px){
  .masthead::before,.masthead::after{ display:none; }
  .masthead{ background:linear-gradient(rgba(20,40,85,.93),rgba(20,40,85,.93)), url("/assets/img/uk/hero.webp") center/cover; }
  .masthead .inner{ grid-template-columns:1fr; gap:var(--s5); padding-top:var(--s6); padding-bottom:var(--s6); }
}

/* ── 2. opener (every inner page) ─────────────────────────────────────── */
.opener{ background:var(--navy); color:#C6D2E6; position:relative; overflow:hidden; }
.opener::before{ content:""; position:absolute; right:0; top:0; bottom:0; width:34%;
  background:var(--red); clip-path:polygon(180px 0, 100% 0, 100% 100%, 0 100%); }
.opener::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:34%;
  background:linear-gradient(rgba(1,33,105,.5),rgba(1,33,105,.5)), url("/assets/img/uk/office.webp") center/cover;
  clip-path:polygon(180px 0, 100% 0, 100% 100%, 0 100%); transform:translateX(6px); }
.opener .inner{ position:relative; z-index:2; padding-top:var(--s6); padding-bottom:var(--s6); }
.opener h1{ color:#fff; max-width:20ch; }
.opener .standfirst{ color:#C6D2E6; max-width:62ch; margin-top:var(--s3); }
@media(max-width:900px){ .opener::before,.opener::after{ display:none; } }
.crumbs{ font-size:14px; color:#8FA3C6; margin-bottom:var(--s2); }
.crumbs a{ color:#C6D2E6; } .crumbs a:hover{ color:#fff; }

/* ── 3. section heads ─────────────────────────────────────────────────── */
.shead{ margin-bottom:var(--s5); max-width:70ch; }
.shead p{ color:var(--ink-70); font-size:20px; font-weight:300; margin-top:var(--s2); max-width:62ch; }
.bg-navy .shead p,.bg-navy .shead-row p{ color:#C6D2E6; }
.shead-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4);
  flex-wrap:wrap; margin-bottom:var(--s5); }
.shead-row h2{ max-width:22ch; }
.shead-row p{ color:var(--ink-70); font-size:20px; font-weight:300; margin-top:var(--s2); max-width:60ch; }
.mark{ font-weight:600; color:var(--red); }

/* ── 4. service lines (the colour blocks) ─────────────────────────────── */
.blocks{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s2); }
@media(max-width:1180px){ .blocks{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); } }
@media(max-width:1000px){ .blocks{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .blocks{ grid-template-columns:1fr; } }
.block{ background:#fff; padding:var(--s4) var(--s3) var(--s3); display:flex; flex-direction:column;
  gap:var(--s2); transition:transform .18s;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.block:hover{ transform:translateY(-4px); }
.block h3{ font-size:22px; color:var(--navy); }
.block p{ font-size:16px; color:var(--ink-70); margin:0; }
.block .ic-box{ width:34px; height:34px; color:var(--red); }

/* ── 5. figures ───────────────────────────────────────────────────────── */
.figures{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }
@media(max-width:820px){ .figures{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.figures div{ border-top:3px solid var(--red); padding-top:var(--s2); }
.figures b{ display:block; font-size:clamp(36px,4.4vw,52px); font-weight:600; color:var(--navy);
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.figures span{ display:block; margin-top:10px; font-size:16px; color:var(--ink-70); }
.figures-src{ margin-top:var(--s3); font-size:14px; color:var(--ink-50); }
.bg-navy .figures b{ color:#fff; } .bg-navy .figures span{ color:#C6D2E6; }
.bg-navy .figures div{ border-top-color:var(--red-l); }
.bg-navy .figures-src{ color:#8FA3C6; }

/* ── 6. numbered steps ────────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
@media(max-width:900px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--pale); padding:var(--s4) var(--s3); display:flex; flex-direction:column;
  gap:var(--s2); transition:background .16s;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.step:hover{ background:var(--pale-2); }
.step-n{ width:34px; height:34px; background:#fff; color:var(--navy); font-weight:600; font-size:15px;
  display:grid; place-items:center;
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.step h3{ font-size:21px; color:var(--navy); }
.step p{ font-size:16px; color:var(--ink-70); margin:0; flex:1; }
.step-go{ color:var(--red); font-weight:500; }

/* ── 7. photo band: a chamfered panel overlapping a photograph ────────
   The panel used to carry .inner itself, so its own max-width fought the
   wrapper's auto margins and it floated in the middle of the band. The photo
   is now the section's own layer and the panel sits inside the normal wrap. */
.photoband{ position:relative; background:var(--white); }
.pb-img{ position:absolute; inset:0 0 0 42%;
  background:url("/assets/img/uk/band-city.webp") center/cover;
  clip-path:polygon(160px 0, 100% 0, 100% 100%, 0 100%); }
.photoband .inner{ position:relative; z-index:2; padding-top:var(--s7); padding-bottom:var(--s7); }
.pb-copy{ background:var(--pale); padding:var(--s5); max-width:560px;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.pb-copy p{ color:var(--ink-70); margin-top:var(--s3); }
.pb-copy .btn{ margin-top:var(--s3); }
.photoband.flip .pb-img{ inset:0 42% 0 0; clip-path:polygon(0 0, 100% 0, calc(100% - 160px) 100%, 0 100%); }
.photoband.flip .pb-copy{ margin-left:auto; }
@media(max-width:980px){
  .pb-img,.photoband.flip .pb-img{ position:relative; inset:auto; height:260px; clip-path:none; }
  .photoband .inner{ padding-top:var(--s5); padding-bottom:var(--s6); }
  .pb-copy{ max-width:none; padding:var(--s4); }
}

/* ── 8. cards ─────────────────────────────────────────────────────────── */
.grid{ display:grid; gap:var(--s3); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:960px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:660px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.card{ background:#fff; padding:var(--s3); display:flex; flex-direction:column; gap:10px;
  box-shadow:0 0 0 1px var(--line); transition:transform .18s, box-shadow .18s;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
a.card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.card h3{ font-size:21px; color:var(--navy); }
.card p{ font-size:16px; color:var(--ink-70); margin:0; }
.svc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); }
.chip{ font-size:13px; font-weight:500; color:var(--slate); background:var(--pale); padding:5px 11px;
  white-space:nowrap;
  clip-path:polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.who{ font-size:15px; color:var(--slate); font-weight:500; }
.featured{ background:var(--pale); }

/* ── 9. service register ──────────────────────────────────────────────── */
.svc-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); }
@media(max-width:760px){ .svc-list{ grid-template-columns:1fr; } }
.svc-item{ background:#fff; padding:var(--s3); transition:background .16s; }
.svc-item:hover{ background:var(--pale); }
.svc-item h3{ font-size:19px; color:var(--navy); margin-bottom:6px; }
.svc-item p{ font-size:16px; color:var(--ink-70); margin:0; }
.register{ border-top:2px solid var(--navy); }
.reg-row{ display:grid; grid-template-columns:44px 1fr auto; gap:0 var(--s3); align-items:baseline;
  padding:var(--s3) 0; border-bottom:1px solid var(--line); transition:padding-left .16s; }
.reg-row:hover{ padding-left:10px; }
.reg-n{ font-size:14px; font-weight:600; color:var(--red); font-variant-numeric:tabular-nums; }
.reg-main h3{ font-size:20px; color:var(--navy); margin-bottom:4px; }
.reg-main p{ font-size:16px; color:var(--ink-70); margin:0; max-width:72ch; }
.reg-side{ font-size:14px; color:var(--ink-50); white-space:nowrap; }
.reg-row:hover h3{ color:var(--red); }
@media(max-width:660px){ .reg-row{ grid-template-columns:32px 1fr; } .reg-side{ display:none; } }

/* ── 10. tiles with photographs ───────────────────────────────────────── */
.ctry-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }
@media(max-width:1000px){ .ctry-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:720px){ .ctry-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:440px){ .ctry-grid{ grid-template-columns:1fr; } }
.ctry-tile{ position:relative; min-height:210px; display:flex; flex-direction:column;
  justify-content:flex-end; padding:var(--s3); background-size:cover; background-position:center;
  transition:transform .2s;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.ctry-tile::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,40,85,.92) 0, rgba(20,40,85,.55) 34%, rgba(20,40,85,0) 72%); }
.ctry-tile>*{ position:relative; }
.ctry-tile h3{ color:#fff; font-size:20px; }
.ctry-tile span{ display:block; margin-top:4px; color:#C6D2E6; font-size:14px; }
.ctry-tile:hover{ transform:translateY(-4px); }

.tool-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
@media(max-width:900px){ .tool-tiles{ grid-template-columns:1fr; } }
.tool-tile{ background:var(--pale); padding:var(--s4) var(--s3); display:flex; flex-direction:column;
  gap:10px; transition:background .16s;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.tool-tile:hover{ background:var(--pale-2); }
.tool-tile h3{ font-size:21px; color:var(--navy); }
.tool-tile p{ font-size:16px; margin:0; flex:1; }

/* ── 11. named work blocks on a service page ─────────────────────────── */
/* The reader's situation on the left, what they get on the right. Stacked, it
   read as two more full-width paragraphs. */
.svc-top{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s6); align-items:start; }
.svc-top h2{ font-size:clamp(26px,2.8vw,36px); max-width:22ch; }
.svc-top .lead{ font-size:19px; }
@media(max-width:900px){ .svc-top{ grid-template-columns:1fr; gap:var(--s4); } }
.does{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); }
@media(max-width:900px){ .does{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .does{ grid-template-columns:1fr; } }
.does-item{ background:#fff; padding:var(--s3); }
.does-item h3{ font-size:19px; color:var(--navy); margin-bottom:8px; }
.does-item p{ font-size:16px; margin:0; }
.incl,.needs{ background:var(--pale); padding:var(--s4);
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.incl h3,.needs h3{ font-size:20px; color:var(--navy); margin-bottom:var(--s2); }
.check-list{ list-style:none; margin:0; padding:0; }
.check-list li{ position:relative; padding-left:30px; margin-bottom:12px; font-size:16px; }
.check-list li::before{ content:""; position:absolute; left:4px; top:.45em; width:11px; height:6px;
  border:solid var(--red); border-width:0 0 2px 2px; transform:rotate(-45deg); }
.bg-navy .check-list li::before{ border-color:var(--red-l); }
.guide-top{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:start; }
@media(max-width:940px){ .guide-top{ grid-template-columns:1fr; gap:var(--s4); } }
.keyfacts{ background:var(--pale); padding:var(--s4);
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.keyfacts h3{ font-size:20px; color:var(--navy); margin-bottom:var(--s2); }
.keyfacts ul{ list-style:none; margin:0; padding:0; }
.keyfacts li{ position:relative; padding-left:30px; margin-bottom:12px; font-size:16px; }
.keyfacts li::before{ content:""; position:absolute; left:4px; top:.45em; width:11px; height:6px;
  border:solid var(--red); border-width:0 0 2px 2px; transform:rotate(-45deg); }
.keyfacts li:last-child{ margin-bottom:0; }
/* The country "At a glance" panel is a definition list, not a table. It had no
   rule at all and rendered as browser-default indented text. */
.ctry-top{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:start; }
@media(max-width:940px){ .ctry-top{ grid-template-columns:1fr; gap:var(--s4); } }
.ctry-facts{ background:var(--pale); padding:var(--s4);
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.ctry-facts h3{ font-size:20px; color:var(--navy); margin-bottom:var(--s2); }
.ctry-facts dl{ margin:0; }
.ctry-facts dt{ font-weight:600; color:var(--navy); font-size:15px; padding-top:14px;
  border-top:1px solid var(--line-2); margin-top:14px; }
.ctry-facts dt:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.ctry-facts dd{ margin:4px 0 0; font-size:16px; color:var(--ink-70); line-height:1.5; }

/* ── 12. phases and comparison ───────────────────────────────────────── */
.phases{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media(max-width:860px){ .phases{ grid-template-columns:1fr; } }
.ph{ position:relative; border-top:3px solid var(--red); padding-top:var(--s3); }
.ph h3{ font-size:22px; color:var(--navy); margin-bottom:var(--s2); }
.ph ul{ list-style:none; margin:0; padding:0; }
.ph li{ position:relative; padding-left:20px; font-size:16px; margin-bottom:10px; }
.ph li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--line-2); }
.cmp2{ border-top:2px solid var(--navy); }
.cmp-head,.cmp-row{ display:grid; grid-template-columns:1fr 1.25fr 1.25fr; gap:var(--s3); }
.cmp-head{ padding:var(--s2) 0; border-bottom:1px solid var(--line); }
.cmp-head .cmp-a,.cmp-head .cmp-b{ font-size:13px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--navy); }
.cmp-head .cmp-a{ color:var(--red); }
.cmp-row{ padding:var(--s3) 0; border-bottom:1px solid var(--line); align-items:start; }
.cmp-k{ font-weight:600; color:var(--navy); font-size:16px; }
.cmp-a,.cmp-b{ font-size:16px; }
@media(max-width:760px){
  .cmp-head{ display:none; }
  .cmp-row{ grid-template-columns:1fr; gap:4px; }
  .cmp-a::before{ content:"Subsidiary — "; font-weight:600; color:var(--red); }
  .cmp-b::before{ content:"Branch — "; font-weight:600; color:var(--navy); }
}

/* ── 13. figures band ────────────────────────────────────────────────── */
.figwrap{ background:var(--pale); padding:var(--s5) 0; }
.mt2{ margin-top:var(--s2); } .mt3{ margin-top:var(--s3); } .mt4{ margin-top:var(--s4); }
.mt5{ margin-top:var(--s5); } .narrow{ max-width:66ch; }

/* ── 14. FAQ ─────────────────────────────────────────────────────────── */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-item summary{ display:flex; justify-content:space-between; gap:var(--s3); align-items:baseline;
  cursor:pointer; list-style:none; padding:var(--s3) 0; font-weight:500; font-size:19px; color:var(--navy); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--red); font-size:1.5em; line-height:.7; font-weight:300; }
.faq-item[open] summary{ color:var(--red); }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ font-size:16px; max-width:80ch; padding-bottom:var(--s3); margin:0; }

/* ── 15. long-form ───────────────────────────────────────────────────── */
.reading{ display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:0 var(--s6); align-items:start; }
@media(max-width:1080px){ .reading{ grid-template-columns:1fr; } .toc{ display:none; } }
.toc{ position:sticky; top:104px; border-left:2px solid var(--line); padding-left:var(--s3); font-size:15px; }
.toc h2{ font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-50);
  font-weight:600; margin-bottom:12px; }
.toc ol{ list-style:none; margin:0; padding:0; }
.toc li{ margin-bottom:9px; }
.toc a{ color:var(--ink-50); display:block; line-height:1.4; }
.toc a.on{ color:var(--red); font-weight:500; }
.prose{ max-width:74ch; }
.prose h2{ font-size:30px; margin:var(--s6) 0 var(--s3); scroll-margin-top:110px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:21px; margin:var(--s4) 0 10px; }
.prose ul,.prose ol{ margin:var(--s2) 0 var(--s3) 1.15em; }
.prose a{ color:var(--navy); border-bottom:1.5px solid var(--red); }
.prose a:hover{ color:var(--red); }
.prose a.btn{ border-bottom:0; }
.prose a.btn-primary,.prose a.btn-dark{ color:#fff; }
.prose a.btn-outline{ color:var(--navy); }
.prose table{ width:100%; border-collapse:collapse; margin:var(--s4) 0; font-size:16px; }
.prose th,.prose td{ border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; }
.prose th{ background:var(--pale); color:var(--navy); font-weight:600; }
.callout{ background:var(--pale); padding:var(--s4); margin:var(--s5) 0;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.callout h3{ font-size:20px; color:var(--navy); margin-bottom:10px; }
.eg-note{ font-size:14px; color:var(--ink-50); font-style:italic; margin-bottom:8px; }
.art-meta{ font-size:15px; color:var(--ink-50); margin-bottom:var(--s2); }
.rail{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--s5); align-items:start; }
@media(max-width:900px){ .rail{ grid-template-columns:1fr; gap:var(--s3); } }
.rail-label h2{ font-size:24px; } .rail-label p{ font-size:16px; color:var(--ink-50); margin-top:8px; }

/* ── 15b. primary sources ────────────────────────────────────────────────
   The figures were always traceable; nothing on the page said so. */
.sources{ border-top:2px solid var(--navy); padding-top:var(--s3); }
.sources h2{ font-size:20px; }
.sources>p{ font-size:16px; color:var(--ink-50); margin:8px 0 var(--s3); max-width:64ch; }
.sources ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:var(--s5); }
@media(max-width:760px){ .sources ul{ columns:1; } }
.sources li{ margin-bottom:10px; break-inside:avoid; font-size:16px; }
.sources a{ color:var(--navy); border-bottom:1.5px solid var(--red); }
.sources a:hover{ color:var(--red); }

/* ── 16. enquiry ─────────────────────────────────────────────────────── */
.enquire{ background:var(--navy); color:#C6D2E6; padding:var(--s7) 0; }
.enquire h2{ color:#fff; max-width:20ch; }
.enquire .lead{ color:#C6D2E6; margin-top:var(--s3); }
.enquire-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start; }
@media(max-width:940px){ .enquire-grid{ grid-template-columns:1fr; gap:var(--s5); } }
.person{ display:flex; align-items:center; gap:14px; margin-top:var(--s5); }
.person img{ width:88px; height:88px; object-fit:cover;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
/* The team cards on /about/ keep the smaller portrait; only the enquiry band
   carries the larger one. */
.card .person img{ width:56px; height:56px;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.p-name{ color:#fff; font-weight:600; font-size:16px; }
.p-role{ color:#8FA3C6; font-size:14px; }
.form-card label{ display:block; font-size:15px; font-weight:500; color:var(--navy); margin-bottom:var(--s2); }
.form-card input,.form-card select,.form-card textarea{ width:100%; font:inherit; font-weight:300;
  font-size:16px; padding:13px 14px; margin-top:6px; border:1px solid var(--line-2); background:#fff;
  color:var(--ink); }
.form-card :focus-visible{ outline:2px solid var(--red); outline-offset:1px; }
.form-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
@media(max-width:560px){ .form-grid2{ grid-template-columns:1fr; } }
.form-small{ display:block; margin-top:14px; font-size:14px; color:var(--ink-50); line-height:1.5; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start; }
@media(max-width:940px){ .contact-grid{ grid-template-columns:1fr; } }

/* ── 17. calculators ─────────────────────────────────────────────────── */
.tool{ background:var(--pale); padding:var(--s4);
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.tool-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media(max-width:600px){ .tool-grid{ grid-template-columns:1fr; } }
.tool-field span{ display:block; font-size:15px; font-weight:500; color:var(--navy); margin-bottom:6px; }
.tool-field input,.tool-field select{ width:100%; font:inherit; font-weight:300; padding:12px 14px;
  border:1px solid var(--line-2); background:#fff; font-variant-numeric:tabular-nums; }
.tool-opts{ display:grid; gap:4px; }
.tool-opt{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; padding:7px 0;
  cursor:pointer; font-size:16px; }
.tool-opt input{ appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0;
  border:1.5px solid var(--line-2); background:#fff; position:relative; cursor:pointer; }
.tool-opt input[type=radio]{ border-radius:50%; }
.tool-opt input:checked{ background:var(--red); border-color:var(--red); }
.tool-opt input[type=checkbox]:checked::after{ content:""; position:absolute; left:7px; top:3px;
  width:5px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.tool-opt input[type=radio]:checked::after{ content:""; position:absolute; left:6px; top:6px;
  width:8px; height:8px; border-radius:50%; background:#fff; }
.tool-out{ border-top:3px solid var(--red); margin-top:var(--s4); padding-top:var(--s3); }
.tool-figure{ font-size:clamp(34px,5vw,50px); font-weight:600; color:var(--navy); letter-spacing:-.03em;
  line-height:1; font-variant-numeric:tabular-nums; }
.tool-figure small{ display:block; font-size:16px; color:var(--ink-50); font-weight:300; margin-top:8px; }
.tool-verdict{ font-size:24px; font-weight:600; color:var(--navy); margin-bottom:8px; }
.tool-table{ width:100%; border-collapse:collapse; margin-top:var(--s3); font-size:16px; }
.tool-table td{ padding:10px 0; border-bottom:1px solid var(--line-2); }
.tool-table td:last-child{ text-align:right; color:var(--navy); font-weight:600; font-variant-numeric:tabular-nums; }
.tool-note{ margin-top:var(--s3); font-size:15px; color:var(--ink-50); }
.tiers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
@media(max-width:860px){ .tiers{ grid-template-columns:1fr; } }
.tier{ background:#fff; padding:var(--s4) var(--s3); box-shadow:0 0 0 1px var(--line);
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.tier-price{ font-size:20px; font-weight:600; color:var(--red); margin:8px 0 var(--s2); }

/* ── 18. footer ──────────────────────────────────────────────────────────
   Was five columns and fifty links. Andy: "The footer is ridiculous".
   The reference site's footer is three links, a legal paragraph and one small
   row. This follows it. The full service list lives in the navigation. */
.site-footer{ background:var(--navy); color:#8FA3C6; padding:var(--s6) 0 var(--s4); font-size:15px; }
.footer-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5);
  flex-wrap:wrap; padding-bottom:var(--s5); }
.footer-links{ display:flex; gap:var(--s5); flex-wrap:wrap; }
.footer-links a{ color:#fff; font-size:18px; font-weight:500; }
.footer-links a::after{ content:" ›"; color:var(--red-l); }
.footer-links a:hover{ text-decoration:underline; }
.site-footer .brand-word{ color:#fff; }
.site-footer .brand-mark{ background:#fff; color:var(--navy); }
.footer-brand p{ margin-top:var(--s2); max-width:38ch; color:#8FA3C6; }
.footer-brand a{ color:#C6D2E6; } .footer-brand a:hover{ color:#fff; }
.legal-line{ border-top:1px solid rgba(255,255,255,.16); padding-top:var(--s3);
  display:flex; gap:var(--s2) var(--s5); justify-content:space-between; flex-wrap:wrap;
  font-size:13px; line-height:1.6; color:#7A8CB0; }
.legal-line span:first-child{ flex:1 1 40rem; max-width:88ch; }
.legal-line a{ color:#A9BCD9; text-decoration:underline; }
.legal-line a:hover{ color:#fff; }

/* ── mobile bar and odds ─────────────────────────────────────────────── */
.mobile-cta-bar{ display:none; }
@media(max-width:640px){
  .mobile-cta-bar{ display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:#fff; border-top:1px solid var(--line); padding:10px 12px; }
  .mobile-cta-bar .btn{ flex:1; justify-content:center; padding:14px 0; font-size:16px; }
  body{ padding-bottom:76px; }
  .section{ padding:var(--s6) 0; }
  .enquire{ padding:var(--s6) 0; }
}
::selection{ background:var(--red); color:#fff; }
@media(prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }