/**
 * Service Landing template (template-service.php) - scoped styles.
 *
 * Everything is scoped under #svc-canvas so this cannot leak into Elementor pages
 * or the blog. ONE type scale governs the whole page: the top section's font chaos
 * on the old faith page came from three eras of styling stacked in one screen
 * (a centred serif callout, a left-aligned body block, a 16px pill row).
 *
 * Palette matches assets/workplace.css so the native pages read as one site.
 */

/* TOKENS TAKEN FROM THE SITE'S OWN ELEMENTOR KIT (post-8.css) AND THE HOMEPAGE CSS
   (post-15362.css), not invented. Corrected 2026-07-21 after a parity audit found this
   page was using a palette lifted from workplace.css instead of the site globals. */
#svc-canvas {
	--svc-navy: #021649;        /* --e-global-color-secondary */
	--svc-navy-deep: #051649;   /* homepage section-heading colour */
	--svc-teal: #029791;        /* --e-global-color-primary / accent */
	--svc-teal-light: #47AEA8;  /* --e-global-color-6f816b6 */
	--svc-teal-dark: #027772;   /* homepage hover teal */
	--svc-forest: #2E5D4B;      /* --e-global-color-e1be6fd */
	--svc-tint: #E4F3F2;        /* --e-global-color-31b1b4e */
	--svc-pale: #F5FAFD;        /* the FAQ band; integration now shares it */
	--svc-cream: #FAF7F2;       /* --e-global-color-01a165a */
	--svc-grey: #f4f4f4;        /* homepage alternating band */
	--svc-ink: #212121;
	--svc-muted: #5B6470;
	--svc-line: #E0E0E0;        /* --e-global-color-a4029ab */

	--svc-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--svc-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Type scale matched to the homepage, not invented. */
	--svc-h2: clamp(30px, 4vw, 42px);   /* homepage section H2 = 42px */
	--svc-h3: clamp(20px, 2vw, 24px);
	--svc-body: 17px;                    /* site body = Inter 16-18px */
	--svc-small: 16px;

	--svc-measure: 720px;
	--svc-wide: 1120px;

	color: var(--svc-ink);
	font-family: var(--svc-sans);
	font-size: var(--svc-body);
	line-height: 1.5;                    /* site body line-height = 1.5em */
}

#svc-canvas *, #svc-canvas *::before, #svc-canvas *::after { box-sizing: border-box; }

#svc-canvas .svc-body {
	max-width: var(--svc-wide);
	margin: 0 auto;
	padding: 0 1.5rem;
}

#svc-canvas .svc-section {
	max-width: var(--svc-measure);
	margin: 0 auto;
	padding: 3.4rem 0;
	border-bottom: 1px solid var(--svc-line);
}
#svc-canvas .svc-section:last-child { border-bottom: 0; }

/* Wide sections break the reading measure on purpose. */
#svc-canvas .svc-helps { max-width: var(--svc-wide); }

/* Section headings match the homepage exactly: DM Serif Display 42px / 600 / 52px
   line-height / 0.9px letter-spacing / #051649. Centred per Sean 2026-07-21. */
#svc-canvas h2 {
	font-family: var(--svc-serif);
	font-weight: 600;
	font-size: var(--svc-h2);
	line-height: 1.24;
	letter-spacing: 0.9px;
	color: var(--svc-navy-deep);
	margin: 0 auto 1.1rem;
	scroll-margin-top: 90px;
	text-align: center;
	max-width: 24ch;
}
/* A lead directly under a centred H2 stays centred with it. */
#svc-canvas .svc-lead { max-width: 62ch; margin-inline: auto; text-align: center; }
#svc-canvas h3 {
	font-family: var(--svc-serif);
	font-weight: 400;
	font-size: var(--svc-h3);
	line-height: 1.25;
	color: var(--svc-navy);
	margin: 0 0 .45rem;
}
#svc-canvas p { margin: 0 0 1.15rem; }
#svc-canvas p:last-child { margin-bottom: 0; }
#svc-canvas a { color: var(--svc-teal-dark); text-underline-offset: 3px; }
#svc-canvas a:hover { color: var(--svc-navy); }

#svc-canvas .svc-lead { color: var(--svc-muted); }
#svc-canvas .svc-lead--centre { max-width: 660px; margin-inline: auto; text-align: center; }

/* ---- Opening answer: the SITE-STANDARD quick-answer component ----
   Matches .ic-qa__q / .ic-qa__a on the other service pages (verified on /anxiety/):
   question in DM Serif Display 24px navy, answer in Inter 19px/1.62 #2c3550 opening
   with a bold navy lead. Redeclared with our own tokens here because this template
   dequeues Elementor, so the --e-global-* variables the other pages inherit do not exist. */
#svc-canvas .svc-answer { padding-top: 3rem; }
/* The site-standard wrapper: 820px, CENTRED, with a 54px teal rule above the question.
   Verified from the live /anxiety/ markup 2026-07-21. */
/* LEFT aligned, which is the documented site standard on /anxiety/ and the other service
   pages. Centring it here put a 24px centred question directly above a 42px centred H2,
   and two centred headings at different sizes read as a mistake (Sean 2026-07-28). */
#svc-canvas .ic-qa { max-width: 820px; margin: 0 auto; text-align: left; }
#svc-canvas .ic-qa__rule {
	display: block;
	width: 54px; height: 3px;
	background: var(--svc-teal);
	border-radius: 2px;
	margin: 0 auto 18px;
}
#svc-canvas .ic-qa__q {
	font-family: var(--svc-serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.25;
	color: var(--svc-navy);
	margin: 0 0 12px;
}
#svc-canvas .ic-qa__a {
	font-family: var(--svc-sans);
	font-size: 19px;
	line-height: 1.62;
	color: #2c3550;
	margin: 0;
}
#svc-canvas .ic-qa__a strong { color: var(--svc-navy); font-weight: 600; }

/* ---- Full-bleed section bands (navy / teal / grey), matching the homepage rhythm ----
   The section breaks out of the centred .svc-body; an inner wrapper re-constrains content. */
#svc-canvas .svc-band-navy,
#svc-canvas .svc-band-teal,
#svc-canvas .svc-band-grey {
	position: relative;
	left: 50%; right: 50%;
	width: 100vw;
	margin-left: -50vw; margin-right: -50vw;
	max-width: 100vw;
	border-bottom: 0;
	padding: 3.6rem 1.5rem;
}
#svc-canvas .svc-band-navy { background: var(--svc-navy-deep); color: #fff; }
#svc-canvas .svc-band-teal { background: var(--svc-teal); color: #fff; }
#svc-canvas .svc-band-grey { background: var(--svc-grey); }
#svc-canvas .svc-band-navy h2,
#svc-canvas .svc-band-teal h2 { color: #fff; }
#svc-canvas .svc-band__inner { max-width: var(--svc-measure); margin: 0 auto; }
#svc-canvas .svc-band-navy .svc-creds__grid,
#svc-canvas .svc-band__inner .svc-quotes__list { margin-left: auto; margin-right: auto; }

/* ---- Credential band: homepage parity (Sean 2026-07-27) ----
   Icon sits LEFT of the serif title (not above), list under the title with round
   white BULLET dots (not check marks), white space between the hero and the band. */
/* Tight band, homepage proportions (Sean 2026-07-27: "how tight the blue bar is...
   and the extra blue"). White space above stays; the BLUE is trimmed by cutting the
   band's own vertical padding roughly in half and letting the grid start immediately. */
#svc-canvas .svc-creds { margin-top: 2.4rem; padding-top: 2rem; padding-bottom: 2rem; }
/* Wide enough that every list item fits on ONE line, which is what makes the homepage
   bar read as uniform; wrapping to two lines is what broke the rhythm here. */
#svc-canvas .svc-creds .svc-band__inner { max-width: 1140px; }
#svc-canvas .svc-creds__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.4rem;
	margin-top: 0;
	align-items: start;
}
#svc-canvas .svc-creds__col {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	column-gap: .7rem;
	row-gap: .45rem;
	align-items: center;
	align-content: start;
	text-align: left;
}
#svc-canvas img.svc-creds__icon {
	width: 38px; height: 38px; object-fit: contain;
	display: block; margin: 0;
	grid-column: 1; grid-row: 1;
}
#svc-canvas .svc-creds__title {
	font-family: var(--svc-serif);
	font-weight: 600;
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.15;
	color: #fff;
	margin: 0;
	grid-column: 2; grid-row: 1;
	white-space: nowrap;
}
#svc-canvas .svc-creds__list {
	list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem;
	grid-column: 2; grid-row: 2;
}
#svc-canvas .svc-creds__list li {
	position: relative;
	font-size: 14px;
	line-height: 1.35;
	color: rgba(255,255,255,.92);
	padding-left: .95rem;
}
#svc-canvas .svc-creds__list li::before {
	content: "";
	position: absolute;
	left: 0; top: .45em;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #fff;
}
/* All-screens behaviour: keep three columns only while they are wide enough for
   one-line items (that single-line rhythm IS the homepage's uniform look). Below
   that, stack columns that keep the icon-left geometry and centre in the band. */
@media (max-width: 860px) {
	#svc-canvas .svc-creds__grid { grid-template-columns: 1fr; gap: 1.3rem; }
	#svc-canvas .svc-creds__col { width: 100%; max-width: 380px; margin: 0 auto; }
}

/* ---- Credential chips (Meet Sean) ----
   Homepage parity: abbreviation with a teal bar, full credential name in a hover
   tooltip (title attribute), matching the homepage's inline button pills. */
#svc-canvas .svc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.3rem 0 0; padding: 0; }
#svc-canvas .svc-chip {
	font-family: var(--svc-sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--svc-navy);
	border-left: 3px solid var(--svc-teal);
	padding: .12rem 0 .12rem .55rem;
	cursor: help;
}

/* ---- Bio card (homepage "Meet Sean Lewis" parity) ----
   Portrait LEFT with a play-button overlay, text + chips + button RIGHT, vertically
   centred. When the video facade activates, the card collapses to one column and the
   media figure becomes a 16:9 iframe frame. */
/* Measured against the live homepage 2026-07-27: portrait 391x587 (2:3), 8px radius,
   NO shadow, 50px gutter, image about 31% of the row, and the H2 sits INSIDE the right
   column (left aligned, 42px) rather than centred above the section. */
