.ohso-hero {
	--hero-accent: var(--accent);
	--hero-surface: var(--secondary-ultra-light);
	--hero-text: var(--secondary-semi-dark);
	--hero-heading: var(--hero-text);
	--hero-gradient-start: var(--secondary-light);
	--hero-artwork-colour: var(--accent-semi-light);
	--hero-artwork-light: var(--accent-light);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	background: var(--hero-surface);
	color: var(--hero-text);
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	padding: clamp(96px, calc(62.711409px + 10.402685vw), 220px) var(--section-gutter) var(--space-l);
}

.ohso-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wide-width);
	margin-inline: auto;
}

.ohso-hero__copy {
	width: calc(50% + 17px);
	max-width: 652px;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	overflow-wrap: anywhere;
}

.ohso-hero__heading {
	margin: 0;
	color: var(--hero-heading);
	font-family: var(--font-heading);
	font-size: var(--text-xxl);
	font-weight: 500;
	line-height: 1.111111;
}

.ohso-hero__heading em {
	color: var(--hero-accent);
	font-style: italic;
}

.ohso-hero__description {
	color: var(--hero-text);
	font-family: var(--font-body);
	font-size: var(--text-m);
	font-weight: 400;
	line-height: 1.5;
}

.ohso-hero__description p {
	margin: 0;
}

.ohso-hero__description p + p {
	margin-top: var(--space-xs);
}

.ohso-hero__gradient {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	pointer-events: none;
}

.ohso-hero__artwork {
	position: absolute;
	top: 0;
	left: calc(50% + 25px);
	right: 0;
	height: 488px;
	overflow: hidden;
}

.ohso-hero__canvas {
	position: relative;
	width: 658px;
	height: 488px;
}

.ohso-hero__circle {
	position: absolute;
	max-width: none;
	pointer-events: none;
}

.ohso-hero__circle--peach { left: 74px; top: -200px; }
.ohso-hero__circle--outline { left: 59px; top: -160px; }
.ohso-hero__circle--cream { left: 93px; top: -141px; }

.ohso-hero__photo {
	position: absolute;
	left: 109px;
	top: -127px;
	width: 700px;
	height: 699px;
	border-radius: 50%;
	overflow: hidden;
}

.ohso-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

@media (max-width: 63.99rem) {
	.ohso-hero {
		padding: var(--space-xl) var(--section-gutter) 0;
	}

	.ohso-hero__copy {
		width: 100%;
		max-width: 652px;
	}

	.ohso-hero__artwork {
		position: relative;
		left: auto;
		right: auto;
		height: 360px;
		margin-top: var(--space-m);
		margin-inline: calc(var(--section-gutter) * -1);
	}

	.ohso-hero__canvas {
		position: absolute;
		left: calc(50% - 459px);
		top: 141px;
	}
	/* Keep the upper artwork curve visible while revealing more of the photo. */
	.ohso-hero__circle--outline { display: none; }
	.ohso-hero__circle--peach { top: -141px; }
}

@media (max-width: 37.5rem) {
	.ohso-hero__artwork { height: 300px; }
	.ohso-hero__canvas {
		left: calc(50% - 298.35px);
		top: 91.65px;
		transform: scale(0.65);
		transform-origin: top left;
	}
}

/* Text-only layout. */
.ohso-hero.ohso-hero--simple-text {
	border-radius: var(--radius-l);
	padding: var(--space-l) var(--section-gutter);
}

.ohso-hero--simple-text .ohso-hero__copy {
	width: 100%;
	max-width: 652px;
	gap: var(--space-xs);
}

.ohso-hero__heading-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xxs);
}

.ohso-hero .ohso-hero__eyebrow {
	width: 293.5px;
	max-width: 100%;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

/* Tighten heading spacing when the photo layout includes an eyebrow. */
.ohso-hero--has-eyebrow .ohso-hero__heading {
	line-height: 1.0740740741;
}

.ohso-hero--has-eyebrow .ohso-hero__artwork,
.ohso-hero--has-eyebrow .ohso-hero__canvas {
	height: 492px;
}

.ohso-hero.ohso-hero--has-eyebrow:not(.ohso-hero--simple-text) {
	--hero-artwork-colour: var(--accent-semi-light);
	--hero-artwork-light: var(--accent-light);
}

.ohso-hero.ohso-hero--has-eyebrow.ohso-hero--sector-law {
	--hero-text: var(--law-accent-semi-dark);
	--hero-gradient-start: var(--law-accent-light);
}

.ohso-hero.ohso-hero--rounded-bottom {
	border-bottom-left-radius: var(--radius-l);
	border-bottom-right-radius: var(--radius-l);
}

.ohso-hero.ohso-hero--square-bottom {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

@media (max-width: 63.99rem) {
	.ohso-hero--has-eyebrow .ohso-hero__artwork { height: 360px; }
}

@media (max-width: 37.5rem) {
	.ohso-hero--has-eyebrow .ohso-hero__artwork { height: 300px; }
}

.ohso-hero--simple-text .ohso-hero__heading {
	font-weight: 500;
	line-height: 1.0740740741; /* Keep the compact heading line height at smaller sizes. */
}

.ohso-hero--simple-text .ohso-hero__simple-gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 817px;
	height: 484px;
	pointer-events: none;
}

/* Sector palettes use only aliases declared in variables.css. */
.ohso-hero.ohso-hero--sector-law {
	--hero-accent: var(--law-accent);
	--hero-surface: var(--law-accent-ultra-light);
}

.ohso-hero.ohso-hero--sector-barrister {
	--hero-accent: var(--barrister-accent);
	--hero-surface: var(--barrister-accent-ultra-light);
}

.ohso-hero.ohso-hero--sector-expert {
	--hero-accent: var(--expert-accent);
	--hero-surface: var(--expert-accent-utra-light);
}

.ohso-hero.ohso-hero--sector-family {
	--hero-accent: var(--family-accent);
	--hero-surface: var(--family-accent-ultra-light);
}

.ohso-hero.ohso-hero--sector-law,
.ohso-hero.ohso-hero--sector-barrister,
.ohso-hero.ohso-hero--sector-expert,
.ohso-hero.ohso-hero--sector-family {
	--hero-text: var(--neutral-dark);
	--hero-heading: var(--hero-accent);
	--hero-gradient-start: var(--hero-accent);
	--hero-artwork-colour: var(--hero-accent);
	--hero-artwork-light: var(--hero-surface);
}

/* Scale the circular composition with taller desktop panels. */
@media (min-width: 64rem) {
	.ohso-hero .ohso-hero__artwork {
		bottom: 0;
		height: auto;
		container-type: size;
	}

	.ohso-hero .ohso-hero__canvas {
		top: 50%;
		width: max(658px, calc(100cqh * 658 / 488));
		height: auto;
		aspect-ratio: 658 / 488;
		transform: translateY(-50%);
	}

	.ohso-hero .ohso-hero__circle { height: auto; }
	.ohso-hero .ohso-hero__circle--peach { left: 11.2462%; top: -40.9836%; width: 124.924%; }
	.ohso-hero .ohso-hero__circle--outline { left: 8.9666%; top: -32.7869%; width: 156.231%; }
	.ohso-hero .ohso-hero__circle--cream { left: 14.1337%; top: -28.8934%; width: 119.605%; }

	.ohso-hero .ohso-hero__photo {
		left: 16.5653%;
		top: 50%;
		width: 106.383%;
		height: auto;
		aspect-ratio: 700 / 699;
		transform: translateY(-50%);
	}
}