/**
 * PropOffice Designs — Property Contact.
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_contact] shortcode, and the Elementor widget.
 * Hand-authored, no build step, enqueued with filemtime cache-busting
 * (see PropOffice\Designs\PropertyContact\PropertyContactAssets).
 *
 * PALETTE. Every colour reads a PropOffice design token with the token's own
 * value as the fallback: `var(--po-ds-color-text)`. Inside the workspace the
 * component inherits the live design system; on a public theme page — where
 * those tokens are not defined — it renders in the identical palette. One rule,
 * both contexts, no drift. The component's own decisions (the navy of a
 * Resource card, the red of the send button) are declared once at the top as
 * component tokens, so a theme can retint the whole thing by setting four
 * values rather than overriding forty selectors.
 *
 * ISOLATION. Every selector is namespaced under .po-contact / .po-agents /
 * .po-agent / .po-enquiry / .po-actions / .po-share, so the component can never
 * restyle a theme, and it resets the handful of properties themes most often
 * impose on lists, headings, inputs and buttons.
 *
 * LAYOUT. The arrangement is intrinsic — container-relative, not viewport
 * media queries — because this component is routinely placed in a sidebar a
 * third of the page wide, where "desktop means three columns" is wrong.
 */

.po-contact {
	font-family: var(--po-ds-font-family);
	/* Surface and structure. */
	--po-contact-surface: var(--po-ds-color-surface);
	--po-contact-border: var(--po-ds-color-border);
	--po-contact-radius: 10px;
	--po-contact-ink: var(--po-ds-color-text);
	--po-contact-muted: var(--po-ds-color-muted);
	--po-contact-gap: 20px;

	/* The Resource card. Deep navy with white type — the one place in the
	   component that inverts. */
	--po-contact-navy: var(--po-ds-color-text);
	--po-contact-navy-ink: #ffffff;
	--po-contact-navy-muted: rgba(255, 255, 255, 0.82);

	/* The channel buttons carry their own identities: a red envelope and a
	   green WhatsApp are how those two are recognised at 28px. */

	/*
	 * 🚨 IT READS THE BRAND, AND IT USED TO READ NOTHING. This was
	 * `var(--po-bad, #d81f34)`, and `--po-bad` is a WORKSPACE token: it is
	 * declared in `assets/app/propoffice-app.css`, scoped to `#propoffice-app`,
	 * and has never existed on a public page. So on every website the variable
	 * failed to resolve, the fallback won, and the submit button of every
	 * enquiry form was painted the same fixed red no matter what primary the
	 * agency had chosen — which on a brand whose own red is #b10028 is close
	 * enough to look deliberate and wrong enough to be nobody's colour.
	 *
	 * The fallback is kept exactly as it was, so a page with no design system
	 * loaded looks precisely as it did.
	 */
	--po-contact-primary: var(--po-ds-color-primary, #d81f34);
	--po-contact-whatsapp: #25d366;
	--po-contact-facebook: #1877f2;
	--po-contact-x: #000000;

	/* Focus. Declared once so every control in the component agrees. */
	--po-contact-focus: var(--po-ds-color-primary);

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--po-contact-gap);
	padding: 20px;
	border: 1px solid var(--po-contact-border);
	border-radius: var(--po-contact-radius);
	background: var(--po-contact-surface);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	color: var(--po-contact-ink);
	font-size: 14px;
	line-height: 1.45;
}

.po-contact *,
.po-contact *::before,
.po-contact *::after {
	box-sizing: inherit;
}

/* Themes routinely put bullets, margins and padding on lists inside content.
   Every list in this component is a grouping device, not prose. */
.po-contact ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.po-contact p {
	margin: 0;
}

.po-contact h3 {
	margin: 0;
	color: inherit;
}

/* One visible focus treatment for every control, including the ones a theme
   would otherwise strip. Never `outline: none` — a keyboard user who cannot see
   where they are cannot use the form at all. */
