/* ════════════════════════════════════════════════════════════════════
   Bailiff Support Team — site styles
   Type: Archivo (display, slightly condensed) + Atkinson Hyperlegible Next (text)
   Colour: the logo's blues, white paper, one warm "porch light" amber for actions
   ════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("/assets/fonts/archivo-var-latin.woff2") format("woff2");}
@font-face{font-family:"Atkinson Next";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/assets/fonts/atkinson-next-var-latin.woff2") format("woff2");}
@font-face{font-family:"Atkinson Next";font-style:italic;font-weight:200 800;font-display:swap;
  src:url("/assets/fonts/atkinson-next-var-latin-italic.woff2") format("woff2");}
/* Figures are set in Archivo everywhere. Atkinson's zero carries a slash, which
   reads oddly in sums of money; this keeps one numeral style across the site. */
@font-face{font-family:"Atkinson Next";font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url("/assets/fonts/archivo-var-latin.woff2") format("woff2");unicode-range:U+30-39;}
@font-face{font-family:"Atkinson Next";font-style:italic;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url("/assets/fonts/archivo-var-latin.woff2") format("woff2");unicode-range:U+30-39;}

:root{
  --ink:#0d1838;
  --navy:#12205a;
  --blue:#004aad;
  --blue-2:#1f63d6;
  --sky:#0aa6ea;
  --mist:#eef3fb;
  --mist-2:#dfe8f6;
  --paper:#ffffff;
  --line:#cfd9ea;
  --muted:#4c5a7c;
  --amber:#ffbe2e;
  --amber-deep:#f2a900;
  --amber-ink:#2b2000;
  --brick:#a5382b;
  --brick-bg:#fbefec;
  --leaf:#0b7a5b;
  --leaf-bg:#e9f6f1;
  --wa:#0f7a43;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --text:"Atkinson Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1120px;
  --measure:68ch;
  --r:10px;
  --r-lg:18px;
  /* the strips an iPhone keeps clear: the camera cut-out at the sides when it is held sideways, and
     the home bar along the bottom. Zero on everything else. The page is told to use the whole screen
     (viewport-fit=cover), so every gutter and every bar at the bottom has to add these itself. */
  --safe-x:max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
/* Whatever the browser scrolls into view (a heading a link jumps to, a link reached with the Tab key)
   lands clear of the header at the top and of whatever is fixed along the bottom: the action bar on
   phones and tablets, the cookie strip on a first visit, the test-mode line. Both heights are measured
   by site.js (--hdr-h, --foot-h), because both grow with the visitor's text size. Without the script
   nothing is ever fixed at the bottom, and the header is taken at its usual height. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h,4.5rem) + 1.5rem);scroll-padding-bottom:calc(var(--foot-h,0px) + .9rem)}
/* overflow-wrap: a word, web address or email too long for its line breaks rather than running out of its box */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.6;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--navy)}
/* the keyboard focus ring: dark on the light pages and amber wherever the background is dark, so it
   shows against whatever is behind it (amber on white was 2 to 1; 3 to 1 is the least that shows).
   A new dark panel needs adding to the second rule. */
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
.strip :focus-visible,.band-navy :focus-visible,.card-call :focus-visible,.act :focus-visible,.ftr :focus-visible,.enq-test :focus-visible{outline-color:var(--amber)}
h1,h2,h3,h4{font-family:var(--display);font-stretch:88%;color:var(--navy);margin:0;line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.15rem,6.4vw,3.7rem);font-weight:800;font-stretch:84%;line-height:1.0}
h2{font-size:clamp(1.55rem,3.8vw,2.25rem);font-weight:760}
h3{font-size:1.24rem;font-weight:720;font-stretch:92%;line-height:1.2}
h4{font-size:1.05rem;font-weight:700;font-stretch:96%;line-height:1.25}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin:.3em 0}
strong{font-weight:700}
small,.small{font-size:.9rem}
hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
table{border-collapse:collapse;width:100%}
.wrap{width:min(100% - 2.2rem - 2 * var(--safe-x),var(--wrap));margin-inline:auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:.5rem;top:.5rem;outline:3px solid var(--amber);outline-offset:-5px}
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
mark{background:linear-gradient(transparent 58%,#ffe08a 58%);color:inherit;padding:0 .08em}

/* ── free advice strip (on every page) ────────────────────────────── */
.strip{background:var(--navy);color:#dfe7fa;font-size:.85rem;line-height:1.35}
.strip .wrap{padding:.5rem 0;text-align:center}
.strip a{color:#fff;font-weight:700}

/* ── header ───────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:.7rem;min-height:4.4rem}
/* a window too short to spare a strip of it (a phone on its side, a page zoomed right in): the header scrolls away with the page */
@media (max-height:480px){.hdr{position:static}}
@media (min-width:980px){.hdr .wrap{gap:1rem}}
/* When the row is too tight for everything (large text), the button's words wrap and the menu links
   go onto a second line first; only then does the logo get smaller, and it keeps its proportions. */
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto;flex:0 1 auto;min-width:2.6rem}
.logo picture{display:block;min-width:0}
.logo img{display:block;width:auto;height:auto;max-height:46px;max-width:100%}
/* the phone line in the header, on screens wide enough for it */
.hdr-call{display:none;text-decoration:none;text-align:right;line-height:1.1;color:var(--navy)}
.hdr-call span{display:block;font-size:.74rem;font-weight:600;color:var(--muted)}
.hdr-call b{display:block;margin-top:.18rem;font-family:var(--display);font-stretch:92%;font-weight:800;font-size:1.2rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.hdr-call:hover b{color:var(--blue)}
@media (min-width:1180px){.hdr-call{display:block}}
/* on a phone the call button stays in the header, so it has to be compact */
.hdr-cta{flex:0 20 auto;padding:.6rem .75rem;font-size:.92rem}
@media (min-width:980px){.logo img{max-height:54px}.hdr-cta{padding:.62rem .95rem;font-size:.95rem}}
.nav{display:none}
.nav a{font-family:var(--display);font-stretch:94%;font-weight:620;font-size:.98rem;color:var(--navy);text-decoration:none;padding:.5rem .2rem;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--sky)}
.menu-btn{appearance:none;border:1px solid var(--line);background:#fff;border-radius:var(--r);width:2.75rem;height:2.75rem;display:grid;place-items:center;color:var(--navy);cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.drawer{display:none;border-top:1px solid var(--line);background:#fff}
/* the open menu is never taller than the window: it scrolls inside itself, so the last button can
   always be reached (8rem is the header with the strip above it, at its tallest) */
.drawer.open{display:block;max-height:calc(100vh - 8rem);max-height:calc(100dvh - 8rem);overflow-y:auto;overscroll-behavior:contain}
/* compact enough that the whole menu, buttons included, is on screen at once on an ordinary phone */
.drawer .wrap{display:block;padding:.3rem 0 1rem}
.drawer a:not(.btn){display:block;font-family:var(--display);font-stretch:92%;font-weight:650;font-size:1.2rem;line-height:1.2;color:var(--navy);text-decoration:none;padding:.6rem 0;border-bottom:1px solid var(--mist-2)}
.drawer a[aria-current="page"]{color:var(--blue)}
.drawer .btn{margin-top:.55rem;width:100%;padding-block:.74rem}
.drawer .btn:first-of-type{margin-top:.8rem}
@media (min-width:980px){
  .nav{display:flex;flex:0 20 auto;flex-wrap:wrap;justify-content:flex-end;gap:0 1.35rem;align-items:center}
  .menu-btn,.drawer{display:none!important}
}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--display);font-stretch:94%;font-weight:720;font-size:1.03rem;line-height:1.1;
  padding:.92rem 1.3rem;border-radius:var(--r);border:2px solid transparent;text-decoration:none;cursor:pointer;text-align:center;max-width:100%;transition:background .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-main{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.btn-main:hover{background:var(--amber-deep);border-color:var(--amber-deep);color:var(--amber-ink)}
.btn-line{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-line:hover{background:var(--mist);color:var(--navy)}
.btn-wa{background:#fff;color:var(--wa);border-color:var(--wa)}
.btn-wa:hover{background:#eaf7f0;color:var(--wa)}
.btn-wa svg{width:1.2em;height:1.2em;flex:none}
.btn-sm{padding:.62rem .95rem;font-size:.95rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}
.on-dark .btn-line{background:transparent;color:#fff;border-color:#9fb4e6}
.on-dark .btn-line:hover{background:rgba(255,255,255,.1);color:#fff}

/* ── page furniture ───────────────────────────────────────────────── */
.crumbs{font-size:.86rem;color:var(--muted);padding:1.1rem 0 0}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 .35rem}
.page-head{padding:1.4rem 0 1.8rem}
.page-head h1{max-width:18ch}
.page-head.wide h1{max-width:22ch}
.lede{font-size:clamp(1.12rem,2.2vw,1.3rem);line-height:1.5;color:var(--ink);max-width:60ch;margin:1rem 0 0}
.stamp{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:1.1rem;font-size:.88rem;color:var(--muted)}
.stamp b{color:var(--navy);font-weight:700}
.band{padding:clamp(2.4rem,6vw,4.2rem) 0}
.band-mist{background:var(--mist)}
.band-navy{background:var(--navy);color:#e6ecfb}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy a{color:#bcd3ff}
.band h2+p,.band h2+.lede{margin-top:.8rem}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem}
.prose,.rail{min-width:0}
@media (min-width:980px){.cols{grid-template-columns:minmax(0,1fr) 20rem;gap:3.5rem;align-items:start}}
.prose{max-width:var(--measure)}
.prose h2{margin:2.4rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.7rem 0 .5rem}
.prose h4{margin:1.3rem 0 .4rem}
.prose li{padding-left:.15em}
.prose ul{list-style:none;padding-left:0}
.prose ul>li{position:relative;padding-left:1.35em}
.prose ul>li::before{content:"";position:absolute;left:.15em;top:.62em;width:.5em;height:.5em;background:var(--sky);transform:rotate(45deg)}
/* The side column on a wide screen. The contact card follows the scroll. The list of headings above
   it follows too only when both fit in the window together: site.js measures that and sets
   .rail-fits. Otherwise (a laptop, or a page with a long list) the list scrolls away with the page
   and the card follows alone, so its buttons are never below the bottom of the window. A window too
   short even for the card gets .rail-loose and nothing follows. The header's height (--hdr-h) is
   measured by site.js, so the panel sits just under it at any text size. */
:root{--rail-top:calc(var(--hdr-h,4.5rem) + 1.3rem)}
.rail{position:static}
@media (min-width:980px){
  .rail{align-self:stretch}
  .rail .card-call{position:sticky;top:var(--rail-top)}
  .rail.rail-fits{position:sticky;top:var(--rail-top);align-self:start}
  .rail.rail-fits .card-call,.rail.rail-loose .card-call{position:static}
}
@media (min-width:980px) and (max-height:540px){.rail .card-call{position:static}}
.toc{border-left:3px solid var(--mist-2);padding:.2rem 0 .2rem 1rem;margin-bottom:1.6rem}
.toc h2{font-size:.95rem;font-stretch:98%;font-weight:700;margin-bottom:.5rem;color:var(--muted)}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:.42rem 0;line-height:1.3}
.toc a{font-size:.95rem;color:var(--navy);text-decoration:none}
.toc a:hover{text-decoration:underline}

/* rail contact card */
.card-call{background:var(--navy);color:#e6ecfb;border-radius:var(--r-lg);padding:1.35rem 1.25rem 1.4rem}
.card-call h2{font-size:1.32rem;color:#fff;margin-bottom:.5rem}
.card-call p{font-size:.97rem;margin-bottom:1rem}
.card-call .btn{width:100%;margin-top:.55rem}
.card-call .fine{font-size:.8rem;color:#b9c6ea;margin:.9rem 0 0;line-height:1.4}
.card-call .fine a,.act .fine a{color:#dfe7fa}
.or-call{margin:.9rem 0 0;font-size:1rem;color:#dbe4f9}
.or-call a{color:#fff;font-family:var(--display);font-stretch:92%;font-weight:800;font-size:1.15em;white-space:nowrap;font-variant-numeric:tabular-nums}
.card-call .or-call{font-size:.95rem;margin:.8rem 0 0}

/* ── key facts row ────────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:1.6rem 0;background:#fff}
.facts>div{padding:1rem 1.05rem;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.facts>div:nth-child(2n){border-right:0}
.facts dt{font-size:.86rem;color:var(--muted);line-height:1.3}
.facts dd{margin:.25rem 0 0;font-family:var(--display);font-stretch:86%;font-weight:800;font-size:clamp(1.5rem,4.6vw,2rem);line-height:1;color:var(--navy);overflow-wrap:anywhere}
/* an answer in words ("Abolished", "a debt adviser") is set smaller than a figure, so it stays inside its box */
.facts dd.words{font-size:clamp(1.2rem,3.6vw,1.45rem);line-height:1.08}
.facts dd small{display:block;font-family:var(--text);font-weight:400;font-size:.8rem;color:var(--muted);margin-top:.35rem;line-height:1.3}
@media (min-width:720px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}.facts>div{border-bottom:0}.facts>div:nth-child(2n){border-right:1px solid var(--line)}.facts>div:last-child{border-right:0}}

/* ── the threshold: can / cannot ──────────────────────────────────── */
.threshold{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin:1.6rem 0;background:#fff}
.threshold>div{padding:1.2rem 1.2rem 1.1rem}
.threshold .can{background:var(--mist)}
.threshold .cannot{background:#fff;border-top:6px solid var(--navy)}
.threshold h3,.threshold .th-h{font-family:var(--display);font-stretch:92%;font-weight:720;color:var(--navy);line-height:1.2;margin:0 0 .6rem;font-size:1.12rem}
.threshold ul{list-style:none;margin:0;padding:0}
.threshold li{position:relative;padding-left:1.7rem;margin:.55rem 0;line-height:1.45;font-size:1rem}
.threshold li::before{content:"";position:absolute;left:0;top:.2em;width:1.15rem;height:1.15rem;background-repeat:no-repeat;background-position:center;background-size:contain}
.threshold .can li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004aad' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.threshold .cannot li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5382b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
@media (min-width:720px){.threshold{grid-template-columns:repeat(2,minmax(0,1fr))}.threshold .cannot{border-top:0;border-left:6px solid var(--navy)}}

/* ── callouts ─────────────────────────────────────────────────────── */
.note{border-left:5px solid var(--sky);background:var(--mist);padding:1rem 1.1rem;border-radius:0 var(--r) var(--r) 0;margin:1.5rem 0}
.note>:last-child{margin-bottom:0}
.note h3,.note h4,.note .note-h{font-family:var(--display);font-stretch:92%;font-weight:720;color:var(--navy);line-height:1.2;margin:0 0 .35rem;font-size:1.05rem}
.note.changed{border-left-color:var(--amber-deep);background:#fff7e0}
.note.warn{border-left-color:var(--brick);background:var(--brick-bg)}
.note.ok{border-left-color:var(--leaf);background:var(--leaf-bg)}
.indep{font-size:.93rem;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r);padding:.8rem 1rem;margin:1.2rem 0}

/* ── tables ───────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--r)}
.tbl th,.tbl td{padding:.72rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:.98rem}
.tbl thead th{background:var(--mist);font-family:var(--display);font-stretch:94%;font-weight:700;color:var(--navy);font-size:.95rem}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* a column's heading may wrap even where its figures may not, so a long heading does not push the table wider than the page */
.tbl thead th{vertical-align:bottom}
.tbl thead th.n{white-space:normal}
@media (max-width:699.98px){.tbl th,.tbl td{padding:.6rem .55rem;font-size:.92rem}.tbl thead th{font-size:.86rem}.tbl caption{padding:.55rem .55rem}}
/* on the narrowest phones a web or email address in a cell may break, so it cannot push the table off the screen */
@media (max-width:379.98px){.tbl td:not(.n){overflow-wrap:anywhere}}
/* A table too wide for its column becomes a list instead of a grid, so nothing is cut off at the
   side. Each row is a block headed by its first cell; each other cell is a line with its column
   heading in front of it. The note under the table follows the last row.
   - site.js measures every table and adds "stacked" to one that does not fit, at any window size
     (a wide table on a phone, or any table when the visitor's text is large).
   - Tables of five or more columns are also marked "stack" when the page is built, which lays them
     out this way on a phone before the script has run, and without it.
   The two sets of rules below are the same rules and must be kept the same. */
.tbl.stacked{display:flex;flex-direction:column}
.tbl.stacked tbody,.tbl.stacked tr,.tbl.stacked tbody th,.tbl.stacked caption{display:block}
.tbl.stacked thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tbl.stacked tr{border-bottom:1px solid var(--line)}
.tbl.stacked tr:last-child{border-bottom:0}
.tbl.stacked tbody th{background:var(--mist);font-family:var(--display);font-stretch:94%;font-weight:700;color:var(--navy);font-size:1rem;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.tbl.stacked tbody th[data-label]::before{content:attr(data-label) ": ";font-weight:500}
.tbl.stacked td{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);column-gap:.9rem;align-items:baseline;padding:.5rem .8rem;border-bottom:1px solid var(--mist-2);font-size:.95rem;text-align:left;white-space:normal}
.tbl.stacked tr td:last-child{border-bottom:0}
.tbl.stacked td::before{content:attr(data-label);font-size:.86rem;line-height:1.35;color:var(--muted);text-align:left}
.tbl.stacked td.n{text-align:right}
.tbl.stacked caption{order:2;padding:.7rem .8rem;border-top:1px solid var(--line)}
@media (max-width:599.98px){
  .tbl.stack{display:flex;flex-direction:column}
  .tbl.stack tbody,.tbl.stack tr,.tbl.stack tbody th,.tbl.stack caption{display:block}
  .tbl.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tbl.stack tr{border-bottom:1px solid var(--line)}
  .tbl.stack tr:last-child{border-bottom:0}
  .tbl.stack tbody th{background:var(--mist);font-family:var(--display);font-stretch:94%;font-weight:700;color:var(--navy);font-size:1rem;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
  .tbl.stack tbody th[data-label]::before{content:attr(data-label) ": ";font-weight:500}
  .tbl.stack td{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);column-gap:.9rem;align-items:baseline;padding:.5rem .8rem;border-bottom:1px solid var(--mist-2);font-size:.95rem;text-align:left;white-space:normal}
  .tbl.stack tr td:last-child{border-bottom:0}
  .tbl.stack td::before{content:attr(data-label);font-size:.86rem;line-height:1.35;color:var(--muted);text-align:left}
  .tbl.stack td.n{text-align:right}
  .tbl.stack caption{order:2;padding:.7rem .8rem;border-top:1px solid var(--line)}
}
/* before that, a table that does not fit is set tighter (site.js adds "tight"); only if it still does not fit is it stacked */
.tbl.tight th,.tbl.tight td{padding:.6rem .55rem;font-size:.92rem}
.tbl.tight thead th{font-size:.86rem}
.tbl caption{caption-side:bottom;text-align:left;font-size:.85rem;color:var(--muted);padding:.6rem .85rem}

/* ── sequence (real ordered processes only) ───────────────────────── */
.seq{list-style:none;margin:1.5rem 0;padding:0;counter-reset:s}
.seq>li{counter-increment:s;position:relative;padding:0 0 1.5rem 3.1rem;margin:0}
.seq>li::before{content:counter(s);position:absolute;left:0;top:0;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--display);font-weight:800;display:grid;place-items:center;font-size:1rem}
.seq>li::after{content:"";position:absolute;left:1.02rem;top:2.3rem;bottom:.2rem;width:2px;background:var(--mist-2)}
.seq>li:last-child{padding-bottom:0}
.seq>li:last-child::after{display:none}
.seq h3{margin:.1rem 0 .3rem;font-size:1.12rem}
.seq p{margin:0 0 .5em}
.seq .when{display:inline-block;font-size:.85rem;color:var(--muted);margin-bottom:.2rem}

/* ── link lists / tiles ───────────────────────────────────────────── */
.tiles{display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr);margin:1.4rem 0;padding:0;list-style:none}
@media (min-width:640px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tiles>li{margin:0;padding:0}
.tiles>li::before{display:none!important}
.tile{display:block;height:100%;padding:1.05rem 1.1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);background:#fff;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.tile:hover{border-color:var(--blue);background:var(--mist);color:var(--ink)}
.tile b{display:block;font-family:var(--display);font-stretch:90%;font-weight:740;font-size:1.14rem;color:var(--navy);line-height:1.15;margin-bottom:.3rem}
.tile span{display:block;font-size:.95rem;color:var(--muted);line-height:1.4}
.linklist{list-style:none;margin:1rem 0;padding:0;columns:1}
@media (min-width:720px){.linklist.two{columns:2;column-gap:2.4rem}}
.linklist li{margin:0;padding:.5rem 0;border-bottom:1px solid var(--mist-2);break-inside:avoid}
.linklist li::before{display:none!important}
.linklist a{text-decoration:none;font-weight:600}
.linklist a:hover{text-decoration:underline}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq{margin:1.4rem 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2.4rem 1rem 0;position:relative;font-family:var(--display);font-stretch:92%;font-weight:700;font-size:1.1rem;color:var(--navy);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.3rem;top:1.25rem;width:.7rem;height:.7rem;border-right:3px solid var(--blue);border-bottom:3px solid var(--blue);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.5rem}
.faq .a{padding:0 0 1.1rem;max-width:var(--measure)}
.faq .a>:last-child{margin-bottom:0}

/* ── sources & signposting ────────────────────────────────────────── */
.sources{font-size:.92rem;color:var(--muted);margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.sources h2{font-size:1.05rem;font-stretch:96%;margin-bottom:.5rem}
.sources ol{padding-left:1.2em;margin:0}
.sources li{margin:.3rem 0}
.sources a{color:var(--muted)}
.free{border:2px solid var(--navy);border-radius:var(--r-lg);padding:1.3rem 1.25rem;margin:2.2rem 0;background:#fff}
.free h2{font-size:1.3rem;margin-bottom:.5rem}
.free ul{list-style:none;padding:0;margin:.8rem 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem}
.free li{margin:0;padding:0}
.free li::before{display:none!important}
.free li a{font-weight:700}
.free li span{display:block;font-size:.92rem;color:var(--muted)}
@media (min-width:640px){.free ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── closing action band ──────────────────────────────────────────── */
.act{background:var(--navy);color:#e6ecfb;border-radius:var(--r-lg);padding:clamp(1.4rem,4vw,2.2rem);margin:2.4rem 0}
.act h2{color:#fff;font-size:clamp(1.45rem,3.6vw,2rem);margin-bottom:.6rem}
.act p{max-width:58ch}
.act .fine{font-size:.84rem;color:#b9c6ea;margin:1rem 0 0;max-width:62ch;line-height:1.45}

/* ── footer ───────────────────────────────────────────────────────── */
/* the room at the foot is for whatever is fixed along the bottom (the action bar, the cookie strip): the last line of links must clear it */
.ftr{background:#0a1330;color:#c3cdea;font-size:.93rem;padding:2.6rem 0 calc(var(--foot-h,0px) + 2.6rem);margin-top:3rem}
.ftr a{color:#e2e9fb}
.ftr h2{font-size:1rem;color:#fff;font-stretch:98%;margin-bottom:.7rem}
.ftr-logo{display:block;width:150px;height:54px;margin:0 0 1.1rem}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.8rem}
@media (min-width:760px){.ftr-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin:.4rem 0}
.ftr .legal{border-top:1px solid #24305c;margin-top:2rem;padding-top:1.4rem;font-size:.84rem;line-height:1.55;color:#aab6da}
.ftr .legal p{max-width:none}
.ftr .legal strong{color:#dfe7fa}

/* ── mobile action bar ────────────────────────────────────────────── */
/* off screen and out of the keyboard's reach until the page has been scrolled. With large text the
   words in a button wrap first; a button that still cannot fit goes onto a second row. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid var(--line);padding:.55rem calc(.7rem + var(--safe-x)) calc(.55rem + var(--safe-b));display:flex;flex-wrap:wrap;gap:.55rem;transform:translateY(110%);visibility:hidden;transition:transform .25s,visibility 0s .25s}
.bar.show{transform:none;visibility:visible;transition:transform .25s}
.bar .btn{flex:1;padding:.8rem .5rem;font-size:.94rem}
.bar .bar-call{flex:0 0 auto;padding:.8rem .75rem}
@media (min-width:980px){.bar{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ════════════════════════════════════════════════════════════════════
   HOME
   ════════════════════════════════════════════════════════════════════ */
.hero{padding:clamp(1.5rem,4.4vw,3.2rem) 0 0;background:#fff}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.hero h1{line-height:.96}
.hero h1 span{display:block}
.hero .lede{max-width:45ch;margin-top:1.1rem}
.hero .btn-row{margin-top:1.5rem}
.hero-call{margin:1.05rem 0 0}
.hero-call a{display:inline-grid;grid-template-columns:auto auto;column-gap:.7rem;align-items:center;text-decoration:none;color:var(--navy);padding:.15rem 0}
.hero-call svg{grid-row:span 2;width:2.7rem;height:2.7rem;padding:.62rem;border-radius:50%;background:var(--navy);color:#fff}
.hero-call span{font-size:.9rem;font-weight:600;color:var(--muted);line-height:1.1}
.hero-call b{font-family:var(--display);font-stretch:90%;font-weight:800;font-size:1.65rem;line-height:1.05;font-variant-numeric:tabular-nums}
.hero-call a:hover b{color:var(--blue)}
.hero .assure{margin:.95rem 0 0;font-size:.93rem;color:var(--muted)}
.hero-free{margin:1.15rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.93rem;color:var(--muted);max-width:54ch}
.hero-free a{white-space:nowrap}
/* The photo sits on a two-tone plate, like the split rim of the shield in the logo. It is beside
   the heading on every screen, so the person is in view before anyone scrolls. */
.hero-grid{--plate:10px}
.hero-photo picture{display:block;position:relative;margin:0 var(--plate) var(--plate) 0}
.hero-photo picture::before{content:"";position:absolute;inset:var(--plate) calc(var(--plate) * -1) calc(var(--plate) * -1) var(--plate);border-radius:var(--r-lg);background:linear-gradient(90deg,var(--sky) 0 50%,var(--navy) 50% 100%)}
.hero-photo img{display:block;position:relative;width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;border-radius:var(--r-lg);background:var(--mist-2)}
/* Phone. First row: the heading on the left, the photo on the right, and the phone number as a
   card under the heading and across the photo's lower corner. Everything else runs the full
   width below.
   - The two wrappers are dissolved (display:contents) so that the heading, the number and the
     photo can share a row. A browser too old for that keeps them stacked, number under the buttons.
   - --h is the heading's size. The left column is 5.4 times it: exactly wide enough for
     "Count on us.", so the heading takes three lines and the photo gets the rest.
   - The card is as wide as the number needs, and never narrower than it takes to reach 2.25rem
     into the photo, whether the photo fills its column or has stopped growing at 11rem
     (11.5rem with its plate). The whole card is the link. */
@media (max-width:699.98px){
  @supports (display:contents){
    .hero-grid{--h:clamp(1.8rem,9.2vw,3.4rem);--plate:8px;grid-template-columns:minmax(0,calc(var(--h) * 5.4)) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:.75rem}
    .hero-copy,.hero-photo{display:contents}
    .hero-copy>*{grid-column:1/-1}
    .hero h1{grid-column:1;grid-row:1;font-size:var(--h)}
    .hero-photo picture{grid-column:2;grid-row:1/3;align-self:start;justify-self:end;width:calc(100% - var(--plate));max-width:11rem}
    .hero-photo img{aspect-ratio:4/5;border-radius:14px}
    .hero-photo picture::before{border-radius:14px}
    .hero-call{grid-row:2;align-self:end;justify-self:start;position:relative;z-index:1;width:max-content;min-width:min(100%,calc(max(var(--h) * 5.4 + .75rem,100% - 11.5rem) + 2.25rem));max-width:100%;margin:.6rem 0 .8rem;background:#fff;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:10px;box-shadow:0 14px 30px -20px rgba(13,24,56,.5)}
    .hero-call a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(.5rem,2.6vw,.7rem);padding:.4rem .8rem .4rem .55rem;border-radius:inherit}
    .hero-call svg{width:clamp(2.1rem,11vw,2.9rem);height:clamp(2.1rem,11vw,2.9rem);padding:clamp(.48rem,2.5vw,.66rem)}
    .hero-call span{font-size:clamp(.76rem,3.5vw,.95rem)}
    .hero-call b{font-size:clamp(1.25rem,6.2vw,1.9rem)}
    .hero .lede{margin-top:1.15rem}
  }
}
/* a little less padding lets the two buttons share a line on a 360-pixel phone */
@media (max-width:379.98px){.hero .btn-row .btn{padding-inline:.9rem}}
/* Tablet. The words on the left, the photo on the right at the top. */
@media (min-width:700px) and (max-width:979.98px){
  .hero-grid{--plate:12px;grid-template-columns:minmax(0,1fr) minmax(0,36%);column-gap:2rem;align-items:start}
  .hero h1{font-size:min(8vw,4.6rem)}
}
@media (min-width:980px){
  .hero-grid{--plate:14px;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:3.6rem;align-items:center}
  .hero h1{font-size:min(6.9vw,4.6rem);max-width:13ch}
}
/* ── photographs ──────────────────────────────────────────────────────
   One treatment everywhere, taken from the photo at the top of the home page:
   a rounded frame, and the caption on a white card with the amber edge.
   The caption is always a rule the page states. */
.photo{margin:1.9rem 0 2.1rem}
.photo picture{display:block}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);background:var(--mist-2)}
.photo figcaption{margin:.75rem 0 0;padding:.1rem 0 .1rem .85rem;border-left:4px solid var(--amber);font-size:.93rem;line-height:1.4;color:var(--muted)}
@media (min-width:640px){
  .photo img{aspect-ratio:2/1}
  .photo figcaption{position:relative;margin:-1.7rem 0 0 1.1rem;width:fit-content;max-width:min(31rem,calc(100% - 2.2rem));background:#fff;color:var(--navy);font-family:var(--display);font-stretch:94%;font-weight:650;font-size:.98rem;line-height:1.3;padding:.75rem 1rem;border-radius:var(--r);border-left:5px solid var(--amber);box-shadow:0 18px 40px -22px rgba(13,24,56,.55)}
}
.prose.wide>.photo{max-width:var(--measure)}
/* home, phones only: a doorstep photo above the stages (wide screens show it beside the walkthrough instead) */
.stage-photo{margin:1.4rem 0 .3rem}
@media (min-width:640px){.stage-photo{display:none}}
/* home: the doorstep rules, joined to the door they apply at */
.door{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;margin:1.6rem 0}
.door .threshold{border:0;border-radius:0;margin:0}
.door-photo{margin:0;position:relative;display:flex;flex-direction:column;background:var(--mist-2)}
.door-photo picture{display:block;flex:1;min-height:0}
.door-photo img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.door-photo figcaption{padding:.75rem 1rem .8rem;background:#fff;border-left:5px solid var(--amber);font-family:var(--display);font-stretch:94%;font-weight:650;font-size:.96rem;line-height:1.3;color:var(--navy)}
@media (min-width:720px){.door-photo img{aspect-ratio:5/2}}
@media (min-width:980px){
  .door{grid-template-columns:minmax(0,.46fr) minmax(0,1fr)}
  .door-photo picture{position:absolute;inset:0}
  .door-photo img{aspect-ratio:auto}
  .door-photo figcaption{position:absolute;left:.9rem;right:.9rem;bottom:.9rem;border-radius:var(--r);box-shadow:0 18px 40px -22px rgba(13,24,56,.55)}
}
/* three facts under the heading, each a way into the page that covers it */
.hero-facts{list-style:none;margin:clamp(1.9rem,4.5vw,3rem) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.hero-facts li{margin:0}
.hero-facts a{display:block;height:100%;padding:1.05rem 0 1.15rem;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.hero-facts b{display:block;font-family:var(--display);font-stretch:84%;font-weight:800;font-size:clamp(1.7rem,5.6vw,2.15rem);line-height:1;color:var(--navy)}
.hero-facts span{display:block;margin-top:.4rem;font-size:.97rem;line-height:1.4;color:var(--muted);max-width:36ch}
.hero-facts b{text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:.09em;text-underline-offset:.17em}
.hero-facts a:hover b{color:var(--blue);text-decoration-color:currentColor}
@media (min-width:760px){
  .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-facts a{border-bottom:0;padding:1.3rem 1.4rem 1.6rem 0}
  .hero-facts li+li a{border-left:1px solid var(--line);padding-left:1.4rem}
}

/* ── the walkthrough (home + /bailiff-walkthrough/) ───────────────── */
.walk{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 50px -32px rgba(13,24,56,.45)}
.walk-scene{background:linear-gradient(180deg,#dcebfb 0,#eef5fd 62%,#c9d6ea 62%,#c9d6ea 100%);position:relative}
.walk-scene svg{display:block;width:100%;height:auto}
/* five tabs of equal width; with large text a tab grows to fit its longest word, and one that cannot fit starts a second row */
.walk-steps{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.walk-steps button{flex:1 1 0;appearance:none;background:#fff;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:-1px;padding:.6rem .15rem .62rem;font-family:var(--display);font-stretch:86%;font-weight:680;font-size:.82rem;line-height:1.12;color:var(--muted);cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}
.walk-steps button:last-child{border-right:0}
/* the tabs run to the edge of a box that clips: their focus ring is drawn inside them */
.walk-steps button:focus-visible{outline-offset:-3px}
.walk-steps button[aria-selected="true"]{color:var(--navy);background:var(--mist)}
.walk-steps button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--amber-deep)}
.walk-steps button .n{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--mist-2);color:var(--navy);font-size:.8rem;font-weight:800}
@media (min-width:560px){.walk-steps button{font-size:.92rem;padding:.7rem .3rem}}
.walk-steps button[aria-selected="true"] .n{background:var(--navy);color:#fff}
.walk-body{padding:1.15rem 1.2rem 1.25rem}
.walk-body h3{font-size:1.3rem;margin-bottom:.15rem}
.walk-body .clock{font-size:.92rem;color:var(--muted);margin-bottom:.7rem}
.walk-body ul{list-style:none;margin:.2rem 0 0;padding:0}
.walk-body li{position:relative;padding-left:1.3rem;margin:.5rem 0;line-height:1.45;font-size:.99rem}
.walk-body li::before{content:"";position:absolute;left:.1rem;top:.58em;width:.48em;height:.48em;background:var(--sky);transform:rotate(45deg)}
.walk-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.walk-meta span{background:var(--mist);border-radius:99px;padding:.32rem .75rem;font-size:.86rem;color:var(--navy);font-weight:600}
.walk-meta span.fee{background:#fff3cf}
.walk-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;margin-top:1.1rem;align-items:center}
.walk-nav .src{font-size:.8rem;color:var(--muted)}
.walk-type{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem}
.walk-type button{appearance:none;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:.48rem .9rem;font-family:var(--text);font-size:.93rem;font-weight:600;color:var(--navy);cursor:pointer}
.walk-type button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
/* scene layers */
.sc{opacity:0;transition:opacity .35s ease}
.walk[data-stage="1"] .sc-1,.walk[data-stage="2"] .sc-2,.walk[data-stage="3"] .sc-3,.walk[data-stage="4"] .sc-4,.walk[data-stage="5"] .sc-5{opacity:1}
.walk[data-stage="1"] .sc-letter{animation:drop .9s cubic-bezier(.3,.9,.3,1) both}
@keyframes drop{0%{transform:translateY(-78px) rotate(-6deg);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}

/* stage chooser */
.stages{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
@media (min-width:700px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.stages{grid-template-columns:repeat(5,minmax(0,1fr))}}
.stages a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1rem 1.05rem;text-decoration:none;color:var(--ink)}
.stages a:hover{border-color:var(--blue)}
.stages b{font-family:var(--display);font-stretch:90%;font-weight:760;font-size:1.12rem;color:var(--navy);line-height:1.15}
.stages span{font-size:.92rem;color:var(--muted);margin-top:.35rem;line-height:1.4}
.stages em{font-style:normal;margin-top:auto;padding-top:.8rem;font-weight:700;color:var(--blue);font-size:.93rem}

/* change list */
.changes{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:1.6rem}
@media (min-width:860px){.changes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.change{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:1.1rem 1.1rem 1.15rem}
.change .was{font-size:.86rem;color:#b9c6ea;text-decoration:line-through;text-decoration-thickness:1px}
.change .now{font-family:var(--display);font-stretch:84%;font-weight:800;font-size:clamp(1.9rem,5vw,2.5rem);color:#fff;line-height:1;margin:.25rem 0 .45rem}
.change p{font-size:.96rem;margin:0;color:#dbe4f9}

/* firm finder */
.finder input{width:100%;font:inherit;padding:.9rem 1rem;border:2px solid var(--navy);border-radius:var(--r);background:#fff;color:var(--ink)}
/* two to a row (four on a wide screen), unless a tile would then be narrower than 8.5rem at the visitor's own text size: then fewer */
.finder-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(8.5rem,calc(50% - .3rem))),1fr))}
@media (min-width:760px){.finder-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(8.5rem,calc(25% - .4rem))),1fr))}}
.finder-list a{display:block;padding:.7rem .8rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;font-weight:700;color:var(--navy);font-size:.97rem;line-height:1.25}
.finder-list a:hover{border-color:var(--blue);background:var(--mist)}
.finder-list li[hidden]{display:none}
.finder-none{margin-top:.9rem;font-size:.95rem;color:var(--muted)}

/* how it works */
.how{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;margin-top:1.5rem}
@media (min-width:860px){.how{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}}
@media (min-width:620px){.how-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem}}
@media (min-width:1040px){.how-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem}}
.how h3{margin-bottom:.35rem}
.how p{margin:0;font-size:1rem}

/* ════════════════════════════════════════════════════════════════════
   TOOLS
   ════════════════════════════════════════════════════════════════════ */
.tool{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:1.2rem;margin:1.4rem 0}
/* min-width:0: a fieldset and a date box would otherwise refuse to get narrower than their contents (large text, a narrow phone) */
.tool fieldset{border:0;margin:0 0 1.1rem;padding:0;min-width:0}
.tool input{min-width:0}
.tool legend,.tool label.lbl{display:block;font-family:var(--display);font-stretch:94%;font-weight:700;color:var(--navy);margin-bottom:.45rem;font-size:1.02rem;padding:0}
.tool .hint{font-size:.88rem;color:var(--muted);margin:-.2rem 0 .5rem}
.tool input[type=number],.tool input[type=date],.tool input[type=text],.tool select{font:inherit;width:100%;max-width:17rem;padding:.75rem .85rem;border:2px solid var(--navy);border-radius:var(--r);background:#fff;color:var(--ink)}
.money{position:relative;max-width:17rem}
.money::before{content:"£";position:absolute;left:.85rem;top:50%;transform:translateY(-50%);font-weight:700;color:var(--navy)}
.money input{padding-left:1.8rem!important}
.seg{display:flex;flex-wrap:wrap;gap:.45rem}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;border:1.5px solid var(--line);border-radius:var(--r);padding:.6rem .9rem;font-weight:600;color:var(--navy);font-size:.96rem;background:#fff}
.seg input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--navy);outline-offset:2px}
.result{background:var(--mist);border-radius:var(--r);padding:1.1rem 1.1rem 1.15rem;margin-top:.4rem}
.result h3{margin-bottom:.6rem}
.result table{background:#fff;border-radius:var(--r);overflow:hidden}
.result .total td{font-weight:800;font-family:var(--display);font-size:1.15rem;color:var(--navy);border-top:2px solid var(--navy)}
.result .sub{font-size:.88rem;color:var(--muted);margin:.8rem 0 0}

/* what-can-they-take explorer */
.rooms{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0}
.rooms button{appearance:none;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:.5rem .95rem;font:inherit;font-weight:600;font-size:.95rem;color:var(--navy);cursor:pointer}
.rooms button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.items{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(7rem,calc(50% - .3rem))),1fr))}
@media (min-width:700px){.items{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(7rem,calc(33.333% - .4rem))),1fr))}}
.items li{margin:0;padding:0}
.items li::before{display:none!important}
.items button{width:100%;height:100%;text-align:left;appearance:none;border:1.5px solid var(--line);background:#fff;border-radius:var(--r);padding:.75rem .8rem;font:inherit;font-weight:700;font-size:.97rem;color:var(--navy);cursor:pointer;line-height:1.25;display:flex;gap:.55rem;align-items:center;overflow-wrap:anywhere}
.items button svg{width:1.7rem;height:1.7rem;flex:none;color:var(--blue)}
.items button[aria-pressed="true"]{border-color:var(--navy);background:var(--mist)}
.verdict{margin-top:1rem;border-radius:var(--r);padding:1.05rem 1.1rem;border-left:6px solid var(--muted);background:var(--mist)}
.verdict[data-v="exempt"]{border-left-color:var(--leaf);background:var(--leaf-bg)}
.verdict[data-v="can"]{border-left-color:var(--brick);background:var(--brick-bg)}
.verdict[data-v="depends"]{border-left-color:var(--amber-deep);background:#fff7e0}
.verdict h3{font-size:1.15rem;margin-bottom:.3rem}
.verdict p{margin:0 0 .5em}
.verdict .basis{font-size:.86rem;color:var(--muted);margin:0}

/* notice date checker */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-top:1rem;font-size:.82rem}
.cal div{aspect-ratio:1/1;display:grid;place-items:center;border-radius:6px;background:#fff;border:1px solid var(--line);font-variant-numeric:tabular-nums;position:relative}
.cal .hd{aspect-ratio:auto;border:0;background:none;color:var(--muted);font-weight:700;padding:.2rem 0}
.cal .off{background:repeating-linear-gradient(135deg,#f2f4f9 0 5px,#e6eaf3 5px 10px);color:#8591ad}
.cal .cnt{background:var(--mist);border-color:var(--sky);font-weight:700;color:var(--navy)}
.cal .start{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:800}
.cal .first{background:var(--amber);border-color:var(--amber-deep);font-weight:800;color:var(--amber-ink)}
.cal .pad{border:0;background:none}
.key{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.84rem;color:var(--muted);margin-top:.7rem}
.key i{display:inline-block;width:.9rem;height:.9rem;border-radius:3px;vertical-align:-.12rem;margin-right:.3rem;border:1px solid var(--line)}

/* ════════════════════════════════════════════════════════════════════
   ENQUIRY FORM  (fits one screen, centred, no scrolling)
   ════════════════════════════════════════════════════════════════════ */
body.enq{background:var(--mist);min-height:100dvh;display:flex;flex-direction:column}
.enq-top{background:#fff;border-bottom:1px solid var(--line)}
.enq-top .wrap{display:flex;align-items:center;min-height:3.4rem;gap:1rem}
.enq-top .logo img{max-height:40px}
.enq-top .back{margin-left:auto;font-size:.92rem;color:var(--muted);text-decoration:none;font-weight:600}
.enq-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;row-gap:.85rem;padding:.8rem .9rem 1rem}
/* the phone line under the card */
.enq-call{margin:0;font-size:.95rem;color:var(--muted);text-align:center}
.enq-call a{color:var(--navy);text-decoration:none;font-size:1.14em}
.enq-call b{font-family:var(--display);font-stretch:92%;font-weight:800;font-variant-numeric:tabular-nums}
.enq-call a:hover{color:var(--blue)}
@media (max-width:480px){.enq-call a{display:block;margin-top:.1rem}}
.enq-card{width:min(100%,33rem);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.15rem 1.15rem 1.2rem;box-shadow:0 30px 60px -40px rgba(13,24,56,.5)}
.enq-prog{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.enq-prog .trk{flex:1;height:6px;border-radius:99px;background:var(--mist-2);overflow:hidden}
.enq-prog .fill{height:100%;width:0;background:var(--blue);border-radius:99px;transition:width .3s}
.enq-prog .txt{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.enq-step{display:none}
.enq-step.on{display:block}
.enq-step h1,.enq-step h2{font-size:clamp(1.35rem,5vw,1.7rem);font-stretch:88%;font-weight:780;line-height:1.1;color:var(--navy)}
.enq-sub{font-size:.95rem;color:var(--muted);margin:.4rem 0 .8rem}
.enq-opts{display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem}
.enq-opt{appearance:none;text-align:left;width:100%;border:1.5px solid var(--line);background:#fff;border-radius:var(--r);padding:.72rem .9rem;font:inherit;font-weight:600;font-size:1rem;color:var(--navy);cursor:pointer;line-height:1.25}
.enq-opt:hover{border-color:var(--blue);background:var(--mist)}
.enq-opt.sel{border-color:var(--navy);background:var(--mist)}
.enq-skip{appearance:none;background:none;border:0;color:var(--muted);font:inherit;font-size:.9rem;text-decoration:underline;cursor:pointer;margin-top:.7rem;padding:.2rem 0}
.enq-back{appearance:none;background:none;border:0;color:var(--muted);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;padding:.5rem 0;margin-top:.6rem}
.enq-reassure p{font-size:.98rem;margin:.5rem 0 .7rem}
.enq-reassure ul{list-style:none;margin:0 0 1rem;padding:.85rem .95rem;background:var(--mist);border-radius:var(--r)}
.enq-reassure li{position:relative;padding-left:1.4rem;margin:.4rem 0;font-size:.96rem;line-height:1.4}
.enq-reassure li::before{content:"";position:absolute;left:.1rem;top:.5em;width:.5em;height:.5em;background:var(--sky);transform:rotate(45deg)}
.enq-field{margin-bottom:.6rem;position:relative}
.enq-field label{display:block;font-weight:700;font-size:.9rem;color:var(--navy);margin-bottom:.22rem}
.enq-field label span{font-weight:400;color:var(--muted)}
.enq-field input{width:100%;font:inherit;padding:.72rem .85rem;border:1.5px solid var(--navy);border-radius:var(--r);background:#fff;color:var(--ink)}
.enq-field .err{display:none;position:absolute;right:0;top:.1rem;font-size:.8rem;color:var(--brick);font-weight:700}
.enq-field.bad .err{display:block}
.enq-field.bad input{border-color:var(--brick)}
.enq-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;line-height:1.4;color:var(--muted);margin:.5rem 0 .8rem}
.enq-consent input{width:1.25rem;height:1.25rem;flex:none;margin-top:.05rem;accent-color:var(--blue)}
.enq-card .btn{width:100%}
.enq-card .btn[disabled]{opacity:.45;cursor:not-allowed}
.enq-fail{display:none;color:var(--brick);font-weight:700;font-size:.9rem;margin-top:.7rem;text-align:center}
.enq-fail.on{display:block}
.enq-fail a{color:inherit}
/* test mode only: where the enquiry went */
.enq-report{margin:.2rem 0 1rem;padding:.8rem .9rem;border:2px solid var(--navy);border-radius:var(--r);font-size:.9rem;line-height:1.4;background:#fff}
.enq-report b{display:block;margin-bottom:.35rem;color:var(--navy)}
.enq-report ul{list-style:none;margin:0;padding:0}
.enq-report li{margin:.25rem 0;padding-left:1.5rem;position:relative}
.enq-report li::before{content:"";position:absolute;left:.15rem;top:.32em;width:.8rem;height:.8rem;border-radius:50%;background:var(--brick)}
.enq-report li.ok::before{background:var(--leaf)}
.enq-done h2{margin:.2rem 0 .5rem}
.enq-done ol{padding-left:1.2em;margin:.6rem 0 1rem;font-size:.97rem}
.enq-foot{font-size:.78rem;color:var(--muted);text-align:center;padding:0 1rem 1rem;max-width:44rem;margin:0 auto;line-height:1.45}
@media (max-height:700px){.enq-card{padding:.9rem .95rem 1rem}.enq-opt{padding:.58rem .8rem;font-size:.96rem}.enq-sub{margin:.3rem 0 .6rem}.enq-top .wrap{min-height:3rem}}

/* ════════════════════════════════════════════════════════════════════
   LAYOUT ADDITIONS
   ════════════════════════════════════════════════════════════════════ */
.rail{display:none}
@media (min-width:980px){.rail{display:block}}
.solo{display:block}
.prose.wide{max-width:none}
.prose.wide>p,.prose.wide>h2,.prose.wide>h3,.prose.wide>ul:not(.tiles):not(.linklist),.prose.wide>ol:not(.seq),.prose.wide>.note,.prose.wide>.faq,.prose.wide>.free,.prose.wide>.act,.prose.wide>.sources,.prose.wide>.seq,.prose.wide>.related,.prose.wide>.indep{max-width:var(--measure)}
.inline-cta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline;margin:2rem 0 0;padding:.85rem 1rem;border:1px solid var(--line);border-left:5px solid var(--amber-deep);border-radius:0 var(--r) var(--r) 0;background:#fffaf0;font-size:1rem}
.inline-cta span{color:var(--ink)}
.inline-cta a{font-weight:700}
.related{margin-top:2.2rem}
.related h2{font-size:1.25rem;margin-bottom:.2rem}
tr[hidden],li[hidden]{display:none!important}

/* home */
/* the walkthrough in its own section: words on the left, the walkthrough on the right */
.walk-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem}
.walk-col{min-width:0}
.walk-also{list-style:none;margin:1.3rem 0 0;padding:0}
.walk-also li{margin:.5rem 0}
.walk-also a{font-weight:700}
/* wide screens: the words stay in view while the walkthrough is used, and a photo closes the column */
.walk-photo{display:none}
@media (min-width:980px){
  .walk-sec{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:3.6rem;align-items:stretch}
  .walk-side{display:flex;flex-direction:column;min-width:0}
  .walk-track{flex:1}
  .walk-intro{position:sticky;top:calc(var(--hdr-h,4.5rem) + 1.9rem)}
  /* taller than the window (large text, a short window): it scrolls with the page instead; set by site.js */
  .walk-intro.loose{position:static}
  .walk-col{align-self:start}
  .walk-photo{display:block;margin:2.2rem 0 0}
  .walk-photo img{aspect-ratio:3/2}
}
.walk-links{display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;margin:.95rem 0 0;font-size:.93rem}
.walk-links a{font-weight:600}
.walk-nav .btn[disabled]{opacity:.4;cursor:default}
/* home: what enforcement costs. On a phone: the words, the figures, then the way to get in touch.
   On a wide screen the figures sit beside the rest. */
.cost{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.cost h2 span{display:block}
.cost .facts{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.cost .facts>div{border-bottom:1px solid var(--line)!important;border-right:1px solid var(--line)!important}
.cost .facts>div:nth-child(2n){border-right:0!important}
.cost .facts>div:nth-last-child(-n+2){border-bottom:0!important}
.cost-now{margin:0;max-width:36rem;line-height:1.5}
.cost-foot .btn-row{margin-top:1.3rem}
.cost-more{margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.98rem}
.cost-more a{font-weight:700}
.cost-src{margin:1.3rem 0 0;font-size:.85rem;line-height:1.45;color:var(--muted);max-width:36rem}
@media (min-width:920px){
  .cost{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:3.2rem;row-gap:1.3rem;grid-template-areas:"head figures" "foot figures";align-items:start}
  .cost-head{grid-area:head}
  .cost-foot{grid-area:foot}
  .cost .facts{grid-area:figures;align-self:center}
}
.cols-even{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
@media (min-width:920px){.cols-even{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.2rem;align-items:center}}
.cols-even .facts{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.cols-even .facts>div{border-bottom:1px solid var(--line)!important;border-right:1px solid var(--line)!important}
.cols-even .facts>div:nth-child(2n){border-right:0!important}
.cols-even .facts>div:nth-last-child(-n+2){border-bottom:0!important}
@media (min-width:980px){.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
ol.how{list-style:none;padding:0;counter-reset:how}
ol.how>li{counter-increment:how;border-top:3px solid var(--navy);padding-top:.85rem;margin:0}
ol.how>li::before{content:counter(how);display:block;font-family:var(--display);font-stretch:84%;font-weight:800;font-size:1.7rem;line-height:1;color:var(--blue);margin-bottom:.45rem}
.how-cost{font-size:.9rem;color:var(--muted);max-width:78ch;margin:1.5rem 0 1.2rem;line-height:1.5}
/* questions on the left, the call and the free services on the right */
.faq-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.faq-sec>div{min-width:0}
.faq-sec .act{margin-top:0}
.faq-sec .free{margin-bottom:0}
@media (min-width:980px){.faq-sec{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:3.6rem;align-items:start}.faq-sec .faq{margin-top:1.1rem}}

/* articles list */
.post-list{list-style:none;margin:1.2rem 0 2rem;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
@media (min-width:860px){.post-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post-list a{display:flex;flex-direction:column;height:100%;padding:1.05rem 1.1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);background:#fff;text-decoration:none;color:var(--ink)}
.post-list a:hover{border-color:var(--blue);background:var(--mist)}
.post-list b{font-family:var(--display);font-stretch:90%;font-weight:740;font-size:1.18rem;color:var(--navy);line-height:1.18}
.post-list span{font-size:.95rem;color:var(--muted);margin-top:.35rem;line-height:1.45}
.post-list em{font-style:normal;font-size:.84rem;color:var(--muted);margin-top:auto;padding-top:.7rem}

/* tools: small additions */
.result .tbl-wrap{margin:.4rem 0 0;background:#fff}
.result .tbl th{font-weight:700;color:var(--navy);overflow-wrap:anywhere}
.key span{white-space:nowrap}
.key i.k-start{background:var(--navy);border-color:var(--navy)}
.key i.k-cnt{background:var(--mist);border-color:var(--sky)}
.key i.k-off{background:repeating-linear-gradient(135deg,#f2f4f9 0 3px,#dfe4ef 3px 6px)}
.key i.k-first{background:var(--amber);border-color:var(--amber-deep)}
.cal{max-width:26rem}

/* cookie choice: a strip along the bottom edge, kept as shallow as it can be so that it does not
   sit on top of the page's own buttons while a first-time visitor decides.
   Phone: the words on the left, the two buttons stacked on the right.
   Tablet and wider: one row, the words then the two buttons. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(13,24,56,.45);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.75rem;align-items:center;padding:.5rem calc(.75rem + var(--safe-x)) calc(.5rem + var(--safe-b));font-size:.8rem;line-height:1.35}
.consent p{margin:0}
.consent-more{display:none}
.consent-btns{display:grid;gap:.375rem}
.consent-btns .btn{min-width:5.6rem;padding:.62rem .7rem;font-size:.9rem}
@media (min-width:700px){
  .consent{display:flex;gap:1.4rem;padding:.65rem max(1.2rem + var(--safe-x),calc((100vw - 76rem)/2)) calc(.65rem + var(--safe-b));font-size:.9rem;line-height:1.45}
  .consent p{flex:1}
  .consent-more{display:inline}
  .consent-btns{display:flex;gap:.6rem}
  .consent-btns .btn{flex:none;min-width:6.5rem}
}

/* enquiry form: small additions */
.enq-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.enq-links{list-style:none;margin:0;padding:0;font-size:.95rem}
.enq-links li{padding:.35rem 0;border-bottom:1px solid var(--mist-2)}
.enq-step h1:focus,.enq-step h2:focus{outline:none}
.enq-received .btn{margin-top:.2rem}
.enq-card .btn-wa{margin-top:.3rem}
.enq-opt:focus-visible,.enq-skip:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.enq-test{position:fixed;left:0;right:0;bottom:0;background:var(--navy);color:#fff;font-size:.78rem;font-weight:600;text-align:center;padding:.35rem;z-index:99}

.has-consent .bar{display:none}
/* test mode puts a line along the bottom edge: the strip and the bar sit above it */
.is-test .consent{bottom:2rem}
.is-test .bar{bottom:2rem}
body.enq.is-test{padding-bottom:2rem}

/* fixes: icons inside any button; list markers inside custom blocks */
.btn svg{width:1.2em;height:1.2em;flex:none}
.prose .threshold ul>li{padding-left:1.7rem}
.prose .threshold ul>li::before{left:0;top:.2em;width:1.15rem;height:1.15rem;background-color:transparent;transform:none}
.prose .finder-list>li,.prose .post-list>li,.prose .stages>li,.prose .items>li,.prose .free ul>li{padding-left:0}
.prose .finder-list>li::before,.prose .post-list>li::before,.prose .stages>li::before{display:none}
.prose .walk-body ul>li{padding-left:1.3rem}
.prose .walk-body ul>li::before{left:.1rem;top:.58em}
.prose .enq-reassure li::before{top:.5em}

.prose .result h3,.prose .verdict h3,.prose .note h3,.prose .threshold h3,.prose .seq h3{margin-top:0}
.result .tbl th small{display:block;font-family:var(--text);font-weight:400;font-size:.86rem;color:var(--muted);line-height:1.35;margin-top:.15rem}
.result .total th,.result .total td{font-weight:800;font-family:var(--display);font-size:1.12rem;color:var(--navy);border-top:2px solid var(--navy)}
.result .total+.total th,.result .total+.total td{border-top:1px solid var(--line)}
/* the calculator's answer on the narrowest phones: less padding and smaller totals, so a seven-figure sum still fits */
@media (max-width:379.98px){.result{padding:.85rem .7rem .9rem}.result .tbl th,.result .tbl td{padding:.55rem .5rem}.result .total th,.result .total td{font-size:1rem}}