/* Buzz Legal v2 — design system approved 3 Aug 2026.
   Full-bleed 12-col editorial grid. No nav bar, no hero box, no cards, no centred container.
   Claret #b8123f used sparingly: headline, rules, numerals, one stamp. Inter only. */
*{margin:0;padding:0;box-sizing:border-box}
:root{--ink:#14110f;--c:#b8123f;--rule:#e2e2e2;--mute:#77767a;--paper:#ffffff}
html{-webkit-font-smoothing:antialiased}
body{font-family:Inter,-apple-system,sans-serif;color:var(--ink);background:var(--paper);font-feature-settings:'ss01','cv05'}
a{text-decoration:none;color:inherit}
/* full-bleed 12-col grid — no centred container */
.g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px;padding:0 46px}
.rule{border-top:1px solid var(--rule)}
.rule2{border-top:2px solid var(--ink)}

/* masthead: a line, not a bar */
.mast{display:flex;align-items:flex-end;justify-content:space-between;padding:26px 46px 16px;gap:40px}
.mast img{height:64px;display:block}
.mnav{display:flex;gap:24px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-bottom:6px}
.mnav a.on{color:var(--c)}
.mtag{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding-bottom:8px}
/* the masthead line is 839px of unwrappable content: logo + index + strapline.
   Below that the strapline is what pushes the page sideways, so it goes first. */
@media (max-width:900px){.mtag{display:none}}

