/* ==========================================================================
   NICHE DESIGN SYSTEM 4 — PRODUCT
   Approved direction 7 August 2026, after Andy compared the estate to
   usehammock.com and said our sites looked old. He was right, and it was not
   a matter of taste — it came down to four measurable things:

     1. HEADLINE WEIGHT. Hammock sets 70px at weight 400. The design this
        replaces used 600 serif; the one before that 800 Archivo. Heavy type at
        large sizes is the single strongest "dated" signal on a page.
     2. TINTED GROUND, WHITE CARDS. They sit on #f0f2f8 and float white cards
        on it. Pure white with hard rules reads flat next to that.
     3. ROUNDING AND SOFT SHADOW. 20–40px radii, pill buttons, wide low-opacity
        shadows. We had zero radius and zero shadow anywhere.
     4. ONE GEOMETRIC SANS. Plus Jakarta Sans throughout, no serif at all.

   ONE DELIBERATE DIVERGENCE: Hammock's hero is a 3D product illustration and
   most of its page is product UI. Andy's standing rule is never to use fake
   software screenshots, so where Hammock shows an app we show a REAL data
   panel built from the verified factual spine. Same visual job, honest.

   Self-contained by design — this does not extend a shared base. Sister system
   S5 Trades (dark ground, hi-vis yellow, bold Montserrat) is a separate
   stylesheet on purpose; trades needed its own identity, not a variant.

   The class vocabulary is fixed by the content modules, so 10,000 lines of
   gated copy are untouched by this file. Accent comes from NICHE-PALETTE.md.
   ========================================================================== */


/* ==========================================================================
   CROP POSITION — why every cover-crop here is biased upward.
   `object-fit: cover` and `background-size: cover` default to centring the
   crop. On a landscape photograph rendered into a short band or card, centring
   takes a horizontal slice out of the MIDDLE of the frame — which is where the
   torso is, not the head. The result is a site full of people with no faces,
   which is exactly what Andy saw on all three sites.
   `center 30%` moves the visible window up so heads stay in frame, while still
   showing enough of a building for the architecture shots. It is applied to
   every cover-cropped surface: hero figure, hero panel photo, card photo,
   split photo and the full-bleed bands.
   ========================================================================== */

:root {
  --ground: #f4f5f8;       /* the page. Tinted, never pure white. */
  --card: #ffffff;         /* everything that floats on it */
  --ink: #1c1d22;
  --tx: #4a4d57;
  --mut: #7b7f8c;
  --line: #e6e8ef;
  --acc: #c8871a;          /* sale-board gold — per NICHE-PALETTE.md */
  --acc-d: #a76f12;
  --acc-soft: #fbf3e5;     /* accent at ~6% — icon tiles, pills, callouts */
  --acc-glow: rgba(200,135,26,.28);
  --r-card: 22px;
  --r-img: 18px;
  --r-tile: 13px;
  --r-pill: 999px;
  --sh: 0 18px 40px rgba(20,22,40,.06);
  --sh-lift: 0 26px 60px rgba(20,22,40,.10);
  --max: 1200px;
  --gut: 28px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* LONG-TOKEN SAFETY. `hello@accountantsforsolicitors.co.uk` is a single
   ~250px unbreakable word, and it broke the layout three separate times in
   this build — once in the topbar, once in the footer grid, once in the hero
   facts on the contact page. Rather than patch each site as it appears, every
   context that can receive user-facing contact detail is told up front that it
   may break a word. Headings are excluded: they are short and controlled, and
   mid-word breaks in a 70px headline look like a bug. */
.hero-facts dd, .promise-card .pc-item, .factstrip .fs,
.card p, .note p, .tbl td, .prose p, .prose li,
.topbar, footer.site, .split-cols p, .doc-body p, .doc-body li { overflow-wrap: anywhere; }

body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tx);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

/* ---------- type: large and LIGHT. This is the whole trick. ---------- */
h1, h2, h3, h4, .display {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.06;
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4.3rem); }
h2 { font-size: clamp(1.95rem, 3.3vw, 3.05rem); letter-spacing: -.025em; line-height: 1.1; }
/* h3 and h4 are small enough that 400 reads weak — they carry semibold. */
h3 { font-size: 1.17rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: -.005em; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc-d); text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

.inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 760px; }

/* ---------- eyebrow: a soft accent pill, not bare letterspacing ---------- */
.eyebrow {
  display: inline-block;
  font-size: .73rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc); background: var(--acc-soft);
  padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: 1.25rem;
}
/* .light is a legacy hint from the design where the hero sat on a dark
   photograph. Every S4 hero is on the light ground, so honouring it there
   rendered the eyebrow white-on-white and invisible. The white treatment is
   now driven purely by ancestor context, never by the class. */
