/* ==========================================================================
   Buzz Financial Services — design system.

   Lifted wholesale from buzzmoney-site/assets/buzz-money.css so the two Buzz
   money brands are visibly one family: same peppermint, same Poppins/Lato
   pairing, same card and band vocabulary. Diverges only where this site needs
   something Buzz Money does not have (FAQ disclosure lists, the figure band,
   the offset portrait).

   🚨 THERE IS NO .eyebrow HERE, DELIBERATELY. Andy has asked repeatedly for the
   small uppercase label above a heading to go, across every Buzz site. The rule
   was removed rather than left unused so that an accidental
   <span class="eyebrow"> ships visibly unstyled instead of quietly reappearing.
   A section gets one plain heading that names its subject, and no lead line
   underneath unless that line carries real information.

   Original header follows.
   --------------------------------------------------------------------------
   Buzz Money — design system.

   Structure follows the reference set (Swoop, Capitalise, iwoca, Funding Circle):
   photography of a real business owner, the product's own output shown as cards
   over that photo, a light page ground throughout, and a reassurance line under
   the primary button.

   Peppermint --mint is the brand colour and carries ink text (about 11:1 against
   #16181D). --green is the deep tone, used only where green has to carry small
   text on white, where the peppermint would be illegible.
   ========================================================================== */

:root {
  --ink: #16181D;
  --ink-2: #3D454F;
  --mute: #6B7580;
  --mint: #5FDDB8;
  --mint-hover: #4ACFA6;
  --mint-tint: #BDF3E1;
  --green: #12735E;
  --green-dk: #0C5647;
  --green-wash: #EAFBF5;
  --line: #E4E7EB;
  --paper: #FFFFFF;
  --paper-2: #F6F8FA;
  --max: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--paper); color: var(--ink-2);
  font-size: 17.5px; line-height: 1.62; -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: var(--green); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
h4 { color: var(--ink); font-weight: 700; font-size: 1.04rem; letter-spacing: -.015em; }
h1 { font-size: clamp(2.4rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.5rem); }
h3 { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2; }
p + p { margin-top: 1em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ⚠️ READING MEASURE WITHOUT MOVING THE LEFT EDGE.
   These used to shrink the container itself and re-centre it, so any page mixing them —
   40 of the 43 did — shifted its left edge by up to 230px from one section to the next as
   you scrolled. It read as the page coming apart. The container now always spans --max
   and the measure is applied to the CONTENT, so every section on a page starts on the
   same line. `.center` still centres, because a section that is deliberately centred
   reads as deliberate. */
.wrap-mid, .wrap-narrow { max-width: var(--max); }
.wrap-mid > * { max-width: 960px; }
.wrap-narrow > * { max-width: 740px; }
.wrap-mid.center > *, .wrap-narrow.center > * { margin-left: auto; margin-right: auto; }
.section { padding: 84px 0; }
.section.alt { background: var(--paper-2); }
.lede { font-size: 1.13rem; line-height: 1.6; max-width: 62ch; margin-top: 14px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 650; font-size: .97rem; padding: 14px 26px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer; transition: .15s; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--mint); color: var(--ink); }
.btn-primary:hover { background: var(--mint-hover); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 17px 32px; font-size: 1.03rem; }
.btn-sm { padding: 11px 20px; font-size: .9rem; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---- wordmark ------------------------------------------------------------
   Follows the E&G family: lowercase, light weight, one letter carrying a mark
   in the accent colour, descriptor beneath in spaced caps. The dotless i
   (U+0131) removes the real tittle so the leaf sits in its place.
   The leaf is 7px because rotation expands its bounding box — at 9px it
   overhung the preceding t. */
.logo { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; }
.logo:hover { text-decoration: none; }
.logo .word { font-family: Poppins, Lato, sans-serif; font-weight: 300; font-size: 1.72rem;
  letter-spacing: -.005em; color: var(--ink); position: relative; display: inline-block; }
/* BUZZ is the brand, money is the descriptor — so BUZZ is set in Anton at the SAME
   font-size as the Poppins lowercase, which makes it the taller, dominant half. Anton has
   ONE weight and no bold cut; font-synthesis:none makes the browser refuse to fake one
   rather than smearing the letterforms. */
.logo .word b { font-family: Anton, Poppins, sans-serif; font-weight: 400;
  font-synthesis: none; letter-spacing: .005em; }
.logo .i { position: relative; display: inline-block; }
.logo .leaf { position: absolute; left: 50%; top: 0; width: 7px; height: 7px;
  background: var(--mint); border-radius: 100% 0 100% 0;
  transform: translateX(-50%) rotate(18deg); }
.logo .desc { font-size: .53rem; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase; color: var(--mute); padding-left: 2px; }

/* ---- header ---- */
.site-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky;
  top: 0; z-index: 60; }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 74px; }
.nav { margin-left: auto; display: flex; gap: 26px; align-items: center; font-size: .93rem;
  font-weight: 500; }
.nav a { color: var(--ink-2); }
.nav a:hover, .nav a.active { color: var(--ink); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; margin-left: auto; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; }

/* ---- hero ---- */
.hero { padding: 70px 0 0; background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%); }
.hero .wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 20px; max-width: 19ch; }
/* The highlighter behind the last few words. Anchored in EM of the font-size, not as a
   percentage of the line box — the line box height depends on the font's ascent and
   descent, so the old `linear-gradient(transparent 66%, …)` slid off the letters the
   moment the headline font changed from Inter to Poppins and sat under the text as a
   detached bar. Em units keep it on the glyphs whatever the face. */
.hero h1 u {
  text-decoration: none; white-space: nowrap;
  background-image: linear-gradient(var(--mint-tint), var(--mint-tint));
  background-repeat: no-repeat;
  /* Tall enough to clear the baseline, so a solid strip is always visible under the
     letters. A band that sits entirely *within* heavy display type gets covered by the
     letterforms and reads as a broken dashed line, which is how it looked on mobile. */
  background-size: 100% .34em;
  background-position: 0 .76em;
}
.hero .lede { font-size: 1.15rem; max-width: 48ch; margin-bottom: 14px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.reassure { margin-top: 14px; font-size: .88rem; color: var(--mute); display: flex;
  align-items: center; gap: 7px; }
.reassure svg { flex: 0 0 15px; }

/* photo with the product's output over it */
.shot { position: relative; padding: 0 0 34px; }
.shot img { border-radius: 20px 20px 20px 90px; width: 100%; }
.fcard { position: absolute; background: #fff; border-radius: 13px; padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(22,24,29,.16); border: 1px solid var(--line); width: 290px; }
.fcard .t { display: flex; align-items: center; gap: 9px; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; }
.fcard p { font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.fcard b { color: var(--ink); }
.fdot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  flex: 0 0 22px; font-size: .7rem; color: #fff; background: var(--green); }
.f1 { left: -46px; top: 70px; }
.f2 { right: -40px; bottom: 64px; width: 305px; }
.f1 .t, .f2 .t { color: var(--green); }

/* ---- credential bar ------------------------------------------------------
   The competitors run a stat bar here filled with real figures. Buzz Money has
   no track record yet, so this carries the regulatory position, which is true
   today and independently checkable. Replace with real numbers when they exist. */
.bar { border-top: 1px solid var(--line); background: #fff; }
.bar .wrap { padding-top: 20px; padding-bottom: 20px; }
.bar p { font-size: .86rem; color: var(--mute); max-width: 96ch; }
.bar b { color: var(--ink-2); font-weight: 650; }

/* ---- the two doors ---- */
.doors { padding: 78px 0; background: var(--paper-2); }
.doors .sub { max-width: 58ch; margin-bottom: 36px; margin-top: 8px; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.door { background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 32px; display: block; transition: .16s; color: inherit; }
.door:hover { text-decoration: none; border-color: var(--mint);
  box-shadow: 0 14px 34px rgba(22,24,29,.09); transform: translateY(-2px); }
.door .tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green); background: var(--green-wash);
  padding: 5px 11px; border-radius: 99px; margin-bottom: 16px; }
.door h3 { font-size: 1.6rem; margin-bottom: 10px; }
.door p { font-size: .97rem; }
.door ul { list-style: none; margin-top: 20px; }
.door li { font-size: .93rem; padding: 10px 0 10px 24px; position: relative;
  border-top: 1px solid var(--line); }
.door li::before { content: ""; position: absolute; left: 0; top: 19px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--mint); }
.go { display: inline-block; margin-top: 22px; font-weight: 650; color: var(--green); }

/* ---- cards / lists / tables ---- */
.grid { display: grid; gap: 20px; margin-top: 40px; }
/* grid-1 is generated when a section has only one card to show. */
.grid-1 { grid-template-columns: 1fr; max-width: 420px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; }
.card h3 { margin-bottom: 10px; font-size: 1.16rem; }
.card p { font-size: .95rem; }
.card .more { display: inline-block; margin-top: 14px; font-weight: 650; font-size: .93rem; }

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px;
  list-style: none; }
.flow-n { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: var(--mint); color: var(--ink); font-weight: 800; margin-bottom: 16px; }
.flow h4 { margin-bottom: 6px; }
.flow p { font-size: .93rem; }

.deflist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; margin-top: 36px; }
.deflist > div { padding: 22px 0; border-top: 1px solid var(--line); }
.deflist dt { font-weight: 700; color: var(--ink); margin-bottom: 5px; letter-spacing: -.015em; }
.deflist dd { font-size: .94rem; }