#svc-canvas .svc-sean { max-width: var(--svc-wide); }
#svc-canvas .svc-bio {
	display: grid;
	grid-template-columns: minmax(260px, 391px) 1fr;
	gap: 50px;
	align-items: center;
	max-width: var(--svc-wide);
	margin: 0 auto;
}
#svc-canvas .svc-bio__media {
	position: relative;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var(--svc-tint);
}
/* The bio H2 lives in the text column. Centred within that column per Sean 2026-07-27
   ("ensure all h2 is centered"); it keeps the homepage POSITION (right of the portrait)
   while matching every other H2 on the page for alignment, size and weight. */
#svc-canvas .svc-bio__text > h2 {
	text-align: center;
	max-width: none;
	margin: 0 0 1rem;
}
#svc-canvas .svc-bio__media img { display: block; width: 100%; height: auto; }
#svc-canvas .svc-bio__play {
	position: absolute;
	top: 14px; right: 14px;
	width: 50px; height: 50px;
	border-radius: 50%;
	background: #f00;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .30);
	transition: transform .15s ease;
	padding: 0;
}
#svc-canvas .svc-bio__play:hover { transform: scale(1.08); }
#svc-canvas .svc-bio__play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#svc-canvas .svc-bio__play svg { width: 22px; height: 22px; fill: #fff; margin-left: 2px; }
#svc-canvas .svc-bio--video { grid-template-columns: 1fr; }
#svc-canvas .svc-bio--video .svc-bio__media { aspect-ratio: 16 / 9; border-radius: 12px; background: #000; }
#svc-canvas .svc-bio__iframe { display: block; width: 100%; height: 100%; border: 0; }
#svc-canvas .svc-bio__lead { font-size: 18px; line-height: 1.55; color: var(--svc-ink); margin: 0 0 1rem; }
#svc-canvas .svc-bio__cap { margin: .9rem 0 0; font-size: 13px; line-height: 1.5; color: var(--svc-muted); }
#svc-canvas .svc-btn {
	display: inline-block;
	margin-top: 1.3rem;
	padding: .7rem 1.5rem;
	background: var(--svc-teal);
	color: #fff;
	border-radius: 6px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background .15s ease;
}
#svc-canvas .svc-btn:hover { background: var(--svc-teal-dark); color: #fff; }
#svc-canvas .svc-btn--outline {
	background: transparent;
	color: var(--svc-teal-dark);
	border: 1px solid var(--svc-teal);
}
#svc-canvas .svc-btn--outline:hover { background: var(--svc-tint); color: var(--svc-navy); }

/* ---- Video facade: poster only until clicked ---- */
#svc-canvas .svc-video { margin: 1.8rem 0 0; }
#svc-canvas .svc-video__frame {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	background: var(--svc-navy);
	line-height: 0;
	text-decoration: none;
}
#svc-canvas img.svc-video__poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .3s ease, filter .3s ease;
	filter: saturate(.92) brightness(.94);
}
#svc-canvas .svc-video__frame:hover img.svc-video__poster { transform: scale(1.02); filter: none; }
#svc-canvas .svc-video__play {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
#svc-canvas .svc-video__play svg { width: 68px; height: 48px; }
#svc-canvas .svc-video__play-bg { fill: #212121; fill-opacity: .78; transition: fill .2s ease, fill-opacity .2s ease; }
#svc-canvas .svc-video__frame:hover .svc-video__play-bg { fill: #f00; fill-opacity: 1; }
#svc-canvas .svc-video__label {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 1.4rem 1.2rem .9rem;
	font-family: var(--svc-sans);
	font-size: var(--svc-small);
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
	background: linear-gradient(180deg, rgba(2,22,73,0) 0%, rgba(2,22,73,.72) 100%);
}
#svc-canvas .svc-video__iframe {
	display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
	border: 0; border-radius: 12px; background: #000;
}
#svc-canvas .svc-video__cap {
	margin: .7rem 0 0;
	font-size: 14px; line-height: 1.5; color: var(--svc-muted);
}

/* ---- Peer endorsements: sliding carousel on the TEAL band (homepage parity) ----
   White-outline rounded container, italic white quotes, quote-mark avatar circle,
   side arrows, dots below. 2 per view desktop, 1 mobile. All slides ship in HTML. */
#svc-canvas .svc-quotes .svc-lead { color: rgba(255,255,255,.92); }
/* Homepage carousel measured 2026-07-27: 1214px wide, heading on ONE line, no subtitle. */
#svc-canvas .svc-band__inner--carousel { max-width: 1220px; }
#svc-canvas .svc-quotes h2 { max-width: none; }
#svc-canvas .svc-carousel {
	position: relative;
	margin-top: 2rem;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 16px;
	padding: 2.2rem 3.4rem 2.4rem;
}
#svc-canvas .svc-carousel__viewport { overflow: hidden; }
#svc-canvas .svc-carousel__track {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform .5s ease;
}
#svc-canvas .svc-carousel__slide { flex: 0 0 50%; min-width: 0; padding: 0 1.2rem; }
#svc-canvas .svc-quote { margin: 0; padding: 0; text-align: center; }
#svc-canvas .svc-quote__text { margin: 0; padding: 0; border: 0; }
#svc-canvas .svc-quote__text p { margin: 0; font-style: italic; font-size: 15px; line-height: 1.62; color: #fff; }
#svc-canvas .svc-quote__by { margin-top: 1.1rem; display: flex; align-items: center; justify-content: center; gap: .7rem; }
#svc-canvas .svc-quote__avatar {
	width: 40px; height: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	background: rgba(255,255,255,.28);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--svc-serif);
	font-size: 17px;
	letter-spacing: -2px;
	color: #fff;
}
#svc-canvas .svc-quote__who { text-align: left; }
#svc-canvas .svc-quote__name { display: block; font-style: normal; font-weight: 700; font-size: 16px; color: #fff; }
#svc-canvas .svc-quote__creds { display: block; font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: .03em; }
#svc-canvas .svc-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	padding: .3rem .6rem;
	opacity: .85;
	transition: opacity .15s ease;
}
#svc-canvas .svc-carousel__arrow:hover { opacity: 1; }
#svc-canvas .svc-carousel__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#svc-canvas .svc-carousel__arrow--prev { left: .5rem; }
#svc-canvas .svc-carousel__arrow--next { right: .5rem; }
#svc-canvas .svc-carousel__dots { display: flex; gap: .55rem; justify-content: center; margin-top: 1.7rem; }
#svc-canvas .svc-carousel__dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	border: 0; padding: 0;
	background: rgba(255,255,255,.5);
	cursor: pointer;
}
#svc-canvas .svc-carousel__dot[aria-current="true"] { background: var(--svc-navy-deep); }
/* No-JS: the track simply wraps and every quote stacks visibly. */
#svc-canvas .svc-carousel:not(.svc-carousel--js) .svc-carousel__track { flex-wrap: wrap; gap: 1.6rem 0; }
#svc-canvas .svc-carousel:not(.svc-carousel--js) .svc-carousel__arrow { display: none; }

/* ---- Trust / scope: homepage "Evidence-Informed Care" card parity ----
   Teal-outlined card, pale tint panel inside, teal icon over a centred serif title over
   the full text. No truncation and no per-card reveal. */
#svc-canvas .svc-trust { max-width: var(--svc-wide); }
#svc-canvas .svc-trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2rem; }
#svc-canvas .svc-trust__block {
	border: 1px solid var(--svc-teal);
	border-radius: 10px;
	padding: 8px;
	background: #fff;
}
#svc-canvas .svc-trust__inner {
	background: #F2FAF9;
	border-radius: 6px;
	padding: 1.6rem 1.3rem;
	height: 100%;
	text-align: center;
}
#svc-canvas .svc-trust__icon { display: block; margin: 0 auto .9rem; width: 40px; height: 40px; }
#svc-canvas .svc-trust__icon svg { width: 100%; height: 100%; fill: var(--svc-teal); display: block; }
#svc-canvas .svc-trust__title {
	font-family: var(--svc-serif);
	font-size: 21px; font-weight: 600; letter-spacing: normal; text-transform: none;
	color: var(--svc-navy);
	margin: 0 0 .7rem; padding-bottom: 0; border-bottom: 0;
	line-height: 1.25;
}
#svc-canvas .svc-trust__block p { font-size: 15px; line-height: 1.6; color: var(--svc-ink); margin: 0; }
#svc-canvas .svc-trust__cta { text-align: center; margin: 2rem 0 0; }
#svc-canvas .svc-trust__cta .svc-btn { margin-top: 0; }

/* ---- Contact motion card (teaser -> slide-down NAP) ----
   Replaces the old static office card. The panel animates via grid-template-rows
   (0fr -> 1fr), the height transition that works on auto-height content with no JS
   measuring. Panel content is server-rendered and only clipped, so the NAP stays in
   the DOM and crawlable; the template's <noscript> force-opens it when JS is off. */
#svc-canvas .svc-contact {
	max-width: 760px;
	margin: 1.4rem auto 0;
	background: var(--svc-tint);
	border: 1px solid var(--svc-line);
	border-radius: 14px;
	overflow: hidden;
}
#svc-canvas img.svc-contact__banner {
	display: block;
	width: 100%;
	height: clamp(150px, 26vw, 210px);
	object-fit: cover;
	object-position: 50% 55%;
}
#svc-canvas .svc-contact__teaser-body { padding: 1.3rem 1.5rem 1.5rem; text-align: center; }
#svc-canvas .svc-contact__name {
	font-family: var(--svc-serif);
	font-size: var(--svc-h3);
	color: var(--svc-navy);
	margin: 0 0 .3rem;
}
#svc-canvas .svc-contact__where { color: var(--svc-muted); font-size: var(--svc-small); margin: 0 0 1rem; }
/* The card is ALWAYS OPEN (Sean 2026-07-27): the toggle and the collapsing panel were
   removed, so this is now a plain static block. Nothing to expand, nothing to animate. */
