/* ==========================================================================
   Direction A, "Billboard" (Andy chose it on 16 Sep 2026)
   Loaded after styles.css and brand-2026.css on every page.

   Taken from two real sites, after a read of 41 property and finance homepages:
   monzo.com for the rounded, inset full-bleed photograph as the opening, and
   urbansplash.co.uk for very large light type and a mosaic of labelled photographs.
   One accent (#c2482e, the red in Andy's logo), near-black ink, white and a neutral grey ground. No beige,
   no blue, no arches, no ink outlines or offset "sticker" shadows (rejected as a
   children's site the same day).
   ========================================================================== */
:root {
  --ink: #121614;
  --tx: #4a524f;
  --mut: #6b736f;
  --line: #e6e9e7;
  --acc: #c2482e;
  --acc-d: #a53b25;
  --acc-soft: #f7e7e2;
  --green: #121614;
  --green-deep: #0d100f;
  --paper: #f4f5f4;
  --bb-max: 1360px;
  --bb-gut: clamp(16px, 2.4vw, 32px);
  --bb-r: 30px;
}
body { font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tx); }
h1, h2, h3, h4, .display { font-family: "Onest", system-ui, sans-serif; color: var(--ink); }
h1, h2 { font-weight: 400; letter-spacing: -.035em; }
h3 { font-weight: 500; letter-spacing: -.02em; }
strong { color: var(--ink); font-weight: 600; }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; padding: 15px 26px; font-weight: 600; letter-spacing: 0; }
.btn-primary, .btn-bright { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn-primary:hover, .btn-bright:hover { background: var(--acc-d); border-color: var(--acc-d); color: #fff; }
.btn-ghost, .btn-ghost-dark, .btn-quiet { background: #fff; color: var(--ink); border-color: #cfd5d2; }
.btn-ghost:hover, .btn-ghost-dark:hover, .btn-quiet:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- masthead ---------- */
header.site { background: rgba(255,255,255,.96); border-bottom: 0; }
header.site .inner { max-width: var(--bb-max); padding: 0 var(--bb-gut); min-height: 84px; }
.wordmark .wm-top { font-family: "Onest", sans-serif; font-weight: 600; letter-spacing: .16em; }
.wordmark .wm-main { font-family: "Onest", sans-serif; font-weight: 700; letter-spacing: -.04em; }
nav.primary a, nav.primary .nav-group > button { font-family: "Onest", sans-serif; font-weight: 500; font-size: .95rem; border-radius: 999px; padding: 10px 14px; }
nav.primary a:hover, nav.primary .nav-group > button:hover { background: var(--paper); }
nav.primary .btn.btn-primary, nav.primary .btn.btn-bright { border-radius: 999px; padding: 13px 22px; }
.nav-group .sub { border-radius: 20px; padding: 8px; border: 0; box-shadow: 0 24px 60px rgba(18,22,20,.14); }
.nav-group .sub a { border-radius: 12px; }

/* ---------- homepage ---------- */
.bb-wrap { width: min(var(--bb-max), 100%); margin-inline: auto; padding-inline: var(--bb-gut); }
.bb-home { overflow: clip; }
.bb-home h2 { font-weight: 300; letter-spacing: -.04em; line-height: 1.04; }
.bb-kicker { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acc-d); margin-bottom: 14px; }
.bb-link { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--acc); padding-bottom: 2px; white-space: nowrap; }
.bb-link:hover { color: var(--acc-d); text-decoration: none; }
.bb-btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: .98rem; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.bb-btn:hover { text-decoration: none; }
.bb-btn .afl-ico { width: 18px; height: 18px; stroke-width: 2.2; }
.bb-btn-coral { background: var(--acc); color: #fff; }
.bb-btn-coral:hover { background: var(--acc-d); color: #fff; }
.bb-btn-glass { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.bb-btn-glass:hover { background: #fff; color: var(--ink); }
.bb-btn-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #cfd5d2; }
.bb-btn-line:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.bb-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* the billboard */
/* The copy sits in the normal flow at the foot of the photograph, and the photograph grows to fit it.
   It used to be absolutely positioned inside a fixed height, which cut the top off the headline in a
   laptop window of 620-730px (reported 17 Sep 2026). */
.bb-bill { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(580px, 84vh, 800px); border-radius: 34px; overflow: hidden; background: #2b302e; }
.bb-bill > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.bb-bill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,12,.55) 0%, rgba(10,14,12,.2) 55%, rgba(10,14,12,0) 78%), linear-gradient(180deg, rgba(10,14,12,0) 35%, rgba(10,14,12,.55) 100%); }
.bb-bill-copy { position: relative; z-index: 2; margin: clamp(72px, 12vh, 150px) clamp(24px, 4vw, 64px) clamp(28px, 4vw, 60px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
.bb-bill h1 { color: #fff; font-size: clamp(3rem, min(7.2vw, 12vh), 7.4rem); font-weight: 300; line-height: .96; letter-spacing: -.05em; margin: 0; text-wrap: balance; }
.bb-bill h1 strong { display: block; color: #fff; font-weight: 600; text-wrap: balance; }
.bb-bill h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 5rem); margin: 0; }
.bb-bill p { color: rgba(255,255,255,.92); font-size: 1.14rem; line-height: 1.55; max-width: 34em; margin: 22px 0 0; }
.bb-due { width: 290px; padding: 20px 22px; border-radius: 22px; background: rgba(255,255,255,.14); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); color: #fff; }
.bb-due small { display: block; font-size: .8rem; opacity: .85; }
.bb-due strong { display: block; color: #fff; font-size: 2rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; margin: 4px 0 10px; }
.bb-due span { font-size: .86rem; line-height: 1.45; opacity: .92; }
.bb-notice { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; padding: 16px 22px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .95rem; text-decoration: none; text-align: center; }
.bb-notice:hover { text-decoration: none; color: var(--ink); background: #eceeed; }
.bb-notice strong { color: var(--acc-d); font-weight: 600; }
.bb-notice .afl-ico { width: 20px; height: 20px; color: var(--acc); }

/* statement */
.bb-state { padding: clamp(80px, 11vw, 150px) 0 clamp(50px, 7vw, 100px); text-align: center; }
.bb-state h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); max-width: 17em; margin: 0 auto; }
.bb-state h2 em { font-style: normal; color: var(--acc); }
.bb-state p { max-width: 38em; margin: 26px auto 0; font-size: 1.12rem; }

/* sections */
.bb-section { padding: clamp(40px, 5vw, 70px) 0; }
.bb-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 26px; }
.bb-head h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); margin: 0; }
.bb-head p { margin: 0; font-size: 1.05rem; }

/* mosaic of labelled photographs */
.bb-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 290px; gap: 14px; }
.bb-tile { position: relative; overflow: hidden; border-radius: 26px; color: #fff; background: #2b302e; text-decoration: none; }
.bb-tile:hover { text-decoration: none; color: #fff; }
.bb-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2,.7,.2,1); }
.bb-tile:hover img { scale: 1.06; }
.bb-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.62)); }
.bb-tile > div { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; }
.bb-tile small { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .88; }
.bb-tile h3 { color: #fff; font-size: 1.7rem; font-weight: 400; margin: 4px 0 0; }
.bb-tile p { color: rgba(255,255,255,.92); font-size: .96rem; margin: 8px 0 0; max-width: 30em; }
.bb-tile-big { grid-column: span 2; grid-row: span 2; }
.bb-tile-big h3 { font-size: clamp(2.2rem, 3.4vw, 3.3rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; }
.bb-also { margin: 22px 0 0; font-size: 1rem; }
.bb-also a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Making Tax Digital panel with the sliders */
.bb-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; background: var(--paper); border-radius: 34px; padding: clamp(28px, 5vw, 72px); }
.bb-panel h2 { font-size: clamp(2.2rem, 4vw, 3.8rem); margin: 0 0 20px; }
.bb-panel p { font-size: 1.06rem; margin: 0 0 12px; max-width: 32em; }
.bb-tool { background: #fff; border-radius: 26px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 30px 70px rgba(18,22,20,.08); }
.bb-field + .bb-field { margin-top: 26px; }
.bb-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ink); font-weight: 500; font-size: .95rem; }
.bb-field output { font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.bb-tool input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 16px 0 4px; border-radius: 99px; background: linear-gradient(90deg, var(--acc) var(--p, 25%), #e3e7e5 var(--p, 25%)); cursor: pointer; }
.bb-tool input[type=range]:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.bb-tool input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #cfd5d2, 0 4px 12px rgba(0,0,0,.18); cursor: grab; }
.bb-tool input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #cfd5d2; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.bb-answer { margin-top: 26px; padding: 22px 24px; border-radius: 20px; background: var(--paper); transition: background .25s ease; }
.bb-answer[data-state=now] { background: var(--acc); }
.bb-answer[data-state=now] small, .bb-answer[data-state=now] strong, .bb-answer[data-state=now] p { color: #fff; }
.bb-answer[data-state=y2027], .bb-answer[data-state=y2028] { background: var(--acc-soft); }
.bb-answer small { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.bb-answer strong { display: block; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; color: var(--ink); margin: 6px 0 8px; }
.bb-answer p { margin: 0; font-size: .94rem; color: var(--tx); }

/* dates row */
.bb-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.bb-card { scroll-snap-align: start; display: flex; flex-direction: column; min-height: 250px; padding: 28px; border-radius: 26px; background: var(--paper); }
.bb-card small { font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--acc-d); }
.bb-card strong { font-size: 2.4rem; font-weight: 300; letter-spacing: -.045em; line-height: 1.05; margin: 10px 0 14px; color: var(--ink); }
.bb-card p { margin: auto 0 0; font-size: .96rem; }
.bb-card.hot { background: var(--acc); }
.bb-card.hot small, .bb-card.hot strong, .bb-card.hot p { color: #fff; }

/* free tools: four calculators, each led by the figure it works with */
.bb-head > div .bb-kicker { margin-bottom: 10px; }
.bb-calcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bb-calc { display: flex; flex-direction: column; min-height: 330px; padding: 28px 28px 26px; border-radius: 26px; background: var(--paper); color: var(--tx); text-decoration: none; transition: background .2s; }
.bb-calc:hover { background: #eaecea; color: var(--tx); text-decoration: none; }
.bb-calc-fig { font-size: clamp(2.4rem, 3.4vw, 3.4rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--ink); white-space: nowrap; }
.bb-calc-fact { margin-top: 14px; font-size: .92rem; line-height: 1.5; color: var(--mut); }
.bb-calc strong { margin-top: auto; padding-top: 26px; font-size: 1.22rem; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.bb-calc em { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-style: normal; font-weight: 600; font-size: .92rem; color: var(--acc-d); }
.bb-calc em .afl-ico { width: 18px; height: 18px; stroke-width: 2.2; transition: translate .2s; }
.bb-calc:hover em .afl-ico { translate: 4px 0; }

/* switching steps */
.bb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bb-steps li { padding: 28px 26px 30px; border-top: 1px solid var(--ink); }
.bb-steps span { display: block; font-size: 3.4rem; font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--acc); margin-bottom: 26px; }
.bb-steps strong { display: block; font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }
.bb-steps p { margin: 0; font-size: .98rem; }

/* the team: one grey panel, the words across the top and all six people in a row */
.bb-panel.bb-team { display: block; }
.bb-team-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 80px); align-items: end; }
.bb-team-head h2 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); margin: 0; }
.bb-team-head p { font-size: 1.06rem; margin: 0; max-width: 34em; }
.bb-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 22px; }
.bb-logos img { height: 30px; width: auto; mix-blend-mode: multiply; }
.bb-team-grid { list-style: none; margin: clamp(30px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
/* the six portraits come from different shoots; black and white on one grey makes them a set */
.bb-team-grid img, .team-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; filter: grayscale(1) contrast(1.04); background: #e4e7e5; }
.bb-team-grid strong { display: block; margin-top: 12px; font-size: 1.05rem; font-weight: 500; color: var(--ink); line-height: 1.25; }
.bb-team-grid span { display: block; font-size: .86rem; color: var(--mut); line-height: 1.35; margin-top: 2px; }
.bb-team .bb-link { display: inline-block; margin-top: 30px; }

/* the About page: everyone, with what they do */
.team-intro { max-width: 64ch; color: var(--mut); margin: 0 0 30px; }
.team-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.team-card { background: var(--paper); border-radius: 26px; padding: 18px 18px 26px; }
/* 4:3 from a square portrait: keep the top of the head, lose some shoulder */
.team-card img { aspect-ratio: 4 / 3; object-position: 50% 0; }
.team-card h3 { margin: 18px 8px 0; font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; }
.team-card .team-role { margin: 2px 8px 12px; font-size: .92rem; font-weight: 600; color: var(--acc-d); }
.team-card p { margin: 0 8px; font-size: .95rem; line-height: 1.6; color: var(--tx); }

/* questions */
.bb-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.bb-faq-head h2 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); margin: 0 0 18px; }
.bb-faq-head a { color: var(--ink); font-weight: 600; }
.bb-faq-list details { border-bottom: 1px solid var(--line); }
.bb-faq-list details:first-child { border-top: 1px solid var(--line); }
.bb-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.bb-faq-list summary::-webkit-details-marker { display: none; }
.bb-faq-list summary::after { content: "+"; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-size: 1.4rem; font-weight: 300; line-height: 1; transition: rotate .25s ease, background .2s; }
.bb-faq-list details[open] summary::after { rotate: 45deg; background: var(--acc); color: #fff; }
.bb-faq-list details p { margin: 0; padding: 0 60px 26px 0; font-size: 1.02rem; }

/* closing billboard */
.bb-last { padding-bottom: clamp(60px, 8vw, 110px); }
.bb-bill-cta { height: auto; min-height: 520px; }
.bb-bill-cta > img { object-position: 60% 40%; }
.bb-bill-cta .bb-bill-copy { grid-template-columns: minmax(0, 1fr); }

/* ---------- closing bands on interior pages ---------- */
.cta-band { background: transparent; padding: clamp(30px, 4vw, 60px) var(--bb-gut) clamp(60px, 7vw, 100px); }
.cta-band > .inner { max-width: calc(var(--bb-max) - 2 * var(--bb-gut)); background: var(--acc); border-radius: 34px; padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px); }
.cta-band h2 { font-weight: 300; font-size: clamp(2rem, 3.4vw, 3.2rem); letter-spacing: -.04em; }
.on-dark .btn-primary, .on-dark .btn-bright, .cta-band .btn-primary, .cta-band .btn-bright { background: #fff; border-color: #fff; color: var(--ink); }
.on-dark .btn-primary:hover, .on-dark .btn-bright:hover, .cta-band .btn-bright:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.accred-band { background: var(--ink); }
.nl-band { background: transparent; border-top: 0; padding: 0 var(--bb-gut) clamp(40px, 5vw, 70px); }
.nl-band .inner { max-width: calc(var(--bb-max) - 2 * var(--bb-gut)); background: var(--paper); border-radius: 34px; padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 56px); }
.nl-band h3 { font-weight: 400; letter-spacing: -.03em; }
.nl-form input[type=email] { border-radius: 999px; }
.nl-form .btn { border-radius: 999px; }
.wa-float { background: var(--ink); }
.sticky-cta .btn { border-radius: 999px; }

