/* Figtree, self-hosted (5 Nov 2026): the same files Google Fonts served. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   S6 CARE — the design system for Accountants for Care Providers
   2 November 2026. Written after Andy saw the care and hospitality previews
   side by side on the estate agents chassis and asked why they looked the same.

   Standard set by the estate's own brands (trades, landlords, startups): a
   logo lockup with an icon, a heavy display headline, the brand colour used
   as a ground, and a hero you recognise without reading it.

   Here: a heather hero ground with the headline in Figtree 800 white, and a
   letterbox photograph of people set into it, straddling the heather and the
   white page below. Calm everywhere else: white ground, ink #141414, heather
   #a8327a as the one accent, 12px radii, thin heather rules, generous space.
   No serif, no blue, no dark green, no arch shapes, no pill header.

   Self-contained: this does not extend styles.css (the estate agents system),
   which this site does not ship. The class vocabulary is fixed by the page
   modules and calculators.js.
   ========================================================================== */

:root {
  --acc: #a8327a;
  --acc-d: #872863;
  --acc-soft: #f8edf4;
  --tint: #fbf6f9;
  --ink: #141414;
  --tx: #33302f;
  --mut: #6a6466;
  --line: #e9e1e6;
  --card: #ffffff;
  --r: 12px;
  --max: 1240px;
  --gut: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17.5px; line-height: 1.65; color: var(--tx); background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, .display { font-family: inherit; color: var(--ink); line-height: 1.15; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 750; letter-spacing: -.025em; }
h3, h2.h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 700; }
p + p { margin-top: .9rem; }
strong, b { color: var(--ink); font-weight: 700; }
.accent { color: var(--acc); }
.inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 860px; }
.lede { font-size: 1.2rem; line-height: 1.6; color: var(--mut); max-width: 36em; }
.micro { font-size: .84rem; color: var(--mut); margin-top: 1.2rem; }
.topbar, footer.site, .doc-body p, .doc-body li { overflow-wrap: anywhere; }

