/**
 * PropOffice Property UIs - Version 2: full-width property hero.
 *
 * Composition
 * -----------
 *   Editorial    one photograph filling the hero, with the information panel
 *                as a white card floating on its left edge: badge on the
 *                card's corner, price over an accent rule, the location, a
 *                divided row of figures and a circle-arrow link, with the
 *                navigation bar reading as part of the same column.
 *   Structured   the same hero with the panel as an explicit card - its own
 *                width, its own placement, a leading rule and visible
 *                statistic labels - so an agency can compose it precisely
 *                without writing CSS.
 *   Overlay      the same hero with a translucent rectangular panel resting
 *                on the photograph, hung from its top-left: badge, price,
 *                location, then label-and-value field rows over a hairline,
 *                and the circle-arrow link. The photograph stays visible
 *                through the panel, which is the composition's point.
 *   Mobile       a deliberately different design: the photograph keeps its
 *                own aspect ratio and the panel becomes a solid block beneath
 *                it, because overlaid text on a phone-width photograph is
 *                where this design would otherwise fail hardest.
 *
 * There is no glassmorphism here, and that is a requirement rather than a
 * preference. Nothing in this file uses backdrop-filter, blur or any filter at
 * all: the overlay is a plain colour on its own layer with an opacity, which is
 * what keeps it readable over any photograph and cheap on any device.
 *
 * Everything tunable reads a --ppui-* custom property, declared on the
 * component root below. Elementor's controls write those same properties to the
 * same element - never to the widget wrapper - so a control's value and this
 * file's default are an ordinary specificity contest, which the control wins.
 * Declaring them on a nearer descendant would shadow the control's value
 * outright, and no selector could fix it.
 *
 * Every selector is namespaced under .propoffice-pui-hero; nothing here can
 * reach the agency theme or Elementor's own markup.
 */

.propoffice-pui-hero--v2 {
	--ppui-v2-height: 640px;

	/*
	 * Cover and centred, because a property photograph cropped from its middle
	 * is almost always the shot the agency intended. "contain" would letterbox
	 * every image that does not match the hero, and a top or bottom anchor
	 * reliably decapitates buildings.
	 */
	--ppui-image-fit: cover;
	--ppui-image-position: center center;

	--ppui-v2-scrim: 0.45;
	--ppui-v2-content-gap: 12px;

	/*
	 * The column, as one set of values.
	 *
	 * The information and the navigation are two boxes in a single column, and
	 * every dimension they share is declared once here. That is the whole point:
	 * they used to derive their width, their inset and their surface
	 * independently, which is how a 253px panel came to sit above a 312px
	 * navigation bar and why the two could drift into each other.
	 *
	 * Each is read through a per-part override that falls back to the shared
	 * value, so an untouched widget resolves to exactly one number in both
	 * places and an editor who asks for a difference gets one.
	 */
	--ppui-v2-section-width: var(--ppui-panel-width, 22.5%);
	--ppui-v2-section-margin: 0 24px 24px;
	--ppui-v2-section-margin-b: 24px;
	--ppui-v2-section-margin-l: 24px;
	--ppui-v2-section-pad: var(--ppui-panel-pad, clamp(1.5rem, 2.5vw, 2.75rem));
	--ppui-v2-section-pad-inline: 0 clamp(1.5rem, 2.5vw, 2.75rem);
	--ppui-v2-section-radius: var(--ppui-panel-radius, 0);
	--ppui-v2-section-shadow: none;
	--ppui-v2-section-text: var(--ppui-panel-text);
	--ppui-v2-section-hover: rgba(255, 255, 255, 0.18);

	/*
	 * The distance between the information and the navigation, as real layout
	 * space rather than a nudge: the panel reserves the band below itself, and
	 * this is the part of that reservation an editor sets.
	 */
	--ppui-v2-nav-gap: 0px;
	--ppui-v2-nav-band: 52px;

	/* Where the panel sits inside the hero, and any nudge from there. */
	--ppui-v2-panel-align: end;
	--ppui-v2-panel-justify: start;
	--ppui-v2-panel-dx: 0px;
	--ppui-v2-panel-dy: 0px;

	/*
	 * Where the FEATURED badge sits inside the information panel.
	 *
	 * The reference pins it to the panel's top-right corner, out of the content
	 * flow, where it costs no height - which is what lets a property with a
	 * great deal to say grow its panel without the badge having any say in it.
	 * Set to static, the same badge becomes an ordinary row above the content.
	 */
	--ppui-v2-badge-position: absolute;
	--ppui-v2-badge-inset: 0 0 auto auto;
	--ppui-v2-badge-dx: 0px;
	--ppui-v2-badge-dy: 0px;
	--ppui-v2-badge-gap: 0px;

	--ppui-v2-overlay-display: block;
	--ppui-v2-mobile-panel-bg: var(--ppui-overlay);

	--ppui-overlay-opacity: 0.9;

	--ppui-badge-inset: 0 auto auto 0;

	--ppui-location-icon: var(--ppui-location-color);
	--ppui-location-icon-size: 18px;
	--ppui-location-icon-gap: 8px;
	--ppui-location-icon-order: row;

	--ppui-stat-icon-size: 24px;
	--ppui-stat-gap: 32px;
	--ppui-stat-label: rgba(255, 255, 255, 0.66);

	/*
	 * The rule that divides the figures from the rest of the information.
	 *
	 * It belongs to the statistics and to nothing else. It is not the boundary
	 * between the information and the navigation - that distance is the
	 * navigation gap, and confusing the two is how a separator ends up being
	 * asked to do a layout's job.
	 */
	--ppui-v2-divider: rgba(255, 255, 255, 0.16);
	--ppui-v2-stats-rule-width: 1px;
	--ppui-v2-stats-rule-style: solid;
	--ppui-v2-stats-rule-color: var(--ppui-v2-divider);

	--ppui-cta-align: left;
	--ppui-cta-width: auto;
	--ppui-cta-display: inline-flex;
	--ppui-cta-icon-gap: 12px;
	--ppui-cta-bg-hover: var(--ppui-cta-bg);
	--ppui-cta-text-hover: var(--ppui-cta-text);
	--ppui-cta-border-hover: transparent;

	--ppui-gap: 32px;

	display: grid;
	gap: var(--ppui-gap);
}