.plain-list { list-style: none; margin-top: 26px; }
.plain-list li { padding: 18px 0 18px 24px; border-top: 1px solid var(--line); position: relative;
  font-size: .98rem; }
.plain-list li::before { content: ""; position: absolute; left: 0; top: 27px; width: 8px;
  height: 8px; border-radius: 2px; background: var(--mint); }
.plain-list b { color: var(--ink); }

.compare { width: 100%; border-collapse: collapse; margin-top: 40px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.compare th, .compare td { padding: 15px 18px; text-align: left; border-top: 1px solid var(--line);
  font-size: .94rem; }
.compare thead th { background: var(--ink); color: #fff; border-top: 0; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.compare tbody th { font-weight: 650; color: var(--ink); width: 34%; }
.compare td { text-align: center; }
.compare .yes { color: var(--green); font-weight: 700; }
.compare .no { color: #9AA6B1; }
.compare .us { background: var(--green-wash); }
.compare thead .us { background: var(--green); }

.note { background: var(--green-wash); border-radius: 16px; padding: 26px 30px; margin-top: 32px; }
.note h3 { font-size: 1.1rem; margin-bottom: 10px; }
.note p { font-size: .95rem; }

/* ---- sign-up band ---- */
.signup { background: var(--ink); color: #AFBDCA; padding: 78px 0; }
.signup h2 { color: #fff; }
.signup .lede { color: #AFBDCA; }
.signup-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: start; }
.signup-points { list-style: none; margin-top: 24px; }
.signup-points li { padding: 11px 0 11px 24px; position: relative; font-size: .93rem;
  border-top: 1px solid rgba(255,255,255,.14); }
.signup-points li::before { content: ""; position: absolute; left: 0; top: 20px; width: 7px;
  height: 7px; border-radius: 50%; background: var(--mint); }
.signup a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.signup-form { background: #fff; border-radius: 16px; padding: 30px 32px; }
.signup-form label { display: block; margin-bottom: 15px; font-weight: 600; font-size: .92rem;
  color: var(--ink); }
.signup-form input[type=text], .signup-form input[type=email], .signup-form input[type=tel] {
  width: 100%; margin-top: 7px; padding: 13px 15px; font: inherit; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 9px; }
.signup-form input:focus { outline: none; border-color: var(--green); background: #fff; }
.signup-form .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.signup-form .f-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400;
  font-size: .9rem; color: var(--ink-2); margin: 4px 0 18px; }
.signup-form .f-check input { margin-top: 4px; flex: 0 0 auto; }
.signup-form .btn { width: 100%; }
.signup-form .f-note { margin-top: 15px; font-size: .8rem; color: var(--mute); line-height: 1.5; }
.signup-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- footer ---- */
.site-footer { background: var(--ink); color: #8B98A5; padding: 64px 0 32px; font-size: .9rem; }
.site-footer h4 { color: #fff; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 14px; }
.site-footer a { color: #C7D2DD; }
.site-footer .logo .word { color: #fff; }
.site-footer .logo .desc { color: #8B98A5; }
.foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.foot-cols ul { list-style: none; }
.foot-cols li { margin-bottom: 9px; }
.legal { margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13);
  font-size: .79rem; line-height: 1.65; color: #6E7B88; }
.legal strong { color: #AFBDCA; }

@media (max-width: 980px) {
  .hero .wrap, .dgrid, .grid-3, .grid-2, .deflist, .foot-cols,
  .signup-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
  .f1 { left: 8px; } .f2 { right: 8px; }
  .nav { display: none; }
  .nav.open { display: flex; position: absolute; top: 74px; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 28px 20px;
    border-bottom: 1px solid var(--line); }
  .nav.open a { padding: 12px 0; width: 100%; }
  .nav-toggle { display: block; }
}
@media (max-width: 620px) {
  .flow, .signup-form .f2 { grid-template-columns: 1fr; }
  .section { padding: 62px 0; }
  .compare thead { display: none; }
  .compare tbody th, .compare td { display: block; text-align: left; }
  .compare tbody th { border-top: 2px solid var(--line); padding-bottom: 2px; }
  .compare td { border-top: 0; padding-top: 2px; }
  .compare td::before { content: attr(data-label) " — "; color: #9AA6B1; font-weight: 650; }
}

/* ==========================================================================
   The funding matcher (assets/matcher.js)
   ========================================================================== */
.mx { background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(22,24,29,.08); overflow: hidden; }
.mx-head { padding: 28px 30px 0; }
.mx-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--green); margin-bottom: 10px; }
.mx-head h3 { font-size: 1.55rem; margin-bottom: 8px; }
.mx-head > p { font-size: .93rem; color: var(--mute); }
.mx-bar { height: 3px; background: var(--line); margin-top: 22px; }
.mx-bar span { display: block; height: 100%; background: var(--mint); width: 0; transition: width .35s ease; }
.mx-body { padding: 28px 30px 30px; }
.mx-step { animation: mxin .28s ease; }
@keyframes mxin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mx-step { animation: none; } }
.mx-q { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
  margin-bottom: 8px; line-height: 1.15; }
.mx-help { font-size: .93rem; color: var(--mute); margin-bottom: 20px; }
.mx-opts { display: grid; gap: 9px; }
.mx-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 15px 17px; font: inherit; font-weight: 600; color: var(--ink); transition: .15s; }
.mx-opt:hover { border-color: var(--mint); }
.mx-opt[aria-pressed="true"] { border-color: var(--mint); background: var(--green-wash); }
.mx-tick { flex: 0 0 19px; height: 19px; border: 1px solid var(--line); border-radius: 5px;
  display: grid; place-items: center; font-size: .68rem; color: transparent; background: #fff; }
.mx-opt[aria-pressed="true"] .mx-tick { background: var(--mint); border-color: var(--mint);
  color: var(--ink); }
.mx-money { position: relative; }
.mx-money span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; font-weight: 700; color: var(--mute); }
.mx-money input { width: 100%; padding: 16px 18px 16px 42px; font: inherit; font-size: 1.4rem;
  font-weight: 800; letter-spacing: -.03em; color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; }
.mx-money input:focus { outline: none; border-color: var(--mint); }
.mx-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.mx-back { background: none; border: 0; font: inherit; font-weight: 650; font-size: .92rem;
  color: var(--mute); cursor: pointer; padding: 8px 2px; }
.mx-back:hover { color: var(--green); }
.mx-res h3 { font-size: 1.7rem; margin-bottom: 10px; }
.mx-lede { color: var(--ink-2); margin-bottom: 24px; }
.mx-fit { border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; margin-bottom: 12px; }
.mx-fit.top { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(95,221,184,.18); }
.mx-fit-h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin-bottom: 10px; }
.mx-fit-h h4 { font-size: 1.2rem; }
.mx-tag { flex: 0 0 auto; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 999px; background: var(--paper-2);
  color: var(--ink-2); }
.mx-fit.top .mx-tag { background: var(--mint); color: var(--ink); }
.mx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mx-meta em { font-style: normal; font-size: .77rem; font-weight: 600; padding: 4px 11px;
  border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--mute); }
.mx-fit p { font-size: .94rem; margin-bottom: 10px; }
.mx-fit ul { margin: 0 0 12px 18px; font-size: .91rem; color: var(--ink-2); }
.mx-fit li { margin-bottom: 4px; }
.mx-why { font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 6px; }
.mx-warn { font-size: .92rem; background: var(--green-wash); border-radius: 9px; padding: 13px 15px;
  margin-top: 12px; }
.mx-more { margin-top: 12px; font-size: .92rem; font-weight: 650; }
.mx-stop h3 { font-size: 1.5rem; margin-bottom: 12px; }
.mx-stop p { font-size: .96rem; margin-bottom: 14px; }
.mx-alt { background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--mint);
  border-radius: 12px; padding: 22px 24px; margin: 20px 0; }
.mx-alt h4 { font-size: 1.15rem; margin-bottom: 8px; }
.mx-alt ul { margin: 0 0 16px 18px; font-size: .93rem; }
.mx-alt li { margin-bottom: 5px; }
.mx-src { font-size: .82rem; color: var(--mute); margin-top: 12px !important; }
.mx-form { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 26px; }
.mx-form h4 { font-size: 1.25rem; margin-bottom: 6px; }
.mx-formlede { font-size: .94rem; color: var(--ink-2); margin-bottom: 18px; }
.mx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.mx-form label span { display: block; font-size: .78rem; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.mx-form input[type=text], .mx-form input[type=email], .mx-form input[type=tel] {
  width: 100%; padding: 13px 15px; font: inherit; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 9px; color: var(--ink); }
.mx-form input:focus { outline: none; border-color: var(--mint); background: #fff; }
.mx-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin: 4px 0 18px; }
.mx-consent input { margin-top: 4px; flex: 0 0 auto; }
.mx-note { font-size: .82rem; color: var(--mute); margin-top: 15px; line-height: 1.55; }
@media (max-width: 640px) {
  .mx-head, .mx-body { padding-left: 22px; padding-right: 22px; }
  .mx-q { font-size: 1.25rem; }
  .mx-row { grid-template-columns: 1fr; }
  .mx-fit-h { flex-direction: column; gap: 6px; }
}

/* ==========================================================================
   Grant finder (assets/grants.js)
   ========================================================================== */
.gr-bar { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.gr-bar input, .gr-bar select { width: 100%; padding: 13px 15px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.gr-bar input:focus, .gr-bar select:focus { outline: none; border-color: var(--mint); }
.gr-count { font-size: .88rem; color: var(--mute); margin-bottom: 18px; }
.gr-none { padding: 30px 0; }

.gr-card { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 26px; margin-bottom: 14px; }
.gr-card.gr-closing_soon { border-left: 4px solid var(--mint); }
.gr-card.gr-closed { opacity: .62; }
.gr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.gr-tag { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.gr-closing_soon .gr-tag { background: var(--mint); color: var(--ink); }
.gr-funder { font-size: .84rem; color: var(--mute); }
.gr-when { margin-left: auto; font-size: .84rem; font-weight: 650; color: var(--green); }
.gr-card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.gr-card > p { font-size: .94rem; margin-bottom: 14px; }
.gr-meta { display: flex; flex-wrap: wrap; gap: 0 30px; margin-bottom: 12px; }
.gr-meta dt { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 2px; }
.gr-meta dd { font-size: .93rem; color: var(--ink); font-weight: 600; }
.gr-link { font-weight: 650; font-size: .92rem; }
.gr-attr { margin-top: 22px; font-size: .78rem; color: var(--mute); }

@media (max-width: 900px) { .gr-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gr-bar { grid-template-columns: 1fr; } .gr-when { margin-left: 0; } }

/* ---- utility bar ---------------------------------------------------------
   The audience split, above the main nav rather than inside it. Most visitors
   are business owners; partner firms are a minority who know what they came
   for, so they get a signpost rather than half the menu. */
.utility { background: var(--ink); color: #8B98A5; font-size: .82rem; }
.utility .wrap { display: flex; align-items: center; gap: 22px; height: 38px; }
.utility-label { font-weight: 650; color: #C7D2DD; letter-spacing: .01em; }
.utility nav { display: flex; gap: 20px; margin-left: auto; }
.utility a { color: #8B98A5; }
.utility a:hover, .utility a.active { color: #fff; text-decoration: none; }
@media (max-width: 780px) {
  .utility .wrap { height: auto; padding-top: 8px; padding-bottom: 8px; gap: 12px;
    flex-wrap: wrap; }
  .utility nav { margin-left: 0; gap: 14px; flex-wrap: wrap; }
  .utility-label { width: 100%; }
}

/* ---- image band -----------------------------------------------------------
   The site was text and boxes on every page below the hero. This is what fixes
   it: a photograph beside a short piece of argument, alternating side down the
   page so the pattern does not become its own monotony. */
.band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.band-img { border-radius: 18px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.band.flip .band-copy { order: -1; }
.band h2 { margin-bottom: 6px; }
.band .lede { margin-top: 12px; }
.band ul { list-style: none; margin-top: 22px; }
.band li { padding: 11px 0 11px 26px; position: relative; font-size: .96rem;
  border-top: 1px solid var(--line); }
.band li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px;
  height: 8px; border-radius: 50%; background: var(--mint); }
.band b { color: var(--ink); }
@media (max-width: 900px) {
  .band { grid-template-columns: 1fr; gap: 30px; }
  .band.flip .band-copy { order: 0; }
}

/* ==========================================================================
   The library — guides, articles, calculators.
   ========================================================================== */

/* --- index pages ------------------------------------------------------- */
.libnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 26px 0 6px; }
.libnav a {
  font-size: .93rem; font-weight: 600; color: var(--ink-2);
  padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff;
}
.libnav a:hover { text-decoration: none; border-color: var(--mint); }
.libnav a.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.lib-h {
  font-size: 1.3rem; margin: 60px 0 4px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.lib-sub { font-size: .97rem; max-width: 62ch; margin-bottom: 4px; }
.lib-grid { margin-top: 24px; }
.lib-grid .card { display: block; transition: border-color .15s, transform .15s; }
.lib-grid .card:hover { text-decoration: none; border-color: var(--mint); transform: translateY(-2px); }
.card-k {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 9px;
}

/* --- a guide or article ------------------------------------------------- */
.doc .doc h1 { margin-top: 6px; }
.doc-fine {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--mute);
}
.doc .btn-row { margin-top: 30px; }

.toc {
  margin: 40px 0 10px; padding: 26px 30px;
  background: var(--paper-2); border-radius: 16px;
}
.toc h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 0; list-style: none; }
.toc li a { display: inline-block; }
.toc li { font-size: .95rem; margin: 6px 0; }

.prose { margin-top: 40px; }
.prose h2 {
  font-size: 1.62rem; margin: 52px 0 16px; scroll-margin-top: 24px;
}
.prose > p { margin-bottom: 18px; }
.prose > p:first-child { font-size: 1.08rem; }
.prose b { color: var(--ink); font-weight: 700; }
.prose ul { margin: 4px 0 22px; padding-left: 22px; }
.prose ul li { margin-bottom: 11px; }
.prose .deflist { margin-top: 8px; }
.prose .note { margin: 30px 0; }

.prose ol.steps { margin: 8px 0 24px; padding-left: 0; counter-reset: s; list-style: none; }
.prose ol.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 20px 46px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.prose ol.steps li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.prose ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-wash); color: var(--green-dk);
  font-size: .84rem; font-weight: 800; display: grid; place-items: center;
}
.prose ol.steps li > b { display: block; color: var(--ink); font-size: 1.03rem; margin-bottom: 4px; }
.prose ol.steps li > p { font-size: .95rem; margin: 0; }

.prose blockquote.pull {
  margin: 34px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--mint);
  font-size: 1.2rem; line-height: 1.45; color: var(--ink);
  font-weight: 500; letter-spacing: -.015em;
}

.tbl-scroll { overflow-x: auto; margin: 26px 0; }
.dtable { border-collapse: collapse; width: 100%; font-size: .94rem; }
.dtable th, .dtable td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.dtable thead th { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--ink); }

.inline-calc {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 30px 0; padding: 20px 24px;
  background: var(--ink); border-radius: 14px;
}
.inline-calc:hover { text-decoration: none; }
.inline-calc .ic-k {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mint);
}
.inline-calc .ic-t { color: #fff; font-weight: 650; flex: 1; min-width: 200px; }
.inline-calc .ic-g { color: var(--mint); font-weight: 650; font-size: .93rem; }

/* --- the calculators ---------------------------------------------------- */
.cl { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-top: 44px; align-items: start; }
.cl-inputs { display: grid; gap: 22px; }
.cl-field { display: block; }
.cl-label { display: block; font-weight: 650; color: var(--ink); font-size: .97rem; margin-bottom: 7px; }
.cl-help { display: block; font-style: normal; font-weight: 400; font-size: .85rem; color: var(--mute); margin-top: 3px; }
.cl-input { position: relative; display: block; }
.cl-input input {
  width: 100%; font: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink);
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff; -moz-appearance: textfield;
}
.cl-input input:focus { outline: 2px solid var(--mint); outline-offset: -1px; border-color: var(--mint); }
.cl-money input { padding-left: 32px; }
.cl-input i, .cl-input u {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--mute); font-style: normal; text-decoration: none; font-weight: 600;
  pointer-events: none;
}
.cl-input i { left: 16px; }
.cl-input u { right: 16px; font-size: .9rem; }
.cl-input:has(u) input { padding-right: 62px; }

.cl-out { position: sticky; top: 24px; background: var(--paper-2); border-radius: 18px; padding: 30px; }
.cl-figures { display: grid; gap: 2px; }
.cl-fig {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.cl-fig:last-child { border-bottom: 0; }
.cl-fig span { font-size: .95rem; }
.cl-fig b { color: var(--ink); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; white-space: nowrap; }
.cl-fig.lead { padding-top: 0; }
.cl-fig.lead b { font-size: 2rem; letter-spacing: -.035em; }
.cl-note { font-size: .95rem; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.cl-fine { font-size: .82rem; color: var(--mute); margin-top: 14px; }
.cl-cta { margin-top: 22px; }
.cl-cta .btn { width: 100%; text-align: center; }
.cl-nojs { padding: 26px; background: var(--paper-2); border-radius: 14px; margin-top: 30px; }

@media (max-width: 860px) {
  .cl { grid-template-columns: 1fr; gap: 30px; }
  .cl-out { position: static; }
  .prose blockquote.pull { font-size: 1.08rem; }
}

/* Product cards on /business-funding — each one opens into the library. */
.pcard { display: flex; flex-direction: column; }
.pcard p { flex: 1; }
.pcard-go { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.pcard-go a {
  display: block; font-size: .9rem; font-weight: 650; padding: 5px 0 5px 17px;
  position: relative;
}
.pcard-go a::before {
  content: "\2192"; position: absolute; left: 0; color: var(--mint-hover); font-weight: 700;
}
.pcard-go a span { font-weight: 400; color: var(--mute); }

/* ---- Option C: Poppins for display, Lato for reading -------------------------
   Poppins is a geometric sans — lovely in a headline, wide and tiring across 30,000
   words of guides. Lato was drawn for body text and holds up at 17px. So Poppins takes
   the headings and the UI chrome, Lato takes everything you actually read.

   ⚠️ Lato ships 100/300/400/700/900 and has NO semibold. Anything that wants 500–650
   must be Poppins, or the browser rounds it to the nearest real Lato face. Global
   font-synthesis:none guarantees it never fakes one instead. */
h1, h2, h3, h4,
.btn, .nav a, .logo .desc, .card-k, .lib-h, .tabs a, .utility a,
.met b, .cl-fig b, .gr-tag, .card .more, .pcard-go a, .inline-calc .ic-k,
.inline-calc .ic-g, .toc h2, .site-footer h4, .signup-form .btn {
  font-family: Poppins, Lato, sans-serif;
}

/* ---- contact form -------------------------------------------------------
   The page had no form at all until 2 Sep 2026. Two columns on desktop, the
   form first so it is the thing you meet; stacked on mobile. */
.cgrid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 46px; margin-top: 38px;
  align-items: start; }
.cform { display: grid; gap: 16px; }
.cform .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: block; font-size: .92rem; font-weight: 650; color: var(--ink); }
.cform input, .cform select, .cform textarea {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400;
  color: var(--ink); padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff;
}
.cform textarea { resize: vertical; min-height: 96px; }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: 2px solid var(--mint); outline-offset: -1px; border-color: var(--mint); }
.cform .f-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400;
  font-size: .9rem; color: var(--ink-2); }
.cform .f-check input { width: 17px; height: 17px; margin-top: 2px; flex: none;
  accent-color: var(--green); }
.cform .btn { justify-self: start; }
.cform .f-note { font-size: .85rem; color: var(--mute); }
/* The honeypot: a real field, off-screen, that only a bot fills in. */
.cform .hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

.cside { background: var(--paper-2); border-radius: 16px; padding: 26px 28px; }
.cside h3 { font-size: 1.05rem; margin-bottom: 6px; }
.cside .cdl { grid-template-columns: 1fr; gap: 0; margin-top: 8px; }
.cside .cdl > div { padding: 14px 0; }
.cside .cdl > div:first-child { border-top: 0; }
.cside .note-inline { font-size: .88rem; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .cgrid { grid-template-columns: 1fr; gap: 28px; }
  .cform .f2 { grid-template-columns: 1fr; }
}

/* An h2 that follows body content needs air above it. `.prose h2` already handles this
   inside guides and articles, but a page that writes its sections straight into .wrap
   (About, and anything like it) had headings jammed against the paragraph above. Only
   applies after real content, so a section that OPENS with a heading is untouched. */
.wrap > p + h2, .wrap > .lede + h2, .wrap > ul + h2,
.wrap > dl + h2, .wrap > .deflist + h2, .wrap > .note + h2 { margin-top: 50px; }
.wrap > h2 + p, .wrap > h2 + .lede { margin-top: 10px; }

/* ==========================================================================
   Buzz Financial Services additions.

   Everything above is the shared Buzz Money vocabulary. What follows exists
   because an advice site has shapes a funding site does not: long disclosure
   lists of questions, a page that has to state statutory figures, and a named
   adviser who should appear as a person rather than a card.
   ========================================================================== */

/* ---- FAQ / disclosure list ----------------------------------------------
   Native <details> so it works with no JavaScript and is keyboard- and
   screen-reader-correct for free. The marker is drawn rather than inherited
   because the platform triangle differs on every browser. */
.faq { margin-top: 34px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; gap: 18px;
  align-items: flex-start; padding: 20px 0; font-family: Poppins, Lato, sans-serif;
  font-weight: 600; font-size: 1.04rem; color: var(--ink); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; margin-left: auto; flex: 0 0 11px; width: 11px;
  height: 11px; margin-top: 7px; border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green); transform: rotate(45deg);
  transition: transform .18s; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--green-dk); }
.faq .a { padding: 0 40px 24px 0; font-size: .99rem; }
.faq .a p + p { margin-top: .9em; }
.faq .a ul { margin: 12px 0 0 20px; }
.faq .a li { margin-bottom: 8px; font-size: .97rem; }

/* ---- figure band ---------------------------------------------------------
   Statutory numbers — the nil rate band, the 40% rate, the ISA allowance —
   read badly inside a paragraph and are the thing people came to check. Set
   them large, with the label under rather than over. */
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figs > div { padding: 28px 26px 28px 0; border-right: 1px solid var(--line); }
.figs > div:last-child { border-right: 0; }
.figs b { display: block; font-family: Poppins, Lato, sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.04em; color: var(--ink);
  line-height: 1; margin-bottom: 9px; }
.figs span { display: block; font-size: .91rem; color: var(--ink-2); }
.figs-src { font-size: .82rem; color: var(--mute); margin-top: 14px; }
@media (max-width: 860px) { .figs { grid-template-columns: 1fr 1fr; }
  .figs > div:nth-child(2n) { border-right: 0; }
  .figs > div { padding-right: 20px; } }
@media (max-width: 520px) { .figs { grid-template-columns: 1fr; }
  .figs > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .figs > div:last-child { border-bottom: 0; } }

/* ---- the advisers -------------------------------------------------------
   Two person-cards side by side, each spanning half the container, so the row
   is full and the pair share the same edges as every other grid on the site.
   The portrait sits inside the card rather than being the card, which keeps a
   headshot at headshot size instead of half a page wide. */
.advisers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-top: 32px; }
.adviser { display: grid; grid-template-columns: 132px 1fr; gap: 24px;
  align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 24px 26px; }
.adviser img { width: 132px; aspect-ratio: 5/6; object-fit: cover;
  object-position: top center; border-radius: 12px 12px 12px 34px;
  background: var(--paper-2); }
.adviser:nth-child(2) img { border-radius: 12px 12px 34px 12px; }
.adviser h3 { font-size: 1.28rem; }
.adviser .role { font-family: Poppins, Lato, sans-serif; font-weight: 600;
  color: var(--green); font-size: .93rem; margin-top: 4px; }
@media (max-width: 860px) { .advisers { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .adviser { grid-template-columns: 1fr; gap: 16px; }
  .adviser img { width: 132px; } }

/* ---- service rail --------------------------------------------------------
   The services index. A rail of rows rather than a grid of equal cards, so the
   page does not screenshot the same as every other page on the site. */
.rail { margin-top: 38px; border-top: 1px solid var(--line); }
.rail a { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 34px;
  align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line);
  color: inherit; transition: .15s; }
.rail a:hover { text-decoration: none; background: var(--green-wash); padding-left: 18px;
  padding-right: 18px; }
.rail h3 { font-size: 1.22rem; }
.rail p { font-size: .97rem; }
.rail .go { margin-top: 0; white-space: nowrap; font-size: .93rem; }
@media (max-width: 820px) { .rail a { grid-template-columns: 1fr; gap: 8px; }
  .rail .go { margin-top: 6px; } }

/* ---- a page's opening argument ------------------------------------------
   Two columns of prose under the h1 on the long pages, which stops a 90-word
   introduction running as one grey slab the width of the screen. */
.opener { margin-top: 22px; font-size: 1.05rem; max-width: 62ch; }
.opener p + p { margin-top: 1em; }
@media (max-width: 820px) { .opener { font-size: 1.02rem; } }

/* ---- risk warning --------------------------------------------------------
   Required wording, set as ordinary text. Not bolded, not boxed in a warning
   colour — it is a disclosure, not a warning about ourselves. */
.risk { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--mute); max-width: 86ch; }

/* ---- hero cards, the awkward middle width -------------------------------
   Between 980px (where .hero stacks) and about 1180px the two floating cards
   are wide enough to sit on top of each other, so the first one's text
   disappears behind the second. Pull them inside the photo and drop the second
   one lower through that range. */
@media (min-width: 981px) and (max-width: 1180px) {
  .fcard { width: 250px; }
  .f1 { left: -18px; top: 34px; }
  .f2 { right: -14px; bottom: 26px; width: 260px; }
}

/* ---- hero cards on a phone ----------------------------------------------
   Below 980px the photo is only ~210px tall, and two absolutely positioned
   cards both land on it — the first ends up completely hidden behind the
   second. Take them out of the flow's overlay entirely and stack them under
   the photo, where both are readable. */
@media (max-width: 980px) {
  .shot { padding-bottom: 0; }
  .fcard { position: static; width: auto; margin-top: 12px; box-shadow: none; }
  .f1, .f2 { left: auto; right: auto; top: auto; bottom: auto; width: auto; }
}

/* ---- wordmark, with the full trading name -------------------------------
   "BUZZ financial services" is half again as long as "BUZZ money", so it needs
   to come down a size to leave the nav its room, and the descriptor needs its
   tracking eased or it out-measures the name above it. */
.logo .word { font-size: 1.44rem; }
.logo .desc { font-size: .5rem; letter-spacing: .235em; }
@media (max-width: 1100px) {
  .logo .word { font-size: 1.28rem; }
  .logo .desc { font-size: .46rem; letter-spacing: .2em; }
  .site-header .wrap { gap: 18px; }
  .nav { gap: 18px; }
}

/* ==========================================================================
   ONE MEASURE PER PAGE.

   🚨 This is the fix for "the layout is a mess, columns are random" (Andy,
   20 Sep 2026). The cause was mixing .wrap-mid (960) and plain .wrap (1200)
   from section to section down the same page: /pensions ran 960, 960, 1200,
   1200, 960, so the right-hand edge jumped twice as you scrolled and the
   column count went 2, 4, 2, 2 with it.

   Every section now uses the full 1200 container, so every wide block — the
   stat band, the definition lists, the card grids, the rail, the photo bands,
   the FAQ — starts and ends on exactly the same two lines all the way down.
   Running text is capped for readability instead, which keeps the LEFT edge
   shared without letting a paragraph run 1200px wide.

   .wrap-narrow survives for the four legal pages only, where the whole page
   is prose and the measure therefore never changes mid-page.
   ========================================================================== */

/* Running text: capped, never centred, always on the container's left edge. */
.section > .wrap > p,
.section > .wrap > .lede,
.section > .wrap > h1,
.section > .wrap > h2 { max-width: 62ch; }
.section > .wrap > h1,
.section > .wrap > h2 { max-width: 30ch; }
.section > .wrap > .risk,
.section > .wrap > .figs-src { max-width: 86ch; }

/* Two columns of opening argument, held to the same measure as the rest. */
.opener { max-width: 62ch; }

/* The FAQ answer needs a reading measure even though the row spans the grid. */
.faq .a { max-width: 78ch; }

/* A note or a callout is furniture, so it keeps the container's width rather
   than sitting at the paragraph measure and looking indented. */
.section > .wrap > .note { max-width: 980px; }

/* The legal pages: one narrow measure, applied to every child, top to bottom. */
.wrap-narrow > h1, .wrap-narrow > h2, .wrap-narrow > p { max-width: 100%; }

/* ==========================================================================
   THE EDITORIAL GRID — the fix for "feels thin and loose" (Andy, 20 Sep 2026).

   Capping running text at 62ch to stop the widths jumping left the right-hand
   third of every text section empty: on /pensions a 968px container held an
   881px heading, a 650px lede and a 604px paragraph, then 168px of air before
   the next section did the same. Narrow column on the left, nothing on the
   right, big gap, repeat.

   So the heading now moves into its own narrow column and the prose sits
   beside it. The reading measure is unchanged — the page is simply using the
   width it already had. Wide furniture (stat bands, grids, rails, photo bands,
   definition lists, FAQs) still spans both columns, so the outer edges stay
   identical down the page, which was the previous fix and still holds.
   ========================================================================== */

.section > .wrap {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  column-gap: 60px;
  align-content: start;
}
/* Everything lands in the reading column by default … */
.section > .wrap > * { grid-column: 2; }
/* … the section heading sits opposite it … */
.section > .wrap > h1,
.section > .wrap > h2 { grid-column: 1; grid-row: span 99; align-self: start; }
/* … and anything wide spans the pair. */
.section > .wrap > .figs,
.section > .wrap > .rail,
.section > .wrap > .band,
.section > .wrap > .grid,
.section > .wrap > .faq,
.section > .wrap > .flow,
.section > .wrap > .deflist,
.section > .wrap > .plain-list,
.section > .wrap > .advisers,
.section > .wrap > .compare,
.section > .wrap > .cgrid,
.section > .wrap > .btn-row,
.section > .wrap > .figs-src,
.section > .wrap > .risk,
.section > .wrap > #calc { grid-column: 1 / -1; }

/* The heading column is narrow, so the cap that stopped it running 1200px
   wide is no longer doing anything useful and only forces early wraps. */
.section > .wrap > h1,
.section > .wrap > h2 { max-width: none; }
.section > .wrap > h1 { font-size: clamp(2.1rem, 3.4vw, 2.9rem); }
.section > .wrap > h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }

