/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 15 2026 | 06:55:22 */
/**
 * Laburnum Psychologist Profile — styles.
 *
 * Paste into a CSS snippet, Appearance > Customise > Additional CSS, or your
 * child theme stylesheet. Pairs with the shortcode PHP snippet.
 *
 * Colours and type are real tokens from the Figma file; the Figma token name is
 * in each comment. Two values are marked INFERRED.
 *
 * SPECIFICITY: Elementor wraps shortcode output in .elementor-widget-container,
 * so theme rules like `.elementor-widget-container h2` (0,1,1) outrank a single
 * class (0,1,0). Every selector here doubles the class — `.foo.foo` — reaching
 * (0,2,0) so it wins without !important. Modifiers are doubled too and always
 * declared after their base rule, so they still override it.
 */

.laburnum-psych-profile,
.laburnum-psych-hero,
.laburnum-psych-section,
.laburnum-psych-feature,
.laburnum-crumbs {
	/* Colour — Primary */
	--lp-primary-900: #003212;
	--lp-primary-800: #006425;
	--lp-primary-700: #00a73d;

	/* Colour — Secondary */
	--lp-secondary-900: #34734b;
	--lp-secondary-100: #d4ecdd;
	--lp-secondary-50: #edf7f1;

	/* Colour — Neutral */
	--lp-neutral-00: #ffffff;
	--lp-neutral-50: #f5f5f6;
	--lp-neutral-100: #e6e6e7;
	--lp-neutral-300: #afafb1;
	--lp-neutral-400: #909092;
	--lp-neutral-600: #5c5c5e;
	--lp-neutral-800: #454446;
	--lp-neutral-900: #313132;

	/* Type — Open Sans, line-height 1.5, letter-spacing 0 throughout */
	--lp-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--lp-display-5: 700 2.5rem/1.5 var(--lp-font);
	--lp-headline-1: 700 2rem/1.5 var(--lp-font);
	--lp-headline-5: 700 1.125rem/1.5 var(--lp-font);
	--lp-title-2: 600 1rem/1.5 var(--lp-font);
	--lp-title-3: 600 0.875rem/1.5 var(--lp-font);
	--lp-body-1: 400 1.125rem/1.5 var(--lp-font);
	--lp-body-2: 400 1rem/1.5 var(--lp-font);
	--lp-body-3: 400 0.875rem/1.5 var(--lp-font);

	/* Geometry */
	--lp-radius-sm: 8px;
	--lp-radius: 12px;
	--lp-max: 1280px;
	--lp-gutter: 80px;
	--lp-section-y: 80px;
}

/* ---------------------------------------------------------------- Shared */

.laburnum-psych-hero.laburnum-psych-hero,
.laburnum-psych-section.laburnum-psych-section {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--lp-max);
	padding-block: var(--lp-section-y);
	color: var(--lp-neutral-900);
	font: var(--lp-body-2);
}

.laburnum-psych-hero *,
.laburnum-psych-section *,
.laburnum-psych-feature * {
	box-sizing: border-box;
}

.laburnum-psych-heading.laburnum-psych-heading {
	margin: 0;
	padding: 0;
	color: var(--lp-primary-800);
	font: var(--lp-headline-1);
	text-align: left;
}

.laburnum-psych-heading--centred.laburnum-psych-heading--centred {
	text-align: center;
}

.laburnum-psych-heading--inverse.laburnum-psych-heading--inverse {
	color: var(--lp-neutral-00);
}

.laburnum-psych-intro.laburnum-psych-intro {
	margin: 12px 0 0;   /* 12px per review, was 4px */
	padding: 0;
	max-width: none;
	color: var(--lp-neutral-600);
	font: var(--lp-body-2);
	text-align: left;
}

.laburnum-psych-intro--centred.laburnum-psych-intro--centred {
	margin: 12px auto 0;
	max-width: 553px;
	text-align: center;
}

.laburnum-psych-prose.laburnum-psych-prose {
	color: var(--lp-neutral-600);
	font: var(--lp-body-2);
}

/* WYSIWYG output. 24px between paragraphs, nothing above or below the block. */
.laburnum-psych-prose.laburnum-psych-prose > p {
	margin: 0 0 24px;
	padding: 0;
}

.laburnum-psych-prose.laburnum-psych-prose > :first-child { margin-top: 0; }
.laburnum-psych-prose.laburnum-psych-prose > :last-child { margin-bottom: 0; }

.laburnum-psych-prose--inverse.laburnum-psych-prose--inverse {
	color: var(--lp-neutral-300);
}