/*
 * Theme defence.
 *
 * The component renders inside a theme we do not control, and page builders
 * routinely style headings, paragraphs, images and list items through selectors
 * like `.elementor-widget-container h3` or `img { margin-bottom }`. Those
 * outrank a single-class rule: they repaint the panel text in the theme's dark
 * heading colour, and a stray image margin is exactly what puts a pale band
 * under a photograph.
 *
 * Both blocks below use :where(), which contributes no specificity at all. That
 * matters more than it looks. These rules therefore sit at one class - enough to
 * beat a bare element selector - while every component rule further down, and
 * every declaration an Elementor control writes, still wins.
 */
.propoffice-pui-hero--v2 :where(img, figure, picture, ul, ol, li, p, h1, h2, h3, h4, h5, h6) {
	margin: 0;
	padding: 0;
}

.propoffice-pui-hero--v2 :where(ul, ol) {
	list-style: none;
}

.propoffice-pui-hero--v2 :where(img) {
	border-radius: 0;
	box-shadow: none;
	vertical-align: middle;
}

/*
 * Square by default, but at zero added specificity. Themes round links and
 * buttons routinely, and the composition is architectural, so the default has to
 * be stated - yet stating it in a component rule would tie with the per-element
 * Border Radius control and win or lose on stylesheet order. :where() puts this
 * below every one of those controls by construction.
 */
