/* Service page layouts v2 as editable blocks (5 Oct 2026).
 *
 * The section styles in layout-v2.css were written for hand-typed markup inside Custom HTML blocks. The sections
 * are now native blocks, which changes three things this file evens out, so the page looks as it did:
 *  1. Groups are flow layouts, and WordPress gives every child but the first a 1.2rem top margin. Inside a section
 *     nothing had that margin before, so it is taken off and the few deliberate top margins are set again.
 *  2. A few pieces of copy that were spans or divs are now paragraphs (a stat figure, the "3 years" line), so the
 *     general ".lp p" rule would restyle them. They get their old look back here.
 *  3. A coloured word inside a paragraph is now bold (<strong>), the editor's own control, instead of a span.
 */

/* 1. Flow margins: on the page, functions.php takes the flow classes off inside each section.
   WordPress also sizes every group border-box; the hand-typed divs were content-box, which the fault cards'
   minimum height depends on. */
.lp .wp-block-group { box-sizing: content-box; }

/* 2. Copy that became a paragraph */
.lp p.lp-num { display: block; color: #EF8354; font-size: 2.6rem; font-weight: 200; line-height: 1; margin: 0 0 1.2rem; max-width: none; }
.lp p.lp-big { color: #FFFFFF; font-weight: 200; font-size: 2rem; line-height: 1; margin: 0; max-width: none; }

/* 3. The coloured words. The punch line's orange half was a span, and tokens.css sets every span to 300 with
   !important, so it rendered thin although layout-v2.css asks for 500. Kept at 300 so the page looks as it did;
   whether it should be 500 is Rene's call (asked 5 Oct). */
.lp-punch strong { color: #EF8354; font-weight: 300; }
.lp .v-list li { margin-top: 0; }
.lp-big strong { display: block; color: #EF8354; font-weight: 500; font-size: 11rem; line-height: .85; letter-spacing: -.04em; }
.v-months .lp-big strong { color: #EF8354 !important; font-weight: 500 !important; }
@media (max-width: 860px) { .lp-big strong { font-size: 7rem; } }

/* Before the script has built a section, and for anyone without JavaScript: the comparison is a plain readable
   table and the accordion's steps are a list of cards. The script replaces both on the page. */
.v-tog-table table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.v-tog-table th, .v-tog-table td { text-align: left; padding: 1rem; border-bottom: 1px solid #363B4E; color: #FFFFFF; vertical-align: top; }
.v-tog-table thead th { color: #EF8354; font-weight: 500; }
.lp-acc-step { background: #363B4E; border-radius: 14px; padding: 1.6rem 1.6rem .6rem; margin-top: 1rem; }
.lp-acc-step .b2be-drawing:empty { display: none; }