.on-dark .eyebrow, .section.bg-ink .eyebrow, .section.bg-ocean .eyebrow,
.cta-band .eyebrow, .split-block > .eyebrow { color: #fff; background: rgba(255,255,255,.14); }

.lede { font-size: 1.15rem; line-height: 1.6; color: var(--mut); max-width: 34em; }
.on-dark .lede { color: #a8acb8; }

/* ---------- buttons: pills that lift ---------- */
.btn {
  display: inline-block; padding: 15px 28px;
  border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary, .btn-bright { background: var(--acc); color: #fff; border-color: var(--acc); box-shadow: 0 10px 24px var(--acc-glow); }
.btn-primary:hover, .btn-bright:hover { background: var(--acc-d); border-color: var(--acc-d); color: #fff; box-shadow: 0 16px 32px var(--acc-glow); }
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #000; border-color: #000; color: #fff; }
.btn-ghost, .btn-ghost-dark { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--sh); }
.btn-ghost:hover, .btn-ghost-dark:hover { color: var(--acc); border-color: var(--acc); }
.btn-sm { padding: 11px 20px; font-size: .88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* on ink, the solid button inverts and the ghost outlines in white */
.on-dark .btn-primary, .on-dark .btn-bright, .cta-band .btn-primary, .cta-band .btn-bright,
.calc-results .btn-primary, footer.site .btn-primary {
  background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.on-dark .btn-primary:hover, .cta-band .btn-primary:hover,
.calc-results .btn-primary:hover, footer.site .btn-primary:hover { background: #f0f1f5; color: var(--ink); }
.on-dark .btn-ghost, .on-dark .btn-ghost-dark, .cta-band .btn-ghost, .cta-band .btn-ghost-dark,
.calc-results .btn-ghost, footer.site .btn-ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.3); box-shadow: none;
}
.on-dark .btn-ghost:hover, .cta-band .btn-ghost:hover,
.calc-results .btn-ghost:hover, footer.site .btn-ghost:hover { border-color: #fff; color: #fff; }

/* ---------- utility bar. Kept, but quiet. ---------- */
.topbar { background: transparent; color: var(--mut); font-size: .82rem; padding-top: 10px; }
.topbar .inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 30px; }
.topbar .tb-tag { min-width: 0; }
.topbar a { color: var(--mut); }
.topbar a:hover { color: var(--acc); text-decoration: none; }
.topbar .tb-links { display: flex; gap: 20px; flex: none; min-width: 0; }

/* ---------- masthead: a floating white pill ---------- */
header.site { position: sticky; top: 12px; z-index: 60; padding: 0 var(--gut); background: transparent; }
header.site .inner {
  max-width: var(--max); margin: 0 auto; padding: 12px 14px 12px 24px;
  background: var(--card); border-radius: var(--r-pill); box-shadow: var(--sh);
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.wordmark { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.wordmark .wm-mark {
  width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--acc);
  color: #fff; display: grid; place-items: center; padding: 6px;
}
.wordmark .wm-mark svg { width: 100%; height: 100%; display: block; }
.wordmark .wm-text { display: block; line-height: 1.05; }
.wordmark .wm-top {
  display: block; font-size: .6rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mut);
}
.wordmark .wm-main { display: block; font-size: 1.14rem; font-weight: 700; color: var(--ink); letter-spacing: -.028em; }

nav.primary { display: flex; align-items: center; gap: 2px; }
nav.primary a, nav.primary .nav-group > button {
  font-size: .92rem; font-weight: 500; color: var(--tx);
  padding: 9px 13px; border-radius: var(--r-pill);
  text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit;
}
nav.primary a:hover, nav.primary .nav-group > button:hover { background: var(--ground); color: var(--ink); text-decoration: none; }
/* The rule above sets `background: none` so the <button> that opens a dropdown
   has no chrome — which also stripped .btn-primary's fill off the nav CTA and
   left white text on a white pill. Re-assert it here. */
nav.primary .btn.btn-primary, nav.primary .btn.btn-bright {
  background: var(--acc); color: #fff; border-color: var(--acc);
  margin-left: 8px; padding: 11px 20px; font-size: .9rem;
}
nav.primary .btn.btn-primary:hover, nav.primary .btn.btn-bright:hover { background: var(--acc-d); border-color: var(--acc-d); color: #fff; }
nav.primary .btn.btn-ghost, nav.primary .btn.btn-ghost-dark { background: var(--card); color: var(--ink); margin-left: 8px; padding: 11px 20px; font-size: .9rem; }
.nav-toggle {
  display: none; background: var(--ground); border: 0; padding: 10px 14px;
  border-radius: var(--r-pill); font: inherit; font-size: .9rem; cursor: pointer; color: var(--ink);
}
.nav-group { position: relative; }
.nav-group > button::after { content: "▾"; font-size: .7em; margin-left: 5px; color: var(--mut); }
.nav-group:hover > button, .nav-group:focus-within > button { background: var(--ground); color: var(--ink); }
.nav-group .sub {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 272px;
  background: var(--card); border-radius: 16px; padding: 10px; box-shadow: var(--sh-lift);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s, transform .14s, visibility .14s;
}
.nav-group:hover .sub, .nav-group:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-group .sub a { display: block; padding: 10px 14px; font-size: .91rem; border-radius: 10px; }
.nav-group .sub a:hover { background: var(--ground); color: var(--acc); }
header.site nav.primary a.on, header.site nav.primary .sub a.on,
header.site nav.primary .nav-group > button.on { color: var(--acc); }

/* ==========================================================================
   HERO — copy on the left, a figure on the right. The homepage's figure is a
   real data panel (see .hero-panel); interior pages get a rounded photograph.
   The grid is OPT-IN on the figure being present, so a hero without one keeps
   a single column instead of dealing its children into two.
   ========================================================================== */
.hero { padding: 52px 0 16px; background: transparent; background-image: none !important; }
.hero > .inner:has(.hero-figure), .hero > .inner:has(.hero-panel) {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 52px; align-items: center;
}
.hero .hero-copy { grid-column: 1; min-width: 0; }
.hero h1 { max-width: 17em; }
.hero h1 .accent { color: var(--acc); }
.hero .lede { margin-top: 1.4rem; }
.hero .btn-row, .hero .hero-acts { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .crumbs { margin-bottom: 1.2rem; }
.hero .hero-stamp {
  margin-top: 1.5rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mut);
}

.hero .hero-figure { margin: 0; grid-column: 2; }
.hero .hero-figure img { width: 100%; height: 420px; object-fit: cover; object-position: center 30%; border-radius: var(--r-img); box-shadow: var(--sh-lift); }
.hero .hero-figure .cap, .cap { font-size: .8rem; color: var(--mut); margin-top: 12px; }

.hero.hero-page { padding-top: 44px; }
.hero.hero-page h1 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); }
.hero.hero-page .lede { font-size: 1.08rem; }
.hero.hero-page .hero-figure img { height: 360px; }

.crumbs { font-size: .84rem; color: var(--mut); }
.crumbs a { color: var(--mut); }
.crumbs a:hover { color: var(--acc); }

/* the honest alternative to a fake app screenshot: a real data panel */
.hero-panel {
  grid-column: 2; background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--sh-lift); padding: 26px;
}
.hero-panel { padding: 0; overflow: hidden; }
.hero-panel .hp-photo { width: 100%; height: 200px; object-fit: cover; object-position: center 30%; display: block; }
.hero-panel .hp-inner { padding: 24px 26px 26px; }
.hero-panel .hp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.hero-panel .hp-title { font-size: .76rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--mut); }
.hero-panel .hp-flag { font-size: .72rem; font-weight: 700; color: #1c8a4b; background: #e8f6ee; padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.hero-panel .hp-row { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hero-panel .hp-row:last-of-type { border-bottom: 0; }
.hero-panel .hp-row .k { font-size: .83rem; font-weight: 700; color: var(--ink); }
.hero-panel .hp-row .l { font-size: .9rem; color: var(--tx); }
.hero-panel .hp-row .v { font-size: 1.13rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.hero-panel .hp-row.now { background: var(--acc-soft); border-bottom: 0; border-radius: 14px; margin: 0 -14px; padding: 14px; }
.hero-panel .hp-row.now .k, .hero-panel .hp-row.now .v { color: var(--acc); }
.hero-panel .hp-foot { margin-top: 15px; font-size: .81rem; color: var(--mut); }

/* ==========================================================================
   NUMBER CARDS — the register becomes floating white cards
   ========================================================================== */
.promise-card, .factstrip .inner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px;
}
.factstrip { background: transparent; padding: 0 0 8px; }
.promise-wrap { background: transparent; }
.promise-card .pc-item, .factstrip .fs {
  background: var(--card); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh);
  font-size: .87rem; line-height: 1.5; color: var(--mut);
}
.promise-card .pc-num, .factstrip .fs b {
  display: block; font-size: 1.85rem; font-weight: 500; color: var(--ink);
  letter-spacing: -.035em; line-height: 1.1; margin-bottom: 7px;
}

/* Hero facts get a DIFFERENT treatment from the factstrip on purpose.
   Ten interior pages carry numbers in the hero AND a factstrip below it, so
   with one shared card treatment they opened with two stacked rows of
   identical-looking white cards. Here the hero row is compact and card-less —
   a tight summary line divided by hairlines — so the cards below read as the
   next thing rather than a repeat of the last one. */
.hero-facts { grid-column: 1 / -1; }
.hero-facts dl {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px; border-top: 1px solid var(--line); padding-top: 4px;
}
.hero-facts dt { display: none; }
.hero-facts dd {
  padding: 18px 20px 4px; border-left: 1px solid var(--line);
  font-size: .84rem; line-height: 1.5; color: var(--mut);
}
.hero-facts dd:first-of-type { border-left: 0; padding-left: 0; }
.hero-facts dd strong {
  display: block; font-size: 1.3rem; font-weight: 600; color: var(--ink);
  letter-spacing: -.028em; line-height: 1.15; margin-bottom: 5px;
}
.promise-card .pc-item h3 { font-size: 1rem; margin-bottom: .35rem; }
.promise-card .pc-item p, .factstrip .fs span { display: block; font-size: .87rem; color: var(--mut); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: 72px 0; }
.section.tight { padding: 48px 0; }
.section.bg-paper, .section.bg-tint { background: var(--card); }
.section.bg-ink, .section.bg-ocean { background: var(--ink); color: #a8acb8; }
.section.bg-ink h2, .section.bg-ink h3, .section.bg-ink h4,
.section.bg-ocean h2, .section.bg-ocean h3, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.section.bg-ink p, .section.bg-ink li, .section.bg-ocean p, .section.bg-ocean li,
.on-dark p, .on-dark li { color: #a8acb8; }
.on-dark strong { color: #fff; }
.on-dark a { color: #fff; text-decoration: underline; }

.section-head { margin-bottom: 2.4rem; max-width: 44em; }
.section-head.centred { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: .85rem; }
.section-head p { color: var(--mut); font-size: 1.06rem; max-width: 40em; }
.section-head.centred p { margin-left: auto; margin-right: auto; }
.on-dark .section-head p, .section.bg-ink .section-head p { color: #a8acb8; }

/* ==========================================================================
   CARDS — and S4 KEEPS THE ICONS. The content modules emit icon() calls that
   the previous two systems suppressed; here they sit in soft accent tiles,
   which is a large part of why the pages read as a product rather than a
   document.
   ========================================================================== */
.grid { display: grid; gap: 18px; }
.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 {
  --card-pad: 28px;
  background: var(--card); border-radius: var(--r-card); padding: var(--card-pad);
  box-shadow: var(--sh); display: flex; flex-direction: column;
  transition: transform .16s, box-shadow .16s;
  overflow: hidden;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }

/* The photograph injected by _card_photos(). It has to break out of the card's
   own padding to sit flush to the corners, hence the negative margin derived
   from --card-pad rather than a hard-coded value — the padding changes at the
   560px breakpoint and a literal -28px would have left a white gutter there. */
.card .card-photo {
  width: calc(100% + var(--card-pad) * 2);
  /* max-width:none is load-bearing. The base `img { max-width: 100% }` rule
     caps this at the card's CONTENT box, so the negative margin pulled the
     photo left but it could not reach the right edge — leaving a white gutter
     down one side of every card photo on the site. */
  max-width: none;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 20px;
  height: 180px; object-fit: cover; object-position: center 30%; display: block; flex: none;
}
/* with a photograph present the icon is redundant — the picture is the signal */
.card:has(.card-photo) .icon { display: none; }
.card .icon {
  width: 44px; height: 44px; border-radius: var(--r-tile); background: var(--acc-soft);
  display: grid; place-items: center; margin-bottom: 16px; flex: none; padding: 11px;
}
.card .icon svg { width: 100%; height: 100%; stroke: var(--acc); display: block; }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .94rem; color: var(--mut); }
.card p strong { color: var(--ink); }
.card .card-link { margin-top: auto; padding-top: 16px; font-size: .9rem; font-weight: 600; color: var(--acc); }
.card .card-link::after { content: " →"; }
.card .card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card.feature { }
.on-dark .card { background: rgba(255,255,255,.05); box-shadow: none; }
.on-dark .card p { color: #a8acb8; }
.on-dark .card .card-link { color: #fff; }
.on-dark .card .icon { background: rgba(255,255,255,.1); }
.on-dark .card .icon svg { stroke: #fff; }

/* ---------- photo + copy ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.split .split-photo img { width: 100%; height: 420px; object-fit: cover; object-position: center 30%; border-radius: var(--r-img); box-shadow: var(--sh); }
.split.flip .split-photo { order: 2; }

/* ---------- checklist ---------- */
ul.checks { list-style: none; margin: 1.1rem 0; }
ul.checks li { position: relative; padding-left: 30px; margin-bottom: .65rem; }
ul.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--acc-soft); color: var(--acc);
  font-size: .7rem; font-weight: 700; display: grid; place-items: center;
}
.on-dark ul.checks li::before { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- steps ---------- */
.steps { counter-reset: st; margin-top: 1.3rem; display: grid; gap: 14px; }
.step {
  counter-increment: st; position: relative; padding: 22px 24px 22px 68px;
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh);
}
.step::before {
  content: counter(st); position: absolute; left: 24px; top: 22px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--acc); color: #fff;
  font-size: .82rem; font-weight: 700; display: grid; place-items: center;
}
.step h3 { margin-bottom: .35rem; }
.step p { font-size: .94rem; color: var(--mut); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; margin-top: 1.5rem; }
.faq details { background: var(--card); border-radius: 16px; box-shadow: var(--sh); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 54px 20px 24px; position: relative;
  font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 18px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--acc-soft); color: var(--acc);
  font-size: 1rem; font-weight: 600; display: grid; place-items: center; line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details .faq-body { padding: 0 24px 22px; }
.faq details .faq-body p { font-size: .97rem; }
.on-dark .faq details { background: rgba(255,255,255,.05); box-shadow: none; }
.on-dark .faq summary { color: #fff; }

/* ==========================================================================
   PHOTOGRAPHY — rounded, in colour, inset from the page edge. Nothing
   full-bleed: a full-bleed band would fight the floating-card language.
   ::before is the image layer, ::after the veil. Keep them separate.
   ========================================================================== */
/* Centred with width + auto inline margins, NOT `margin: 0 auto` plus a
   max-width. The first version did the latter and then a second rule further
   down set margin-left/right to a fixed gutter to give the band breathing room
   at narrow widths — which silently cancelled the auto centring, so on a
   1440px screen every band sat 28px from the left and 212px from the right
   while the rest of the page was centred at 120/120. It read as randomly
   shunted to one side, because it was. */
.imgband {
  position: relative; overflow: hidden;
  width: calc(100% - var(--gut) * 2);
  max-width: var(--max);
  margin-inline: auto;
  border-radius: 26px; background-size: cover; background-position: center 30%;
  display: flex; align-items: center; min-height: 380px; padding: 52px 0;
}
.imgband::before {
  content: ""; position: absolute; inset: 0;
  background-image: inherit; background-size: cover; background-position: center 30%;
}
.imgband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,32,.30), rgba(20,22,32,.62)); }
.imgband .inner { position: relative; z-index: 2; }
.imgband blockquote { font-size: clamp(1.45rem, 2.8vw, 2.2rem); font-weight: 400; line-height: 1.22; color: #fff; max-width: 26em; letter-spacing: -.03em; }
.imgband cite { display: block; margin-top: 1.1rem; font-size: .82rem; font-style: normal; color: rgba(255,255,255,.8); }

.imgband.imgband-plain { min-height: 0; height: 380px; padding: 0; align-items: flex-end; }
.imgband.imgband-plain::after { background: linear-gradient(180deg, rgba(20,22,32,0), rgba(20,22,32,.18)); }
.imgband.imgband-plain .inner { padding-bottom: 20px; width: 100%; }
.imgband.imgband-plain.imgband-tall { height: 460px; }

/* ==========================================================================
   THE INK PANEL — two columns, rounded
   ========================================================================== */
.split-block { background: transparent; }
.split-block > .inner { background: var(--ink); border-radius: 28px; padding: 8px 0; color: #a8acb8; }
.split-block > .eyebrow { color: #fff; background: rgba(255,255,255,.14); }
.split-block h2 { color: #fff; }
.split-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.split-cols > div { padding: 44px 40px; }
.split-cols > div + div { border-left: 1px solid rgba(255,255,255,.14); }
.split-cols h3 { color: #fff; margin-bottom: .6rem; }
.split-cols p { font-size: .95rem; color: #a8acb8; }
.split-cols strong { color: #fff; }
.split-cols .micro { font-size: .8rem; color: #7b8091; }

/* ==========================================================================
   CLOSING CTA — a rounded ink block, not a full-bleed band
   ========================================================================== */
.cta-band { background: transparent; padding: 16px 0 72px; }
.cta-band > .inner { background: var(--ink); border-radius: 32px; padding: 62px 52px; color: #a8acb8; max-width: var(--max); }
.cta-band .eyebrow { color: #fff; background: rgba(255,255,255,.14); }
.cta-band h2 { color: #fff; margin-bottom: .9rem; }
.cta-band p { font-size: 1.1rem; color: #a8acb8; max-width: 38em; margin-bottom: 1.9rem; }
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- pull quote ---------- */
.pull {
  font-size: 1.4rem; font-weight: 400; line-height: 1.32; color: var(--ink);
  letter-spacing: -.025em; background: var(--card); border-radius: var(--r-card);
  padding: 26px 30px; box-shadow: var(--sh); margin: 1.9rem 0; border-left: 4px solid var(--acc);
}
.on-dark .pull { background: rgba(255,255,255,.05); color: #fff; box-shadow: none; }

/* ==========================================================================
   LONG-FORM PROSE
   ========================================================================== */
.prose > h2:first-child { margin-top: 0; }
.prose h2 { margin: 2.5rem 0 1rem; }
.prose h3 { margin: 1.9rem 0 .65rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 1rem 0 1.3rem 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose > :first-child { margin-top: 0; }

/* ---------- callout ---------- */
.note { background: var(--acc-soft); border-radius: var(--r-card); padding: 24px 28px; margin: 1.7rem 0; }
.note .note-label {
  display: block; font-size: .73rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--acc); margin-bottom: .55rem;
}
.note p { font-size: .97rem; color: var(--tx); }
.on-dark .note { background: rgba(255,255,255,.07); }
.on-dark .note .note-label { color: #fff; }

/* ---------- inline rule reference ---------- */
.rule { font-size: .87em; font-weight: 600; color: var(--acc); white-space: nowrap; }
.on-dark .rule { color: #fff; }

/* ---------- a rule reference as an object ---------- */
.rulebox { background: var(--card); border-radius: var(--r-card); padding: 24px 28px; box-shadow: var(--sh); margin: 1.7rem 0; border-left: 4px solid var(--acc); }
.rulebox .rb-ref { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-bottom: .6rem; }
.rulebox p { font-size: .97rem; }

/* ---------- tables: a white card that scrolls ---------- */
.tbl { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh); overflow-x: auto; margin: 1.7rem 0; -webkit-overflow-scrolling: touch; }
.tbl table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 460px; }
.tbl th, .tbl td { padding: 15px 22px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); background: #fafbfd; }
.tbl td:first-child { color: var(--ink); font-weight: 600; }
.tbl tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   LONG-FORM AS A DOCUMENT — column proportions carried over from the design
   that was tuned against sixty pages of real content; only the skin changes.
   ========================================================================== */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.section.doc-sec { padding: 56px 0 64px; }
.doc-side { position: sticky; top: 100px; }
.doc-mark {
  display: inline-block; font-size: .71rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc); background: var(--acc-soft);
  padding: 7px 13px; border-radius: var(--r-pill); margin: 0; line-height: 1.4;
}
.doc-body { max-width: 44em; }
.doc-body > *:first-child { margin-top: 0; }
.doc-body h2 { margin-top: 2.9rem; scroll-margin-top: 108px; }
.doc-body > h2:first-child, .doc-body h2:first-of-type { margin-top: 0; }
.doc-body h3 { margin-top: 1.9rem; }

.doc-rail { position: sticky; top: 100px; background: var(--card); border-radius: var(--r-card); padding: 22px; box-shadow: var(--sh); }
.doc-rail .drt { display: block; font-size: .71rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-bottom: .7rem; }
.doc-rail ol { list-style: none; margin: 0; counter-reset: rl; }
.doc-rail li { counter-increment: rl; }
.doc-rail a { display: block; padding: 9px 0 9px 28px; position: relative; font-size: .9rem; color: var(--tx); }
.doc-rail a::before { content: counter(rl); position: absolute; left: 0; top: 9px; font-size: .72rem; font-weight: 700; color: var(--mut); }
.doc-rail a:hover { color: var(--acc); text-decoration: none; }
.doc-rail a:hover::before, .doc-rail a.on::before { color: var(--acc); }
.doc-rail a.on { color: var(--acc); font-weight: 600; }

/* ---------- forms ---------- */
.form-card { background: var(--card); border-radius: var(--r-card); padding: 34px; box-shadow: var(--sh); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 13px 15px; font-family: inherit; font-size: .95rem;
  color: var(--ink); background: var(--ground); border: 1.5px solid transparent; border-radius: 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc); background: var(--card); }
.form-msg { margin-top: 14px; font-size: .92rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { margin-bottom: 16px; }
.field .hint { display: block; font-size: .81rem; color: var(--mut); margin-top: 5px; }

/* ---------- newsletter ---------- */
.nl-band { background: transparent; padding: 16px 0 56px; }
.nl-band .inner {
  background: var(--card); border-radius: 28px; box-shadow: var(--sh); padding: 46px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: center;
}
.nl-band h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.025em; margin-bottom: .5rem; }
.nl-band p { font-size: .96rem; color: var(--mut); }
.nl-form { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-form input[type="email"] { flex: 1 1 240px; }
.nl-inline { background: var(--acc-soft); border-radius: var(--r-card); padding: 26px 28px; margin: 2.2rem 0; }
.nl-inline h3 { font-size: 1.2rem; margin-bottom: .45rem; }
.nl-inline p { font-size: .93rem; color: var(--tx); }

/* ---------- footer ---------- */
footer.site { background: var(--ink); color: #8d92a1; padding: 66px 0 32px; font-size: .92rem; border-radius: 32px 32px 0 0; }
footer.site .cols {
  display: grid; grid-template-columns: 1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: 42px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12);
}
/* minmax(0,1fr) above and overflow-wrap here: the footer carries a long
   unbreakable email address, and a bare 1fr track refuses to shrink below it,
   which pushed every page ~82px past a phone viewport. */
footer.site a, footer.site li, footer.site .fine { overflow-wrap: anywhere; }
footer.site h4 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
footer.site a { color: #8d92a1; }
footer.site a:hover { color: #fff; text-decoration: none; }
footer.site ul { list-style: none; }
footer.site li { margin-bottom: .5rem; }
footer.site .wordmark .wm-main { color: #fff; }
footer.site .wordmark .wm-top { color: #7b8091; }
footer.site .reg-note { font-size: .84rem; color: #7b8091; margin-top: 1.1rem; max-width: 34em; }
footer.site .fine { padding-top: 24px; font-size: .82rem; color: #6d7280; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }

/* ---------- floats ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,.4);
}
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 27px; height: 27px; }
.sticky-cta { display: none; }

/* ---------- calculators ---------- */
.calc-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
.calc-inputs { background: var(--card); border-radius: var(--r-card); padding: 30px; box-shadow: var(--sh); }
.calc-results { background: var(--ink); color: #a8acb8; border-radius: var(--r-card); padding: 32px; position: sticky; top: 100px; }
.calc-results h3 { color: #fff; margin-bottom: 1.1rem; }
.calc-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .94rem; }
.calc-row span:last-child, .calc-row strong { color: #fff; font-weight: 600; }
.calc-verdict { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; color: #fff; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.22); line-height: 1.3; }
.calc-hint { font-size: .84rem; color: #7b8091; margin-top: .7rem; }
.calc-disclaimer { font-size: .83rem; color: var(--mut); margin-top: 1.3rem; }
.calc-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 10px; }
.hc-summary { margin-top: 1.3rem; }
.hc-actions { list-style: none; margin-top: 1rem; }
.hc-actions li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .92rem; }

/* red / amber / green — a status signal, not brand colour */
.rag { display: inline-flex; align-items: center; gap: 9px; }
.rag-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; background: var(--mut); }
.rag-green .rag-dot { background: #1c8a4b; }
.rag-amber .rag-dot { background: #c98a12; }
.rag-red .rag-dot { background: #c0342b; }
.rag-label { font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

/* ---------- misc ---------- */
.center, .centred { text-align: center; }
.mt-2 { margin-top: 2rem; }
.micro { font-size: .81rem; color: var(--mut); }
.aqua-rule { height: 1px; background: var(--line); border: 0; margin: 2.2rem 0; }

/* ---------- rhythm ---------- */
.hero + .factstrip, .hero + .promise-wrap { padding-top: 0; }
.factstrip + .section, .imgband + .section, .factstrip + .doc-sec, .promise-wrap + .section { padding-top: 60px; }
.hero + .section { padding-top: 60px; }
.doc-sec + .doc-sec, .section + .section.doc-sec { padding-top: 0; }

/* ==========================================================================
   RESPONSIVE
   Every collapsed track is minmax(0, 1fr), never a bare 1fr — a bare track's
   auto minimum is min-content, and a table with min-width:460px will force it
   wider than the viewport. Note also that the hero grid selectors use :has(),
   so the overrides must repeat :has() or they lose on specificity.
   ========================================================================== */
@media (max-width: 1080px) {
  .doc, .calc-wrap { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .doc-side, .doc-rail, .calc-results { position: static; }
  .split-cols > div { padding: 36px 30px; }
  .cta-band > .inner { padding: 48px 36px; }
}

@media (max-width: 900px) {
  :root { --gut: 20px; }
  .hero > .inner:has(.hero-figure), .hero > .inner:has(.hero-panel) { grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
  .hero .hero-figure, .hero .hero-panel { grid-column: 1; }
  .hero .hero-figure img, .hero.hero-page .hero-figure img { height: 280px; }
  .promise-card, .factstrip .inner, .hero-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-facts dd:nth-of-type(odd) { border-left: 0; padding-left: 0; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .split, .nl-band .inner, .form-grid, .split-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .split, .nl-band .inner { gap: 30px; }
  .split.flip .split-photo { order: 0; }
  .split-cols > div, .split-cols > div:first-child { padding: 30px 26px; }
  .split-cols > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  footer.site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .section { padding: 54px 0; }
  .imgband.imgband-plain { height: 280px; }
  .imgband.imgband-plain.imgband-tall { height: 330px; }
  .nl-band .inner, .form-card { padding: 30px 24px; }
  nav.primary { display: none; }
  .nav-toggle { display: block; }
  .topbar .tb-tag { display: none; }
  .topbar .inner { justify-content: flex-end; }
  header.site nav.primary.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--card); border-radius: 20px; box-shadow: var(--sh-lift);
    padding: 14px; gap: 2px;
  }
  header.site nav.primary.open .nav-group .sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; padding: 0 0 0 12px;
  }
  .sticky-cta { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; gap: 10px; }
  .sticky-cta .btn { flex: 1; text-align: center; padding: 13px 14px; font-size: .9rem; }
  .wa-float { bottom: 78px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .promise-card, .factstrip .inner, .hero-facts dl { grid-template-columns: minmax(0, 1fr); }
  .hero-facts dd { border-left: 0; padding-left: 0; }
  .hero-panel { padding: 20px; }
  .hero-panel .hp-row { grid-template-columns: 46px minmax(0,1fr) auto; gap: 10px; }
  .cta-band > .inner { padding: 38px 24px; border-radius: 24px; }
  .card { --card-pad: 22px; }
  .step { padding: 22px; }
  .step { padding-left: 62px; }
  footer.site { border-radius: 24px 24px 0 0; }
}

@media print {
  .topbar, header.site, nav.primary, .wa-float, .sticky-cta, .cta-band, .nl-band, footer.site { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .imgband { display: none; }
  .card, .tbl, .form-card { box-shadow: none; border: 1px solid #ccc; }
  a { color: #000; text-decoration: underline; }
}


/* ---- calculator results -------------------------------------------------
   The rows calculators.js writes into .calc-results. These class names have
   been emitted by every calculator on every site in this family since the
   first one shipped, and NONE of them were ever styled — so every result read
   as a run of unspaced text on a dark panel ("Net fee (yours)£2,969"). The
   panel is dark (--ink) so everything here is set for light-on-dark. */
.cr { display: flex; justify-content: space-between; align-items: baseline;
      gap: 1.25rem; padding: .5rem 0; font-size: .95rem; }
.cr > span { color: #a8acb8; }
.cr > b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums;
          white-space: nowrap; }
.cr-strong { border-top: 1px solid rgba(255,255,255,.16); margin-top: .25rem;
             padding-top: .75rem; font-size: 1.05rem; }
.cr-strong > span { color: #fff; }
.cr-strong > b { font-size: 1.2rem; color: var(--accent); }
.cr-rule { border: 0; border-top: 1px solid rgba(255,255,255,.16);
           margin: .85rem 0 .35rem; }
.calc-note { margin-top: 1.1rem; padding: .9rem 1rem; border-radius: 12px;
             font-size: .85rem; line-height: 1.55; color: #c9ccd6;
             background: rgba(255,255,255,.06);
             border-left: 3px solid rgba(255,255,255,.28); }
.calc-note strong, .calc-note b { color: #fff; }
.calc-note em { color: #fff; font-style: italic; }
.calc-note + .calc-note { margin-top: .6rem; }
.calc-warn { border-left-color: #e0a33a; background: rgba(224,163,58,.12); }
.calc-ok   { border-left-color: #4fb477; background: rgba(79,180,119,.12); }
.calc-info { border-left-color: rgba(255,255,255,.28); }