#svc-canvas .svc-contact__panel { display: block; }
#svc-canvas .svc-contact__panel-inner { min-height: 0; }
#svc-canvas .svc-contact__teaser-body { padding-bottom: 1.1rem; }
#svc-canvas .svc-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 1.6rem;
	align-items: center;
	padding: 0 1.5rem 1.6rem;
}
/* Details centred, homepage Colwood Corners parity. */
#svc-canvas .svc-contact__details { text-align: center; }
#svc-canvas .svc-contact__addr { margin: 0 0 .7rem; font-size: var(--svc-small); line-height: 1.7; }
#svc-canvas .svc-contact__meta { margin: 0 0 .3rem; font-size: 14px; color: var(--svc-muted); }
#svc-canvas .svc-contact__details .svc-btn--outline { margin-top: 1rem; border-radius: 999px; padding: .6rem 1.6rem; background: #fff; }
#svc-canvas .svc-contact__map { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; }
#svc-canvas .svc-contact__map a { display: block; line-height: 0; }
#svc-canvas .svc-contact__map img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
	#svc-canvas .svc-contact__grid { grid-template-columns: 1fr; }
	#svc-canvas .svc-contact__map { order: -1; max-width: 340px; margin: 0 auto; }
}

/* Session media biases slightly up so the warm horizon + sun band survive a tall crop. */
#svc-canvas .svc-session .svc-media-row__media img { object-position: 50% 42%; }

/* ---- On-page contact form (same component as the workplace page) ----
   Form + "reach Sean directly" aside on the left, tall photo filling the right. The
   section itself stays on white rather than taking the workplace page's tint card,
   because the location card directly below is already tint and two stacked tint
   boxes read as one heavy block. The aside carries the tint instead. */
#svc-canvas .svc-cform { max-width: var(--svc-wide); }
#svc-canvas .svc-cform__intro { max-width: 62ch; margin-inline: auto; text-align: center; }
/* Form is open on arrival: no disclosure, no toggle (Sean 2026-07-27). */
#svc-canvas .svc-cform__open { margin-top: .5rem; }
#svc-canvas .svc-cform__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 2rem;
	align-items: stretch;
	margin-top: 1.5rem;
	text-align: left;
}
#svc-canvas .svc-cform__main { display: flex; flex-direction: column; gap: 1.25rem; }
#svc-canvas .svc-cform__form .wpforms-container { margin: 0; }
#svc-canvas .svc-cform__info {
	background: var(--svc-tint);
	border-radius: 14px;
	padding: 1.4rem 1.5rem;
}
#svc-canvas .svc-cform__info h3 { font-size: 1.15rem; margin: 0 0 .9rem; }
#svc-canvas .svc-cform__info p { font-size: var(--svc-small); line-height: 1.5; margin: 0 0 .9rem; }
#svc-canvas .svc-cform__info p:last-child { margin-bottom: 0; }
#svc-canvas .svc-cform__opt { font-weight: 400; font-size: .82rem; color: var(--svc-muted); }
#svc-canvas .svc-cform__media { margin: 0; }
#svc-canvas .svc-cform__media img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 16px; display: block;
	box-shadow: 0 6px 24px rgba(2, 22, 73, .12);
}

/* Form 4968 still carries WPForms' old default blue (#066aab) because four other pages
   share it. Rather than edit the shared form, re-skin it to the brand HERE only. Modern
   WPForms reads these custom properties; the explicit button rules below are the
   backstop for versions that do not. */
#svc-canvas .wpforms-container {
	--wpforms-button-background-color: #2E5D4B;
	--wpforms-button-border-color: #2E5D4B;
	--wpforms-button-text-color: #ffffff;
	--wpforms-button-border-radius: 8px;
	--wpforms-label-color: #021649;
	--wpforms-label-sublabel-color: #5B6470;
	--wpforms-field-text-color: #2A2E35;
	--wpforms-field-border-color: rgba(2, 22, 73, .18);
	--wpforms-field-border-radius: 10px;
	--wpforms-page-break-color: #2E5D4B;
}
#svc-canvas .wpforms-container button[type="submit"],
#svc-canvas .wpforms-container .wpforms-submit {
	background: var(--svc-forest);
	border: 0;
	color: #fff;
	border-radius: 8px;
	font-family: var(--svc-sans);
	font-weight: 600;
	padding: .85rem 1.8rem;
	transition: background .15s ease;
}
#svc-canvas .wpforms-container button[type="submit"]:hover,
#svc-canvas .wpforms-container .wpforms-submit:hover { background: var(--svc-teal-dark); }
#svc-canvas .wpforms-container .wpforms-field-label { font-family: var(--svc-sans); color: var(--svc-navy); }

@media (max-width: 900px) {
	#svc-canvas .svc-cform__grid { grid-template-columns: 1fr; align-items: start; }
	#svc-canvas .svc-cform__media img { height: auto; max-height: 340px; }
}

/* ---- Progressive disclosure ---- */
#svc-canvas .svc-reveal { margin-top: 1.4rem; }
#svc-canvas .svc-reveal > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--svc-sans);
	font-size: var(--svc-small);
	font-weight: 500;
	color: var(--svc-teal-dark);
	padding: .5rem 0;
}
#svc-canvas .svc-reveal > summary::-webkit-details-marker { display: none; }
#svc-canvas .svc-reveal > summary::after {
	content: "";
	width: .5rem; height: .5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .15s ease;
}
#svc-canvas .svc-reveal[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
#svc-canvas .svc-reveal > summary:hover { color: var(--svc-navy); }
#svc-canvas .svc-reveal > *:not(summary) { padding-top: .5rem; }

/* ---- Session steps ---- */
#svc-canvas .svc-steps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
#svc-canvas .svc-steps__item {
	padding-left: 1.1rem;
	border-left: 2px solid var(--svc-tint);
}
#svc-canvas .svc-steps__item p { margin: 0; color: var(--svc-muted); }

/* ---- Card router -> native explorer (left tablist / right panel) ----
   Ported from the workplace .wmh-explore pattern, scoped under #svc-canvas and using
   the site --svc-* tokens. Panels overlap in one grid cell so switching never reflows. */
#svc-canvas .svc-explore {
	display: grid; grid-template-columns: minmax(240px, 38%) 1fr;
	gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 2rem;
}
#svc-canvas .svc-explore__list { display: flex; flex-direction: column; }
#svc-canvas .svc-explore__name {
	cursor: pointer; text-align: left; background: none; border: 0;
	border-left: 3px solid transparent; padding: .8rem 0 .8rem 1rem; width: 100%;
	white-space: normal;                        /* override theme button nowrap */
	transition: border-color .15s ease, color .15s ease;
}
#svc-canvas .svc-explore__name-title {
	font-family: var(--svc-serif); font-weight: 400; font-size: 20px;
	line-height: 1.25; color: var(--svc-navy);
}
#svc-canvas .svc-explore__name:hover .svc-explore__name-title { color: var(--svc-teal-dark); }
#svc-canvas .svc-explore__name[aria-selected="true"] { border-left-color: var(--svc-teal); }
#svc-canvas .svc-explore__name[aria-selected="true"] .svc-explore__name-title {
	color: var(--svc-teal-dark); font-weight: 600;
}
#svc-canvas .svc-explore__name:focus-visible { outline: 3px solid var(--svc-teal); outline-offset: 2px; }

/* Panels overlap in one cell so switching never reflows the page. */
#svc-canvas .svc-explore__panels { display: block; }
#svc-canvas .svc-explore--js .svc-explore__panels { display: grid; }
#svc-canvas .svc-explore--js .svc-explore__panel { grid-area: 1 / 1; }
#svc-canvas .svc-explore--js .svc-explore__panel[hidden] { display: block; visibility: hidden; }
#svc-canvas .svc-explore__panel { margin: 0 0 1.5rem; }
#svc-canvas .svc-explore--js .svc-explore__panel { margin: 0; }

/* Art box matches the homepage services teaser EXACTLY, because that component is the same
   thing this one is: a vertical tab list with one preview card beside it, picture on top and
   centred copy below. Canonical values from .exhale-home-teaser__img / __preview in
   header-footer.css: aspect-ratio 413/400, capped at 460px wide, 12px radius, 18px to the copy.
   At the 617px panel this renders 460x446, the same box the homepage draws.

   Do NOT re-derive this from the homepage's other card sets. The Treatment Areas image grid
   looks like the obvious reference and is display:none on the live page, and the 361x596
   population cards are a different component under "Counselling Built for Your World". */
#svc-canvas .svc-explore__art {
	display: block; width: 100%; max-width: 460px; height: auto; aspect-ratio: 413 / 400;
	object-fit: cover; object-position: center center;
	border-radius: 12px; margin: 0 auto 18px; background: var(--svc-tint);
}
#svc-canvas .svc-explore__title { font-size: var(--svc-h3); margin: 0 0 .5rem; }
#svc-canvas .svc-explore__lead { max-width: 52ch; color: var(--svc-ink); margin: 0 0 .9rem; }
#svc-canvas .svc-explore__link {
	display: inline-block; font-weight: 600; color: var(--svc-teal-dark);
	text-decoration: underline; text-underline-offset: 3px;
}
#svc-canvas .svc-explore__link:hover { color: var(--svc-navy); }

/* ---- Faith cluster: compact one-line rows, small thumbs, bottom of page ---- */
#svc-canvas .svc-cluster__list { display: grid; gap: .8rem; margin-top: 1.6rem; }
#svc-canvas .svc-cluster__item {
	display: grid;
	grid-template-columns: 120px 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 1.1rem;
	row-gap: .15rem;
	align-items: center;
	align-content: center;
	padding: .85rem 1rem;
	background: var(--svc-tint);
	border: 1px solid transparent;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, background .15s ease;
}
#svc-canvas .svc-cluster__item:hover { border-color: var(--svc-teal); background: #fff; }
#svc-canvas .svc-cluster__title {
	font-family: var(--svc-serif);
	font-size: 19px;
	line-height: 1.2;
	color: var(--svc-navy);
	grid-column: 2;
}
#svc-canvas .svc-cluster__body { font-size: 14px; line-height: 1.45; color: var(--svc-muted); grid-column: 2; }
#svc-canvas .svc-cluster__go { font-size: 14px; font-weight: 500; color: var(--svc-teal-dark); grid-column: 2; }
/* Small thumbnail spanning the three text rows. */
#svc-canvas img.svc-cluster__thumb {
	display: block; width: 120px; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: 8px; margin: 0; background: var(--svc-tint);
	grid-column: 1; grid-row: 1 / span 3;
}