/* Prose fills its column rather than being capped again inside it. */
.section > .wrap > p,
.section > .wrap > .lede,
.section > .wrap > .opener,
.section > .wrap > .note,
.section > .wrap > .risk,
.section > .wrap > .figs-src { max-width: none; }
.opener { max-width: none; }

/* Tighter vertical rhythm. 84px top and bottom put 168px between one
   section's last line and the next one's heading. */
.section { padding: 62px 0; }
.deflist > div { padding: 18px 0; }
.plain-list li { padding: 14px 0 14px 24px; }
.plain-list li::before { top: 23px; }
.faq summary { padding: 17px 0; }
.grid { gap: 18px; margin-top: 30px; }
.card { padding: 26px 24px; }
.flow { margin-top: 34px; }
.figs { margin-top: 30px; }

@media (max-width: 900px) {
  .section > .wrap { grid-template-columns: 1fr; }
  .section > .wrap > *,
  .section > .wrap > h1,
  .section > .wrap > h2 { grid-column: 1; grid-row: auto; }
  .section > .wrap > h2 { margin-bottom: 4px; }
}

/* A section whose body is nothing but wide furniture — a heading and a FAQ, a
   heading and a card grid — gains nothing from the two-column arrangement.
   There is no prose to sit opposite the heading, so it just squeezes the
   heading into 286px with an empty space beside it. Those sections run the
   heading full width above their content instead. */