.laburnum-psych-icon.laburnum-psych-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* The button arrow is 24px in the design; CSS beats the SVG attributes. */
.laburnum-psych-button.laburnum-psych-button .laburnum-psych-icon {
	width: 24px;
	height: 24px;
}

.laburnum-psych-notice.laburnum-psych-notice {
	margin: 16px 0;
	padding: 12px 16px;
	border-left: 3px solid #b32d2e;
	background: #fcf0f1;
	color: #7a1f20;
	font: var(--lp-body-3);
}

/* ------------------------------------------------------------------ Hero */

.laburnum-psych-hero.laburnum-psych-hero {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding-block: 40px 56px;
}

.laburnum-psych-hero__media.laburnum-psych-hero__media {
	flex: 0 0 265px;
	max-width: 265px;
}

.laburnum-psych-hero__photo.laburnum-psych-hero__photo {
	display: block;
	width: 265px;
	max-width: 100%;
	height: 265px;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--lp-neutral-100);
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
}

/*
 * No blanket `gap` here. The design nests a meta block (4px / 12px internal
 * gaps) and the buttons inside a 48px gap, but the markup is flat — a gap would
 * apply 48px between every child. Per-element margins reproduce the design.
 */
.laburnum-psych-hero__body.laburnum-psych-hero__body {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.laburnum-psych-hero__name.laburnum-psych-hero__name {
	margin: 0;
	padding: 0;
	color: var(--lp-primary-900);
	font: var(--lp-display-5);
}

.laburnum-psych-hero__title.laburnum-psych-hero__title {
	margin: 4px 0 0;
	padding: 0;
	color: var(--lp-neutral-400);
	font: var(--lp-body-1);
}

.laburnum-psych-badge.laburnum-psych-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: max-content;
	max-width: 100%;
	margin: 12px 0 0;
	padding: 4px 8px;
	border-radius: var(--lp-radius-sm);
	background: var(--lp-secondary-100);
	color: var(--lp-secondary-900);
	font: var(--lp-title-3);
}

.laburnum-psych-pills.laburnum-psych-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.laburnum-psych-pill.laburnum-psych-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.laburnum-psych-pill.laburnum-psych-pill + .laburnum-psych-pill.laburnum-psych-pill::before {
	content: "\2022";
	color: var(--lp-neutral-600);
	font: var(--lp-body-3);
}

.laburnum-psych-pill__chip.laburnum-psych-pill__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border: 1px solid var(--lp-neutral-100);
	border-radius: var(--lp-radius-sm);
	background: var(--lp-neutral-50);
	color: var(--lp-neutral-800);
	font: var(--lp-body-3);
	white-space: nowrap;
}

.laburnum-psych-actions.laburnum-psych-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 48px 0 0;   /* the one 48px step in the design */
}

.laburnum-psych-button.laburnum-psych-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 8px 20px;
	border: 1px solid var(--lp-primary-700);
	border-radius: var(--lp-radius-sm);
	background: var(--lp-primary-700);
	color: var(--lp-neutral-00);
	font: var(--lp-title-2);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.laburnum-psych-button.laburnum-psych-button:hover,
.laburnum-psych-button.laburnum-psych-button:focus-visible {
	background: var(--lp-primary-800);
	border-color: var(--lp-primary-800);
	color: var(--lp-neutral-00);
}

/* Large variant — the CTA button is 56px tall with 18px text. */
.laburnum-psych-button--lg.laburnum-psych-button--lg {
	height: 56px;
	padding: 8px 24px;
	font: 600 1.125rem/1.5 var(--lp-font);
}

/* Ghost variant — declared after the base so it overrides at equal weight. */
.laburnum-psych-button--ghost.laburnum-psych-button--ghost {
	background: var(--lp-neutral-00);
	color: var(--lp-primary-700);
}

.laburnum-psych-button--ghost.laburnum-psych-button--ghost:hover,
.laburnum-psych-button--ghost.laburnum-psych-button--ghost:focus-visible {
	background: var(--lp-secondary-50);
	border-color: var(--lp-primary-700);
	color: var(--lp-primary-700);
}

/* --------------------------------------------------------- Therapy style */

.laburnum-psych-style.laburnum-psych-style {
	display: grid;
	grid-template-columns: minmax(0, 732px) minmax(0, 500px);
	align-items: center;
	gap: 48px;
}

.laburnum-psych-style.laburnum-psych-style .laburnum-psych-heading {
	margin-bottom: 24px;
}

.laburnum-psych-style__image.laburnum-psych-style__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lp-radius);
}

/* ------------------------------------------- Full-bleed tinted sections */
/*
 * Centring is done with padding on the section, not auto margins on children.
 * Child margins are fragile — any rule that sets `margin` on a heading wins and
 * silently knocks the content out of alignment.
 */