/* ---- Alternating media rows (photo + prose) ----
   Ported from the workplace .wmh-media-row pattern, scoped here. The photo is absolutely
   positioned (inset:0; object-fit:cover) so the TEXT column sets the row height and the
   photo crops to fit; the tint background is an anti-flash floor. --right flips the order. */
#svc-canvas .svc-mediasec { max-width: var(--svc-wide); }
#svc-canvas .svc-media-row {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 2.5rem); align-items: stretch; margin-top: 1.8rem;
}
#svc-canvas .svc-media-row__media {
	position: relative; margin: 0; border-radius: 12px; overflow: hidden;
	box-shadow: 0 6px 24px rgba(2, 22, 73, .10); min-height: 240px;
	background: var(--svc-tint);
}
#svc-canvas .svc-media-row__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
}
#svc-canvas .svc-media-row--right .svc-media-row__media { order: 2; }
#svc-canvas .svc-media-row__text > *:first-child { margin-top: 0; }
#svc-canvas .svc-media-row__text > *:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
	#svc-canvas .svc-media-row { grid-template-columns: 1fr; gap: 1.25rem; }
	#svc-canvas .svc-media-row--right .svc-media-row__media { order: 0; }
	#svc-canvas .svc-media-row__media { min-height: 0; }
	#svc-canvas .svc-media-row__media img { position: static; height: auto; max-height: 420px; }
}

/* ---- Full services directory (homepage-style) ---- */
#svc-canvas .svc-directory { max-width: var(--svc-wide); }
#svc-canvas .svc-dir {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .6rem;
	margin-top: 1.8rem;
}
#svc-canvas .svc-dir__item {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .85rem 1rem;
	border: 1px solid var(--svc-line);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease;
}
#svc-canvas .svc-dir__item:hover { border-color: var(--svc-teal); }
#svc-canvas img.svc-dir__icon { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
#svc-canvas .svc-dir__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
#svc-canvas .svc-dir__title { font-size: var(--svc-small); font-weight: 600; color: var(--svc-navy); line-height: 1.25; }
#svc-canvas .svc-dir__desc { font-size: 14px; color: var(--svc-muted); line-height: 1.35; }
/* Two labelled subgroups inside the collapsed directory (Concerns / Approaches). */
#svc-canvas .svc-dir__group { margin-top: 1.6rem; }
#svc-canvas .svc-dir__group-label {
	font-family: var(--svc-sans);
	font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
	color: var(--svc-teal-dark);
	margin: 0 0 .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--svc-line);
}
#svc-canvas .svc-dir__group .svc-dir { margin-top: 0; }

/* ---- Coverage + insurer bar (shared partial, scoped here) ----
   Homepage parity (Sean 2026-07-27): 8 logos per row WITH their names underneath, no
   horizontal scrollbar. The partial emits fixed rows of 6, so `.insurance-row { display:
   contents }` dissolves those rows and lets ONE grid own the columns. That way the
   column count is pure CSS and the shared partial did not need its chunking changed. */
#svc-canvas .svc-insurance { max-width: var(--svc-wide); }
#svc-canvas .svc-insurance .insurance-grid-wrapper { text-align: center; padding: 1.6rem 0 0; }
/* "Extended Health Insurance" sub-heading hidden here only (Sean 2026-07-27). It lives
   in the SHARED partial, so it is hidden rather than deleted; the workplace page keeps it. */
#svc-canvas .svc-insurance .insurance-grid-wrapper h3 { display: none; }
#svc-canvas .svc-insurance .insurance-subtext { font-size: 14px; color: var(--svc-muted); margin: 0 0 1.5rem; font-style: italic; }
#svc-canvas .svc-insurance .insurance-scroll-container { overflow: visible; padding-bottom: 0; }
/* Rows stay real rows (the partial now emits 8/7/7 to match the homepage) and each one
   centres itself, so rows 2 and 3 sit centred under row 1 exactly as on the homepage.
   No brick offset, no horizontal scroll. */
#svc-canvas .svc-insurance .insurance-grid { display: block; min-width: 0; text-align: center; }
#svc-canvas .svc-insurance .insurance-row {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 1.5rem 1.4rem; margin: 0 0 1.5rem;
}
#svc-canvas .svc-insurance .insurance-row:last-child { margin-bottom: 0; }
#svc-canvas .svc-insurance .insurance-row:nth-child(even) { margin-left: 0; }
#svc-canvas .svc-insurance .insurance-item { width: 104px; flex: 0 0 104px; text-align: center; }
#svc-canvas .svc-insurance .insurance-item img {
	max-height: 46px; width: auto; max-width: 100%;
	display: block; margin: 0 auto .45rem; object-fit: contain;
}
#svc-canvas .svc-insurance .insurance-item__name {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	color: var(--svc-muted);
}
@media (max-width: 620px) {
	#svc-canvas .svc-insurance .insurance-item { width: 88px; flex: 0 0 88px; }
	#svc-canvas .svc-insurance .insurance-row { gap: 1.2rem 1rem; margin-bottom: 1.2rem; }
}

/* ---- Integration: five practices, faith layer on a switch ----
   The faith layer is always rendered. Switching off collapses it with grid-template-rows
   (0fr -> 1fr), the same technique the old contact card used, so there is no height
   measuring in JS. Default is ON, which is also the no-JS state. */
/* Full-bleed cream ground: five white cards on a white page was a large part of why this
   read as a wall. #roles stays white so the page does not become a run of stripes. */
#svc-canvas .svc-integ {
	position: relative; left: 50%; right: 50%;
	width: 100vw; margin-left: -50vw; margin-right: -50vw; max-width: 100vw;
	border-bottom: 0; padding: 3.4rem 1.5rem 3.8rem;
	background: var(--svc-pale);
}
#svc-canvas .svc-integ > * { max-width: var(--svc-wide); margin-left: auto; margin-right: auto; }
#svc-canvas .svc-integ > h2 { max-width: 24ch; }

/* Segmented control: BOTH modes named and visible at rest. Hidden until JS adds
   .svc-integ--js to the wrap: with JS off both lanes already render, so the control is
   chrome, not content, and a button that does nothing when pressed is worse than none. */
#svc-canvas .svc-integ__switchbar { display: none; }
#svc-canvas .svc-integ--js .svc-integ__switchbar { display: flex; justify-content: center; margin: 1.8rem 0 .6rem; }
#svc-canvas .svc-integ__seg {
	display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px;
	background: #fff; border: 1px solid var(--svc-line); border-radius: 999px; padding: 4px;
	max-width: 100%;
}
#svc-canvas .svc-integ__segbtn {
	cursor: pointer; border: 0; border-radius: 999px; background: transparent;
	font-family: var(--svc-sans); font-size: 15px; font-weight: 600; color: var(--svc-muted);
	padding: .6rem 1.15rem; min-height: 44px; white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
#svc-canvas .svc-integ__segbtn[aria-pressed="true"] { background: var(--svc-teal); color: #fff; }
#svc-canvas .svc-integ__segbtn:focus-visible { outline: 3px solid var(--svc-navy); outline-offset: 2px; }

/* Ledger: hairline-separated entries with an ordinal rail, not five bordered cards. */
#svc-canvas .svc-integ__list { list-style: none; margin: 1.6rem 0 0; padding: 0; position: relative; }
/* The spine. One hairline runs the length of the ordinal rail; a second teal strand appears
   beside it when the faith layer is on, so the switch changes the SHAPE of the section and
   not only its text, which is the section's whole thesis made visible. Pure CSS off the
   existing is-on class: no assets, no requests, no added height. Both strands show by
   default, which is also the no-JS state, matching the faith layer being visible there. */
#svc-canvas .svc-integ__list::before,
#svc-canvas .svc-integ__list::after {
	content: ""; position: absolute; top: 1rem; bottom: 1rem; width: 1px; pointer-events: none;
}
#svc-canvas .svc-integ__list::before { left: 11px; background: var(--svc-line); }
#svc-canvas .svc-integ__list::after {
	left: 15px; background: var(--svc-teal-light); opacity: 1; transition: opacity .3s ease;
}
#svc-canvas .svc-integ--js:not(.is-on) .svc-integ__list::after { opacity: 0; }
#svc-canvas .svc-integ__item {
	position: relative;
	padding: 1.5rem 0 1.6rem 86px;
	border-top: 1px solid var(--svc-line);
}
#svc-canvas .svc-integ__item:first-child { border-top: 0; }
/* Ordinal + glyph sit ON the spine and punch through it in the band colour, so the rail
   reads as stations on a line rather than a rule running across the text.
   position:absolute is load-bearing and the whole reason this stays height-neutral. In flow
   the stacked ordinal + glyph measured 80px against a 65px heading, so the RAIL began sizing
   the row and every item grew ~15px (measured live: 386 -> 401). Out of flow it cannot size
   anything. Its containing block is its own grid area, and even where that is not honoured
   the fallback is the item's padding box, which starts at the same point. */
#svc-canvas .svc-integ__num {
	position: absolute; top: 1.5rem; left: 0; width: 64px;
	font-family: var(--svc-serif); font-size: 34px; line-height: 1;
	color: var(--svc-teal-light);
	display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
	z-index: 1;
	background: var(--svc-pale);
	padding: .3rem 0 .55rem;
}
/* The station node. This slot first held five monoline pictograms (scales, bowl, unclosed
   loop, cracked seal, forking path). Eye-tested on the live page 2026-07-28 at both 24px and
   32px, they failed the same way at both sizes: a monoline mark directly under a serif
   numeral gets read as a LETTER, so the rail said "01 T", "02 u", "03 C". That is a structural
   confusion, not a drawing problem, so redrawing again would not have fixed it.
   A node cannot be misread as type, does the same scanning job, and carries the state: hollow
   when the faith layer is off, filled teal when it is on, so the stations agree with the
   second strand instead of competing with it. */