.po-contact a:focus-visible,
.po-contact button:focus-visible,
.po-contact input:focus-visible,
.po-contact textarea:focus-visible {
	outline: 2px solid var(--po-contact-focus);
	outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────── sections */

/* The two reorderable sections are ordinary siblings in document order, which
   is what makes "Form first" and "Agents first" one implementation. The rules
   that would make them side by side on a wide container belong here later;
   nothing about this markup has to change for that. */
.po-contact__section {
	display: block;
}

.po-contact__section + .po-contact__section {
	padding-top: var(--po-contact-gap);
	border-top: 1px solid var(--po-contact-border);
}

/* ────────────────────────────────────────────────────────── agents (shared) */

/*
 * 🚨 THE LIST RESET BELONGS TO THE AGENTS MARKUP, NOT TO THE CONTACT SECTION.
 *
 * `.po-contact ul` above resets margins, padding and bullets — and it is
 * scoped to the property page's contact section. The agents markup below is
 * SHARED: `propoffice.team-list` draws exactly this, and its band is not
 * inside `.po-contact`.
 *
 * So every team-list band on a real page inherited the theme's bullets and
 * indents on its list of people and on each card's row of channels, while the
 * identical markup on a property page did not. A browser found it in H4; no
 * test could, because the markup was correct the whole time.
 *
 * Restated here against the shared classes, so both surfaces get it and the
 * property page's own reset stays exactly as it was.
 */
.po-agents__items,
.po-agent__channels,
.po-agent__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.po-agents__item,
.po-agent__channel-item,
.po-agent__link-item {
	list-style: none;
}

.po-agents__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.po-agents__item {
	min-width: 0;
}

/* Grid. The column count arrives as an inline custom property from the
   renderer; the track floor is what actually collapses it, so a two-column
   request becomes one column inside a narrow sidebar without a media query
   knowing anything about the viewport. */
.po-agents__items--grid {
	--po-agents-columns: 2;

	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(max(220px, (100% - ((var(--po-agents-columns) - 1) * 12px)) / var(--po-agents-columns)), 1fr)
	);
	gap: 12px;
}

/* ───────────────────────────────────────────────────────────── agent card */

.po-agent {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 14px;
	border-radius: 8px;
	background: var(--po-contact-navy);
	color: var(--po-contact-navy-ink);
}

.po-agent__profile {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

.po-agent__photo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 64px;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.12);
}

/*
 * 🚨 THE SIZE IS SET AT TWO CLASSES. Elementor's frontend sets
 * `.elementor img { height: auto }` (0,1,1), which beat a one-class
 * `height: 100%`: inside a widget the portrait kept its own ratio in the
 * 56 × 64 frame and was clipped instead of filling it. Only the size moves up;
 * the rest stays at one class so the Harcourts skins' radius rules (two
 * classes) are not outranked.
 */
.po-agent__photo .po-agent__portrait {
	width: 100%;
	height: 100%;
}

.po-agent__portrait {
	object-fit: cover;
	/* Themes love a global `img { border-radius }` and a max-width that is not
	   100%; the portrait's frame is this element's, not the image's. */
	border-radius: 0;
	display: block;
}

.po-agent__initials {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--po-contact-navy-ink);
}

.po-agent__identity {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.po-agent__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--po-contact-navy-ink);
}

.po-agent__role,
.po-agent__agency {
	font-size: 12px;
	line-height: 1.35;
	color: var(--po-contact-navy-muted);
}

.po-agent__registration {
	font-size: 11px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.66);
	/* A licence number is long and has no natural break; letting it overflow
	   the card is not an option, and truncating it hides the part that
	   identifies the registration. */
	overflow-wrap: anywhere;
}

.po-agent__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: auto;
}

.po-agent__channels {
	display: flex;
	gap: 8px;
	align-items: center;
}

.po-agent__channel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--po-contact-primary);
	color: #ffffff;
	text-decoration: none;
	transition: transform 140ms ease, filter 140ms ease;
}

.po-agent__channel--whatsapp {
	background: var(--po-contact-whatsapp);
}

.po-agent__channel:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.po-agent__channel-icon {
	width: 15px;
	height: 15px;
}

.po-agent__links {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	margin-left: auto;
	text-align: right;
}

.po-agent__link {
	font-size: 12px;
	line-height: 1.4;
	color: var(--po-contact-navy-muted);
	text-decoration: none;
}

.po-agent__link:hover {
	color: var(--po-contact-navy-ink);
	text-decoration: underline;
}

/* ───────────────────────────────────────────────────────────────── slider */

.po-agents__slider {
	--po-agents-slides: 1;

	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 10px;
}

