/* Penny Brohn - the service page.

   The design system already carries this page almost entirely: .svc-intro,
   .svc-steps, .svc-step, .svc-discipline, .svc-discipline--flip,
   .practitioner-grid, .cred-card, .svc-quote, .svc-faq, .svc-faq-item,
   .signpost-list, .signpost, .svc-cta, .img-accent, .editorial-text and
   .sec-heading are all base components. 58 of the design's 60 classes are
   in it.

   What is here is only the two things the design file could not know: a
   page with no lead image, and a repeater with a different number of items
   than the design happened to draw. */

/* No picture beside the intro, so the writing takes the full column
   rather than leaving a hole where the design put one. */
.svc-intro.svc-intro--solo{display:block;}
.svc-intro.svc-intro--solo .editorial-text{max-width:72ch;}

/* The design draws three steps, three cards and four signposts. An editor
   can add two, or six. Let the tracks follow the content instead of
   stranding one item alone on a row. */
body .svc-steps.svc-steps{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
body .practitioner-grid.practitioner-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

/* The accordion marker is drawn by the design system, but a <details> with
   no marker of its own still shows the browser's triangle in some engines. */
.svc-faq-item>summary{list-style:none;}
.svc-faq-item>summary::-webkit-details-marker{display:none;}

/* A discipline row whose picture has not been chosen yet falls back to the
   design's own brief panel, which needs a height to sit at. */
.svc-discipline-img .img-brief{min-height:260px;display:flex;align-items:center;justify-content:center;text-align:center;}

/* The .inner-content prose container is painted white, because on the
   two-column inner page it sits on a white ground. Here it lands on whichever
   band it falls in, so it takes the band's colour instead. Doubled class
   because the runtime emits its own rules as .fl-ds-page .x. */
body .pb-service-prose.pb-service-prose .inner-content{background:transparent;}

/* The design system paints the cite mulberry, which is its general accent and
   what .pull-quote .cite uses too, so this is an override rather than a fix.
   Paul's call on 6 September: navy, so the attribution sits in the same colour
   as the quotation above it. One more element than the runtime's own
   .fl-ds-page .svc-quote cite, which is what it has to beat. */
body .svc-quote.svc-quote cite{color:var(--ds-color-navy,#23375A);}

/* The signposting band is one sentence and one button now, so it centres
   rather than sitting as a list. */

/* The service FAQ, brought onto the design system's own .row-faq treatment:
   white with a light outline that turns mulberry when open. The plus and
   minus mark is the design system's, left alone. Doubled class beats the
   runtime's .fl-ds-page variants. */
body .svc-faq-item.svc-faq-item{
	background:var(--ds-color-white,#FEFEFE);
	border:1px solid rgba(35,55,90,.10);
	transition:border-color .15s ease,box-shadow .15s ease;
}
body .svc-faq-item.svc-faq-item[open]{
	border-color:var(--ds-color-mulberry,#835263);
	box-shadow:0 6px 20px rgba(35,55,90,.06);
}

/* Good to know: the practical facts beside the writing (pre-launch feedback,
   October 2026). The card is the credential card's: white, card border, 16px. */
.svc-intro-aside{display:flex;flex-direction:column;gap:28px;min-width:0;}
body.fl-ds-page .pb-facts{background:var(--ds-color-buff,#F4EFE9);border-radius:16px;padding:24px 24px 10px;}
body.fl-ds-page .pb-facts-title{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:20px;line-height:1.2;color:var(--ds-color-navy,#23375A);margin:0 0 12px;}
body.fl-ds-page .pb-facts-list{margin:0;padding:0;}
body.fl-ds-page .pb-facts-row{padding:12px 0;border-top:1px solid var(--ds-color-border-card,rgba(35,55,90,.1));}
body.fl-ds-page .pb-facts-row dt{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-color-teal,#1E6C82);margin:0 0 4px;}
body.fl-ds-page .pb-facts-row dd{margin:0;font-family:'Mackinac',Georgia,serif;font-size:15px;line-height:1.6;color:var(--ds-color-navy,#23375A);}
body.fl-ds-page .pb-facts-row dd a{color:var(--ds-color-teal,#1E6C82);text-decoration:underline;text-underline-offset:3px;}
.svc-intro--solo .svc-intro-aside{margin-top:32px;max-width:72ch;}

/* Steps or credential cards placed inside the prose with [pb_service_section]. */
.pb-service-prose .pb-service-inline{margin-top:28px;margin-bottom:44px;}
.pb-service-prose .pb-service-inline:last-child{margin-bottom:0;}

/* Good to know now sits in its own band of credential cards under the intro
   (12 October: beside the picture it made the intro lopsided). */
body.fl-ds-page .pb-facts-band .pb-facts-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
body.fl-ds-page .pb-facts-band .cred-card p a{color:var(--ds-color-teal,#1E6C82);text-decoration:underline;text-underline-offset:3px;}

/* Service intros (Paul, 13 Oct): the opening writing is often several
   sentences, so it sits at body size rather than the large intro style, and
   the two columns get more air between them. */
body.fl-ds-page .svc-intro .editorial-text p,
body.fl-ds-page .svc-intro .editorial-text p.is-style-intro{font-size:18px;line-height:1.65;}
@media (min-width:961px){body.fl-ds-page .svc-intro:not(.svc-intro--solo){column-gap:96px;}}

/* Prose sections as bands: the heading is the band's own centred lockup, so
   the narrow prose below it starts without extra space above. */
body.fl-ds-page .pb-service-prose > .wrap > .sec-heading{margin-bottom:32px;}
body.fl-ds-page .pb-service-prose .inner-content > :first-child{margin-top:0;}

/* Steps placed in the prose (Paul, 13 Oct): they stay in the reading column
   and run down the page, number beside the text, rather than breaking out
   into a wide row of three. */
body.fl-ds-page .pb-service-inline--steps .svc-steps.svc-steps{grid-template-columns:1fr;gap:24px;margin-top:0;}
body.fl-ds-page .pb-service-inline--steps .svc-step{display:grid;grid-template-columns:44px 1fr;column-gap:20px;align-items:start;}
body.fl-ds-page .pb-service-inline--steps .svc-step-num{grid-row:1 / span 2;margin-bottom:0;}
body.fl-ds-page .pb-service-inline--steps .svc-step h3{margin:9px 0 6px;}
body.fl-ds-page .pb-service-inline--steps .svc-step p{margin:0;}

/* Soft panel: a small call-to-action box inside the prose, the same panel
   as "Tell us your story" on news. Buff on a white band, white on a buff
   band, so it always reads as a box. First button solid, the rest outline. */
body.fl-ds-page .pb-service-prose .wp-block-group.is-style-pb-soft{background:var(--ds-color-buff,#F4EFE9);border-radius:20px;padding:32px 36px;margin-block:40px;}
body.fl-ds-page .pb-service-prose.row--buff .wp-block-group.is-style-pb-soft{background:var(--ds-color-white,#FEFEFE);}
body.fl-ds-page .pb-service-prose .is-style-pb-soft > :first-child{margin-top:0;}
body.fl-ds-page .pb-service-prose .is-style-pb-soft > :last-child{margin-bottom:0;}
body.fl-ds-page .pb-service-prose .is-style-pb-soft > .wp-block-group__inner-container > :first-child{margin-top:0;}
body.fl-ds-page .pb-service-prose .is-style-pb-soft > .wp-block-group__inner-container > :last-child{margin-bottom:0;}
body.fl-ds-page .pb-service-prose .is-style-pb-soft .wp-block-buttons{margin-top:20px;gap:12px;}
body.fl-ds-page .pb-service-prose .is-style-pb-soft .wp-block-button__link.wp-block-button__link{display:inline-flex;background:var(--ds-color-teal,#1E6C82);color:var(--ds-color-white,#FEFEFE);border:2px solid var(--ds-color-teal,#1E6C82);border-radius:999px;padding:12px 26px;font-family:var(--ds-font-heading,'Flink',system-ui,Arial,sans-serif);font-weight:800;font-size:15px;text-decoration:none;}
body.fl-ds-page .pb-service-prose .is-style-pb-soft .wp-block-button__link.wp-block-button__link:hover{background:var(--ds-color-teal-hover,#16566A);border-color:var(--ds-color-teal-hover,#16566A);}
body.fl-ds-page .pb-service-prose .is-style-pb-soft .is-style-outline > .wp-block-button__link.wp-block-button__link{background:transparent;color:var(--ds-color-teal,#1E6C82);}
body.fl-ds-page .pb-service-prose .is-style-pb-soft .is-style-outline > .wp-block-button__link.wp-block-button__link:hover{background:var(--ds-color-teal,#1E6C82);color:var(--ds-color-white,#FEFEFE);}
@media (max-width:600px){body.fl-ds-page .pb-service-prose .wp-block-group.is-style-pb-soft{padding:26px 22px;}}
/* What we offer rows placed inside a prose section: the section heading is
   already above them, so the first row needs less space on top. */
body.fl-ds-page .pb-service-inline--disciplines > .svc-discipline:first-child{margin-top:12px;}

/* Long button labels in a What we offer row wrap on a phone rather than
   running past the edge of the row. */
body.fl-ds-page .svc-discipline-text .btn{white-space:normal;max-width:100%;text-align:center;}

/* Two intro buttons side by side, and long email addresses in the Good to
   know cards wrap inside the card (audit, 20 October). */
body.fl-ds-page .svc-intro-btns{display:flex;flex-wrap:wrap;gap:12px;}
body.fl-ds-page .pb-facts-grid .cred-card p a{overflow-wrap:anywhere;word-break:break-word;}