.laburnum-psych-help.laburnum-psych-help,
.laburnum-psych-about.laburnum-psych-about {
	max-width: none;
	padding-inline: max(var(--lp-gutter), (100% - var(--lp-max)) / 2);
}

.laburnum-psych-help.laburnum-psych-help {
	background: var(--lp-secondary-50);
}

.laburnum-psych-cards.laburnum-psych-cards {
	display: grid;
	gap: 12px;
	margin: 48px 0 0;
}

.laburnum-psych-card.laburnum-psych-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--lp-neutral-100);
	border-radius: var(--lp-radius);
	background: var(--lp-neutral-00);
}

.laburnum-psych-card__title.laburnum-psych-card__title {
	margin: 0;
	padding: 0;
	color: var(--lp-neutral-900);
	font: var(--lp-headline-5);
}

/* ----------------------------------------------------------------- Chips */

.laburnum-psych-chips.laburnum-psych-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.laburnum-psych-chip.laburnum-psych-chip {
	margin: 0;
	padding: 4px 8px;
	border-radius: var(--lp-radius-sm);
	background: var(--lp-neutral-50);
	color: var(--lp-neutral-900);
	font: var(--lp-title-3);
	list-style: none;
}

/* Linked variant — the <a> carries the padding and fill, not the <li>. */
.laburnum-psych-chip--link.laburnum-psych-chip--link {
	padding: 0;
	background: none;
}

.laburnum-psych-chip--link.laburnum-psych-chip--link > a {
	display: inline-block;
	padding: 4px 8px;
	border-radius: var(--lp-radius-sm);
	background: var(--lp-neutral-50);
	color: var(--lp-neutral-900);
	font: var(--lp-title-3);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * The green chip in the comp is the hover state. It applies to every chip, so
 * plain-text chips get it too, not just the linked ones.
 */
.laburnum-psych-chip.laburnum-psych-chip {
	transition: background-color 0.15s ease, color 0.15s ease;
}

.laburnum-psych-chip.laburnum-psych-chip:hover,
.laburnum-psych-chip--link.laburnum-psych-chip--link > a:hover,
.laburnum-psych-chip--link.laburnum-psych-chip--link > a:focus-visible {
	background: var(--lp-secondary-100);
	color: var(--lp-primary-800);
}

/* The <li> is a transparent wrapper when linked; the <a> carries the state. */
.laburnum-psych-chip--link.laburnum-psych-chip--link:hover {
	background: none;
}

/* ------------------------------------------------------------ Approaches */

.laburnum-psych-approaches.laburnum-psych-approaches .laburnum-psych-chips {
	justify-content: center;
	margin-top: 48px;
}

/* INFERRED: the approaches chip fill was not exposed by the Figma node. 40px
   tall with 12px side padding is from the comp; white on a neutral border is
   the closest reading of the screenshot. */
.laburnum-psych-approaches.laburnum-psych-approaches .laburnum-psych-chip,
.laburnum-psych-approaches.laburnum-psych-approaches .laburnum-psych-chip--link > a {
	padding: 8px 12px;
	border: 1px solid var(--lp-neutral-100);
	background: var(--lp-neutral-00);
	font: var(--lp-title-2);
}

/* ----------------------------------------------------------------- About */

.laburnum-psych-about.laburnum-psych-about {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: var(--lp-primary-900);
}

.laburnum-psych-feature__image.laburnum-psych-feature__image,
.laburnum-psych-feature__image.laburnum-psych-feature__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ----------------------------------------------------------- Credentials */

.laburnum-psych-credentials.laburnum-psych-credentials .laburnum-psych-heading {
	margin-bottom: 24px;   /* 24px per review, was an inferred 48px */
}

/*
 * A real <table>, so screen readers get row relationships from scope="row".
 * That rules out grid/flex on the table or its cells — those strip the table
 * role. Gaps come from border-spacing, and the negative margin cancels the
 * 8px border-spacing adds around the outside edges.
 */
.laburnum-psych-credentials__table.laburnum-psych-credentials__table {
	width: calc(100% + 16px);
	margin: -8px;
	border: 0;
	border-collapse: separate;
	border-spacing: 8px;
	table-layout: fixed;
	background: none;
}

.laburnum-psych-credentials__table.laburnum-psych-credentials__table tbody {
	border: 0;
	background: none;
}

.laburnum-psych-credentials__row.laburnum-psych-credentials__row {
	background: none;
}

.laburnum-psych-credentials__label.laburnum-psych-credentials__label,
.laburnum-psych-credentials__value.laburnum-psych-credentials__value {
	margin: 0;
	padding: 24px;
	border: 0;
	border-radius: var(--lp-radius);
	text-align: left;
	vertical-align: middle;
}

.laburnum-psych-credentials__label.laburnum-psych-credentials__label {
	width: 400px;
	background: var(--lp-neutral-50);
	color: var(--lp-neutral-900);
	font: var(--lp-headline-5);
}

.laburnum-psych-credentials__value.laburnum-psych-credentials__value {
	background: var(--lp-secondary-50);
	color: var(--lp-neutral-800);
	font: var(--lp-body-1);
}

/* First row is deliberately emphasised in the design. */
.laburnum-psych-credentials__row:first-child .laburnum-psych-credentials__value.laburnum-psych-credentials__value {
	background: var(--lp-secondary-100);
	font: var(--lp-headline-5);
}

.laburnum-psych-stack.laburnum-psych-stack { margin: 0; padding: 0; list-style: none; }
.laburnum-psych-stack.laburnum-psych-stack > li + li { margin-top: 6px; }
.laburnum-psych-stack.laburnum-psych-stack a { color: var(--lp-primary-800); }


/* ------------------------------------------------------------------- CTA */

.laburnum-psych-cta__card.laburnum-psych-cta__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 392px;
	padding: 40px;
	overflow: hidden;
	border: 1px solid var(--lp-secondary-100);
	border-radius: var(--lp-radius);
	background-image: linear-gradient(180deg, var(--lp-neutral-00) 11.26%, var(--lp-secondary-50) 96.84%);
}

