/**
 * NovaBP Tax Advisor — Section 4, Who We Serve
 *
 * Figma reference: node 319:2667 — a radius-28 tinted panel (319:2668) inset 40px
 * from the page, holding a two-column header, the expand/collapse segment row
 * (2020:1261) and the pull quote over the industry grid (2020:2092).
 */

/*
 * An inset card, not a full-bleed band: the padding is the frame around the
 * tinted panel, which Figma draws at 40px rather than at the 80px page gutter.
 * From the tablet tier down the inline axis switches to --nova-gutter-x
 * (style.css) so the panel edge lines up with every other section, while the
 * block axis keeps this smaller scale.
 */
.nova-tax-audience {
	width: 100%;
	padding: 40px;
	background-color: var(--nova-tax-white);
}

.nova-tax-audience__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
	padding: 60px;

	/*
	 * Figma 2088:4335 — the watermark behind the industry list. It is a chevron
	 * path with a 40px stroke at 2% opacity, not the rounded rectangle the node's
	 * reported `borderRadius` suggests, so it ships as exported artwork rather
	 * than as a bordered pseudo-element.
	 *
	 * Painting it as a background rather than a positioned child means the border
	 * box crops it for free. That is what this panel's `overflow` used to be for,
	 * and being able to drop the `overflow` is what lets the pull-quote aside
	 * below actually pin — any value other than `visible` makes this a scroll
	 * container, and a sticky descendant then sticks to a scrollport exactly as
	 * tall as its own content, with nowhere to travel.
	 *
	 * Anchored bottom-right, though Figma reports it top-left at (723, 1156) in a
	 * 1360x2134 panel — hence `100% - (723 + 857)` and `2134 - (1156 + 584)`. The
	 * live panel runs taller than the design's because the industry list is
	 * longer, so a top offset would slide the mark up across that list. Measured
	 * from the bottom it keeps the design's distance from the end of the list,
	 * which is the relationship it is drawn to.
	 */
	background-color: var(--nova-tax-surface);
	background-image: url("../images/tax-advisor/audience-watermark.svg");
	background-repeat: no-repeat;
	background-position: right -220px bottom 394px;
	border: 1px solid var(--nova-tax-border);
	border-radius: 28px;
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

/*
 * `align-items: flex-end` is the design's own choice: it sits the button and the
 * last line of the lede on a shared baseline, which is what ties the two columns
 * together despite their different heights.
 */
.nova-tax-audience__head {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 80px;
}

.nova-tax-audience__head-left {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	min-width: 0;
}

