/* /legal-services — designed page. Layout and spacing only; body type comes from styles.css. */
.dz-legal-services { --edge: max(24px, calc((100vw - 1240px) / 2 + 24px)); --tint: #f5f4ef; }
.dz-legal-services p { margin: 0 0 12px; }
.dz-legal-services h2, .dz-legal-services h3 { margin-top: 0; }
.dz-legal-services .l-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dz-legal-services .l-btns .btn { margin: 0; }

/* Hero: the photograph bleeds edge to edge, copy on a dark wash from the left */
.dz-legal-services .l-hero { position: relative; min-height: clamp(560px, calc(100vh - 150px), 820px); display: flex; align-items: center; background: var(--black); overflow: hidden; }
.dz-legal-services .l-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; display: block; }
.dz-legal-services .l-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,14,14,.92) 0%, rgba(14,14,14,.82) 38%, rgba(14,14,14,.25) 70%, rgba(14,14,14,0) 100%); }
.dz-legal-services .l-hero .inner { position: relative; z-index: 1; width: 100%; padding-top: 72px; padding-bottom: 72px; }
.dz-legal-services .l-hero-copy { max-width: 620px; }
.dz-legal-services .l-hero h1 { color: var(--white); margin: 0 0 24px; }
.dz-legal-services .l-hero .lead { color: #ecebe6; margin: 0; }
.dz-legal-services .l-hero .btn-outline { color: var(--white); }
.dz-legal-services .l-court { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.28); color: #ecebe6; font-weight: 700; }

/* Price board: the fee schedule on white, the three subscriptions on black running to the right window edge */
.dz-legal-services .l-board { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dz-legal-services .l-fees { padding: 96px 64px 96px var(--edge); }
.dz-legal-services .l-fees-head { margin-bottom: 36px; }
.dz-legal-services .l-fees-head h2 { margin: 0 0 14px; }
.dz-legal-services .l-fees-head p { margin: 0; max-width: 34em; }
.dz-legal-services .fee { display: grid; grid-template-columns: minmax(0, 1fr) 128px 112px; gap: 0 24px; align-items: baseline; padding: 22px 0 18px; border-top: 1px solid var(--line); }
.dz-legal-services .fee-cols { padding: 0 0 10px; border-top: 0; font-weight: 900; font-size: .9rem; color: var(--black); }
.dz-legal-services .fee-cols span:not(:first-child), .dz-legal-services .fee-p, .dz-legal-services .fee-m { text-align: right; }
.dz-legal-services .fee-cols + .fee { border-top: 3px solid var(--black); }
.dz-legal-services .fee-job h3 { margin: 0 0 6px; }
.dz-legal-services .fee-job p { margin: 0; }
.dz-legal-services .fee-p, .dz-legal-services .fee-m { margin: 0; }
.dz-legal-services .fee-p b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 2rem; line-height: 1; color: var(--black); }
.dz-legal-services .fee-m b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 1.45rem; line-height: 1; color: var(--black); background: var(--tint); padding: 4px 8px; border-radius: 6px; }
.dz-legal-services .l-fees > .btn { margin-top: 32px; }
.dz-legal-services .l-plans { background: var(--black); color: var(--white); padding: 96px var(--edge) 96px 56px; }
.dz-legal-services .l-plans h2 { color: var(--white); margin: 0 0 28px; }
.dz-legal-services .plan { padding: 24px 0 20px; border-top: 1px solid #3a3a37; }
.dz-legal-services .plan:first-of-type { border-top: 4px solid var(--lime); }
.dz-legal-services .plan h3 { color: var(--white); margin: 0 0 10px; }
.dz-legal-services .plan .amt { margin: 0; color: #ecebe6; }
.dz-legal-services .plan .amt b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--white); margin-right: 6px; }
.dz-legal-services .plan .yr { margin: 4px 0 12px; color: var(--lime); font-weight: 700; }
.dz-legal-services .plan p:last-child { color: #d6d5cf; margin: 0; }
.dz-legal-services .l-plans-link { margin: 28px 0 0; }
.dz-legal-services .l-plans-link a { color: var(--lime); font-weight: 900; }

/* Unpaid invoices: four stages on one line that gets heavier as the matter escalates */
.dz-legal-services .l-debt { padding: 104px 0 96px; }
.dz-legal-services .l-debt h2 { margin: 0 0 48px; }
.dz-legal-services .route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.dz-legal-services .st { position: relative; padding: 0 32px 0 0; }
.dz-legal-services .st .bar { display: block; height: 30px; position: relative; margin-bottom: 26px; }
.dz-legal-services .st .bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background: var(--black); }
.dz-legal-services .st-1 .bar::before { height: 6px; }
.dz-legal-services .st-2 .bar::before { height: 12px; }
.dz-legal-services .st-3 .bar::before { height: 20px; }
.dz-legal-services .st-4 .bar::before { height: 30px; }
.dz-legal-services .st .n { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin-top: 8px; border-radius: 50%; background: var(--lime); border: 3px solid var(--black); color: var(--black); font-family: "Anton", sans-serif; font-size: 1.3rem; display: grid; place-items: center; transform: translateY(-4px); z-index: 1; }
.dz-legal-services .st h3 { margin: 30px 0 10px; }
.dz-legal-services .st p { margin: 0; }