.section > .wrap:not(:has(> p)):not(:has(> .lede)):not(:has(> .opener)) {
  grid-template-columns: minmax(0, 1fr);
}
.section > .wrap:not(:has(> p)):not(:has(> .lede)):not(:has(> .opener)) > * {
  grid-column: 1;
}
.section > .wrap:not(:has(> p)):not(:has(> .lede)):not(:has(> .opener)) > h1,
.section > .wrap:not(:has(> p)):not(:has(> .lede)):not(:has(> .opener)) > h2 {
  grid-row: auto; margin-bottom: 6px; max-width: 26ch;
}

/* 🚨 The editorial grid assumes ONE heading per section. The legal pages are a
   long run of h2 + paragraphs inside a single section, and with every heading
   placed in column 1 spanning rows they stacked against each other: "Scope of
   service" ended up beside the paragraph belonging to "Regulatory status".
   So a wrap with more than one heading — and the narrow legal measure, which
   has no room for a second column anyway — stays single column. */
.section > .wrap.wrap-narrow,
.section > .wrap:has(> h2 ~ h2),
.section > .wrap:has(> h1 ~ h2) { grid-template-columns: minmax(0, 1fr); }
.section > .wrap.wrap-narrow > *,
.section > .wrap:has(> h2 ~ h2) > *,
.section > .wrap:has(> h1 ~ h2) > * { grid-column: 1; }
.section > .wrap.wrap-narrow > h1,
.section > .wrap.wrap-narrow > h2,
.section > .wrap:has(> h2 ~ h2) > h1,
.section > .wrap:has(> h2 ~ h2) > h2,
.section > .wrap:has(> h1 ~ h2) > h1,
.section > .wrap:has(> h1 ~ h2) > h2 {
  grid-row: auto; max-width: 30ch; margin-top: 34px; margin-bottom: 8px;
}
.section > .wrap.wrap-narrow > h1:first-child,
.section > .wrap:has(> h2 ~ h2) > h1:first-child,
.section > .wrap:has(> h2 ~ h2) > h2:first-child { margin-top: 0; }