.laburnum-psych-cta__body.laburnum-psych-cta__body {
	position: relative;
	z-index: 1;
	width: 460px;
	max-width: 100%;
	padding: 0;
}

/* Margins rather than flex gaps — a gap would space every child equally. */
.laburnum-psych-cta__text.laburnum-psych-cta__text {
	margin: 24px 0 0;
	padding: 0;
	color: var(--lp-neutral-600);
	font: var(--lp-body-2);
}

.laburnum-psych-cta__actions.laburnum-psych-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 40px 0 0;
}

/*
 * mix-blend-mode: darken is what makes the photo dissolve into the gradient
 * instead of sitting on it as a hard-edged block. Straight from the comp.
 */
.laburnum-psych-cta__image.laburnum-psych-cta__image {
	position: absolute;
	right: -1px;
	top: 50%;
	transform: translateY(-50%);
	width: 777px;
	max-width: 65%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	mix-blend-mode: darken;
	pointer-events: none;
}

/* ------------------------------------------------------------ Responsive */
/* 375px values are read from the mobile frame in Figma. No tablet frame
   exists, so the 1024px step is a judgement call. */

@media (max-width: 1024px) {
	.laburnum-psych-hero.laburnum-psych-hero,
	.laburnum-psych-section.laburnum-psych-section { padding-inline: 32px; }

	:not(.laburnum-issue-hero__body) > .laburnum-crumbs.laburnum-crumbs {
		padding-inline: 32px;
	}

	.laburnum-psych-help.laburnum-psych-help,
	.laburnum-psych-about.laburnum-psych-about { --lp-gutter: 32px; }

	.laburnum-psych-style.laburnum-psych-style {
		grid-template-columns: 1fr;
		gap: 24px;   /* 24px per review, was 32px */
	}
}