/* The two firms: Buzz Legal as a white sheet, then RHF on black with Robert's photograph to the left window edge */
.dz-legal-services .l-firms { background: var(--tint); padding: 88px 0 0; }
.dz-legal-services .l-firms-head h2 { margin: 0 0 40px; }
.dz-legal-services .firm-bl { background: var(--white); border-radius: var(--radius); border-top: 6px solid var(--lime); padding: 48px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; margin-bottom: 72px; }
.dz-legal-services .firm-bl h3, .dz-legal-services .rhf-copy h3 { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; margin: 0 0 6px; }
.dz-legal-services .sub { font-weight: 900; color: var(--black); margin: 0 0 22px; }
.dz-legal-services .foot { font-weight: 900; color: var(--black); margin: 0 0 22px; }
.dz-legal-services .l-firms ul { list-style: none; margin: 0; padding: 0; }
.dz-legal-services .l-firms li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--line); }
.dz-legal-services .l-firms li:first-child { border-top: 2px solid var(--black); }
.dz-legal-services .l-firms li::before { content: ""; position: absolute; left: 0; top: 17px; width: 14px; height: 14px; border-radius: 3px; background: var(--lime); }
.dz-legal-services .rhf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--black); color: var(--white); }
.dz-legal-services .rhf-photo { margin: 0; position: relative; min-height: 420px; }
.dz-legal-services .rhf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.dz-legal-services .rhf-copy { padding: 72px var(--edge) 72px 64px; }
.dz-legal-services .rhf-copy h3 { color: var(--white); }
.dz-legal-services .rhf-copy .sub { color: var(--lime); }
.dz-legal-services .rhf-copy li { color: var(--white); border-top-color: #3a3a37; }
.dz-legal-services .rhf-copy li:first-child { border-top-color: var(--lime); }
.dz-legal-services .rhf-copy ul { margin-bottom: 24px; }
.dz-legal-services .rhf-copy p:last-child { color: #e6e5df; margin: 0; max-width: 40em; }
.dz-legal-services .l-note { margin: 0; padding: 32px 0 40px; max-width: 60em; }

/* Close: the enquiry on lime to the left window edge, the questions beside it */
.dz-legal-services .l-close { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 1px solid var(--line); }
.dz-legal-services .l-ask { background: var(--lime); padding: 88px 56px 88px var(--edge); }
.dz-legal-services .l-ask-in { position: sticky; top: 120px; }
.dz-legal-services .l-ask h2 { margin: 0 0 20px; text-wrap: balance; }
.dz-legal-services .l-ask .lead { margin: 0; color: var(--black); }
.dz-legal-services .l-ask .btn-outline { color: var(--black); }
.dz-legal-services .l-faq { padding: 88px var(--edge) 72px 64px; }
.dz-legal-services .l-faq h2 { margin: 0 0 28px; }
.dz-legal-services .q { padding: 22px 0 10px; border-top: 1px solid var(--line); }
.dz-legal-services .q:first-of-type { border-top: 3px solid var(--black); }
.dz-legal-services .q h3 { margin: 0 0 10px; }

@media (max-width: 1100px) {
  .dz-legal-services .l-board { grid-template-columns: 1fr; }
  .dz-legal-services .l-fees { padding: 72px 24px; }
  .dz-legal-services .l-plans { padding: 64px 24px; }
  .dz-legal-services .rhf-copy { padding: 56px 24px 56px 40px; }
}
@media (max-width: 820px) {
  .dz-legal-services .l-hero { min-height: 0; display: block; }
  .dz-legal-services .l-hero > img { position: relative; height: 280px; object-position: 68% 60%; }
  .dz-legal-services .l-hero::after { display: none; }
  .dz-legal-services .l-hero .inner { padding-top: 40px; padding-bottom: 48px; }
  .dz-legal-services .fee { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .dz-legal-services .fee-cols { display: none; }
  .dz-legal-services .fee-job { grid-column: 1 / -1; }
  .dz-legal-services .fee-p { text-align: left; }
  .dz-legal-services .fee-m { text-align: right; }
  .dz-legal-services .fee-p::after { content: " +VAT"; font-weight: 700; }
  .dz-legal-services .fee-m::before { content: "Members "; font-weight: 700; }
  .dz-legal-services .fee:nth-child(3) { border-top: 3px solid var(--black); }
  .dz-legal-services .l-debt { padding: 64px 0; }
  .dz-legal-services .route { grid-template-columns: 1fr; }
  .dz-legal-services .st { padding: 0 0 28px 72px; }
  .dz-legal-services .st .bar { position: absolute; left: 20px; top: 0; bottom: 0; height: auto; width: 30px; margin: 0; }
  .dz-legal-services .st .bar::before { top: 0; bottom: 0; left: 0; right: auto; height: auto !important; }
  .dz-legal-services .st-1 .bar::before { width: 4px; }
  .dz-legal-services .st-2 .bar::before { width: 8px; }
  .dz-legal-services .st-3 .bar::before { width: 12px; }
  .dz-legal-services .st-4 .bar::before { width: 16px; }
  .dz-legal-services .st .n { margin-top: 0; transform: none; }
  .dz-legal-services .st h3 { margin-top: 8px; }
  .dz-legal-services .l-firms { padding: 64px 0 0; }
  .dz-legal-services .firm-bl { grid-template-columns: 1fr; padding: 32px 24px; margin-bottom: 48px; }
  .dz-legal-services .rhf { grid-template-columns: 1fr; }
  .dz-legal-services .rhf-photo { min-height: 0; height: 340px; }
  .dz-legal-services .rhf-copy { padding: 44px 24px 48px; }
  .dz-legal-services .l-close { grid-template-columns: 1fr; }
  .dz-legal-services .l-ask { padding: 56px 24px; }
  .dz-legal-services .l-ask-in { position: static; }
  .dz-legal-services .l-faq { padding: 56px 24px; }
}