#svc-canvas .svc-integ__num::after {
	content: ""; display: block;
	width: 9px; height: 9px; margin-left: 7px; border-radius: 50%;
	background: var(--svc-teal); border: 1.5px solid var(--svc-teal);
	transition: background-color .3s ease, border-color .3s ease;
}
#svc-canvas .svc-integ--js:not(.is-on) .svc-integ__num::after {
	background: var(--svc-pale); border-color: var(--svc-teal-light);
}
#svc-canvas .svc-integ__title { font-size: var(--svc-h3); margin: 0; }
/* Each practice is a native details. Summary styling deliberately mirrors .svc-faq__q so the
   page has ONE disclosure grammar; the marker is the same + / - pair. */
#svc-canvas .svc-integ__dsum {
	list-style: none; cursor: pointer; position: relative; padding: .1rem 2.4rem .1rem 0;
}
#svc-canvas .svc-integ__dsum::-webkit-details-marker { display: none; }
#svc-canvas .svc-integ__dsum::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	font-family: var(--svc-sans); font-size: 24px; line-height: 1; color: var(--svc-teal);
}
#svc-canvas .svc-integ__d[open] .svc-integ__dsum::after { content: "\2013"; }
#svc-canvas .svc-integ__dsum:focus-visible { outline: 3px solid var(--svc-navy); outline-offset: 4px; }
#svc-canvas .svc-integ__dbody { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .9rem; padding-top: .9rem; }
/* The onward route is a teal button now (Sean 2026-07-28), not a text link. */
#svc-canvas .svc-integ__cta {
	display: inline-block; margin-top: 1rem; padding: .62rem 1.15rem;
	background: var(--svc-teal); color: #fff; border: 1px solid var(--svc-teal); border-radius: 999px;
	font-family: var(--svc-sans); font-size: 14.5px; font-weight: 600; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
#svc-canvas .svc-integ__cta:hover { background: var(--svc-teal-dark); border-color: var(--svc-teal-dark); color: #fff; }
#svc-canvas .svc-integ__cta:focus-visible { outline: 3px solid var(--svc-navy); outline-offset: 3px; }
#svc-canvas .svc-integ__said {
	font-style: italic; color: var(--svc-navy); font-size: 18px; line-height: 1.5;
	margin: 0; padding-left: .9rem; border-left: 3px solid var(--svc-teal-light);
	max-width: 60ch;
}
/* Two lanes at desktop: the faith layer sits BESIDE the clinical work, so switching it off
   closes a column rather than sliding a drawer shut. min-width:0 is required or a grid
   child refuses to shrink below its content and the 0fr collapse silently does nothing. */
@media (min-width: 880px) {
	#svc-canvas .svc-integ__dbody {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "said said" "clin faith";
		column-gap: 1.8rem;
	}
	#svc-canvas .svc-integ__said { grid-area: said; }
	#svc-canvas .svc-integ__layer--clin { grid-area: clin; }
	#svc-canvas .svc-integ__layer--faith { grid-area: faith; }
	/* minmax(0, 0fr), never a bare 0fr, and no transition on grid-template-columns: both were
	   verified failures on this exact component (2026-07-27). */
	#svc-canvas .svc-integ--js:not(.is-on) .svc-integ__dbody {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
	}
	#svc-canvas .svc-integ--js .svc-integ__layer--faith { min-width: 0; }
}
/* The one diagram (item 01, clinical lane). Abstract: no axis, no ticks, no numbers.
   It rides the clinical column's slack when the faith lane is open, so its default-mode
   height cost is ~0; in Clinical-only it adds its own height, which is the cheap mode. */
/* max-width 400 is sized to the measured slack, not taste: the clinical column runs about
   151px shorter than the open faith lane on item 01 (386 vs 235). At 400px the SVG renders
   ~120px + caption ~36, so the diagram rides that slack and the default mode pays ~0. The
   first cut at 520px measured +104px on the item; this is the fix. */
#svc-canvas .svc-integ__diag { margin: 1rem 0 0; max-width: 400px; }
#svc-canvas .svc-integ__diag svg { display: block; width: 100%; height: auto; }
#svc-canvas .svc-diag__a { stroke: var(--svc-navy); }
#svc-canvas .svc-diag__b { stroke: var(--svc-teal); }
#svc-canvas .svc-diag__c { stroke: var(--svc-teal-dark); }
#svc-canvas .svc-integ__diag text { font-family: var(--svc-sans); font-size: 13px; fill: var(--svc-muted); stroke: none; }
#svc-canvas .svc-integ__diag-cap { margin: .45rem 0 0; font-family: var(--svc-sans); font-size: 13px; line-height: 1.55; color: var(--svc-muted); }

#svc-canvas .svc-integ__tag {
	display: inline-block; font-family: var(--svc-sans); font-size: 11px; font-weight: 700;
	letter-spacing: .09em; text-transform: uppercase; color: var(--svc-muted);
	margin: 0 0 .35rem;
}
#svc-canvas .svc-integ__tag--faith { color: var(--svc-teal-dark); }
/* Text measure capped: the paragraphs were running ~128 characters per line at 1120px,
   roughly double a comfortable measure, which was the single biggest cause of the
   "wall of text" read. Measured on the live page 2026-07-27. */
#svc-canvas .svc-integ__layer p { font-size: var(--svc-small); line-height: 1.62; margin: 0; max-width: 64ch; }
#svc-canvas .svc-integ__layer-inner {
	padding: 1rem 1.15rem; border-radius: 10px; background: var(--svc-tint);
	border-left: 3px solid var(--svc-teal);
}
/* Below the two-lane breakpoint the faith layer still collapses vertically. Single wrapper
   child + zeroed padding, because a 0fr row clips the content box but NOT the padding. */
@media (max-width: 879px) {
	#svc-canvas .svc-integ--js .svc-integ__layer--faith {
		display: grid; grid-template-rows: 1fr; opacity: 1; visibility: visible;
		transition: grid-template-rows .28s ease, opacity .2s ease, visibility 0s;
	}
	#svc-canvas .svc-integ--js .svc-integ__layer-inner {
		overflow: hidden; min-height: 0;
		transition: padding-top .28s ease, padding-bottom .28s ease;
	}
	#svc-canvas .svc-integ--js:not(.is-on) .svc-integ__layer--faith {
		grid-template-rows: 0fr; opacity: 0;
		/* See the visibility note in the 880px-and-up block below. Same defect, same fix. */
		visibility: hidden;
		transition: grid-template-rows .28s ease, opacity .2s ease, visibility 0s linear .28s;
	}
	#svc-canvas .svc-integ--js:not(.is-on) .svc-integ__layer-inner { padding-top: 0; padding-bottom: 0; }
}
@media (min-width: 880px) {
	#svc-canvas .svc-integ--js .svc-integ__layer--faith { overflow: hidden; transition: opacity .25s ease, visibility 0s; }
	/* height:0 AND min-height:0 in the off state. overflow:hidden clips the paint but not the
	   layout height, so with the column closed to 0fr the faith text reflowed one word per line
	   and inflated the row by ~500px of blank space (reported live 2026-07-27). A grid item's
	   min-height defaults to auto — the block-axis twin of the min-width:0 rule above — so
	   without min-height:0 the automatic minimum size floors the row at content height anyway. */
	/* visibility:hidden, delayed past the fade, is an ACCESSIBILITY fix and not a visual one.
	   opacity:0 + height:0 + overflow:hidden hide the lane from sight but leave it in the tab
	   order, while the JS marks the same element aria-hidden="true". Measured on the live page
	   2026-07-28 in the off state: all five onward links still took focus. aria-hidden plus a
	   focusable descendant is a WCAG 4.1.2 failure (axe: aria-hidden-focus), and a keyboard
	   visitor tabbed into five links they could not see. visibility:hidden removes the subtree
	   from the tab order outright, so no inert attribute and no JS change is needed. The 0s
	   delay must equal the opacity duration or the fade becomes a snap. */
	#svc-canvas .svc-integ--js:not(.is-on) .svc-integ__layer--faith {
		opacity: 0; height: 0; min-height: 0; align-self: start;
		visibility: hidden;
		transition: opacity .25s ease, visibility 0s linear .25s;
	}
}

/* The horizon rule: a chapter break between the page's two densest sections. */
#svc-canvas .svc-hrule { margin: 0 auto; padding: 3.2rem 0; max-width: var(--svc-wide); border-bottom: 0; }
#svc-canvas .svc-hrule img {
	display: block; width: 100%; height: clamp(70px, 9vw, 120px);
	object-fit: cover; border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
	#svc-canvas .svc-integ--js .svc-integ__layer--faith { transition: none; }
	#svc-canvas .svc-integ__switch-track,
	#svc-canvas .svc-integ__switch-knob { transition: none; }
}

/* ---- Therapist / pastor chooser + comparison ---- */
#svc-canvas .svc-roles { max-width: var(--svc-wide); }
/* The chooser is the thing to DO in this section, so it reads first: more padding, a
   larger question, and a soft ring so it sits forward of the comparison beside it
   (Sean 2026-07-28: the questions should be the easiest part to see). */
#svc-canvas .svc-roles__chooser {
	max-width: 640px; margin: 1.8rem auto 0; padding: 2.1rem 1.9rem;
	background: var(--svc-tint); border-radius: 16px; text-align: center;
	box-shadow: 0 0 0 1px rgba(2,151,145,.16), 0 10px 26px -18px rgba(2,22,73,.5);
}
#svc-canvas .svc-roles__step {
	font-family: var(--svc-sans); font-size: 11px; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--svc-teal-dark); margin: 0 0 .6rem;
}
#svc-canvas .svc-roles__qtext {
	font-family: var(--svc-serif); font-size: 25px; line-height: 1.28; color: var(--svc-navy);
	margin: 0 0 1.35rem;
}
#svc-canvas .svc-roles__answers { display: grid; gap: .7rem; }
#svc-canvas .svc-roles__a {
	cursor: pointer; text-align: left; background: #fff; border: 1px solid var(--svc-line);
	border-radius: 10px; padding: .85rem 1.1rem; font-family: var(--svc-sans);
	font-size: var(--svc-small); line-height: 1.45; color: var(--svc-ink);
	white-space: normal; transition: border-color .15s ease, background .15s ease;
}
#svc-canvas .svc-roles__a:hover { border-color: var(--svc-teal); background: #fff; }
#svc-canvas .svc-roles__a:focus-visible { outline: 3px solid var(--svc-teal); outline-offset: 2px; }
#svc-canvas .svc-roles__out-title { font-size: var(--svc-h3); margin: 0 0 .6rem; }
#svc-canvas .svc-roles__out p { font-size: var(--svc-small); line-height: 1.6; }
#svc-canvas .svc-roles__reset {
	background: none; border: 0; cursor: pointer; padding: 0; margin-top: .3rem;
	font-family: var(--svc-sans); font-size: 14px;
}
/* Visibility is CLASS driven so the no-JS state is the default and stays readable:
   without JS the questions hide (useless without script) and all three outcomes read as a
   plain list. With JS, .svc-roles--js flips it to one-question-at-a-time. */