/* A NATIVE scroll container, deliberately: it is keyboard-scrollable, it
   follows focus when a card inside it is tabbed to, and it gets the platform's
   own momentum on touch. The buttons move it; they are not the only way. */
.po-agents__items--slider {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - ((var(--po-agents-slides) - 1) * 12px)) / var(--po-agents-slides)
	);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* The scrollbar is chrome the design does not want, but the SCROLLING is
	   the accessible behaviour and stays. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.po-agents__items--slider::-webkit-scrollbar {
	display: none;
}

.po-agents__items--slider > .po-agents__item {
	scroll-snap-align: start;
}

.po-agents__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--po-contact-border);
	border-radius: 50%;
	background: var(--po-contact-surface);
	color: var(--po-contact-ink);
	cursor: pointer;
	transition: background-color 140ms ease;
}

.po-agents__control:hover {
	background: var(--po-ds-color-background);
}

/* Disabled rather than hidden: a control that disappears at the end of a
   carousel moves everything beside it, and the layout shifting under a
   pointer is worse than a dimmed button. */
.po-agents__control[disabled] {
	opacity: 0.4;
	cursor: default;
}

.po-agents__control-icon {
	width: 14px;
	height: 14px;
}

.po-agents__dots {
	grid-column: 1 / -1;
	display: flex;
	gap: 6px;
	justify-content: center;
}

.po-agents__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--po-contact-border);
	cursor: pointer;
}

.po-agents__dot[aria-current="true"] {
	background: var(--po-contact-navy);
}

/* The dot's hit area is 8px, which is far below a usable touch target. The
   pseudo-element grows the target without growing the dot. */
.po-agents__dot::after {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin: -8px;
}

/* ─────────────────────────────────────────────────────────── enquiry form */

.po-enquiry {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, TO SURVIVE A GLOBAL HEADING RULE.
 *
 * This is drawn on a real heading element, and both Elementor's global font kit
 * and most themes style headings by TAG: `.elementor-kit-10 h3` is (0,1,1) and
 * outranks a lone `.po-enquiry__heading` at (0,1,0).
 *
 * MEASURED on the live Kava install at 1440x720, that kit rule had taken over
 * 8 of the 11 PropOffice headings on a property page. The Features category
 * label is the clearest case: declared 12px/600 uppercase with 0.06em tracking,
 * it drew at 24px/400 with tracking `normal` — LARGER than the 22px section
 * heading it sits under, so the hierarchy read backwards and the label had
 * stopped looking like a label at all.
 *
 * One extra class is the whole fix, and it is not a guess: on that same page
 * `.po-finance .po-finance__heading` and `.po-overview .po-overview__title`
 * already carried it and rendered exactly what they declare. Both at (0,2,0),
 * both winning. That is why Finance looked right and this did not — never a
 * difference of design, only of specificity.
 */
.po-contact .po-enquiry__heading {
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--po-contact-ink);
	font-size: 15px;
	font-weight: 600;
	align-self: flex-start;
}

.po-enquiry__notice {
	padding: 10px 12px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-size: 13px;
}

.po-enquiry__notice--success {
	border-color: #bbf7d0;
	background: #f0fdf4;
	color: #14532d;
}

.po-enquiry__notice--error {
	border-color: #fecaca;
	background: #fef2f2;
	color: #7f1d1d;
}

/* The honeypot. Removed from layout and from sight, but NOT with
   `display: none` alone — some bots skip hidden fields, and the point is that
   they do not. It is also aria-hidden and untabbable in the markup, so no
   assistive-technology user can reach it. */
.po-enquiry__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.po-enquiry__fields {
	display: grid;

	/* Two across when there is room for two, one when there is not — the
	   name/surname pair of the reference, without a viewport rule.

	   The track floor is HALF THE CONTAINER, not a fixed 160px, and that is the
	   whole trick. A fixed floor lets auto-fit open a third track as soon as the
	   container passes ~500px, and since every other field spans the full row,
	   the third track is always empty — the name pair ends up squeezed into
	   two-thirds of the width with dead space beside it. A floor of half the
	   container can never fit three, so the grid is 2 or 1 and nothing else.

	   The 160px is still there as the lower bound: below roughly 330px, half the
	   container is narrower than a usable field, so the pair stacks. */
	grid-template-columns: repeat(auto-fit, minmax(max(160px, (100% - 10px) / 2), 1fr));
	gap: 10px;
}