/* The hero's second floating card sits at right:-40px, so between about
   1200px and 1240px — where .wrap has hit its max width and has no margin
   left to bleed into — it pushed a few pixels past the viewport and put a
   horizontal scrollbar on the homepage. Pulled in, with overflow-x: clip as
   the backstop. `clip` rather than `hidden` so the sticky header still
   sticks. */
.f2 { right: -22px; }
html { overflow-x: clip; }

/* A button's label must never be able to set the page's minimum width. */
.btn { overflow-wrap: anywhere; }

/* The header carries a two-line wordmark, four nav items and a button. Below the
   desktop breakpoint that is tight enough that the nav needs its own tightening
   before the mobile menu takes over at 980px. */
@media (min-width: 981px) and (max-width: 1140px) {
  .nav { gap: 16px; font-size: .88rem; }
  .nav .btn { padding: 12px 18px; font-size: .9rem; }
  .site-header .wrap { gap: 14px; }
}

/* ---- hero photo and its cards -------------------------------------------
   🚨 The two floating cards were covering 51% of the photograph (measured,
   20 Sep 2026) — Andy: "the cards over the hero image hide most of the
   image". Two changes rather than one:

   · the photo is taller, so there is more of it than two cards can cover;
   · the cards are narrower and separated top-left / bottom-right, so the
     middle of the frame — where the people are — stays clear, and each card
     hangs half off the edge rather than sitting on top of the picture.

   Anything that reduces the height here puts the problem straight back. */