/* opening composition — type is the layout, photo bleeds right */
.open{position:relative;padding-block:56px 0}
.open .lead{grid-column:1/10;font-size:clamp(3.4rem,8.2vw,7.6rem);line-height:.9;letter-spacing:-.045em;font-weight:800;position:relative;z-index:2}
.open .lead .q{color:var(--c)}
.open .aside{grid-column:10/13;align-self:end;padding-bottom:14px}
.open .aside p{font-size:1rem;line-height:1.55;color:#3f3f43;font-weight:500}
.open .aside .act{margin-top:20px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.open .aside a{font-weight:800;font-size:.94rem;border-bottom:2px solid var(--c);padding-bottom:2px}
.bleed{margin-top:44px;height:440px;position:relative;overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover;object-position:center 34%;display:block}
.bleed .stamp{position:absolute;left:46px;bottom:0;background:var(--c);color:#fff;padding:20px 26px 18px;max-width:420px}
.bleed .stamp b{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;color:rgba(255,255,255,.72)}
.bleed .stamp span{font-size:1.02rem;font-weight:700;line-height:1.35;display:block}

/* running index — dense, hairlines, no cards */
.idx{padding-block:0 10px}
.idxhead{grid-column:1/13;display:flex;justify-content:space-between;align-items:baseline;padding:52px 0 14px;gap:30px}
.idxhead h2{font-size:2.5rem;letter-spacing:-.03em;font-weight:800;max-width:20ch;line-height:1.02}
.idxhead span{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.item{grid-column:span 4;padding:26px 0 30px;border-top:1px solid var(--rule)}
.item .n{font-size:.7rem;font-weight:800;letter-spacing:.18em;color:var(--c);display:block;margin-bottom:12px}
.item h3{font-size:1.32rem;font-weight:800;letter-spacing:-.015em;margin-bottom:8px}
.item p{font-size:.96rem;line-height:1.55;color:#56565b}

/* three-up argument, numerals in the margin */
.arg{padding-block:64px 8px}
.arg .lab{grid-column:1/3;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-top:6px}
.arg h2{grid-column:3/10;font-size:3.1rem;letter-spacing:-.032em;font-weight:800;line-height:1.02}
.argrow{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px;margin-top:40px}
.argrow>div{border-top:2px solid var(--ink);padding:20px 26px 30px 0}
.argrow .k{font-size:3.4rem;font-weight:800;letter-spacing:-.04em;color:var(--c);line-height:1;margin-bottom:12px}
.argrow h3{font-size:1.2rem;font-weight:800;margin-bottom:8px}
.argrow p{font-size:.98rem;line-height:1.58;color:#56565b}

/* pull statement — type only, oversized, no band */
.pull{padding-block:82px 76px}
.pull q{grid-column:2/12;display:block;font-size:clamp(2rem,4.3vw,3.5rem);line-height:1.08;letter-spacing:-.032em;font-weight:700;quotes:none}
.pull q b{font-weight:800;color:var(--c)}
.pull .by{grid-column:2/12;margin-top:26px;font-size:1.02rem;color:#56565b;line-height:1.6;max-width:64ch;font-weight:500}

/* solicitor — portrait bleeds left, text narrow */
.sol{display:grid;grid-template-columns:minmax(280px,34vw) 1fr;align-items:end;gap:0;border-top:1px solid var(--rule)}
.sol .por{position:relative;height:100%;min-height:430px;max-height:520px;background:var(--ink)}
.sol .por img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06)}
.sol .tx{padding:64px 46px 64px 56px}
.sol .lab{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.sol h2{font-size:3.2rem;letter-spacing:-.035em;font-weight:800;margin:12px 0 18px;line-height:1}
.sol p{font-size:1.04rem;line-height:1.62;color:#3f3f43;max-width:56ch;font-weight:500}
.sol .fx{margin-top:28px;display:grid;grid-template-columns:repeat(3,auto);gap:0 34px;border-top:2px solid var(--ink);padding-top:14px;justify-content:start}
.sol .fx b{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.sol .fx span{font-size:.95rem;font-weight:700}

/* process — horizontal band of hairline columns */
.proc{padding-block:70px 20px}
.proc .lab{grid-column:1/3;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-top:8px}
.proc h2{grid-column:3/9;font-size:3.1rem;letter-spacing:-.032em;font-weight:800;line-height:1.02}
.steps{grid-column:1/13;display:grid;grid-template-columns:repeat(4,1fr);column-gap:28px;margin-top:38px}
.steps>div{border-top:1px solid var(--rule);padding:20px 22px 34px 0;position:relative}
.steps>div:before{content:'';position:absolute;top:-1px;left:0;width:34%;height:3px;background:var(--c)}
.steps .s{font-size:.7rem;font-weight:800;letter-spacing:.18em;color:var(--c);display:block;margin-bottom:12px}
.steps h3{font-size:1.1rem;font-weight:800;margin-bottom:7px}
.steps p{font-size:.94rem;line-height:1.55;color:#56565b}

/* close — inverted panel, offset */
.close{margin-top:70px;background:var(--ink);color:#fff}
.closein{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px;padding:74px 46px}
.close h2{grid-column:1/8;font-size:clamp(2.4rem,5vw,4.2rem);letter-spacing:-.04em;font-weight:800;line-height:.96}
.close .r{grid-column:9/13;align-self:end}
.close .r a{display:inline-block;background:var(--c);color:#fff;font-weight:800;padding:17px 30px;font-size:1rem}
.close .r p{margin-top:16px;font-size:.88rem;color:#a29c98;line-height:1.55}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:24px 46px 40px;font-size:.8rem;color:var(--mute);line-height:1.6;border-top:1px solid var(--rule)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .open .lead{grid-column:1/13}
  .open .aside{grid-column:1/9;padding-bottom:0;margin-top:26px}
  .arg h2,.proc h2{grid-column:1/13}
  .arg .lab,.proc .lab{grid-column:1/13;padding-bottom:10px}
  .item{grid-column:span 6}
  .pull q,.pull .by{grid-column:1/13}
  .sol{grid-template-columns:1fr}
  .sol .por{min-height:340px;max-height:420px}
  .sol .tx{padding:46px 46px 56px}
  .close h2{grid-column:1/13}
  .close .r{grid-column:1/13;margin-top:28px}
}
@media (max-width:760px){
  .g,.mast,.closein,.foot,.bleed .stamp{padding-left:22px;padding-right:22px}
  .mast{flex-wrap:wrap;gap:14px;padding-top:18px}
  .mast img{height:52px}
  .mnav{gap:14px;font-size:.72rem;flex-wrap:wrap;padding-bottom:0}
  .open{padding-top:34px}
  .open .lead{font-size:clamp(2.4rem,10vw,3.4rem)}
  .bleed{height:280px;margin-top:30px}
  .bleed .stamp{left:0;right:0;max-width:none;padding:16px 22px}
  .item{grid-column:1/13}
  .idxhead{flex-direction:column;gap:10px;padding-top:38px}
  .idxhead h2{font-size:1.9rem}
  .argrow,.steps{grid-template-columns:1fr}
  .argrow>div,.steps>div{padding-right:0}
  .arg h2,.proc h2,.sol h2{font-size:2.1rem}
  .pull q{font-size:1.6rem}
  .sol .fx{grid-template-columns:1fr;gap:12px 0}
  .sol .tx{padding:38px 22px 46px}
  .closein{padding:54px 22px}
  .close h2{font-size:2.2rem}
  .foot{flex-direction:column;gap:14px}
}

/* ── interior pages: same grid, no giant opening composition ───────────── */
.phead{padding-block:52px 34px}
.phead .lab{grid-column:1/3;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--c);padding-top:10px}
.phead h1{grid-column:3/11;font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:.98;letter-spacing:-.04em;font-weight:800}
.phead .std{grid-column:3/10;margin-top:20px;font-size:1.1rem;line-height:1.6;color:#3f3f43;font-weight:500}
.crumb{grid-column:1/13;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:26px}
.crumb a{border-bottom:1px solid var(--rule)}
@media (max-width:1100px){.phead .lab,.phead h1,.phead .std{grid-column:1/13}.phead .lab{padding-bottom:12px}}

/* ── long-form prose, set on the grid ──────────────────────────────────── */
.prose{grid-column:2/10;padding:16px 0 60px}
.prose>p{font-size:1.09rem;line-height:1.72;color:#2f2f33;margin:0 0 22px}
.prose h2{font-size:2rem;letter-spacing:-.03em;font-weight:800;margin:52px 0 16px;line-height:1.08}
.prose h3{font-size:1.3rem;font-weight:800;margin:34px 0 12px;letter-spacing:-.015em}
.prose ul,.prose ol{margin:0 0 22px 20px;font-size:1.09rem;line-height:1.72;color:#2f2f33}
.prose li{margin-bottom:9px}
.prose a{color:var(--c);font-weight:600;border-bottom:1px solid rgba(184,18,63,.35)}
.prose strong{font-weight:700;color:var(--ink)}
.prose blockquote{border-left:3px solid var(--c);padding:2px 0 2px 20px;margin:0 0 22px;font-weight:600;color:#3f3f43}
.note{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:20px 0;margin:0 0 26px}
.note b{display:block;font-size:.7rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.note p{font-size:1rem;line-height:1.62;color:#3f3f43;margin:0}
.tocbox{grid-column:10/13;padding:22px 0 0}
.tocbox b{display:block;font-size:.7rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.tocbox a{display:block;font-size:.93rem;font-weight:600;padding:7px 0;border-top:1px solid var(--rule);line-height:1.4}
@media (max-width:1100px){.prose,.tocbox{grid-column:1/13}.tocbox{padding-bottom:26px}}

/* ── FAQ, on hairlines not accordions ─────────────────────────────────── */
.faqs{grid-column:1/13;padding-block:10px 30px}
.faqs h2{font-size:2.4rem;letter-spacing:-.032em;font-weight:800;margin-bottom:8px}
.fq{display:grid;grid-template-columns:1fr 1.35fr;column-gap:40px;padding:26px 0;border-top:1px solid var(--rule)}
.fq h3{font-size:1.16rem;font-weight:800;letter-spacing:-.012em;line-height:1.3}
.fq p{font-size:1rem;line-height:1.68;color:#3f3f43}
@media (max-width:900px){.fq{grid-template-columns:1fr;row-gap:10px}}

/* ── listing index ────────────────────────────────────────────────────── */
.list{grid-column:1/13;padding-block:6px 40px}
.li{display:grid;grid-template-columns:64px 1fr 1.15fr;column-gap:34px;padding:26px 0;border-top:1px solid var(--rule);align-items:start}
.li .n{font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--c);padding-top:5px}
.li h2,.li h3{font-size:1.34rem;font-weight:800;letter-spacing:-.018em;line-height:1.25}
.li p{font-size:.99rem;line-height:1.6;color:#56565b}
.li .go{font-size:.85rem;font-weight:800;color:var(--c);margin-top:8px;display:inline-block}
@media (max-width:900px){.li{grid-template-columns:1fr;row-gap:8px}.li .n{padding-top:0}}

/* ── price schedule ───────────────────────────────────────────────────── */
.sched{grid-column:1/13;padding-block:6px 30px}
.sch{display:grid;grid-template-columns:1fr auto;column-gap:34px;padding:20px 0;border-top:1px solid var(--rule);align-items:baseline}
.sch .t{font-size:1.2rem;font-weight:700}
.sch .t span{display:block;font-size:.95rem;font-weight:500;color:#56565b;margin-top:5px;max-width:64ch}
.sch .p{font-size:1.55rem;font-weight:800;letter-spacing:-.03em;white-space:nowrap;color:var(--c)}

/* inclusion lists inside a schedule row, an index entry or a listing entry.
   Without this the global padding reset hangs the browser's own bullets
   outside the 46px page margin and sets them at body size. Claret rule marker,
   same device as .steps and .card-check-list. */
.sched>ul,.item>ul,.li ul{list-style:none;margin:12px 0 4px;padding:0;font-size:.99rem;line-height:1.6;color:#56565b}
.sched>ul>li,.item>ul>li,.li ul li{position:relative;padding-left:18px;margin-bottom:5px}
.sched>ul>li:before,.item>ul>li:before,.li ul li:before{content:'';position:absolute;left:0;top:11px;width:9px;height:2px;background:var(--c)}
.sched>ul>li strong,.item>ul>li strong,.li ul li strong{font-weight:700;color:var(--ink)}

/* keyboard focus — the UA ring is invisible on the claret button in the ink close panel */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.close a:focus-visible,.close button:focus-visible{outline-color:#fff}

/* ── capture ──────────────────────────────────────────────────────────── */
.cap{grid-column:1/13;border-top:2px solid var(--ink);margin-top:20px;padding:30px 0 0;display:grid;grid-template-columns:1fr 1.1fr;column-gap:48px}
.cap h3{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.cap p{font-size:1rem;color:#56565b;line-height:1.6}
.cap form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;padding-top:6px}
.cap input{flex:1;min-width:220px;border:2px solid var(--ink);padding:14px 16px;font-size:1rem;font-family:inherit;background:#fff;color:var(--ink)}
.cap button{background:var(--c);color:#fff;border:none;font-weight:800;font-size:1rem;padding:15px 26px;cursor:pointer;font-family:inherit}
.cap .msg{width:100%;font-weight:700;color:var(--c);font-size:.92rem;margin-top:4px}
@media (max-width:900px){.cap{grid-template-columns:1fr;row-gap:18px}}


/* ============ WhatsApp floating chat button ============ */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(14, 14, 14, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 36px rgba(14, 14, 14, 0.36);
}
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }

.whatsapp-tooltip {
  position: fixed;
  bottom: 38px;
  right: 92px;
  z-index: 60;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  padding: 10px 16px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.whatsapp-float:hover + .whatsapp-tooltip,
.whatsapp-float:focus-visible + .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .whatsapp-float { bottom: 16px; right: 16px; width: 54px; height: 54px; }
  .whatsapp-float svg { width: 27px; height: 27px; }
  .whatsapp-tooltip { display: none; }
}

/* Subscription checkout buttons. GoCardless Direct Debit via Buzz OS.
   The card quotes ex-VAT (£49 /month +VAT) because that is how the plans are
   sold; the button states what actually leaves the bank account, because a
   Direct Debit for an amount the customer was not shown is how disputes start. */
.sched .buy{margin:14px 0 4px}
.sched .buy a{display:inline-block;background:var(--c);color:#fff;text-decoration:none;
  font-weight:800;font-size:.95rem;letter-spacing:-.01em;padding:11px 20px;border-radius:3px;
  transition:background .15s}
.sched .buy a:hover,.sched .buy a:focus-visible{background:#8e0e31}
.sched .buy small{display:block;margin-top:8px;font-size:.85rem;color:var(--mute);font-weight:500}