/**
 * Attorney profile pages (templates/profile.php).
 *
 * The layout: a full-bleed banner with the name over it, a coloured detail
 * bar overlapping the bottom of that banner, then the sections. Geometry
 * matches the WPBakery mock-up this was built from — container 1212px,
 * banner padding 20% of the container, bar pulled up over it with 6% inner
 * padding — so the same page can be rebuilt in a page builder and land in
 * the same place.
 *
 * Sized in px, em and % only — never rem. Law firm themes routinely set
 * `html { font-size: 10px }` to make their own rem scale convenient, and a
 * plugin that assumes 16px renders at 62.5% of its intended size on those
 * sites with no warning.
 */

.lfm-profile {
	--lfm-profile-accent: #0d345b;
	--lfm-profile-bar: #e74838;
	/* White on the bar colour, matching the firm's live site. It measures
	   about 3.6:1, so the bar is styled at 16px+ throughout and nothing
	   small or low-weight is allowed in there. */
	--lfm-profile-bar-ink: #fff;
	--lfm-profile-ink: #1c1c1c;
	--lfm-profile-muted: #5a5f66;
	--lfm-profile-rule: #dcdfe3;
	--lfm-profile-container: 1212px;

	color: var(--lfm-profile-ink);
}

.lfm-profile-container {
	margin: 0 auto;
	max-width: var(--lfm-profile-container);
	padding: 0 21px;
	width: 100%;
}

/* Paper-only blocks: out of the flow, and out of the accessibility tree,
   until the page is printed. */
.lfm-profile-print-only {
	display: none;
}

/* ---------------------------------------------------------------------
 * Banner
 * ------------------------------------------------------------------ */

.lfm-profile-banner {
	background-color: var(--lfm-profile-banner-bg, #002952);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

/* A scrim on the side the text sits on — not an all-over dim, which would
   flatten the photograph the banner exists to show. The name, position and
   pull quote are white and land over whatever the left of the artwork
   happens to be; this keeps them readable when that is a bright window or a
   pale wall. Fades out by ~72% so the subject on the right is untouched.
   (The site's global top scrim in the child theme is a different job: that
   one is for the menu, across every page.) */
.lfm-profile-banner-has-image::before {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.32) 42%, rgba(0, 0, 0, 0) 72%);
	content: "";
	inset: 0;
	position: absolute;
}

/* The entrance: the artwork resolves out of the firm's colour rather than
   snapping in with the rest of the page. The layer that fades is a veil in
   the brand colour sitting ON the picture, not the picture itself - a
   background-image has no opacity of its own to animate, and fading the
   whole banner would take the name and quote with it.

   Driven by an animation, not a class a script adds: if the stylesheet
   loads at all the entrance runs, and a page whose JS never arrives still
   ends up showing the photograph. The veil paints above the scrim (later
   sibling, both auto z-index) and below the type, which carries z-index 1
   on its container. */