.shot img { aspect-ratio: 5/6; object-fit: cover; object-position: 50% 32%; }
.fcard { width: 236px; }
.f1 { left: -64px; top: 42px; }
.f2 { right: -64px; bottom: 48px; width: 236px; }

/* The wrap is capped at 1200px, so the page margin either side is
   (100vw - 1200) / 2. A card hanging 64px off the edge only fits once that
   margin is at least 64px, which is a viewport of 1328px. Below that the card
   would be clipped by the overflow guard, so it is held inside instead.
   ⚠️ If --max changes, this breakpoint has to change with it. */
@media (min-width: 981px) and (max-width: 1327px) {
  .fcard { width: 210px; }
  .f1 { left: -30px; top: 34px; }
  .f2 { right: -8px; bottom: 40px; width: 210px; }
}

/* The calculator is a two-column object in its own right (inputs beside the
   result), so squeezing it into the editorial grid's reading column left both
   of its halves too narrow to use. It spans the container instead. */
#calc { grid-column: 1 / -1; }
#calc .cl { margin-top: 28px; }

/* ==========================================================================
   SERVICE CARDS — replacing the rail.

   🚨 "What we advise on — I hate lists like this" (Andy, 20 Sep 2026). The
   services were a rail: ten identical rows of title | description | link,
   stacked down the page. Now they are grouped three to a row with an icon
   each, so every row is full and the page has a shape instead of a queue.
   Do not put the ten-row list back.
   ========================================================================== */

.svc-group + .svc-group { margin-top: 48px; }
/* ⚠️ A real heading, not spaced small caps. The first cut of this was .78rem
   uppercase with .15em tracking, which is the eyebrow treatment Andy has had
   removed from every Buzz site — it does not become acceptable by sitting
   above cards instead of above a heading. */
.svc-group > h3 { font-size: 1.3rem; color: var(--ink); letter-spacing: -.02em;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }

.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svc a { display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px;
  color: inherit; transition: .16s; }
.svc a:hover { text-decoration: none; border-color: var(--mint);
  box-shadow: 0 14px 34px rgba(22, 24, 29, .09); transform: translateY(-2px); }
.svc img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 16px; }
.svc h4 { font-size: 1.12rem; letter-spacing: -.02em; margin-bottom: 8px;
  line-height: 1.25; }
.svc p { font-size: .94rem; flex: 1; }
.svc .go { margin-top: 16px; font-size: .92rem; font-weight: 650; color: var(--green); }

@media (max-width: 900px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc { grid-template-columns: 1fr; } }

/* The groups span the editorial grid like any other wide furniture. */
.section > .wrap > .svc-group { grid-column: 1 / -1; }

/* ---- header fit ---------------------------------------------------------
   "What we advise on" is the nav label Andy wants, and with five items plus
   the button it leaves the bar about 20px short at 1024. The logo was losing
   that fight and wrapping onto two lines, which is the one thing in the
   header that must not move — so the wordmark is pinned and the nav gives up
   the space instead. */
.logo { flex: 0 0 auto; }
.logo .word { white-space: nowrap; }
.site-header .wrap { flex-wrap: nowrap; }

@media (min-width: 981px) and (max-width: 1140px) {
  .nav { gap: 13px; font-size: .85rem; }
  .nav .btn { padding: 11px 15px; font-size: .86rem; }
  .site-header .wrap { gap: 12px; }
}

/* ==========================================================================
   THE HERO.

   🚨 Rebuilt 20 Sep 2026. It was a boxed photograph with two "insight" cards
   floating over it; the cards covered half the picture and Andy asked for them
   gone and for "a proper hero section". So:

   · the photograph bleeds off the right edge of the SCREEN, not the container,
     and runs the full height of the section — a hero rather than a picture in
     a box;
   · the copy sits on the light ground beside it, never on top of it, so no
     scrim is needed and nothing has to be dark to stay legible;
   · a short fade covers the seam so the photo does not cut hard against the
     ground.

   Nothing goes back on top of the image.
   ========================================================================== */

.hero { position: relative; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%); }

.hero .wrap { display: block; }
.hero-copy { position: relative; z-index: 2; max-width: 33rem;
  padding: 92px 0 96px; }
.hero-copy h1 { margin-bottom: 18px; }
.hero-copy .lede { font-size: 1.15rem; max-width: 30rem; margin-bottom: 4px; }

.hero-photo { position: absolute; inset: 0 0 0 51%; z-index: 1; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover;
  object-position: 55% 28%; border-radius: 0; }
/* The seam. A hard vertical edge between a photograph and a flat ground reads
   as a mistake; 120px of the ground colour fading out reads as deliberate. */
.hero-photo::before { content: ""; position: absolute; inset: 0 auto 0 0;
  width: 130px; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%); }

@media (max-width: 1080px) { .hero-photo { inset: 0 0 0 56%; } }

@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column-reverse; }
  .hero-photo { position: relative; inset: auto; width: 100%; height: 300px; }
  .hero-photo::before { display: none; }
  .hero-copy { max-width: none; padding: 46px 0 52px; }
  .hero-copy .lede { max-width: none; }
}

/* A heading in the left column sits against a paragraph in the right one. The
   paragraph carries about 5px of half-leading above its first line and the
   heading almost none, so without a correction the heading reads as sitting
   low against the text beside it. Pulled up to align the cap heights. */
@media (min-width: 901px) {
  .section > .wrap > h1,
  .section > .wrap > h2 { margin-top: -.3em; }
  .section > .wrap:has(> h2 ~ h2) > h1,
  .section > .wrap:has(> h2 ~ h2) > h2,
  .section > .wrap:has(> h1 ~ h2) > h1,
  .section > .wrap:has(> h1 ~ h2) > h2,
  .section > .wrap.wrap-narrow > h1,
  .section > .wrap.wrap-narrow > h2,
  .section > .wrap:not(:has(> p)):not(:has(> .lede)):not(:has(> .opener)) > h1,
  .section > .wrap:not(:has(> p)):not(:has(> .lede)):not(:has(> .opener)) > h2 {
    margin-top: 0;
  }
  .section > .wrap:has(> h2 ~ h2) > h2 ~ h2,
  .section > .wrap:has(> h1 ~ h2) > h2 { margin-top: 34px; }
}

/* ==========================================================================
   PHOTO SPLIT — every in-page photograph, full section height.

   🚨 Andy, 20 Sep 2026: "Make all images we use full height they don't look
   right plonked on a section." They were boxed images sitting inside the
   container beside some text. Now the photograph is positioned against the
   SECTION, so it runs the full height of it and bleeds off the edge of the
   screen — the same treatment as the hero. The copy sits on the flat ground
   on the other side, never over the picture.

   .flip puts the photograph on the left. Do not put an image back inside the
   container.
   ========================================================================== */

.photo-split { position: relative; overflow: hidden; padding: 0; }
.photo-split .wrap { display: block; }
.photo-split .band-copy { position: relative; z-index: 2; max-width: 32rem;
  padding: 84px 0 88px; }
.photo-split .band-copy h2 { margin-bottom: 14px; max-width: none; }
.photo-split .band-copy p { max-width: none; }

.photo-half { position: absolute; top: 0; bottom: 0; z-index: 1; }
.photo-half img { width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 38%; border-radius: 0; }

/* image right, copy left */
.photo-split .photo-half { left: 52%; right: 0; }
.photo-split .photo-half::before { content: ""; position: absolute; inset: 0 auto 0 0;
  width: 120px; }
/* image left, copy right */
.photo-split.flip .photo-half { left: 0; right: 52%; }
.photo-split.flip .band-copy { margin-left: auto; }
.photo-split.flip .photo-half::before { inset: 0 0 0 auto; }

/* The seam fade takes the section's own ground colour, so it works on both
   the white and the tinted sections without a second rule per side. */
.photo-split .photo-half::before {
  background: linear-gradient(90deg, var(--paper) 0%, rgba(255,255,255,0) 100%); }
.photo-split.alt .photo-half::before {
  background: linear-gradient(90deg, var(--paper-2) 0%, rgba(246,248,250,0) 100%); }
.photo-split.flip .photo-half::before {
  background: linear-gradient(270deg, var(--paper) 0%, rgba(255,255,255,0) 100%); }
.photo-split.flip.alt .photo-half::before {
  background: linear-gradient(270deg, var(--paper-2) 0%, rgba(246,248,250,0) 100%); }

@media (max-width: 1080px) {
  .photo-split .photo-half { left: 57%; }
  .photo-split.flip .photo-half { right: 57%; }
}

@media (max-width: 900px) {
  .photo-split { display: flex; flex-direction: column-reverse; }
  .photo-split.flip { flex-direction: column-reverse; }
  .photo-half { position: relative; top: auto; bottom: auto; left: auto !important;
    right: auto !important; width: 100%; height: 280px; }
  .photo-half::before { display: none; }
  .photo-split .band-copy { max-width: none; margin-left: 0; padding: 44px 0 50px; }
}