.nova-tax-audience__head-left .nova-tax-header__title {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * 560px is the width Figma gives the lede column, the same fixed basis the
 * quote/photo aside below the segments takes — the two right-hand columns line
 * up down the section.
 */
.nova-tax-audience__head-right {
	display: flex;
	flex: 0 1 560px;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding-block-end: 8px;
}

/* ---------------------------------------------------------------------------
 * Segment cards
 *
 * One card is expanded and the rest collapsed. `flex-grow` carries the whole
 * interaction: the expanded card grows by `--nova-tax-audience-expand`, and
 * because flex-grow is animatable the change reads as a slide rather than a jump.
 * ------------------------------------------------------------------------ */

.nova-tax-audience__segments {
	--nova-tax-audience-segment-gap: 20px;

	position: relative;
	display: flex;
	align-items: center;
	gap: var(--nova-tax-audience-segment-gap);
}

.nova-tax-audience__segment {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	min-width: 0;

	/*
	 * The uncapped end of the `max-width` animation below. It has to be a length,
	 * not `none` — `none` cannot be interpolated, so the cap would snap on and off
	 * and take the row's whole geometry with it. See the transition note below.
	 */
	max-width: 100%;
	height: var(--nova-tax-audience-segment-height, 360px);
	padding: 24px;
	background-image:
		linear-gradient(180deg, rgb(0 1 33 / 0.2) 50%, rgb(0 1 33 / 1) 100%),
		var(--nova-tax-audience-image, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	/*
	 * Figma puts #F7F7F7 behind the photograph, which is invisible once one is
	 * set. Falling back to navy instead keeps the white title and body readable
	 * on a card whose image has not been uploaded yet — with the light value the
	 * copy disappeared into the gradient.
	 */
	background-color: var(--nova-tax-primary);
	border: 1px solid var(--nova-tax-border);
	border-radius: 16px;

	/*
	 * `max-width` has to animate alongside `flex-grow`, not snap. Left un-animated
	 * it lifts the moment the pointer arrives, while flex-grow is still at its old
	 * value: the outgoing card jumps straight from its 480px cap to its full
	 * flex-grow share, which on a 1140px row is ~90px of width appearing in one
	 * frame and every card after it sliding by up to 60px. That slide moves a
	 * neighbouring card under a pointer resting in the gutter, the neighbour takes
	 * the hover, its own snap slides the row back, and the two trade the pointer
	 * several times a second. Interpolating the cap keeps every edge moving
	 * continuously, so a stationary pointer never changes which card it is over.
	 */
	will-change: flex-grow, max-width;
	transform: translateZ(0);
	transition: flex-grow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), max-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}

/*
 * The expanded card gets the softer gradient — transparent until 20% rather than
 * 50% — because it has body copy to keep legible without burying the photograph.
 *
 * `max-width` caps it at the 480px Figma draws rather than letting flex-grow
 * scale it with the viewport; the space that cap frees up goes to the three
 * collapsed cards, which is what the design shows.
 */
.nova-tax-audience__segment.is-active {
	flex-grow: var(--nova-tax-audience-expand, 3);
	max-width: var(--nova-tax-audience-expand-max, 480px);
	background-image:
		linear-gradient(180deg, rgb(0 1 33 / 0) 20%, rgb(0 1 33 / 0.95) 100%),
		var(--nova-tax-audience-image, none);
	border-color: #96B5F9;
}

.nova-tax-audience__segment {
	cursor: pointer;
	overflow: hidden;
}

.nova-tax .nova-tax-audience__segment-title,
.nova-tax-audience__segment-text {
	width: calc(var(--nova-tax-audience-expand-max, 480px) - 48px);
	max-width: 100%;
}

.nova-tax .nova-tax-audience__segment-title {
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: rgb(255 255 255 / 0.99);
}

/*
 * Body copy belongs to the expanded card only. It stays in the DOM — and so in
 * the accessibility tree — and is collapsed visually, rather than being removed,
 * so a screen reader still reaches every segment's description.
 */
.nova-tax-audience__segment-text {
	overflow: hidden;
	max-height: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.95);
	opacity: 0;
	transition: max-height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

.nova-tax-audience__segment.is-active .nova-tax-audience__segment-text {
	max-height: 14em;
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Footer — pull quote, photo and industry list
 *
 * Figma reference: node 2088:4357 — a rule, then a two-column row: a fixed 560px
 * column carrying the quote above a stacked photo, and the industry list beside
 * it as full-width rows separated by rules.
 * ------------------------------------------------------------------------ */

.nova-tax-audience__foot {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.nova-tax-audience__rule {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--nova-tax-border);
}

.nova-tax-audience__foot-body {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

/*
 * The quote and photo pin while the industry list scrolls past them, same as the
 * Why Choose and FAQ intros. `__foot-body` already sets `align-items: flex-start`,
 * which sticky needs — a stretched flex item is as tall as the row and has
 * nowhere to travel.
 *
 * Sticky dies silently if any ancestor has `overflow` other than `visible`. If
 * this column ever stops pinning, check that nothing has reintroduced one on
 * `__panel` — see the note on its background — and the Elementor container's
 * Overflow setting, before anything in here.
 */
.nova-tax-audience__aside {
	position: sticky;
	inset-block-start: var(--nova-tax-audience-top, 120px);
	display: flex;
	flex: 0 0 560px;
	flex-direction: column;
	gap: 120px;
	max-width: 560px;
}

.nova-tax-audience__quote {
	font-family: var(--nova-tax-font);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--nova-tax-primary);
}

/*
 * Figma 2088:4364 is a 540x300 slot holding two overlapping frames that both
 * spill out of it: the photo (540x320, sitting 20px above the slot) and a
 * tinted panel behind it, offset up and left so it reads as a soft shadow card.
 * Keeping the empty slot rather than sizing to the artwork is what makes the
 * column's 120px gap measure to where Figma measures it.
 *
 * The insets are percentages, not the source pixels, so the whole composition
 * scales with the slot instead of the offsets growing proportionally larger as
 * the column narrows.
 */
.nova-tax-audience__media {
	position: relative;
	width: 100%;
	max-width: 540px;
	aspect-ratio: 9 / 5;
}

/*
 * The panel is tilted, and the tilt is what makes it read as a second card
 * behind the photo rather than a flat drop shadow. Figma reports it as a
 * 552.86x363.45 box at (-25.22, -64.28) — that is the *bounding* box of a
 * 536.47x336.67 rectangle turned 2.91°. What is set here is the untilted
 * rectangle: its own size, and its top-left corner recovered by re-centring it
 * inside that bounding box (-17.03, -50.89 against the 540x300 slot), with
 * `transform` supplying the angle. Figma measures rotation anticlockwise and
 * CSS clockwise, hence the sign.
 */
.nova-tax-audience__media::before {
	content: "";
	position: absolute;
	inset-block-start: -16.96%;
	inset-inline-start: -3.15%;
	width: 99.35%;
	height: 112.22%;
	background-color: var(--nova-tax-border);
	border-radius: 20px;
	opacity: 0.3;
	transform: rotate(-2.91deg);
}

/*
 * All four insets and no width/height: the box resolves to the full slot width
 * by 320px, and `object-fit` crops whatever aspect ratio the uploaded file has
 * into it. #CBD1DE is Figma's stroke on this one frame and appears nowhere else
 * in the section, so it stays local rather than becoming a token.
 *
 * Qualified by the parent purely to outweigh Elementor's own `.elementor img`
 * reset, which sets `border: none; border-radius: 0` and beat the single class
 * on element count. Dropping `__media` here silently flattens the photo back to
 * a square, unbordered crop.
 */
.nova-tax-audience__media .nova-tax-audience__media-photo {
	position: absolute;
	top: -6.67%;
	left: 0;
	width: 100%;
	height: 106.67%;
	display: block;
	object-fit: cover;
	border: 6px solid #cbd1de;
	border-radius: 20px;
}

/*
 * `flex-basis: 0`, not `auto`: the rows hold long paragraphs, so an auto basis
 * makes the list claim a content width far wider than the row can give it and
 * the shrink that follows comes out of the quote column instead.
 */
.nova-tax-audience__industries {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding-inline: 20px;
}

.nova-tax-audience__industry {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-block: 20px;
}

/*
 * Figma separates the rows with a 1px rectangle sitting in a 10px gap on either
 * side, so one row's copy ends 61px above the next: 20px padding, 10px, the rule,
 * 10px, 20px padding. The list carries that as a 20px flex gap and the rule rides
 * in it as a pseudo-element, centred on `-10px`.
 *
 * A plain `border-block-start` looks like the same thing and is not — the border
 * sits on the row's edge, which swallows both 10px gaps and pulls the whole list
 * 20px tighter per row.
 */
.nova-tax-audience__industry + .nova-tax-audience__industry::before {
	content: "";
	position: absolute;
	inset-block-start: -10px;
	inset-inline: 0;
	height: 1px;
	background-color: var(--nova-tax-border);
}

/* Figma's tile is 56x56 with a 32px glyph; the shared box is 52 with 28. */
.nova-tax-audience__industry-icon {
	width: 56px;
	height: 56px;
}

.nova-tax-audience__industry .nova-tax-audience__industry-icon .nova-tax-icon {
	width: 32px;
	height: 32px;
}

.nova-tax-audience__industry-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* A step up from the shared card scale: Header/sm/Bold over Body/lg/Medium. */
.nova-tax .nova-tax-audience__industry .nova-tax-card__title {
	font-size: 24px;
}

.nova-tax-audience__industry .nova-tax-card__body {
	font-size: 18px;
	color: rgb(53 65 95 / 0.8);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

/*
 * Four cards side by side leaves each too narrow to read below 1280px, so the
 * row wraps to two-up and the expand/collapse interaction is dropped: every card
 * is already about the 480px the expanded one would have been, so there is
 * nothing left for expanding to reveal. `max-width: none` releases the desktop
 * cap, otherwise the cards would stop short of their half.
 */
@media (max-width: 1280px) {
	/*
	 * The heading and the 560px paragraph beside it stop fitting on one line
	 * together, so the head stacks and the right column gives up its fixed basis.
	 */
	.nova-tax-audience__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	.nova-tax .nova-tax-audience__segment-title,
	.nova-tax-audience__segment-text {
		max-width: 100%;
	}

	.nova-tax-audience__head-right {
		flex: 1 1 auto;
		width: 100%;
	}

	.nova-tax-audience__segments {
		flex-wrap: wrap;
	}

	.nova-tax-audience__segment,
	.nova-tax-audience__segment.is-active,
	.nova-tax-audience__segments:has(.nova-tax-audience__segment:hover, .nova-tax-audience__segment:focus-within) .nova-tax-audience__segment.is-active:not(:hover):not(:focus-within),
	.nova-tax-audience__segments .nova-tax-audience__segment:hover,
	.nova-tax-audience__segments .nova-tax-audience__segment:focus-within {
		flex: 1 1 calc(50% - 10px);
		max-width: none;
	}

	/*
	 * With no card singled out, every card shows its copy — a two-up grid where
	 * only one tile has body text reads as a mistake.
	 *
	 * `none`, not the desktop 14em: the cap is the desktop reveal animation's
	 * travel, and nothing animates here. Left at 14em it clips the copy instead —
	 * the narrower the card the more lines the same description takes, and at
	 * ~320px every one of these descriptions overflows the cap and loses its last
	 * two lines mid-sentence. The card is `height: auto` below, so releasing the
	 * cap grows the card rather than spilling out of it.
	 *
	 * Every state the desktop rules set a cap in has to be listed — `.is-active`
	 * and the two pointer states all outscore the bare class, so overriding only
	 * that one would leave the expanded card and any touched card still clipped.
	 */
	.nova-tax-audience__segment-text,
	.nova-tax-audience__segment.is-active .nova-tax-audience__segment-text,
	.nova-tax-audience__segments .nova-tax-audience__segment:hover .nova-tax-audience__segment-text,
	.nova-tax-audience__segments .nova-tax-audience__segment:focus-within .nova-tax-audience__segment-text,
	.nova-tax-audience__segments:has(.nova-tax-audience__segment:hover, .nova-tax-audience__segment:focus-within) .nova-tax-audience__segment.is-active:not(:hover):not(:focus-within) .nova-tax-audience__segment-text {
		overflow: visible;
		max-height: none;
		opacity: 1;
	}

	/* Room for the body copy the desktop layout only shows on the wide card. */
	.nova-tax-audience__segment {
		height: auto;
		min-height: var(--nova-tax-audience-segment-height, 320px);
	}

	/*
	 * The quote column trades its fixed 560px for a share of the row so both
	 * columns narrow together — held at 40% rather than left to shrink freely,
	 * which collapsed it to a couple of words a line while the list kept its
	 * width.
	 */
	.nova-tax-audience__foot-body {
		gap: 48px;
	}

	.nova-tax-audience__aside {
		flex: 0 0 40%;
		gap: 80px;
		max-width: 40%;
	}

	.nova-tax-audience__quote {
		font-size: 32px;
	}
}

@media (max-width: 1024px) {
	.nova-tax-audience {
		padding: 24px var(--nova-gutter-x);
	}

	.nova-tax-audience__panel {
		gap: 40px;
		padding: 40px 32px;
	}

	/*
	 * Two columns stop paying for themselves once the quote drops below about
	 * 400px, so the photo and the list stack. The photo keeps its 540px cap: it
	 * overhangs its slot to the left, and full-bleed that overhang would be wider
	 * than the panel's padding and spill past its rounded corner.
	 */
	.nova-tax-audience__foot-body {
		flex-direction: column;
		gap: 56px;
	}

	/*
	 * Sticky comes off with the second column: stacked, the aside sits above the
	 * list rather than beside it, so pinning it would park a 500px-tall quote and
	 * photo over most of the screen for the whole length of the industry list.
	 *
	 * Centred once stacked, and capped at the photo's own 540px rather than run
	 * full-bleed: quote and photo then share one measure, so the quote sets in a
	 * readable line length instead of stretching to the panel's full width while
	 * the photo below it stays 540 — which is what made the column read as
	 * left-aligned-by-accident. `width: 100%` before the cap is what makes that
	 * deterministic; `__foot-body` aligns to `flex-start`, so without it the aside
	 * sizes to fit-content and the auto margins have nothing to centre.
	 */
	.nova-tax-audience__aside {
		position: static;
		align-items: center;
		flex: 0 0 auto;
		gap: 56px;
		width: 100%;
		max-width: 540px;
		margin-inline: auto;
		text-align: center;
	}

	.nova-tax-audience__quote {
		font-size: 28px;
	}

	.nova-tax-audience__industries {
		padding-inline: 0;
	}
}

@media (max-width: 767px) {
	.nova-tax-audience {
		padding: 16px var(--nova-gutter-x);
	}

	.nova-tax-audience__panel {
		gap: 32px;
		padding: 28px 20px;
		border-radius: 20px;
	}

	.nova-tax-audience__segments {
		flex-direction: column;
	}

	.nova-tax-audience__segment,
	.nova-tax-audience__segment.is-active,
	.nova-tax-audience__segments:has(.nova-tax-audience__segment:hover, .nova-tax-audience__segment:focus-within) .nova-tax-audience__segment.is-active:not(:hover):not(:focus-within),
	.nova-tax-audience__segments .nova-tax-audience__segment:hover,
	.nova-tax-audience__segments .nova-tax-audience__segment:focus-within {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
	}

	/*
	 * One per row, each hugging its own copy. The fixed 280px height is dropped
	 * to a floor so a longer description is not clipped on a narrow screen.
	 */
	.nova-tax-audience__segment {
		height: auto;
		min-height: var(--nova-tax-audience-segment-height, 280px);
		padding: 20px;
	}

	.nova-tax .nova-tax-audience__segment-title,
	.nova-tax-audience__segment-text {
		width: 100%;
	}

	.nova-tax-audience__foot {
		gap: 32px;
	}

	.nova-tax-audience__foot-body,
	.nova-tax-audience__aside {
		gap: 40px;
	}

	.nova-tax-audience__quote {
		font-size: 24px;
	}

	/* The rule keeps riding the middle of the gap as both shrink. */
	.nova-tax-audience__industries {
		gap: 16px;
	}

	.nova-tax-audience__industry {
		gap: 16px;
		padding-block: 16px;
		flex-direction: column;
	}

	.nova-tax-audience__industry + .nova-tax-audience__industry::before {
		inset-block-start: -8px;
	}

	.nova-tax-audience__industry-icon {
		width: 48px;
		height: 48px;
	}

	.nova-tax-audience__industry .nova-tax-audience__industry-icon .nova-tax-icon {
		width: 28px;
		height: 28px;
	}

	.nova-tax .nova-tax-audience__industry .nova-tax-card__title {
		font-size: 20px;
	}

	.nova-tax-audience__industry .nova-tax-card__body {
		font-size: 16px;
	}
}

/*
 * Every card shows its copy when the reader has asked for less motion, since the
 * expand animation is the only thing that would otherwise reveal it.
 */
@media (prefers-reduced-motion: reduce) {
	.nova-tax-audience__segment,
	.nova-tax-audience__segment-text {
		transition: none;
	}

	/*
	 * The cap goes with the animation it belonged to. Four collapsed cards are far
	 * narrower than the expanded one this copy was measured against, so 14em cut
	 * the description off mid-sentence — and because this block sits after the
	 * breakpoints it did the same on a phone, undoing their fix for anyone who has
	 * asked for less motion. The card trades its fixed height for a floor so the
	 * released copy grows the card instead of spilling past its border.
	 */
	.nova-tax-audience__segment {
		height: auto;
		min-height: var(--nova-tax-audience-segment-height, 360px);
	}

	.nova-tax-audience__segment-text,
	.nova-tax-audience__segment.is-active .nova-tax-audience__segment-text,
	.nova-tax-audience__segments .nova-tax-audience__segment:hover .nova-tax-audience__segment-text,
	.nova-tax-audience__segments .nova-tax-audience__segment:focus-within .nova-tax-audience__segment-text,
	.nova-tax-audience__segments:has(.nova-tax-audience__segment:hover, .nova-tax-audience__segment:focus-within) .nova-tax-audience__segment.is-active:not(:hover):not(:focus-within) .nova-tax-audience__segment-text {
		overflow: visible;
		max-height: none;
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
 * Split layout — the Home frame
 *
 * Same markup, re-flowed. Figma 26:9744 keeps the tinted panel (1360px wide, 60px
 * padding, radius 28) with two columns: header and photograph stacked in a 560px
 * column, the industry list running the full height beside it with 60px column gap.
 *
 * The column is 560 while the photograph inside it is 540 (`__media` caps itself) —
 * the extra 20px is what gives the lede its two-line wrap and pulls the industry
 * list left to where Figma draws it.
 * ------------------------------------------------------------------------ */

.nova-tax-audience--split {
	padding: 40px;
}

.nova-tax-audience--split .nova-tax-audience__panel {
	display: grid;
	grid-template-columns: 560px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 60px;
	row-gap: 120px;
	max-width: 1360px;
	align-items: start;

	/*
	 * The watermark moves for this frame: 26:9745 sits at (733, 326) in the
	 * 1360-wide panel at 876x544, where the banded layout anchors it to the
	 * bottom instead. `1360 - (733 + 876)` is the right offset.
	 */
	background-position: right -249px top 326px;
	background-size: 876px 544px;
	background-repeat: no-repeat;
}

.nova-tax-audience--split .nova-tax-audience__foot,
.nova-tax-audience--split .nova-tax-audience__foot-body {
	display: contents;
}

/* The rule spans the panel in the banded layout; here there is nothing to divide. */
.nova-tax-audience--split .nova-tax-audience__rule {
	display: none;
}

/*
 * The header is one grid item rather than two, so its own row becomes the
 * title-over-lede stack Figma draws — 20px, not the 80px column gap it uses when
 * the two sit side by side.
 */
.nova-tax-audience--split .nova-tax-audience__head {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	padding: 0;
}

.nova-tax-audience--split .nova-tax-audience__head-left {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.nova-tax-audience--split .nova-tax-audience__head-right {
	flex-basis: auto;
	padding: 0;
	width: 100%;
}

.nova-tax-audience--split .nova-tax-audience__aside {
	position: static;
	grid-column: 1;
	grid-row: 2;
	flex-basis: auto;
	gap: 0;
	width: 100%;
	max-width: 560px;
	margin: 0;
	padding: 0;
}

/*
 * Spanning both rows is what puts the list beside the header as well as the
 * photo. `align-self: start` keeps it from stretching to the column's height and
 * leaving its last row floating.
 */
.nova-tax-audience--split .nova-tax-audience__industries {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
	padding-inline: 20px;
	padding-block: 0;
}

@media (max-width: 1366px) {
	.nova-tax-audience--split {
		padding: 60px var(--nova-gutter-x);
	}

	.nova-tax-audience--split .nova-tax-audience__panel {
		grid-template-columns: 48% minmax(0, 1fr);
		column-gap: 40px;
		row-gap: 80px;
	}
}

@media (max-width: 1024px) {
	.nova-tax-audience--split {
		padding: 48px var(--nova-gutter-x);
	}

	.nova-tax-audience--split .nova-tax-audience__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
		padding: 40px 32px;
	}

	.nova-tax-audience--split .nova-tax-audience__head,
	.nova-tax-audience--split .nova-tax-audience__aside,
	.nova-tax-audience--split .nova-tax-audience__industries {
		grid-column: 1;
		grid-row: auto;
	}

	.nova-tax-audience--split .nova-tax-audience__aside {
		position: static;
		max-width: 540px;
		margin-inline: auto;
	}

	.nova-tax-audience--split .nova-tax-audience__industries {
		padding-inline: 0;
	}
}

@media (max-width: 767px) {
	.nova-tax-audience--split {
		padding: 32px var(--nova-gutter-x);
	}

	.nova-tax-audience--split .nova-tax-audience__panel {
		padding: 28px 20px;
		border-radius: 20px;
		row-gap: 32px;
	}
}