/* ---------- buttons: 8px corners, never pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 1rem/1.2 "Figtree", sans-serif; padding: 15px 26px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary, .btn-bright { background: var(--acc); color: #fff; border-color: var(--acc); }
.btn-primary:hover, .btn-bright:hover { background: var(--acc-d); border-color: var(--acc-d); }
.btn-ghost, .btn-ghost-dark { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover, .btn-ghost-dark:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 10px 16px; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }

/* ---------- header: a plain bar ---------- */
header.site { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
header.site .inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.wordmark:hover { text-decoration: none; }
.wm-logo { height: 64px; width: auto; display: block; }
.wm-mark svg { width: 100%; height: 100%; display: block; }
.wm-text { display: flex; flex-direction: column; line-height: 1; }
.wm-text .wm-a { font-size: 1.2rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.wm-text .wm-b { font-size: 1.85rem; font-weight: 800; color: var(--acc); letter-spacing: -.03em; margin-top: 3px; }
nav.primary { display: flex; align-items: center; gap: 4px; }
nav.primary a, nav.primary .nav-group > button {
  font: 600 .96rem/1 "Figtree", sans-serif; color: var(--ink); padding: 10px 12px;
  background: none; border: 0; cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent;
}
nav.primary a:hover, nav.primary .nav-group > button:hover { color: var(--acc); text-decoration: none; }
header.site nav.primary a.on { color: var(--acc); border-bottom-color: var(--acc); }
nav.primary .nav-phone { color: var(--mut); font-weight: 600; margin-left: 10px; }
nav.primary .nav-cta { background: var(--acc); color: #fff; border-radius: 8px; padding: 12px 18px; margin-left: 6px; border: 0; }
nav.primary .nav-cta:hover { background: var(--acc-d); color: #fff; }
.nav-group { position: relative; }
.nav-group > button::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nav-group .sub {
  position: absolute; top: 100%; left: 0; min-width: 270px; background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--acc); border-radius: 0 0 var(--r) var(--r); padding: 8px; opacity: 0; visibility: hidden;
  box-shadow: 0 18px 36px rgba(20, 20, 20, .08); transition: opacity .15s;
}
.nav-group:hover .sub, .nav-group:focus-within .sub { opacity: 1; visibility: visible; }
.nav-group .sub a { display: block; padding: 10px 12px; font-weight: 500; border-bottom: 0; }
.nav-group .sub a:hover { background: var(--tint); }
.nav-toggle { display: none; font: 700 .95rem "Figtree", sans-serif; background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 9px 16px; cursor: pointer; }

/* ---------- hero: heather ground, photo set into it ---------- */
.hero { background: var(--acc); color: #fff; padding: 64px 0 0; position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #fff; z-index: 0; }
.hero.hero-plain { padding-bottom: 64px; }
.hero.hero-plain::after { display: none; }
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 15em; }
.hero h1 .accent { color: #fff; box-shadow: inset 0 -.16em 0 rgba(255, 255, 255, .35); }
.hero .crumbs { color: #fff; font-size: .88rem; margin-bottom: 1.4rem; }
.hero .crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero .lede { color: rgba(255, 255, 255, .92); }
.hero-sub { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-top: 1.6rem; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.hero .btn-primary { background: #fff; color: var(--acc); border-color: #fff; }
.hero .btn-primary:hover { background: var(--acc-soft); border-color: var(--acc-soft); color: var(--acc-d); }
.hero .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.hero .btn-ghost:hover { background: #fff; color: var(--acc); }
.hero-band { margin: 52px auto 0; max-width: calc(var(--max) + 160px); padding: 0 20px; }
.hero-band img { width: 100%; height: clamp(300px, 38vw, 540px); object-fit: cover; object-position: center var(--fy, 40%); border-radius: var(--r); }
.hero-agenda { margin-top: 52px; }

/* home: centred headline, the band carries a fact tag */
.hero-home { text-align: center; padding-top: 84px; }
.hero-home h1 { font-size: clamp(2.8rem, 6.2vw, 5.4rem); max-width: 13em; margin: 0 auto; }
.hero-home .lede { margin: 1.6rem auto 0; max-width: 40em; }
.hero-home .hero-acts { justify-content: center; margin-top: 2rem; }
.hero-home .hero-band { position: relative; }
.rate-tag {
  position: absolute; left: 56px; bottom: -28px; background: #fff; color: var(--ink); border-radius: var(--r);
  padding: 18px 24px; text-align: left; box-shadow: 0 16px 40px rgba(20, 20, 20, .12); border-left: 5px solid var(--acc); max-width: 360px;
}
.rate-tag b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--acc); line-height: 1.1; }
.rate-tag span { font-size: .92rem; color: var(--tx); }

/* Business Pulse: the agenda panel sits where the photograph would */
.hero-panel { background: #fff; color: var(--tx); border-radius: var(--r); box-shadow: 0 16px 40px rgba(20, 20, 20, .10); padding: 10px 32px; }
.hero-panel .hp-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.hero-panel .hp-row:last-child { border-bottom: 0; }
.hero-panel .k { font-weight: 800; color: var(--acc); font-size: 1.05rem; }
.hero-panel .l { font-size: 1.08rem; color: var(--ink); }
.hero-panel .v:empty { display: none; }
.hero-facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-top: 30px; }

/* ---------- sections ---------- */
.section { padding: 96px 0; }
.section.bg-soft { background: var(--tint); }
.section + .section:not(.bg-soft):not(.doc-sec) { padding-top: 32px; }
.bg-soft + .bg-soft { padding-top: 32px; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2::before, .split-copy h2::before, .cta-copy h2::before {
  content: ""; display: block; width: 44px; height: 3px; background: var(--acc); margin-bottom: 20px; border-radius: 2px;
}
.section-head p { margin-top: 1rem; font-size: 1.08rem; color: var(--mut); }
.section > .inner.narrow > h2 { margin-bottom: 1.2rem; }

/* card rows: Buzz Legal, BFS, BMC and BFP blocks */
.grid { display: grid; gap: 22px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--acc); border-radius: var(--r); padding: 26px 26px 24px; display: flex; flex-direction: column; }
.card .icon { width: 30px; height: 30px; margin-bottom: 16px; }
.card .icon svg { width: 100%; height: 100%; stroke: var(--acc); display: block; }
.card h3 a, .card h2.h3 a { color: var(--ink); }
.card p { font-size: .95rem; color: var(--mut); margin-top: .5rem; }
.card-link { font-weight: 700; font-size: .95rem; margin-top: auto; padding-top: 16px; display: inline-block; }
.card .card-link::after { content: " \2192"; }

ul.checks { list-style: none; margin: 1.2rem 0; }
ul.checks li { position: relative; padding: 0 0 0 30px; margin-bottom: .8rem; }
ul.checks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2.5px solid var(--acc); border-bottom: 2.5px solid var(--acc); transform: rotate(-45deg); }

/* ---------- photo beside copy: unequal columns ---------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.split.flip .split-photo { order: 2; }
.split.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split-photo { min-width: 0; }
.split-fig { margin: 0; }
.split-fig img { width: 100%; height: 520px; object-fit: cover; object-position: center 35%; border-radius: var(--r); }
.split-copy h2 { margin-bottom: 1rem; }
figure.photo { margin: 2rem 0; }
figure.photo img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--r); }

/* ---------- home: four settings, photo-led ---------- */
.settings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.setting { display: flex; flex-direction: column; }
.setting img { width: 100%; height: 250px; object-fit: cover; object-position: center 35%; border-radius: var(--r); }
.setting .s-body { padding: 22px 0 0; border-top: 0; display: flex; flex-direction: column; flex: 1; }
.setting h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.setting p { font-size: .97rem; color: var(--mut); }
.setting a.card-link { margin-top: auto; }

/* ---------- home: the three services ---------- */
.rungs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.rung { padding: 40px 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; background: #fff; }
.rung + .rung { border-left: 1px solid var(--line); }
.rung .r-num { font-size: .95rem; font-weight: 800; color: var(--acc); margin-bottom: 1.2rem; }
.rung h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .6rem; }
.rung .r-price { font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.rung ul { list-style: none; margin: .4rem 0 1.4rem; font-size: .96rem; }
.rung li { padding: 9px 0; border-top: 1px solid var(--line); }
.rung a.card-link { margin-top: auto; }
.rung.lead { background: var(--acc); color: rgba(255, 255, 255, .9); border-radius: var(--r); border: 0; margin: -24px 0; padding: 64px 40px; }
.rung.lead h3, .rung.lead .r-price, .rung.lead .r-num, .rung.lead a { color: #fff; }
.rung.lead li { border-color: rgba(255, 255, 255, .24); }

.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.cols2 > div { border-top: 3px solid var(--acc); padding-top: 22px; }
.cols2 h3 { margin-bottom: .6rem; font-size: 1.3rem; }
.cols2 h2 { margin-bottom: 1rem; font-size: 1.8rem; }

/* ---------- care homes: who pays for one resident's week ---------- */
.week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.wk { display: flex; flex-direction: column; }
.wk .wk-bar { border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; min-height: 300px; border: 1px solid var(--line); }
.wk .seg { padding: 16px 18px; font-size: .9rem; line-height: 1.45; color: var(--tx); border-top: 1px solid var(--line); }
.wk .seg:first-child { border-top: 0; }
.wk .seg b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.wk .seg.nhs { background: var(--ink); color: rgba(255, 255, 255, .82); }
.wk .seg.nhs b { color: #fff; }
.wk .seg.council { background: var(--acc); color: rgba(255, 255, 255, .9); }
.wk .seg.council b { color: #fff; }
.wk .seg.res { background: var(--acc-soft); }
.wk .seg.grow { flex: 1; }
.wk h3 { margin-top: 18px; }
.wk p { font-size: .93rem; color: var(--mut); margin-top: .35rem; }

/* ---------- home care: one worker's morning ---------- */
.visit { border: 1px solid var(--line); border-radius: var(--r); padding: 44px; }
.v-track { display: grid; grid-template-columns: 2fr 4.5fr 1.5fr 3fr 2fr 6fr 2fr; height: 76px; border-radius: 8px; overflow: hidden; }
.v-track span { display: flex; align-items: center; justify-content: center; font-size: .84rem; font-weight: 700; text-align: center; padding: 0 6px; line-height: 1.2; }
.v-track .home { background: repeating-linear-gradient(135deg, #eeeaec 0 8px, #f8f6f7 8px 16px); color: var(--mut); }
.v-track .care { background: var(--acc); color: #fff; }
.v-track .trav { background: var(--ink); color: #fff; }
.v-times { display: grid; grid-template-columns: 2fr 4.5fr 1.5fr 3fr 2fr 6fr 2fr; font-size: .8rem; color: var(--mut); margin-top: 10px; }
.v-key { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; font-size: .92rem; }
.v-key i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; }
.v-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--line); }
.v-sum div { padding: 22px 20px 0 0; font-size: .95rem; }
.v-sum b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--acc); }

/* ---------- supported living: a sleep-in night ---------- */
.night { border: 1px solid var(--line); border-radius: var(--r); padding: 44px; background: #fff; }
.n-bar { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin-top: 26px; border-radius: 8px; overflow: hidden; gap: 3px; }
.n-bar span { height: 76px; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.n-bar .asleep { background: #efeaed; color: var(--mut); }
.n-bar .woken { background: var(--acc); color: #fff; }
.n-bar .awake { background: var(--ink); color: #fff; }
.n-hours { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); font-size: .78rem; margin-top: 10px; color: var(--mut); }
.n-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 34px; }
.n-rows p { font-size: .96rem; }
.n-rows b { display: block; font-size: 1.25rem; font-weight: 800; color: var(--acc); margin-bottom: .3rem; }

/* ---------- nurseries: rates and the funded year ---------- */
.gap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; }
.gap-rates, .gap-weeks { border: 1px solid var(--line); border-radius: var(--r); padding: 38px; }
.gap-weeks { background: var(--acc); color: rgba(255, 255, 255, .9); border: 0; }
.gap-weeks h3 { color: #fff; }
.gap h3 { margin-bottom: 1rem; font-size: 1.3rem; }
.g-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 76px; gap: 16px; align-items: center; padding: 14px 0 4px; }
.g-row .g-l { font-size: .95rem; color: var(--ink); font-weight: 700; }
.g-row .g-track { height: 30px; background: var(--tint); border-radius: 6px; overflow: hidden; }
.g-row .g-fill { height: 100%; background: var(--acc); border-radius: 6px; }
.g-row .g-v { font-size: 1.1rem; font-weight: 800; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.g-sub { font-size: .82rem; color: var(--mut); margin: 0 0 6px 166px; }
.gw-year { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 3px; margin: 20px 0 16px; }
.gw-year i { height: 22px; border-radius: 3px; background: #fff; }
.gw-year i.off { background: rgba(255, 255, 255, .25); }
.gw-big { font-size: 2.6rem; font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.1; margin-top: 22px; }

/* ---------- accounts and tax: the VAT line ---------- */
.vatline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.vatline > div { padding: 40px; }
.vatline > div + div { background: var(--tint); border-left: 3px solid var(--acc); }
.vatline h3 { font-size: 1.4rem; }
.vatline ul { list-style: none; margin-top: 1rem; }
.vatline li { padding: 14px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.vatline li b { display: block; }
.vatline li small { display: block; font-size: .82rem; color: var(--mut); margin-top: 3px; }

/* ---------- payroll: the payslip ---------- */
.payroll-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.payslip { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--acc); border-radius: var(--r); padding: 34px 36px; font-variant-numeric: tabular-nums; box-shadow: 0 16px 40px rgba(20, 20, 20, .06); }
.ps-head { display: flex; justify-content: space-between; gap: 16px; font-size: .86rem; color: var(--mut); padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.ps-row, .ps-total { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px; gap: 12px; align-items: baseline; }
.ps-row { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.ps-row .ps-h, .ps-row .ps-c { text-align: right; color: var(--ink); font-weight: 700; }
.ps-row.out { color: var(--mut); }
.ps-row.out .ps-h, .ps-row.out .ps-c { color: var(--mut); font-weight: 400; text-decoration: line-through; }
.ps-row small { display: block; font-size: .8rem; color: var(--mut); }
.ps-total { padding-top: 16px; font-weight: 800; color: var(--acc); font-size: 1.1rem; }
.ps-total span:not(:first-child) { text-align: right; }

/* ---------- fee rates ---------- */
.rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--acc); }
.rate { padding: 30px 28px 30px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
.rate:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.rate h3 { font-size: 1rem; grid-column: 1 / -1; color: var(--mut); font-weight: 600; }
.rate .to { font-size: 2.4rem; font-weight: 800; color: var(--ink); letter-spacing: -.035em; order: 1; }
.rate .from { font-size: 1rem; color: var(--mut); text-decoration: line-through; order: 2; }
.rate p { grid-column: 1 / -1; font-size: .9rem; color: var(--mut); order: 3; }

/* ---------- Business Pulse ---------- */
.cycle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.cycle::before { content: ""; position: absolute; left: 28px; right: calc(20% - 28px); top: 27px; height: 2px; background: var(--acc); }
.cy { padding: 0 22px 0 0; position: relative; }
.cy .cy-dot { width: 56px; height: 56px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; margin-bottom: 18px; box-shadow: 0 0 0 8px #fff; }
.cy h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.cy p { font-size: .94rem; color: var(--mut); }
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; display: flex; flex-direction: column; }
.tier .t-price { font-size: 2.3rem; font-weight: 800; color: var(--ink); letter-spacing: -.035em; margin: .7rem 0 .1rem; }
.tier .t-per { font-size: .86rem; color: var(--mut); margin: 0 0 1rem; }
.tier p { font-size: .94rem; color: var(--mut); }
.tier.lead { background: var(--acc); border-color: var(--acc); }
.tier.lead h3, .tier.lead .t-price, .tier.lead p, .tier.lead .t-per { color: #fff; }

/* ---------- buying or selling: two lanes ---------- */
.handover { border: 1px solid var(--line); border-radius: var(--r); padding: 40px; }
.hv-cols, .hv-lane { display: grid; grid-template-columns: 170px repeat(4, minmax(0, 1fr)); gap: 12px; }
.hv-cols { font-size: .82rem; font-weight: 700; color: var(--mut); padding-bottom: 6px; }
.hv-lane { margin-top: 14px; align-items: stretch; }
.hv-lane .hv-who { font-weight: 800; color: var(--acc); font-size: 1rem; align-self: center; }
.hv-lane .hv-step { background: var(--tint); border-radius: 8px; padding: 16px 18px; font-size: .9rem; line-height: 1.45; }
.hv-lane .hv-step b { display: block; color: var(--ink); font-size: .96rem; margin-bottom: 3px; }
.hv-lane .hv-step.key { background: var(--acc); color: rgba(255, 255, 255, .9); }
.hv-lane .hv-step.key b { color: #fff; }

/* ---------- Greater Manchester ---------- */
.gm { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.gm-figure { font-size: clamp(4.4rem, 10vw, 8rem); font-weight: 800; color: var(--acc); letter-spacing: -.05em; line-height: 1; }
.gm-bar { display: flex; height: 60px; border-radius: 8px; overflow: hidden; margin: 20px 0 14px; }
.gm-bar .in { background: var(--acc); width: 38%; color: #fff; display: flex; align-items: center; padding-left: 16px; font-weight: 800; }
.gm-bar .out { background: var(--tint); flex: 1; display: flex; align-items: center; padding-left: 16px; color: var(--mut); font-weight: 700; }
.gm-src { font-size: .84rem; color: var(--mut); }

/* ---------- about, contact, tools ---------- */
.founders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.founder { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 32px; display: flex; gap: 22px; align-items: flex-start; }
.founder img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--acc); }
.founder .role { margin: .2rem 0 .8rem; font-weight: 700; color: var(--acc); }
.founder p { font-size: .96rem; color: var(--mut); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.contact-lines { list-style: none; margin-top: 1.2rem; }
.contact-lines li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 1.15rem; }
.contact-lines b { display: block; font-size: .86rem; color: var(--mut); font-weight: 600; margin-bottom: 2px; }
.contact-lines a { font-weight: 700; }
.toolcard { display: flex; flex-direction: column; }
.toolcard img { width: 100%; height: 230px; object-fit: cover; object-position: center 40%; border-radius: var(--r); }
.toolcard .tc-body { padding: 22px 0 0; display: flex; flex-direction: column; flex: 1; }
.toolcard h3, .toolcard h2.h3 { font-size: 1.3rem; }
.toolcard p { font-size: .97rem; color: var(--mut); margin-top: .5rem; }
.toolcard a.card-link { margin-top: auto; }

/* ---------- forms ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--acc); border-radius: var(--r); padding: 38px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 700; font-size: .92rem; color: var(--ink); margin-bottom: 6px; }
input, textarea, select {
  width: 100%; font: 400 1rem "Figtree", sans-serif; color: var(--ink); background: #fff;
  border: 1.5px solid #d9d0d5; border-radius: 8px; padding: 13px 14px;
}
input:focus, textarea:focus, select:focus { outline: 3px solid var(--acc-soft); border-color: var(--acc); }
.form-msg { margin-top: 14px; font-size: .95rem; color: var(--acc); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { margin-bottom: 18px; }
.field .hint { display: block; font-size: .84rem; color: var(--mut); margin-top: 6px; }

/* ---------- tables, FAQ ---------- */
.tbl { overflow-x: auto; margin: 1.6rem 0; border-top: 3px solid var(--acc); -webkit-overflow-scrolling: touch; }
.tbl table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 460px; }
.tbl th, .tbl td { padding: 16px 18px 16px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: .86rem; font-weight: 700; color: var(--mut); }
.tbl td:first-child { color: var(--ink); font-weight: 700; }
.faq { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-weight: 700; font-size: 1.1rem; color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 1.7rem; font-weight: 400; color: var(--acc); }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding: 0 0 24px; max-width: 46em; }

/* ---------- long-form prose ---------- */
.prose h2 { margin: 2.8rem 0 1rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.8rem 0 .6rem; }
.prose ul, .prose ol { margin: 1rem 0 1rem 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--acc); }
.doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 72px; align-items: start; }
.doc-side { position: sticky; top: 110px; }
.doc-body { max-width: 44em; }
.doc-body h2 { scroll-margin-top: 110px; }
.doc-rail { position: sticky; top: 110px; border-left: 3px solid var(--acc); padding: 4px 0 4px 20px; }
.doc-rail .drt { font-size: .86rem; font-weight: 800; color: var(--ink); margin-bottom: .6rem; }
.doc-rail ol { list-style: none; }
.doc-rail a { display: block; padding: 7px 0; font-size: .94rem; color: var(--mut); }
.doc-rail a.on, .doc-rail a:hover { color: var(--acc); text-decoration: none; }
.doc-rail a.on { font-weight: 700; }
.section.doc-sec { padding: 96px 0; }
.bg-soft + .doc-sec, .doc-sec + .section { padding-top: 96px; }
.doc-sec + .doc-sec { padding-top: 0; }

/* ---------- calculators ---------- */
.calc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.calc-inputs { border: 1px solid var(--line); border-radius: var(--r); padding: 34px; }
.calc-results { background: var(--tint); border-top: 6px solid var(--acc); border-radius: var(--r); padding: 34px; position: sticky; top: 110px; }
.calc-results h3, .calc-results h2.h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.calc-disclaimer { font-size: .85rem; color: var(--mut); margin-top: 1.2rem; }
.calc-actions { margin-top: 1.4rem; }
.cr { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .97rem; }
.cr > span { color: var(--tx); }
.cr > b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cr.cr-strong > b { color: var(--acc); font-size: 1.3rem; font-weight: 800; }
.cr-rule { border: 0; border-top: 2px solid var(--ink); margin: 10px 0; }
.calc-note { margin-top: 16px; padding: 16px 18px; border-radius: 8px; font-size: .93rem; background: #fff; border-left: 4px solid var(--mut); }
.calc-note.calc-ok { border-left-color: var(--ink); }
.calc-note.calc-warn { border-left-color: var(--acc); background: var(--acc-soft); }
.calc-note.calc-info { border-left-color: var(--line); }
/* Long values wrap on phones (estate agents chassis fix, 2 Nov 2026). */
@media (max-width: 720px) { .cr { flex-wrap: wrap; gap: 0 12px; } .cr > b { white-space: normal; } }

/* ---------- closing band: a full heather block ---------- */
.cta-band { background: var(--acc); color: rgba(255, 255, 255, .92); padding: 84px 0; }
.cta-band .inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band .cta-copy h2::before { background: #fff; }
.cta-band p { margin-top: 1rem; font-size: 1.12rem; max-width: 34em; }
.cta-band .btn-row { justify-content: flex-end; margin-top: 0; }
.cta-band .btn-primary { background: #fff; color: var(--acc); border-color: #fff; }
.cta-band .btn-primary:hover { background: var(--acc-soft); border-color: var(--acc-soft); }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.cta-band .btn-ghost:hover { background: #fff; color: var(--acc); }

/* ---------- newsletter and footer: light ---------- */
.nl-band { padding: 72px 0; border-bottom: 1px solid var(--line); }
.nl-band .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.nl-band h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; }
.nl-band p { color: var(--mut); }
.nl-form { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-form input[type="email"] { flex: 1 1 240px; }
footer.site { background: #fff; color: var(--mut); padding: 64px 0 28px; font-size: .95rem; border-top: 4px solid var(--acc); }
footer.site .ft-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px; }
footer.site .wordmark { white-space: normal; }
footer.site .ft-phone { display: block; margin-top: 1.5rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
footer.site .ft-contact { margin: .6rem 0 0; }
footer.site .ft-contact li { margin-bottom: .35rem; }
footer.site .ft-legal { font-size: .82rem; line-height: 1.6; color: var(--mut); max-width: 62em; margin-top: 22px; }
footer.site .ft-legal a { color: var(--mut); text-decoration: underline; }
footer.site .fine a { color: var(--mut); }
footer.site h2.fh { font-weight: 700; letter-spacing: normal; line-height: 1.15; }
footer.site h4, footer.site h2.fh { font-size: .95rem; color: var(--ink); margin-bottom: 1rem; }
footer.site a { color: var(--tx); }
footer.site a:hover { color: var(--acc); }
footer.site ul { list-style: none; }
footer.site li { margin-bottom: .55rem; }
footer.site .fine { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .84rem; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }
.wa-channel-link-line { color: var(--mut); }
.wa-float { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: grid; place-items: center; z-index: 70; box-shadow: 0 10px 24px rgba(20, 20, 20, .2); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }
.sticky-cta { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  nav.primary .nav-phone { display: none; }
  .settings, .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .doc, .calc-wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .doc-side, .doc-rail, .calc-results { position: static; }
  .doc-side:empty { display: none; }
}
@media (max-width: 960px) {
  :root { --gut: 22px; }
  body { font-size: 17px; }
  .section, .section.doc-sec { padding: 68px 0; }
  nav.primary { display: none; }
  .nav-toggle { display: block; }
  header.site .inner { min-height: 72px; flex-wrap: wrap; }
  header.site nav.primary.open { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 8px 0 18px; }
  header.site nav.primary.open .nav-group .sub { position: static; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 0 14px; }
  nav.primary .nav-cta { margin: 10px 0 0; text-align: center; }
  .hero-sub, .rungs, .gap, .vatline, .payroll-grid, .gm, .founders, .contact-grid, .cols2, .n-rows, .split, .split.flip,
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .nl-band .inner, .cta-band .inner, .form-grid, .rates { grid-template-columns: minmax(0, 1fr); }
  .split, .split.flip { gap: 30px; }
  .split.flip .split-photo { order: 0; }
  .hero-acts, .cta-band .btn-row { justify-content: flex-start; }
  .hero-home .hero-acts { justify-content: center; }
  .rung + .rung { border-left: 0; }
  .rung.lead { margin: 0; padding: 40px 30px; }
  .rate, .rate:not(:nth-child(3n + 1)) { padding: 24px 0; border-left: 0; }
  .vatline > div + div { border-left: 0; border-top: 3px solid var(--acc); }
  .split-fig img { height: 320px; }
  .cycle { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cycle::before { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .cy { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 18px; padding: 0; }
  .cy .cy-dot { margin: 0; grid-row: span 2; }
  .hv-cols { display: none; }
  .hv-lane, .hero-panel .hp-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .v-times { display: none; }
  .v-track span, .n-bar span { font-size: .68rem; }
  footer.site .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  footer.site .ft-brand { grid-column: 1 / -1; }
  .rate-tag { left: 32px; }
  .sticky-cta { display: flex; position: fixed; left: 12px; right: 84px; bottom: 14px; z-index: 65; }
  .sticky-cta .btn { flex: 1; }
}
@media (max-width: 560px) {
  .settings, .tiers, .week, .v-sum { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 44px; }
  .hero::after { height: 70px; }
  .hero-band { padding: 0 12px; margin-top: 36px; }
  .hero-band img { height: 260px; }
  .rate-tag { position: static; margin: -40px 16px 0; max-width: none; }
  .g-row { grid-template-columns: 96px minmax(0, 1fr) 62px; gap: 10px; }
  .g-sub { margin-left: 106px; }
  .visit, .night, .gap-rates, .gap-weeks, .handover, .form-card, .calc-inputs, .calc-results { padding: 26px 20px; }
  .v-track { height: auto; grid-template-columns: minmax(0, 1fr); }
  .v-track span { padding: 10px; font-size: .84rem; }
  .n-hours { display: none; }
  .founder { flex-direction: column; }
  footer.site .ft-top { gap: 28px 20px; }
}
@media print {
  header.site, footer.site, .nl-band, .cta-band, .wa-float, .sticky-cta, .hero-band { display: none; }
  .hero { background: #fff; color: var(--ink); }
  .hero h1, .hero .lede { color: var(--ink); }
}

/* logo: phone size */
@media (max-width: 560px) {
  .wm-logo { height: 38px; }
  .wm-text .wm-a { font-size: 1rem; }
  .wm-text .wm-b { font-size: 1.4rem; }
}

/* ---------- guides and articles: one figure per piece (2 Nov 2026) ---------- */
.fig { margin: 2rem 0 2.4rem; border: 1px solid var(--line); border-top: 4px solid var(--acc); border-radius: var(--r); padding: 30px 32px; background: #fff; font-variant-numeric: tabular-nums; }
.fig h3 { font-size: 1.08rem; margin-bottom: 1.1rem; }
.fig figcaption { font-size: .84rem; color: var(--mut); margin-top: 1.2rem; line-height: 1.5; }
.doc-body .fig ul, .doc-body .fig ol { margin: 0; padding: 0; }
.doc-body .fig li { margin: 0; }
.fx-rows { list-style: none; }
.fx-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: .96rem; }
.fx-row b { color: var(--ink); white-space: nowrap; }
.fx-row small { display: block; font-size: .8rem; color: var(--mut); }
.fx-row.fx-total { border-top: 2px solid var(--ink); font-weight: 800; color: var(--acc); }
.fx-row.fx-total b { color: var(--acc); }
.fx-row.fx-out { color: var(--mut); }
/* sleep-in: the night in hours */
.fx-night { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; margin-bottom: 1.2rem; }
.fx-night span { background: var(--tint); border: 1px solid var(--line); border-radius: 8px; padding: 12px 2px; text-align: center; font-size: .78rem; color: var(--mut); }
.fx-night span b { display: block; font-size: .86rem; color: var(--ink); }
.fx-night span.on { background: var(--acc); border-color: var(--acc); color: rgba(255, 255, 255, .9); }
.fx-night span.on b { color: #fff; }
/* home care: a day's route */
.fx-route { list-style: none; border-left: 3px solid var(--line); margin-left: 6px; }
.fx-route li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 10px 0 10px 22px; font-size: .95rem; }
.fx-route li::before { content: ""; position: absolute; left: -8px; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--line); }
.fx-route li.v::before { background: var(--acc); border-color: var(--acc); }
.fx-route li.t { color: var(--mut); }
.fx-route li span:first-child { font-weight: 700; color: var(--ink); }
.fx-route li span:last-child { font-weight: 700; color: var(--ink); text-align: right; }
/* two lanes that meet */
.fx-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fx-tracks > div { background: var(--tint); border-radius: 10px; padding: 22px; }
.fx-tracks h4 { font-size: .98rem; color: var(--acc); margin-bottom: .8rem; }
.fx-tracks ol { list-style: none; counter-reset: s; }
.fx-tracks li { counter-increment: s; position: relative; padding: 8px 0 8px 34px; font-size: .93rem; border-top: 1px solid var(--line); }
.fx-tracks li::before { content: counter(s); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--acc); color: var(--acc); font-size: .78rem; font-weight: 800; display: grid; place-items: center; }
.fx-meet { margin-top: 16px; background: var(--acc); color: #fff; border-radius: 10px; padding: 16px 22px; font-weight: 700; }
/* horizontal bars */
.fx-bars { list-style: none; }
.fx-bars li { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) 6.5em; gap: 14px; align-items: center; padding: 9px 0; font-size: .93rem; }
.fx-bars i { display: block; height: 22px; width: var(--w); background: var(--acc); border-radius: 0 6px 6px 0; }
.fx-bars li.prev i { background: #d9c3d1; }
.fx-bars b { text-align: right; color: var(--ink); }
/* who pays: four boxes */
.fx-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fx-pay > div { border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.fx-pay h4 { font-size: 1rem; margin-bottom: .35rem; }
.fx-pay p { font-size: .9rem; color: var(--mut); }
.fx-pay .amt { display: block; font-size: 1.5rem; font-weight: 800; color: var(--acc); letter-spacing: -.02em; margin: .3rem 0; }
/* a parent invoice */
.fx-invoice { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fx-inv-head { display: flex; justify-content: space-between; gap: 12px; background: var(--ink); color: #fff; padding: 14px 20px; font-size: .9rem; font-weight: 700; }
.fx-inv-row { display: grid; grid-template-columns: minmax(0, 1fr) 7em; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line); font-size: .93rem; }
.fx-inv-row span:last-child { text-align: right; font-weight: 700; color: var(--ink); }
.fx-inv-row small { display: block; color: var(--mut); font-size: .8rem; }
.fx-inv-row.opt { background: var(--tint); }
/* a run of questions */
.fx-tree { list-style: none; counter-reset: q; }
.fx-tree li { counter-increment: q; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.fx-tree li::before { content: counter(q); width: 32px; height: 32px; border-radius: 8px; background: var(--acc); color: #fff; font-weight: 800; display: grid; place-items: center; }
.fx-tree b { display: block; color: var(--ink); margin-bottom: .3rem; }
.fx-tree span { font-size: .92rem; color: var(--mut); }
.fx-tree em { font-style: normal; font-weight: 700; color: var(--acc); }
/* dates on a line */
.fx-dates { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; position: relative; padding-top: 22px; }
.fx-dates::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; background: var(--acc-soft); }
.fx-dates li { position: relative; font-size: .9rem; }
.fx-dates li::before { content: ""; position: absolute; top: -21px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--acc); }
.fx-dates b { display: block; color: var(--ink); font-size: 1rem; }
/* people covered by an allowance */
.fx-people { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 8px; margin-bottom: 1rem; max-width: 560px; }
.fx-people span { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--acc); background: #fff; }
.fx-people span.on { background: var(--acc); }
.fx-people span.half { background: linear-gradient(90deg, var(--acc) 54%, #fff 54%); }
.fx-key { display: flex; flex-wrap: wrap; gap: 18px; font-size: .86rem; color: var(--mut); }
.fx-key i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--acc); margin-right: 6px; vertical-align: -1px; }
.fx-key i.on { background: var(--acc); }
/* before and after */
.fx-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fx-compare > div { padding: 22px; }
.fx-compare > div + div { background: var(--tint); border-left: 3px solid var(--acc); }
.fx-compare h4 { font-size: .98rem; margin-bottom: .6rem; }
.fx-compare .big { display: block; font-size: 1.9rem; font-weight: 800; color: var(--acc); letter-spacing: -.02em; margin-top: .6rem; }
/* a board report page */
.fx-board { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fx-board-head { background: var(--acc); color: #fff; padding: 14px 20px; font-weight: 700; font-size: .95rem; }
.fx-board-row { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); font-size: .93rem; }
.fx-board-row b { color: var(--ink); }
.fx-board-row:nth-child(odd) { background: var(--tint); }
/* money moving along a chain */
.fx-chain { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.fx-chain li { position: relative; background: var(--tint); border-radius: 10px; padding: 20px; font-size: .9rem; }
.fx-chain li + li::before { content: "→"; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); color: var(--acc); font-weight: 800; font-size: 1.2rem; }
.fx-chain b { display: block; margin-top: .3rem; font-size: 1.2rem; font-weight: 800; color: var(--acc); letter-spacing: -.02em; }
.fx-chain h4 { font-size: .98rem; margin-bottom: .2rem; }
/* dated steps down the page */
.fx-steps { list-style: none; }
.fx-steps li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); font-size: .94rem; }
.fx-steps li > b:first-child { color: var(--acc); }
/* a scale in three bands */
.fx-scale { display: grid; grid-template-columns: 38% 24% 38%; border-radius: 10px; overflow: hidden; }
.fx-scale > div { padding: 18px; font-size: .88rem; color: var(--tx); }
.fx-scale > div:nth-child(1) { background: var(--acc-soft); }
.fx-scale > div:nth-child(2) { background: #ecd3e2; }
.fx-scale > div:nth-child(3) { background: var(--acc); color: #fff; }
.fx-scale > div:nth-child(3) b { color: #fff; }
.fx-scale b { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: .3rem; }
.fx-ticks { display: grid; grid-template-columns: 38% 24% 38%; font-size: .8rem; color: var(--mut); margin-top: 6px; }
.fx-ticks span:nth-child(2), .fx-ticks span:nth-child(3) { border-left: 2px solid var(--ink); padding-left: 6px; color: var(--ink); font-weight: 700; }
/* hub lists */
.piece-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.piece-list .card h3, .piece-list .card h2.h3 { font-size: 1.15rem; }
.piece-kind { display: none; }
.fig > .payslip { border: 0; box-shadow: none; padding: 0; }
/* footer accreditations: the partner marks in a row, unboxed */
.footer-accred { padding: 26px 0 0; border-top: 1px solid var(--line); }
.footer-accred .accred-logos { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; margin: 0; }
.footer-accred .accred-logo-box { height: 40px; display: flex; align-items: center; }
.footer-accred .accred-logo { height: 100%; width: auto; max-width: 118px; object-fit: contain; }
@media (max-width: 720px) {
  .fig { padding: 22px 18px; }
  .fx-night { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fx-tracks, .fx-pay, .fx-compare, .fx-chain, .piece-list { grid-template-columns: minmax(0, 1fr); }
  .fx-compare > div + div { border-left: 0; border-top: 3px solid var(--acc); }
  .fx-chain li + li::before { content: "↓"; left: 50%; top: -26px; transform: translateX(-50%); }
  .fx-bars li { grid-template-columns: minmax(0, 1fr) 6em; }
  .fx-bars li i { grid-column: 1 / -1; grid-row: 2; }
  .fx-dates { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 22px; }
  .fx-dates::before { left: 6px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .fx-dates li::before { top: 4px; left: -22px; }
  .fx-steps li, .fx-board-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fx-route li { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; }
  .fx-scale, .fx-ticks { grid-template-columns: minmax(0, 1fr); }
  .fx-ticks { display: none; }
  .fx-people { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .footer-accred .accred-logo-box { height: 36px; }
  .footer-accred .accred-logos { gap: 14px 26px; }
}

/* phones: the four partner marks on one row (after the 720px block so it wins) */
@media (max-width: 560px) {
  .footer-accred .accred-logos { gap: 12px 16px; }
  .footer-accred .accred-logo-box { height: 30px; }
  .footer-accred .accred-logo { max-width: 96px; }
}

/* Links inside running text are underlined so they do not rely on colour alone
   (Andy asked, 5 Nov 2026). Buttons, card links, menus and the footer are unchanged. */
p a:not(.btn):not(.card-link), td a:not(.btn), .prose li a:not(.btn) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
footer.site p a:not(.btn) { text-decoration: none; }
footer.site p a:not(.btn):hover { text-decoration: underline; }