#svc-canvas .svc-roles__q { display: none; }
#svc-canvas .svc-roles--js .svc-roles__q { display: none; }
#svc-canvas .svc-roles--js .svc-roles__q.is-current { display: block; }
#svc-canvas .svc-roles__out { display: block; text-align: left; padding-top: .6rem; }
#svc-canvas .svc-roles__out + .svc-roles__out { border-top: 1px solid var(--svc-line); margin-top: 1rem; }
#svc-canvas .svc-roles--js .svc-roles__out { display: none; border-top: 0; margin-top: 0; text-align: center; }
#svc-canvas .svc-roles--js .svc-roles__out.is-shown { display: block; }
#svc-canvas .svc-roles__resetwrap { display: none; }
#svc-canvas .svc-roles--js .svc-roles__resetwrap { display: block; }
#svc-canvas .svc-visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

#svc-canvas .svc-roles__tablewrap { margin-top: 2rem; overflow-x: auto; }
#svc-canvas .svc-roles__table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
#svc-canvas .svc-roles__table th,
#svc-canvas .svc-roles__table td {
	text-align: left; vertical-align: top; padding: .85rem 1rem;
	border-bottom: 1px solid var(--svc-line); line-height: 1.5;
}
#svc-canvas .svc-roles__table thead th {
	font-family: var(--svc-sans); font-size: 12px; font-weight: 700; letter-spacing: .07em;
	text-transform: uppercase; color: var(--svc-teal-dark); border-bottom: 2px solid var(--svc-teal-light);
}
#svc-canvas .svc-roles__table tbody th {
	font-family: var(--svc-sans); font-weight: 600; color: var(--svc-navy); width: 22%;
}
#svc-canvas .svc-roles__table td { color: var(--svc-muted); }
/* Magazine treatment: the two roles are the protagonists, so they get the serif and the
   rule; the criterion labels demote to margin notes. Markup unchanged. */
#svc-canvas .svc-roles__table thead th + th,
#svc-canvas .svc-roles__table thead th:last-child {
	font-family: var(--svc-serif); font-size: clamp(19px, 2vw, 23px); font-weight: 600;
	letter-spacing: normal; text-transform: none; color: var(--svc-navy);
}
/* Phone: stop forcing horizontal scrolling for the substance of the section. Rows become
   stacked cards; data-label reinstates the column heading inside each cell. Every scope
   attribute and the caption are retained so the semantics survive the reflow. */
@media (max-width: 720px) {
	#svc-canvas .svc-roles__tablewrap { overflow-x: visible; }
	#svc-canvas .svc-roles__table { min-width: 0; display: block; }
	#svc-canvas .svc-roles__table thead {
		position: absolute; width: 1px; height: 1px; overflow: hidden;
		clip: rect(0 0 0 0); white-space: nowrap;
	}
	#svc-canvas .svc-roles__table tbody,
	#svc-canvas .svc-roles__table tr,
	#svc-canvas .svc-roles__table th,
	#svc-canvas .svc-roles__table td { display: block; width: auto; }
	#svc-canvas .svc-roles__table tr {
		border: 1px solid var(--svc-line); border-radius: 10px;
		padding: .9rem 1rem; margin-bottom: .8rem;
	}
	#svc-canvas .svc-roles__table th,
	#svc-canvas .svc-roles__table td { border-bottom: 0; padding: .35rem 0; }
	#svc-canvas .svc-roles__table tbody th {
		font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
		color: var(--svc-teal-dark); margin-bottom: .2rem;
	}
	#svc-canvas .svc-roles__table td::before {
		content: attr(data-label);
		display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em;
		text-transform: uppercase; color: var(--svc-navy); margin-bottom: .15rem;
	}
}

/* ---- FAQ: homepage two-column category explorer on a pale band ----
   Reuses .svc-explore (same tablist component as the router), so only the band, the
   panel type scale and the "Read all FAQs" link are FAQ-specific. */
#svc-canvas .svc-band-pale {
	position: relative;
	left: 50%; right: 50%;
	width: 100vw;
	margin-left: -50vw; margin-right: -50vw;
	max-width: 100vw;
	border-bottom: 0;
	padding: 3.4rem 1.5rem;
	background: #F5FAFD;
}
#svc-canvas .svc-band__inner--faq { max-width: var(--svc-wide); margin: 0 auto; }
#svc-canvas .svc-faq h2 { max-width: none; }
/* Panels do not overlap here: an accordion changes height as it opens, so letting the
   panels share one grid cell (the router's trick) would size every panel to the tallest. */
#svc-canvas .svc-explore--faq .svc-explore__panels { display: block; }
#svc-canvas .svc-explore--js.svc-explore--faq .svc-explore__panels { display: block; }
#svc-canvas .svc-explore--js.svc-explore--faq .svc-explore__panel { grid-area: auto; margin: 0; }
#svc-canvas .svc-explore--js.svc-explore--faq .svc-explore__panel[hidden] { display: none; visibility: visible; }
#svc-canvas .svc-explore--faq .svc-explore__name-title { font-family: var(--svc-sans); font-size: 16px; line-height: 1.4; }
#svc-canvas .svc-faq__all { text-align: center; margin: 2rem 0 0; }
/* Pill variant of the existing teal button, so "Read all FAQs" reads as an action rather
   than a text link. Additive modifier: .svc-btn keeps its 6px radius everywhere else. */
#svc-canvas .svc-btn--pill { border-radius: 999px; padding-left: 1.9rem; padding-right: 1.9rem; }
/* Step-by-step detail as bullets (the 'steps' key). Same rhythm as the other lists on the
   page: teal marker, comfortable line height, no bullet hanging outside the text column. */
#svc-canvas .svc-steps__bullets { margin: 0; padding-left: 1.15rem; list-style: none; }
#svc-canvas .svc-steps__bullets li {
	position: relative; margin: 0 0 .5rem; line-height: 1.55; color: var(--svc-ink);
}
#svc-canvas .svc-steps__bullets li::before {
	content: ""; position: absolute; left: -1.15rem; top: .62em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--svc-teal);
}
#svc-canvas .svc-steps__bullets li:last-child { margin-bottom: 0; }

/* ---- FAQ accordion rows ---- */
#svc-canvas .svc-faq__item { border-bottom: 1px solid var(--svc-line); }
#svc-canvas .svc-faq__item:first-of-type { border-top: 1px solid var(--svc-line); }
#svc-canvas .svc-faq__q {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 0;
	font-family: var(--svc-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--svc-navy);
}
#svc-canvas .svc-faq__q::-webkit-details-marker { display: none; }
#svc-canvas .svc-faq__q::after {
	content: "+";
	font-family: var(--svc-sans);
	font-size: 22px;
	color: var(--svc-teal);
	flex: 0 0 auto;
}
#svc-canvas .svc-faq__item[open] .svc-faq__q::after { content: "\2013"; }
#svc-canvas .svc-faq__a { padding: 0 0 1.3rem; color: var(--svc-muted); max-width: 62ch; }

/* ---- References: VISIBLE on the page (YMYL), not hidden behind a disclosure ---- */
#svc-canvas .svc-refs-wrap {
	margin-top: 2rem;
	padding: 1.4rem 1.5rem;
	background: var(--svc-grey);
	border-left: 3px solid var(--svc-teal);
	border-radius: 8px;
	text-align: left;
}
#svc-canvas .svc-refs__title {
	font-family: var(--svc-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--svc-teal-dark);
	margin: 0 0 .7rem;
}
/* Colophon reset. The list was ~500px of the section's 2,868 (measured 2026-07-28);
   three columns recover most of that without hiding a single citation, which respects
   the deliberate YMYL call below: references stay VISIBLE, never behind a disclosure.
   overflow-wrap:anywhere is load-bearing: one unbroken DOI string otherwise widens its
   column and undoes the whole saving. */
#svc-canvas .svc-refs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 .7rem; }
#svc-canvas .svc-refs__head .svc-refs__title { margin: 0; }
#svc-canvas .svc-refs__note { font-family: var(--svc-sans); font-size: 12px; color: var(--svc-muted); }
#svc-canvas .svc-refs { margin: 0; padding-left: 1.3rem; columns: 3; column-gap: 2rem; }
#svc-canvas .svc-refs li { font-size: 14px; line-height: 1.5; color: var(--svc-muted); margin-bottom: .55rem; break-inside: avoid; overflow-wrap: anywhere; }
#svc-canvas .svc-refs li:last-child { margin-bottom: 0; }
#svc-canvas .svc-refs a { color: var(--svc-teal-dark); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { #svc-canvas .svc-refs { columns: 2; } }
@media (max-width: 620px) { #svc-canvas .svc-refs { columns: 1; } }

/* ---- Links, CTA, scope ---- */
#svc-canvas .svc-textlink {
	display: inline-block;
	margin-top: 1rem;
	font-size: var(--svc-small);
	font-weight: 500;
	color: var(--svc-teal-dark);
	text-decoration: none;
}
#svc-canvas .svc-textlink:hover { text-decoration: underline; }

/* ---- Close: homepage mid-page CTA card parity ----
   Full-bleed light band (homepage CTA band colour #EDF2F7), white rounded card,
   portrait image LEFT, centred content RIGHT with three divided points. */