@media (max-width: 782px) {
	.laburnum-psych-hero.laburnum-psych-hero,
	.laburnum-psych-section.laburnum-psych-section {
		padding-block: 48px;
		padding-inline: 16px;
	}

	:not(.laburnum-issue-hero__body) > .laburnum-crumbs.laburnum-crumbs {
		padding: 16px 16px 0;
	}

	.laburnum-psych-help.laburnum-psych-help,
	.laburnum-psych-about.laburnum-psych-about { --lp-gutter: 16px; }

	.laburnum-psych-heading.laburnum-psych-heading { font: 700 1.5rem/1.5 var(--lp-font); }
	.laburnum-psych-intro.laburnum-psych-intro,
	.laburnum-psych-prose.laburnum-psych-prose { font: var(--lp-body-3); }

	.laburnum-psych-hero.laburnum-psych-hero {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.laburnum-psych-hero__media.laburnum-psych-hero__media {
		flex-basis: auto;
		max-width: 100px;
	}

	.laburnum-psych-hero__photo.laburnum-psych-hero__photo { width: 100px; height: 100px; }
	.laburnum-psych-hero__name.laburnum-psych-hero__name { font: 700 1.75rem/1.5 var(--lp-font); }
	.laburnum-psych-hero__title.laburnum-psych-hero__title { font: var(--lp-body-3); }

	.laburnum-psych-pills.laburnum-psych-pills {
		flex-direction: column;
		align-items: flex-start;
	}

	.laburnum-psych-pill.laburnum-psych-pill + .laburnum-psych-pill.laburnum-psych-pill::before {
		content: none;
	}

	.laburnum-psych-pill__chip.laburnum-psych-pill__chip { white-space: normal; }

	.laburnum-psych-actions.laburnum-psych-actions {
		flex-direction: column;
		align-items: stretch;
		margin-top: 24px;   /* 24px per review, was 32px */
	}

	.laburnum-psych-actions.laburnum-psych-actions .laburnum-psych-button {
		width: 100%;
	}

	.laburnum-psych-button.laburnum-psych-button {
		height: 40px;
		font: var(--lp-title-3);
	}

	/* Icons step down to 20px at this breakpoint. */
	.laburnum-psych-button.laburnum-psych-button .laburnum-psych-icon {
		width: 20px;
		height: 20px;
	}

	/* Reviewed at 24px on mobile; desktop stays at the 48px in the design. */
	.laburnum-psych-cards.laburnum-psych-cards { margin-top: 24px; }

	.laburnum-psych-approaches.laburnum-psych-approaches .laburnum-psych-chips {
		margin-top: 24px;
	}

	.laburnum-psych-card.laburnum-psych-card { padding: 20px; }
	.laburnum-psych-chips.laburnum-psych-chips { gap: 6px; }

	.laburnum-psych-approaches.laburnum-psych-approaches .laburnum-psych-chip,
	.laburnum-psych-approaches.laburnum-psych-approaches .laburnum-psych-chip--link > a {
		font: var(--lp-title-3);
	}

	/*
	 * Mobile: the card carries no padding — the copy block does — and the photo
	 * becomes a flow item beneath it, still blended into the gradient.
	 */
	.laburnum-psych-cta__card.laburnum-psych-cta__card {
		min-height: 0;
		padding: 0;
	}

	.laburnum-psych-cta__body.laburnum-psych-cta__body {
		width: 100%;
		padding: 24px;
	}

	.laburnum-psych-cta__text.laburnum-psych-cta__text {
		margin-top: 12px;   /* 12px on mobile, 24px on desktop */
		font: var(--lp-body-3);
	}

	.laburnum-psych-cta__actions.laburnum-psych-cta__actions {
		margin-top: 24px;
	}

	/* The CTA button hugs its label on mobile — unlike the hero buttons. */
	.laburnum-psych-button--lg.laburnum-psych-button--lg {
		width: auto;
		height: 40px;
		padding: 8px 20px;
		font: var(--lp-title-3);
	}

	.laburnum-psych-cta__image.laburnum-psych-cta__image {
		position: static;
		transform: none;
		width: 100%;
		max-width: none;
		height: 173px;
		margin: 0;
	}

	.laburnum-psych-credentials__label.laburnum-psych-credentials__label {
		width: 135px;
	}

	.laburnum-psych-credentials__label.laburnum-psych-credentials__label,
	.laburnum-psych-credentials__value.laburnum-psych-credentials__value {
		padding: 12px;
	}

	.laburnum-psych-credentials__label.laburnum-psych-credentials__label { font: var(--lp-title-3); }
	.laburnum-psych-credentials__value.laburnum-psych-credentials__value { font: var(--lp-body-3); }

	.laburnum-psych-credentials__row:first-child .laburnum-psych-credentials__value.laburnum-psych-credentials__value {
		font: var(--lp-title-3);
	}
}

/* --------------------------------------------------- Accessibility floor */

.laburnum-psych-button.laburnum-psych-button:focus-visible,
.laburnum-psych-chip--link.laburnum-psych-chip--link > a:focus-visible,
.laburnum-psych-stack.laburnum-psych-stack a:focus-visible {
	outline: 2px solid var(--lp-primary-700);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.laburnum-psych-button.laburnum-psych-button,
	.laburnum-psych-chip--link.laburnum-psych-chip--link > a,
	.laburnum-issue-sign.laburnum-issue-sign,
	.laburnum-issue-sign__icon.laburnum-issue-sign__icon,
	.laburnum-issue-card.laburnum-issue-card { transition: none; }
}

/* Issue-page CTA: the photo is 729x368 inset 12px, not full card height. */
.laburnum-psych-cta--issue.laburnum-psych-cta--issue .laburnum-psych-cta__image {
	top: 12px;
	bottom: 12px;
	transform: none;
	width: 729px;
	max-width: 57%;
	height: auto;
}

@media (max-width: 782px) {
	.laburnum-psych-cta--issue.laburnum-psych-cta--issue .laburnum-psych-cta__image {
		top: auto;
		bottom: auto;
		width: 100%;
		max-width: none;
		height: 173px;
	}
}

/* ==========================================================================
   Issue Type pages
   Reuses the tokens and shared components above. Only issue-specific
   components are defined here.
   ========================================================================== */

.laburnum-issue-page,
.laburnum-issue-hero,
.laburnum-issue-about,
.laburnum-issue-signs,
.laburnum-issue-people,
.laburnum-crumbs {
	--lp-neutral-500: #6c6c6e;   /* CONFIRMED — card location text */
	--lp-neutral-700: #4f4e50;   /* CONFIRMED — breadcrumb links */
	--lp-neutral-950: #262626;   /* CONFIRMED — current breadcrumb */
	--lp-headline-4: 700 1.25rem/1.5 var(--lp-font);  /* Bold 20 — card name */
	--lp-gray-950: #242528;      /* CONFIRMED — T32 Gray/950, What is body */
	--lp-secondary-400: #89caa2; /* CONFIRMED — sign card hover border */
}

/* ------------------------------------------------------------- Issue hero */

.laburnum-issue-hero.laburnum-issue-hero {
	display: grid;
	grid-template-columns: minmax(0, 656px) minmax(0, 656px);
	gap: 48px;
	padding-block: 0;
}

.laburnum-issue-hero__body.laburnum-issue-hero__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 48px;
	min-height: 599px;
	padding: 24px 0 40px;
	overflow: hidden;
}