/* ---------- footer ---------- */
footer.site { background: var(--ink); color: #b9c0bd; }
footer.site > .inner { max-width: var(--bb-max); padding-inline: var(--bb-gut); }
footer.site h4 { font-family: "Onest", sans-serif; font-weight: 500; }
footer.site a { color: #e4e8e6; }
footer.site .fine, footer.site .f-areas { color: #8e9793; }
footer.site .f-areas a:not(:last-child)::after { color: #8e9793; }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .bb-bill-copy { grid-template-columns: minmax(0, 1fr); }
  .bb-due { display: none; }
  .bb-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
  .bb-panel, .bb-faq, .bb-team-head { grid-template-columns: minmax(0, 1fr); }
  .bb-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-calcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-calc { min-height: 280px; }
  .bb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bb-bill { min-height: clamp(540px, 80vh, 760px); border-radius: 24px; }
  .bb-bill::after { background: linear-gradient(180deg, rgba(10,14,12,.35) 0%, rgba(10,14,12,.75) 100%); }
  .bb-bill h1 { font-weight: 400; }
  .bb-bill p { font-size: 1rem; }
  .bb-btn { height: 50px; width: 100%; justify-content: center; }
  .bb-notice { border-radius: 22px; }
  .bb-head { flex-direction: column; align-items: flex-start; }
  .bb-mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 230px; }
  .bb-tile-big { grid-column: auto; grid-row: auto; height: 360px; }
  .bb-steps { grid-template-columns: minmax(0, 1fr); }
  .bb-calc { min-height: 240px; }
  .bb-faq-list details p { padding-right: 0; }
  .bb-panel, .cta-band > .inner, .nl-band .inner { border-radius: 24px; }
  .bb-rail { grid-auto-columns: minmax(260px, 82%); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-tile img, .bb-calc em .afl-ico { transition: none; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */
:root { --max: 1360px; --gut: clamp(16px, 2.4vw, 32px); }

/* ---------- hero: the three shapes build.page_hero emits ---------- */
.hero.hero-page.bb-hero { display: block; min-height: 0; padding: 0; background: #fff !important; }
.bb-hero .page-hero-copy { padding: 0; align-self: auto; min-width: 0; }
.bb-hero .page-hero-copy > * { max-width: none; }
.bb-hero .crumbs { margin: 0 0 16px; font-size: .88rem; color: var(--mut); }
.bb-hero .crumbs a { color: inherit; }
.bb-hero h1 { font-weight: 300; letter-spacing: -.045em; line-height: 1.02; margin: 0 0 20px; text-wrap: balance; }
.bb-hero h1 .accent { color: inherit; font-weight: 500; }
.bb-hero .lede { margin: 0; font-size: 1.12rem; line-height: 1.55; max-width: 36em; }
.bb-hero .hero-stamp { margin: 16px 0 0; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); }
.bb-hero .hero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.bb-hero .hero-alt { margin: 22px 0 0; }

/* 1. a photograph: the billboard */
.bb-bill-page { min-height: clamp(500px, 70vh, 640px); }
.bb-bill-page .bb-bill-copy { grid-template-columns: minmax(0, 1fr); }
.bb-bill-page .page-hero-copy { max-width: 920px; }
.bb-bill-page h1 { color: #fff; font-size: clamp(2.4rem, min(5.2vw, 9vh), 5rem); }
.bb-bill-page .crumbs, .bb-bill-page .lede, .bb-bill-page .hero-stamp, .bb-bill-page .hero-alt { color: rgba(255,255,255,.92); }
.bb-bill-page .hero-alt a, .bb-bill-page .hero-alt strong { color: #fff; }
.bb-bill-page .btn-ghost, .bb-bill-page .btn-ghost-dark { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); color: #fff; backdrop-filter: blur(10px); }
.bb-bill-page .btn-ghost:hover, .bb-bill-page .btn-ghost-dark:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* 2. the page's own panel or form: two columns on white */
.bb-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(20px, 3vw, 44px) 0 clamp(6px, 1vw, 12px); }
.bb-hero-panel h1 { font-size: clamp(2.6rem, 4.8vw, 4.6rem); }
.bb-hero .page-hero-aside { display: flex; justify-content: flex-end; padding: 0; background: transparent; }
.bb-hero .page-hero-aside .form-card, .bb-hero .page-hero-aside .hero-panel { width: 100%; max-width: 580px; background: var(--paper); border: 0; border-radius: 30px; box-shadow: none; }
.bb-hero .page-hero-aside .form-card { padding: clamp(24px, 3vw, 36px); }
.hero.hero-page.bb-hero:has(.form-card) .page-hero-copy { padding-top: 0; }
.bb-hero-grid:has(.form-card) { align-items: start; }
.bb-hero-grid:has(.form-card) > .page-hero-copy { padding-top: clamp(16px, 5vw, 80px); }

/* 3. neither: a grey panel of type */
.bb-textbill { background: var(--paper); border-radius: 34px; padding: clamp(36px, 6vw, 88px) clamp(26px, 5vw, 72px); }
.bb-hero-text h1 { font-size: clamp(2.8rem, 6vw, 5.6rem); max-width: 14em; }

/* the row under the hero */
.afl-trust-band { background: transparent; border: 0; padding: 14px 0 0; }
.afl-trust { max-width: var(--bb-max); padding: 0 var(--bb-gut); gap: 14px; }
.afl-trust > div { background: var(--paper); border-radius: 22px; min-height: 70px; justify-content: flex-start; padding: 16px 22px; font-size: .95rem; }
.afl-trust > div + div::before { display: none; }
.afl-trust .afl-ico { width: 24px; height: 24px; color: var(--acc); stroke-width: 1.8; }
.afl-trust strong { font-weight: 500; }
.facts-band .afl-trust > .fact { padding: 22px 26px; color: var(--mut); font-size: .9rem; line-height: 1.4; }
.facts-band .afl-trust > .fact:first-child { padding-left: 26px; }
.facts-band .fact strong { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; margin-bottom: 4px; color: var(--ink); }

/* ---------- sections: grey sections become rounded panels ---------- */
.section { padding-inline: var(--bb-gut); }
.section > .inner { max-width: calc(var(--bb-max) - 2 * var(--bb-gut)); padding-inline: clamp(20px, 4vw, 64px); }
.section.bg-paper, .section.bg-tint { background: transparent; padding-block: 8px; }
.section.bg-paper > .inner, .section.bg-tint > .inner { background: var(--paper); border-radius: 34px; padding-block: clamp(44px, 6vw, 80px); }
.section.doc-sec.bg-paper, .doc-sec.bg-paper + .doc-sec.bg-paper { padding-block: 8px; }
.eyebrow, .doc-mark { color: var(--acc-d); font-weight: 600; letter-spacing: .06em; }
.section-head h2, .prose h2, .doc-body h2, .offer-copy h2, .afl-heading h2 { font-weight: 400; letter-spacing: -.035em; }
.section-head h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.06; }
.doc-body h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.08; }
.doc-body h3, .prose h3 { font-weight: 500; letter-spacing: -.015em; }

/* ---------- document pages ---------- */
.doc-rail { background: #fff; border: 0; border-radius: 24px; box-shadow: 0 18px 50px rgba(18,22,20,.08); }
.doc-rail .drt { color: var(--acc-d); font-weight: 600; }
.doc-rail a:hover, .doc-rail a.on { color: var(--acc-d); }
.doc-cta { background: var(--ink); border-radius: 26px; }
.doc-cta .btn { background: var(--acc); border-color: var(--acc); color: #fff; }
.doc-cta .btn:hover { background: var(--acc-d); border-color: var(--acc-d); color: #fff; }
.note, .rulebox { background: var(--paper); border: 0; border-left: 0; border-radius: 22px; box-shadow: none; }
.bg-paper .note, .bg-paper .rulebox, .bg-tint .note { background: #fff; }
.note .note-label, .rulebox .rb-ref { color: var(--acc-d); font-weight: 600; }
.tbl { border: 0; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tbl th { background: var(--paper); font-weight: 600; }
.split-block { background: var(--ink); border-radius: 30px; }
.imgband.imgband-plain { width: calc(100% - 2 * var(--bb-gut)); max-width: calc(var(--bb-max) - 2 * var(--bb-gut)); margin: 16px auto; border-radius: 34px; }

/* questions */
.faq details, .afl-faq-list details { border-bottom: 1px solid var(--line); }
.faq summary, .afl-faq-list summary { position: relative; padding: 22px 60px 22px 0; font-weight: 400; font-size: clamp(1.08rem, 1.5vw, 1.28rem); letter-spacing: -.015em; color: var(--ink); }
.faq summary::after, .afl-faq-list summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-items: center; font-size: 1.35rem; font-weight: 300; line-height: 1; transition: rotate .25s ease, background .2s; }
.faq details[open] summary::after, .afl-faq-list details[open] summary::after { content: "+"; rotate: 45deg; background: var(--acc); color: #fff; }
.bg-paper .faq summary::after { background: #fff; }

/* cards */
.card { background: var(--paper); border: 0; border-top: 0; border-radius: 26px; box-shadow: none; padding: 30px 30px 26px; }
.card:hover { transform: none; box-shadow: none; background: #eceeed; }
.bg-paper .card, .bg-tint .card { background: #fff; }
.bg-paper .card:hover { background: #fafbfa; }
.card h3 { font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; }
.card .card-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.factstrip .fs { background: var(--paper); border: 0; border-radius: 22px; }
.factstrip .fs b { font-weight: 400; font-size: 1.8rem; letter-spacing: -.035em; }
.hub-card { background: var(--paper); border: 0; border-top: 0; border-radius: 26px; box-shadow: none; padding: 26px 26px 22px; }
.hub-card:hover { transform: none; box-shadow: none; background: #eceeed; }
.hub-card strong { font-weight: 500; font-size: 1.22rem; letter-spacing: -.02em; }
.hub-card em { color: var(--ink); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 4px; }
.hub-card-lead { background: var(--ink); border-radius: 30px; }
.hub-card-lead:hover { background: #1d2320; }
.hub-card-lead strong { font-weight: 300; letter-spacing: -.035em; }
.hub-card-lead em { color: #fff; }
.hub-group { border-top-color: var(--line); }
.hub-group-head h2 { font-weight: 400; letter-spacing: -.03em; }

/* forms and calculators */
input, select, textarea { border: 1px solid #d6dcd9; border-radius: 14px; font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(194,72,46,.25); outline: none; }
.form-card { border: 0; border-radius: 30px; background: var(--paper); }
.calc-inputs { background: var(--paper); border: 0; border-radius: 30px; }
.calc-results { background: var(--ink); border-radius: 30px; }

/* offer pages */
.offer-section { padding: clamp(60px, 8vw, 100px) var(--bb-gut); }
.offer-section.paper { background: transparent; border: 0; padding-block: 8px; }
.offer-section.paper > .offer-wrap { background: var(--paper); border-radius: 34px; padding: clamp(44px, 6vw, 84px) clamp(20px, 4vw, 64px); }
.offer-wrap { width: min(calc(var(--bb-max) - 2 * var(--bb-gut)), 100%); padding-inline: clamp(20px, 4vw, 64px); }
.offer-figure img { border-radius: 30px; }
.offer-float .hero-panel, .offer-card { border: 0; border-radius: 26px; }
.offer-section .offer-form { border-radius: 30px; background: var(--paper); box-shadow: none; }
.offer-section.paper .offer-form { background: #fff; }
.offer-covers .afl-ico { color: var(--acc); }
.offer-needs { border-top-color: var(--line); }
.offer-needs li { border-bottom-color: var(--line); }
.offer-needs li::before { font-weight: 400; font-size: 1.4rem; }

/* credentials, now on white with the full-colour logos */
.accred-band { background: transparent; color: var(--tx); padding: clamp(30px, 4vw, 50px) var(--bb-gut) 0; }
.accred-band > .inner { max-width: calc(var(--bb-max) - 2 * var(--bb-gut)); padding: 34px clamp(20px, 4vw, 64px) 0; border-top: 1px solid var(--line); }
.accred-band h2 { color: var(--ink); font-weight: 400; letter-spacing: -.03em; }
.accred-band p { color: var(--tx); }
.accred-band .afl-badges > span { color: var(--mut); border-left-color: var(--line); }

@media (max-width: 1000px) {
  .bb-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .bb-hero .page-hero-aside { justify-content: stretch; }
  .bb-hero .page-hero-aside .form-card, .bb-hero .page-hero-aside .hero-panel { max-width: none; }
  .bb-hero-grid:has(.form-card) > .page-hero-copy { padding-top: 10px; }
  .afl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0; }
}
@media (max-width: 640px) {
  .bb-bill-page { min-height: 520px; }
  .bb-bill-page .bb-bill-copy { margin: 150px 22px 26px; }
  .bb-hero .hero-acts { flex-direction: column; align-items: stretch; }
  .bb-hero .hero-acts .btn { text-align: center; }
  .section > .inner { padding-inline: 18px; }
  .section.bg-paper > .inner, .bb-textbill, .offer-section.paper > .offer-wrap { border-radius: 24px; }
  .afl-trust { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .afl-trust > div { min-height: 0; padding: 12px 16px; border-radius: 16px; }
  .facts-band .afl-trust > .fact, .facts-band .afl-trust > .fact:first-child { padding: 16px 18px; }
}
@media (max-width: 640px) {
  .bb-calcs { grid-template-columns: minmax(0, 1fr); }
  .bb-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}
@media (max-width: 640px) {
  .afl-trust-band:not(.facts-band) .afl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afl-trust-band:not(.facts-band) .afl-trust > div { font-size: .86rem; gap: 8px; padding: 12px 14px; }
}

/* ==========================================================================
   Offer pages on the homepage's components (16 Sep 2026)
   ========================================================================== */
.bb-section h2, .offer-section h2, .bb-faq-head h2 { font-weight: 300; letter-spacing: -.04em; line-height: 1.05; }
.offer-copy h2 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); max-width: 16ch; }
.offer-copy > p { font-size: 1.06rem; }
.bb-ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.bb-ticks li { position: relative; padding-left: 34px; font-size: 1.02rem; line-height: 1.55; color: var(--tx); }
.bb-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.bb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: stretch; }
.bb-split-copy { align-self: center; padding: clamp(10px, 2vw, 30px) 0; }
.bb-split-copy h2 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); margin: 0 0 18px; }
.bb-split-copy > p { font-size: 1.06rem; max-width: 34em; }
.bb-split-copy .offer-aside-line { margin-top: 22px; font-size: .92rem; color: var(--mut); }
.bb-split-photo { position: relative; min-height: 520px; border-radius: 34px; overflow: hidden; background: #2b302e; }
.bb-split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-split-flip .bb-split-copy { order: 2; }
.bb-split-flip .bb-split-photo { order: 1; }
.bb-steps + .bb-acts { margin-top: 34px; }
.offer-section:not(.paper) .offer-card { background: var(--paper); box-shadow: none; }
.offer-section.paper .offer-card { background: #fff; box-shadow: none; }
.offer-float .hero-panel { background: #fff; box-shadow: 0 30px 70px rgba(18,22,20,.16); }
.offer-examples h2 { color: #fff; }
.step::before { background: #fff; color: var(--acc-d); border: 1px solid var(--line); font-weight: 500; }
.step:first-child::before { background: var(--acc); color: #fff; border-color: var(--acc); }
.step::after { background: var(--line); }
.om-subject span, .os-title { color: var(--mut); }
.os-flag { border-radius: 999px; }
@media (max-width: 1000px) {
  .bb-split { grid-template-columns: minmax(0, 1fr); }
  .bb-split-photo { min-height: 360px; }
  .bb-split-flip .bb-split-copy, .bb-split-flip .bb-split-photo { order: 0; }
}
@media (max-width: 640px) {
  .bb-split-photo { min-height: 260px; border-radius: 24px; }
}

/* Andy's logo in the masthead and footer (build.WORDMARK, build.FOOTER_MARK) */
.wordmark .wm-logo { display: block; height: 68px; width: auto; }
header.site .inner { min-height: 96px; }
footer.site .wordmark .wm-logo { height: 76px; filter: none; }
@media (max-width: 1180px) { .wordmark .wm-logo { height: 60px; } }
@media (max-width: 640px) { .wordmark .wm-logo { height: 54px; } header.site .inner { min-height: 80px; } }

/* Inner-page billboards carry a longer lede than the homepage, often over pale stucco, white window frames
   or white railings (Manchester, the dividend article). A firmer scrim behind the copy side keeps it readable. */
.bb-bill-page::after { background: linear-gradient(90deg, rgba(10,14,12,.74) 0%, rgba(10,14,12,.55) 42%, rgba(10,14,12,.2) 78%, rgba(10,14,12,.08) 100%), linear-gradient(180deg, rgba(10,14,12,.08) 0%, rgba(10,14,12,.4) 100%); }
.bb-bill h1, .bb-bill h2, .bb-bill .lede, .bb-bill p, .bb-bill .crumbs { text-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* phones: the inner-page scrim runs top to bottom, since the copy fills the width (placed after the
   desktop scrim above, which would otherwise win) */
@media (max-width: 640px) {
  .bb-bill-page::after { background: linear-gradient(180deg, rgba(10,14,12,.2) 0%, rgba(10,14,12,.8) 55%, rgba(10,14,12,.86) 100%); }
}

/* ==========================================================================
   Making Tax Digital done for you: what it costs (pages_offer._price_section, prices.py)
   ========================================================================== */
.price-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.price-card { display: flex; flex-direction: column; min-height: 230px; padding: 28px 26px 26px; border-radius: 26px; background: var(--paper); }
.price-card-first { background: var(--acc); }
.price-card-first .price-who, .price-card-first .price-fig, .price-card-first .price-per, .price-card-first .price-vat { color: #fff; }
.price-who { font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--acc-d); }
.price-fig { margin: auto 0 0; padding-top: 28px; font-size: clamp(3rem, 4.4vw, 4.2rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.price-per { margin-top: 6px; font-size: 1rem; font-weight: 500; color: var(--ink); }
.price-vat { margin-top: 2px; font-size: .88rem; color: var(--mut); }
.price-card-quote .price-fig { font-size: clamp(1.7rem, 2.2vw, 2.1rem); letter-spacing: -.03em; line-height: 1.1; }
.price-card-quote .bb-link { align-self: flex-start; margin-top: 14px; }
.price-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(30px, 4vw, 50px); }
.price-detail h3 { font-size: 1.35rem; font-weight: 500; margin: 0 0 6px; }
.price-extras { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.price-extras li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.price-extras b { flex: none; font-weight: 600; color: var(--ink); white-space: nowrap; }
.price-note { margin: 18px 0 0; font-size: .92rem; color: var(--mut); }
@media (max-width: 1000px) {
  .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .price-cards { grid-template-columns: minmax(0, 1fr); }
  .price-card { min-height: 0; }
  .price-extras li { flex-direction: column; gap: 2px; }
}