/* The fields the reference gives a full row to.
 *
 * 🚨 The enquiry type is one of them, and it has to be. Paired with the name
 * it read as half a question: the control that says what the whole form is
 * ABOUT sat beside "Name", and Surname was left alone on the next row. The
 * browser showed it the moment the select existed. */
.po-enquiry__field--enquiry_type,
.po-enquiry__field--phone,
.po-enquiry__field--email,
.po-enquiry__field--message {
	grid-column: 1 / -1;
}

/*
 * 🚨 44px, like the submit button beside it (M11).
 *
 * The fields were 40px. M8 raised the SUBMIT button to 44 after measuring it in
 * a browser and never measured the inputs, which sat four pixels under the floor
 * a thumb needs — on every form PropOffice deploys, on every phone.
 */
.po-enquiry__input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--po-contact-border);
	border-radius: 6px;
	background: var(--po-contact-surface);
	color: var(--po-contact-ink);
	font-family: var(--po-ds-font-family);
	font-size: 13px;
	line-height: 1.4;
}

.po-enquiry__input::placeholder {
	/* Dark enough to read. A placeholder that fails contrast is invisible to
	   the people most likely to be relying on it. */
	color: var(--po-contact-muted);
	opacity: 1;
}

.po-enquiry__input--textarea {
	min-height: 76px;
	resize: vertical;
}

/*
 * The enquiry-type select.
 *
 * 🚨 `appearance: none` AND A DRAWN ARROW. A select left to the platform is
 * the one control on this form that cannot be made to match the others: its
 * height, its font and its ring are the operating system's. Removing the
 * platform appearance means the component owes the visitor the affordance it
 * took away, so the chevron is drawn here rather than left to chance.
 */
.po-enquiry__input--select {
	appearance: none;
	padding-inline-end: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2348566a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

.po-enquiry__field.is-invalid .po-enquiry__input {
	border-color: var(--po-contact-primary);
}

.po-enquiry__error {
	margin-top: 4px;
	font-size: 12px;
	color: var(--po-contact-primary);
}

/* `hidden` is an attribute a `display` rule can silently defeat. */
.po-enquiry__error[hidden] {
	display: none;
}

.po-enquiry__optins {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.po-enquiry__optin {
	display: flex;
	gap: 8px;
	align-items: center;
}

/*
 * 🚨 24px, which is WCAG 2.5.8's floor for a target that is not inline in a
 * sentence (M11). It was 16px — the browser default, and small enough that
 * consenting to be contacted was a harder thing to hit than anything else on
 * the form.
 */
.po-enquiry__checkbox {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--po-contact-primary);
	flex: 0 0 auto;
}

.po-enquiry__optin-label {
	font-size: 13px;
	color: var(--po-contact-ink);
	cursor: pointer;
}

/*
 * 🚨 THE FIELD LABELS, WHICH THIS FILE DID NOT STYLE AND A THEME DID.
 *
 * The renderer marks each label `screen-reader-text` — a WORDPRESS THEME class.
 * A theme that defines it hides the label and the field reads by its
 * placeholder, which is the design. A theme that does not, a Website Library
 * page, or any surface without theme CSS, draws "Name (required)" as ordinary
 * inline text beside the input — and the whole form reads as unstyled HTML.
 *
 * A component that ships its own stylesheet must not depend on a theme class
 * for what a visitor SEES. So the rule is restated here, in the file that owns
 * every other control, with the same clip the rest of PropOffice uses.
 */
.po-enquiry__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Inside a label that is already hidden; stated so the pair cannot drift. */
.po-enquiry__required {
	font-weight: inherit;
}

.po-enquiry__legal {
	font-size: 11px;
	line-height: 1.5;
	color: var(--po-contact-muted);
}

/* The reCAPTCHA notice sits under the marketing line, quieter than it. */
.po-enquiry__legal--recaptcha {
	margin-top: 6px;
}

.po-enquiry__legal-link {
	color: var(--po-contact-primary);
	text-decoration: none;
}

.po-enquiry__legal-link:hover {
	text-decoration: underline;
}

.po-enquiry__actions {
	display: flex;
	justify-content: flex-end;
}

/*
 * 🚨 44px TALL, AND IT WAS 36 UNTIL M8 FOUND IT.
 *
 * `padding: 10px 22px` around a 14px label draws a 36px button — under every
 * tap-target guidance there is, on the one control that completes an enquiry.
 * It had been that way since the Property Contact was written; no unit test
 * could see it, because the markup was correct.
 *
 * Found by measuring the rendered page while checking a NEW section, and fixed
 * HERE rather than in that section — this is the one stylesheet both surfaces
 * load, so a listing's enquiry button gets the same fix. That is the whole
 * argument for reusing the form rather than writing a second one.
 */
.po-enquiry__submit {
	min-width: 104px;
	min-height: 44px;
	padding: 10px 22px;
	border: 0;
	border-radius: 4px;
	background: var(--po-contact-primary);
	color: #ffffff;
	font-family: var(--po-ds-font-family);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 140ms ease;
}

.po-enquiry__submit:hover {
	filter: brightness(1.06);
}

.po-enquiry__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ──────────────────────────────────────────────────────── property actions */

.po-actions__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.po-actions__action {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--po-contact-ink);
	font-family: var(--po-ds-font-family);
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.po-actions__action:hover .po-actions__label {
	text-decoration: underline;
}

.po-actions__icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 8px;
	border: 1px solid var(--po-contact-border);
	border-radius: 50%;
	color: var(--po-contact-primary);
}