/*
 * The trail is identical on both page types in the design: Open Sans 14/1.5,
 * 8px gaps, 16px caret, Neutral/700 links and a Neutral/950 current item. All
 * of that lives in the shared rules below and needs no per-page variation.
 *
 * Only the container differs, and only because of where the markup sits: on an
 * issue page the trail is inside the hero body and already contained, while on
 * a profile it is a sibling of the hero section and has to supply its own width
 * and gutters.
 *
 * Applied with :not() rather than setting it everywhere and cancelling it
 * inside the hero. A cancelling rule has to unset every property the base sets,
 * and missing one is what previously left this trail centred in its column.
 */
.laburnum-crumbs.laburnum-crumbs {
	box-sizing: border-box;
	display: block;
}

:not(.laburnum-issue-hero__body) > .laburnum-crumbs.laburnum-crumbs {
	margin-inline: auto;
	max-width: var(--lp-max);
	padding: 24px 0 0;
}

.laburnum-crumbs__list.laburnum-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: var(--lp-body-3);
}

.laburnum-crumbs__item.laburnum-crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: var(--lp-neutral-700);
}

.laburnum-crumbs__item.laburnum-crumbs__item > a {
	color: inherit;
	text-decoration: none;
}

.laburnum-crumbs__item.laburnum-crumbs__item > a:hover,
.laburnum-crumbs__item.laburnum-crumbs__item > a:focus-visible {
	text-decoration: underline;
}

.laburnum-crumbs__item--current.laburnum-crumbs__item--current {
	color: var(--lp-neutral-950);
}

/* The heading block sits at the top, the button at the bottom of the column. */
.laburnum-issue-hero__copy.laburnum-issue-hero__copy {
	flex: 1 1 auto;
}

.laburnum-issue-hero__heading.laburnum-issue-hero__heading {
	margin: 0;
	padding: 0;
	color: var(--lp-primary-800);
	font: var(--lp-display-5);
}

.laburnum-issue-hero__intro.laburnum-issue-hero__intro {
	margin: 12px 0 0;
	padding: 0;
	color: var(--lp-neutral-600);
	font: var(--lp-body-1);
}

.laburnum-issue-hero__actions.laburnum-issue-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/*
 * Faint brand mark, bottom-right of the copy column. The source is the full
 * logo lockup, so it is scaled and clipped to show only the leaf.
 */
/*
 * Brand mark, bottom-right of the copy column.
 *
 * The design sets 5% opacity, which on white is effectively invisible. Rendered
 * at full strength instead, with the luminosity blend kept so the mark reads as
 * grey rather than green. To dial it back, add:
 *   opacity: 0.12;
 *
 * object-position: left keeps the leaf in frame whether the source file is the
 * full logo lockup or the leaf on its own, rather than hard-coding Figma's
 * 411% crop, which only works for the lockup.
 */
.laburnum-issue-hero__watermark.laburnum-issue-hero__watermark {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 237px;
	height: 234px;
	overflow: hidden;
	mix-blend-mode: luminosity;
	pointer-events: none;
}

.laburnum-issue-hero__watermark.laburnum-issue-hero__watermark > img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.laburnum-issue-hero__image.laburnum-issue-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 599px;
	object-fit: cover;
}