/* The home page's summary of the three groups: each card lists what is in it. */
.svc-list { list-style: none; margin-top: 14px; }
.svc-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: .97rem; }
.svc-list li:first-child { border-top: 0; padding-top: 4px; }
.svc-list a { font-weight: 600; }

/* Two-up cards, for question-and-answer listings where the heading is a whole
   question and needs the width. */
.svc.svc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc.svc-2 h4 { font-size: 1.16rem; }
@media (max-width: 760px) { .svc.svc-2 { grid-template-columns: 1fr; } }

/* 🚨 All the opening paragraphs are the same size. The first one used to be set
   larger, which stacked two type sizes in one block — Andy, 20 Sep 2026:
   "Different size fonts looks shit." */
.opener { font-size: 1.06rem; line-height: 1.6; }

/* An inner page's hero. Shorter than the home page's, because it carries a heading
   and a paragraph or two instead of a headline, a lede and two buttons. */
.page-hero .hero-copy { padding: 68px 0 72px; max-width: 32rem; }
.page-hero .hero-copy h1 { margin-bottom: 14px; }
.page-hero .hero-copy .opener { max-width: none; }
@media (max-width: 900px) { .page-hero .hero-copy { padding: 40px 0 46px; max-width: none; } }

/* ==========================================================================
   THE JOURNEY — the six steps on /how-we-work.

   🚨 Second attempt. The first was a grid of cards, which read as a grid. The
   second was a left-aligned list with numbers down the side, and Andy's answer
   was "listing the 6 steps isn't a journey make it more visual".

   So: a centre spine with the steps alternating either side of it, each one a
   card with a numbered marker sitting ON the spine, and the two free steps
   flagged in the marker itself. It reads as a route because it looks like one.
   Do not flatten it back into a list.
   ========================================================================== */

.journey { list-style: none; margin: 46px 0 0; padding: 0; position: relative; }
.journey::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--mint) 0%, var(--line) 100%); }

.journey > li { position: relative; width: 50%; padding: 0 56px 34px 0; }
.journey > li:nth-child(even) { margin-left: 50%; padding: 0 0 34px 56px; }
.journey > li:last-child { padding-bottom: 0; }

.journey .step { background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 26px; }
.journey > li:nth-child(odd) .step { text-align: right; }

/* the marker sits on the spine, not beside the card */
.journey .n { position: absolute; top: 20px; width: 46px; height: 46px;
  border-radius: 50%; display: grid; place-items: center;
  font-family: Poppins, Lato, sans-serif; font-weight: 700; font-size: 1rem;
  background: var(--mint); color: var(--ink);
  box-shadow: 0 0 0 7px var(--paper-2); }
.journey > li:nth-child(odd) .n { right: -23px; }
.journey > li:nth-child(even) .n { left: -23px; }
.journey > li:nth-child(n+4) .n { background: var(--ink); color: #fff; }

.journey h3 { font-size: 1.2rem; margin-bottom: 6px; }
.journey p { font-size: .98rem; }
.journey .free { display: block; margin-top: 10px; font-size: .84rem; font-weight: 700;
  color: var(--green); }

/* the key under it, so the two colours mean something */
.journey-key { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px;
  font-size: .88rem; color: var(--ink-2); }
.journey-key span { display: flex; align-items: center; gap: 9px; }
.journey-key i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.journey-key .k-free { background: var(--mint); }
.journey-key .k-paid { background: var(--ink); }

.section > .wrap > .journey,
.section > .wrap > .journey-key { grid-column: 1 / -1; }

@media (max-width: 820px) {
  .journey::before { left: 23px; margin-left: 0; }
  .journey > li,
  .journey > li:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 26px 62px; }
  .journey > li:nth-child(odd) .step { text-align: left; }
  .journey > li:nth-child(odd) .n,
  .journey > li:nth-child(even) .n { left: 0; right: auto; width: 46px; }
}

/* ---- header fit ---------------------------------------------------------
   "What we advise on" is the nav label Andy wants, and with five items plus
   the button it leaves the bar about 20px short at 1024. The logo was losing
   that fight and wrapping onto two lines, which is the one thing in the
   header that must not move — so the wordmark is pinned and the nav gives up
   the space instead. */
.logo { flex: 0 0 auto; }
.logo .word { white-space: nowrap; }
.site-header .wrap { flex-wrap: nowrap; }

@media (min-width: 981px) and (max-width: 1140px) {
  .nav { gap: 13px; font-size: .85rem; }
  .nav .btn { padding: 11px 15px; font-size: .86rem; }
  .site-header .wrap { gap: 12px; }
}

/* ==========================================================================
   THE HERO.

   🚨 Rebuilt 20 Sep 2026. It was a boxed photograph with two "insight" cards
   floating over it; the cards covered half the picture and Andy asked for them
   gone and for "a proper hero section". So:

   · the photograph bleeds off the right edge of the SCREEN, not the container,
     and runs the full height of the section — a hero rather than a picture in
     a box;
   · the copy sits on the light ground beside it, never on top of it, so no
     scrim is needed and nothing has to be dark to stay legible;
   · a short fade covers the seam so the photo does not cut hard against the
     ground.

   Nothing goes back on top of the image.
   ========================================================================== */

.hero { position: relative; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%); }

.hero .wrap { display: block; }
.hero-copy { position: relative; z-index: 2; max-width: 33rem;
  padding: 92px 0 96px; }
.hero-copy h1 { margin-bottom: 18px; }
.hero-copy .lede { font-size: 1.15rem; max-width: 30rem; margin-bottom: 4px; }

.hero-photo { position: absolute; inset: 0 0 0 51%; z-index: 1; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover;
  object-position: 55% 28%; border-radius: 0; }
/* The seam. A hard vertical edge between a photograph and a flat ground reads
   as a mistake; 120px of the ground colour fading out reads as deliberate. */
.hero-photo::before { content: ""; position: absolute; inset: 0 auto 0 0;
  width: 130px; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%); }

@media (max-width: 1080px) { .hero-photo { inset: 0 0 0 56%; } }

@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column-reverse; }
  .hero-photo { position: relative; inset: auto; width: 100%; height: 300px; }
  .hero-photo::before { display: none; }
  .hero-copy { max-width: none; padding: 46px 0 52px; }
  .hero-copy .lede { max-width: none; }
}

/* A heading in the left column sits against a paragraph in the right one. The
   paragraph carries about 5px of half-leading above its first line and the
   heading almost none, so without a correction the heading reads as sitting
   low against the text beside it. Pulled up to align the cap heights. */
@media (min-width: 901px) {
  .section > .wrap > h1,
  .section > .wrap > h2 { margin-top: -.3em; }
  .section > .wrap:has(> h2 ~ h2) > h1,
  .section > .wrap:has(> h2 ~ h2) > h2,
  .section > .wrap:has(> h1 ~ h2) > h1,
  .section > .wrap:has(> h1 ~ h2) > h2,
  .section > .wrap.wrap-narrow > h1,
  .section > .wrap.wrap-narrow > h2,
  .section > .wrap:not(:has(> p)):not(:has(> .lede)):not(:has(> .opener)) > h1,
  .section > .wrap:not(:has(> p)):not(:has(> .lede)):not(:has(> .opener)) > h2 {
    margin-top: 0;
  }
  .section > .wrap:has(> h2 ~ h2) > h2 ~ h2,
  .section > .wrap:has(> h1 ~ h2) > h2 { margin-top: 34px; }
}

/* ==========================================================================
   PHOTO SPLIT — every in-page photograph, full section height.

   🚨 Andy, 20 Sep 2026: "Make all images we use full height they don't look
   right plonked on a section." They were boxed images sitting inside the
   container beside some text. Now the photograph is positioned against the
   SECTION, so it runs the full height of it and bleeds off the edge of the
   screen — the same treatment as the hero. The copy sits on the flat ground
   on the other side, never over the picture.

   .flip puts the photograph on the left. Do not put an image back inside the
   container.
   ========================================================================== */

.photo-split { position: relative; overflow: hidden; padding: 0; }
.photo-split .wrap { display: block; }
.photo-split .band-copy { position: relative; z-index: 2; max-width: 32rem;
  padding: 84px 0 88px; }
.photo-split .band-copy h2 { margin-bottom: 14px; max-width: none; }
.photo-split .band-copy p { max-width: none; }

.photo-half { position: absolute; top: 0; bottom: 0; z-index: 1; }
.photo-half img { width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 38%; border-radius: 0; }

/* image right, copy left */
.photo-split .photo-half { left: 52%; right: 0; }
.photo-split .photo-half::before { content: ""; position: absolute; inset: 0 auto 0 0;
  width: 120px; }
/* image left, copy right */
.photo-split.flip .photo-half { left: 0; right: 52%; }
.photo-split.flip .band-copy { margin-left: auto; }
.photo-split.flip .photo-half::before { inset: 0 0 0 auto; }