/* `hidden` on the print button until the script that gives it meaning runs. */
.po-actions__action[hidden] {
	display: none;
}

/* ────────────────────────────────────────────────────────────────── share */

.po-share {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: space-between;
}

/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, TO SURVIVE A GLOBAL HEADING RULE.
 *
 * This is drawn on a real heading element, and both Elementor's global font kit
 * and most themes style headings by TAG: `.elementor-kit-10 h3` is (0,1,1) and
 * outranks a lone `.po-share__heading` at (0,1,0).
 *
 * MEASURED on the live Kava install at 1440x720, that kit rule had taken over
 * 8 of the 11 PropOffice headings on a property page. The Features category
 * label is the clearest case: declared 12px/600 uppercase with 0.06em tracking,
 * it drew at 24px/400 with tracking `normal` — LARGER than the 22px section
 * heading it sits under, so the hierarchy read backwards and the label had
 * stopped looking like a label at all.
 *
 * One extra class is the whole fix, and it is not a guess: on that same page
 * `.po-finance .po-finance__heading` and `.po-overview .po-overview__title`
 * already carried it and rendered exactly what they declare. Both at (0,2,0),
 * both winning. That is why Finance looked right and this did not — never a
 * difference of design, only of specificity.
 */
.po-contact .po-share__heading {
	font-size: 13px;
	font-weight: 600;
}

.po-share__items {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: auto;
}

.po-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--po-contact-primary);
	color: #ffffff;
	text-decoration: none;
	transition: transform 140ms ease, filter 140ms ease;
}

.po-share__link--whatsapp {
	background: var(--po-contact-whatsapp);
}

.po-share__link--facebook {
	background: var(--po-contact-facebook);
}

.po-share__link--x {
	background: var(--po-contact-x);
}

.po-share__link:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

.po-share__icon {
	width: 16px;
	height: 16px;
}

/* ──────────────────────────────────────────────────── accessible-only text */

.po-contact .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────── responsive */

/* Narrow containers only. The type sizes and control sizes do NOT shrink: the
   reference is drawn at roughly a phone's width already, and the contact
   controls are at the smallest size that stays a usable touch target. */
@media (max-width: 480px) {
	.po-contact {
		padding: 16px;
		--po-contact-gap: 16px;
	}

	/* The links stop competing with the channel buttons for one row. */
	.po-agent__footer {
		align-items: flex-start;
	}

	.po-share {
		justify-content: flex-start;
	}

	.po-share__items {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.po-agent__channel,
	.po-share__link,
	.po-agents__control,
	.po-enquiry__submit {
		transition: none;
	}

	.po-agent__channel:hover,
	.po-share__link:hover {
		transform: none;
	}

	/* The slider still pages — the buttons work and the cards change. It simply
	   does not glide to get there. The script asks matchMedia the same question
	   and jumps instead, so the two agree. */
	.po-agents__items--slider {
		scroll-behavior: auto;
	}
}