/* --------------------------------------------------------- What is [issue] */

.laburnum-issue-about.laburnum-issue-about {
	display: grid;
	grid-template-columns: minmax(0, 500px) minmax(0, 732px);
	align-items: center;
	gap: 48px;
}

.laburnum-issue-about__image.laburnum-issue-about__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lp-radius);
}

.laburnum-issue-about__body.laburnum-issue-about__body .laburnum-psych-heading {
	margin-bottom: 24px;
}

.laburnum-issue-prose.laburnum-issue-prose {
	color: var(--lp-gray-950);
	font: var(--lp-body-1);
}

/* WYSIWYG output. 24px between paragraphs, nothing above or below the block. */
.laburnum-issue-prose.laburnum-issue-prose > p {
	margin: 0 0 24px;
	padding: 0;
}

.laburnum-issue-prose.laburnum-issue-prose > :first-child { margin-top: 0; }
.laburnum-issue-prose.laburnum-issue-prose > :last-child { margin-bottom: 0; }

.laburnum-issue-intro.laburnum-issue-intro {
	margin: 12px 0 0;
	padding: 0;
	max-width: 800px;
	color: var(--lp-neutral-600);
	font: var(--lp-body-2);
}

/* ------------------------------------------------- Tinted issue sections */
/*
 * Signs sits on secondary/50 and the psychologist grid on primary/900. Both
 * bleed full width, so centring is done with padding on the section — the same
 * approach used elsewhere, since child auto-margins get clobbered by any rule
 * that sets margin on a heading.
 */

.laburnum-issue-signs.laburnum-issue-signs,
.laburnum-issue-people.laburnum-issue-people {
	max-width: none;
	padding-inline: max(var(--lp-gutter), (100% - var(--lp-max)) / 2);
}

.laburnum-issue-signs.laburnum-issue-signs {
	background: var(--lp-secondary-50);
}

.laburnum-issue-people.laburnum-issue-people {
	background: var(--lp-primary-900);
}

/* Inverted type on the dark section. */
.laburnum-issue-people.laburnum-issue-people .laburnum-psych-heading {
	color: var(--lp-neutral-00);
}

.laburnum-issue-people.laburnum-issue-people .laburnum-issue-intro {
	color: var(--lp-neutral-300);
}

/* -------------------------------------------------------------- Signs grid */

.laburnum-issue-signs__head.laburnum-issue-signs__head,
.laburnum-issue-people__head.laburnum-issue-people__head {
	max-width: 800px;
}

.laburnum-issue-signs__grid.laburnum-issue-signs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.laburnum-issue-sign.laburnum-issue-sign {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--lp-neutral-100);
	border-radius: var(--lp-radius);
	background: var(--lp-neutral-00);
	list-style: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/*
 * Hover inverts the two greens: the card takes secondary/100 with a
 * secondary/400 border, and the icon circle drops to secondary/50.
 */
.laburnum-issue-sign.laburnum-issue-sign:hover {
	border-color: var(--lp-secondary-400);
	background: var(--lp-secondary-100);
}

.laburnum-issue-sign__icon.laburnum-issue-sign__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 100px;
	background: var(--lp-secondary-100);
	transition: background-color 0.15s ease;
}

.laburnum-issue-sign.laburnum-issue-sign:hover .laburnum-issue-sign__icon {
	background: var(--lp-secondary-50);
}

.laburnum-issue-sign__icon.laburnum-issue-sign__icon img {
	display: block;
	width: 24px;
	height: 24px;
}

.laburnum-issue-sign__text.laburnum-issue-sign__text {
	color: var(--lp-neutral-900);
	font: var(--lp-title-2);
}

/* -------------------------------------------------- Psychologist card grid */

.laburnum-issue-people__grid.laburnum-issue-people__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.laburnum-issue-card.laburnum-issue-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--lp-neutral-100);
	border-radius: var(--lp-radius);
	background: var(--lp-neutral-00);
	list-style: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Hover variant from the component set: mint fill, no border, green name. */
.laburnum-issue-card.laburnum-issue-card:hover,
.laburnum-issue-card.laburnum-issue-card:focus-within {
	border-color: transparent;
	background: var(--lp-secondary-100);
}

.laburnum-issue-card.laburnum-issue-card:hover .laburnum-issue-card__name,
.laburnum-issue-card.laburnum-issue-card:focus-within .laburnum-issue-card__name {
	color: var(--lp-primary-800);
}

.laburnum-issue-card__photo.laburnum-issue-card__photo {
	display: block;
	width: 85px;
	height: 85px;
	border-radius: 1000px;
	object-fit: cover;
	object-position: center top;
}