#svc-canvas .svc-band-cta {
	position: relative;
	left: 50%; right: 50%;
	width: 100vw;
	margin-left: -50vw; margin-right: -50vw;
	max-width: 100vw;
	border-bottom: 0;
	padding: 3.6rem 1.5rem;
	background: #EDF2F7;
}
#svc-canvas .svc-close { text-align: center; }
#svc-canvas .svc-ctacard {
	display: grid;
	grid-template-columns: minmax(240px, 330px) 1fr;
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 34px rgba(2, 22, 73, .10);
	text-align: center;
}
#svc-canvas .svc-ctacard__media { position: relative; margin: 0; min-height: 100%; }
#svc-canvas .svc-ctacard__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
}
#svc-canvas .svc-ctacard__body { padding: 2.6rem 2.4rem; }
#svc-canvas .svc-ctacard__body h2 { margin-bottom: .9rem; }
#svc-canvas .svc-ctacard__sub { max-width: 52ch; margin: 0 auto 1.7rem; color: var(--svc-muted); font-size: 15px; line-height: 1.55; }
#svc-canvas .svc-ctacard__points {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 1.8rem;
	padding: 0;
}
#svc-canvas .svc-ctacard__points li {
	font-size: 14px;
	font-weight: 700;
	color: var(--svc-navy);
	line-height: 1.4;
	padding: .15rem 1rem;
	border-left: 2px solid var(--svc-teal-light);
	text-align: center;
}
#svc-canvas .svc-ctacard__points li:last-child { border-right: 2px solid var(--svc-teal-light); }
/* A point may be a link (the MDiv one routes to /about/). It has to stay visually a point,
   not turn into a blue link in the middle of three bold marks, so it inherits the weight and
   colour and only signals itself with a soft underline that firms up on hover. */
#svc-canvas .svc-ctacard__points a {
	color: inherit; font-weight: inherit; text-decoration: underline;
	text-decoration-color: var(--svc-teal-light); text-underline-offset: 3px;
	transition: color .15s ease, text-decoration-color .15s ease;
}
#svc-canvas .svc-ctacard__points a:hover,
#svc-canvas .svc-ctacard__points a:focus-visible {
	color: var(--svc-teal-dark); text-decoration-color: var(--svc-teal);
}
#svc-canvas .svc-ctacard .svc-cta { margin-top: 0; }
#svc-canvas .svc-ctacard__note { margin: .8rem 0 0; font-size: 13px; color: var(--svc-muted); }

#svc-canvas .svc-cta {
	display: inline-block;
	margin-top: 1.4rem;
	padding: .95rem 1.9rem;
	background: var(--svc-forest);
	color: #fff;
	border-radius: 8px;
	font-weight: 600;
	font-size: var(--svc-small);
	text-decoration: none;
	transition: background .15s ease;
}
#svc-canvas .svc-cta:hover { background: var(--svc-teal-dark); color: #fff; }

#svc-canvas .svc-scope { background: var(--svc-tint); border-radius: 12px; padding: 1.5rem 1.6rem; margin-bottom: 3rem; border-bottom: 0; }
#svc-canvas .svc-scope__crisis { font-weight: 600; color: var(--svc-navy); }
#svc-canvas .svc-scope__note { font-size: var(--svc-small); color: var(--svc-muted); margin: 0; }

/* Title-less credential band: the grid is the first child, so it needs no push-down. */
#svc-canvas .svc-creds .svc-band__inner > .svc-creds__grid:first-child { margin-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
	#svc-canvas .svc-explore { grid-template-columns: 1fr; gap: 1.5rem; }
	#svc-canvas .svc-explore__name { padding-top: .55rem; padding-bottom: .55rem; }
}
/* No per-breakpoint art heights: aspect-ratio + max-width already scale the box the way the
   homepage teaser does, and a fixed height here would fight them. */
@media (max-width: 900px) {
	#svc-canvas .svc-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#svc-canvas .svc-carousel__slide { flex-basis: 100%; }
	#svc-canvas .svc-carousel { padding: 1.8rem 2.4rem 2rem; }
	#svc-canvas .svc-trust__grid { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (max-width: 768px) {
	#svc-canvas .svc-bio { grid-template-columns: 1fr; }
	#svc-canvas .svc-bio__media { max-width: 320px; margin: 0 auto; }
	#svc-canvas .svc-ctacard { grid-template-columns: 1fr; }
	#svc-canvas .svc-ctacard__media { min-height: 240px; }
	#svc-canvas .svc-ctacard__points { grid-template-columns: 1fr; gap: .7rem; justify-items: center; }
	#svc-canvas .svc-ctacard__points li { border-left: 2px solid var(--svc-teal-light); border-right: 0 !important; }
}
@media (max-width: 620px) {
	#svc-canvas .svc-dir { grid-template-columns: 1fr; }
	#svc-canvas .svc-cluster__item { padding: 1.15rem 1.1rem; }
	#svc-canvas .svc-creds__grid { grid-template-columns: 1fr; gap: 1.6rem; }
	#svc-canvas .svc-insurance .insurance-row:nth-child(even) { margin-left: 0; }
	#svc-canvas .svc-section { padding: 2.6rem 0; }
	#svc-canvas .svc-scope { padding: 1.2rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
	#svc-canvas .svc-explore__name, #svc-canvas .svc-reveal > summary::after { transition: none; }
	/* The practice icons still change SIZE on open, they just arrive there instantly and skip
	   the redraw wipe. Trauma-informed lock: motion is the thing removed, not the information. */
	#svc-canvas .svc-integ__icon,
	#svc-canvas .svc-integ__icon::before { transition: none; }
	#svc-canvas .svc-integ__d[open] .svc-integ__icon::before { animation: none; clip-path: none; }
}

/* ---- From the blog: homepage three-card row, native port ---- */
#svc-canvas .svc-blogrow { max-width: var(--svc-wide); }
#svc-canvas .svc-blogrow__grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 1.8rem; }
@media (min-width: 880px) { #svc-canvas .svc-blogrow__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#svc-canvas .svc-blogrow__card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--svc-line); border-radius: 14px; overflow: hidden;
}
#svc-canvas .svc-blogrow__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--svc-tint); }
#svc-canvas img.svc-blogrow__img { width: 100%; height: 100%; object-fit: cover; display: block; }
#svc-canvas .svc-blogrow__badge {
	position: absolute; top: 12px; left: 12px;
	font-family: var(--svc-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: #fff; background: var(--svc-navy);
	padding: .3rem .65rem; border-radius: 999px;
}
#svc-canvas .svc-blogrow__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.2rem 1.2rem; }
#svc-canvas .svc-blogrow__title { font-size: 21px; line-height: 1.3; margin: 0 0 .55rem; }
#svc-canvas .svc-blogrow__title a { color: var(--svc-navy-deep, var(--svc-navy)); text-decoration: none; }
#svc-canvas .svc-blogrow__title a:hover { color: var(--svc-teal-dark); }
#svc-canvas .svc-blogrow__excerpt { font-family: var(--svc-sans); font-size: 14.5px; line-height: 1.6; color: var(--svc-muted); margin: 0 0 1rem; }
#svc-canvas .svc-blogrow__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
#svc-canvas .svc-blogrow__date { font-family: var(--svc-sans); font-size: 13px; color: var(--svc-muted); }
#svc-canvas .svc-blogrow__all { text-align: center; margin: 1.6rem 0 0; }

/* ---- Session depth control + staged step detail ---- */
/* The switchbar is chrome, not content: hidden until the IIFE marks the section, exactly as
   the integration control is, so a no-JS reader never meets a button that does nothing. */
#svc-canvas .svc-steps__switchbar { display: none; }
#svc-canvas .svc-session--js .svc-steps__switchbar { display: flex; justify-content: flex-start; margin: 0 0 1.4rem; }
#svc-canvas .svc-steps__sum { margin: 0; }
#svc-canvas .svc-steps__detail { margin: .5rem 0 0; }
/* Collapse: height:0 + min-height:0 + overflow:hidden, with visibility delayed past the fade.
   This is the pattern already verified on the integration lane on 2026-07-28; the visibility
   half is what keeps collapsed content out of the tab order. Margins are zeroed too, because
   a zero-height box still lets a child margin escape unless overflow clips it. */
#svc-canvas .svc-session--js .svc-steps__detail { overflow: hidden; transition: opacity .25s ease, visibility 0s; }
#svc-canvas .svc-session--js.is-short .svc-steps__detail {
	height: 0; min-height: 0; margin: 0; opacity: 0; visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
@media (prefers-reduced-motion: reduce) {
	#svc-canvas .svc-session--js .svc-steps__detail { transition: none; }
}
/* Trust cards: routing link, pinned to the foot so the three cards stay aligned. */
#svc-canvas .svc-trust__inner { display: flex; flex-direction: column; }
#svc-canvas .svc-trust__link { margin-top: auto; padding-top: .9rem; align-self: flex-start; }
/* Staged comparison table: the FAQ component, with its own top border restored since it is
   a lone details rather than a list of them. */
#svc-canvas .svc-roles__more { border-top: 1px solid var(--svc-line); margin-top: 1.6rem; }
#svc-canvas .svc-roles__more .svc-faq__a { padding-bottom: .4rem; }

/* ---- Roles: two columns, chooser left and comparison right ---- */
/* The table was inheriting .svc-faq__a's 62ch measure, which is why it rendered narrow and
   read as off-centre. Side by side it costs no extra height, so at desktop it is simply
   open; below 880px the columns stack and the details does its job again. */
#svc-canvas .svc-roles__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
#svc-canvas .svc-roles__more .svc-faq__a { max-width: none; padding-bottom: .4rem; }
#svc-canvas .svc-roles__more .svc-roles__tablewrap { overflow-x: auto; }
@media (min-width: 880px) {
	#svc-canvas .svc-roles__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.2rem; align-items: start; }
	#svc-canvas .svc-roles__more { border-top: 0; margin-top: 0; }
	#svc-canvas .svc-roles__more > summary { display: none; }
}

/* In the two-column shell the table has about 540px, not the full measure, so the 620px
   floor forced a horizontal scrollbar (seen live 2026-07-28). Inside the shell it shrinks to
   fit instead: no min-width, tighter cells, smaller type. The floor still applies wherever
   the table is used full width. */
@media (min-width: 880px) {
	#svc-canvas .svc-roles__cols { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); }
	#svc-canvas .svc-roles__cols .svc-roles__table { min-width: 0; font-size: 14px; }
	#svc-canvas .svc-roles__cols .svc-roles__table th,
	#svc-canvas .svc-roles__cols .svc-roles__table td { padding: .7rem .75rem; }
	#svc-canvas .svc-roles__cols .svc-roles__tablewrap { margin-top: 0; overflow-x: visible; }
	/* The chooser is short and the table is tall; pin the chooser to the top rather than
	   letting it float in the middle of a tall row. */
	/* The chooser centres vertically against the taller comparison beside it (Sean
	   2026-07-28), rather than hanging from the top of a much taller row. */
	#svc-canvas .svc-roles__cols > .svc-roles__chooser { align-self: center; }
}