.propoffice-pui-hero--v2 :where(a, button) {
	border-radius: 0;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__panel-inner :where(h1, h2, h3, h4, h5, h6, p, span, li) {
	color: inherit;
	font-family: inherit;
}

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

/*
 * min-height, and the change from height is the whole architecture.
 *
 * A fixed height made the hero a box the content was posted into. The
 * information panel was absolutely positioned inside it, the navigation was
 * absolutely positioned inside the slider, and neither knew the other's size -
 * so a property with more to say grew its panel straight through the
 * navigation bar, and no value could be chosen that was right for both a short
 * listing and a long one.
 *
 * The hero is content-driven now: the panel is a grid item in normal flow, and
 * Hero Height states the smallest the hero may be rather than the only size it
 * may take. A property with more information makes a taller hero; the reserved
 * band below the panel travels with it, and the navigation cannot be reached.
 *
 * The height control is still authoritative downwards - nothing here sets a
 * maximum - and the mobile composition releases the minimum on the element,
 * for the reason documented at that breakpoint.
 */
.propoffice-pui-hero__hero {
	align-content: var(--ppui-v2-panel-align);
	display: grid;
	min-height: var(--ppui-v2-height);
	position: relative;
}

/*
 * Every hero fills its slide, so every panel bottom-aligns to the same line.
 *
 * Swiper stretches each slide to the height of the tallest, and without this
 * the shortest hero would stop above that line while the one navigation stayed
 * where it is - the gap between information and navigation would then depend on
 * which property was showing. The panels agree because the boxes they sit in
 * do.
 */
.propoffice-pui-hero--v2 .propoffice-pui-slider__slide {
	display: flex;
}

.propoffice-pui-hero--v2 .propoffice-pui-slider__slide > .propoffice-pui-hero__hero {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The photograph is placed by its insets rather than sized by a percentage, so
 * the Gallery Margin control shrinks it inside an unchanged hero and the Gallery
 * Padding control insets the picture inside an unchanged frame. Neither can
 * reach the panel, the widget root or the slider.
 */
.propoffice-pui-hero__media {
	inset: 0;
	overflow: hidden;
	position: absolute;
}

/*
 * The image fills its box rather than dictating its size, which is what keeps
 * every hero exactly the same height regardless of the aspect ratios an agency
 * uploads. object-fit does the cropping; the box owns the geometry.
 *
 * The component root on the front of the selector is load-bearing. Elementor
 * ships `.elementor img { height: auto }` and themes ship `img { height: auto }`
 * - one class plus an element, which outranks a lone class. Two classes wins,
 * and with it the box decides the geometry again.
 */
.propoffice-pui-hero--v2 .propoffice-pui-hero__image,
.propoffice-pui-hero--v2 .propoffice-pui-hero__media .propoffice-property__placeholder {
	display: block;
	height: 100%;
	max-width: none;
	object-fit: var(--ppui-image-fit);
	object-position: var(--ppui-image-position);
	width: 100%;
}

/*
 * A gradient, not a filter. It darkens the foot of the photograph so the panel
 * text stays legible over any picture, and it costs nothing to composite.
 */
.propoffice-pui-hero__media::after {
	background: linear-gradient(to top, rgba(0, 0, 0, var(--ppui-v2-scrim)) 0%, rgba(0, 0, 0, 0) 62%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

/* ----------------------------------------------------------------- Badge */

.propoffice-pui-hero--v2 .propoffice-pui-hero__badge {
	background: var(--ppui-badge-bg);
	border-radius: 0;
	color: var(--ppui-badge-text);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	margin: 0;
	padding: 0.8em 1.5em;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * Anchored to a corner of the photograph by a single inset shorthand, so one
 * control places it and no per-corner rule exists to fall out of step.
 */
.propoffice-pui-hero--v2 .propoffice-pui-hero__badge--image {
	inset: var(--ppui-badge-inset);
	position: absolute;
	z-index: 3;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__badge--panel {
	justify-self: start;
	position: relative;
}

/*
 * The slot the panel badge occupies, in both of its placements.
 *
 * Pinned to a corner it is absolutely positioned against the panel's padding
 * box, flush to whichever edges the inset names, and costs the panel no height
 * at all - so a property with a great deal of information grows its panel
 * without the badge having any say in it, and the reserved navigation band
 * beneath is measured from the same foot either way.
 *
 * Set to static it becomes an ordinary row: it takes its own height, the rest
 * of the information moves down to make room, and the space below it is real
 * layout rather than a nudge.
 *
 * width: auto serves both, which is why one declaration covers them. Out of
 * flow it shrinks to the wording; in flow it is a stretched grid item and fills
 * the row, leaving the badge's own alignment to place the label.
 */
.propoffice-pui-hero--v2 .propoffice-pui-hero__field--badge {
	inset: var(--ppui-v2-badge-inset);
	margin-bottom: var(--ppui-v2-badge-gap);
	position: var(--ppui-v2-badge-position);
	transform: translate(var(--ppui-v2-badge-dx), var(--ppui-v2-badge-dy));
	width: auto;
	z-index: 2;
}

/* ----------------------------------------------------------------- Panel */

/*
 * A grid item, not an absolutely positioned box.
 *
 * Placement is alignment now: the panel sits at the start, centre or end of the
 * hero's single grid row, and the hero grows when the panel needs more room.
 * Absolute positioning could not do that - a box taken out of flow contributes
 * nothing to its container's height, which is precisely why the information
 * could grow through the navigation without the hero noticing.
 *
 * The offsets stay, and they are real layout too: they move the panel by
 * changing the margins that place it, so nudging the information can never
 * slide it under something else. A transform would have moved the picture of
 * the panel and left its reserved band behind.
 *
 * width, not max-width. A box with only a max-width is shrink-to-fit, so
 * raising the control from 40% to 60% would change nothing visible.
 */
.propoffice-pui-hero__panel {
	display: grid;
	justify-self: var(--ppui-v2-panel-justify);
	margin: var(--ppui-v2-info-margin, var(--ppui-v2-section-margin));
	margin-bottom: calc(var(--ppui-v2-info-margin-b, var(--ppui-v2-section-margin-b)) - var(--ppui-v2-panel-dy));
	margin-left: calc(var(--ppui-v2-info-margin-l, var(--ppui-v2-section-margin-l)) + var(--ppui-v2-panel-dx));
	max-width: 100%;
	position: relative;
	width: var(--ppui-v2-info-width, var(--ppui-v2-section-width));
	z-index: 2;
}

/*
 * The reserved navigation band.
 *
 * The navigation is one element for the whole slider and lives outside every
 * slide, so no selector can place it relative to this panel. What can be done -
 * and what makes overlap structurally impossible rather than merely unlikely -
 * is for the panel to own the space the navigation occupies. The panel's box
 * therefore ends where the navigation's does, and the card inside it stops a
 * configured gap above the navigation's top edge.
 *
 * Because both boxes are measured from the foot of the same hero, this holds
 * for any amount of information: more content makes a taller hero, the panel's
 * band moves down with it, and the navigation follows the hero's foot.
 *
 * The band is on the outer panel rather than inside the card, because the card
 * has a surface and the band must not be painted with it - the reference draws
 * two boxes with a gap, not one box with a hole in it. It also leaves the
 * Section Padding control alone, which writes to the card and would otherwise
 * replace this reservation the moment an editor touched it.
 */
.propoffice-pui-hero--nav-band .propoffice-pui-hero__panel {
	padding-bottom: calc(var(--ppui-v2-nav-height) + var(--ppui-v2-nav-gap));
}

.propoffice-pui-hero__panel-inner {
	/*
	 * The fields stay packed at the top of the card, which only matters where
	 * the card is taller than they are - the mobile composition below, where the
	 * card is stretched to meet the navigation. Without it the rows would share
	 * that height out between themselves and the content would drift apart.
	 */
	align-content: start;
	border-radius: var(--ppui-v2-section-radius);
	box-shadow: var(--ppui-v2-section-shadow);
	color: var(--ppui-v2-section-text);
	display: grid;
	gap: var(--ppui-v2-content-gap);
	justify-items: stretch;
	padding: var(--ppui-v2-info-pad, var(--ppui-v2-section-pad));
	position: relative;
}

/*
 * The overlay is its own layer: a plain colour with an opacity, sitting behind
 * the text rather than under it as a background.
 *
 * That separation is what makes Show Overlay a single honest switch, and it is
 * why the opacity applies to the colour alone and never dims the words. There
 * is no backdrop-filter, no blur and no filter of any kind - the brief rules
 * them out, and a translucent flat colour reads better over architecture
 * anyway.
 */
.propoffice-pui-hero__panel-inner::before {
	background: var(--ppui-v2-info-bg, var(--ppui-overlay));
	border-radius: inherit;
	content: "";
	display: var(--ppui-v2-overlay-display);
	inset: 0;
	opacity: var(--ppui-overlay-opacity);
	position: absolute;
	z-index: 0;
}

.propoffice-pui-hero__panel-inner > * {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------- Field slots */

/*
 * Every ordered field is drawn inside a slot, and the slot is what carries the
 * width an editor gives that row.
 *
 * It exists because several fields already own a width - the button has its own
 * control - and pointing a field width at the same element would put two
 * controls on one declaration, which an editor cannot diagnose. It is also the
 * element Elementor addresses when a repeater row carries styling.
 *
 * A grid rather than a plain block, so justify-self keeps working on the field
 * inside: that is what the alignment controls have always used, and wrapping the
 * field in a block would have silently killed them.
 */
.propoffice-pui-hero__field {
	display: grid;
	min-width: 0;
}

/*
 * Full width until a row says otherwise, at zero specificity so the width
 * control always wins. Stating it at one class would tie with Elementor's
 * two-class rule and be decided by stylesheet order.
 */
:where(.propoffice-pui-hero__field) {
	width: 100%;
}

/*
 * Block: fields flow and wrap, sharing a row according to their widths.
 *
 * column-gap is zero on purpose, and it is what makes the widths add up. Every
 * field's spacing lives inside its own box - box-sizing is border-box
 * throughout - so 50/50/50 puts two on a row and wraps the third, and 40/30/30
 * fits all three exactly. A column gap would make any set totalling 100% wrap
 * one field early, which is the arithmetic an editor would have to guess at.
 */
.propoffice-pui-hero--fields-block .propoffice-pui-hero__panel-inner {
	align-content: start;
	align-items: var(--ppui-v2-field-valign, stretch);
	column-gap: 0;
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--ppui-v2-content-gap);
}

/* ------------------------------------------------------------------ Text */

.propoffice-pui-hero--v2 .propoffice-pui-hero__price {
	color: var(--ppui-price-color);
	font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.02;
	margin: 0;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__title {
	color: var(--ppui-title-color);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.25;
	margin: 0;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__location {
	align-items: center;
	color: var(--ppui-location-color);
	display: flex;
	flex-direction: var(--ppui-location-icon-order);
	font-size: 0.9375rem;
	font-weight: 600;
	gap: var(--ppui-location-icon-gap);
	justify-content: flex-start;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0;
	text-transform: uppercase;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__location-icon {
	color: var(--ppui-location-icon);
	flex: none;
	height: var(--ppui-location-icon-size);
	width: var(--ppui-location-icon-size);
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__location i {
	color: var(--ppui-location-icon);
	font-size: var(--ppui-location-icon-size);
	line-height: 1;
}

/* ------------------------------------------------------------ Statistics */

.propoffice-pui-hero--v2 .propoffice-pui-hero__stats {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem var(--ppui-stat-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__stat {
	align-items: center;
	color: var(--ppui-stat-value);
	display: flex;
	gap: 0.6rem;
	line-height: 1.1;
	margin: 0;
	padding: 0;
}

/*
 * Sized in its own token rather than in ems, so the Icon Size control and the
 * statistics typography stay independent. Tying the glyph to the font size made
 * the two controls fight: enlarging the number enlarged the pictogram with it.
 */
.propoffice-pui-hero--v2 .propoffice-pui-hero__stat-icon {
	color: var(--ppui-stat-icon);
	flex: none;
	height: var(--ppui-stat-icon-size);
	width: var(--ppui-stat-icon-size);
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__stat i {
	color: var(--ppui-stat-icon);
	font-size: var(--ppui-stat-icon-size);
	line-height: 1;
}

.propoffice-pui-hero__stat-figure {
	align-items: baseline;
	display: flex;
	gap: 0.35rem;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__stat-value {
	font-size: 1.0625rem;
	font-weight: 700;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__stat-label {
	color: var(--ppui-stat-label);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ Navigation */

/*
 * Previous, the counter and Next read as one bar, not as three blocks.
 *
 * The shared slider paints each arrow with the accent colour, which is right
 * for Version 1 - its arrows sit apart, over a card. Here they sit in a row at
 * the foot of a photograph with the counter between them, and three filled
 * rectangles separated by gaps is not the composition: the reference shows one
 * continuous strip with the controls sitting on it.
 *
 * Declared on the component root rather than in the shared stylesheet, so this
 * is a Version 2 default and Version 1 keeps the arrows it has. Elementor writes
 * the arrow controls onto the slider element, which is nearer to the arrow than
 * this root is - so an editor who sets an arrow background still gets one, and
 * this only decides what happens when nobody has.
 */
.propoffice-pui-hero--v2 {
	--ppui-nav-bg: transparent;
	--ppui-nav-bg-hover: var(--ppui-v2-section-hover);
}

/*
 * The same defaults again, on the slider element itself, and the repetition is
 * the mechanism rather than a mistake. slider.css declares every --ppui-nav-*
 * token on .propoffice-pui-slider, and a custom property resolves from the
 * nearest declaring element - so a Version 2 value left on the component root
 * would be shadowed by the shared default and never reach an arrow. Two classes
 * beats the shared stylesheet's one; the Elementor controls write to the same
 * element from a three-class selector and still win.
 *
 * The arrows are white and the bar sits inside the bottom-left corner, which is
 * where the reference composition reads it as part of the information panel.
 */
.propoffice-pui-hero--v2 .propoffice-pui-slider {
	--ppui-nav-x: 0%;
	--ppui-nav-tx: 0%;
	--ppui-nav-y: 100%;
	--ppui-nav-ty: -100%;

	/*
	 * The offsets place the bar on the same column as the information, from the
	 * same values, which is what makes their left edges agree without either
	 * knowing about the other. The Arrows section writes these two tokens only
	 * while Customise Navigation Separately is on, so the shared inset is what
	 * an untouched widget resolves to and an explicit placement still wins.
	 *
	 * The panel's own offsets are part of that sum, and they have to be. They
	 * move the information inside the hero; the bar is measured from the hero's
	 * foot, so a panel nudged 20px down would close 20px of the reserved gap
	 * while the bar stood still - measured at -4px on a long property, with the
	 * card's foot below the bar's top edge. An offset moves the column.
	 */
	--ppui-nav-dx: calc(var(--ppui-v2-section-margin-l) + var(--ppui-v2-panel-dx));
	--ppui-nav-dy: calc(var(--ppui-v2-panel-dy) - var(--ppui-v2-section-margin-b));

	--ppui-nav-gap: 8px;
	--ppui-nav-size: 52px;
	--ppui-nav-icon-size: 22px;
	--ppui-nav-color: var(--ppui-v2-section-text);
	--ppui-nav-color-hover: var(--ppui-v2-section-text);
	--ppui-nav-bg: transparent;
	--ppui-nav-bg-hover: var(--ppui-v2-section-hover);
	--ppui-counter-color: var(--ppui-v2-section-text);
	--ppui-counter-active: var(--ppui-v2-section-text);

	/*
	 * How tall the navigation actually is, declared where both the bar and the
	 * panel can read it - the slider is the nearest element they share, and it
	 * is also the element the arrow-size control writes to, so this tracks a
	 * resized arrow rather than a remembered number.
	 *
	 * The bar takes this as its height rather than as a minimum, so what the
	 * panel reserves and what the bar occupies are the same value by
	 * construction. Nothing measures anything; nothing can drift.
	 */
	--ppui-v2-nav-height: max(
		var(--ppui-v2-nav-band),
		calc(var(--ppui-nav-size) + var(--ppui-v2-navbar-pad-t, 0px) + var(--ppui-v2-navbar-pad-b, 0px))
	);
}

/*
 * The bar is the information card's opposite number: same width, same inset,
 * same surface, same frame, same radius - all read from the section tokens, all
 * overridable on its own once an editor asks for that.
 *
 * border-box, because the height above is the band the panel reserved: a border
 * has to be drawn inside it rather than added to it.
 */
.propoffice-pui-hero--v2 .propoffice-pui-slider__nav {
	background: transparent;
	border-radius: var(--ppui-v2-navbar-radius, var(--ppui-v2-section-radius));
	box-shadow: var(--ppui-v2-section-shadow);
	box-sizing: border-box;
	height: var(--ppui-v2-nav-height);
	justify-content: space-between;
	max-width: 100%;
	padding: var(--ppui-v2-navbar-pad, var(--ppui-v2-section-pad-inline));
	width: var(--ppui-v2-navbar-width, var(--ppui-v2-section-width));
}

/*
 * The surface as its own layer, exactly as the panel carries it, so the two
 * boxes are the same colour at the same opacity from the same tokens - and so
 * an opacity below one fades the surface without dimming the arrows.
 */
.propoffice-pui-hero--v2 .propoffice-pui-slider__nav::before {
	background: var(--ppui-v2-navbar-bg, var(--ppui-overlay));
	border-radius: inherit;
	content: "";
	display: var(--ppui-v2-overlay-display);
	inset: 0;
	opacity: var(--ppui-overlay-opacity);
	position: absolute;
	z-index: 0;
}

.propoffice-pui-hero--v2 .propoffice-pui-slider__nav > * {
	position: relative;
	z-index: 1;
}

/*
 * "1 of 10" as one quiet line: every part the same size, the same weight and
 * the same colour, exactly as the reference bar writes it. The shared counter
 * enlarges the current number, which suits Version 1's chrome; three classes
 * outrank the shared two-class rules whatever order the stylesheets load in.
 */
.propoffice-pui-hero--v2 .propoffice-pui-slider .propoffice-pui-slider__counter {
	font-size: 1rem;
	font-weight: 500;
	gap: 0.35em;
	letter-spacing: 0.02em;
}

.propoffice-pui-hero--v2 .propoffice-pui-slider .propoffice-pui-slider__counter-current {
	font-size: 1em;
	font-weight: 500;
}

.propoffice-pui-hero--v2 .propoffice-pui-slider .propoffice-pui-slider__counter-separator,
.propoffice-pui-hero--v2 .propoffice-pui-slider .propoffice-pui-slider__counter-total {
	opacity: 1;
}

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

/*
 * Alignment and width are two independent decisions and are kept that way.
 * justify-self does the aligning, which is what works inside the grid the panel
 * already is - text-align would only move the words within the button. The
 * width token defaults to auto, so a button nobody has configured hugs its text.
 */
.propoffice-pui-hero--v2 .propoffice-pui-hero__cta {
	align-items: center;
	background: var(--ppui-cta-bg);
	color: var(--ppui-cta-text);
	display: var(--ppui-cta-display);
	font-size: 0.8125rem;
	font-weight: 700;
	gap: var(--ppui-cta-icon-gap);
	justify-content: center;
	justify-self: var(--ppui-cta-align);
	letter-spacing: 0.1em;
	line-height: 1;
	margin: 0.5rem 0 0;
	min-height: 48px;
	padding: 1.05rem 2rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	width: var(--ppui-cta-width);
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__cta-icon {
	align-items: center;
	display: inline-flex;
	flex: none;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__cta-icon svg {
	height: 1em;
	width: 1em;
}

/*
 * Every link state carries the colour explicitly. A theme styling a:hover or
 * a:visited would otherwise repaint the button text on interaction, so the
 * control would appear to work until the pointer touched it.
 */
.propoffice-pui-hero--v2 .propoffice-pui-hero__cta:link,
.propoffice-pui-hero--v2 .propoffice-pui-hero__cta:visited,
.propoffice-pui-hero--v2 .propoffice-pui-hero__cta:active {
	color: var(--ppui-cta-text);
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__cta:hover,
.propoffice-pui-hero--v2 .propoffice-pui-hero__cta:focus-visible {
	background: var(--ppui-cta-bg-hover);
	border-color: var(--ppui-cta-border-hover);
	color: var(--ppui-cta-text-hover);
	text-decoration: none;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__cta:focus-visible {
	outline: 3px solid var(--ppui-cta-text);
	outline-offset: -6px;
}

/*
 * The button as a button, when the whole slide is the link. It carries no href,
 * so it must not offer a pointer or a focus ring that leads nowhere - the slide
 * link underneath is the real target.
 */
.propoffice-pui-hero--v2 .propoffice-pui-hero__cta--static {
	cursor: inherit;
	pointer-events: none;
}

/* ------------------------------------------------------------ Slide link */

/*
 * One link covering the whole hero, above the photograph and below the panel so
 * the text stays selectable until the option is switched on.
 *
 * It is a real anchor rather than a click handler on the article: that is what
 * gives it a tab stop, a context menu, middle-click to open in a new tab and an
 * accessible name - none of which a JavaScript click can reproduce.
 */
.propoffice-pui-hero--v2 .propoffice-pui-hero__slide-link {
	inset: 0;
	position: absolute;
	z-index: 4;
}

.propoffice-pui-hero--v2 .propoffice-pui-hero__slide-link:focus-visible {
	outline: 3px solid var(--ppui-cta-bg);
	outline-offset: -4px;
}

.propoffice-pui-hero--slide-link .propoffice-pui-hero__hero {
	cursor: pointer;
}

.propoffice-pui-hero__sr-only {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ------------------------------------------------------ Editorial variant */

/*
 * A white card floating on the left of the photograph, exactly as the Version 2
 * reference draws it: semi-transparent white at 0.9, a 12px radius, a soft
 * shadow, 32px inside, and the accent system in #C8102E. The panel decides its
 * own placement - centred on the left edge - which is the whole point of this
 * variation: an editor configures nothing to get the reference composition.
 *
 * Every colour below is a token override on the same element the controls
 * write to, so a control's value still wins the specificity contest and the
 * Structured variation, which shares none of these overrides, keeps its dark
 * composition untouched.
 */
.propoffice-pui-hero--v2.propoffice-pui-hero--editorial {
	--ppui-overlay: #ffffff;
	--ppui-price-color: #111111;
	--ppui-title-color: #111111;
	--ppui-location-color: #333333;
	--ppui-stat-icon: #c8102e;
	--ppui-stat-value: #111111;
	--ppui-stat-label: #666666;
	--ppui-cta-bg: #c8102e;
	--ppui-cta-text: #c8102e;
	--ppui-cta-bg-hover: transparent;
	--ppui-badge-bg: #c8102e;
	--ppui-badge-text: #ffffff;
	--ppui-v2-divider: #e5e5e5;

	/*
	 * The column: a rounded white card with the navigation bar beneath it in the
	 * same width, the same inset and the same surface, resting on the foot of
	 * the photograph. The card floated free of the bar before, which is what
	 * made one 253px wide and the other 312px.
	 */
	--ppui-v2-section-text: var(--ppui-panel-text, #111111);
	--ppui-v2-section-hover: rgba(17, 17, 17, 0.08);
	--ppui-v2-section-radius: var(--ppui-panel-radius, 12px);
	--ppui-v2-section-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	--ppui-v2-section-pad: var(--ppui-panel-pad, 32px);
	--ppui-v2-section-pad-inline: 0 32px;
	--ppui-v2-section-margin: 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
	--ppui-v2-section-margin-b: clamp(24px, 3vw, 40px);
	--ppui-v2-section-margin-l: clamp(24px, 3vw, 40px);
}

/* (The badge's placement is shared by every composition; see Badge above.) */

.propoffice-pui-hero--editorial .propoffice-pui-hero__badge--panel {
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 6px 12px;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__price {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.1;
	order: 0;
}

/*
 * The accent underline between the price and the location: 40 x 3 in the
 * accent colour. It belongs to the price rather than being an element of its
 * own, so the reading order and the field repeater stay exactly as they are.
 * The 4px bottom margin plus the panel's 12px grid gap add up to the 16px the
 * reference asks for beneath the rule, as the 12px above it stands alone.
 */
.propoffice-pui-hero--editorial .propoffice-pui-hero__price::after {
	background: var(--ppui-cta-bg);
	content: "";
	display: block;
	height: 3px;
	margin: 12px 0 4px;
	width: 40px;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__title {
	letter-spacing: 0.02em;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__location {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: normal;
	margin: 0 0 12px;
	text-transform: none;
}

/*
 * The statistics as three equal cells: pictogram over figure over label, a
 * hairline between neighbours, and the row closed by the divider that
 * separates it from the link below. Each cell flexes equally so the dividers
 * land evenly whatever the labels weigh, and the half-gap padding keeps a
 * divider clear of the content on its right.
 */
.propoffice-pui-hero--editorial .propoffice-pui-hero__stats {
	border-bottom: var(--ppui-v2-stats-rule-width) var(--ppui-v2-stats-rule-style) var(--ppui-v2-stats-rule-color);
	gap: 0.75rem 0;
	justify-content: space-between;
	margin-top: 0;
	padding: 0 0 20px;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__stat {
	align-items: flex-start;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 80px;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__stat + .propoffice-pui-hero__stat {
	border-left: 1px solid var(--ppui-v2-divider);
	padding-left: calc(var(--ppui-stat-gap) / 2);
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__stat-figure {
	align-items: flex-start;
	flex-direction: column;
	gap: 2px;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__stat-value {
	font-size: 18px;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__stat-label {
	letter-spacing: normal;
}

/*
 * "View Details" is a link, not a filled button: accent text at 16px/500 led
 * by a 28px accent circle carrying a white arrow. The circle is drawn by the
 * ::before below until an editor chooses an icon of their own, at which point
 * their glyph takes the circle instead - so the icon control keeps working and
 * no markup had to change for the default to exist.
 */
.propoffice-pui-hero--editorial .propoffice-pui-hero__cta {
	background: transparent;
	font-size: 16px;
	font-weight: 500;
	justify-content: flex-start;
	letter-spacing: normal;
	margin: 12px 0 0;
	min-height: 0;
	padding: 0;
	text-align: left;
	text-transform: none;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__cta::before {
	background: var(--ppui-cta-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m13 7 5 5-5 5'/%3E%3C/svg%3E") center/14px 14px no-repeat;
	border-radius: 999px;
	content: "";
	flex: none;
	height: 28px;
	width: 28px;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__cta:has(.propoffice-pui-hero__cta-icon)::before {
	content: none;
}

.propoffice-pui-hero--editorial .propoffice-pui-hero__cta-icon {
	align-items: center;
	background: var(--ppui-cta-bg);
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	width: 28px;
}

/*
 * A link's focus ring wraps the text rather than cutting through it, which the
 * filled button's inset ring would do now that the padding is gone.
 */
.propoffice-pui-hero--editorial .propoffice-pui-hero__cta:focus-visible {
	outline-offset: 4px;
}

/* ----------------------------------------------------- Structured variant */

/*
 * The same hero as an explicit component: a card with a stated width, an accent
 * rule at its head, rules between the statistics and labelled figures. Every
 * one of those is a default a control can move, which is what "structured"
 * means here - not a different design, a configurable one.
 */
.propoffice-pui-hero--v2.propoffice-pui-hero--structured {
	--ppui-v2-section-margin: 0 clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem);
	--ppui-v2-section-margin-b: clamp(1.5rem, 3vw, 3rem);
	--ppui-v2-section-margin-l: clamp(1.5rem, 3vw, 3rem);
}

.propoffice-pui-hero--structured .propoffice-pui-hero__panel-inner::after {
	background: var(--ppui-cta-bg);
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: 0;
	width: clamp(48px, 18%, 96px);
	z-index: 1;
}

/*
 * The badge's default surface was drawn for the photograph; on the dark panel
 * it keeps its white wording but loses its shape. A hairline inside the edge
 * restores the pill without touching the background token, so the colour
 * controls keep meaning exactly what they say.
 */
.propoffice-pui-hero--structured .propoffice-pui-hero__badge--panel {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.propoffice-pui-hero--structured .propoffice-pui-hero__stats {
	border-top: var(--ppui-v2-stats-rule-width) var(--ppui-v2-stats-rule-style) var(--ppui-v2-stats-rule-color);
	margin-top: 0.25rem;
	padding-top: 1rem;
}

.propoffice-pui-hero--structured .propoffice-pui-hero__stat {
	flex-direction: column;
	gap: 0.4rem;
}

.propoffice-pui-hero--structured .propoffice-pui-hero__stat-figure {
	align-items: center;
	flex-direction: column;
	gap: 0.1rem;
}

.propoffice-pui-hero--structured .propoffice-pui-hero__stat-label {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------- Overlay variant */

/*
 * A translucent panel resting on the photograph: rectangular, hung from the
 * hero's top-left, white at 0.75 so the picture stays visible through it -
 * which is this composition's defining trait, and why its opacity control
 * carries its own default. No radius and no shadow: the panel is part of the
 * hero, not a card floating on top of it.
 *
 * Same accent system as the Editorial card, same tokens, same controls. The
 * rules are written separately per composition on purpose, so restyling one
 * can never quietly restyle another.
 */
.propoffice-pui-hero--v2.propoffice-pui-hero--overlay {
	--ppui-overlay: #ffffff;
	--ppui-overlay-opacity: 0.75;
	--ppui-price-color: #111111;
	--ppui-title-color: #111111;
	--ppui-location-color: #333333;
	--ppui-stat-icon: #c8102e;
	--ppui-stat-value: #111111;
	--ppui-stat-label: #4a4a4a;
	--ppui-cta-bg: #c8102e;
	--ppui-cta-text: #c8102e;
	--ppui-cta-bg-hover: transparent;
	--ppui-badge-bg: #c8102e;
	--ppui-badge-text: #ffffff;
	--ppui-v2-divider: rgba(17, 17, 17, 0.14);

	/*
	 * Hung from the top of the photograph, with the navigation still resting on
	 * its foot: the panel is placed by alignment now, so the two ends of the
	 * column are stated separately and the space between them is whatever the
	 * hero has left. The reserved band still travels with the panel, so a long
	 * property closes that space down to the configured gap and no further.
	 */
	--ppui-v2-panel-align: start;
	--ppui-v2-section-text: var(--ppui-panel-text, #111111);
	--ppui-v2-section-hover: rgba(17, 17, 17, 0.08);
	--ppui-v2-section-pad: var(--ppui-panel-pad, 32px);
	--ppui-v2-section-pad-inline: 0 32px;
	--ppui-v2-section-margin: clamp(32px, 6vh, 48px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
	--ppui-v2-section-margin-b: clamp(24px, 3vw, 40px);
	--ppui-v2-section-margin-l: clamp(24px, 3vw, 40px);
}

/*
 * The badge leads the panel in flow, exactly where the reading order puts it:
 * a sharp accent rectangle, not a floating corner tag.
 */
.propoffice-pui-hero--overlay .propoffice-pui-hero__badge--panel {
	border-radius: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 6px 12px;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__price {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.1;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__title {
	letter-spacing: 0.02em;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__location {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: normal;
	margin: 0 0 4px;
	text-transform: none;
}

/*
 * The fields as quiet rows: pictogram and label on the left, the figure on
 * the right, one field per line, the group opened by a hairline. row-reverse
 * plus space-between is what turns the shared value-then-label markup into
 * label-left, value-right without any change to what the renderer emits.
 */
.propoffice-pui-hero--overlay .propoffice-pui-hero__stats {
	border-top: var(--ppui-v2-stats-rule-width) var(--ppui-v2-stats-rule-style) var(--ppui-v2-stats-rule-color);
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__stat {
	gap: 10px;
	width: 100%;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__stat-figure {
	align-items: center;
	flex: 1;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__stat-value {
	font-size: 16px;
	font-weight: 700;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__stat-label {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
}

/*
 * The same circle-arrow link as the Editorial card: accent text led by a
 * 28px accent circle carrying a white arrow, drawn by the ::before until an
 * editor chooses an icon of their own.
 */
.propoffice-pui-hero--overlay .propoffice-pui-hero__cta {
	background: transparent;
	font-size: 16px;
	font-weight: 500;
	justify-content: flex-start;
	letter-spacing: normal;
	margin: 12px 0 0;
	min-height: 0;
	padding: 0;
	text-align: left;
	text-transform: none;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__cta::before {
	background: var(--ppui-cta-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m13 7 5 5-5 5'/%3E%3C/svg%3E") center/14px 14px no-repeat;
	border-radius: 999px;
	content: "";
	flex: none;
	height: 28px;
	width: 28px;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__cta:has(.propoffice-pui-hero__cta-icon)::before {
	content: none;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__cta-icon {
	align-items: center;
	background: var(--ppui-cta-bg);
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.propoffice-pui-hero--overlay .propoffice-pui-hero__cta:focus-visible {
	outline-offset: 4px;
}

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

@media (max-width: 1024px) {
	.propoffice-pui-hero--v2 {
		--ppui-v2-height: 520px;
		--ppui-v2-section-width: var(--ppui-panel-width, 22.5%);
	}

	/*
	 * The column tightens rather than shrinking wholesale: 24px inside, and the
	 * two headline sizes step down in proportion. Everything else keeps its
	 * desktop value, exactly as the reference's tablet notes ask.
	 *
	 * Stated as the shared padding rather than on the card, so the navigation
	 * bar's contents stay on the same left edge as the price at every width.
	 */
	.propoffice-pui-hero--v2.propoffice-pui-hero--editorial,
	.propoffice-pui-hero--v2.propoffice-pui-hero--overlay {
		--ppui-v2-section-pad: 24px;
		--ppui-v2-section-pad-inline: 0 24px;
	}

	.propoffice-pui-hero--editorial .propoffice-pui-hero__price,
	.propoffice-pui-hero--overlay .propoffice-pui-hero__price {
		font-size: 32px;
	}

	.propoffice-pui-hero--editorial .propoffice-pui-hero__location,
	.propoffice-pui-hero--overlay .propoffice-pui-hero__location {
		font-size: 16px;
	}
}

/*
 * Mobile is a different composition rather than a squeezed desktop one. The
 * panel leaves the photograph and becomes a solid block, because overlaid text
 * on a phone-width picture is where this design would otherwise fail hardest.
 */
@media (max-width: 767px) {
	.propoffice-pui-hero--v2 {
		--ppui-v2-height: auto;
		--ppui-v2-section-width: 100%;
	}

	/*
	 * Two classes, because the compositions declare these at two classes.
	 *
	 * Measured on a 375px viewport: a one-class override here lost every one of
	 * them to the Editorial card's own values, so the column kept a 24px left
	 * margin while its width was 100% - putting its right edge 24px past the
	 * hero, where the slider's overflow quietly cut it off - and kept the 32px
	 * padding, the 12px radius and the floating shadow that this composition
	 * exists to drop. A media query does nothing for specificity.
	 */
	.propoffice-pui-hero--v2.propoffice-pui-hero--editorial,
	.propoffice-pui-hero--v2.propoffice-pui-hero--structured,
	.propoffice-pui-hero--v2.propoffice-pui-hero--overlay {
		--ppui-v2-section-margin: 0;
		--ppui-v2-section-margin-b: 0px;
		--ppui-v2-section-margin-l: 0px;
		--ppui-v2-section-pad: 1.5rem 1.25rem;
		--ppui-v2-section-pad-inline: 0 1.25rem;
		--ppui-v2-section-radius: 0;
		--ppui-v2-section-shadow: none;
	}

	/*
	 * The minimum released on the element, not on the token, and the difference
	 * is the whole reason this rule exists.
	 *
	 * Below the image the photograph and the panel are both in flow, so the
	 * content decides how tall a hero is - but the Hero Height control writes
	 * --ppui-v2-height at three classes with no media query, which beats the
	 * one-class token override directly above and would apply the desktop
	 * minimum on a phone. A 700px desktop hero left 260px of dead space under
	 * every slide, because a 213px photograph and a 297px panel do not fill it.
	 *
	 * Setting the property here instead is not a specificity contest at all:
	 * nothing else declares a minimum on this element inside the breakpoint, and
	 * the control keeps working everywhere it should - including the overlay
	 * composition below, which restores it.
	 */
	/*
	 * Two rows, and the second one takes whatever is left over.
	 *
	 * A slider is as tall as its tallest slide, so a short property leaves slack
	 * - and the one navigation sits at the foot of the hero regardless. Packing
	 * the content at the top left that slack between the information and the
	 * bar, which read as a control floating over nothing; packing it at the
	 * bottom would have opened the same hole above the photograph instead.
	 *
	 * Giving the slack to the information means the photograph keeps its own
	 * ratio, the block beneath it reaches the foot of the hero, and the
	 * navigation sits in the band that block reserved - the configured gap below
	 * the words, on every slide.
	 */
	.propoffice-pui-hero__hero {
		grid-template-rows: auto 1fr;
		min-height: 0;
	}

	.propoffice-pui-hero__media {
		aspect-ratio: 4 / 3;
		inset: auto;
		position: relative;
	}

	.propoffice-pui-hero__media::after {
		display: none;
	}

	/*
	 * The panel takes its width from the shared token here exactly as it does on
	 * a desktop, and that is deliberate rather than lazy.
	 *
	 * Forcing width: 100% on the element instead put the two halves of the
	 * column back on different measurements: the card filled the phone while the
	 * bar kept reading the token, which Elementor inherits down from the tablet
	 * default - measured live at a 390px card above a 320px bar. Section Width
	 * carries a mobile default of 100% for the same reason, so both halves reach
	 * the same number and an editor can still set their own.
	 *
	 * The reserved band is untouched, because the navigation still sits over the
	 * foot of the hero here - which on this composition is the foot of the
	 * panel, and is exactly where it used to land on top of the call to action.
	 */

	/*
	 * A solid block on mobile, so the words sit on a colour rather than on a
	 * photograph. The overlay layer is what carries it, exactly as it does on a
	 * desktop, so Show Overlay keeps working here too - and the navigation bar
	 * takes the same treatment, because it is part of the same block.
	 */
	.propoffice-pui-hero__panel-inner::before,
	.propoffice-pui-hero--v2 .propoffice-pui-slider__nav::before {
		background: var(--ppui-v2-mobile-panel-bg);
		opacity: 1;
	}

	/*
	 * The other mobile composition: the panel stays on the photograph exactly as
	 * it does on a desktop. Everything above is undone rather than duplicated,
	 * so the two options cannot drift apart.
	 */
	.propoffice-pui-hero--mobile-overlay {
		--ppui-v2-height: 460px;
		--ppui-v2-section-width: 100%;
	}

	/*
	 * The overlaid composition keeps the photograph behind the panel, so the
	 * hero owns its minimum again and the control applies exactly as it does on
	 * a desktop. Two classes, so it wins over the content-driven rule above -
	 * and it is still a minimum, so a long property grows the phone hero rather
	 * than clipping.
	 */
	.propoffice-pui-hero--mobile-overlay .propoffice-pui-hero__hero {
		grid-template-rows: none;
		min-height: var(--ppui-v2-height);
	}

	.propoffice-pui-hero--mobile-overlay .propoffice-pui-hero__media {
		aspect-ratio: auto;
		inset: 0;
		position: absolute;
	}

	.propoffice-pui-hero--mobile-overlay .propoffice-pui-hero__media::after {
		display: block;
	}

	.propoffice-pui-hero--mobile-overlay .propoffice-pui-hero__panel-inner::before,
	.propoffice-pui-hero--v2.propoffice-pui-hero--mobile-overlay .propoffice-pui-slider__nav::before {
		background: var(--ppui-overlay);
		opacity: var(--ppui-overlay-opacity);
	}
}

@media (prefers-reduced-motion: reduce) {
	.propoffice-pui-hero--v2 .propoffice-pui-hero__cta {
		transition: none;
	}
}