/* The seam fade takes the section's own ground colour, so it works on both
   the white and the tinted sections without a second rule per side. */
.photo-split .photo-half::before {
  background: linear-gradient(90deg, var(--paper) 0%, rgba(255,255,255,0) 100%); }
.photo-split.alt .photo-half::before {
  background: linear-gradient(90deg, var(--paper-2) 0%, rgba(246,248,250,0) 100%); }
.photo-split.flip .photo-half::before {
  background: linear-gradient(270deg, var(--paper) 0%, rgba(255,255,255,0) 100%); }
.photo-split.flip.alt .photo-half::before {
  background: linear-gradient(270deg, var(--paper-2) 0%, rgba(246,248,250,0) 100%); }

@media (max-width: 1080px) {
  .photo-split .photo-half { left: 57%; }
  .photo-split.flip .photo-half { right: 57%; }
}

@media (max-width: 900px) {
  .photo-split { display: flex; flex-direction: column-reverse; }
  .photo-split.flip { flex-direction: column-reverse; }
  .photo-half { position: relative; top: auto; bottom: auto; left: auto !important;
    right: auto !important; width: 100%; height: 280px; }
  .photo-half::before { display: none; }
  .photo-split .band-copy { max-width: none; margin-left: 0; padding: 44px 0 50px; }
}

/* The home page's summary of the three groups: each card lists what is in it. */
.svc-list { list-style: none; margin-top: 14px; }
.svc-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: .97rem; }
.svc-list li:first-child { border-top: 0; padding-top: 4px; }
.svc-list a { font-weight: 600; }

/* Two-up cards, for question-and-answer listings where the heading is a whole
   question and needs the width. */
.svc.svc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc.svc-2 h4 { font-size: 1.16rem; }
@media (max-width: 760px) { .svc.svc-2 { grid-template-columns: 1fr; } }

/* 🚨 All the opening paragraphs are the same size. The first one used to be set
   larger, which stacked two type sizes in one block — Andy, 20 Sep 2026:
   "Different size fonts looks shit." */
.opener { font-size: 1.06rem; line-height: 1.6; }

/* An inner page's hero. Shorter than the home page's, because it carries a heading
   and a paragraph or two instead of a headline, a lede and two buttons. */
.page-hero .hero-copy { padding: 68px 0 72px; max-width: 32rem; }
.page-hero .hero-copy h1 { margin-bottom: 14px; }
.page-hero .hero-copy .opener { max-width: none; }
@media (max-width: 900px) { .page-hero .hero-copy { padding: 40px 0 46px; max-width: none; } }


/* 🚨 Every inner hero the same height. They were sizing to their copy, so /how-we-work
   came out at 345px and /business-protection at 636px, and the photographs looked
   arbitrary from page to page — Andy, 20 Sep 2026: "Hero images are not all full
   height." The photo already filled its hero; the heroes themselves were different
   sizes. A floor fixes that without capping a page that genuinely needs more room. */
@media (min-width: 901px) {
  .page-hero { min-height: 480px; display: flex; align-items: center; }
  .page-hero > .wrap { width: 100%; }
  .page-hero .hero-copy { padding: 44px 0; }
}

/* 🚨 The photo bands measured as full height of their own section and still read as a
   rectangle floating in the middle of a white page — white above, white below, because
   the neighbouring sections are white too. Andy, 20 Sep 2026: "ffs all the images are
   STILL not full height."

   Two changes, and both are needed: the band gets a real minimum height so the
   photograph is a panel instead of a strip, and it always takes the tinted ground so
   the band has a visible top and bottom edge. */
.photo-split { min-height: 560px; display: flex; align-items: center;
  background: var(--paper-2); }
.photo-split > .wrap { width: 100%; }
.photo-split .band-copy { padding: 56px 0; }
.photo-split .photo-half::before,
.photo-split.alt .photo-half::before {
  background: linear-gradient(90deg, var(--paper-2) 0%, rgba(246,248,250,0) 100%); }
.photo-split.flip .photo-half::before,
.photo-split.flip.alt .photo-half::before {
  background: linear-gradient(270deg, var(--paper-2) 0%, rgba(246,248,250,0) 100%); }

@media (max-width: 900px) {
  .photo-split { min-height: 0; display: flex; }
  .photo-half { height: 320px; }
}

/* ==========================================================================
   GREEN GROUNDS.

   Andy, 20 Sep 2026: "I think we need to use the green as background in some
   sections as the site looks a bit clinical at the moment." It was white,
   #F6F8FA and a near-black band — correct, cold, and no brand colour anywhere
   below the buttons.

   So every other tinted section takes the pale green instead of the grey, and
   the contact band takes the deep green instead of near-black. Grounds stay
   light: the one dark object on the page is the footer.
   ========================================================================== */

.section.wash { background: var(--green-wash); }
.photo-split.wash { background: var(--green-wash); }
.photo-split.wash .photo-half::before {
  background: linear-gradient(90deg, var(--green-wash) 0%, rgba(234,251,245,0) 100%); }
.photo-split.wash.flip .photo-half::before {
  background: linear-gradient(270deg, var(--green-wash) 0%, rgba(234,251,245,0) 100%); }
.section.wash .journey .n { box-shadow: 0 0 0 7px var(--green-wash); }
.section.wash .card,
.section.wash .svc a,
.section.wash .adviser { background: #fff; }
/* the pale note panel disappears on a pale green ground, so it goes white there */
.section.wash .note { background: #fff; border: 1px solid var(--mint-tint); }

/* The contact band. Deep green carries white text at about 8:1, and it warms the
   bottom of every page without turning the site dark. */
.signup { background: var(--green-dk); color: #CFEFE4; }
.signup .lede { color: #CFEFE4; }
.signup-points li { border-top-color: rgba(255,255,255,.18); }

/* 🚨 `.signup a { color:#fff; text-decoration:underline }` was styling the two BUTTONS
   inside the white form card as well as the ordinary links on the green. The WhatsApp
   button came out white-on-white and looked like an empty box; "Email us" came out
   underlined. Buttons opt back out. */
.signup .btn { text-decoration: none; }
.signup .btn-primary { color: var(--ink); }
.signup .btn-ghost { color: var(--ink); background: #fff; border-color: var(--line); }
.signup .btn-ghost:hover { border-color: var(--green); }
.signup-form p { color: var(--ink-2); }

/* ---- the enquiry form ---------------------------------------------------
   The site had no form at all until 21 Sep 2026: the only ways to make contact
   were one mailto and one WhatsApp link, which is why it could not do its job.
   Posts to the shared subscribe function; see assets/enquiry.js. */
.efield { display: block; margin-bottom: 14px; }
.efield > span { display: block; font-size: .86rem; font-weight: 650; color: var(--ink);
  margin-bottom: 6px; }
.efield input, .efield select, .efield textarea { width: 100%; font: inherit;
  font-size: .97rem; color: var(--ink); padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper-2); }
.efield textarea { min-height: 96px; resize: vertical; }
.efield input:focus, .efield select:focus, .efield textarea:focus {
  outline: 2px solid var(--mint); outline-offset: -1px; border-color: var(--mint);
  background: #fff; }
.e-hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.f-status { display: block; font-size: .88rem; margin-top: 10px; color: var(--ink-2); }
.f-status.bad { color: #A4342B; }
.f-status a { color: inherit; text-decoration: underline; }
.f-done h3 { font-size: 1.15rem; margin-bottom: 6px; }
.f-done p { font-size: .95rem; color: var(--ink-2); }
.e-note { font-size: .82rem; color: var(--mute); margin-top: 12px; line-height: 1.5; }
.signup-form .efield > span { color: var(--ink); }

/* ==========================================================================
   LOCATION PAGES — /financial-advice-in-<place> and /where-we-advise.

   🚨 A typographic hero, not a photograph, and that is deliberate. The image
   library holds 28 photos against 25 location pages, and the site's rule is one
   photo per page. One stock city picture repeated across all of them would break
   that rule and say nothing. The Land Registry figure is the local fact worth
   leading with, so it takes the space a photo would have.
   ========================================================================== */

.place-hero { padding: 0; background: var(--green-wash); border-bottom: 1px solid var(--line); }
.place-hero .wrap {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px;
  align-items: center; padding-top: 66px; padding-bottom: 66px;
}
.place-hero h1 { max-width: 16ch; margin-bottom: 16px; }
.place-hero .lede { font-size: 1.15rem; max-width: 46ch; margin-bottom: 14px; }
.place-note { font-size: .93rem; color: var(--mute); }

.place-stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 32px; display: flex; flex-direction: column; gap: 4px;
}
.place-stat-n {
  font-family: Poppins, Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.08; color: var(--green-dk);
}
.place-stat-l { font-size: 1rem; color: var(--ink-2); }
.place-stat-s { font-size: .82rem; color: var(--mute); margin-top: 8px; }

@media (max-width: 900px) {
  .place-hero .wrap {
    grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 40px;
  }
  .place-hero h1 { max-width: none; }
  .place-hero .lede { max-width: none; }
}