.lfm-profile-banner-has-image::after {
	animation: lfm-profile-banner-in 900ms 120ms ease-out both;
	background-color: var(--lfm-profile-banner-bg, #002952);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

@keyframes lfm-profile-banner-in {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}


/* Then the type, as one block. Name, position and quote arrive together -
   they read as a single caption on the picture, and staggering them would
   turn a page opening into a slideshow. The delay is the veil's own
   120ms + 900ms, so the words start once the photograph has finished
   resolving.

   The keyframe supplies opacity: 0; the rule does NOT. A browser that
   never runs the animation therefore shows the text at its natural
   opacity instead of leaving a blank banner - content is never hidden by
   a stylesheet waiting on something else to reveal it. */
.lfm-profile-banner-has-image .lfm-profile-identity {
	animation: lfm-profile-identity-in 1400ms 1020ms ease-out both;
}

@keyframes lfm-profile-identity-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
/* Someone who has asked for less movement gets the finished state, not a
   shorter version of the same fade. */
@media (prefers-reduced-motion: reduce) {
	.lfm-profile-banner-has-image::after {
		animation: none;
		opacity: 0;
	}

	.lfm-profile-banner-has-image .lfm-profile-identity {
		animation: none;
	}
}

.lfm-profile-banner .lfm-profile-container {
	position: relative;
	z-index: 1;
}

/* Percentage padding resolves against the container's width, so this is
   20% of 1170px — the mock-up's 234px — and scales down with the viewport
   instead of holding a fixed height at every size. */
.lfm-profile-banner-inner {
	align-items: center;
	display: flex;
	gap: 40px;
	padding: 20% 0;
}

.lfm-profile-photo {
	flex: 0 0 auto;
	max-width: 280px;
}

.lfm-profile-photo-img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Fills the row rather than sizing to its own text.
 *
 * As a plain flex item (`0 1 auto`) this block was only ever as wide as
 * its widest line - the first name at 56px - so every percentage measured
 * inside it depended on how long that person's name happened to be. Diane
 * Gillette's block came out 543px and her pull quote, capped at 48% of it,
 * was 261px: six words broken over three lines. `flex: 1` makes those
 * percentages resolve against the banner instead of the name. */
.lfm-profile-identity {
	flex: 1 1 auto;
	min-width: 0;
}

.lfm-profile-banner-has-image .lfm-profile-identity,
.lfm-profile-banner .lfm-profile-name,
.lfm-profile-banner .lfm-profile-position,
.lfm-profile-banner .lfm-profile-quote {
	color: #fff;
}

.lfm-profile-name {
	font-size: 56px;
	font-weight: 500;
	line-height: 72px;
	margin: 0;
	padding: 0;
	text-transform: capitalize;
}

.lfm-profile-name-first,
.lfm-profile-name-last {
	display: block;
}

.lfm-profile-position {
	font-size: 16px;
	font-weight: 400;
	line-height: 32px;
	margin: 4px 0 0;
	text-transform: uppercase;
}

/* Themes style blockquote heavily — theGem gives it a grey panel, its own
   font and a quote glyph — and all of that has to come off, because on this
   layout the quote is white text over a photograph. Two classes plus the
   element name so the reset outranks the theme without !important. */
.lfm-profile blockquote.lfm-profile-quote {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--lfm-profile-display, inherit);
	/* The user's own numbers, taken off the live site — left exactly as
	   they set them in the mock-up. */
	font-size: 32px;
	font-style: italic;
	font-weight: 200;
	line-height: 38px;
	margin: 40px 0 0;
	/* Half the banner, so the words stay clear of whoever is standing on
	   the right of the artwork. A banner with no image has nothing to keep
	   clear of - see below. */
	max-width: 48%;
	padding: 0 0 40px;
	quotes: none;
	text-align: left;
}

/* The stand-in for a missing quote: the same margins, and three lines of
   the same leading, which is what most of the quotes on this roster run
   to. Sized in the quote's own numbers so the two stay in step. */
.lfm-profile-quote-space {
	margin: 40px 0 0;
	min-height: 114px;
	padding: 0 0 40px;
}

/* Without a banner photograph there is no subject to avoid, and holding
   the quote to half the width just breaks a short line of type for no
   reason. It still stops well short of the full measure: 32px italic
   running the whole 1170px would read as a paragraph, not a pull quote. */
.lfm-profile-banner:not(.lfm-profile-banner-has-image) blockquote.lfm-profile-quote {
	max-width: 62%;
}

/* No generated quote marks: the stored text carries its own, and a second
   pair from CSS is what made this read as ""like this"". */
.lfm-profile blockquote.lfm-profile-quote::before,
.lfm-profile blockquote.lfm-profile-quote::after {
	content: none;
}

/* ---------------------------------------------------------------------
 * Detail bar — contact, practices, actions
 * ------------------------------------------------------------------ */

/* The negative inline margins cancel the container's own side padding, so
   the bar spans the full 1212px container edge to edge the way the row it
   was designed as does — its 6% padding is what insets the text. */
.lfm-profile-bar {
	background: var(--lfm-profile-bar);
	border-radius: 5px;
	color: var(--lfm-profile-bar-ink);
	display: grid;
	gap: 0 48px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: -140px -21px 0;
	padding: 6%;
	position: relative;
	z-index: 2;
}

/* Two or one column when a firm turns parts of the bar off, rather than a
   third of the bar sitting empty. */
.lfm-profile-bar:has(> .lfm-profile-bar-col:last-child:nth-child(2)) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lfm-profile-bar:has(> .lfm-profile-bar-col:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.lfm-profile-bar-title {
	color: var(--lfm-profile-bar-ink);
	font-family: var(--lfm-profile-display, inherit);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 32px;
	margin: 0 0 14px;
	padding: 0;
	text-transform: none;
}

.lfm-profile-bar,
.lfm-profile-bar a {
	color: var(--lfm-profile-bar-ink);
}

.lfm-profile-bar a {
	text-decoration: none;
}

/* The icons in front of phone / fax / email, sized to the text beside them. */
.lfm-profile-contact-list li {
	align-items: baseline;
	display: flex;
	gap: 13px;
}

/* The row's flex gap sits between its children, and the email row has only
   one - the link - so the space beside its icon has to come from the link
   itself, at the same 13px, or it reads as jammed against the envelope
   while phone and fax line up correctly. */
.lfm-profile-email {
	align-items: baseline;
	display: inline-flex;
	gap: 13px;
}

.lfm-profile-contact-list .lfm-field-icon {
	flex: 0 0 19px;
	position: relative;
	top: 3px;
}

/* Themes recolour links on hover; in here the only colour that works over
   the bar is the one it already has, so hover changes the underline, not
   the colour. */
.lfm-profile .lfm-profile-bar a:hover,
.lfm-profile .lfm-profile-bar a:focus,
.lfm-profile .lfm-profile-bar a:focus-visible {
	color: var(--lfm-profile-bar-ink);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

.lfm-profile-contact-list {
	font-size: 18px;
	font-weight: 200;
	line-height: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lfm-profile-practice-list {
	font-size: 20px;
	font-style: italic;
	font-weight: 200;
	line-height: 34px;
	margin: 0;
}

.lfm-profile-actions {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lfm-profile-actions li + li {
	margin-top: 10px;
}

.lfm-profile-action {
	display: inline-block;
	font-family: var(--lfm-profile-display, inherit);
	font-size: 18px;
	font-weight: 700;
	line-height: 32px;
}

/* ---------------------------------------------------------------------
 * Sections — accordion by default, promoted to tabs by profile.js
 * ------------------------------------------------------------------ */

.lfm-profile-sections {
	padding: 56px 0 64px;
}

.lfm-profile-section {
	border-top: 1px solid var(--lfm-profile-rule);
}

.lfm-profile-section:last-child {
	border-bottom: 1px solid var(--lfm-profile-rule);
}

.lfm-profile-section-heading {
	font-size: 20px;
	margin: 0;
}

.lfm-profile-section-toggle {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: block;
	font: inherit;
	padding: 18px 0;
	text-align: left;
	width: 100%;
}

.lfm-profile-section-body {
	padding-bottom: 28px;
}

/* Imported content carries floated images (alignleft / alignright), and a
   float adds no height to its container - so the section's own rule, and
   any heading after it, ran straight through the picture. The body clears
   its floats, and each block title starts on a clean line. */
.lfm-profile-section-body::after {
	clear: both;
	content: "";
	display: block;
}

.lfm-profile-block-title {
	clear: both;
	font-size: 20px;
	margin: 26px 0 12px;
}

/* The first heading in a section sits flush. Both forms are named: the
   credential fields wrap each heading in a `.lfm-profile-block`, so the
   heading is no longer the section body's own first child. */
.lfm-profile-section-body > :first-child.lfm-profile-block-title,
.lfm-profile-section-body > .lfm-profile-block:first-child > :first-child.lfm-profile-block-title {
	margin-top: 0;
}

.lfm-profile-section-body .alignleft {
	float: left;
	margin: 4px 22px 18px 0;
}

.lfm-profile-section-body .alignright {
	float: right;
	margin: 4px 0 18px 22px;
}

.lfm-profile-section-body .aligncenter {
	display: block;
	margin: 4px auto 18px;
}

.lfm-profile-section-body > :first-child {
	margin-top: 0;
}

.lfm-profile-section-body > :last-child {
	margin-bottom: 0;
}

/* Tabs mode. profile.js sets .lfm-profile-sections-tabs once it has built
   the tab strip, so none of this applies to a page where the script never
   ran — that page keeps the readable accordion. */
.lfm-profile-sections-tabs .lfm-profile-section {
	border: 0;
}

.lfm-profile-sections-tabs .lfm-profile-section-heading {
	display: none;
}

/* Same tab treatment as the practice-area pages, so the two page types
   read as one site: body font at 18px, grey until selected, a hairline
   under the whole strip and no underline on the selected one. */
.lfm-profile-tablist {
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-wrap: wrap;
	gap: 0 25px;
	margin-bottom: 28px;
}

.lfm-profile-tab {
	background: none;
	border: 0;
	color: #666;
	cursor: pointer;
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 27px;
	padding: 12px 25px;
	text-transform: none;
	white-space: nowrap;
}

/* The first tab sits flush with the column, the way the practice pages do. */
.lfm-profile-tab:first-child {
	padding-left: 0;
}

.lfm-profile-tab:hover {
	color: var(--lfm-profile-ink);
}

.lfm-profile-tab[aria-selected="true"] {
	color: var(--lfm-profile-accent);
}

.lfm-profile-section[hidden] {
	display: none;
}

/* Focus must stay visible — these are the only keyboard affordances on the
   page, and a law firm site is exactly the kind of site people reach with
   a keyboard or a screen reader. */
.lfm-profile-tab:focus-visible,
.lfm-profile-section-toggle:focus-visible,
.lfm-profile-action:focus-visible,
.lfm-profile a:focus-visible {
	outline: 2px solid var(--lfm-profile-accent);
	outline-offset: 2px;
}

.lfm-profile-banner a:focus-visible {
	outline-color: #fff;
}

.lfm-profile-bar a:focus-visible {
	outline-color: var(--lfm-profile-bar-ink);
}

/* Ordinary prose keeps ordinary paragraph spacing. */
.lfm-profile-section-body p {
	margin: 0 0 14px;
}

/* Credentials are the exception: those arrive as one paragraph per LINE -
   a school, an association - so full paragraph gaps read as a stack of
   separate blocks instead of a list. Tight there, and only there; applying
   it everywhere left the Presentations citations crushed together. */
.lfm-profile-section[data-lfm-section="credentials"] .lfm-profile-section-body p {
	margin: 0 0 4px;
}

.lfm-profile-section[data-lfm-section="credentials"] .lfm-profile-section-body p > strong:only-child {
	display: inline-block;
	margin-top: 22px;
}

.lfm-profile-section[data-lfm-section="credentials"] .lfm-profile-section-body > p:first-child > strong:only-child {
	margin-top: 0;
}

.lfm-profile-section-body ul,
.lfm-profile-section-body ol {
	margin: 0 0 12px;
}

.lfm-profile-section-body li {
	margin-bottom: 4px;
}

/* Award badges.
 *
 * Recognition is not prose: it is a run of marks from Best Lawyers, Super
 * Lawyers, Chambers and the rest, each supplied at whatever size that
 * organisation happened to export - 300x91 sitting next to 112x150 - and
 * every one of them arrives as a floated `alignleft` image. Left alone
 * they stagger down the page at a dozen different sizes.
 *
 * One height, set here, and the width follows the artwork so nothing is
 * distorted. The float comes off so they run along a line instead of
 * stacking, and `inline-block` lets a long row wrap by itself. This is
 * why the block needed a class of its own: the badges are plain <img>
 * tags in the imported markup, with nothing else to hook.
 */
.lfm-profile-section-body .lfm-profile-block-recognition img,
.lfm-profile-section-body .lfm-profile-block-recognition .alignleft,
.lfm-profile-section-body .lfm-profile-block-recognition .alignright {
	display: inline-block;
	float: none;
	height: 72px;
	margin: 0 16px 14px 0;
	max-width: none;
	vertical-align: middle;
	width: auto;
}

/* "Phone & Fax" after a number that serves as both. Set quieter than the
   number itself: it is a note about the line, not part of it. */
.lfm-profile-shared-fax,
.lfm-field-fax-note {
	font-size: 0.82em;
	letter-spacing: 0.02em;
	opacity: 0.85;
	white-space: nowrap;
}

/* The address is carried in the markup for the printed sheet only. */
.lfm-profile-email-address {
	display: none;
}

/* ---------------------------------------------------------------------
 * Articles & News
 * ------------------------------------------------------------------ */

.lfm-profile-news {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lfm-profile-news-item {
	align-items: flex-start;
	border-bottom: 1px solid var(--lfm-profile-rule);
	display: flex;
	gap: 18px;
	padding: 14px 0;
}

.lfm-profile-news-thumb {
	display: block;
	flex: 0 0 110px;
	line-height: 0;
}

/* Whole image, never a crop — these carry text. Height follows the
   picture, so rows vary a little rather than losing the words. */
.lfm-profile-news-thumb img {
	display: block;
	height: auto;
	max-height: 90px;
	object-fit: contain;
	width: 110px;
}

.lfm-profile-news-text {
	min-width: 0;
}

.lfm-profile-news-title {
	font-size: 17px;
}

.lfm-profile-news-date {
	color: var(--lfm-profile-muted);
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

/* Three shapes for one list, by width:
   - 1025px and up: a card grid, image above the headline.
   - 761–1024px: the row above — thumbnail left, text right.
   - 760px and down: no image at all, just headline and date, because a
     thumbnail on a phone costs more width than it earns. */
@media (min-width: 1025px) {
	.lfm-profile-news {
		display: grid;
		gap: 26px;
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	}

	.lfm-profile-news-item {
		border: 1px solid var(--lfm-profile-rule);
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		gap: 0;
		overflow: hidden;
		padding: 0;
	}

	.lfm-profile-news-thumb {
		background: #f2f4f5;
		flex: 0 0 auto;
		width: 100%;
	}

	/* Letterboxed rather than cropped, on a tint: these are promotional
	   graphics with words in them, and every card still lines up. */
	.lfm-profile-news-thumb img {
		height: 150px;
		max-height: none;
		object-fit: contain;
		width: 100%;
	}

	.lfm-profile-news-text {
		padding: 14px 16px 16px;
	}

	/* A headline in a card runs to three or four lines, and the theme's
	   body leading spaces those out until they read as separate
	   paragraphs rather than one title. */
	.lfm-profile-news-title {
		line-height: 1.28;
	}

	.lfm-profile-news-date {
		margin-top: 6px;
	}

	/* The sentinel sits after the grid, not inside it. */
	.lfm-profile-news-sentinel {
		grid-column: 1 / -1;
	}
}

@media (max-width: 760px) {
	.lfm-profile-news-thumb {
		display: none;
	}
}

/* The sentinel is an empty block until a batch is in flight, so the list
   does not end with a permanent "loading" line that never resolves. */
.lfm-profile-news-sentinel {
	color: var(--lfm-profile-muted);
	font-size: 14px;
	min-height: 1px;
	padding: 18px 0;
	text-align: center;
}

.lfm-profile-news-loading {
	display: none;
}

.lfm-profile-news-sentinel.is-loading .lfm-profile-news-loading {
	display: inline;
}

/* ---------------------------------------------------------------------
 * Previous / next person
 *
 * An arrow and a face at each end of the bio. The name is there for
 * everyone - as a label a screen reader reads out, and as type that
 * appears on hover or keyboard focus for everyone else - so the control
 * is never just two anonymous portraits.
 * ------------------------------------------------------------------ */

.lfm-profile-adjacent {
	border-top: 1px solid var(--lfm-profile-rule);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 22px 0 40px;
}

.lfm-profile-adjacent-link {
	align-items: center;
	display: inline-flex;
	gap: 12px;
	max-width: 48%;
	text-decoration: none;
}

.lfm-profile-adjacent-next {
	flex-direction: row-reverse;
	margin-left: auto;
	text-align: right;
}

.lfm-profile-adjacent-arrow {
	border-color: var(--lfm-profile-bar);
	border-style: solid;
	border-width: 2px 2px 0 0;
	display: block;
	flex: 0 0 auto;
	height: 12px;
	transition: transform 0.15s ease;
	width: 12px;
}

.lfm-profile-adjacent-prev .lfm-profile-adjacent-arrow {
	transform: rotate(-135deg);
}

.lfm-profile-adjacent-next .lfm-profile-adjacent-arrow {
	transform: rotate(45deg);
}

.lfm-profile-adjacent-prev:hover .lfm-profile-adjacent-arrow {
	transform: rotate(-135deg) translate(2px, -2px);
}

.lfm-profile-adjacent-next:hover .lfm-profile-adjacent-arrow {
	transform: rotate(45deg) translate(2px, -2px);
}

.lfm-profile-adjacent-photo {
	border-radius: 5px;
	display: block;
	flex: 0 0 auto;
	height: 54px;
	overflow: hidden;
	width: 54px;
}

.lfm-profile-adjacent-photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

/* Hidden until the pointer or the keyboard arrives, but never removed from
   the flow in a way that would move the arrow and photo around. */
.lfm-profile-adjacent-name {
	color: var(--lfm-profile-ink);
	font-size: 15px;
	line-height: 1.3;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.lfm-profile-adjacent-link:hover .lfm-profile-adjacent-name,
.lfm-profile-adjacent-link:focus-visible .lfm-profile-adjacent-name {
	opacity: 1;
}

/* A pointer is not guaranteed: where there is no hover, the names simply
   stay visible rather than being unreachable. */
@media (hover: none) and (min-width: 761px) {
	.lfm-profile-adjacent-name {
		opacity: 1;
	}
}

/* On a phone the arrow and the face are the whole control; the name is
   still on the link for a screen reader. */
@media (max-width: 760px) {
	.lfm-profile-adjacent-name {
		display: none;
	}

	.lfm-profile-adjacent {
		padding: 18px 0 30px;
	}
}

/* ---------------------------------------------------------------------
 * Video cover — only the pieces a theme is unlikely to provide.
 *
 * Deliberately single-class selectors, no .lfm-profile prefix: a site that
 * already styles .lfm-video-cover (maddin27 does, in its child theme) must
 * keep its own look, and it only can if these rules are no more specific
 * than the ones already there.
 * ------------------------------------------------------------------ */

.lfm-video-cover {
	cursor: pointer;
	display: block;
	margin: 0 0 24px;
	position: relative;
}

.lfm-video-cover img {
	display: block;
	height: auto;
	max-width: 100%;
}

.lfm-video-caption h3 {
	margin: 12px 0 4px;
}

.lfm-video-caption p {
	margin: 0;
}

.lfm-video-modal {
	align-items: center;
	background: rgba(13, 52, 91, 0.98);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 24px;
	position: fixed;
	z-index: 100000;
}

.lfm-video-modal[hidden] {
	display: none;
}

.lfm-video-modal-inner {
	max-width: 1100px;
	position: relative;
	width: 100%;
}

.lfm-video-modal-body iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	height: auto;
	width: 100%;
}

.lfm-video-modal-close {
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 32px;
	line-height: 1;
	padding: 8px;
	position: absolute;
	right: 0;
	top: -48px;
}

/* ---------------------------------------------------------------------
 * Narrow screens
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* The practice list is the one that wraps hardest, so it comes down a
	   step and stays there at every width below 1024, while the contact
	   column, which holds short fixed-length values, is left alone. */
	.lfm-profile-practice-list {
		font-size: 17px;
		line-height: 28px;
	}
}

/* At tablet width and below the banner stops being a stage for type: the
   photograph becomes a band across the top and the name, position and quote
   move underneath it into a dark panel. The image is a background, so the
   split is done by sizing it to a fixed height and padding the content down
   past it — the banner's own background-colour becomes the panel. */
@media (max-width: 1024px) {
	.lfm-profile-banner {
		background-color: #464c55;
		background-image: none !important;
	}

	/* The side scrim existed to hold white type over the picture; the type
	   is no longer on the picture. */
	/* The picture becomes a band in the flow rather than a background, so
	   it spans the full width and crops to a set shape at any viewport.
	   The pseudo-element takes its image from the --lfm-banner property
	   the template sets alongside the inline background, because a
	   pseudo-element cannot read a background-image that CSS has just
	   switched off. */
	.lfm-profile-banner-has-image::before {
		aspect-ratio: 3 / 2;
		background-image: var(--lfm-banner);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: block;
		inset: auto;
		position: static;
		width: 100%;
	}

	/* The picture is a band now, not the whole header - the veil has to
	   cover the band and nothing else, or it fades over the grey name
	   panel below it too. Same 3:2 as the band, pinned to the top. */
	.lfm-profile-banner-has-image::after {
		aspect-ratio: 3 / 2;
		inset: 0 0 auto 0;
	}

	.lfm-profile-banner-inner {
		align-items: stretch;
		display: block;
		padding: 0;
	}

	/* The panel is inset by 6% on every side, the same figure the orange
	   bar uses, so the two blocks share one margin down the page. The
	   container's own 21px side padding is cancelled first, or the two
	   would be measuring their percentages against different widths. */
	.lfm-profile-banner .lfm-profile-container,
	.lfm-profile-container-bar {
		padding: 0;
	}

	.lfm-profile-identity {
		padding: 6%;
	}

	.lfm-profile-name {
		font-size: 34px;
		line-height: 1.15;
	}

	/* One line, first and last together. */
	.lfm-profile-name-first,
	.lfm-profile-name-last {
		display: inline;
	}

	/* A plain space in generated content collapses away — the two names ran
	   together as "Ronald A.Sollish". A non-breaking space survives. */
	/* No margin between the names: the two spans sit on separate lines in
	   the markup, and once they are inline that line break already renders
	   as one space. Adding a margin made it two. */

	.lfm-profile-position {
		margin-top: 1px;
	}

	.lfm-profile blockquote.lfm-profile-quote {
		display: none;
	}

	/* Nothing left to overlap — the bar follows the panel. */
	.lfm-profile-bar {
		border-radius: 0;
		margin: 0;
	}
}

@media (max-width: 760px) {
	/* A little more air over the name where the panel is narrow. */
	.lfm-profile-identity {
		padding-top: 9%;
	}
}

@media (max-width: 782px) {
	.lfm-profile-banner-inner {
		display: block;
		padding: 0;
	}

	.lfm-profile-photo {
		margin-bottom: 24px;
		max-width: 200px;
	}

	.lfm-profile-name {
		font-size: 28px;
	}

	.lfm-profile blockquote.lfm-profile-quote {
		font-size: 20px;
		line-height: 27px;
		margin-top: 18px;
		max-width: 100%;
	}

	.lfm-profile-bar {
		gap: 28px;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
		padding: 6%;
	}

	.lfm-profile-sections {
		padding: 36px 0 48px;
	}
}

/* ---------------------------------------------------------------------
 * Print
 *
 * The Print action is how a visitor saves a profile as a PDF, so this is a
 * designed sheet rather than "the web page, on paper": a letterhead band
 * across the top, the banner photo with the pull quote over it, then the
 * bio. Everything interactive is dropped.
 *
 * The sheet keeps a printer's gutter all round rather than bleeding to the
 * edge — bleed needs trimming, and nobody trims a bio they printed at their
 * desk. @page owns that margin, so nothing inside adds its own.
 * ------------------------------------------------------------------ */

@media print {
	/*
	 * Per-page gutters on all four sides.
	 *
	 * This margin is the only way to put space at the top and bottom of
	 * EVERY sheet - padding on the content reaches the first page and the
	 * last, and nothing in between, because a printed page break is not a
	 * box that can be padded.
	 *
	 * It is also the exact space the browser draws its own header and
	 * footer into: the page title, the URL, the page number, the
	 * timestamp. No CSS turns those off - the reader does, once, in the
	 * print dialog ("Print headers and footers" in Firefox, "Headers and
	 * footers" under More settings in Chrome). Taking this margin to zero
	 * removes them by removing the space, and takes the gutters with it.
	 * The gutters won, on the grounds that a cramped page is wrong every
	 * time while the header is wrong only until somebody unticks a box.
	 */
	@page {
		margin: 0.4in 0.45in;
	}

	.lfm-profile {
		color: #1c1c1c;
	}

	/*
	 * The address, once, at the end of the profile. A plain block in the
	 * flow rather than a fixed band: it belongs to the document, not to
	 * every sheet, and in the flow it can never land on top of a line of
	 * the biography.
	 */
	.lfm-profile-print-foot {
		border-top: 0.5pt solid #d5d5d5;
		color: #6b6b6b;
		font-size: 8.5pt;
		letter-spacing: 0.04em;
		margin: 22pt 0 0;
		padding: 8pt 0 0;
		text-align: center;
	}

	.lfm-profile-print-only {
		display: block;
	}

	/* Letterhead. print-color-adjust is what makes the band survive with
	   the browser's "Background graphics" box unticked — which is how it
	   ships, and nobody ticks it. */
	.lfm-profile-print-head {
		align-items: center;
		background: var(--lfm-profile-band, var(--lfm-profile-accent));
		display: flex;
		height: 80px;
		margin: 0;
		padding: 0 16pt;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.lfm-profile-print-logo,
	.lfm-profile-print-head img {
		height: auto;
		max-height: 42px;
		max-width: 3in;
		width: auto;
	}

	.lfm-profile-print-title {
		color: #fff;
		font-family: var(--lfm-profile-display, inherit);
		font-size: 20pt;
		font-weight: 700;
	}

	/* The banner, whole — no crop, no cap. */
	.lfm-profile-print-banner {
		break-inside: avoid;
		margin: 0 0 18pt;
		position: relative;
	}

	.lfm-profile-print-banner img {
		display: block;
		height: auto;
		width: 100%;
	}

	/* The quote sits on the photo, bottom left, as it does on the page. */
	/* A scrim across the bottom of the photo does the contrast work, so the
	   quote itself can be pure white with a tight shadow. A wide blurred
	   shadow was the problem: at print resolution the halo spreads into the
	   glyphs and the whole quote reads grey rather than white. */
	.lfm-profile-print-banner::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%);
		bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.lfm-profile-print-quote {
		bottom: 18pt;
		color: #fff !important;
		font-family: var(--lfm-profile-display, inherit);
		font-size: 18pt;
		font-style: italic;
		font-weight: 300;
		left: 18pt;
		line-height: 24pt;
		margin: 0;
		max-width: 50%;
		position: absolute;
		text-shadow: 0 1pt 2pt rgba(0, 0, 0, 0.55);
		z-index: 1;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* The on-screen banner keeps only the name and position — its photo is
	   printed above by the figure, and its quote is on that photo. */
	.lfm-profile-banner {
		background: none !important;
	}

	.lfm-profile-banner-has-image::after {
		display: none;
	}

	/*
	 * And the band, which is the one that broke the PDF.
	 *
	 * A printed page is about 816 CSS pixels wide, so the browser applies
	 * the SAME rules it uses on a tablet - including the one that turns
	 * the banner photograph into a 3:2 block in the flow. That block is a
	 * background image, which does not print, so it came out as roughly
	 * half a page of white with the whole profile pushed down behind it.
	 * The photograph is already on the page as a real <img> in the
	 * print-only figure above; this is its screen twin and has no job
	 * here. Worth remembering: print media does not mean "desktop".
	 */
	.lfm-profile-banner-has-image::before {
		display: none !important;
	}

	.lfm-profile-banner-has-image .lfm-profile-identity {
		animation: none;
	}

	.lfm-profile-banner-inner {
		display: block;
		padding: 0 0 14pt;
	}

	/*
	 * The tablet rules apply on paper (816px page), and down there the
	 * identity is a panel inset by 6% on every side. On a sheet that 6%
	 * became a left indent the name did not share with Contact and
	 * Practices below it, plus a band of empty space above it. The panel
	 * does not exist in print - the type sits directly on the page - so
	 * the inset goes with it.
	 */
	.lfm-profile-identity {
		padding: 0 !important;
	}

	.lfm-profile-print-banner {
		margin-bottom: 10pt !important;
	}

	.lfm-profile-name {
		margin-top: 0 !important;
	}

	.lfm-profile-photo,
	.lfm-profile-banner .lfm-profile-quote,
	.lfm-profile-quote-space {
		display: none;
	}

	.lfm-profile-banner .lfm-profile-name,
	.lfm-profile-banner .lfm-profile-position {
		color: #1c1c1c !important;
	}

	/* First and last name on one line. */
	.lfm-profile-name {
		font-size: 26pt;
		line-height: 30pt;
	}

	.lfm-profile-name-first,
	.lfm-profile-name-last {
		display: inline;
	}

	/* A plain space in generated content collapses away — the two names ran
	   together as "Ronald A.Sollish". A non-breaking space survives. */


	.lfm-profile-position {
		font-size: 10pt;
		line-height: 13pt;
		margin: 0 0 6pt;
	}

	/* Contact and Practices as two plain columns — the bar's colour is for
	   the screen. */
	.lfm-profile-bar {
		background: none !important;
		border-radius: 0;
		break-inside: avoid;
		color: #1c1c1c !important;
		gap: 0 28pt;
		grid-template-columns: 1fr 1fr;
		margin: 0;
		padding: 0 0 14pt;
	}

	.lfm-profile-bar a,
	.lfm-profile-bar-title {
		color: #1c1c1c !important;
	}

	.lfm-profile-bar-actions {
		display: none;
	}

	.lfm-profile-bar-title {
		font-size: 12pt;
		line-height: 16pt;
		margin-bottom: 6pt;
	}

	.lfm-profile-contact-list {
		font-size: 10pt;
		line-height: 15pt;
	}

	.lfm-profile-practice-list {
		font-size: 12pt;
		line-height: 17pt;
	}

	/* No icons on paper — they read as specks at print resolution. */
	.lfm-profile-contact-list .lfm-field-icon {
		display: none;
	}

	/* "Email Ronald" is a control, and paper has no controls: the sheet
	   gets the address somebody can actually type. */
	.lfm-profile-email-text {
		display: none;
	}

	.lfm-profile-email-address {
		display: inline;
	}

	.lfm-profile-contact-list li {
		display: block;
	}

	/* Every section prints, whichever tab happened to be open. */
	.lfm-profile-container {
		max-width: none;
		padding: 0;
	}

	.lfm-profile-sections {
		padding: 0 0 18pt;
	}

	.lfm-profile-section[hidden] {
		display: block !important;
	}

	.lfm-profile-sections-tabs .lfm-profile-section-heading {
		display: block;
	}

	.lfm-profile-section-heading {
		break-after: avoid;
		font-size: 13pt;
	}

	.lfm-profile-section-toggle {
		font-weight: 700;
		padding: 10pt 0 4pt;
	}

	.lfm-profile-section-body {
		font-size: 10pt;
		line-height: 15pt;
		padding-bottom: 6pt;
	}

	/* Credential lists arrive as one paragraph per line; paragraph spacing
	   made them read as separate blocks rather than a list. */
	.lfm-profile-section-body p {
		margin: 0 0 3pt;
	}

	.lfm-profile-section-body p strong {
		display: inline-block;
		margin-top: 8pt;
	}

	/* The first section's heading duplicates the name of the page. */
	.lfm-profile-section[data-lfm-section="overview"] .lfm-profile-section-heading {
		display: none;
	}

	/* Articles & News is a list of links, which is nothing on paper. */
	.lfm-profile-section[data-lfm-section="news"] {
		display: none !important;
	}

	/* The badges keep their one height on paper too, in points, so they
	   are sized against the sheet rather than the screen. */
	.lfm-profile-section-body .lfm-profile-block-recognition img,
	.lfm-profile-section-body .lfm-profile-block-recognition .alignleft,
	.lfm-profile-section-body .lfm-profile-block-recognition .alignright {
		display: inline-block;
		float: none;
		height: 46pt;
		margin: 0 12pt 8pt 0;
		max-width: none;
		vertical-align: middle;
		width: auto;
	}

	/*
	 * The previous/next people. A navigation control is meaningless once
	 * the page is a sheet of paper, and its thumbnails were printing as
	 * two stray faces under the biography.
	 */
	.lfm-profile-adjacent {
		display: none !important;
	}

	.lfm-profile-actions,
	.lfm-profile-tablist,
	.lfm-video-cover,
	.lfm-profile-section-body iframe {
		display: none !important;
	}
}