.laburnum-issue-card__identity.laburnum-issue-card__identity {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* h3 and p per the Figma annotations, so default margins need zeroing. */
.laburnum-issue-card__name.laburnum-issue-card__name {
	margin: 0;
	padding: 0;
	color: var(--lp-neutral-900);
	font: var(--lp-headline-4);
	transition: color 0.15s ease;
}

.laburnum-issue-card__role.laburnum-issue-card__role {
	margin: 0;
	padding: 0;
	color: var(--lp-neutral-900);
	font: var(--lp-body-3);
}

.laburnum-issue-card__groups.laburnum-issue-card__groups {
	margin: 0;
	padding: 0;
	color: var(--lp-neutral-400);
	font: var(--lp-body-3);
}

.laburnum-issue-card__location.laburnum-issue-card__location {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--lp-neutral-500);
	font: var(--lp-body-3);
}

.laburnum-issue-card__cta.laburnum-issue-card__cta {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-block: 2px;
	color: var(--lp-primary-700);
	font: var(--lp-title-3);
}

.laburnum-issue-card__link.laburnum-issue-card__link {
	color: inherit;
	text-decoration: none;
}

/*
 * One anchor, stretched over the whole card. Keeps the accessible name to the
 * profile text instead of the card's entire contents.
 */
.laburnum-issue-card__link.laburnum-issue-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--lp-radius);
}

.laburnum-issue-card__link.laburnum-issue-card__link:hover,
.laburnum-issue-card__link.laburnum-issue-card__link:focus-visible {
	text-decoration: underline;
}

/* -------------------------------------------------- Issue-page responsive */

@media (max-width: 1024px) {
	.laburnum-issue-hero.laburnum-issue-hero,
	.laburnum-issue-about.laburnum-issue-about {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.laburnum-issue-hero__body.laburnum-issue-hero__body { min-height: 0; }
	.laburnum-issue-hero__image.laburnum-issue-hero__image { min-height: 0; }

	.laburnum-issue-signs.laburnum-issue-signs,
	.laburnum-issue-people.laburnum-issue-people { --lp-gutter: 32px; }

	.laburnum-issue-signs__grid.laburnum-issue-signs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.laburnum-issue-people__grid.laburnum-issue-people__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.laburnum-issue-hero.laburnum-issue-hero { padding-block: 0; }

	.laburnum-issue-hero__body.laburnum-issue-hero__body {
		gap: 24px;
		padding: 16px 0 24px;
	}

	/* Copy block to hero image: 48px per review, was the 32px grid gap. */
	.laburnum-issue-hero.laburnum-issue-hero { gap: 48px; }

	.laburnum-issue-hero__heading.laburnum-issue-hero__heading {
		font: 700 1.75rem/1.5 var(--lp-font);
	}

	.laburnum-issue-hero__intro.laburnum-issue-hero__intro { font: var(--lp-body-3); }

	.laburnum-issue-hero__actions.laburnum-issue-hero__actions { align-self: stretch; }

	/* Watermark keeps its 237x234 size on mobile. */

	/* The hero photo runs edge to edge below the copy, cancelling the gutter. */
	.laburnum-issue-hero__media.laburnum-issue-hero__media {
		margin-inline: -16px;
	}

	.laburnum-issue-signs.laburnum-issue-signs,
	.laburnum-issue-people.laburnum-issue-people { --lp-gutter: 16px; }

	.laburnum-issue-prose.laburnum-issue-prose,
	.laburnum-issue-intro.laburnum-issue-intro { font: var(--lp-body-3); }

	/* Heading to body: 12px per review. Desktop keeps the 24px in the design. */
	.laburnum-issue-about__body.laburnum-issue-about__body .laburnum-psych-heading {
		margin-bottom: 12px;
	}

	/* Mobile puts the copy above the image; the DOM has the image first. */
	.laburnum-issue-about__media.laburnum-issue-about__media { order: 2; }
	.laburnum-issue-about__body.laburnum-issue-about__body { order: 1; }

	.laburnum-issue-signs__grid.laburnum-issue-signs__grid {
		grid-template-columns: 1fr;
		gap: 8px;
		margin-top: 24px;
	}

	.laburnum-issue-people__grid.laburnum-issue-people__grid {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 24px;
	}

	/* Sign card text is 14px on mobile; the icon stays 48px. */
	.laburnum-issue-sign__text.laburnum-issue-sign__text { font: var(--lp-title-3); }

	.laburnum-issue-card.laburnum-issue-card { padding: 20px 24px; }

	.laburnum-issue-card__photo.laburnum-issue-card__photo {
		width: 48px;
		height: 48px;
	}

	/* Card name stays 20px on mobile. */
}