/* ---- Large screens: widen the CONTAINER, never the measure ---- */
/* At 1920px the body was pinned to 1120px, leaving 400px of dead margin each side and the
   page reading as a narrow ribbon (Sean 2026-07-28). Raising --svc-wide widens every grid,
   media row and card together, because they all derive from the token. Prose is capped
   separately (64ch on the lanes, 62ch on the FAQ panel, 60ch on the said lines) and is NOT
   touched here, so line length stays where it is and only the layout breathes. 1360px is
   chosen so the integration lanes land near 646px, which is exactly where the prose cap
   sits: the columns fill without leaving a gutter inside them. */
@media (min-width: 1400px) {
	#svc-canvas { --svc-wide: 1280px; }
	/* The two-column roles table was squeezed to 14px to fit 543px; at this width it does not
	   need to be, so it returns to the site's 15px table size. */
	#svc-canvas .svc-roles__cols .svc-roles__table { font-size: 15px; }
	#svc-canvas .svc-roles__cols .svc-roles__table th,
	#svc-canvas .svc-roles__cols .svc-roles__table td { padding: .85rem 1rem; }
}
@media (min-width: 1700px) {
	#svc-canvas { --svc-wide: 1360px; }
}

/* ---- Measure caps exposed by the wider container ---- */
/* Widening --svc-wide is only safe if every measure is capped. Audited at 1920px and three
   were not. The first is not new: '#svc-canvas .svc-integ > *' (0,1,2,0) has been beating
   '#svc-canvas .svc-lead--centre' (0,1,1,0) all along, so the integration lead ran the full
   container at every width. The other two simply had no cap and only became visible when the
   column grew. Caps are in ch so they track the font, not the layout. */
#svc-canvas .svc-integ > .svc-lead--centre { max-width: 660px; }
#svc-canvas .ic-qa .ic-qa__a { max-width: 66ch; }
#svc-canvas .svc-bio__lead,
#svc-canvas .svc-bio__text p { max-width: 64ch; }

/* ---- References as a disclosure (Sean 2026-07-28) ---- */
/* Same component grammar as the FAQ and the practices: native details, + / - marker, no JS.
   The summary keeps the count and the Crossref line so the citation signal survives while
   closed; only the list itself stages. */
#svc-canvas .svc-refs__d { margin: 0; }
#svc-canvas .svc-refs__sum {
	list-style: none; cursor: pointer; position: relative;
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap; padding-right: 2.2rem;
}
#svc-canvas .svc-refs__sum::-webkit-details-marker { display: none; }
#svc-canvas .svc-refs__sum::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	font-family: var(--svc-sans); font-size: 22px; line-height: 1; color: var(--svc-teal-dark);
}
#svc-canvas .svc-refs__d[open] .svc-refs__sum::after { content: "\2013"; }
#svc-canvas .svc-refs__sum:focus-visible { outline: 3px solid var(--svc-navy); outline-offset: 3px; }
#svc-canvas .svc-refs__d[open] .svc-refs { margin-top: 1.1rem; }

/* ---- Media: banner + topical icons (Sean 2026-07-28: 'only words and graphs') ---- */
/* The icons REUSE the branded white PNGs and are recoloured to teal with mask-image, so
   there is no second copy of any mark to keep in sync and no new art to approve. The
   per-element url() arrives as the --svc-icon custom property from the template. */
#svc-canvas .svc-integ__icon,
#svc-canvas .svc-roles__headicon {
	flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
	background: var(--svc-tint);
}
#svc-canvas .svc-integ__icon::before,
#svc-canvas .svc-roles__headicon::before {
	content: ""; display: block; background: var(--svc-teal-dark);
	-webkit-mask: var(--svc-icon) center / contain no-repeat;
	mask: var(--svc-icon) center / contain no-repeat;
}
/* Closed is the resting size; opening grows the mark and redraws it (see the [open] rules and
   svc-icon-draw below). The branded PNG is 180px square, so a 48px render is downscaling, never
   up: the interior linework (leaf veins, the pot crack, finger separations, the individual
   arrows) is already in the art and simply cannot resolve at 27px. Growing it IS the detail. */
#svc-canvas .svc-integ__icon {
	width: 46px; height: 46px;
	transition: width .42s cubic-bezier(.34,1.24,.5,1), height .42s cubic-bezier(.34,1.24,.5,1),
	            background .3s ease;
}
#svc-canvas .svc-integ__icon::before {
	width: 27px; height: 27px;
	transition: width .42s cubic-bezier(.34,1.24,.5,1), height .42s cubic-bezier(.34,1.24,.5,1),
	            background .3s ease;
}
/* Summary becomes a row: ordinal rail (absolute, outside) | icon | title | +/- marker. */
#svc-canvas .svc-integ__dsum { display: flex; align-items: center; gap: .95rem; }
#svc-canvas .svc-integ__d[open] .svc-integ__icon {
	background: var(--svc-teal); width: 78px; height: 78px;
}
#svc-canvas .svc-integ__d[open] .svc-integ__icon::before {
	background: #fff; width: 48px; height: 48px;
	animation: svc-icon-draw .52s .06s cubic-bezier(.4,0,.2,1) both;
}
/* The redraw. A bottom-up clip wipe, so the bigger mark appears to draw itself in rather than
   just pop to a new size. clip-path is deliberate over mask-composite: this pseudo-element
   ALREADY carries a mask (the icon itself), and a second composited mask layer blanks the icon
   outright wherever the compositing keyword is not understood. A clip-path that fails just
   shows the icon, which is the correct fallback. Runs on open only; closing simply shrinks. */
@keyframes svc-icon-draw {
	from { clip-path: inset(100% 0 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}
@media (max-width: 640px) {
	#svc-canvas .svc-integ__icon { width: 38px; height: 38px; }
	#svc-canvas .svc-integ__icon::before { width: 22px; height: 22px; }
	#svc-canvas .svc-integ__d[open] .svc-integ__icon { width: 62px; height: 62px; }
	#svc-canvas .svc-integ__d[open] .svc-integ__icon::before { width: 38px; height: 38px; }
}
/* The comparison heads stop being two words and become two marks. */
#svc-canvas .svc-roles__headicon { width: 44px; height: 44px; margin: 0 auto .45rem; }
#svc-canvas .svc-roles__headicon::before { width: 26px; height: 26px; }
#svc-canvas .svc-roles__table thead th { text-align: center; }
#svc-canvas .svc-roles__table thead th:first-child { text-align: left; }
#svc-canvas .svc-roles__headlabel { display: block; }
/* Banner: a contained, rounded band inside the section, NOT an ultrawide strip floating
   above it (that shape was tried and rejected on 2026-07-28). */
#svc-canvas .svc-integ__banner {
	margin: 1.6rem auto .4rem; max-width: var(--svc-wide); border-radius: 14px; overflow: hidden;
}
/* height:auto, NOT a clamped height with object-fit:cover. The clamp was cropping the
   bottom off the frame (Sean 2026-07-28: 'missing the bottom section'). The source is now
   cropped to the display ratio instead, so the whole photograph is always visible. */
/* The SOURCE is kept at 3.2:1 and the CSS crops it: a wide letterbox on desktop, a taller
   crop on phones. A single fixed 5.2:1 file became a 72px sliver at 375px wide, which is
   not a banner. Cropping both ways only works because the generated frame puts the horizon
   through the centre, so no crop loses the subject. */
#svc-canvas .svc-integ__banner img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 5.2 / 1; object-fit: cover; object-position: 50% 50%;
}
@media (max-width: 1100px) { #svc-canvas .svc-integ__banner img { aspect-ratio: 4 / 1; } }
@media (max-width: 760px)  { #svc-canvas .svc-integ__banner img { aspect-ratio: 2.4 / 1; } }

/* Roles media: fills the left column under the chooser, which otherwise ran short beside
   a tall comparison table. Hidden below the two-column breakpoint, where stacking it would
   just add height between the chooser and the answer. */
#svc-canvas .svc-roles__media { display: none; }
@media (min-width: 880px) {
	/* Explicit placement: the shell has THREE children (chooser, media, comparison), so
	   auto-flow put the media in the right column and pushed the table down into the left.
	   Chooser and media stack in column 1; the comparison spans both rows in column 2. */
	#svc-canvas .svc-roles__cols > .svc-roles__chooser { grid-column: 1; grid-row: 1; }
	/* The chooser carries a 1.8rem top margin from its standalone use; inside the two-column
	   shell that pushed it 29px below the comparison beside it. */
	#svc-canvas .svc-roles__cols > .svc-roles__chooser { margin-top: 0; }
	#svc-canvas .svc-roles__cols > .svc-roles__more    { grid-column: 2; grid-row: 1; }
	#svc-canvas .svc-roles__media { display: block; margin: 1.2rem 0 0; border-radius: 14px; overflow: hidden; }
	#svc-canvas .svc-roles__media img { display: block; width: 100%; height: auto; }
}
/* The media fills the rest of its column so the two columns finish on the same line;
   previously it stopped short and the section read as two unrelated blocks. */
/* Roles banner + the CTA row flip. */
#svc-canvas .svc-roles__banner { margin-top: 1.4rem; }
@media (min-width: 880px) {
	/* Third media row in a row of three: the session and bio both put the photo left, and a
	   third identical row read as a rut (Sean 2026-07-28). The CTA card mirrors instead. */
	#svc-canvas .svc-ctacard { direction: rtl; }
	#svc-canvas .svc-ctacard > * { direction: ltr; }
}
/* Treatment Areas panel: title, lead and link centre under the picture, matching the
   homepage presentation (Sean 2026-07-28). */
#svc-canvas .svc-explore__title,
#svc-canvas .svc-explore__lead { text-align: center; }
#svc-canvas .svc-explore__lead { margin-left: auto; margin-right: auto; }
#svc-canvas .svc-explore__panel { text-align: center; }
#svc-canvas .svc-explore__link { display: inline-block; }