/*
 * Art Division Page Modules — front-end styles.
 *
 * CSS class prefix: art-pm- (shorthand for art-division-page-modules-)
 *
 * BEM conventions:
 *   Block      .art-pm-module
 *   Modifier   .art-pm-module--{slug}
 *   Element    .art-pm-module__{element}
 *
 * Plugin CSS custom properties (--art-pm-*):
 *   --art-pm-on-primary   Text colour displayed on primary-coloured backgrounds.
 *   --art-pm-on-accent    Text colour displayed on accent-coloured backgrounds.
 *
 * Per-instance alignment custom properties (set via inline style on each module):
 *   --art-pm-title-align-mobile    title text-align at ≤ 767 px
 *   --art-pm-title-align-tablet    title text-align at 768 – 1023 px
 *   --art-pm-title-align-desktop   title text-align at ≥ 1024 px
 *   --art-pm-text-align-mobile     body text text-align at ≤ 767 px
 *   --art-pm-text-align-tablet     body text text-align at 768 – 1023 px
 *   --art-pm-text-align-desktop    body text text-align at ≥ 1024 px
 *       On card-grid modules (--developments/--blog/--jobs) this
 *       deliberately targets each card's own excerpt text, not the
 *       module's header intro paragraph - see --art-pm-intro-align-* below
 *       for that. On --content-multi (Grid/Carousel/Plain/Timeline Cards -
 *       not Stacked, which has its own row-title/row-text vars, or Timeline,
 *       which has no icon field) it also drives each card's icon-media
 *       area's justify-content (left/center/right map directly, flexbox
 *       supports those keywords natively), so a card's icon lines up with
 *       its own title/text instead of always staying centred.
 *
 *   --art-pm-intro-align-mobile/tablet/desktop
 *       .art-pm-module__intro (the header's own WYSIWYG intro paragraph)
 *       text-align, independent of --art-pm-text-align-* - only wired up
 *       for --developments so far (Art_Division_Page_Modules_Developments_Cards::render()'s
 *       $options['intro_align_*']), for callers that want to align the
 *       header's own title/intro without also re-aligning every card's
 *       excerpt underneath it.
 *
 *   --art-pm-title-header-inline-mobile/tablet/desktop
 *       margin-inline override for .art-pm-module__header (computed from the
 *       same title_alignment choice as --art-pm-title-align-*): '0 auto' for
 *       left, 'auto 0' for right, unset (falls back to 'auto', i.e. centred)
 *       otherwise. Needed because .art-pm-module__header is itself a
 *       centred, max-width box — without this, text-align alone only shifts
 *       text within that box rather than reaching the section's actual edge.
 */

:root {
	--art-pm-on-primary: var(--art-color-on-primary, #ffffff);
	--art-pm-on-accent: var(--art-color-on-accent, #ffffff);
	/* Maximum width for prose / text content blocks across all modules. */
	--art-pm-content-max-width: 48rem;
}

/* ── Base module block ──────────────────────────────────────────────────────── */

.art-pm-module {
	box-sizing: border-box;
	width: 100%;
}

/* ── Scroll animations ──────────────────────────────────────────────────────── */
/*
 * Enabled/style choice lives on the <body> as art-pm-animate /
 * art-pm-animate--{style}, set by
 * Art_Division_Page_Modules_Loader::add_animation_body_class() from the
 * Animations settings. The art-pm-module--animate modifier (and, for the
 * Slide style, the finer-grained [data-art-pm-animate-side] elements) are
 * only ever targeted by JS (initScrollAnimations() in
 * art-division-page-modules.js), never rendered server-side, so a module is
 * always visible if JS fails to load or run.
 *
 * --art-pm-animate-duration defaults to the Animation Speed setting's own
 * default (2.2s) below, but Art_Division_Page_Modules_Loader::enqueue_assets()
 * always adds an inline style overriding it with the admin's configured value,
 * since it's a free-entry number rather than a fixed set of choices.
 * --art-pm-animate-easing gives every style the same pronounced
 * "ease-out-expo" deceleration so the motion reads as deliberate rather than
 * a barely-there fade.
 */

:root {
	--art-pm-animate-duration: 2.2s;
	--art-pm-animate-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The Slide style's pre-reveal transform (translateX below) shifts an
   element's PAINTED position without changing its layout box - but per the
   CSS Overflow spec, that painted extent still counts toward the page's
   scrollable overflow region. Every [data-art-pm-animate-side] element still
   waiting to scroll into view therefore pushes document scrollWidth out by
   its offset (3rem), producing a real horizontal scrollbar/gutter on phones
   until the visitor scrolls past the last one and its transform resets to
   none. overflow-x: hidden here just clips that transient paint overflow;
   it doesn't affect normal in-flow layout.

   Set on both html and body: the CSS spec has body's overflow propagate up
   to the viewport when html's own overflow is visible, but that propagation
   is exactly the part that's inconsistent across mobile browsers for this
   transform-driven kind of overflow - html needs its own copy for the fix
   to actually take on every device, not just ones that implement the
   propagation rule the "expected" way. The body_class() output only ever
   carries the modifier on <body>, so :has() picks it up on <html> too.

   body is switched to overflow-x: clip where supported: hidden on body
   (with html's own overflow also non-visible, so nothing propagates) makes
   body a scroll container, which silently stops every position: sticky
   element on the page from sticking - the theme's blog "In this guide"
   contents and share sidebar included. clip clips the same paint overflow
   without creating a scroll container. */
html:has(body.art-pm-animate--slide),
body.art-pm-animate--slide {
	overflow-x: hidden;
}

@supports (overflow-x: clip) {
	body.art-pm-animate--slide {
		overflow-x: clip;
	}
}

body.art-pm-animate .art-pm-module--animate {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity var(--art-pm-animate-duration) var(--art-pm-animate-easing), transform var(--art-pm-animate-duration) var(--art-pm-animate-easing);
}

body.art-pm-animate--fade .art-pm-module--animate {
	transform: none;
}

/*
 * Hero always gets a plain fade, never the vertical slide-up motion, even
 * when the site-wide Animation Style is set to Slide — a viewport-filling
 * section moving up on load reads as jarring rather than deliberate.
 */
body.art-pm-animate .art-pm-module--hero.art-pm-module--animate {
	transform: none;
}

body.art-pm-animate .art-pm-module--animate.is-in-view {
	opacity: 1;
	transform: none;
}

/*
 * Slide style: elements marked data-art-pm-animate-side (currently the
 * Image & Text module's image/text columns) converge in from opposite
 * horizontal sides instead of the whole module fading up - only meaningful
 * where a module has an inherent left/right layout, so it's opt-in per
 * element rather than a whole-module modifier.
 */
body.art-pm-animate--slide [data-art-pm-animate-side] {
	opacity: 0;
	transition: opacity var(--art-pm-animate-duration) var(--art-pm-animate-easing), transform var(--art-pm-animate-duration) var(--art-pm-animate-easing);
}

body.art-pm-animate--slide [data-art-pm-animate-side="left"] {
	transform: translateX(-3rem);
}

body.art-pm-animate--slide [data-art-pm-animate-side="right"] {
	transform: translateX(3rem);
}

body.art-pm-animate--slide [data-art-pm-animate-side].is-in-view {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	body.art-pm-animate .art-pm-module--animate,
	body.art-pm-animate--slide [data-art-pm-animate-side] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── Background layer (image / SVG) ─────────────────────────────────────────── */

.art-pm-module--has-bg {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.art-pm-module__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
}

.art-pm-module__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.art-pm-module__bg-svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.art-pm-module__bg-svg svg {
	max-width: 100%;
	max-height: 100%;
}

.art-pm-module__inner {
	position: relative;
	z-index: 1;
}

/* ── Spacing ─────────────────────────────────────────────────────────────────── */

/* --art-section-spacing: the theme's Section Spacing setting (Theme
   Settings > Spacing Scale); 4rem when it isn't set. */
.art-pm-module--padding-top {
	padding-top: var(--art-section-spacing, 4rem);
}

.art-pm-module--padding-bottom {
	padding-bottom: var(--art-section-spacing, 4rem);
}

/* Background colour variants */

.art-pm-module--bg-white {
	background-color: var(--art-color-bg, #ffffff);
}

.art-pm-module--bg-alternate {
	background-color: var(--art-color-alternate, #f5f5f5);
}

.art-pm-module--bg-primary {
	background-color: var(--art-color-primary, #1a1a2e);
}

/* --art-pm-accent-bg resolves the real accent here, on the section, before
   the children remap --art-color-accent below - so a Repeatable that paints
   its own Accent background (e.g. a CTA set to Accent) can still reach it. */
.art-pm-module--bg-secondary {
	--art-pm-accent-bg: var(--art-color-accent, #1a1a2e);
	background-color: var(--art-pm-accent-bg);
}

/* Readable text on the Primary and Accent backgrounds. The theme colours
   text through its --color-* / --art-color-* variables (both must be set -
   the --art-* aliases are resolved once at :root), so they are redefined to
   the readable "on" colour inside these sections. Deliberately scoped to the
   module-level text - the shared header and the text of modules that have no
   cards of their own (Content Multi's Plain and Stacked styles have none:
   no card box) - so light cards inside a dark section (property, blog,
   team cards...) keep their own dark text. Repeatables placed on these
   backgrounds inherit the same variables; on Accent the accent colour itself
   is remapped too, otherwise links and [accent] words would disappear into
   the background - on the section's children only, since the section's own
   background is painted from that same accent variable. */
.art-pm-module--bg-primary .art-pm-module__header,
.art-pm-module--bg-primary.art-pm-module--content,
.art-pm-module--bg-primary.art-pm-module--accordion,
.art-pm-module--bg-primary.art-pm-module--image-text .art-pm-module__text,
.art-pm-module--bg-primary.art-pm-module--video .art-pm-module__text,
.art-pm-module--bg-primary.art-pm-module--repeatables,
.art-pm-module--bg-primary.art-pm-module--content-multi.art-pm-module--style-plain,
.art-pm-module--bg-primary.art-pm-module--content-multi.art-pm-module--style-stacked {
	--art-color-eyebrow: var(--art-pm-on-primary, #ffffff);
	--art-color-muted: var(--art-pm-on-primary, #ffffff);
	--art-color-text: var(--art-pm-on-primary, #ffffff);
	--art-color-title: var(--art-pm-on-primary, #ffffff);
	--color-btn-outline-bg-hover: var(--art-pm-on-primary, #ffffff);
	--color-btn-outline-border: var(--art-pm-on-primary, #ffffff);
	--color-btn-outline-border-hover: var(--art-pm-on-primary, #ffffff);
	--color-btn-outline-text: var(--art-pm-on-primary, #ffffff);
	--color-btn-outline-text-hover: var(--art-color-primary, #1a1a2e);
	--color-eyebrow: var(--art-pm-on-primary, #ffffff);
	--color-muted: var(--art-pm-on-primary, #ffffff);
	--color-text: var(--art-pm-on-primary, #ffffff);
	--color-title: var(--art-pm-on-primary, #ffffff);
	color: var(--art-pm-on-primary, #ffffff);
}

.art-pm-module--bg-secondary .art-pm-module__header,
.art-pm-module--bg-secondary.art-pm-module--content > *,
.art-pm-module--bg-secondary.art-pm-module--accordion > *,
.art-pm-module--bg-secondary.art-pm-module--image-text .art-pm-module__text,
.art-pm-module--bg-secondary.art-pm-module--video .art-pm-module__text,
.art-pm-module--bg-secondary.art-pm-module--repeatables > *,
.art-pm-module--bg-secondary.art-pm-module--content-multi.art-pm-module--style-plain > *,
.art-pm-module--bg-secondary.art-pm-module--content-multi.art-pm-module--style-stacked > *,
.art-pm-module__content-multi-timeline-card--highlight > * {
	--art-color-eyebrow: var(--art-pm-on-accent, #ffffff);
	--art-color-muted: var(--art-pm-on-accent, #ffffff);
	--art-color-text: var(--art-pm-on-accent, #ffffff);
	--art-color-title: var(--art-pm-on-accent, #ffffff);
	--color-btn-outline-bg-hover: var(--art-pm-on-accent, #ffffff);
	--color-btn-outline-border: var(--art-pm-on-accent, #ffffff);
	--color-btn-outline-border-hover: var(--art-pm-on-accent, #ffffff);
	--color-btn-outline-text: var(--art-pm-on-accent, #ffffff);
	--color-btn-outline-text-hover: var(--art-color-accent, #1a1a2e);
	--color-eyebrow: var(--art-pm-on-accent, #ffffff);
	--color-muted: var(--art-pm-on-accent, #ffffff);
	--color-text: var(--art-pm-on-accent, #ffffff);
	--color-title: var(--art-pm-on-accent, #ffffff);
	--color-accent: var(--art-pm-on-accent, #ffffff);
	--color-accent-hover: var(--art-pm-on-accent, #ffffff);
	--art-color-accent: var(--art-pm-on-accent, #ffffff);
	--art-color-accent-hover: var(--art-pm-on-accent, #ffffff);
	color: var(--art-pm-on-accent, #ffffff);
}

/* Popups (.art-modal) opened from these sections - e.g. a CTA's popup form -
   sit in the section's DOM but paint their own background, so they get the
   site's own colours back rather than the remapped "on" colours above
   (otherwise an accent-coloured button inside the popup turns dark-on-dark).
   The originals are captured at :root, before any section remaps them. */
:root {
	--art-pm-site-art-color-accent: var(--art-color-accent);
	--art-pm-site-art-color-accent-hover: var(--art-color-accent-hover);
	--art-pm-site-art-color-eyebrow: var(--art-color-eyebrow);
	--art-pm-site-art-color-muted: var(--art-color-muted);
	--art-pm-site-art-color-text: var(--art-color-text);
	--art-pm-site-art-color-title: var(--art-color-title);
	--art-pm-site-color-accent: var(--color-accent);
	--art-pm-site-color-accent-hover: var(--color-accent-hover);
	--art-pm-site-color-btn-outline-bg-hover: var(--color-btn-outline-bg-hover);
	--art-pm-site-color-btn-outline-border: var(--color-btn-outline-border);
	--art-pm-site-color-btn-outline-border-hover: var(--color-btn-outline-border-hover);
	--art-pm-site-color-btn-outline-text: var(--color-btn-outline-text);
	--art-pm-site-color-btn-outline-text-hover: var(--color-btn-outline-text-hover);
	--art-pm-site-color-eyebrow: var(--color-eyebrow);
	--art-pm-site-color-muted: var(--color-muted);
	--art-pm-site-color-text: var(--color-text);
	--art-pm-site-color-title: var(--color-title);
}

.art-pm-module--bg-primary .art-modal,
.art-pm-module--bg-secondary .art-modal,
.art-pm-module__content-multi-timeline-card--highlight .art-modal {
	--art-color-accent: var(--art-pm-site-art-color-accent);
	--art-color-accent-hover: var(--art-pm-site-art-color-accent-hover);
	--art-color-eyebrow: var(--art-pm-site-art-color-eyebrow);
	--art-color-muted: var(--art-pm-site-art-color-muted);
	--art-color-text: var(--art-pm-site-art-color-text);
	--art-color-title: var(--art-pm-site-art-color-title);
	--color-accent: var(--art-pm-site-color-accent);
	--color-accent-hover: var(--art-pm-site-color-accent-hover);
	--color-btn-outline-bg-hover: var(--art-pm-site-color-btn-outline-bg-hover);
	--color-btn-outline-border: var(--art-pm-site-color-btn-outline-border);
	--color-btn-outline-border-hover: var(--art-pm-site-color-btn-outline-border-hover);
	--color-btn-outline-text: var(--art-pm-site-color-btn-outline-text);
	--color-btn-outline-text-hover: var(--art-pm-site-color-btn-outline-text-hover);
	--color-eyebrow: var(--art-pm-site-color-eyebrow);
	--color-muted: var(--art-pm-site-color-muted);
	--color-text: var(--art-pm-site-color-text);
	--color-title: var(--art-pm-site-color-title);
	color: var(--art-pm-site-color-text, #1a1a1a);
}

/* ── Shared header ──────────────────────────────────────────────────────────── */

.art-pm-module__header {
	margin-bottom: 2rem;
	margin-inline: auto;
	max-width: var(--art-pm-content-max-width);
	text-align: center;
}

/* Several modules (carousels, full-width sliders, Stacked, Grid, Accordion
   Two Columns...) render the header straight inside the section rather than
   inside a padded, centred .art-pm-module__inner. There the header itself is
   capped to the site container (same max-width and 15px padding as
   .container), and the prose cap moves onto its children instead - so a
   left/right Title Alignment lines the title up with the content below
   rather than pushing it against the viewport edge. The per-breakpoint
   rules further down then align the children within this box. Image & Text
   (Title Position: Top) has its own equivalent rule further down. */
.art-pm-module > .art-pm-module__header {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module > .art-pm-module__header > * {
	max-width: var(--art-pm-content-max-width);
}

/* Image & Text (Title Position: Top) aligns its title with text-align alone
   and sets no --art-pm-title-header-inline-* values, so its header children
   keep their full width rather than taking the prose cap above - otherwise a
   left-aligned title would sit in a centred 50rem box. */
.art-pm-module.art-pm-module--image-text > .art-pm-module__header > * {
	margin-inline: 0;
	max-width: none;
}

/* No trailing space when the header (title/intro) is the only thing in the
   module - e.g. a Content module with no CTA and no rows below it. */
.art-pm-module__inner > .art-pm-module__header:last-child {
	margin-bottom: 0;
}

/* Header with a hidden title (and no eyebrow/post-title/intro) renders no
   visible content, but still reserved its margin-bottom - leaving a stray
   gap above whatever follows (e.g. the Tabs module's nav). See
   $header_visually_empty in modules/shared/header.php. */
.art-pm-module__header.art-pm-module__header--visually-hidden {
	margin-bottom: 0;
}

.art-pm-module__eyebrow {
	color: var(--art-color-eyebrow, var(--art-color-primary, #1a1a2e));
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.art-pm-module__post-title {
	color: var(--art-color-eyebrow, var(--art-color-primary, #1a1a2e));
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0.5rem 0 0;
	text-transform: uppercase;
}

.art-pm-module__title {
	font-size: var(--art-text-2xl, 2rem);
	margin: 0 0 1rem;
}

/* Accent-coloured word inside a title/heading, e.g. "How our [valuation]
   works" - see art_division_page_modules_wrap_accent_words(). */
.art-txt-accent {
	color: var(--art-color-accent);
}

.art-pm-module__intro {
	margin-inline: auto;
	max-width: var(--art-pm-content-max-width);
}

/* With no visible title above the intro - either no title at all (the intro
   is the header's first child) or a visually hidden one (the intro directly
   follows the screen-reader-text title, see modules/shared/header.php) - the
   first paragraph's top margin was just empty space above the text. */
.art-pm-module__header > .art-pm-module__intro:first-child > p:first-child,
.art-pm-module__header > .art-pm-module__title.screen-reader-text + .art-pm-module__intro > p:first-child {
	margin-top: 0;
}

/* The header's own margin-bottom already spaces the intro from whatever
   follows; a trailing paragraph margin on top of it doubled that gap. */
.art-pm-module__intro > p:last-child {
	margin-bottom: 0;
}

/* ── Content module ──────────────────────────────────────────────────────────── */

/* Caps the section to the sitewide container width, same as every other
   module's .art-pm-module__inner. Without this, the header/intro's own
   narrower --art-pm-content-max-width prose cap has nothing to center or
   hug within except the raw full-bleed section - fine while text stays
   centered (its auto margins collapse to nothing visible either way), but
   left/right-aligned text (title_alignment/text_alignment) then hugs the
   literal viewport edge instead of lining up with the site container, like
   every other module's left/right alignment does. */
.art-pm-module--content .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

/* Image Sides style: .art-pm-module__image-sides-frame wraps the
   full-bleed .art-pm-module__bg image and .art-pm-module__inner together,
   sized only by .art-pm-module__inner's own height (the image is
   position:absolute so contributes none of its own) - so the image only
   ever shows in the left/right gutters beyond the panel's max-width, never
   in a band above or below it, while the section's own padding-top/-bottom
   (always on for this style - see template.php) still give genuine,
   image-free breathing room before/after the whole frame. The opaque
   background-color (one rule per Background Colour choice) is what actually
   hides the image within the panel's own bounds. */
.art-pm-module__image-sides-frame {
	/* .art-pm-module--has-bg makes the section a flex container (to center
	   the default style's image-behind-text case); a block-level flex item
	   with no explicit width shrinks to fit its content instead of filling
	   the row, which collapsed this frame down to .art-pm-module__inner's
	   own width - leaving no room for the image to show at the sides at
	   all. width:100% restores the full-bleed sizing this style needs. */
	position: relative;
	width: 100%;
}

/* Narrower than the module's usual 75rem max-width - hugs the prose column
   (.art-pm-module__header's own --art-pm-content-max-width, 48rem) plus this
   panel's own horizontal padding, so the image gets real room to show at the
   sides instead of the panel spanning the section's full usual width. */
.art-pm-module--content.art-pm-module--image-sides-active .art-pm-module__inner {
	max-width: calc(var(--art-pm-content-max-width, 48rem) + 5rem);
	padding-bottom: 4rem;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: 4rem;
}

/* The panel already has its own padding-bottom above - without this, the
   WYSIWYG intro's last paragraph adds its own trailing margin on top of
   that, leaving more empty space below the text than above it. */
.art-pm-module--content.art-pm-module--image-sides-active .art-pm-module__intro > *:last-child {
	margin-bottom: 0;
}

.art-pm-module--content.art-pm-module--image-sides-active.art-pm-module--bg-white .art-pm-module__inner {
	background-color: var(--art-color-bg, #ffffff);
}

.art-pm-module--content.art-pm-module--image-sides-active.art-pm-module--bg-alternate .art-pm-module__inner {
	background-color: var(--art-color-alternate, #f5f5f5);
}

.art-pm-module--content.art-pm-module--image-sides-active.art-pm-module--bg-primary .art-pm-module__inner {
	background-color: var(--art-color-primary, #1a1a2e);
}

.art-pm-module--content.art-pm-module--image-sides-active.art-pm-module--bg-secondary .art-pm-module__inner {
	background-color: var(--art-color-accent, #1a1a2e);
}

/* CTA (link, embedded form, or popup trigger) matches the header/intro width
   instead of stretching to the full section width. */
.art-pm-module--content .art-pm-module__cta {
	margin-inline: auto;
	max-width: var(--art-pm-content-max-width);
	width: 100%;
}

/* Centered text only makes sense for the button/link variants, not the
   embedded form - it would center the form's own labels and fields. */
.art-pm-module--content .art-pm-module__cta:not(.art-pm-module__cta-form) {
	text-align: center;
}

/* Inline Title style — two columns: title (with an optional decorative SVG
   watermark behind it) on the left, intro text and CTA on the right. Stacks
   to a single column below 768px. Constrained to the site container width,
   matching every other multi-column module (Image & Text, Team Members, etc).
   The section itself is a column flex box (rather than the has-bg flex-center
   used by the default style) so that .art-pm-module__inner - and in turn the
   title column carrying the SVG watermark - stretches to fill any min-height
   set on the section, instead of shrinking to the title text's own height. */
.art-pm-module--content.art-pm-module--style-inline-title {
	display: flex;
	flex-direction: column;
}

.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inner {
	flex: 1 1 auto;
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

@media (min-width: 768px) {
	.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inner {
		display: grid;
		gap: 2rem;
		grid-template-columns: 1fr 1fr;
	}
}

.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-title,
.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-title {
	overflow: hidden;
	position: relative;
}

.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-title-bg {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-title-bg svg {
	height: 100%;
	width: 100%;
}

.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-title .art-pm-module__header,
.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-body .art-pm-module__header {
	margin-inline: 0;
	max-width: none;
	text-align: left;
}

/* Nothing follows the text column's last line, so no margin under it: the
   header's own margin-bottom and the last paragraph's/list's added about
   3rem of empty space above the section's bottom padding. */
.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-body > :last-child,
.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-body .art-pm-module__intro > :last-child {
	margin-bottom: 0;
}

.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__inline-title .art-pm-module__header {
	position: relative;
	z-index: 1;
}

.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__cta {
	margin-inline: 0;
	max-width: none;
}

.art-pm-module--content.art-pm-module--style-inline-title .art-pm-module__cta:not(.art-pm-module__cta-form) {
	text-align: left;
}

/* ── Image & Text module ────────────────────────────────────────────────────── */

.art-pm-module--image-text .art-pm-module__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-inline: auto;
	max-width: var(--art-max-width, 860px);
	padding-left: 15px;
	padding-right: 15px;
}

/* Image Position: Top - removes the default vertical centring between the
   image and text columns (Image Position: Centered, the default, keeps the
   align-items:center above). */
.art-pm-module--image-text.art-pm-module--image-align-top .art-pm-module__inner {
	align-items: normal;
}

/* Flex items don't collapse their children's margins through their own
   edges, so the WYSIWYG text's first paragraph still carries the browser's
   default ~16px (1em) top margin even once .art-pm-module__text itself has
   no padding-top - leaving the visible text sitting below the image's top
   edge instead of flush with it. Zero it so Image Position: Top actually
   means both columns' visible content, not just their boxes, start level. */
.art-pm-module--image-text.art-pm-module--image-align-top .art-pm-module__text > :first-child {
	margin-top: 0;
}

/* Title Position: Top (.art-pm-module--title-top) renders the shared header
   partial as a direct child of the section, before .art-pm-module__inner
   opens - unlike other modules (Content, Blog, etc.) whose header sits
   nested inside their own padded, centred .art-pm-module__inner. Made to
   mirror .art-pm-module__inner's own container math exactly (same
   max-width var, same 15px padding) so both boxes share the same width and
   position - the header's left/right text-align (--art-pm-title-align-*,
   set in template.php) then lines up with the image/text row below it
   automatically, with no need to also move the box itself.
   margin-inline: auto is pinned here (rather than left to the shared
   --art-pm-title-header-inline-* "hug the edge" override that other
   modules' narrower prose-cap header relies on) because this header is now
   the same width as its container - hugging an edge would just shove it to
   the section's raw edge instead of keeping it aligned with
   .art-pm-module__inner. This selector's specificity (2 classes) beats the
   shared per-breakpoint rule (1 class) regardless of source order, so it
   always wins here - scoped to this module only, not the shared
   .art-pm-module__header base rule other modules rely on. */
.art-pm-module--image-text .art-pm-module__header {
	margin-inline: auto;
	max-width: var(--art-max-width, 860px);
	padding-left: 15px;
	padding-right: 15px;
}

/* Image column — default left position */
.art-pm-module--image-text.art-pm-module--image-left .art-pm-module__image {
	order: 0;
}

.art-pm-module--image-text.art-pm-module--image-left .art-pm-module__text {
	order: 1;
}

/* Image column — right position */
.art-pm-module--image-text.art-pm-module--image-right .art-pm-module__image {
	order: 1;
}

.art-pm-module--image-text.art-pm-module--image-right .art-pm-module__text {
	order: 0;
}

/* Once the columns stack on mobile, the image should always come first
   regardless of the Image Position setting - overrides the image-right
   order swap above at the same specificity so it wins by source order. */
@media (max-width: 767px) {
	.art-pm-module--image-text.art-pm-module--image-left .art-pm-module__image,
	.art-pm-module--image-text.art-pm-module--image-right .art-pm-module__image {
		order: 0;
	}

	.art-pm-module--image-text.art-pm-module--image-left .art-pm-module__text,
	.art-pm-module--image-text.art-pm-module--image-right .art-pm-module__text {
		order: 1;
	}
}

.art-pm-module__image,
.art-pm-module__text {
	flex: 1 1 min(100%, 20rem);
	min-width: 0;
}

/* Column ratio — overrides the default even 50/50 split above the mobile
   stacking breakpoint; left off entirely on mobile so the base rule's
   min(100%, 20rem) basis keeps forcing the columns to wrap. */
@media (min-width: 768px) {
	.art-pm-module--image-text.art-pm-module--ratio-image-larger .art-pm-module__image {
		flex-basis: calc(60% - 2.4rem);
	}

	.art-pm-module--image-text.art-pm-module--ratio-image-larger .art-pm-module__text {
		flex-basis: calc(40% - 2.4rem);
	}

	.art-pm-module--image-text.art-pm-module--ratio-image-smaller .art-pm-module__image {
		flex-basis: calc(40% - 2.4rem);
	}

	.art-pm-module--image-text.art-pm-module--ratio-image-smaller .art-pm-module__text {
		flex-basis: calc(60% - 2.4rem);
	}
}

/* ── Stats module ───────────────────────────────────────────────────────────── */
/* Same single-image/text layout as Image & Text (see above), plus a Stats
   grid rendered inside the text column, below the body text. */

/* The section itself carries the Background Colour field's fill (unlike
   other modules, which only tint an inner card element), so it needs the
   site-wide rounded-corners setting applied directly here too. */
.art-pm-module--stats {
	border-radius: var(--art-radius, 0);
}

.art-pm-module--stats .art-pm-module__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-inline: auto;
	max-width: var(--art-max-width, 860px);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--stats.art-pm-module--image-left .art-pm-module__image {
	order: 0;
}

.art-pm-module--stats.art-pm-module--image-left .art-pm-module__text {
	order: 1;
}

.art-pm-module--stats.art-pm-module--image-right .art-pm-module__image {
	order: 1;
}

.art-pm-module--stats.art-pm-module--image-right .art-pm-module__text {
	order: 0;
}

.art-pm-module--stats .art-pm-module__image,
.art-pm-module--stats .art-pm-module__text {
	flex: 1 1 min(100%, 20rem);
	min-width: 0;
}

.art-pm-stats {
	border-top: 1px solid var(--art-color-border, #e2e2e2);
	display: grid;
	gap: 1.5rem 1rem;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

.art-pm-stats__item {
	text-align: center;
}

.art-pm-stats__icon {
	display: inline-flex;
	margin-bottom: 0.4rem;
}

.art-pm-stats__icon-svg,
.art-pm-stats__icon-img {
	color: var(--art-color-accent, #178f8a);
	height: 1.75rem;
	object-fit: contain;
	width: 1.75rem;
}

.art-pm-stats__label {
	color: var(--art-color-muted, #646970);
	font-size: var(--art-text-sm, 0.875rem);
	margin: 0 0 0.15rem;
}

.art-pm-stats__value {
	color: var(--art-color-title, var(--art-color-text, #1d2327));
	font-weight: 600;
	margin: 0;
}

@media (max-width: 480px) {
	.art-pm-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --art-pm-stats-strip-bg/-text/-divider are override hooks - nothing sets
   them inline today, so they always fall through to their own defaults
   below. The background genuinely IS the site's Accent colour, so the text/
   icon fallback chains through --art-pm-on-accent (readable-text-for-Accent,
   see the Theme's luminance calc) rather than a hardcoded white - a light
   Accent colour (e.g. a client using yellow) would otherwise render white
   text on a light background here, same bug the Hero down-arrow had before
   it was fixed for the opposite reason (that one wasn't actually on an
   Accent-coloured surface at all). */
.art-pm-stats-strip {
	background: var(--art-pm-stats-strip-bg, var(--art-color-accent, #178f8a));
	border-radius: var(--art-radius, 0);
	padding: calc(var(--art-spacing, 1.5rem) * 1.25) var(--art-spacing, 1.5rem);
}

.art-pm-stats-strip__list {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-inline: auto;
	max-width: var(--art-max-width, 1200px);
}

.art-pm-stats-strip__item {
	border-inline-start: 1px solid var(--art-pm-stats-strip-divider, rgba(255, 255, 255, 0.35));
	flex: 1 1 160px;
	padding-inline: var(--art-spacing, 1.5rem);
	text-align: center;
}

.art-pm-stats-strip__item:first-child {
	border-inline-start: 0;
}

.art-pm-stats-strip__icon {
	display: inline-flex;
	margin: 0 0 0.5rem;
}

.art-pm-stats-strip__icon-svg,
.art-pm-stats-strip__icon-img {
	color: var(--art-pm-stats-strip-text, var(--art-pm-on-accent, #ffffff));
	height: 2rem;
	object-fit: contain;
	width: 2rem;
}

.art-pm-stats-strip__number {
	color: var(--art-pm-stats-strip-text, var(--art-pm-on-accent, #ffffff));
	font-size: var(--art-text-3xl, 2.5rem);
	line-height: 1.1;
	margin: 0 0 0.25rem;
}

.art-pm-stats-strip__text {
	color: var(--art-pm-stats-strip-text, var(--art-pm-on-accent, #ffffff));
	font-size: var(--art-text-sm, 0.875rem);
	margin: 0;
	opacity: 0.9;
}

@media (max-width: 600px) {
	.art-pm-stats-strip__item {
		border-inline-start: 0;
		border-top: 1px solid var(--art-pm-stats-strip-divider, rgba(255, 255, 255, 0.35));
		flex: 1 1 100%;
		padding-block: var(--art-spacing, 1.5rem) 0;
	}

	.art-pm-stats-strip__item:first-child {
		border-top: 0;
		padding-block-start: 0;
	}
}

.art-pm-module__img {
	border-radius: var(--art-radius, 0);
	display: block;
	height: auto;
	width: 100%;
}

/* ── CTA ────────────────────────────────────────────────────────────────────── */

.art-pm-module__cta {
	margin-top: 2rem;
}

/* Visual button styles are provided by art-btn / art-btn--primary on the element. */
.art-pm-module__cta-link {
	display: inline-block;
}

.art-pm-module__cta-label {
	margin: 0 0 0.5rem;
}

/* Image & Text: the CTA button (link or popup form trigger) is at least
   250px wide when the column has room - min() falls back to the full
   column width on narrow screens instead of overflowing. Its alignment
   follows the text, left by default, like every other module. The
   embedded-form CTA shares the wrapper class but is excluded - it holds a
   whole form, not a single button. */
/* Mobile: centre the CTA under the stacked image + text when the module's
   mobile Text Alignment is left on Default. The template only sets
   --art-pm-text-align-mobile when Left/Center/Right is chosen, so an unset
   variable means Default and falls back to center; a chosen alignment is
   followed as-is. Tablet/desktop are untouched (the button follows the
   text, left by default). */
@media (max-width: 767px) {
	.art-pm-module--image-text .art-pm-module__cta:not( .art-pm-module__cta-form ) {
		text-align: var(--art-pm-text-align-mobile, center);
	}
}

.art-pm-module--image-text .art-pm-module__cta:not( .art-pm-module__cta-form ) .art-pm-module__cta-link {
	min-width: min( 250px, 100% );
}

/* Image & Text with two CTAs: buttons stay inline-block so they keep following
   the text alignment (left/centre/right) and wrap onto separate lines when the
   column is narrow. Each gets 0.5rem of side margin for the gap; the negative
   wrapper margin cancels it so the outer edges still line up with the text. */
.art-pm-module__cta--multi {
	margin-inline: -0.5rem;
	margin-bottom: -0.75rem;
}

.art-pm-module__cta--multi .art-pm-module__cta-link {
	margin: 0 0.5rem 0.75rem;
	vertical-align: top;
}

/* ── Gallery ────────────────────────────────────────────────────────────────── */

.art-pm-module__gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

.art-pm-module__gallery-item {
	flex: 1 1 calc(25% - 0.75rem);
	min-width: 0;
}

.art-pm-module__gallery-img {
	display: block;
	height: auto;
	width: 100%;
}

.art-pm-module__gallery-icon {
	display: block;
	fill: currentColor;
	height: 4.125rem;
	object-fit: contain;
	width: 4.125rem;
}

.art-pm-module__gallery-title {
	display: block;
	margin-top: 0.75rem;
}

@media (max-width: 600px) {
	.art-pm-module__gallery-item {
		flex-basis: calc(50% - 0.5rem);
	}
}

/* ── Feature Grid style ─────────────────────────────────────────────────────── */

.art-pm-module--style-feature-grid .art-pm-module__feature-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	margin-inline: auto;
	margin-top: 2rem;
	max-width: var(--art-max-width, 75rem);
}

.art-pm-module__fg-item {
	align-items: center;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.art-pm-module__fg-link {
	align-items: center;
	color: inherit;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	width: 100%;
}

.art-pm-module__fg-link:hover .art-pm-module__fg-title,
.art-pm-module__fg-link:focus .art-pm-module__fg-title {
	text-decoration: underline;
}

.art-pm-module__fg-media {
	align-items: center;
	display: flex;
	justify-content: center;
}

.art-pm-module__fg-img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.art-pm-module__fg-icon {
	display: block;
	fill: currentColor;
	height: 4.125rem;
	object-fit: contain;
	width: 4.125rem;
}

.art-pm-module__fg-title {
	display: block;
	margin-top: 0.75rem;
}

/* Unlinked items render the title as a <p>, which picked up the default
   paragraph margin-bottom - empty space under the last thing in the item,
   on top of the grid's own row gap. */
.art-pm-module__fg-title:last-child {
	margin-bottom: 0;
}

/* ── Fullwidth style ────────────────────────────────────────────────────────── */

.art-pm-module--style-fullwidth.art-pm-module--image-text .art-pm-module__inner {
	align-items: stretch;
	gap: 0;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module--style-fullwidth.art-pm-module--image-text .art-pm-module__image {
	flex: 1 1 50%;
	min-height: 400px;
}

/* border-radius 0: the fullwidth image bleeds to the viewport edge, where
   the site-wide rounded-corners setting would clip visibly odd corners. */
.art-pm-module--style-fullwidth.art-pm-module--image-text .art-pm-module__img {
	border-radius: 0;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.art-pm-module--style-fullwidth.art-pm-module--image-text .art-pm-module__text {
	align-self: center;
	flex: 1 1 50%;
	padding-bottom: 3rem;
	padding-top: 3rem;
}

/* Image Position: Top - the fullwidth image bleeds edge-to-edge with no
   margin of its own (min-height/object-fit above), so vertically centering
   the text against it, or leaving its own 3rem top padding, would leave the
   text starting well below the image's actual top edge instead of at it.
   Dropping align-self back to normal (matching .art-pm-module__inner's own
   align-items: normal - see the Image & Text module section) and zeroing
   padding-top flushes the text to the same top edge as the image; the 3rem
   padding-bottom is kept for spacing below the text block. */
.art-pm-module--style-fullwidth.art-pm-module--image-text.art-pm-module--image-align-top .art-pm-module__text {
	align-self: normal;
	padding-top: 0;
}

/* Inner padding aligned with the --art-max-width container. Uses 100vw
   rather than 100% - percentage padding resolves against .art-pm-module__text's
   containing block (.art-pm-module__inner), which only equals the true
   viewport width if nothing upstream (theme wrapper, page template) already
   constrains it. 100vw always reflects the real viewport, so (100vw -
   container) / 2 reliably gives the same offset the normal centered
   container has from the edge, regardless of ancestor markup. */
.art-pm-module--style-fullwidth.art-pm-module--image-text.art-pm-module--image-left .art-pm-module__text {
	padding-left: clamp(1.5rem, 5vw, 3rem);
	padding-right: max(1.5rem, calc((100vw - var(--art-max-width, 1562px)) / 2));
}

.art-pm-module--style-fullwidth.art-pm-module--image-text.art-pm-module--image-right .art-pm-module__text {
	padding-left: max(1.5rem, calc((100vw - var(--art-max-width, 1562px)) / 2));
	padding-right: clamp(1.5rem, 5vw, 3rem);
}

@media (max-width: 767px) {
	.art-pm-module--style-fullwidth.art-pm-module--image-text .art-pm-module__image,
	.art-pm-module--style-fullwidth.art-pm-module--image-text .art-pm-module__text {
		flex: 0 0 100%;
	}

	.art-pm-module--style-fullwidth.art-pm-module--image-text .art-pm-module__image {
		min-height: 0;
	}

	.art-pm-module--style-fullwidth.art-pm-module--image-text .art-pm-module__img {
		aspect-ratio: 16 / 9;
		height: auto;
	}

	.art-pm-module--style-fullwidth.art-pm-module--image-text.art-pm-module--image-left .art-pm-module__text,
	.art-pm-module--style-fullwidth.art-pm-module--image-text.art-pm-module--image-right .art-pm-module__text {
		padding-left: clamp(1.5rem, 5vw, 4rem);
		padding-right: clamp(1.5rem, 5vw, 4rem);
	}
}

/* ── Boxed style ────────────────────────────────────────────────────────────── */
/* Text column renders as a bordered card, in the accent colour, that overlaps
   the image's inner edge - image-left overlaps left, image-right overlaps
   right (mirrored). Overlap is desktop-only: below the 768px stacking
   breakpoint the columns are already full-width and the overlap margins
   would just clip the card against the viewport edge. */

.art-pm-module--style-boxed.art-pm-module--image-text .art-pm-module__text {
	background: var(--art-color-bg, #ffffff);
	border: 2px solid var(--art-color-accent);
	padding: clamp(2rem, 4vw, 3rem);
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.art-pm-module--style-boxed.art-pm-module--image-text.art-pm-module--image-left .art-pm-module__text {
		margin-left: -3.5rem;
	}

	.art-pm-module--style-boxed.art-pm-module--image-text.art-pm-module--image-right .art-pm-module__text {
		margin-right: -3.5rem;
	}
}

/* ── Video module ──────────────────────────────────────────────────────────── */

.art-pm-module--video .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 860px);
	padding-left: 15px;
	padding-right: 15px;
}

/* Default style — stacked: header, CTA, video (natural document order, no flex) */
.art-pm-module--video.art-pm-module--style-default .art-pm-module__text {
	margin-bottom: 2rem;
}

/* Caps the video at the sitewide prose width and centres it, instead of
   stretching to fill the full .art-pm-module__inner (860px) - scoped to
   Default only, since Video Left/Right's .art-pm-module__video is a flex
   column sharing the row with the text column (see flex:1 1 min(100%,20rem)
   below), where a fixed max-width/margin:auto would fight that layout. */
.art-pm-module--video.art-pm-module--style-default .art-pm-module__video {
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	max-width: var(--art-pm-content-max-width);
}

/* Video Left / Video Right styles — two-column layout */
.art-pm-module--video.art-pm-module--style-video-left .art-pm-module__inner,
.art-pm-module--video.art-pm-module--style-video-right .art-pm-module__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

/* Text Position — vertical alignment of the text column against the video */
.art-pm-module--video.art-pm-module--text-position-top .art-pm-module__inner {
	align-items: flex-start;
}

.art-pm-module--video.art-pm-module--text-position-bottom .art-pm-module__inner {
	align-items: flex-end;
}

.art-pm-module--video.art-pm-module--style-video-left .art-pm-module__video,
.art-pm-module--video.art-pm-module--style-video-left .art-pm-module__text,
.art-pm-module--video.art-pm-module--style-video-right .art-pm-module__video,
.art-pm-module--video.art-pm-module--style-video-right .art-pm-module__text {
	flex: 1 1 min(100%, 20rem);
	min-width: 0;
}

/* The header (title + intro) sits inside the text column for these two
   styles, so it needs to fill the column and left-align instead of using
   its usual centred, max-width box — matching the same override used by
   Accordion and Content's Inline Title style for the same reason. */
.art-pm-module--video.art-pm-module--style-video-left .art-pm-module__text .art-pm-module__header,
.art-pm-module--video.art-pm-module--style-video-right .art-pm-module__text .art-pm-module__header {
	margin-bottom: 1.5rem;
	margin-inline: 0;
	max-width: none;
	text-align: left;
}

/* Same visually-empty-header case as the base rule above, but this style's
   own margin-bottom outranks it on specificity - repeat the override here. */
.art-pm-module--video.art-pm-module--style-video-left .art-pm-module__text .art-pm-module__header.art-pm-module__header--visually-hidden,
.art-pm-module--video.art-pm-module--style-video-right .art-pm-module__text .art-pm-module__header.art-pm-module__header--visually-hidden {
	margin-bottom: 0;
}

.art-pm-module--video.art-pm-module--style-video-left .art-pm-module__text .art-pm-module__intro,
.art-pm-module--video.art-pm-module--style-video-right .art-pm-module__text .art-pm-module__intro {
	margin-inline: 0;
	max-width: none;
}

/* Video column order — left */
.art-pm-module--video.art-pm-module--style-video-left .art-pm-module__video { order: 0; }
.art-pm-module--video.art-pm-module--style-video-left .art-pm-module__text  { order: 1; }

/* Video column order — right */
.art-pm-module--video.art-pm-module--style-video-right .art-pm-module__video { order: 1; }
.art-pm-module--video.art-pm-module--style-video-right .art-pm-module__text  { order: 0; }

/* Responsive aspect-ratio wrapper for iframe embeds */
.art-pm-module__video-embed {
	aspect-ratio: 16 / 9;
	border-radius: var(--art-radius, 0);
	overflow: hidden;
	width: 100%;
}

.art-pm-module__video-embed iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

/* YouTube click-to-play facade - swapped for the real iframe on click */
.art-pm-module__video-embed--facade {
	background-color: #000;
	position: relative;
}

.art-pm-module__video-facade {
	cursor: pointer;
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}

.art-pm-module__video-facade-thumb {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-pm-module__video-facade-icon {
	left: 50%;
	line-height: 0;
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
}

.art-pm-module__video-facade-icon-bg {
	fill: #212121;
	fill-opacity: 0.8;
	transition: fill 0.15s ease, fill-opacity 0.15s ease;
}

.art-pm-module__video-facade:hover .art-pm-module__video-facade-icon-bg,
.art-pm-module__video-facade:focus-visible .art-pm-module__video-facade-icon-bg {
	fill: #f00;
	fill-opacity: 1;
}

.art-pm-module__video-facade:focus-visible {
	outline: 3px solid var( --art-color-accent, #1a4a6b );
	outline-offset: -3px;
}

/* Native video element */
.art-pm-module__video-player {
	border-radius: var(--art-radius, 0);
	display: block;
	height: auto;
	width: 100%;
}

/* ── Gravity Form module ───────────────────────────────────────────────────────── */

.art-pm-module--gravity-form .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-pm-content-max-width);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module__form {
	width: 100%;
}

/* Gravity Forms ships its own label colour instead of inheriting from the theme.
   Unscoped so it applies to every form on the site, not just ones embedded
   in a Page Modules layout - this stylesheet already loads on every page.
   !important is required: GF also writes a per-form <style> block scoped by
   #gform_wrapper_{id}[data-form-index]/[data-parent-form], which carries an
   ID and always outranks any number of plain classes on our side. */
.gform-theme--framework,
.gform-theme--api {
	--gf-ctrl-label-color-primary: var(--art-color-text, #111111) !important;
	--gf-ctrl-label-color-secondary: var(--art-color-text, #111111) !important;
	--gf-ctrl-label-color-tertiary: var(--art-color-text, #111111) !important;
	--gf-ctrl-label-color-quaternary: var(--art-color-text, #111111) !important;
	--gf-ctrl-accent-color: var(--art-color-accent, #0073aa) !important;
	--gf-ctrl-choice-check-color: var(--art-color-accent, #0073aa) !important;
}

/* Submit / page-nav buttons take the site's own button colours and shape */
.gform-theme--framework,
.gform-theme--api {
	--gf-ctrl-btn-radius: var(--art-radius, 0) !important;
	--gf-ctrl-btn-bg-color-primary: var(--color-btn-primary-bg, #1a1a2e) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--color-btn-primary-bg-hover, #16213e) !important;
	--gf-ctrl-btn-border-color-primary: var(--color-btn-primary-border, #1a1a2e) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--color-btn-primary-border-hover, #16213e) !important;
	--gf-ctrl-btn-color-primary: var(--color-btn-primary-text, #ffffff) !important;
	--gf-ctrl-btn-color-hover-primary: var(--color-btn-primary-text-hover, #ffffff) !important;
	--gf-ctrl-btn-bg-color-secondary: var(--color-btn-secondary-bg, #666666) !important;
	--gf-ctrl-btn-bg-color-hover-secondary: var(--color-btn-secondary-bg-hover, #1a1a2e) !important;
	--gf-ctrl-btn-border-color-secondary: var(--color-btn-secondary-border, #666666) !important;
	--gf-ctrl-btn-border-color-hover-secondary: var(--color-btn-secondary-border-hover, #1a1a2e) !important;
	--gf-ctrl-btn-color-secondary: var(--color-btn-secondary-text, #ffffff) !important;
	--gf-ctrl-btn-color-hover-secondary: var(--color-btn-secondary-text-hover, #ffffff) !important;
}

/* List field row marker has no colour variable of its own, needs a direct override */
.gfield_list_group_item::before {
	color: var(--art-color-text, #111111);
}

/* Field chrome (input/select/textarea/checkbox border + corner radius) for
   the dedicated Gravity Form module specifically - other embed points (CTA
   forms, the PropertyHive enquiry modal) already have their own bespoke
   treatment, so this stays scoped here instead of joining the global colour
   overrides above. !important still required to beat GF's per-form
   ID-scoped <style> block. */
.art-pm-module--gravity-form .gform-theme--framework,
.art-pm-module--gravity-form .gform-theme--api {
	--gf-radius: var(--art-radius, 3px) !important;
	--gf-ctrl-border-color: var(--art-color-border, #686e77) !important;
}

/* Card background behind the form, contrasting with whichever section
   Background Colour is set - same idea as the PropertyHive enquiry modal's
   dark card, but following this module's own bg variant instead of a fixed
   colour. GF's own label/text colour is always the site's dark text colour
   (see the colour overrides above), so primary/secondary (dark) sections
   need a light card too, not just alternate. */
.art-pm-module--gravity-form.art-pm-module--bg-white .art-pm-module__form,
.art-pm-module--gravity-form.art-pm-module--bg-primary .art-pm-module__form,
.art-pm-module--gravity-form.art-pm-module--bg-secondary .art-pm-module__form {
	background-color: var(--art-color-alternate, #f5f5f5);
}

.art-pm-module--gravity-form.art-pm-module--bg-alternate .art-pm-module__form {
	background-color: var(--art-color-bg, #ffffff);
}

.art-pm-module--gravity-form .art-pm-module__form {
	border-radius: var(--art-radius, 0);
	padding: 2rem;
}

@media (max-width: 767px) {
	.art-pm-module--gravity-form .art-pm-module__form {
		padding: 1.5rem;
	}
}

/* Form over Background Image layout: the image and its colour tint fill the
   section behind everything; the title/intro sit over it in light text and
   the form stays on its own card. Form Position left/right puts the form in
   one column and the text in the other; centre stacks them. */

.art-pm-module--gravity-form.art-pm-module--layout-background {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.art-pm-module--layout-background .art-pm-module__bg {
	inset: 0;
	position: absolute;
	z-index: -1;
}

.art-pm-module--layout-background .art-pm-module__bg-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-pm-module--layout-background .art-pm-module__bg-overlay {
	inset: 0;
	position: absolute;
}

.art-pm-module--gravity-form.art-pm-module--layout-background .art-pm-module__inner {
	align-items: center;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

.art-pm-module--layout-background .art-pm-module__header {
	--art-color-eyebrow: #ffffff;
	--art-color-muted: #ffffff;
	--art-color-text: #ffffff;
	--art-color-title: #ffffff;
	--color-eyebrow: #ffffff;
	--color-muted: #ffffff;
	--color-text: #ffffff;
	--color-title: #ffffff;
	color: #ffffff;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.art-pm-module--layout-background.art-pm-module--form-left .art-pm-module__inner,
	.art-pm-module--layout-background.art-pm-module--form-right .art-pm-module__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.art-pm-module--layout-background.art-pm-module--form-left .art-pm-module__form {
		grid-column: 1;
		grid-row: 1;
	}

	.art-pm-module--layout-background.art-pm-module--form-left .art-pm-module__text {
		grid-column: 2;
		grid-row: 1;
	}

	.art-pm-module--layout-background.art-pm-module--form-centre .art-pm-module__inner {
		max-width: 720px;
	}

	.art-pm-module--layout-background.art-pm-module--form-centre .art-pm-module__text {
		text-align: center;
	}
}

/* Content/Image & Text embed-mode CTA form: submit button follows the CTA's
   own Button Style pick (primary/secondary/link) instead of always using
   the site-wide default above. 'primary' needs no rule here, it already
   matches. GF's own "secondary" role variables are its Previous/page-nav
   button, unrelated to our style picker, so both our secondary and link
   picks remap the "primary" role variables - the only role a single-page
   embedded form's submit button actually uses. !important is required to
   beat GF's per-form ID-scoped <style> block (see above). */
.art-pm-module__cta-form--btn-secondary .gform-theme--framework,
.art-pm-module__cta-form--btn-secondary .gform-theme--api {
	--gf-ctrl-btn-bg-color-primary: var(--color-btn-secondary-bg, #666666) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--color-btn-secondary-bg-hover, #1a1a2e) !important;
	--gf-ctrl-btn-border-color-primary: var(--color-btn-secondary-border, #666666) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--color-btn-secondary-border-hover, #1a1a2e) !important;
	--gf-ctrl-btn-color-primary: var(--color-btn-secondary-text, #ffffff) !important;
	--gf-ctrl-btn-color-hover-primary: var(--color-btn-secondary-text-hover, #ffffff) !important;
}

.art-pm-module__cta-form--btn-link .gform-theme--framework,
.art-pm-module__cta-form--btn-link .gform-theme--api {
	--gf-ctrl-btn-bg-color-primary: transparent !important;
	--gf-ctrl-btn-bg-color-hover-primary: transparent !important;
	--gf-ctrl-btn-border-color-primary: transparent !important;
	--gf-ctrl-btn-border-color-hover-primary: transparent !important;
	--gf-ctrl-btn-color-primary: var(--color-btn-primary-bg, #1a1a2e) !important;
	--gf-ctrl-btn-color-hover-primary: var(--color-btn-primary-bg-hover, #16213e) !important;
	--gf-ctrl-btn-text-decoration: underline !important;
}

.art-pm-module__cta-form--btn-outline .gform-theme--framework,
.art-pm-module__cta-form--btn-outline .gform-theme--api {
	--gf-ctrl-btn-bg-color-primary: transparent !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--color-btn-outline-bg-hover, #1a1a2e) !important;
	--gf-ctrl-btn-border-color-primary: var(--color-btn-outline-border, #1a1a2e) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--color-btn-outline-border-hover, #1a1a2e) !important;
	--gf-ctrl-btn-color-primary: var(--color-btn-outline-text, #1a1a2e) !important;
	--gf-ctrl-btn-color-hover-primary: var(--color-btn-outline-text-hover, #ffffff) !important;
}

/* ── Accordion module ─────────────────────────────────────────────────────────── */

.art-pm-module--accordion .art-pm-module__inner {
	display: block;
	margin-inline: auto;
	max-width: var(--art-max-width, 860px);
	padding-left: 15px;
	padding-right: 15px;
}

/* Two-columns layout — stacks on mobile, side-by-side from 768 px */
@media (min-width: 768px) {
	.art-pm-module--accordion.art-pm-module--style-two-columns .art-pm-module__accordion-columns {
		align-items: start;
		display: grid;
		gap: 0 2rem;
		grid-template-columns: 1fr 1fr;
	}
}

.art-pm-module__accordion-item {
	border-bottom: 1px solid var(--art-color-accent, #0073aa);
	margin-inline: auto;
	max-width: var(--art-pm-content-max-width);
}

.art-pm-module__accordion-trigger {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--art-radius, 0);
	color: inherit;
	cursor: pointer;
	display: flex;
	font-size: var(--art-text-lg, 1.125rem);
	gap: 1rem;
	justify-content: space-between;
	margin-inline: -1rem;
	padding: 1rem;
	text-align: left;
	transition: background-color 0.2s ease;
	width: calc(100% + 2rem);
}

/* Grey fill only on hover/focus - the trigger itself stays transparent at
   rest (the negative margin/matching padding above keeps the hover fill's
   extra width from shifting the resting-state text position). */
.art-pm-module__accordion-trigger:hover,
.art-pm-module__accordion-trigger:focus-visible {
	background-color: var(--art-color-alternate, #f3f4f6);
}

.art-pm-module__accordion-trigger::after {
	border-right: 2px solid var(--art-color-accent, #0073aa);
	border-top: 2px solid var(--art-color-accent, #0073aa);
	content: '';
	display: inline-block;
	flex-shrink: 0;
	height: 0.45em;
	transform: rotate(135deg);
	transition: transform 0.3s ease;
	width: 0.45em;
}

.art-pm-module__accordion-item.is-open .art-pm-module__accordion-trigger::after {
	transform: rotate(-45deg);
}

.art-pm-module__accordion-trigger:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

.art-pm-module__accordion-title {
	display: block;
}

.art-pm-module__accordion-panel {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.3s ease;
}

.art-pm-module__accordion-item.is-open .art-pm-module__accordion-panel {
	grid-template-rows: 1fr;
}

.art-pm-module__accordion-content {
	min-height: 0;
	overflow: hidden;
}

.art-pm-module__accordion-content > *:first-child {
	margin-top: 0;
}

.art-pm-module__accordion-content > *:last-child {
	margin-bottom: 0;
	padding-bottom: 1rem;
}

.art-pm-module__media {
	margin-bottom: 2rem;
}

.art-pm-module__media-img {
	display: block;
	height: auto;
	width: 100%;
}

@media (min-width: 1024px) {
	.art-pm-module--accordion.art-pm-module--style-image-left .art-pm-module__inner,
	.art-pm-module--accordion.art-pm-module--style-image-right .art-pm-module__inner {
		align-items: flex-start;
		display: flex;
		gap: 2rem;
	}

	.art-pm-module--accordion.art-pm-module--style-image-left .art-pm-module__media {
		flex: 0 0 calc(40% - 2.4rem);
		margin-bottom: 0;
		order: 0;
	}

	.art-pm-module--accordion.art-pm-module--style-image-left .art-pm-module__accordion {
		flex: 1 1 calc(60% - 2.4rem);
		order: 1;
	}

	.art-pm-module--accordion.art-pm-module--style-image-right .art-pm-module__media {
		flex: 0 0 calc(40% - 2.4rem);
		margin-bottom: 0;
		order: 1;
	}

	.art-pm-module--accordion.art-pm-module--style-image-right .art-pm-module__accordion {
		flex: 1 1 calc(60% - 2.4rem);
		order: 0;
	}

	.art-pm-module--accordion.art-pm-module--style-inline-left .art-pm-module__inner,
	.art-pm-module--accordion.art-pm-module--style-inline-right .art-pm-module__inner {
		align-items: flex-start;
		display: flex;
		gap: 2rem;
	}

	.art-pm-module--accordion.art-pm-module--style-inline-left .art-pm-module__media {
		flex: 0 0 calc(40% - 2.4rem);
		margin-bottom: 0;
		order: 0;
	}

	.art-pm-module--accordion.art-pm-module--style-inline-left .art-pm-module__content {
		flex: 1 1 calc(60% - 2.4rem);
		order: 1;
	}

	.art-pm-module--accordion.art-pm-module--style-inline-right .art-pm-module__media {
		flex: 0 0 calc(40% - 2.4rem);
		margin-bottom: 0;
		order: 1;
	}

	.art-pm-module--accordion.art-pm-module--style-inline-right .art-pm-module__content {
		flex: 1 1 calc(60% - 2.4rem);
		order: 0;
	}

	/* Column ratio — overrides the default image 40% / content 60% split
	   above; the default itself has no modifier class (see the per-style
	   media/accordion/content rules above). The calc() subtraction matches
	   the Image & Text module's ratio formula so columns line up when both
	   modules sit on the same page at the same container width. */
	.art-pm-module--accordion.art-pm-module--ratio-even .art-pm-module__media {
		flex: 0 0 calc(50% - 2.4rem);
	}

	.art-pm-module--accordion.art-pm-module--ratio-even .art-pm-module__accordion,
	.art-pm-module--accordion.art-pm-module--ratio-even .art-pm-module__content {
		flex: 1 1 calc(50% - 2.4rem);
	}

	.art-pm-module--accordion.art-pm-module--ratio-image-larger .art-pm-module__media {
		flex: 0 0 calc(60% - 2.4rem);
	}

	.art-pm-module--accordion.art-pm-module--ratio-image-larger .art-pm-module__accordion,
	.art-pm-module--accordion.art-pm-module--ratio-image-larger .art-pm-module__content {
		flex: 1 1 calc(40% - 2.4rem);
	}
}

.art-pm-module--accordion .art-pm-module__content .art-pm-module__header {
	margin-inline: 0;
	max-width: none;
	text-align: left;
}

.art-pm-module--accordion .art-pm-module__content .art-pm-module__intro {
	margin-inline: 0;
	max-width: none;
}

/* Caps the inline-left/inline-right content column so its lines don't
   over-stretch on wide screens, and pulls it flush with the column's
   right edge (the image's left/right position doesn't affect this — the
   content column itself always hugs its own right edge). */
.art-pm-module--accordion .art-pm-module__content {
	margin-left: auto;
	margin-right: 0;
	max-width: 900px;
}

/* Image-adjacent accordion widgets fill their flex column edge-to-edge
   instead of the centred, capped-width items used by standard/two-columns
   styles, so items line up with the title/intro above/beside them. */
.art-pm-module--accordion.art-pm-module--has-image .art-pm-module__accordion-item {
	margin-inline: 0;
	max-width: none;
}

/* ── Blog module ─────────────────────────────────────────────────────────────── */

.art-pm-module--blog .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--blog.art-pm-module--style-carousel-fullwidth .art-pm-module__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module__blog-cards {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.art-pm-module__blog-cards.swiper {
	display: block;
}

.art-pm-module__blog-card {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.art-pm-module__blog-card[hidden] {
	display: none;
}

.art-pm-module__blog-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-pm-module__blog-image-link {
	aspect-ratio: 4 / 3;
	background-color: var(--art-color-surface, #e2e2e2);
	display: block;
	overflow: hidden;
}

.art-pm-module__blog-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1rem;
}

.art-pm-module__blog-title {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}

.art-pm-module__blog-title a {
	color: inherit;
	text-decoration: none;
}

.art-pm-module__blog-title a:hover,
.art-pm-module__blog-title a:focus {
	text-decoration: underline;
}

.art-pm-module__blog-excerpt {
	margin: 0 0 1rem;
}

.art-pm-module__blog-read-more {
	margin: auto 0 0;
}

.art-pm-module__blog-read-more a {
}

.art-pm-module__blog-cards--carousel .swiper-wrapper {
	align-items: stretch;
	box-sizing: border-box;
}

.art-pm-module__blog-cards--carousel .art-pm-module__blog-card.swiper-slide {
	display: flex;
	height: auto;
}

.art-pm-module {
	--swiper-navigation-color: var(--art-color-text, currentColor);
	--swiper-pagination-color: var(--art-color-text, currentColor);
}

.art-pm-carousel__pagination.swiper-pagination {
	/* Before dynamicBullets, this box was always full-width, so its own
	   text-align:center (from Swiper's base .swiper-pagination CSS) centered
	   the dots without the BOX itself ever needing centering. dynamicBullets
	   has Swiper set an explicit, much narrower inline width on this same
	   element to fit just the visible dot window, exposing that the box was
	   never actually centered as a box - margin-inline:auto keeps it centered
	   regardless of which width Swiper ends up giving it.

	   Swiper's own dynamicBullets CSS centers that narrower box with the
	   classic "center an unknown-width element" pairing - left:50% plus an
	   inline transform:translateX(-halfOwnWidth) - which assumes
	   position:absolute (Swiper's own default). This rule forces
	   position:static instead (so pagination flows as an in-page row below
	   the carousel rather than overlaying it - see the comment below), which
	   makes left:50% a no-op, but the inline transform still applies on its
	   own and double-shifts the box left on top of the margin:auto centering
	   above. transform:none (with !important, since Swiper's is inline and
	   would otherwise always win) cancels just that half of the pairing we
	   don't want, leaving margin:auto as the only centering in effect. */
	margin-inline: auto;
	position: static;
	transform: none !important;
	width: auto;
	margin-top: 20px;
}

.art-pm-carousel__pagination .swiper-pagination-bullet {
	background-color: currentColor;
	opacity: 0.4;
}

.art-pm-carousel__pagination .swiper-pagination-bullet-active {
	opacity: 1;
}

/* Swiper's own vertical centering for these buttons relies on
   margin-top: calc(0px - var(--swiper-navigation-size)/2) exactly cancelling
   out top:50%, which only holds if the button's actual rendered height
   still matches --swiper-navigation-size - in practice this drifted enough
   to show the button's top edge sitting at the true center instead of the
   button itself being centered on it. transform is height-agnostic (it's a
   fraction of the element's own box, not a value borrowed from a variable
   elsewhere), so it centers correctly regardless of what's setting the
   button's actual size. */
.art-pm-module .swiper-button-prev,
.art-pm-module .swiper-button-next {
	margin-top: 0;
	transform: translateY(-50%);
}

/* Swiper's own default pagination is position:absolute (an overlay - see
   swiper-bundle.min.css), so top:50% nav buttons naturally center on just
   the carousel's own height with no extra adjustment needed. This plugin
   renders pagination as a static, in-flow row below the carousel instead
   (.art-pm-carousel__pagination.swiper-pagination above), so .swiper's
   total height includes that row too, skewing plain top:50% centering
   downward past the carousel's actual vertical middle - confirmed live via
   DevTools showing the button's containing block extending well past the
   image row into the dots.
   Grid-placing .swiper-wrapper and the nav buttons into an explicit shared
   row, with pagination in its own row below, fixes this without JS: an
   absolutely-positioned grid item that has explicit grid-row/grid-column
   placement uses that grid area as its containing block rather than the
   grid container as a whole (a real, spec-defined CSS Grid behaviour), so
   top:50% resolves against just that row's height again - matching
   Swiper's own unmodified-pagination behaviour. Scoped with :has() to any
   .swiper carrying this plugin's pagination markup, rather than
   enumerating every module's own swiper modifier class (they each use a
   different one), so it automatically covers every current and future
   carousel module built on this same shared pattern. */
.swiper:has( > .art-pm-carousel__pagination ) {
	display: grid;
	/* Never given an explicit width, this single implicit column defaulted
	   to an auto track - which content-sizes rather than reliably
	   stretching to the container's own full width, so both the pagination
	   row's width:100% below and the nav buttons' containing block ended up
	   narrower than the visible carousel instead of spanning it. Naming the
	   column 100% removes that ambiguity outright. */
	grid-template-columns: 100%;
}

.swiper:has( > .art-pm-carousel__pagination ) > .swiper-wrapper,
.swiper:has( > .art-pm-carousel__pagination ) > .swiper-button-prev,
.swiper:has( > .art-pm-carousel__pagination ) > .swiper-button-next {
	grid-column: 1;
	/* grid-row: 1 alone is shorthand for grid-row-start:1; grid-row-end:auto -
	   with the end left auto, an absolutely-positioned item's containing
	   block extends all the way to the grid container's own far edge, not
	   just to the end of row 1, so the pagination row below kept affecting
	   the buttons' centering regardless. The explicit end line (1 / 2) is
	   what actually bounds their containing block to row 1 only. */
	grid-row: 1 / 2;
}

.swiper:has( > .art-pm-carousel__pagination ) > .art-pm-carousel__pagination {
	grid-column: 1;
	grid-row: 2 / 3;
	/* .art-pm-carousel__pagination.swiper-pagination's own width:auto (further
	   up this file) filled the row naturally as a normal block-level element
	   pre-grid, but grid items don't reliably stretch to their column's full
	   width just from width:auto - it shrank to the dots' own content width
	   instead, throwing the centering off. Forcing it back to 100% here (this
	   selector's specificity wins over that earlier rule regardless of source
	   order) restores the full-width box that .swiper-pagination's own
	   text-align:center centers the dots within. */
	width: 100%;
}

@media (max-width: 1023px) {
	.art-pm-module__blog-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.art-pm-module__blog-cards {
		grid-template-columns: 1fr;
	}
}

.art-pm-module__blog-filter {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.art-pm-module__blog-filter-label {
	font-weight: 600;
}

.art-pm-module__blog-filter-select {
	background: var(--art-color-bg, #fff);
	border: 1px solid var(--art-color-border, #ccc);
	border-radius: var(--art-radius, 0);
	color: var(--art-color-text, #111);
	padding: 0.5rem 0.9rem;
}

.art-pm-module__blog-controls {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.art-pm-module__blog-controls .art-pm-module__blog-filter {
	margin-bottom: 0;
}

.art-pm-module__blog-controls--filters {
	align-items: center;
	gap: 1rem 2rem;
	justify-content: flex-start;
}

.art-pm-module__blog-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.art-pm-module__blog-tab {
	background: var(--art-color-bg, #fff);
	border: 1px solid var(--art-color-border, #ccc);
	border-radius: 9999px;
	color: var(--art-color-text, #111);
	cursor: pointer;
	font-size: var(--art-text-sm, 0.875rem);
	padding: 0.5rem 1rem;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.art-pm-module__blog-tab:hover {
	border-color: var(--art-color-accent, #0073aa);
}

.art-pm-module__blog-tab.is-active {
	background: var(--art-color-accent, #0073aa);
	border-color: var(--art-color-accent, #0073aa);
	color: var(--art-color-on-accent, #fff);
}

.art-pm-module__blog-tab:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

.art-pm-module__blog-search {
	display: flex;
	flex: 0 1 320px;
	position: relative;
}

.art-pm-module__blog-search-input {
	border: 1px solid var(--art-color-border, #ccc);
	border-radius: var(--art-radius, 0);
	padding: 0.6rem 2.75rem 0.6rem 0.9rem;
	width: 100%;
}

.art-pm-module__blog-search-submit {
	align-items: center;
	background: var(--art-color-accent, #0073aa);
	border: 0;
	border-radius: var(--art-radius, 0);
	bottom: 0;
	color: var(--art-color-on-accent, #fff);
	display: flex;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 0;
	width: 2.5rem;
}

.art-pm-module__blog-read-time {
	color: var(--art-color-accent, #0073aa);
	font-size: var(--art-text-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.art-pm-module__blog-load-more-wrap {
	margin-top: 2rem;
	text-align: center;
}

.art-pm-module__blog-load-more {
	background: transparent;
	border: 1px solid var(--art-color-accent, #0073aa);
	border-radius: var(--art-radius, 0);
	color: var(--art-color-accent, #0073aa);
	cursor: pointer;
	padding: 0.75rem 2rem;
}

.art-pm-module__blog-load-more:hover {
	background: var(--art-color-accent, #0073aa);
	color: #fff;
}

/* ── Developments module ─────────────────────────────────────────────────────── */

.art-pm-module--developments .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--developments.art-pm-module--style-carousel-fullwidth .art-pm-module__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module__developments-cards {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.art-pm-module__developments-cards.swiper {
	display: block;
}

.art-pm-module__developments-card {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.art-pm-module__developments-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-pm-module__developments-image-link {
	aspect-ratio: 4 / 3;
	background-color: var(--art-color-surface, #e2e2e2);
	display: block;
	overflow: hidden;
}

.art-pm-module__developments-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1rem;
}

.art-pm-module__developments-location {
	color: var(--art-color-text-muted, #6b6b6b);
	font-size: var(--art-text-sm, 0.875rem);
	letter-spacing: 0.05em;
	margin: 0 0 0.25rem;
	text-transform: uppercase;
}

.art-pm-module__developments-title {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}

.art-pm-module__developments-title a {
	color: inherit;
	text-decoration: none;
}

.art-pm-module__developments-title a:hover,
.art-pm-module__developments-title a:focus {
	text-decoration: underline;
}

.art-pm-module__developments-excerpt {
	margin: 0 0 1rem;
}

.art-pm-module__developments-read-more {
	margin: auto 0 0;
}

.art-pm-module__developments-cards--carousel .swiper-wrapper {
	align-items: stretch;
	box-sizing: border-box;
}

.art-pm-module__developments-cards--carousel .art-pm-module__developments-card.swiper-slide {
	display: flex;
	height: auto;
}

@media (max-width: 1023px) {
	.art-pm-module__developments-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.art-pm-module__developments-cards {
		grid-template-columns: 1fr;
	}
}

/* ── Case Studies module ──────────────────────────────────────────────────────── */
/* Cards, tabs and grid are styled by Art Division Case Studies itself. */

.art-pm-module--case-studies .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--case-studies .art-cs-listing {
	margin-block-end: 0;
}

/* ── Jobs module ──────────────────────────────────────────────────────────────── */

.art-pm-module--jobs .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--jobs.art-pm-module--style-carousel-fullwidth .art-pm-module__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module__jobs-cards {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.art-pm-module__jobs-cards.swiper {
	display: block;
}

.art-pm-module__jobs-card {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.art-pm-module__jobs-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-pm-module__jobs-image-link {
	aspect-ratio: 4 / 3;
	background-color: var(--art-color-surface, #e2e2e2);
	display: block;
	overflow: hidden;
}

.art-pm-module__jobs-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1rem;
}

.art-pm-module__jobs-title {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}

.art-pm-module__jobs-title a {
	color: inherit;
	text-decoration: none;
}

.art-pm-module__jobs-title a:hover,
.art-pm-module__jobs-title a:focus {
	text-decoration: underline;
}

.art-pm-module__jobs-excerpt {
	margin: 0 0 1rem;
}

.art-pm-module__jobs-read-more {
	margin: auto 0 0;
}

.art-pm-module__jobs-cards--carousel .swiper-wrapper {
	align-items: stretch;
	box-sizing: border-box;
}

.art-pm-module__jobs-cards--carousel .art-pm-module__jobs-card.swiper-slide {
	display: flex;
	height: auto;
}

@media (max-width: 1023px) {
	.art-pm-module__jobs-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.art-pm-module__jobs-cards {
		grid-template-columns: 1fr;
	}
}

/* ── Gallery module ──────────────────────────────────────────────────────────── */

.art-pm-module--gallery .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--gallery.art-pm-module--fullwidth .art-pm-module__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module__gallery-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.art-pm-module__gallery-grid.swiper {
	display: block;
}

.art-pm-module__gallery-card {
	overflow: hidden;
}

.art-pm-module__gallery-image {
	display: block;
	height: auto;
	width: 100%;
}

.art-pm-module__gallery-lightbox-trigger {
	background: transparent;
	border: 0;
	cursor: pointer;
	display: block;
	padding: 0;
	width: 100%;
}

.art-pm-module__gallery-lightbox-trigger:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

.art-pm-module__gallery-grid--carousel .swiper-wrapper {
	align-items: stretch;
	box-sizing: border-box;
}

.art-pm-module__gallery-grid--carousel .art-pm-module__gallery-card.swiper-slide {
	display: flex;
	height: auto;
}

@media (max-width: 1023px) {
	.art-pm-module__gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.art-pm-module__gallery-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Areas We Cover module ───────────────────────────────────────────────────── */

.art-pm-module--areas-we-cover .art-pm-module__areas-we-cover-grid:not(.art-pm-module__areas-we-cover-grid--carousel) {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--areas-we-cover .art-pm-module__areas-we-cover-grid--carousel {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
}

.art-pm-module--areas-we-cover .art-pm-module__areas-we-cover-grid--carousel .swiper-slide {
	height: auto;
}

.art-pm-module--areas-we-cover.art-pm-module--fullwidth .art-pm-module__areas-we-cover-grid {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module__areas-we-cover-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.art-pm-module__areas-we-cover-grid.swiper {
	display: block;
}

.art-pm-module__areas-we-cover-card {
	aspect-ratio: 4 / 3;
	background-color: var(--art-color-bg-subtle, #f5f5f5);
	border-radius: var(--art-radius, 0);
	color: var(--art-color-secondary, inherit);
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.art-pm-module__areas-we-cover-card-image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform 0.3s ease;
	width: 100%;
}

.art-pm-module__areas-we-cover-card:hover .art-pm-module__areas-we-cover-card-image,
.art-pm-module__areas-we-cover-card:focus-visible .art-pm-module__areas-we-cover-card-image {
	transform: scale(1.05);
}

.art-pm-module__areas-we-cover-card-label {
	background: rgba(0, 0, 0, 0.55);
	bottom: 0;
	color: #ffffff;
	font-size: 0.875rem;
	left: 0;
	letter-spacing: 0.05em;
	padding: 0.6rem 1rem;
	position: absolute;
	text-transform: uppercase;
}

.art-pm-module__areas-we-cover-card:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

@media (max-width: 1023px) {
	.art-pm-module__areas-we-cover-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.art-pm-module__areas-we-cover-grid {
		grid-template-columns: 1fr;
	}

	.art-pm-module--areas-we-cover .art-pm-module__areas-we-cover-grid--carousel {
		padding-left: 15px;
		padding-right: 15px;
	}

	.art-pm-module--areas-we-cover .swiper-button-prev,
	.art-pm-module--areas-we-cover .swiper-button-next {
		display: none;
	}

	.art-pm-module--areas-we-cover.art-pm-module--fullwidth .art-pm-module__areas-we-cover-grid {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ── Lightbox ────────────────────────────────────────────────────────────────── */

.art-pm-lightbox {
	inset: 0;
	position: fixed;
	z-index: 1000;
}

.art-pm-lightbox__backdrop {
	background-color: rgba(0, 0, 0, 0.85);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.1s ease;
}

.art-pm-lightbox.is-open .art-pm-lightbox__backdrop {
	opacity: 1;
	transition: opacity 0.22s ease;
}

.art-pm-lightbox__dialog {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	padding: 2rem;
	position: relative;
}

.art-pm-lightbox__close {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius-round, 0);
	color: inherit;
	cursor: pointer;
	font-size: 1.5rem;
	height: 2.75rem;
	line-height: 1;
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 2.75rem;
}

.art-pm-lightbox__close:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

.art-pm-lightbox__nav {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius-round, 0);
	color: inherit;
	cursor: pointer;
	font-size: 1.75rem;
	height: 2.75rem;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	z-index: 1;
}

.art-pm-lightbox__nav--prev {
	left: 1rem;
}

.art-pm-lightbox__nav--next {
	right: 1rem;
}

.art-pm-lightbox__nav:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

.art-pm-lightbox__counter {
	bottom: 1rem;
	color: #ffffff;
	font-size: 0.875rem;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}

.art-pm-lightbox__image {
	display: block;
	height: auto;
	max-height: min(85vh, 60rem);
	max-width: min(92vw, 80rem);
	opacity: 0;
	/* Closing state's duration - deliberately quicker than opening's below,
	   matching the shared dialog.art-modal pattern this mirrors. */
	transform: scale(0.96);
	transition: opacity 0.1s ease, transform 0.1s ease;
	width: auto;
}

.art-pm-lightbox.is-open .art-pm-lightbox__image {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
	.art-pm-lightbox__backdrop,
	.art-pm-lightbox__image {
		transition: none;
	}
}

/* ── Hero module ─────────────────────────────────────────────────────────────── */

/*
 * .art-pm-hero
 *
 * The section establishes a stacking context via position:relative so all
 * absolute background and overlay children stay within its bounds.
 * min-height / height / max-height are applied as inline styles by the
 * template when the editor has configured them; the CSS default provides
 * a basic minimum so an unstyled hero is still visible.
 *
 * Text colour custom properties (set inline on the section when filled):
 *   --art-pm-hero-heading-color     — heading text colour (inherits if unset)
 *   --art-pm-hero-subheading-color  — subheading text colour (inherits if unset)
 *
 * Text width custom properties (always set inline on the section):
 *   --art-pm-hero-heading-max-width     — heading max-width (default 48rem)
 *   --art-pm-hero-subheading-max-width  — subheading max-width (default 48rem)
 *
 * --art-pm-hero-content-max-width — full-width layout's content column cap
 * (default 55rem, themeable). Kept separate from the sitewide
 * --art-pm-content-max-width (48rem) so the heading/subheading max-width
 * fields aren't clipped by a shared prose-width variable.
 */

.art-pm-hero {
	/* Placeholder fill so a hero with bg_type: image doesn't show the page's
	   white background (harsh flash, especially under a transparent header)
	   while the photo is still downloading - background-color set inline in
	   render.php (bg_color_style) paints over this once it applies, or the
	   image itself covers it once loaded. Deliberately a fixed neutral
	   rather than var(--art-color-text, ...): text colour inverts to a
	   light value on dark-themed sites, which turned this "avoid a white
	   flash" placeholder into a white fill.
	   Only meaningful for full-bleed/side-fade, where the image eventually
	   covers the whole section and this fill is truly transient - see the
	   .art-pm-hero--bg-inset override directly below for why Inset Image
	   can't use the same fill. */
	background-color: #1a1a1a;
	display: flex;
	flex-direction: column;
	min-height: var(--art-pm-hero-min-height, 300px);
	overflow: hidden;
	position: relative;
}

/* Vertical position of the content column within the section - only visible
   once the section is taller than its content (Height set to 100vh, a tall
   Min Height, etc). .art-pm-hero__bg/.art-pm-hero__overlay are position:
   absolute (out of flow) and .art-pm-hero__down-arrow is position:absolute
   too, so .art-pm-hero__inner (split layouts) or .art-pm-hero__content
   (everything else) is the only flex item justify-content is ever
   positioning here. */
.art-pm-hero--valign-top {
	justify-content: flex-start;
}

.art-pm-hero--valign-middle {
	justify-content: center;
}

.art-pm-hero--valign-bottom {
	justify-content: flex-end;
}

/*
 * Split layouts (split-50-50/split-60-40) need a second rule here, not just
 * the section-level one above. .art-pm-hero__inner carries an explicit
 * height/min-height matching the section's own (see its own rule further
 * down), so it always fills the full section height - the section-level
 * justify-content above has no free space left to distribute .art-pm-hero__
 * inner into. Instead .art-pm-hero__content (a flex item inside .art-pm-hero
 * __inner, which stretches it to that same full height by default) is
 * itself a flex column (see its own rule), so justify-content here
 * positions its own children (heading/subheading/ctas/etc) within that
 * already-full-height box. Harmless on non-split layouts, where .art-pm-
 * hero__content's box is only ever as tall as its own content (nothing to
 * redistribute), which is what the section-level rule above is for.
 */
.art-pm-hero--valign-top .art-pm-hero__content {
	justify-content: flex-start;
}

.art-pm-hero--valign-middle .art-pm-hero__content {
	justify-content: center;
}

.art-pm-hero--valign-bottom .art-pm-hero__content {
	justify-content: flex-end;
}

/* Inset Image's side margins are never covered by the media (that's the
   point of the style) - so unlike full-bleed/side-fade, the placeholder
   fill above isn't a brief loading state there, it's the permanent look
   of the margins whenever no Background Colour is set. A hardcoded
   neutral has no business being someone's permanent page background, so
   this is transparent instead, letting the page's real background (body
   colour, or whatever sits behind the Hero) show through honestly. */
.art-pm-hero--bg-inset {
	background-color: transparent;
}

/* Full-width layout: constrain text to readable prose width. */
.art-pm-hero--full-width .art-pm-hero__content {
	margin-inline: auto;
	max-width: var(--art-pm-hero-content-max-width, 55rem);
}

/*
 * Left/right-aligned content instead uses the sitewide container width (the
 * same var(--art-max-width) every other page module's .art-pm-module__inner
 * is capped to) rather than the narrower prose cap above. The prose cap is
 * auto-centred within the full section width, which for left/right-aligned
 * text reads as an arbitrary left/right margin rather than lining the text
 * up with the site container edge (e.g. the header logo). Widening to the
 * site container — still auto-centred the same way — puts the text's own
 * edge back in line with it.
 */
.art-pm-hero--full-width .art-pm-hero__content--left,
.art-pm-hero--full-width .art-pm-hero__content--right {
	max-width: var(--art-max-width, 75rem);
}

/* Contained layout: centre the content column and cap its width. */
.art-pm-hero--contained .art-pm-hero__content {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
}

/* ── Background layers ──────────────────────────────────────────────────────── */

.art-pm-hero__bg {
	inset: 0;
	overflow: hidden;
	position: absolute;
	z-index: 0;
}

/*
 * Colour fill, sitting behind the media layer. For a plain 'color' background
 * this is a solid fill (background-color set inline). For an inset media
 * background it's instead a hard-stop linear-gradient painted inline in
 * render.php — solid colour for Inset Frame Height%, then transparent — so
 * it never needs its own separate overlay element: it fades out on its own,
 * behind wherever the full-height media (see below) doesn't reach.
 */
.art-pm-hero__bg-color {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/*
 * Wraps the image/video/slider background layer. By default it fills the
 * bg layer exactly like the colour fill above. With the --inset modifier
 * (Background Style = Inset Image) it is instead constrained to the site
 * max width and centred horizontally, so the colour fill behind it shows
 * through as a frame either side. The media itself is never resized or
 * cropped differently, and always fills the full section height — where it
 * overlaps the colour gradient above, it simply paints over it (opaque), so
 * the media reads as continuing past wherever the colour fill fades out.
 */
.art-pm-hero__bg-media {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

/*
 * Constrains the inset media to the site's actual content width, centred.
 * Every other module's .art-pm-module__inner is max-width:var(--art-max-width)
 * PLUS 15px padding-left/right, so its true visible content edge sits 15px
 * inside the raw --art-max-width boundary on each side - subtracting 30px
 * here (15px x 2) lines this media's edge up with that same visible edge,
 * rather than the wider raw max-width value.
 * Previously subtracted 48px instead, to line the media's edge up with the
 * header nav icons' visible glyph edge (inset within their own larger
 * tap-target padding) - removed by request in favour of matching the site
 * container's visible edge instead.
 */
.art-pm-hero__bg-media--inset {
	margin-inline: auto;
	max-width: calc(var(--art-max-width, 75rem) - 30px);
}

/*
 * Responsive background image — <picture> wraps the <img>.
 * The picture element is positioned to fill the bg layer; the img
 * fills the picture with object-fit: cover.
 */
.art-pm-hero__bg-picture {
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

/* Background image — covers the full area, cropped from the centre. */
.art-pm-hero__bg-img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* Background video — same cover behaviour as the image layer. */
.art-pm-hero__bg-video {
	height: 100%;
	left: 0;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	width: 100%;
}

/* A Mobile Image replaces the video on phones - the still behind it shows instead. */
@media (max-width: 767px) {
	.art-pm-hero__bg-video--no-mobile {
		display: none;
	}
}

/* Background image slider — Swiper fills the bg layer. */
.art-pm-hero__bg-slider {
	height: 100%;
	inset: 0;
	position: absolute;
}

.art-pm-hero__bg-slider .swiper-wrapper,
.art-pm-hero__bg-slider .swiper-slide {
	height: 100%;
}

.art-pm-hero__bg-slider .swiper-slide {
	overflow: hidden;
	position: relative;
}

/*
 * Side-fade colour overlay — painted on top of the full-bleed media (unlike
 * .art-pm-hero__bg-color, which sits behind it), via the eased
 * linear-gradient built inline in render.php. Sits after the media in DOM
 * order within .art-pm-hero__bg, so it stacks above it without needing an
 * explicit z-index.
 */
.art-pm-hero__bg-fade {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

/* ── Overlay ────────────────────────────────────────────────────────────────── */

.art-pm-hero__overlay {
	background: #000;
	inset: 0;
	position: absolute;
	z-index: 1;
}

/* ── Content wrapper ────────────────────────────────────────────────────────── */

.art-pm-hero__content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 4rem 2rem;
	position: relative;
	width: 100%;
	z-index: 2;
}

/* Alignment modifiers. */
.art-pm-hero__content--left {
	align-items: flex-start;
	text-align: left;
}

.art-pm-hero__content--center {
	align-items: center;
	text-align: center;
}

.art-pm-hero__content--right {
	align-items: flex-end;
	text-align: right;
}

/* ── Pretitle, heading & subheading ─────────────────────────────────────────── */

.art-pm-hero__pretitle {
	color: var(--art-pm-hero-heading-color, inherit);
	font-size: var(--art-text-sm, 0.875rem);
	margin: 0;
	opacity: 0.85;
}

/*
 * Nested inside .art-pm-hero__heading (see render.php), the pretitle is a
 * <span> rather than the standalone <p> above, so it needs its own
 * display:block - a span is inline by default and would otherwise run
 * straight into the heading text on the same line.
 */
.art-pm-hero__heading > .art-pm-hero__pretitle {
	display: block;
}

.art-pm-hero__heading {
	color: var(--art-pm-hero-heading-color, inherit);
	font-size: var(--art-text-3xl, 3rem);
	margin: 0;
	max-width: var(--art-pm-hero-heading-max-width, 48rem);
}

.art-pm-hero__subheading {
	color: var(--art-pm-hero-subheading-color, inherit);
	font-size: var(--art-text-lg, 1.125rem);
	margin: 0;
	max-width: var(--art-pm-hero-subheading-max-width, 48rem);
}

/* ── CTA buttons ────────────────────────────────────────────────────────────── */

/* width: 100% is required, not cosmetic — .art-pm-hero__content is a column
   flex container whose alignment modifiers (--left/--center/--right, used
   for the heading/subheading text-align) set align-items to something other
   than the flex default of stretch, so without an explicit width this shrinks
   to its own content size and the grid's auto-fit below has no definite
   width to divide into columns, collapsing to one column per row. */
.art-pm-hero__ctas {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
}

/* Base CTA — meets WCAG 2.5.8 minimum 44 × 44 px touch target. Full width,
   stacked one per line, below 480px. */
.art-pm-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 100%;
	border-radius: var(--art-radius, 0);
	min-height: 44px;
	min-width: 44px;
	padding: 0.75rem 1.75rem;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* From 480px: switch the group to a grid so however many buttons there are
   (2, 3, 4...) share one column width — auto-fit collapses to a single row
   once the container is wide enough to hold them all, and wraps to equal-
   width rows otherwise, rather than flex's per-line growth which leaves a
   lone wrapped button stretched wider than its siblings. Columns size to
   max-content (not 1fr) so a low CTA count sits at its natural width instead
   of stretching to fill the row; justify-content then positions that row to
   match the heading/subheading alignment modifier below. */
@media (min-width: 480px) {
	.art-pm-hero__ctas {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
		justify-content: center;
	}

	.art-pm-hero__cta {
		flex: unset;
	}
}

/* content_rows: blocks in the same row side by side, wrapping on narrow
   screens, lined up with the content alignment like the buttons are. */
.art-pm-hero__row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	width: 100%;
}

.art-pm-hero__row > * {
	margin: 0;
}

.art-pm-hero__row > .art-pm-hero__ctas {
	width: auto;
}

.art-pm-hero__content--center .art-pm-hero__row {
	justify-content: center;
}

.art-pm-hero__content--right .art-pm-hero__row {
	justify-content: flex-end;
}

.art-pm-hero__content--left .art-pm-hero__ctas {
	justify-content: start;
}

.art-pm-hero__content--center .art-pm-hero__ctas {
	justify-content: center;
}

.art-pm-hero__content--right .art-pm-hero__ctas {
	justify-content: end;
}

.art-pm-hero__cta:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

/* A CTA set to Form + Embed renders a full Gravity Form, not a button, so it
   needs to span the whole row instead of being squeezed into one of
   .art-pm-hero__ctas's auto-fit button columns (see the flex/grid rules
   above). */
.art-pm-hero__ctas .art-pm-module__cta-form {
	flex: 1 1 100%;
	grid-column: 1 / -1;
	width: 100%;
}

/* Primary and secondary colours are handled by the shared art-btn--primary /
   art-btn--secondary classes defined in the Art Division AI theme. */

/* Outline — transparent with a coloured border. */
.art-pm-hero__cta--outline {
	background-color: transparent;
	border: 2px solid currentColor;
	color: var(--art-color-bg, #ffffff);
}

.art-pm-hero__cta--outline:hover,
.art-pm-hero__cta--outline:focus {
	background-color: var(--art-color-bg, #ffffff);
	color: var(--art-color-text, #111111);
}

/*
 * Wraps the compact [art_property_search] shortcode output (Property
 * Modules, homepage only). The translucent card look lives here rather than
 * in Property Modules' own CSS, so the compact style stays neutral for other
 * embedding contexts and this panel only applies when it's sitting over a
 * Hero background. width: 100% + max-width follows the same pattern as
 * .art-pm-hero__ctas above — needed because .art-pm-hero__content's
 * alignment modifiers set align-items to something other than stretch.
 * No margin-block-start here — .art-pm-hero__content's own gap already
 * spaces every content-column block evenly (see there).
 */
.art-pm-hero__search {
	background-color: var(--art-color-bg, #ffffff);
	border-radius: var(--art-radius, 0);
	max-width: 32rem;
	padding: 1rem;
	width: 100%;
}

/* The tabs style shows every configured field (location, price, beds,
   property type, etc.) in one row, not just department + keyword - the
   compact-sized max-width above clips it. */
.art-pm-hero__search--tabs {
	max-width: 48rem;
}

/* Minimal style is its own self-contained pill (background, border,
   radius already on .art-prop-search__bar) meant to float directly on the
   hero background, not sit inside a second white card wrapper - reset the
   base rule's card look entirely. */
.art-pm-hero__search--minimal {
	background-color: transparent;
	max-width: none;
	padding: 0;
	width: auto;
}

/* ── Down-arrow scroll indicator ────────────────────────────────────────────── */

/*
 * Shown by default only on the site's front page, or whenever Height is set
 * to 100vh (see $show_down_arrow in render.php) - a viewport-filling hero can
 * otherwise read as the entire page, so this points at the content below the
 * fold. A <button>, not a decorative div, since it's an interactive scroll
 * trigger - initHeroDownArrow() in art-division-page-modules.js binds the
 * click handler and respects prefers-reduced-motion.
 */
.art-pm-hero__down-arrow {
	align-items: center;
	animation: art-pm-hero-down-arrow-fade-in 2s ease-in-out forwards, art-pm-hero-down-arrow-pulse 1.5s ease-in-out infinite;
	background: none;
	border: 0;
	border-radius: var(--art-radius, 0);
	bottom: 60px;
	/* Deliberately a fixed white, not --art-pm-on-accent - this sits on the
	   Hero's own background (photo/overlay, or the dark placeholder fill
	   above), which has nothing to do with the site's Accent colour. It only
	   read correctly here before Theme 1.0.226 because --art-pm-on-accent
	   happened to always resolve to white (a dead fallback); now that it's
	   genuinely computed from Accent, a light Accent colour (e.g. Oakmans'
	   yellow) would turn this dark and hard to see against the Hero. Same
	   reasoning as the placeholder background-color fill above. */
	color: #ffffff;
	cursor: pointer;
	display: flex;
	height: 3rem;
	justify-content: center;
	left: 50%;
	opacity: 0;
	padding: 0;
	position: absolute;
	transform: translateX(-50%);
	width: 3rem;
	z-index: 2;
}

.art-pm-hero__down-arrow svg {
	display: block;
	height: 2rem;
	width: 2rem;
}

.art-pm-hero__down-arrow:hover,
.art-pm-hero__down-arrow:focus-visible {
	color: var(--art-color-accent, #ffffff);
}

.art-pm-hero__down-arrow:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@keyframes art-pm-hero-down-arrow-fade-in {
	to {
		opacity: 1;
	}
}

@keyframes art-pm-hero-down-arrow-pulse {
	0%, 100% {
		transform: translateX(-50%) scale(1);
	}

	50% {
		transform: translateX(-50%) scale(1.1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.art-pm-hero__down-arrow {
		animation: none;
		opacity: 1;
	}
}

/* ── Split layouts ──────────────────────────────────────────────────────────── */

/*
 * Split layouts use a flex inner wrapper (.art-pm-hero__inner) that holds the
 * content column and the media (image) column side by side. The section itself
 * removes its own min-height — the inner wrapper carries it instead.
 */

.art-pm-hero--split-50-50,
.art-pm-hero--split-60-40 {
	min-height: 0;
}

.art-pm-hero__inner {
	display: flex;
	height: var(--art-pm-hero-height);
	max-height: var(--art-pm-hero-max-height);
	min-height: var(--art-pm-hero-min-height, 500px);
	position: relative;
	width: 100%;
	z-index: 2;
}

/*
 * min-width: 0 on both split layouts' content column - flex items default
 * to min-width: auto (never shrink below their own content's minimum
 * size), which without this would let an oversized child (e.g. the
 * Property Search/CTAs width override further below) force this column
 * to grow past its own 50%/60% flex-basis instead of overflowing locally
 * within it - confirmed live as exactly what broke when that override
 * was first added.
 */
.art-pm-hero--split-50-50 .art-pm-hero__content,
.art-pm-hero--split-60-40 .art-pm-hero__content {
	min-width: 0;
}

/*
 * .art-pm-hero__inner itself is capped and centred to the sitewide
 * container width - the exact same max-width/margin recipe .container
 * uses (theme style.css) - rather than running truly edge-to-edge.
 * Content (below) then needs no special treatment at all to line up
 * with the rest of the site: it's just normal content inside a normal
 * capped container, the same as every other page module's own
 * .art-pm-module__inner. Only .art-pm-hero__media (further down) is
 * deliberately broken back out past this cap, on its own outer side
 * only, to reach the true viewport edge - this replaces several earlier,
 * much more fragile attempts at reaching that same sitewide-container
 * alignment from the content side instead (search/CTAs width overrides,
 * a heading/subheading padding formula) - all now removed as
 * unnecessary; see git history on this file for that abandoned approach
 * if any of its reasoning is ever useful again.
 */
.art-pm-hero--split-50-50 .art-pm-hero__inner,
.art-pm-hero--split-60-40 .art-pm-hero__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
}

/* split-50-50: equal columns, content left / media right. */
.art-pm-hero--split-50-50 .art-pm-hero__content {
	flex: 1 1 50%;
	order: 0;
	z-index: 0;
}

/*
 * Media's flex-basis is no longer a plain percentage of .art-pm-hero__inner
 * (which is now capped, above) - it needs to reach the true viewport
 * edge on its own *outer* side (away from content) regardless of that
 * cap, while its *inner* side (against content) stays exactly where an
 * uncapped 50% split would have put it, so content's own edge is
 * unaffected. width: calc(0.5 * min(100vw, --art-max-width) + G) is that
 * "50% of the container, plus however far the container's own edge sits
 * from the true viewport edge" - G, defined identically in every rule
 * below as max(0px, calc((100vw - --art-max-width) / 2)), is exactly
 * how far .art-pm-hero__inner's own edge is inset from the viewport
 * edge on a given side (0 once the viewport is narrower than
 * --art-max-width and the container is no longer capped at all - this
 * formula and the plain flex: 1 1 50% it replaces are then identical).
 * margin on the same outer side, -G, pulls the column out by exactly
 * that same amount so its outer edge actually lands on the true edge
 * instead of just growing further inward.
 */
.art-pm-hero--split-50-50 .art-pm-hero__media {
	flex: 0 0 auto;
	margin-right: calc(-1 * max(0px, calc((100vw - var(--art-max-width, 75rem)) / 2)));
	order: 1;
	width: calc(0.5 * min(100vw, var(--art-max-width, 75rem)) + max(0px, calc((100vw - var(--art-max-width, 75rem)) / 2)));
}

/*
 * split-60-40: a 60% column and a 40% column. The 60/40 in the name always
 * reads left-to-right, so Image Position doesn't just reorder the columns —
 * it swaps which one (content or media) sits in the 60% slot, so the layout
 * still reads as "60/40" regardless of which side the image is on.
 */
.art-pm-hero--split-60-40 .art-pm-hero__content {
	flex: 1 1 60%;
	order: 0;
	z-index: 0;
}

/* See split-50-50's own .art-pm-hero__media rule above for the general
   breakout formula - media_share here is 0.4 (this style's own 40%
   share) rather than 0.5. */
.art-pm-hero--split-60-40 .art-pm-hero__media {
	flex: 0 0 auto;
	margin-right: calc(-1 * max(0px, calc((100vw - var(--art-max-width, 75rem)) / 2)));
	order: 1;
	width: calc(0.4 * min(100vw, var(--art-max-width, 75rem)) + max(0px, calc((100vw - var(--art-max-width, 75rem)) / 2)));
}

.art-pm-hero--split-60-40.art-pm-hero--image-left .art-pm-hero__content {
	flex: 1 1 40%;
	gap: 40px;
	order: 1;
}

/* media_share here is 0.6 (this style's image-left 60% share), and the
   breakout margin/order flip to the *left* side, since media sits there
   instead - see split-50-50's own .art-pm-hero__media rule above for the
   general formula. */
.art-pm-hero--split-60-40.art-pm-hero--image-left .art-pm-hero__media {
	flex: 0 0 auto;
	margin-left: calc(-1 * max(0px, calc((100vw - var(--art-max-width, 75rem)) / 2)));
	margin-right: 0;
	order: 0;
	width: calc(0.6 * min(100vw, var(--art-max-width, 75rem)) + max(0px, calc((100vw - var(--art-max-width, 75rem)) / 2)));
}

/*
 * Image Position "Left" on split-50-50 — equal columns, so only the order
 * (and which side the breakout margin applies to) needs swapping.
 */
.art-pm-hero--split-50-50.art-pm-hero--image-left .art-pm-hero__content {
	order: 1;
}

.art-pm-hero--split-50-50.art-pm-hero--image-left .art-pm-hero__media {
	margin-left: calc(-1 * max(0px, calc((100vw - var(--art-max-width, 75rem)) / 2)));
	margin-right: 0;
	order: 0;
}

/* Media column — holds a responsive <picture> that covers the column. */
.art-pm-hero__media {
	overflow: hidden;
	position: relative;
}

.art-pm-hero__media-picture {
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.art-pm-hero__media-img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/*
 * Property Search and the CTA buttons line up with the sitewide
 * container edge automatically now, with no width/padding overrides of
 * their own needed: .art-pm-hero__inner itself is capped and centred to
 * --art-max-width above, so the heading/subheading and Property Search/
 * CTAs are all just normal content inside a normal capped container,
 * the same as every other page module's own .art-pm-module__inner. Only
 * .art-pm-hero__media (the image column) needs its own special
 * treatment, to break back out past that cap to the true viewport edge
 * - see its own rules above.
 *
 * This replaces several earlier, much more fragile attempts at the same
 * alignment goal from the content side instead - a heading/subheading
 * padding formula, and a Property Search/CTAs width override - all
 * abandoned as unnecessary once the real fix (capping .art-pm-hero__inner
 * itself) was found; see git history on this file if any of that
 * reasoning is ever useful again.
 */
@media (min-width: 768px) {
	/*
	 * display: flex overrides the "From 480px: switch the group to a
	 * grid" rule further up this file - .art-pm-hero__ctas becomes a
	 * grid container there, whose auto-fit column tracks (minmax(12rem,
	 * max-content)) size each button to its own natural text width
	 * rather than growing them evenly. The grid switch's own reasoning
	 * (equal-width columns when there are 3+ buttons) doesn't change for
	 * every other Hero context, since this override is scoped to just
	 * this split-layout case.
	 *
	 * flex: 1 1 0 on each button (rather than leaving them at their own
	 * natural, unequal text width) makes both buttons grow to fill the
	 * row evenly and meet in the middle - confirmed live that two
	 * different-length buttons left at their own size, with a gap
	 * opening up between them, read as visibly mismatched/wrong.
	 */
	.art-pm-hero--split-50-50:not(.art-pm-hero--image-left) .art-pm-hero__content--left .art-pm-hero__ctas,
	.art-pm-hero--split-60-40:not(.art-pm-hero--image-left) .art-pm-hero__content--left .art-pm-hero__ctas,
	.art-pm-hero--split-50-50.art-pm-hero--image-left .art-pm-hero__content--left .art-pm-hero__ctas,
	.art-pm-hero--split-60-40.art-pm-hero--image-left .art-pm-hero__content--left .art-pm-hero__ctas {
		display: flex;
	}

	.art-pm-hero--split-50-50:not(.art-pm-hero--image-left) .art-pm-hero__content--left .art-pm-hero__ctas .art-pm-hero__cta,
	.art-pm-hero--split-60-40:not(.art-pm-hero--image-left) .art-pm-hero__content--left .art-pm-hero__ctas .art-pm-hero__cta,
	.art-pm-hero--split-50-50.art-pm-hero--image-left .art-pm-hero__content--left .art-pm-hero__ctas .art-pm-hero__cta,
	.art-pm-hero--split-60-40.art-pm-hero--image-left .art-pm-hero__content--left .art-pm-hero__ctas .art-pm-hero__cta {
		flex: 1 1 0;
	}

	/*
	 * Property Search's "minimal" style has its own reason to stay
	 * fit-content normally - both this Hero's own .art-pm-hero__search--
	 * minimal wrapper (further up this file: width: auto; max-width:
	 * none, so the pill floats free rather than sitting in a second white
	 * card) and Property Modules' own .art-prop-search__bar beneath it
	 * (art-division-property-modules.css: without it, the bar stretches
	 * into a large, mostly-empty pill instead of a compact one) - a
	 * deliberate choice for the contexts they're normally embedded in,
	 * but wrong here, where the content column is wide enough that a
	 * fit-content pill just leaves a large empty gap next to it instead.
	 * Overriding both back to width: 100% here (scoped to this same
	 * split-layout context only, not either plugin's default behaviour
	 * anywhere else "minimal" is used) lets the bar fill the column
	 * instead. flex: 1 1 auto on the location field restores the base
	 * .art-prop-search__bar-location rule's own growth (the "minimal"
	 * style's own CSS deliberately overrides it to flex: 0 1 auto,
	 * matching its normal fit-content bar) so the extra width is absorbed
	 * smoothly into the input, the same way it already grows for the
	 * "compact" style, rather than appearing as a second, separate empty
	 * gap inside the now-wider bar itself.
	 */
	.art-pm-hero--split-50-50 .art-pm-hero__content--left .art-pm-hero__search--minimal,
	.art-pm-hero--split-60-40 .art-pm-hero__content--left .art-pm-hero__search--minimal,
	.art-pm-hero--split-50-50 .art-pm-hero__content--left .art-prop-search--minimal .art-prop-search__bar,
	.art-pm-hero--split-60-40 .art-pm-hero__content--left .art-prop-search--minimal .art-prop-search__bar {
		width: 100%;
	}

	.art-pm-hero--split-50-50 .art-pm-hero__content--left .art-prop-search--minimal .art-prop-search__bar-location--minimal,
	.art-pm-hero--split-60-40 .art-pm-hero__content--left .art-prop-search--minimal .art-prop-search__bar-location--minimal {
		flex: 1 1 auto;
	}
}

/* Stack columns on smaller screens for split layouts. */
@media (max-width: 767px) {
	.art-pm-hero--split-50-50 .art-pm-hero__inner,
	.art-pm-hero--split-60-40 .art-pm-hero__inner {
		flex-direction: column;
		height: auto;
		max-height: none;
	}

	/* Once stacked, the 16:9 media plus the full content column is far
	   taller than any Height/Max Height picked for the side-by-side desktop
	   layout, and the section's overflow:hidden was clipping the bottom of
	   the content (address, phone, CTAs) instead of letting it grow.
	   !important is required to beat the section's inline height/max-height
	   set by render.php. */
	.art-pm-hero--split-50-50,
	.art-pm-hero--split-60-40 {
		height: auto !important;
		max-height: none !important;
	}

	/* The .image-left compound selectors are required here, not just the
	   bare split-50-50/60-40 ones above - their own unconditional desktop
	   rules (.art-pm-hero--split-60-40.art-pm-hero--image-left
	   .art-pm-hero__media etc., further up) carry 3-class specificity and
	   have no media query of their own, so a plain 2-class mobile override
	   here would lose to them outright on every property they both set.
	   margin-left/margin-right also need an explicit reset - those same
	   desktop rules pull the column out past the viewport edge with a
	   negative calc() margin for the breakout effect, which this override
	   was never cancelling even where width:100% did win. */
	.art-pm-hero--split-50-50 .art-pm-hero__media,
	.art-pm-hero--split-60-40 .art-pm-hero__media,
	.art-pm-hero--split-50-50.art-pm-hero--image-left .art-pm-hero__media,
	.art-pm-hero--split-60-40.art-pm-hero--image-left .art-pm-hero__media {
		aspect-ratio: 16 / 9;
		flex: 0 0 auto;
		margin-left: 0;
		margin-right: 0;
		order: 0;
		position: relative;
		width: 100%;
	}

	.art-pm-hero--split-50-50 .art-pm-hero__content,
	.art-pm-hero--split-60-40 .art-pm-hero__content {
		flex: 1 1 auto;
		order: 1;
	}

	/* .art-pm-hero__search--minimal's own base rule (further up this file)
	   is width:auto by design - meant to float as a compact, fit-content
	   pill next to a wide column. The >=768px rule just above this block
	   already overrides that back to 100% for the same reason, but only
	   inside .art-pm-hero__content--left - it never had a mobile
	   counterpart at all, so under 768px this stayed at width:auto
	   regardless of alignment, sizing off the search bar's own fit-content
	   width rather than stretching to fill the now full-width stacked
	   column. .art-pm-hero__content isn't flex:stretch on its cross axis
	   (its --left/--center/--right modifiers set align-items to
	   flex-start/center/flex-end, never stretch), so nothing else was ever
	   going to widen this wrapper on its own. The inner .art-prop-search__bar
	   itself already goes full-width on mobile via Property Modules' own
	   CSS (art-division-property-modules.css) - only this outer wrapper
	   needed fixing here. */
	.art-pm-hero__search--minimal {
		width: 100%;
	}
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.art-pm-hero__content {
		gap: 1rem;
		padding: 3rem 1.25rem;
	}

	.art-pm-hero__heading {
		font-size: var(--art-text-2xl, 2rem);
	}

	/* Inset Image (Background Style) frames the image with side margins on
	   desktop, matching the site's content width either side - on a phone
	   screen that framing reads as wasted edge space rather than a
	   deliberate design choice, so the image goes full width here instead.
	   Vertical framing (Inset Frame Height%) is untouched. */
	.art-pm-hero__bg-media--inset {
		margin-inline: 0;
		max-width: none;
	}
}

/* ── Reduced motion — pause / hide background video ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.art-pm-hero__bg-video {
		display: none;
	}
}

/* ── Per-breakpoint text alignment ──────────────────────────────────────────── */

/* Mobile — up to 767 px */
@media (max-width: 767px) {
	/* .art-pm-module__header is centred with a 720px max-width for
	   readability; text-align alone only shifts text within that box, not
	   the box itself, so a left/right pick would fall short of the section's
	   actual edge. --art-pm-title-header-inline-{bp} (computed from the same
	   title_alignment choice) overrides the box's own inline margin so it
	   hugs the chosen edge instead of staying centred. */
	.art-pm-module__header {
		margin-inline: var(--art-pm-title-header-inline-mobile, auto);
	}

	.art-pm-module > .art-pm-module__header > * {
		margin-inline: var(--art-pm-title-header-inline-mobile, auto);
	}

	.art-pm-module--image-text .art-pm-module__title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--image-text .art-pm-module__text {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--content .art-pm-module__title,
	.art-pm-module--content .art-pm-module__eyebrow,
	.art-pm-module--content .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--content .art-pm-module__intro {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--blog .art-pm-module__title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--blog .art-pm-module__blog-excerpt {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--developments .art-pm-module__title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--developments .art-pm-module__developments-excerpt {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	/* Separate from --art-pm-text-align-{bp} above (which intentionally
	   aligns each card's own excerpt, not the module's own intro
	   paragraph) - callers that only want to align the header's title/intro
	   without touching card text set this instead, e.g.
	   art-division-developments' own Development Location archive. */
	.art-pm-module--developments .art-pm-module__intro {
		text-align: var(--art-pm-intro-align-mobile, inherit);
	}

	.art-pm-module--jobs .art-pm-module__title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--jobs .art-pm-module__jobs-excerpt {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--accordion .art-pm-module__title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--accordion .art-pm-module__intro {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--map .art-pm-module__title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--map .art-pm-module__intro {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--tabs .art-pm-module__title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--tabs .art-pm-module__intro {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__title,
	.art-pm-module--content-multi .art-pm-module__header .art-pm-module__eyebrow,
	.art-pm-module--content-multi .art-pm-module__header .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__intro {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__content-multi-row-title,
	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__eyebrow,
	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__content-multi-row-text {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-card-title,
	.art-pm-module--content-multi .art-pm-module__content-multi-card .art-pm-module__eyebrow,
	.art-pm-module--content-multi .art-pm-module__content-multi-card .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-card-text {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-card-media--icon {
		justify-content: var(--art-pm-text-align-mobile, center);
	}

	.art-pm-module--contact-us .art-pm-module__title,
	.art-pm-module--contact-us .art-pm-module__eyebrow,
	.art-pm-module--contact-us .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--contact-us .art-pm-module__intro {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}

	.art-pm-module--property-market-stats .art-pm-module__title {
		text-align: var(--art-pm-title-align-mobile, inherit);
	}

	.art-pm-module--property-market-stats .art-pm-module__intro {
		text-align: var(--art-pm-text-align-mobile, inherit);
	}
}

/* ── Team Members module ─────────────────────────────────────────────────────── */

.art-pm-module--team-members .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--team-members.art-pm-module--fullwidth .art-pm-module__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Default style's Grid display mode (see template.php - Display Mode:
   Grid/Slider, distinct from the Overlay Cards style's own Layout:
   Grid/Carousel further below). This modifier was only ever added to the
   markup, never styled - .art-pm-module__inner's own rule above is just a
   width constraint, so cards fell back to stacking as plain block-level
   children, one per row, with no wrap at any width. Column count itself
   is set by the "Team Members: Items Per Row" block further down, shared
   with the Overlay Grid and Directory Cards grids below. */
.art-pm-module--team-members .art-pm-module__inner--grid {
	display: grid;
	gap: 1.5rem;
}

.art-pm-module--team-members .art-pm-module__cta {
	margin-inline: auto;
	max-width: var(--art-pm-content-max-width);
	text-align: center;
	width: 100%;
}

/* Link Type: "Call/Email each member" - per-card button row, shared by
   Default (card.php's own .art-team-card__info, via the
   art_division_team_after_card_info hook), Overlay Cards
   (.art-pm-module__overlay-card-info) and Directory Cards
   (.art-pm-module__directory-card-body). A lone .art-btn child already
   fills the full row width via flex-grow, so one button vs two needs no
   extra markup or class - see $render_contact_buttons() in template.php. */
.art-pm-module__contact-buttons {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.75rem;
	width: 100%;
}

.art-pm-module__contact-buttons .art-btn {
	flex: 1 1 0;
	text-align: center;
}

.art-pm-module--team-members .art-team-card__image-wrap {
	background-color: var(--art-color-surface, #e2e2e2);
	border-radius: var(--art-radius, 0);
	display: block;
	overflow: hidden;
	position: relative;
}

.art-pm-module--team-members .art-team-card__photo,
.art-pm-module--team-members .art-team-card__hover {
	border-radius: var(--art-radius, 0);
}

/* wp_get_attachment_image() outputs the registered art-team-card size's
   real width/height as HTML attributes (see art-division-team's
   class-art-division-team-image-sizes.php) - neither this plugin nor
   art-division-team's own CSS ever overrides that intrinsic size, so the
   photo rendered at its fixed native pixel width regardless of how wide
   its grid/flex cell actually was. The size is already a hard crop
   (add_image_size(..., true)), so width:100%/height:auto scales it
   proportionally without distorting the pre-cropped aspect ratio. */
.art-pm-module--team-members .art-team-card__photo {
	display: block;
	height: auto;
	width: 100%;
}

/* card.php only stacks the two images in the markup (see art-division-team's
   templates/card.php) - it never positions or fades between them. The hover
   image is absolutely positioned to fill the wrap (object-fit: cover, since
   it's requested at the unrelated 'medium_large' size rather than the
   card's own cropped ratio) and starts transparent; the base photo fades
   out under it on hover/focus so only one image is ever fully visible. */
.art-pm-module--team-members .art-team-card__photo--has-hover {
	position: relative;
	transition: opacity 0.3s ease;
}

.art-pm-module--team-members .art-team-card__hover {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s ease;
	width: 100%;
}

.art-pm-module--team-members .art-team-card:hover .art-team-card__hover,
.art-pm-module--team-members .art-team-card:focus-within .art-team-card__hover {
	opacity: 1;
}

.art-pm-module--team-members .art-team-card:hover .art-team-card__photo--has-hover,
.art-pm-module--team-members .art-team-card:focus-within .art-team-card__photo--has-hover {
	opacity: 0;
}

/* Hover Image toggle off (template.php's $enable_hover_image) - card.php has
   no arg to suppress the hover image it renders, so it's hidden here instead. */
.art-pm-module--team-members.art-pm-module--hover-image-off .art-team-card__hover {
	display: none;
}

/* Card Information's office/phone/email lines and View Profile link -
   card.php ($args['fields']) keeps these deliberately plain/unstyled beyond
   basic spacing and link colour, matching the rest of card.php's own
   minimal, theme-overridable output (no borders, icons or button chrome,
   unlike Directory Cards' equivalent fields). */
.art-pm-module--team-members .art-team-card__meta {
	margin: 0 0 0.35rem;
}

.art-pm-module--team-members .art-team-card__meta a,
.art-pm-module--team-members .art-team-card__view-profile {
	color: inherit;
	text-decoration: none;
}

.art-pm-module--team-members .art-team-card__meta a:hover,
.art-pm-module--team-members .art-team-card__view-profile:hover {
	text-decoration: underline;
}

.art-pm-module--team-members .art-team-card__view-profile {
	color: var(--art-color-accent);
	display: inline-block;
	font-size: var(--art-text-sm);
	font-weight: 600;
	margin-top: 0.25rem;
}

/* ── Team Members: Overlay Cards style — Grid layout (contained) ─────────────── */

/* Column count is set by the "Team Members: Items Per Row" block further
   down, shared with the Default Grid and Directory Cards grids above/below. */
.art-pm-module--team-members.art-pm-module--layout-grid .art-pm-module__overlay-grid {
	display: grid;
	gap: 1.5rem;
	margin-top: 2rem;
}

/* ── Team Members: Overlay Cards style — Carousel layout (breaks the container) ── */

.art-pm-module--team-members.art-pm-module--layout-carousel .art-pm-module__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module--team-members.art-pm-module--layout-carousel .art-pm-module__text {
	flex: 1 1 320px;
	padding-left: max(1.5rem, calc((100% - var(--art-max-width, 1562px)) / 2));
	padding-right: clamp(1.5rem, 4vw, 3rem);
}

/* The header sits inside the text column here, so it needs to fill the
   column and left-align instead of using its usual centred, max-width box —
   matching the same override used by the Video module's Video Left/Right
   styles for the same reason. */
.art-pm-module--team-members.art-pm-module--layout-carousel .art-pm-module__text .art-pm-module__header {
	margin-bottom: 1.5rem;
	margin-inline: 0;
	max-width: none;
	text-align: left;
}

/* Same visually-empty-header case as the base rule above, but this layout's
   own margin-bottom outranks it on specificity - repeat the override here. */
.art-pm-module--team-members.art-pm-module--layout-carousel .art-pm-module__text .art-pm-module__header.art-pm-module__header--visually-hidden {
	margin-bottom: 0;
}

.art-pm-module--team-members.art-pm-module--layout-carousel .art-pm-module__text .art-pm-module__intro {
	margin-inline: 0;
	max-width: none;
}

.art-pm-module--team-members.art-pm-module--layout-carousel .art-pm-module__cta {
	margin-inline: 0;
	text-align: left;
}

.art-pm-module--team-members.art-pm-module--layout-carousel .art-pm-module__overlay-carousel {
	flex: 1 1 55%;
	min-width: 0;
	padding-block: 0.5rem;
	width: 100%;
}

.art-pm-module--team-members.art-pm-module--layout-carousel .art-pm-module__overlay-carousel .swiper-slide {
	height: auto;
}

@media (max-width: 767px) {
	.art-pm-module--team-members.art-pm-module--layout-carousel .art-pm-module__text {
		flex: 1 1 100%;
		padding-left: clamp(1.5rem, 5vw, 3rem);
	}
}

/* ── Team Members: Overlay Cards ──────────────────────────────────────────────── */

.art-pm-module__overlay-card {
	aspect-ratio: 3 / 4;
	background-color: var(--art-color-surface, #e2e2e2);
	border-radius: var(--art-radius, 0);
	color: #ffffff;
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	width: 100%;
}

/* Same reasoning as .art-pm-module__directory-card[hidden] above - in the
   Overlay Grid layout this element is itself the direct grid item the team
   filter hides/shows, and its own display:block would otherwise always
   beat the browser's default [hidden]{display:none}. */
.art-pm-module__overlay-card[hidden] {
	display: none;
}

/* Wraps the photo images + scrim. Normally just a transparent <div> filling
   the card (the card itself is the link) - becomes the actual <a> instead
   when a Call/Email button row is shown, since the card can no longer be
   one big link (see $render_overlay_card() in template.php). Either way it
   needs its own explicit sizing: its children are all position:absolute,
   which on their own would leave it (and, when it's the <a>, its clickable
   area) collapsed to 0x0. */
.art-pm-module__overlay-card-photo {
	display: block;
	inset: 0;
	position: absolute;
}

.art-pm-module__overlay-card-img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform 0.3s ease;
	width: 100%;
}

.art-pm-module__overlay-card:hover .art-pm-module__overlay-card-img,
.art-pm-module__overlay-card:focus-visible .art-pm-module__overlay-card-img,
.art-pm-module__overlay-card-photo:focus-visible .art-pm-module__overlay-card-img {
	transform: scale(1.05);
}

.art-pm-module__overlay-card-hover {
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.art-pm-module__overlay-card:hover .art-pm-module__overlay-card-hover,
.art-pm-module__overlay-card:focus-visible .art-pm-module__overlay-card-hover {
	opacity: 1;
}

.art-pm-module__overlay-card:hover .art-pm-module__overlay-card-img--has-hover,
.art-pm-module__overlay-card:focus-visible .art-pm-module__overlay-card-img--has-hover {
	opacity: 0;
}

.art-pm-module__overlay-card-scrim {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%);
	inset: 0;
	position: absolute;
}

.art-pm-module__overlay-card-info {
	bottom: 0;
	display: flex;
	flex-direction: column;
	left: 0;
	padding: 1.25rem;
	position: absolute;
	right: 0;
}

.art-pm-module__overlay-card-role {
	font-size: var(--art-text-sm, 0.875rem);
	letter-spacing: 0.03em;
	margin-bottom: 0.25rem;
}

.art-pm-module__overlay-card-name {
	color: var(--art-color-accent, #0073aa);
	font-size: var(--art-text-lg, 1.125rem);
	font-weight: 700;
}

.art-pm-module__overlay-card-meta-row {
	display: block;
	font-size: var(--art-text-sm, 0.875rem);
	margin-top: 0.25rem;
	opacity: 0.9;
}

.art-pm-module__overlay-card-meta-row a {
	color: inherit;
	text-decoration: none;
}

.art-pm-module__overlay-card-meta-row a:hover {
	text-decoration: underline;
}

.art-pm-module__overlay-card-link {
	color: var(--art-color-accent, #0073aa);
	font-size: var(--art-text-sm, 0.875rem);
	margin-top: 0.4rem;
}

.art-pm-module__overlay-card:focus-visible,
.art-pm-module__overlay-card-photo:focus-visible,
a.art-pm-module__overlay-card-link:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

/* ── Team Members: Items Per Row (every grid style/layout) ────────────────────── */
/* --art-pm-team-columns-{mobile,tablet,desktop} are set inline on <section>
   from the Items Per Row fields (template.php), each defaulting to 3 in
   ACF - the var() fallbacks below only matter if the custom properties
   were somehow stripped, so they mirror those same ACF defaults. Applies
   to Default Grid, Overlay Grid and Directory Cards; the Slider/Carousel
   equivalent (Default Slider, Overlay Carousel) reads the same three field
   values via data-art-pm-carousel-columns-* attributes, consumed by
   initCarousels() in art-division-page-modules.js instead of CSS. */
.art-pm-module--team-members .art-pm-module__inner--grid,
.art-pm-module__overlay-grid,
.art-pm-module__directory-grid {
	grid-template-columns: repeat(var(--art-pm-team-columns-desktop, 3), minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.art-pm-module--team-members .art-pm-module__inner--grid,
	.art-pm-module__overlay-grid,
	.art-pm-module__directory-grid {
		grid-template-columns: repeat(var(--art-pm-team-columns-tablet, 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.art-pm-module--team-members .art-pm-module__inner--grid,
	.art-pm-module__overlay-grid,
	.art-pm-module__directory-grid {
		grid-template-columns: repeat(var(--art-pm-team-columns-mobile, 1), minmax(0, 1fr));
	}
}

/* ── Team Members: Office/Department filter (every style/layout) ─────────────── */

.art-pm-module__team-filters {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	justify-content: flex-start;
	margin-bottom: 2rem;
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

/* flex: 0 0 auto is explicit (not just the flex shorthand's own default) so
   a group can never be stretched wide by flex-grow, whatever the active
   theme's own resets/utilities set for other flex children elsewhere on
   the page - each group should only ever be as wide as its own content. */
.art-pm-module__team-filter-group {
	border: 0;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.art-pm-module__team-filter-group--select {
	display: flex;
	flex-direction: column;
}

.art-pm-module__team-filter-select {
	background-color: var(--art-color-bg);
	border: 1px solid var(--art-color-border);
	border-radius: var(--art-radius);
	color: var(--art-color-text);
	cursor: pointer;
	font-size: var(--art-text-sm);
	min-height: 2.25rem;
	padding: 0.4rem 2rem 0.4rem 0.9rem;
}

.art-pm-module__team-filter-select:focus-visible {
	outline: 2px solid var(--art-color-accent);
	outline-offset: 2px;
}

.art-pm-module__team-filter-legend {
	color: var(--art-color-text);
	font-size: var(--art-text-sm);
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
}

.art-pm-module__team-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.art-pm-module__team-filter-pill {
	align-items: center;
	background-color: var(--art-color-bg);
	border: 1px solid var(--art-color-border);
	border-radius: var(--art-radius);
	color: var(--art-color-text);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--art-text-sm);
	gap: 0.4rem;
	min-height: 2.25rem;
	padding: 0.4rem 0.9rem;
}

.art-pm-module__team-filter-pill:has(:checked) {
	background-color: var(--art-color-accent);
	border-color: var(--art-color-accent);
	color: var(--art-color-bg);
}

.art-pm-module__team-filter-pill:has(:focus-visible) {
	outline: 2px solid var(--art-color-accent);
	outline-offset: 2px;
}

.art-pm-module__team-filter-status {
	color: var(--art-color-muted);
	flex-basis: 100%;
	font-size: var(--art-text-sm);
	margin: 0;
}

/* Default Grid's own card markup (art-team-card, from art-division-team)
   can't carry data-art-pm-offices/-departments directly, so template.php
   wraps each one in this element instead. display:contents makes it
   otherwise invisible to layout - the card behaves exactly as if the
   wrapper weren't there - while still responding to [hidden] when the
   filter script hides a non-matching member. */
.art-pm-module__team-filter-item {
	display: contents;
}

.art-pm-module__team-filter-item[hidden] {
	display: none;
}

/* Belt-and-braces for Default Slider / Overlay Carousel: makes sure a
   hidden swiper-slide collapses even if a future Swiper build's own CSS
   ever sets its own `display` on .swiper-slide. */
[data-art-pm-team-filter-grid] .swiper-slide[hidden] {
	display: none;
}

/* ── Developments: Development Type filter (grid/carousel/carousel-fullwidth) ── */

.art-pm-module__developments-filters {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	justify-content: flex-start;
	margin-bottom: 2rem;
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module__developments-filter-group {
	border: 0;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.art-pm-module__developments-filter-legend {
	color: var(--art-color-text);
	font-size: var(--art-text-sm);
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
}

.art-pm-module__developments-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.art-pm-module__developments-filter-pill {
	align-items: center;
	background-color: var(--art-color-bg);
	border: 1px solid var(--art-color-border);
	border-radius: var(--art-radius);
	color: var(--art-color-text);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--art-text-sm);
	gap: 0.4rem;
	min-height: 2.25rem;
	padding: 0.4rem 0.9rem;
	text-decoration: none;
}

.art-pm-module__developments-filter-pill:has(:checked),
.art-pm-module__developments-filter-pill.is-active {
	background-color: var(--art-color-accent);
	border-color: var(--art-color-accent);
	color: var(--art-color-bg);
}

.art-pm-module__developments-filter-pill:has(:focus-visible),
.art-pm-module__developments-filter-pill:focus-visible {
	outline: 2px solid var(--art-color-accent);
	outline-offset: 2px;
}

.art-pm-module__developments-filter-status {
	color: var(--art-color-muted);
	flex-basis: 100%;
	font-size: var(--art-text-sm);
	margin: 0;
}

.art-pm-module__developments-card[hidden] {
	display: none;
}

/* Belt-and-braces for Carousel/Carousel Fullwidth: overrides the earlier,
   equal-specificity .art-pm-module__developments-cards--carousel
   .art-pm-module__developments-card.swiper-slide { display: flex; } rule -
   ties resolve by source order, so this block must stay later in the file
   than that one to actually win. */
[data-art-pm-developments-filter-grid] .swiper-slide[hidden] {
	display: none;
}

/* ── Team Members: Directory Cards — horizontal (photo left, body right),
     deliberately distinct from Default/Overlay's vertical/portrait cards ── */

/* Column count is set by the "Team Members: Items Per Row" block further
   up, shared with the Default Grid and Overlay Grid grids above. */
.art-pm-module__directory-grid {
	display: grid;
	gap: 1.5rem;
}

.art-pm-module__directory-card {
	background-color: var(--art-color-bg);
	border: 1px solid var(--art-color-border);
	border-radius: var(--art-radius);
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

/* This element is itself the direct grid item the team filter (see
   art-division-page-modules.js) hides/shows via the native [hidden]
   attribute - without this override the display:flex above (an author
   rule) always wins over the browser's own [hidden]{display:none} default
   (a user-agent rule), so a "filtered out" card would otherwise stay
   visible despite carrying the hidden attribute. */
.art-pm-module__directory-card[hidden] {
	display: none;
}

.art-pm-module__directory-card-image-wrap {
	background-color: var(--art-color-surface);
	display: block;
	flex: 0 0 auto;
	overflow: hidden;
	position: relative;
	width: clamp(7rem, 28%, 11rem);
}

.art-pm-module__directory-card-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-pm-module__directory-card-image--has-hover {
	position: relative;
	transition: opacity 0.3s ease;
}

.art-pm-module__directory-card-hover {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s ease;
	width: 100%;
}

.art-pm-module__directory-card:hover .art-pm-module__directory-card-hover,
.art-pm-module__directory-card:focus-within .art-pm-module__directory-card-hover {
	opacity: 1;
}

.art-pm-module__directory-card:hover .art-pm-module__directory-card-image--has-hover,
.art-pm-module__directory-card:focus-within .art-pm-module__directory-card-image--has-hover {
	opacity: 0;
}

.art-pm-module--hover-image-off .art-pm-module__directory-card-hover {
	display: none;
}

.art-pm-module__directory-card-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 1.25rem;
	text-align: left;
}

.art-pm-module__directory-card-name {
	font-size: var(--art-text-lg);
	margin: 0 0 0.15rem;
}

.art-pm-module__directory-card-name a {
	color: inherit;
	text-decoration: none;
}

.art-pm-module__directory-card-job-title {
	color: var(--art-color-muted);
	font-size: var(--art-text-base);
	margin: 0 0 0.75rem;
}

.art-pm-module__directory-card-meta-row {
	align-items: center;
	color: var(--art-color-muted);
	display: flex;
	font-size: var(--art-text-sm);
	gap: 0.5rem;
	margin: 0 0 0.4rem;
}

.art-pm-module__directory-card-meta-row a {
	color: inherit;
	text-decoration: none;
}

.art-pm-module__directory-card-meta-row a:hover {
	text-decoration: underline;
}

.art-pm-module__directory-card-icon {
	flex-shrink: 0;
	height: 1rem;
	width: 1rem;
}

.art-pm-module__directory-card-view-profile {
	color: var(--art-color-accent);
	display: inline-block;
	font-size: var(--art-text-sm);
	font-weight: 600;
	margin-top: 0.5rem;
	text-decoration: none;
}

.art-pm-module__directory-card-view-profile:hover {
	text-decoration: underline;
}

.art-pm-module__directory-card-image-wrap:focus-visible,
.art-pm-module__directory-card-view-profile:focus-visible {
	outline: 2px solid var(--art-color-accent);
	outline-offset: 2px;
}

@media (max-width: 479px) {
	.art-pm-module__directory-card {
		flex-direction: column;
	}

	.art-pm-module__directory-card-image-wrap {
		aspect-ratio: 16 / 9;
		width: 100%;
	}
}

/* Tablet — 768 px to 1023 px */
@media (min-width: 768px) and (max-width: 1023px) {
	.art-pm-module__header {
		margin-inline: var(--art-pm-title-header-inline-tablet, auto);
	}

	.art-pm-module > .art-pm-module__header > * {
		margin-inline: var(--art-pm-title-header-inline-tablet, auto);
	}

	.art-pm-module--image-text .art-pm-module__title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--image-text .art-pm-module__text {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--content .art-pm-module__title,
	.art-pm-module--content .art-pm-module__eyebrow,
	.art-pm-module--content .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--content .art-pm-module__intro {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--blog .art-pm-module__title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--blog .art-pm-module__blog-excerpt {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--developments .art-pm-module__title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--developments .art-pm-module__developments-excerpt {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--developments .art-pm-module__intro {
		text-align: var(--art-pm-intro-align-tablet, inherit);
	}

	.art-pm-module--jobs .art-pm-module__title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--jobs .art-pm-module__jobs-excerpt {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--accordion .art-pm-module__title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--accordion .art-pm-module__intro {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--map .art-pm-module__title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--map .art-pm-module__intro {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--tabs .art-pm-module__title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--tabs .art-pm-module__intro {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__title,
	.art-pm-module--content-multi .art-pm-module__header .art-pm-module__eyebrow,
	.art-pm-module--content-multi .art-pm-module__header .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__intro {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__content-multi-row-title,
	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__eyebrow,
	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__content-multi-row-text {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-card-title,
	.art-pm-module--content-multi .art-pm-module__content-multi-card .art-pm-module__eyebrow,
	.art-pm-module--content-multi .art-pm-module__content-multi-card .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-card-text {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-card-media--icon {
		justify-content: var(--art-pm-text-align-tablet, center);
	}

	.art-pm-module--contact-us .art-pm-module__title,
	.art-pm-module--contact-us .art-pm-module__eyebrow,
	.art-pm-module--contact-us .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--contact-us .art-pm-module__intro {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}

	.art-pm-module--property-market-stats .art-pm-module__title {
		text-align: var(--art-pm-title-align-tablet, inherit);
	}

	.art-pm-module--property-market-stats .art-pm-module__intro {
		text-align: var(--art-pm-text-align-tablet, inherit);
	}
}

/* Desktop — 1024 px and above */
@media (min-width: 1024px) {
	.art-pm-module__header {
		margin-inline: var(--art-pm-title-header-inline-desktop, auto);
	}

	.art-pm-module > .art-pm-module__header > * {
		margin-inline: var(--art-pm-title-header-inline-desktop, auto);
	}

	.art-pm-module--image-text .art-pm-module__title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--image-text .art-pm-module__text {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--content .art-pm-module__title,
	.art-pm-module--content .art-pm-module__eyebrow,
	.art-pm-module--content .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--content .art-pm-module__intro {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--blog .art-pm-module__title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--blog .art-pm-module__blog-excerpt {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--developments .art-pm-module__title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--developments .art-pm-module__developments-excerpt {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--developments .art-pm-module__intro {
		text-align: var(--art-pm-intro-align-desktop, inherit);
	}

	.art-pm-module--jobs .art-pm-module__title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--jobs .art-pm-module__jobs-excerpt {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--accordion .art-pm-module__title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--accordion .art-pm-module__intro {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--map .art-pm-module__title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--map .art-pm-module__intro {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--tabs .art-pm-module__title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--tabs .art-pm-module__intro {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__title,
	.art-pm-module--content-multi .art-pm-module__header .art-pm-module__eyebrow,
	.art-pm-module--content-multi .art-pm-module__header .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__intro {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__content-multi-row-title,
	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__eyebrow,
	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-row--text-only .art-pm-module__content-multi-row-text {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-card-title,
	.art-pm-module--content-multi .art-pm-module__content-multi-card .art-pm-module__eyebrow,
	.art-pm-module--content-multi .art-pm-module__content-multi-card .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-card-text {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--content-multi .art-pm-module__content-multi-card-media--icon {
		justify-content: var(--art-pm-text-align-desktop, center);
	}

	.art-pm-module--contact-us .art-pm-module__title,
	.art-pm-module--contact-us .art-pm-module__eyebrow,
	.art-pm-module--contact-us .art-pm-module__post-title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--contact-us .art-pm-module__intro {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}

	.art-pm-module--property-market-stats .art-pm-module__title {
		text-align: var(--art-pm-title-align-desktop, inherit);
	}

	.art-pm-module--property-market-stats .art-pm-module__intro {
		text-align: var(--art-pm-text-align-desktop, inherit);
	}
}

/* ── Content Multi module ───────────────────────────────────────────────────── */

.art-pm-module--content-multi .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--content-multi.art-pm-module--fullwidth .art-pm-module__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module__content-multi {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(var(--art-pm-content-multi-columns, 3), minmax(0, 1fr));
}

.art-pm-module__content-multi.swiper {
	display: block;
}

.art-pm-module__content-multi-card {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Media area */

.art-pm-module__content-multi-card-media {
	line-height: 0;
}

.art-pm-module__content-multi-card-media-link {
	display: block;
}

.art-pm-module__content-multi-card-image {
	display: block;
	height: auto;
	width: 100%;
}

/* Icon variant of the media area - small, centred, capped size (matches the
   Repeatables List module's icon treatment), never a full-width banner. */

.art-pm-module__content-multi-card-media--icon {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 1.5rem 1.5rem 0;
}

.art-pm-module__content-multi-card-icon {
	display: block;
	fill: currentColor;
	height: 4.125rem;
	width: 4.125rem;
}

/* Body area */

.art-pm-module__content-multi-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1rem;
}

.art-pm-module__content-multi-card-title {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}

.art-pm-module__content-multi-card-text {
	margin: 0 0 1rem;
}

.art-pm-module__content-multi-card-text > *:first-child {
	margin-top: 0;
}

.art-pm-module__content-multi-card-text > *:last-child {
	margin-bottom: 0;
}

.art-pm-module__content-multi-card-link-wrap {
	margin: auto 0 0;
}

/* Plain style — bare text columns, no card background/border/padding. */

.art-pm-module--style-plain .art-pm-module__content-multi-card {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.art-pm-module--style-plain .art-pm-module__content-multi-card-body {
	padding: 0;
}

/* Without the card box, an item title reads as its own section heading
   rather than a small card label - match .art-pm-module__title's size so
   it's consistent with every other module's heading instead of looking
   like a leftover card-sized title. */
.art-pm-module--style-plain .art-pm-module__content-multi-card-title {
	font-size: var(--art-text-2xl, 2rem);
	margin: 0 0 1rem;
}

/* Timeline Cards style — a row of full cards (same markup as Grid), each
   with its own numbered marker above it. Desktop: markers are connected by
   one continuous horizontal line, built from two half-line elements per
   marker (-line--before/-after) rather than one long element - each item is
   an equal-width flex child sitting flush against its neighbours (no gap on
   the wrapper itself; the gutter between cards comes from margin on the
   card), so consecutive halves meet exactly at the shared edge with no
   visible break. A short -tick element bridges the marker down to its card.
   Below 767px this collapses to a single left-aligned column (see the media
   query at the bottom of this section) using the same 2-row-grid-with-a-
   fixed-gap-row rail technique as the Timeline style, so the line there
   still starts exactly at marker 1 and ends exactly at the last marker.
   Markers are always a circle (hardcoded 50%, not the theme's
   --art-radius-round toggle) since a step number must stay legible as a badge. */

.art-pm-module__content-multi-timeline-cards {
	display: flex;
}

.art-pm-module__content-multi-timeline-cards-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

.art-pm-module__content-multi-timeline-cards-rail {
	align-items: center;
	display: flex;
	height: 3rem;
	justify-content: center;
	position: relative;
}

.art-pm-module__content-multi-timeline-cards-line {
	background-color: var(--art-color-border, #e5e5e5);
	height: 2px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.art-pm-module__content-multi-timeline-cards-line--before {
	left: 0;
	right: 50%;
}

.art-pm-module__content-multi-timeline-cards-line--after {
	left: 50%;
	right: 0;
}

.art-pm-module__content-multi-timeline-cards-marker {
	align-items: center;
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: 50%;
	color: var(--art-color-text, #1d2327);
	display: flex;
	flex: 0 0 auto;
	font-size: 1.125rem;
	font-weight: 400;
	height: 3rem;
	justify-content: center;
	position: relative;
	width: 3rem;
	z-index: 1;
}

.art-pm-module__content-multi-timeline-cards-tick {
	background-color: var(--art-color-border, #e5e5e5);
	height: 2rem;
	margin: 0 auto;
	width: 2px;
}

.art-pm-module__content-multi-timeline-cards-item .art-pm-module__content-multi-card {
	flex: 1 1 auto;
	margin: 0 0.75rem;
}

@media (max-width: 767px) {
	.art-pm-module__content-multi-timeline-cards {
		flex-direction: column;
	}

	.art-pm-module__content-multi-timeline-cards-item {
		column-gap: 1rem;
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1.5rem;
	}

	.art-pm-module__content-multi-timeline-cards-item:last-child {
		grid-template-rows: auto 0;
	}

	.art-pm-module__content-multi-timeline-cards-rail {
		/* Spans the card's own row plus the connector-line row below it
		   (grid-row: 1 / 3) so the line can keep running through the gap
		   down to the next item, but the marker itself should centre on
		   just the card - padding-bottom reserves exactly the connector
		   row's own height (1.5rem) out of the flex content box before
		   centring, so justify-content only ever centres the marker
		   against the remaining (card-height-sized) space. The connector
		   line is positioned absolutely below instead of via flex-grow,
		   so it isn't affected by that padding and still reaches the
		   rail's true bottom edge (the next card's top). */
		flex-direction: column;
		grid-column: 1;
		grid-row: 1 / 3;
		justify-content: center;
		padding-bottom: 1.5rem;
		position: relative;
	}

	.art-pm-module__content-multi-timeline-cards-item:last-child .art-pm-module__content-multi-timeline-cards-rail {
		padding-bottom: 0;
	}

	.art-pm-module__content-multi-timeline-cards-line,
	.art-pm-module__content-multi-timeline-cards-tick {
		display: none;
	}

	.art-pm-module__content-multi-timeline-cards-rail::after {
		background-color: var(--art-color-border, #e5e5e5);
		bottom: 0;
		content: "";
		left: 50%;
		position: absolute;
		top: 0;
		transform: translateX(-50%);
		width: 2px;
	}

	.art-pm-module__content-multi-timeline-cards-item:last-child .art-pm-module__content-multi-timeline-cards-rail::after {
		content: none;
	}

	.art-pm-module__content-multi-timeline-cards-item .art-pm-module__content-multi-card {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}
}

/* Stacked style — not a card grid: each item is a full-width row, no card
   background/border. Image-bearing rows use the same flex two-column
   pattern as the Image & Text module; text-only rows just span full width. */

.art-pm-module__content-multi-rows {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.art-pm-module__content-multi-row--image-left,
.art-pm-module__content-multi-row--image-right {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.art-pm-module__content-multi-row--image-left .art-pm-module__content-multi-row-media,
.art-pm-module__content-multi-row--image-left .art-pm-module__content-multi-row-body,
.art-pm-module__content-multi-row--image-right .art-pm-module__content-multi-row-media,
.art-pm-module__content-multi-row--image-right .art-pm-module__content-multi-row-body {
	flex: 1 1 min(100%, 20rem);
	min-width: 0;
}

.art-pm-module__content-multi-row--image-left .art-pm-module__content-multi-row-media { order: 0; }
.art-pm-module__content-multi-row--image-left .art-pm-module__content-multi-row-body  { order: 1; }
.art-pm-module__content-multi-row--image-right .art-pm-module__content-multi-row-media { order: 1; }
.art-pm-module__content-multi-row--image-right .art-pm-module__content-multi-row-body  { order: 0; }

.art-pm-module__content-multi-row-media {
	line-height: 0;
}

.art-pm-module__content-multi-row-media-link {
	display: block;
}

.art-pm-module__content-multi-row-image {
	border-radius: var(--art-radius, 0);
	display: block;
	height: auto;
	width: 100%;
}

/* Same reasoning as the Plain style override above: without a card box, a
   row title reads as its own section heading, so it should match
   .art-pm-module__title's size instead of looking card-sized. */
.art-pm-module__content-multi-row-title {
	font-size: var(--art-text-2xl, 2rem);
	margin: 0 0 1rem;
}

.art-pm-module__content-multi-row-text {
	margin: 0;
}

.art-pm-module__content-multi-row-text > *:first-child {
	margin-top: 0;
}

.art-pm-module__content-multi-row-text > *:last-child {
	margin-bottom: 0;
}

/* Image-left/image-right rows are always left-aligned regardless of the
   Text Alignment field - the Text tab's alignment choice only applies to
   text-only rows (see the per-breakpoint rules above), since a centred or
   right-aligned text column reads badly sitting next to an image. */
.art-pm-module__content-multi-row--image-left .art-pm-module__content-multi-row-title,
.art-pm-module__content-multi-row--image-left .art-pm-module__content-multi-row-text,
.art-pm-module__content-multi-row--image-right .art-pm-module__content-multi-row-title,
.art-pm-module__content-multi-row--image-right .art-pm-module__content-multi-row-text {
	text-align: left;
}

/* Timeline style — not a card grid: an <ol> of items alternating left/right
   of a connecting line, each with its own numbered marker. The line is built
   per-item rather than as one continuous element: each item is a 2-row grid
   (card row, then a fixed-height "gap" row) with its -rail column spanning
   both rows, so the -connector inside it (flex:1, filling whatever space is
   left after the marker's own fixed size) always reaches exactly to the next
   item's marker - the line starts precisely at marker 1 and ends precisely
   at the last marker (no -connector is rendered on the last item) regardless
   of how tall any card is. Each connector is a grey track (::before) with an
   accent fill (::after) scaled by --art-pm-timeline-fill (0-1), and markers
   above the viewport's centre carry .is-reached - see
   initContentMultiTimelines() in the JS. An item's photo goes in the empty
   column opposite its card (--has-image). */

.art-pm-module__content-multi-timeline {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.art-pm-module__content-multi-timeline-item {
	column-gap: 2rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto 3rem;
}

.art-pm-module__content-multi-timeline-item:last-child {
	grid-template-rows: auto 0;
}

.art-pm-module__content-multi-timeline-item--left .art-pm-module__content-multi-timeline-card {
	grid-column: 1;
	grid-row: 1;
}

.art-pm-module__content-multi-timeline-item--right .art-pm-module__content-multi-timeline-card {
	grid-column: 3;
	grid-row: 1;
}

/* The rail spans both item rows and shares their heights (subgrid), so the
   -step fills exactly the card's row and its two flex half-lines put the
   marker at the card's vertical centre; the --gap line fills the spacing row. */
.art-pm-module__content-multi-timeline-rail {
	display: grid;
	grid-column: 2;
	grid-row: 1 / 3;
	grid-template-rows: subgrid;
	justify-items: center;
}

.art-pm-module__content-multi-timeline-step {
	align-items: center;
	display: flex;
	flex-direction: column;
	grid-row: 1;
}

.art-pm-module__content-multi-timeline-connector--gap {
	grid-row: 2;
}

.art-pm-module__content-multi-timeline-connector--blank {
	visibility: hidden;
}

.art-pm-module__content-multi-timeline-marker {
	align-items: center;
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: 50%;
	color: var(--art-color-text, #1d2327);
	display: flex;
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 400;
	height: 2.25rem;
	justify-content: center;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	width: 2.25rem;
}

.art-pm-module__content-multi-timeline-marker.is-reached {
	background-color: var(--art-color-accent, #0073aa);
	border-color: var(--art-color-accent, #0073aa);
	color: var(--art-pm-on-accent, #ffffff);
}

.art-pm-module__content-multi-timeline-connector {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	width: 3px;
}

.art-pm-module__content-multi-timeline-connector::before {
	background-color: var(--art-color-border, #e5e5e5);
	content: "";
	inset: 0 0.5px;
	position: absolute;
}

.art-pm-module__content-multi-timeline-connector::after {
	background-color: var(--art-color-accent, #0073aa);
	content: "";
	inset: 0;
	position: absolute;
	transform: scaleY(var(--art-pm-timeline-fill, 0));
	transform-origin: top;
}

.art-pm-module__content-multi-timeline-card {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	padding: 1.25rem 1.5rem;
}

.art-pm-module__content-multi-timeline-title {
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}

.art-pm-module__content-multi-timeline-text {
	margin: 0;
}

.art-pm-module__content-multi-timeline-text > *:first-child {
	margin-top: 0;
}

.art-pm-module__content-multi-timeline-text > *:last-child {
	margin-bottom: 0;
}

.art-pm-module__content-multi-timeline-heading {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin: 0 0 0.5rem;
}

.art-pm-module__content-multi-timeline-heading .art-pm-module__content-multi-timeline-title {
	margin: 0;
}

.art-pm-module__content-multi-timeline-icon {
	align-items: center;
	background-color: var(--art-color-accent, #0073aa);
	border-radius: 50%;
	color: var(--art-pm-on-accent, #ffffff);
	display: flex;
	flex: 0 0 auto;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.art-pm-module__content-multi-timeline-icon-svg {
	display: block;
	fill: currentColor;
	height: 1.25rem;
	width: 1.25rem;
}

.art-pm-module__content-multi-timeline-card--highlight {
	background-color: var(--art-color-accent, #0073aa);
	border-color: var(--art-color-accent, #0073aa);
	color: var(--art-pm-on-accent, #ffffff);
}

/* Inside the highlight panel --art-color-accent is remapped to the on-accent
   colour (see the bg-secondary rule near the top), so the icon circle uses a
   translucent on-accent tint instead. */
.art-pm-module__content-multi-timeline-card--highlight .art-pm-module__content-multi-timeline-icon {
	background-color: color-mix(in srgb, var(--art-pm-on-accent, #ffffff) 18%, transparent);
	color: var(--art-pm-on-accent, #ffffff);
}

/* Photo opposite the card. */

.art-pm-module__content-multi-timeline-figure {
	grid-row: 1;
	min-width: 0;
}

.art-pm-module__content-multi-timeline-item--left .art-pm-module__content-multi-timeline-figure {
	grid-column: 3;
}

.art-pm-module__content-multi-timeline-item--right .art-pm-module__content-multi-timeline-figure {
	grid-column: 1;
}

.art-pm-module__content-multi-timeline-item--has-image .art-pm-module__content-multi-timeline-card {
	align-self: center;
}

.art-pm-module__content-multi-timeline-image {
	aspect-ratio: 4 / 3;
	border-radius: var(--art-radius, 0);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.art-pm-module__content-multi-timeline-marker {
		transition: none;
	}
}

@media (max-width: 767px) {
	.art-pm-module__content-multi-timeline-item {
		column-gap: 1.5rem;
		grid-template-columns: auto 1fr;
	}

	.art-pm-module__content-multi-timeline-item--left .art-pm-module__content-multi-timeline-card,
	.art-pm-module__content-multi-timeline-item--right .art-pm-module__content-multi-timeline-card {
		grid-column: 2;
	}

	/* Mobile keeps the marker at the top of each item (the card may sit
	   under a photo): no half-line above it, and the line below runs to the
	   item's bottom, through the spacing row, to the next marker. */
	.art-pm-module__content-multi-timeline-rail {
		display: flex;
		flex-direction: column;
		grid-column: 1;
	}

	.art-pm-module__content-multi-timeline-step {
		flex: 1 1 auto;
	}

	.art-pm-module__content-multi-timeline-step > .art-pm-module__content-multi-timeline-connector:first-child,
	.art-pm-module__content-multi-timeline-connector--gap {
		display: none;
	}

	.art-pm-module__content-multi-timeline-item--has-image {
		grid-template-rows: auto auto 3rem;
	}

	.art-pm-module__content-multi-timeline-item--has-image:last-child {
		grid-template-rows: auto auto 0;
	}

	.art-pm-module__content-multi-timeline-item--has-image .art-pm-module__content-multi-timeline-rail {
		grid-row: 1 / 4;
	}

	.art-pm-module__content-multi-timeline-item--left .art-pm-module__content-multi-timeline-figure,
	.art-pm-module__content-multi-timeline-item--right .art-pm-module__content-multi-timeline-figure {
		grid-column: 2;
	}

	.art-pm-module__content-multi-timeline-item--has-image.art-pm-module__content-multi-timeline-item--left .art-pm-module__content-multi-timeline-card,
	.art-pm-module__content-multi-timeline-item--has-image.art-pm-module__content-multi-timeline-item--right .art-pm-module__content-multi-timeline-card {
		align-self: start;
		grid-row: 2;
		margin-top: 1rem;
	}
}

/* Overlay option — card title/text/link sit on top of the image. */

.art-pm-module__content-multi-card--overlay {
	aspect-ratio: 4 / 3;
	color: #ffffff;
	position: relative;
}

.art-pm-module__content-multi-card--overlay .art-pm-module__content-multi-card-media {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.art-pm-module__content-multi-card--overlay .art-pm-module__content-multi-card-media-link {
	height: 100%;
}

.art-pm-module__content-multi-card--overlay .art-pm-module__content-multi-card-image {
	height: 100%;
	object-fit: cover;
}

.art-pm-module__content-multi-card-scrim {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.25) 100%);
	inset: 0;
	position: absolute;
	z-index: 1;
}

.art-pm-module__content-multi-card--overlay .art-pm-module__content-multi-card-title {
	color: #ffffff;
}

.art-pm-module__content-multi-card--overlay .art-pm-module__content-multi-card-body {
	inset: 0;
	justify-content: center;
	padding: 2rem;
	position: absolute;
	z-index: 2;
}

.art-pm-module__content-multi-card--overlay .art-pm-module__content-multi-card-link-wrap {
	margin-top: 0;
}

/* Inline option — icon/image sits beside the title/text instead of above it. */

.art-pm-module__content-multi-card--inline {
	align-items: flex-start;
	flex-direction: row;
}

.art-pm-module__content-multi-card--inline .art-pm-module__content-multi-card-media {
	flex: 0 0 auto;
}

.art-pm-module__content-multi-card--inline .art-pm-module__content-multi-card-image {
	width: 6rem;
}

.art-pm-module__content-multi-card--inline .art-pm-module__content-multi-card-body {
	flex: 1 1 auto;
}

/* Carousel slides */

.art-pm-module__content-multi--carousel .swiper-wrapper {
	align-items: stretch;
	box-sizing: border-box;
}

.art-pm-module__content-multi--carousel .art-pm-module__content-multi-card.swiper-slide {
	display: flex;
	height: auto;
}

/* End CTA - own element rendered after all items (not one of them), so it's
   centred beneath them rather than following any item's own alignment. The
   button/form markup itself reuses the shared .art-pm-module__cta* classes
   (see the "CTA" section above), this just positions the wrapper. */
.art-pm-module__content-multi-end-cta {
	margin-top: 2.5rem;
	text-align: center;
}

@media (max-width: 1023px) {
	.art-pm-module__content-multi {
		grid-template-columns: repeat(min(2, var(--art-pm-content-multi-columns, 2)), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.art-pm-module__content-multi {
		grid-template-columns: 1fr;
	}
}

/* ── Pricing module ──────────────────────────────────────────────────────────── */

.art-pm-module--pricing .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module__pricing {
	align-items: start;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(var(--art-pm-pricing-columns, 3), minmax(0, 1fr));
}

.art-pm-module__pricing-card {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	display: flex;
	flex-direction: column;
	padding: 2rem;
	position: relative;
}

/* Highlight ("Most Popular") — accent border and raised elevation, toggled
   per card. The badge overlaps the card's top edge. */

.art-pm-module__pricing-card--highlight {
	border-color: var(--art-color-accent, #1a1a2e);
	border-width: 2px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.art-pm-module__pricing-badge {
	background-color: var(--art-color-accent, #1a1a2e);
	border-radius: var(--art-radius-round, 999px);
	color: var(--art-pm-on-accent);
	font-size: var(--art-text-sm, 0.875rem);
	font-weight: 600;
	left: 50%;
	margin: 0;
	padding: 0.375rem 1rem;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.art-pm-module__pricing-card-title {
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}

.art-pm-module__pricing-card-subtitle {
	color: var(--art-color-muted, #646970);
	margin: 0 0 1.5rem;
}

.art-pm-module__pricing-features {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.art-pm-module__pricing-feature {
	align-items: flex-start;
	display: flex;
	gap: 0.625rem;
}

.art-pm-module__pricing-feature-icon {
	color: var(--art-color-accent, #1a1a2e);
	display: flex;
	flex: 0 0 auto;
	margin-top: 0.1875rem;
}

.art-pm-module__pricing-feature-icon-svg {
	display: block;
	fill: currentColor;
	height: 1rem;
	width: 1rem;
}

.art-pm-module__pricing-feature-icon-img {
	display: block;
	height: 1.25rem;
	width: 1.25rem;
}

.art-pm-module__pricing-feature-text {
	color: var(--art-color-text, #1d2327);
}

/* Optional price block below the features - large amount + small note.
   Can be the card's only content under the subtitle when there are no
   features. */

.art-pm-module__pricing-price {
	margin: 0 0 1.5rem;
}

.art-pm-module__pricing-price-amount {
	color: var(--art-color-accent, #1a1a2e);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.art-pm-module__pricing-price-note {
	color: var(--art-color-muted, #646970);
	font-size: var(--art-text-sm, 0.875rem);
	margin: 0.25rem 0 0;
}

.art-pm-module__pricing-card-cta {
	margin-top: auto;
	padding-top: 0.5rem;
}

.art-pm-module__pricing-card-link {
	display: inline-block;
	width: 100%;
}

@media (max-width: 1023px) {
	.art-pm-module__pricing {
		grid-template-columns: repeat(min(2, var(--art-pm-pricing-columns, 2)), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.art-pm-module__pricing {
		grid-template-columns: 1fr;
	}
}

/* ── Tabs module ─────────────────────────────────────────────────────────────── */

.art-pm-module--tabs .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

/* Background Colour: Default (white) - box the tabs area itself in the
   Alternate colour so it reads as a distinct panel, while the module header
   (title/intro) above it stays on the plain white section background. */
.art-pm-module--tabs.art-pm-module--bg-white .art-pm-module__tabs-wrapper {
	background-color: var(--art-color-alternate, #f5f5f5);
	border-radius: var(--art-radius, 0);
	padding: 3.5rem;
}

/* The box (.art-pm-module__tabs-wrapper) can end up wider than is
   comfortable for the nav+panel row - .art-pm-module__inner's own max-width
   caps it, but on wide viewports that's still generous. A dedicated inner
   wrapper caps and centers the actual nav+panel row within the box, instead
   of letting the panels column (flex: 1 1 0) stretch to fill the box and
   leave the short prose sitting flush-left with a lopsided gap on the right. */
.art-pm-module__tabs-inner {
	display: flex;
	gap: 80px;
	margin-inline: auto;
	max-width: 1300px;
	padding: 60px;
}

/* Left column: vertical tab nav */

.art-pm-module__tabs-nav {
	flex: 0 0 220px;
}

.art-pm-module__tabs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.art-pm-module__tabs-trigger {
	align-items: center;
	background: transparent;
	border: 0;
	border-left: 3px solid transparent;
	color: inherit;
	cursor: pointer;
	display: flex;
	/* Buttons don't inherit the page font by default - without this the
	   tab titles fall back to the browser's own sans-serif. */
	font-family: inherit;
	font-size: var(--art-text-base, 1rem);
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	text-align: left;
	transition: border-color 0.2s ease, color 0.2s ease;
	width: 100%;
}

/* Sticky Tab List: the nav column stays beside long panels as the page
   scrolls, clear of the fixed header. Desktop only - below 1024px the nav is
   hidden in favour of the accordion. */
.art-pm-module--sticky-nav .art-pm-module__tabs-nav {
	align-self: flex-start;
	position: sticky;
	top: calc(var(--art-header-height, 100px) + 1.5rem);
}

/* Show Tab Title in Panel: the open tab's title as a heading above its text.
   Hidden with the accordion (≤ 1023px), whose bar already shows it. */
.art-pm-module__tabs-panel-title {
	margin: 0 0 1rem;
}

@media (max-width: 1023px) {
	.art-pm-module__tabs-panel-title {
		display: none;
	}
}

/* Tab Position: Top - the tabs run across the top of the panel, the open
   one underlined, instead of down the left. Desktop only, like the side
   list: below 1024px both become the accordion. */
@media (min-width: 1024px) {
	.art-pm-module--nav-top .art-pm-module__tabs-inner {
		flex-direction: column;
		gap: 2.5rem;
	}

	.art-pm-module--nav-top .art-pm-module__tabs-nav {
		flex: none;
	}

	.art-pm-module--nav-top .art-pm-module__tabs-list {
		border-bottom: 1px solid var(--art-color-border, #e5e5e5);
		display: flex;
		flex-wrap: wrap;
	}

	.art-pm-module--nav-top .art-pm-module__tabs-trigger {
		border-bottom: 3px solid transparent;
		border-left: 0;
		margin-bottom: -1px;
		width: auto;
	}

	.art-pm-module--nav-top .art-pm-module__tabs-trigger:hover {
		border-bottom-color: var(--art-color-border, #e5e5e5);
	}

	.art-pm-module--nav-top .art-pm-module__tabs-trigger.is-active,
	.art-pm-module--nav-top .art-pm-module__tabs-trigger[aria-selected="true"] {
		border-bottom-color: var(--art-color-accent, #0073aa);
	}

	/* Nav Style: Buttons across the top - a row of buttons, no pointer. */
	.art-pm-module--nav-top.art-pm-module--nav-buttons .art-pm-module__tabs-list {
		border-bottom: 0;
		flex-direction: row;
	}

	.art-pm-module--nav-top.art-pm-module--nav-buttons .art-pm-module__tabs-trigger.is-active::after,
	.art-pm-module--nav-top.art-pm-module--nav-buttons .art-pm-module__tabs-trigger[aria-selected="true"]::after {
		content: none;
	}
}

/* A tab with an Image: photo and text side by side, the photo first. */
.art-pm-module__tabs-panel-inner--has-image {
	align-items: center;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.art-pm-module__tabs-panel-img {
	aspect-ratio: 4 / 3;
	border-radius: var(--art-radius, 0);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.art-pm-module__tabs-panel-cta {
	margin: 1.5rem 0 0;
}

@media (max-width: 1023px) {
	.art-pm-module__tabs-panel-inner--has-image {
		display: block;
	}

	.art-pm-module__tabs-panel-media {
		margin-bottom: 1.25rem;
	}
}

/* Optional per-tab Icon (icon library / media library / URL) - fixed size
   rather than max/auto, since a raw inline <svg> with width/height stripped
   collapses to 0x0 under auto sizing with no definite size in its ancestor
   chain (see the Icon size cap standard - project memory). <img> output
   (media_library/url types) shares the same class; object-fit: contain
   keeps it proportional inside the fixed box without distortion. */
.art-pm-module__tabs-trigger-icon-wrap {
	display: inline-flex;
	flex-shrink: 0;
}

.art-pm-module__tabs-trigger-icon {
	height: 1.25rem;
	object-fit: contain;
	width: 1.25rem;
}

.art-pm-module__tabs-trigger:hover {
	border-left-color: var(--art-color-border, #e5e5e5);
}

.art-pm-module__tabs-trigger.is-active,
.art-pm-module__tabs-trigger[aria-selected="true"] {
	border-left-color: var(--art-color-accent, #0073aa);
	color: var(--art-color-accent, #0073aa);
}

.art-pm-module__tabs-trigger:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

/* Nav Style: Buttons - each trigger becomes a solid, block-level button with
   space between them, instead of the default underlined text list. Desktop
   only; the mobile/tablet accordion trigger (further down) keeps its own
   look regardless of this setting. */
.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-nav {
	flex-basis: 300px;
}

.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-list {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-trigger {
	background: var(--art-color-primary, #1a1a2e);
	border-left: 0;
	border-radius: var(--art-radius, 0);
	color: var(--art-pm-on-primary, #ffffff);
	font-size: var(--art-text-lg, 1.125rem);
	padding: 1.15rem 1.5rem;
	position: relative;
}

.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-trigger:hover {
	filter: brightness(1.15);
}

.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-trigger.is-active,
.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-trigger[aria-selected="true"] {
	color: var(--art-pm-on-primary, #ffffff);
}

/* Small triangle pointer on the active button, protruding into the gap
   between the nav and panel columns - the same colour as the button itself,
   so it reads as a continuation of the button rather than a new element. */
.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-trigger.is-active::after,
.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-trigger[aria-selected="true"]::after {
	border-bottom: 8px solid transparent;
	border-left: 8px solid var(--art-color-primary, #1a1a2e);
	border-top: 8px solid transparent;
	content: '';
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
}

/* Right column: panel area */

.art-pm-module__tabs-panels {
	flex: 1 1 0;
	min-width: 0;
	/* Switching tabs changes the panel's height; without this the browser's
	   scroll anchoring shifts the page to compensate, on top of the tab
	   script's own scroll back to the tabs (revealTabs). */
	overflow-anchor: none;
}

/* Accordion trigger — hidden on desktop, visible on mobile/tablet */

.art-pm-module__tabs-accordion-trigger {
	display: none;
}

/* Panel - visibility is class-driven (.is-active) rather than the `hidden`
   attribute, since the mobile accordion below needs a real transition and
   `hidden` forces display: none, which can't animate; see the shared
   Hidden-attribute-vs-display-CSS project lesson. */
.art-pm-module__tabs-panel {
	display: none;
}

.art-pm-module__tabs-panel.is-active {
	display: block;
}

/* margin-inline is deliberately 0, not auto - centering the prose block
   within the (wider) panels flex column would push it away from the nav
   column, opening up a large gap that isn't the flex `gap` above. It should
   hug the nav side and just cap line-length via max-width. */
.art-pm-module__tabs-panel-content {
	margin-inline: 0;
	max-width: var(--art-pm-content-max-width);
}

.art-pm-module__tabs-panel-content > *:first-child {
	margin-top: 0;
}

.art-pm-module__tabs-panel-content > *:last-child {
	margin-bottom: 0;
}

/* 2-columns style: split panel content into two equal columns */

.art-pm-module__tabs-cols {
	display: flex;
	gap: 2rem;
}

.art-pm-module__tabs-col {
	flex: 1 1 0;
	min-width: 0;
}

.art-pm-module__tabs-col > *:first-child {
	margin-top: 0;
}

.art-pm-module__tabs-col > *:last-child {
	margin-bottom: 0;
}

/* Read-more toggle */

.art-pm-module__tabs-panel-content--has-read-more {
	max-height: 12rem;
	overflow: hidden;
	position: relative;
}

.art-pm-module__tabs-panel-content--has-read-more::after {
	background: linear-gradient(to bottom, transparent, var(--art-color-bg, #ffffff));
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 40%;
}

.art-pm-module__tabs-read-more {
	background: none;
	border: 0;
	color: var(--art-color-accent, #0073aa);
	cursor: pointer;
	font-family: inherit;
	margin-top: 0.75rem;
	padding: 0;
	text-decoration: underline;
}

.art-pm-module__tabs-read-more:hover,
.art-pm-module__tabs-read-more:focus {
	color: var(--art-color-muted, #005177);
}

.art-pm-module__tabs-read-more:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

/* Mobile and tablet: collapse to accordion (≤ 1023 px) */

@media (max-width: 1023px) {
	.art-pm-module__tabs-inner {
		display: block;
		padding: 1rem;
	}

	/* Drop the boxed look (Alternate-colour background + its padding) at
	   this width - the accordion runs full-width instead, with its own
	   modest inset above taking over the job of keeping bars off the
	   screen edge. */
	.art-pm-module--tabs.art-pm-module--bg-white .art-pm-module__tabs-wrapper {
		background-color: transparent;
		border-radius: 0;
		padding: 0;
	}

	.art-pm-module__tabs-nav {
		display: none;
	}

	.art-pm-module__tabs-accordion-trigger {
		align-items: center;
		background: transparent;
		border: 0;
		border-bottom: 1px solid var(--art-color-border, #e5e5e5);
		color: inherit;
		cursor: pointer;
		display: flex;
		font-family: inherit;
		font-size: var(--art-text-lg, 1.125rem);
		gap: 0.75rem;
		padding: 1rem 0;
		text-align: left;
		width: 100%;
	}

	/* margin-left: auto (rather than justify-content: space-between on the
	   trigger) pins the +/- indicator to the far right regardless of how many
	   children precede it - space-between would spread an optional icon,
	   title, and this pseudo-element evenly instead of keeping the icon
	   snug against the title. */
	.art-pm-module__tabs-accordion-trigger::after {
		content: '+';
		flex-shrink: 0;
		font-size: var(--art-text-xl, 1.25rem);
		line-height: 1;
		margin-left: auto;
	}

	.art-pm-module__tabs-accordion-trigger.is-open::after {
		content: '-';
	}

	.art-pm-module__tabs-accordion-trigger:focus-visible {
		outline: 2px solid var(--art-color-accent, #0073aa);
		outline-offset: 2px;
	}

	.art-pm-module__tabs-accordion-title {
		display: block;
	}

	/* Nav Style: Buttons - the accordion trigger becomes the same solid,
	   block-level bar as the desktop nav button, with a small gap between
	   items instead of the default underlined list's shared borders. */
	.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-accordion-trigger {
		background: var(--art-color-primary, #1a1a2e);
		border-bottom: 0;
		border-radius: var(--art-radius, 0);
		color: var(--art-pm-on-primary, #ffffff);
		padding: 1rem 1.25rem;
	}

	.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-accordion-trigger:hover {
		filter: brightness(1.15);
	}

	.art-pm-module--tabs.art-pm-module--nav-buttons .art-pm-module__tabs-item + .art-pm-module__tabs-item {
		margin-top: 0.65rem;
	}

	/* Panel - always rendered (not the `hidden` attribute, which forces
	   display: none and can't animate); JS measures .tabs-panel-inner's
	   real height and writes it as an inline max-height on open, animated
	   by the transition below, then clears it back to 0 to close. */
	.art-pm-module__tabs-panel {
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease;
	}

	/* Without JS there's no click handler to open an item, so leave the
	   server-rendered default (first) item unclamped rather than
	   permanently unreachable; JS immediately overrides this with a
	   measured inline max-height once it runs. */
	.art-pm-module__tabs-panel.is-active {
		max-height: none;
	}

	.art-pm-module__tabs-panel-inner {
		padding: 1rem 0;
	}

	/* Background Colour: Default (white) - the open panel's own content gets
	   the Alternate colour so it still reads as a distinct, grouped area
	   now that the full accordion track no longer carries a boxed
	   background (see the Nav Style: Buttons rules above). */
	.art-pm-module--tabs.art-pm-module--bg-white .art-pm-module__tabs-panel-inner {
		background-color: var(--art-color-alternate, #f5f5f5);
		padding: 1rem 1.25rem;
	}

	.art-pm-module__tabs-cols {
		flex-direction: column;
		gap: 0;
	}

	.art-pm-module__tabs-col + .art-pm-module__tabs-col {
		margin-top: 1rem;
	}
}

/* ── Contact Us module ────────────────────────────────────────────────────────── */

.art-pm-module--contact-us .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-pm-contact-max-width, 860px);
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

/* Panels layout is single-column prose width by default (map/address/phone
   stacked), but once a branch panel renders its two-column has-map row
   (image+info beside the map) that narrow width leaves the map cramped -
   widen to the same tier Cards/Inline Form/Summary Bar/Image already use. */
.art-pm-module--contact-us .art-pm-module__inner:has(.art-pm-module__contact-panel--has-map) {
	max-width: var(--art-pm-contact-wide-max-width, var(--art-max-width, 1200px));
}

.art-pm-module--contact-us .art-pm-module__contact-panels {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.art-pm-module--contact-us .art-pm-module__contact-panel {
	display: flex;
	flex-direction: column;
}

/* Default (Map Position: Left) - map on the left for the first branch,
   alternating sides after that. Right/Top/Bottom modifiers below override
   this per Map Position; see the field's instructions in fields.php. */
.art-pm-module--contact-us .art-pm-module__contact-panel--has-map {
	flex-direction: row;
	min-height: 24rem;
}

.art-pm-module--contact-us.art-pm-module--map-position-left .art-pm-module__contact-panels > .art-pm-module__contact-panel--has-map:nth-child(even) {
	flex-direction: row-reverse;
}

.art-pm-module--contact-us.art-pm-module--map-position-right .art-pm-module__contact-panel--has-map {
	flex-direction: row-reverse;
}

.art-pm-module--contact-us.art-pm-module--map-position-right .art-pm-module__contact-panels > .art-pm-module__contact-panel--has-map:nth-child(even) {
	flex-direction: row;
}

.art-pm-module--contact-us.art-pm-module--map-position-top .art-pm-module__contact-panel--has-map,
.art-pm-module--contact-us.art-pm-module--map-position-top .art-pm-module__contact-panels > .art-pm-module__contact-panel--has-map:nth-child(even) {
	flex-direction: column;
}

.art-pm-module--contact-us.art-pm-module--map-position-bottom .art-pm-module__contact-panel--has-map,
.art-pm-module--contact-us.art-pm-module--map-position-bottom .art-pm-module__contact-panels > .art-pm-module__contact-panel--has-map:nth-child(even) {
	flex-direction: column-reverse;
}

.art-pm-module--contact-us .art-pm-module__contact-panel + .art-pm-module__contact-panel {
	border-top: 1px solid var(--art-color-border, #e5e5e5);
	padding-top: 2rem;
}

.art-pm-module--contact-us .art-pm-module__map {
	flex: 0 0 50%;
	min-height: 24rem;
	overflow: hidden;
	position: relative;
}

.art-pm-module--contact-us.art-pm-module--map-position-top .art-pm-module__map,
.art-pm-module--contact-us.art-pm-module--map-position-bottom .art-pm-module__map {
	flex: none;
	width: 100%;
}

/* Marker popup/info window content - built as an HTML string in
   buildContactPopupHtml() (art-division-page-modules.js) and handed to
   either Leaflet's bindPopup() or a Google InfoWindow, whichever wraps it in
   its own container, so only the content itself is styled here. Same shape
   as the Branch Finder module's own .art-pm-branch-finder-map-popup, plus a
   phone line - kept separate rather than shared since Contact Us markers
   never carry an image. */
.art-pm-contact-map-popup__title {
	font-size: var(--art-text-sm, 0.875rem);
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.art-pm-contact-map-popup__address,
.art-pm-contact-map-popup__phone {
	color: var(--art-color-muted, #666);
	font-size: var(--art-text-xs, 0.75rem);
	margin: 0;
}

.art-pm-contact-map-popup__address + .art-pm-contact-map-popup__phone {
	margin-top: 0.25rem;
}

.art-pm-module--contact-us .art-pm-module__contact-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: calc(var(--art-spacing, 1rem) * 2);
}

.art-pm-module--contact-us .art-pm-module__contact-panel-image {
	border-radius: var(--art-radius, 0);
	margin-bottom: calc(var(--art-spacing, 1rem) * 1.5);
	overflow: hidden;
}

.art-pm-module--contact-us .art-pm-module__contact-panel-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-pm-module--contact-us .art-pm-module__contact-label {
	font-size: var(--art-text-sm, 0.875rem);
	letter-spacing: 0.05em;
	margin-top: 0;
	margin-bottom: calc(var(--art-spacing, 1rem) * 0.5);
	text-transform: uppercase;
}

.art-pm-module--contact-us .art-pm-module__contact-value {
	align-items: flex-start;
	display: flex;
	gap: calc(var(--art-spacing, 1rem) * 0.5);
}

.art-pm-module--contact-us .art-pm-module__contact-icon {
	color: var(--art-color-accent, #0073aa);
	flex-shrink: 0;
	margin-top: 0.125rem;
}

/* Icon source (site Icon Library vs bundled fallback, see
   Art_Division_Page_Modules_Loader::contact_icon()) strips width/height
   attributes on a library-sourced <svg> so CSS controls its size - a raw
   inline <svg> with no definite size collapses to 0x0 inside this
   shrink-to-fit flex item without an explicit rule here. Fixed (not
   max/auto) so both sources render at the same size regardless of which
   one answered. */
.art-pm-module--contact-us .art-pm-module__contact-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.art-pm-module--contact-us .art-pm-module__contact-address {
	font-style: normal;
}

.art-pm-module--contact-us .art-pm-module__contact-link {
	color: var(--art-color-accent, #0073aa);
	text-decoration: none;
}

.art-pm-module--contact-us .art-pm-module__contact-link:hover,
.art-pm-module--contact-us .art-pm-module__contact-link:focus {
	text-decoration: underline;
}

.art-pm-module--contact-us .art-pm-module__contact-link:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

.art-pm-module--contact-us .art-pm-module__contact-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--art-spacing, 1rem) * 0.75);
	margin-top: auto;
	padding-top: calc(var(--art-spacing, 1rem) * 2);
}

.art-pm-module--contact-us .art-pm-module__contact-btn {
	flex: 1 1 auto;
	min-width: 44px;
	min-height: 44px;
	text-align: center;
}

/* Contact Us modals - native <dialog> using art-modal pattern */

dialog.art-pm-module__form-modal {
	border: 0;
	border-radius: var(--art-radius, 0);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
	margin: auto;
	max-width: min(640px, calc(100vw - 2rem));
	padding: 0;
	width: 100%;
}

/* The open/close animation (opacity+transform) and scroll clipping
   (max-height/overflow-y) live on .art-modal__inner, NOT the <dialog>
   element itself. `transform` on an ancestor makes it the containing block
   for any `position: fixed` descendant (e.g. a Google Places Autocomplete
   .pac-container an address field appends inside the dialog) - paired with
   overflow-y:auto that then clips/mispositions that dropdown against the
   dialog's own box instead of the viewport. Keeping <dialog> itself
   transform-free avoids creating that containing block at all. */
dialog.art-pm-module__form-modal .art-modal__inner {
	max-height: 90dvh;
	opacity: 0;
	overflow-y: auto;
	padding: 2rem;
	position: relative;
	scrollbar-color: var(--art-color-accent, #999999) transparent;
	scrollbar-width: thin;
	transform: translateY(16px) scale(0.96);
	/* Closing state's duration - deliberately quicker than opening's below,
	   a slow fade-out on dismiss reads as sluggish rather than smooth. */
	transition: opacity 0.1s ease, transform 0.1s ease;
}

/* Firefox picks up thin/coloured scrollbars from scrollbar-color above;
   Chromium/Safari need the ::-webkit- pseudo-elements instead. */
dialog.art-pm-module__form-modal .art-modal__inner::-webkit-scrollbar {
	width: 8px;
}

dialog.art-pm-module__form-modal .art-modal__inner::-webkit-scrollbar-track {
	background: transparent;
}

dialog.art-pm-module__form-modal .art-modal__inner::-webkit-scrollbar-thumb {
	background-color: var(--art-color-accent, #999999);
	border-radius: 9999px;
}

dialog.art-pm-module__form-modal.art-modal--visible .art-modal__inner {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

dialog.art-pm-module__form-modal::backdrop {
	backdrop-filter: blur(2px);
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.1s ease;
}

dialog.art-pm-module__form-modal.art-modal--visible::backdrop {
	opacity: 1;
	transition: opacity 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
	dialog.art-pm-module__form-modal .art-modal__inner,
	dialog.art-pm-module__form-modal::backdrop {
		transition: none;
	}
}

dialog.art-pm-module__form-modal .art-modal__close {
	background: transparent;
	border: none;
	color: var(--art-color-text, #111111);
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
	padding: 0.5rem;
	position: absolute;
	right: 1rem;
	top: 1rem;
}

dialog.art-pm-module__form-modal .art-modal__close:hover {
	color: var(--art-color-accent, #0073aa);
}

dialog.art-pm-module__form-modal .art-modal__close:focus-visible {
	border-radius: var(--art-radius, 0);
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

dialog.art-pm-module__form-modal .art-modal__content {
	padding-top: 1rem;
	text-align: left;
}

@media (max-width: 767px) {
	.art-pm-module--contact-us .art-pm-module__contact-panel--has-map {
		flex-direction: column;
		min-height: 0;
	}

	.art-pm-module--contact-us .art-pm-module__map {
		flex: none;
		min-height: 16rem;
		width: 100%;
	}

	.art-pm-module--contact-us .art-pm-module__contact-buttons {
		flex-direction: column;
	}
}

/* ── Contact Us: shared branch name heading ──────────────────────────────────── */

.art-pm-module--contact-us .art-pm-module__contact-title {
	font-size: var(--art-text-lg, 1.125rem);
	margin-bottom: calc(var(--art-spacing, 1rem) * 1.25);
}

/* ── Contact Us: Cards layout ────────────────────────────────────────────────── */

.art-pm-module--contact-us.art-pm-module--layout-cards .art-pm-module__inner,
.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__inner {
	max-width: var(--art-pm-contact-wide-max-width, var(--art-max-width, 1200px));
}

.art-pm-module--contact-us.art-pm-module--layout-cards .art-pm-module__contact-panels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (min-width: 860px) {
	.art-pm-module--contact-us.art-pm-module--layout-cards .art-pm-module__contact-panels {
		grid-template-columns: repeat(3, 1fr);
	}
}

.art-pm-module--contact-us.art-pm-module--layout-cards .art-pm-module__contact-panel {
	background: var(--art-color-surface, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.art-pm-module--contact-us.art-pm-module--layout-cards .art-pm-module__contact-panel + .art-pm-module__contact-panel {
	border-top: 1px solid var(--art-color-border, #e5e5e5);
	padding-top: 0;
}

/* Default (Map Position: Top/None) - map above the card body. Bottom/
   Left/Right modifiers below override this per Map Position. */
.art-pm-module--contact-us.art-pm-module--layout-cards .art-pm-module__contact-panel--has-map {
	flex-direction: column;
	min-height: 0;
}

.art-pm-module--contact-us.art-pm-module--layout-cards .art-pm-module__contact-panels > .art-pm-module__contact-panel--has-map:nth-child(even) {
	flex-direction: column;
}

.art-pm-module--contact-us.art-pm-module--layout-cards.art-pm-module--map-position-bottom .art-pm-module__contact-panel--has-map,
.art-pm-module--contact-us.art-pm-module--layout-cards.art-pm-module--map-position-bottom .art-pm-module__contact-panels > .art-pm-module__contact-panel--has-map:nth-child(even) {
	flex-direction: column-reverse;
}

.art-pm-module--contact-us.art-pm-module--layout-cards.art-pm-module--map-position-left .art-pm-module__contact-panel--has-map {
	flex-direction: row;
}

.art-pm-module--contact-us.art-pm-module--layout-cards.art-pm-module--map-position-left .art-pm-module__contact-panels > .art-pm-module__contact-panel--has-map:nth-child(even) {
	flex-direction: row-reverse;
}

.art-pm-module--contact-us.art-pm-module--layout-cards.art-pm-module--map-position-right .art-pm-module__contact-panel--has-map {
	flex-direction: row-reverse;
}

.art-pm-module--contact-us.art-pm-module--layout-cards.art-pm-module--map-position-right .art-pm-module__contact-panels > .art-pm-module__contact-panel--has-map:nth-child(even) {
	flex-direction: row;
}

.art-pm-module--contact-us.art-pm-module--layout-cards .art-pm-module__map {
	flex: none;
	height: 200px;
	min-height: 0;
	width: 100%;
}

.art-pm-module--contact-us.art-pm-module--layout-cards.art-pm-module--map-position-left .art-pm-module__map,
.art-pm-module--contact-us.art-pm-module--layout-cards.art-pm-module--map-position-right .art-pm-module__map {
	flex: 0 0 45%;
	height: auto;
	min-height: 10rem;
	width: auto;
}

/* ── Contact Us: Inline Form layout ──────────────────────────────────────────── */

.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__inline-layout {
	display: flex;
	gap: calc(var(--art-spacing, 1rem) * 4);
}

.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__inline-left {
	flex: 1;
	min-width: 0;
}

.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__inline-right {
	flex: 0 0 44%;
}

.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__inline-form-wrap {
	background: var(--art-color-surface, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	padding: calc(var(--art-spacing, 1rem) * 2);
}

.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__contact-info {
	padding: 0;
}

.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__contact-panel + .art-pm-module__contact-panel {
	margin-top: calc(var(--art-spacing, 1rem) * 1.5);
	padding-top: calc(var(--art-spacing, 1rem) * 1.5);
}

/* Shared by all four Map Position placements: full width above/below both
   columns (Top/Bottom, direct child of .art-pm-module__inner) or nested
   under the branch details/form column (Left/Right, direct child of
   .art-pm-module__inline-left/__inline-right instead) - see template.php. */
.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__inline-map {
	margin-top: calc(var(--art-spacing, 1rem) * 3);
	min-height: 20rem;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* Top: the map is the first thing rendered inside .art-pm-module__inner,
   before .art-pm-module__inline-layout, so it needs space below itself
   instead of above. */
.art-pm-module--contact-us.art-pm-module--layout-inline-form > .art-pm-module__inner > .art-pm-module__inline-map:first-child {
	margin-top: 0;
	margin-bottom: calc(var(--art-spacing, 1rem) * 3);
}

@media (max-width: 767px) {
	.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__inline-layout {
		flex-direction: column;
	}

	.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__inline-right {
		flex: none;
	}

	.art-pm-module--contact-us.art-pm-module--layout-inline-form .art-pm-module__inline-map {
		min-height: 16rem;
	}
}

/* ── Contact Us: Summary Bar layout ──────────────────────────────────────────── */

.art-pm-module--contact-us.art-pm-module--layout-summary .art-pm-module__inner {
	max-width: var(--art-pm-contact-wide-max-width, var(--art-max-width, 1200px));
}

.art-pm-module--contact-us .art-pm-module__contact-summaries {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.art-pm-module--contact-us .art-pm-module__contact-summary + .art-pm-module__contact-summary {
	border-top: 1px solid var(--art-color-border, #e5e5e5);
	padding-top: 2rem;
}

.art-pm-module--contact-us .art-pm-module__contact-summary-grid {
	border-bottom: 1px solid var(--art-color-border, #e5e5e5);
	border-top: 1px solid var(--art-color-border, #e5e5e5);
	display: grid;
	gap: calc(var(--art-spacing, 1rem) * 2);
	grid-template-columns: 1fr;
	padding-block: calc(var(--art-spacing, 1rem) * 1.5);
}

@media (min-width: 640px) {
	.art-pm-module--contact-us .art-pm-module__contact-summary-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.art-pm-module--contact-us .art-pm-module__contact-summary-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.art-pm-module--contact-us .art-pm-module__contact-summary-col {
	display: flex;
	gap: calc(var(--art-spacing, 1rem) * 0.75);
}

.art-pm-module--contact-us .art-pm-module__contact-summary-col > .art-pm-module__contact-icon {
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.art-pm-module--contact-us .art-pm-module__contact-summary-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.art-pm-module--contact-us .art-pm-module__contact-summary-line {
	margin: 0;
}

.art-pm-module--contact-us .art-pm-module__contact-summary-link {
	color: var(--art-color-accent, #0073aa);
	font-size: var(--art-text-sm, 0.875rem);
	margin-top: 0.25rem;
	text-decoration: none;
}

.art-pm-module--contact-us .art-pm-module__contact-summary-link:hover,
.art-pm-module--contact-us .art-pm-module__contact-summary-link:focus {
	text-decoration: underline;
}

.art-pm-module--contact-us .art-pm-module__contact-summary-link:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

.art-pm-module--contact-us .art-pm-module__contact-hours {
	color: var(--art-color-muted, #6b6b6b);
	font-size: var(--art-text-sm, 0.875rem);
	margin: 0;
}

.art-pm-module--contact-us .art-pm-module__specialists-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.art-pm-module--contact-us .art-pm-module__specialist {
	display: flex;
	flex-direction: column;
}

.art-pm-module--contact-us .art-pm-module__specialist-name {
	color: var(--art-color-text, #111111);
	font-weight: 600;
	text-decoration: none;
}

a.art-pm-module__specialist-name:hover,
a.art-pm-module__specialist-name:focus {
	color: var(--art-color-accent, #0073aa);
	text-decoration: underline;
}

.art-pm-module--contact-us .art-pm-module__specialist-role {
	color: var(--art-color-muted, #6b6b6b);
	font-size: var(--art-text-sm, 0.875rem);
}

@media (max-width: 767px) {
	.art-pm-module--contact-us .art-pm-module__contact-summary-grid {
		gap: calc(var(--art-spacing, 1rem) * 1.5);
	}
}

/* ── Contact Us: Summary Bar, Centered style ──────────────────────────────────── */
/* Stacks each column's icon above an uppercase label instead of the Default
   style's icon-beside-body row, centres every column, and recolours the
   grid's top/bottom rule to the site accent colour. .art-pm-module__contact-
   summary-label only exists in the markup for this style (see template.php). */

.art-pm-module--contact-us .art-pm-module__contact-summary-label {
	font-size: var(--art-text-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.art-pm-module--contact-us.art-pm-module--summary-style-centered .art-pm-module__contact-summary-grid {
	border-color: var(--art-color-accent, #0073aa);
}

.art-pm-module--contact-us.art-pm-module--summary-style-centered .art-pm-module__contact-summary-col {
	align-items: center;
	flex-direction: column;
	text-align: center;
}

.art-pm-module--contact-us.art-pm-module--summary-style-centered .art-pm-module__contact-summary-col > .art-pm-module__contact-icon {
	color: var(--art-color-text, #111111);
	margin-top: 0;
}

.art-pm-module--contact-us.art-pm-module--summary-style-centered .art-pm-module__contact-summary-body,
.art-pm-module--contact-us.art-pm-module--summary-style-centered .art-pm-module__specialists-list {
	align-items: center;
}

.art-pm-module--contact-us.art-pm-module--summary-style-centered .art-pm-module__contact-summary-link {
	color: var(--art-color-text, #111111);
	font-size: var(--art-text-sm, 0.875rem);
	letter-spacing: 0.03em;
	text-decoration: underline;
	text-transform: uppercase;
}

.art-pm-module--contact-us.art-pm-module--summary-style-centered .art-pm-module__contact-summary-link:hover,
.art-pm-module--contact-us.art-pm-module--summary-style-centered .art-pm-module__contact-summary-link:focus {
	color: var(--art-color-accent, #0073aa);
}

.art-pm-module--contact-us.art-pm-module--summary-style-centered .art-pm-module__contact-hours {
	text-align: center;
}

/* ── Contact Us: Image layout ─────────────────────────────────────────────────── */
/* Same image/text column layout as Image & Text (.art-pm-module__image and
   .art-pm-module__text share that module's generic flex-basis and order rules
   above, applied here via the .art-pm-module--contact-us.art-pm-module--image-{left,right}
   modifiers). Was originally a separate "Contact Us (Image)" module - icon
   colour, link colour/hover/focus, hours text and the specialists list all
   already come from the unscoped Contact Us rules further up this section,
   so only the genuinely distinct rules live here. */

.art-pm-module--contact-us.art-pm-module--layout-image .art-pm-module__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-inline: auto;
	max-width: var(--art-max-width, 1200px);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--contact-us.art-pm-module--layout-image.art-pm-module--image-left .art-pm-module__image {
	order: 0;
}

.art-pm-module--contact-us.art-pm-module--layout-image.art-pm-module--image-left .art-pm-module__text {
	order: 1;
}

.art-pm-module--contact-us.art-pm-module--layout-image.art-pm-module--image-right .art-pm-module__image {
	order: 1;
}

.art-pm-module--contact-us.art-pm-module--layout-image.art-pm-module--image-right .art-pm-module__text {
	order: 0;
}

.art-pm-module--contact-us.art-pm-module--layout-image .art-pm-module__contact-details {
	display: flex;
	flex-direction: column;
	gap: calc(var(--art-spacing, 1rem) * 1.25);
	margin-top: calc(var(--art-spacing, 1rem) * 1.5);
}

.art-pm-module--contact-us.art-pm-module--layout-image .art-pm-module__contact-detail-row,
.art-pm-module--contact-us.art-pm-module--layout-boxed .art-pm-module__contact-detail-row {
	align-items: flex-start;
	display: flex;
	gap: calc(var(--art-spacing, 1rem) * 0.75);
}

.art-pm-module--contact-us.art-pm-module--layout-image .art-pm-module__contact-title {
	font-size: var(--art-text-base, 1rem);
	font-weight: 600;
	margin: 0 0 0.25rem;
}

/* Directions/View office details link directly under an address - shared by
   every layout that shows one (Panels, Cards, Inline Form, Image, Boxed;
   Summary Bar uses its own .art-pm-module__contact-summary-link instead). */
.art-pm-module--contact-us .art-pm-module__contact-address + .art-pm-module__contact-link {
	display: inline-block;
	margin-top: 0.25rem;
}

.art-pm-module--contact-us.art-pm-module--layout-image .art-pm-module__contact-buttons {
	margin-top: calc(var(--art-spacing, 1rem) * 1.5);
	padding-top: 0;
}

/* Boxed layout: title/intro sit in a text column beside a shaded box
   holding the branch's address/phone/opening hours - the Image layout's
   column split (same .art-pm-module__inner flex-wrap rules) with the image
   swapped for the box. Icon colour, link colour/hover/focus and the hours
   text block all come from the unscoped Contact Us rules further up this
   section, so only the genuinely distinct rules live here. */

.art-pm-module--contact-us.art-pm-module--layout-boxed .art-pm-module__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-inline: auto;
	max-width: var(--art-max-width, 1200px);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--contact-us.art-pm-module--layout-boxed .art-pm-module__text,
.art-pm-module--contact-us.art-pm-module--layout-boxed .art-pm-module__contact-box {
	flex: 1 1 380px;
	min-width: 280px;
}

.art-pm-module--contact-us.art-pm-module--layout-boxed.art-pm-module--box-left .art-pm-module__contact-box {
	order: 0;
}

.art-pm-module--contact-us.art-pm-module--layout-boxed.art-pm-module--box-left .art-pm-module__text {
	order: 1;
}

.art-pm-module--contact-us.art-pm-module--layout-boxed.art-pm-module--box-right .art-pm-module__contact-box {
	order: 1;
}

.art-pm-module--contact-us.art-pm-module--layout-boxed.art-pm-module--box-right .art-pm-module__text {
	order: 0;
}

.art-pm-module--contact-us.art-pm-module--layout-boxed .art-pm-module__contact-box {
	background-color: var(--art-color-alternate, #f5f5f5);
	border-radius: var(--art-radius, 0);
	display: flex;
	flex-direction: column;
	gap: calc(var(--art-spacing, 1rem) * 1.25);
	padding: calc(var(--art-spacing, 1rem) * 2);
}

.art-pm-module--contact-us.art-pm-module--layout-boxed .art-pm-module__contact-buttons {
	margin-top: calc(var(--art-spacing, 1rem) * 1.5);
	padding-top: 0;
}

/* ── Branch Finder module ─────────────────────────────────────────────────────── */

.art-pm-module--branch-finder .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module__branch-finder-controls {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.art-pm-module__branch-finder-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.art-pm-module__branch-finder-pill {
	background: var(--art-color-bg, #fff);
	border: 1px solid var(--art-color-border, #ccc);
	border-radius: 9999px;
	color: var(--art-color-text, #111);
	cursor: pointer;
	font-size: var(--art-text-sm, 0.875rem);
	padding: 0.5rem 1rem;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.art-pm-module__branch-finder-pill:hover {
	border-color: var(--art-color-accent, #0073aa);
}

.art-pm-module__branch-finder-pill.is-active {
	background: var(--art-color-accent, #0073aa);
	border-color: var(--art-color-accent, #0073aa);
	color: var(--art-color-on-accent, #fff);
}

.art-pm-module__branch-finder-pill:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}

.art-pm-module__branch-finder-search {
	display: flex;
	flex: 0 1 320px;
	position: relative;
}

.art-pm-module__branch-finder-search-input {
	border: 1px solid var(--art-color-border, #ccc);
	border-radius: var(--art-radius, 0);
	padding: 0.6rem 2.75rem 0.6rem 0.9rem;
	width: 100%;
}

.art-pm-module__branch-finder-search-submit {
	align-items: center;
	background: var(--art-color-accent, #0073aa);
	border: 0;
	border-radius: var(--art-radius, 0);
	bottom: 0;
	color: var(--art-color-on-accent, #fff);
	display: flex;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 0;
	width: 2.5rem;
}

.art-pm-module__branch-finder-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(var(--art-pm-branch-finder-columns, 3), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1023px) {
	.art-pm-module__branch-finder-grid {
		grid-template-columns: repeat(min(2, var(--art-pm-branch-finder-columns, 2)), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.art-pm-module__branch-finder-grid {
		grid-template-columns: 1fr;
	}
}

.art-pm-module__branch-finder-card {
	background: var(--art-color-bg, #fff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	overflow: hidden;
}

.art-pm-module__branch-finder-card-media {
	aspect-ratio: 4 / 3;
	background: var(--art-color-surface, #e2e2e2);
	display: block;
	overflow: hidden;
}

.art-pm-module__branch-finder-card-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-pm-module__branch-finder-card-body {
	padding: 1rem 1.25rem 1.25rem;
}

.art-pm-module__branch-finder-card-title {
	font-size: var(--art-text-lg, 1.125rem);
	margin: 0 0 0.5rem;
}

.art-pm-module__branch-finder-card-title a {
	color: inherit;
	text-decoration: none;
}

.art-pm-module__branch-finder-card-title a:hover,
.art-pm-module__branch-finder-card-title a:focus-visible {
	text-decoration: underline;
}

.art-pm-module__branch-finder-card-address {
	color: var(--art-color-muted, #666);
	font-size: var(--art-text-sm, 0.875rem);
	font-style: normal;
	margin: 0 0 0.75rem;
}

.art-pm-module__branch-finder-card-contact {
	font-size: var(--art-text-sm, 0.875rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.art-pm-module__branch-finder-card-contact li {
	margin-bottom: 0.25rem;
}

.art-pm-module__branch-finder-card-contact a {
	color: var(--art-color-text, #111);
}

.art-pm-module__branch-finder-load-more-wrap {
	margin-top: 2rem;
	text-align: center;
}

.art-pm-module__branch-finder-load-more {
	background: transparent;
	border: 1px solid var(--art-color-accent, #0073aa);
	border-radius: var(--art-radius, 0);
	color: var(--art-color-accent, #0073aa);
	cursor: pointer;
	padding: 0.75rem 2rem;
}

.art-pm-module__branch-finder-load-more:hover {
	background: var(--art-color-accent, #0073aa);
	color: var(--art-color-on-accent, #fff);
}

.art-pm-module__branch-finder-map {
	background: var(--art-color-surface, #e2e2e2);
	margin-bottom: 2rem;
	min-height: 24rem;
	overflow: hidden;
	position: relative;
}

/* Map Only: the grid/Load More stay in the markup as the map's marker data
   source (see initBranchFinderMap() in art-division-page-modules.js) but
   are never meant to be seen. */
.art-pm-module--branch-finder-display-map .art-pm-module__branch-finder-grid,
.art-pm-module--branch-finder-display-map .art-pm-module__branch-finder-load-more-wrap {
	display: none;
}

.art-pm-module--branch-finder-display-map .art-pm-module__branch-finder-map {
	margin-bottom: 0;
}

.art-pm-module--branch-finder-map-position-below .art-pm-module__branch-finder-map {
	margin-bottom: 0;
	margin-top: 2rem;
}

/* Marker popup/info window content - built as an HTML string in
   buildPopupHtml() (art-division-page-modules.js) and handed to either
   Leaflet's bindPopup() or a Google InfoWindow, whichever wraps it in its
   own container, so only the content itself is styled here. */
.art-pm-branch-finder-map-popup {
	align-items: flex-start;
	display: flex;
	gap: 0.75rem;
}

.art-pm-branch-finder-map-popup__image {
	border-radius: var(--art-radius, 0);
	flex: none;
	height: 3.5rem;
	object-fit: cover;
	width: 3.5rem;
}

.art-pm-branch-finder-map-popup__body {
	min-width: 0;
}

.art-pm-branch-finder-map-popup__title {
	font-size: var(--art-text-sm, 0.875rem);
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.art-pm-branch-finder-map-popup__address {
	color: var(--art-color-muted, #666);
	font-size: var(--art-text-xs, 0.75rem);
	margin: 0;
}

/* ── Property Search module ──────────────────────────────────────────────────── */

.art-pm-module--property-search .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--property-search.art-pm-module--layout-fullwidth .art-pm-module__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module--property-search.art-pm-module--layout-boxed .art-pm-module__property-search-box {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e5e5);
	border-radius: var(--art-radius, 0);
	padding: 1.5rem;
}

/* ── Map module ───────────────────────────────────────────────────────────────── */

.art-pm-module--map .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module--map.art-pm-module--fullwidth .art-pm-module__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module--map .art-pm-module__map {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.art-pm-module--map.art-pm-module--map-height-small .art-pm-module__map {
	height: 20rem;
}

.art-pm-module--map.art-pm-module--map-height-medium .art-pm-module__map {
	height: 28rem;
}

.art-pm-module--map.art-pm-module--map-height-large .art-pm-module__map {
	height: 36rem;
}

@media (max-width: 767px) {
	.art-pm-module--map.art-pm-module--map-height-medium .art-pm-module__map,
	.art-pm-module--map.art-pm-module--map-height-large .art-pm-module__map {
		height: 20rem;
	}
}

/* Marker popup/info window content - built as an HTML string in
   buildPopupHtml() (initMapModuleMaps(), art-division-page-modules.js) and
   handed to Leaflet's bindPopup()/Google's InfoWindow, so these rules apply
   inside whichever provider's own popup chrome wraps it. */
.art-pm-map-module-popup__title {
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.art-pm-map-module-popup__address,
.art-pm-map-module-popup__phone,
.art-pm-map-module-popup__email {
	color: var(--art-color-muted, #666);
	font-size: var(--art-text-xs, 0.75rem);
	margin: 0;
}

/* ── Spacer module ────────────────────────────────────────────────────────────── */

/* padding-top itself is set inline per-instance (template.php) - this just
   guards against the div collapsing to 0 width inside a flex/grid ancestor. */
.art-pm-module--spacer {
	width: 100%;
}

/* ── Property Market Stats module ────────────────────────────────────────────── */

.art-pm-module--property-market-stats {
	--art-pm-market-stats-positive: #3b6d11;
	--art-pm-market-stats-negative: #a32d2d;
}

.art-pm-module--property-market-stats .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-market-stats__section {
	margin-top: 2.5rem;
}

.art-pm-market-stats__section:first-child {
	margin-top: 0;
}

.art-pm-market-stats__section-heading {
	font-size: var(--art-text-lg, 1.25rem);
	margin: 0 0 1rem;
	text-align: left;
}

.art-pm-market-stats__row {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.art-pm-market-stats__row:has(.art-pm-market-stats__image) {
		align-items: stretch;
		grid-template-columns: 1fr 1fr;
	}

	.art-pm-market-stats__row--image-right .art-pm-market-stats__image {
		order: 2;
	}
}

.art-pm-market-stats__image {
	border-radius: var(--art-radius, 0);
	min-height: 12rem;
	overflow: hidden;
}

.art-pm-market-stats__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-pm-market-stats__grid {
	display: grid;
	gap: 1.25rem;
	/* 240px keeps this at a clean 2 columns when sharing a row 50/50 with an
	   image (~570px available), and 4 columns at the module's full width
	   (~1170px) - a smaller minimum lets 3 or more columns squeeze into the
	   halved image-row width, or 5+ into the full-width row, both uneven. */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Rental By Bedrooms renders House and Flat as two stacked grids rather
   than one continuous one, so they need their own row gap between them. */
.art-pm-market-stats__grid + .art-pm-market-stats__grid {
	margin-top: 1.25rem;
}

.art-pm-market-stats__card {
	background: var(--art-color-surface, #f5f5f5);
	border-radius: var(--art-radius, 0);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1.25rem 1rem;
	text-align: center;
}

.art-pm-market-stats__icon {
	color: var(--art-color-text, currentColor);
	display: flex;
	justify-content: center;
	gap: 2px;
	margin-bottom: 0.5rem;
}

.art-pm-market-stats__icon-svg {
	display: block;
	height: 2rem;
	width: 2rem;
}

.art-pm-market-stats__label {
	color: var(--art-color-text, inherit);
	font-size: 1.1rem;
}

.art-pm-market-stats__value {
	color: var(--art-color-accent, inherit);
	font-family: var(--art-font-heading, inherit);
	font-size: min(var(--art-text-2xl, 1.5rem), 2.3rem);
	margin: 0;
}

.art-pm-market-stats__card--large .art-pm-market-stats__value {
	font-size: min(var(--art-text-2xl, 2rem), 2.3rem);
}

.art-pm-market-stats__meta,
.art-pm-market-stats__floor-area {
	color: var(--art-color-muted, #666);
	display: block;
	font-family: var(--art-font-base, inherit);
	font-size: var(--art-text-sm, 0.875rem);
}

.art-pm-market-stats__trend {
	align-items: center;
	display: inline-flex;
	gap: 0.25rem;
}

.art-pm-market-stats__trend.is-positive {
	color: var(--art-pm-market-stats-positive);
}

.art-pm-market-stats__trend.is-negative {
	color: var(--art-pm-market-stats-negative);
}

.art-pm-market-stats__trend-svg {
	display: inline-block;
	height: 0.75em;
	width: 0.75em;
}

.art-pm-market-stats__context {
	color: var(--art-color-muted, #666);
	font-family: var(--art-font-base, inherit);
	font-size: var(--art-text-sm, 0.875rem);
	font-style: italic;
	margin: 0.75rem 0 0;
	text-align: left;
}

/* ── Hero hidden at a screen size ──────────────────────────────────────────────
   The eyes on the Hero's three background image fields (admin) add
   art-pm-hero--hide-{desktop|tablet|mobile} (render.php). At that size the
   section takes no space: everything but the heading (and the elements it
   sits inside) is removed - so no hidden-but-focusable buttons - and the
   section itself is screen-reader only, so the heading still counts for
   screen readers and search engines. !important beats the section's own
   inline height/min-height. */
@media ( min-width: 1024px ) {
	.art-pm-hero.art-pm-hero--hide-desktop {
		border: 0 !important;
		clip: rect( 0, 0, 0, 0 ) !important;
		clip-path: inset( 50% ) !important;
		height: 1px !important;
		margin: -1px !important;
		max-height: none !important;
		min-height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		white-space: nowrap !important;
		width: 1px !important;
	}

	.art-pm-hero.art-pm-hero--hide-desktop *:not( :has( .art-pm-hero__heading ) ):not( .art-pm-hero__heading ):not( .art-pm-hero__heading * ) {
		display: none !important;
	}
}

@media ( min-width: 768px ) and ( max-width: 1023px ) {
	.art-pm-hero.art-pm-hero--hide-tablet {
		border: 0 !important;
		clip: rect( 0, 0, 0, 0 ) !important;
		clip-path: inset( 50% ) !important;
		height: 1px !important;
		margin: -1px !important;
		max-height: none !important;
		min-height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		white-space: nowrap !important;
		width: 1px !important;
	}

	.art-pm-hero.art-pm-hero--hide-tablet *:not( :has( .art-pm-hero__heading ) ):not( .art-pm-hero__heading ):not( .art-pm-hero__heading * ) {
		display: none !important;
	}
}

@media ( max-width: 767px ) {
	.art-pm-hero.art-pm-hero--hide-mobile {
		border: 0 !important;
		clip: rect( 0, 0, 0, 0 ) !important;
		clip-path: inset( 50% ) !important;
		height: 1px !important;
		margin: -1px !important;
		max-height: none !important;
		min-height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		white-space: nowrap !important;
		width: 1px !important;
	}

	.art-pm-hero.art-pm-hero--hide-mobile *:not( :has( .art-pm-hero__heading ) ):not( .art-pm-hero__heading ):not( .art-pm-hero__heading * ) {
		display: none !important;
	}
}

/* A transparent header (theme body class hero-nav-transparent) overlays the
   hero, so the theme gives #content no top padding - with the hero hidden
   at that size the next section slid up under the header instead. Restore
   the header's height (plus any top bar) as padding at that size. Matched
   on <body>, not #content: the sidebar hero is output before #content. */
@media ( min-width: 1024px ) {
	body.hero-nav-transparent:has( .art-pm-hero--hide-desktop ) #content {
		padding-top: calc( var( --art-header-height, 0px ) + var( --art-topbar-height, 0px ) ) !important;
	}
}

@media ( min-width: 768px ) and ( max-width: 1023px ) {
	body.hero-nav-transparent:has( .art-pm-hero--hide-tablet ) #content {
		padding-top: calc( var( --art-header-height, 0px ) + var( --art-topbar-height, 0px ) ) !important;
	}
}

@media ( max-width: 767px ) {
	body.hero-nav-transparent:has( .art-pm-hero--hide-mobile ) #content {
		padding-top: calc( var( --art-header-height, 0px ) + var( --art-topbar-height, 0px ) ) !important;
	}
}

/* The first section after a hidden hero loses its top padding at that size -
   the padding was there to space it from the hero, and with the hero gone
   it only left a gap under the header. Covers the sidebar hero (output
   before #content, so matched on <body>) and a Hero module placed as a
   section in the page. */
@media ( min-width: 1024px ) {
	body:has( > #page > .art-pm-hero--hide-desktop ) #main > .art-pm-module:first-child,
	body:has( .site > .art-pm-hero--hide-desktop ) #main > .art-pm-module:first-child,
	#main > .art-pm-hero--hide-desktop + .art-pm-module {
		padding-top: 0 !important;
	}
}

@media ( min-width: 768px ) and ( max-width: 1023px ) {
	body:has( > #page > .art-pm-hero--hide-tablet ) #main > .art-pm-module:first-child,
	body:has( .site > .art-pm-hero--hide-tablet ) #main > .art-pm-module:first-child,
	#main > .art-pm-hero--hide-tablet + .art-pm-module {
		padding-top: 0 !important;
	}
}

@media ( max-width: 767px ) {
	body:has( > #page > .art-pm-hero--hide-mobile ) #main > .art-pm-module:first-child,
	body:has( .site > .art-pm-hero--hide-mobile ) #main > .art-pm-module:first-child,
	#main > .art-pm-hero--hide-mobile + .art-pm-module {
		padding-top: 0 !important;
	}
}

/* ── Table module ─────────────────────────────────────────────────────────────
   Header row in the Primary colour (Default), lines only (Minimal) or
   alternating row shading (Striped). The table body always sits on the page
   background so it reads on any module Background Colour. Below 768px,
   --table-mobile-stack turns each row into a small card with every cell
   labelled by its column heading (data-label); --table-mobile-scroll keeps
   the table and scrolls it sideways. */

.art-pm-module--table .art-pm-module__inner {
	margin-inline: auto;
	max-width: var(--art-max-width, 75rem);
	padding-left: 15px;
	padding-right: 15px;
}

.art-pm-module__table-wrap {
	overflow-x: auto;
}

/* With an Image: title and text beside it, the table full width below. */
.art-pm-module__table-top {
	align-items: start;
	display: grid;
	gap: 2rem;
	margin-bottom: 2rem;
}

.art-pm-module__table-top > .art-pm-module__header {
	margin-bottom: 0;
	margin-inline: 0;
	max-width: none;
}

.art-pm-module__table-image .art-pm-module__img {
	border-radius: var(--art-radius, 0);
	display: block;
	height: auto;
	width: 100%;
}

@media (min-width: 768px) {
	.art-pm-module__table-top {
		gap: 3rem;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.art-pm-module__table-top--image-left .art-pm-module__table-image {
		order: -1;
	}
}

.art-pm-module__table {
	border-collapse: collapse;
	font-size: var(--art-text-sm, 0.875rem);
	width: 100%;
}

.art-pm-module__table th,
.art-pm-module__table td {
	border-bottom: 1px solid var(--art-color-border, #e5e5e5);
	padding: 0.65em 0.8em;
	text-align: left;
	vertical-align: top;
}

.art-pm-module__table tbody th,
.art-pm-module__table td {
	background-color: var(--art-color-bg, #ffffff);
	color: var(--art-color-text, inherit);
}

.art-pm-module__table thead th {
	background-color: var(--art-color-primary, #1a1a2e);
	color: var(--art-pm-on-primary);
	font-weight: 600;
}

.art-pm-module__table .art-pm-module__table-row-heading {
	font-weight: 600;
}

.art-pm-module--table-minimal .art-pm-module__table thead th {
	background-color: transparent;
	border-bottom: 2px solid currentColor;
	color: inherit;
}

.art-pm-module--table-striped .art-pm-module__table tbody tr:nth-child(even) > * {
	background-color: var(--art-color-surface, #f5f5f5);
}

.art-pm-module__table-after {
	margin-top: 1.5rem;
}

.art-pm-module__table-after > :first-child {
	margin-top: 0;
}

.art-pm-module__table-after > :last-child {
	margin-bottom: 0;
}

@media (max-width: 767.98px) {
	.art-pm-module--table-mobile-scroll .art-pm-module__table {
		min-width: 36rem;
	}

	.art-pm-module--table-mobile-stack .art-pm-module__table,
	.art-pm-module--table-mobile-stack .art-pm-module__table tbody,
	.art-pm-module--table-mobile-stack .art-pm-module__table tr,
	.art-pm-module--table-mobile-stack .art-pm-module__table th,
	.art-pm-module--table-mobile-stack .art-pm-module__table td {
		display: block;
	}

	.art-pm-module--table-mobile-stack .art-pm-module__table thead {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.art-pm-module--table-mobile-stack .art-pm-module__table tr {
		border: 1px solid var(--art-color-border, #e5e5e5);
		border-radius: var(--art-radius, 0);
		margin-bottom: 0.75rem;
		overflow: hidden;
	}

	.art-pm-module--table-mobile-stack .art-pm-module__table tbody th,
	.art-pm-module--table-mobile-stack .art-pm-module__table td {
		border-bottom: 0;
		padding: 0.35em 0.9em;
	}

	.art-pm-module--table-mobile-stack .art-pm-module__table tr > :first-child {
		padding-top: 0.75em;
	}

	.art-pm-module--table-mobile-stack .art-pm-module__table tr > :last-child {
		padding-bottom: 0.75em;
	}

	.art-pm-module--table-mobile-stack .art-pm-module__table td[data-label]::before {
		color: var(--art-color-muted, inherit);
		content: attr(data-label);
		display: block;
		font-size: 0.85em;
		font-weight: 600;
	}

	/* The row heading is the card's title, so it needs no label. */
	.art-pm-module--table-mobile-stack .art-pm-module__table .art-pm-module__table-row-heading {
		font-size: 1.05em;
	}
}

/* ── Hero: Lead Line, Frame the Media, Video Behaviour "Film" ─────────────── */

/* Lead Line - a larger line between the heading and the Subheading. */
.art-pm-hero__lead {
	font-size: clamp( 1.15rem, 1rem + 0.5vw, 1.4rem );
	line-height: 1.4;
	margin: 0 0 0.75rem;
	max-width: var( --art-pm-hero-subheading-max-width, 48rem );
}

/* Frame the Media (split layouts): the image/video inset from the column
   edges with rounded corners. The picture/video inside are positioned to
   fill the frame rather than the whole column. */
.art-pm-hero--media-framed .art-pm-hero__media {
	align-items: center;
	display: flex;
	padding: clamp( 1rem, 3vw, 3rem );
}

/* Standard 16:9 video proportions, centred in the column - not stretched to
   the hero's height, which made the shape change with the screen size. */
.art-pm-hero__media-frame {
	aspect-ratio: 16 / 9;
	border-radius: var( --art-radius, 0 );
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
}

/* Framed media stays inside the page width (no breakout to the screen
   edge), its outer edge lined up with the header; only the side facing the
   text keeps a gap. */
@media (min-width: 768px) {
	.art-pm-hero--split-50-50.art-pm-hero--media-framed .art-pm-hero__media,
	.art-pm-hero--split-60-40.art-pm-hero--media-framed .art-pm-hero__media {
		margin-left: 0;
		margin-right: 0;
		padding-right: 0;
		width: calc(0.5 * min(100vw, var(--art-max-width, 75rem)));
	}

	.art-pm-hero--split-60-40.art-pm-hero--media-framed .art-pm-hero__media {
		width: calc(0.4 * min(100vw, var(--art-max-width, 75rem)));
	}

	.art-pm-hero--split-50-50.art-pm-hero--media-framed.art-pm-hero--image-left .art-pm-hero__media,
	.art-pm-hero--split-60-40.art-pm-hero--media-framed.art-pm-hero--image-left .art-pm-hero__media {
		margin-left: 0;
		padding-left: 0;
		padding-right: clamp( 1rem, 3vw, 3rem );
	}

	.art-pm-hero--split-60-40.art-pm-hero--media-framed.art-pm-hero--image-left .art-pm-hero__media {
		width: calc(0.6 * min(100vw, var(--art-max-width, 75rem)));
	}
}

/* Phones: the split media column is 16:9 itself - a framed one fits its
   (16:9) frame instead, so there's no spare space above and below. */
@media (max-width: 767px) {
	.art-pm-hero--split-50-50.art-pm-hero--media-framed .art-pm-hero__media,
	.art-pm-hero--split-60-40.art-pm-hero--media-framed .art-pm-hero__media,
	.art-pm-hero--split-50-50.art-pm-hero--media-framed.art-pm-hero--image-left .art-pm-hero__media,
	.art-pm-hero--split-60-40.art-pm-hero--media-framed.art-pm-hero--image-left .art-pm-hero__media {
		aspect-ratio: auto;
	}
}

/* Film: poster + overlay until played. */
.art-pm-hero__film {
	inset: 0;
	position: absolute;
}

.art-pm-hero__film-video {
	display: none;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.art-pm-hero__film.is-playing .art-pm-hero__film-video {
	background: #000;
	display: block;
	object-fit: contain;
}

.art-pm-hero__film-overlay {
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0.35 ) 0%, rgba( 0, 0, 0, 0 ) 30%, rgba( 0, 0, 0, 0 ) 70%, rgba( 0, 0, 0, 0.45 ) 100% );
	color: #fff;
	inset: 0;
	position: absolute;
}

.art-pm-hero__film.is-playing .art-pm-hero__film-overlay {
	display: none;
}

.art-pm-hero__film-label {
	font-size: 0.75rem;
	left: clamp( 1rem, 2.5vw, 1.75rem );
	letter-spacing: 0.2em;
	position: absolute;
	text-transform: uppercase;
	top: clamp( 1rem, 2.5vw, 1.75rem );
}

.art-pm-hero__film-label::after {
	background: currentColor;
	content: "";
	display: block;
	height: 1px;
	margin-top: 0.75rem;
	width: 2rem;
}

.art-pm-hero__film-play {
	align-items: center;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.25 );
	color: #1a1a1a;
	cursor: pointer;
	display: flex;
	height: 4.5rem;
	justify-content: center;
	left: 50%;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
	transition: transform 0.3s ease;
	width: 4.5rem;
}

.art-pm-hero__film-play:hover,
.art-pm-hero__film-play:focus-visible {
	transform: translate( -50%, -50% ) scale( 1.08 );
}

.art-pm-hero__film-play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.art-pm-hero__film-play svg {
	height: 1.75rem;
	margin-left: 0.2rem;
	width: 1.75rem;
}

.art-pm-hero__film-caption {
	bottom: clamp( 1rem, 2.5vw, 1.75rem );
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	position: absolute;
	right: clamp( 1rem, 2.5vw, 1.75rem );
	text-transform: uppercase;
}

@media ( prefers-reduced-motion: reduce ) {
	.art-pm-hero__film-play {
		transition: none;
	}
}

/* Text Link CTA style: sized to its text, never stretched to share the row
   like a button (the split layouts' flex: 1 1 0 above). */
.art-pm-hero__ctas .art-pm-hero__cta.art-btn--link {
	flex: 0 0 auto !important;
	min-height: 0;
	padding-inline: 0;
}

/* Framed split hero under a Transparent Navbar: the content starts below the
   header (it otherwise sat tight under it), with space top and bottom, and
   the section grows to fit rather than clipping to its set height. */
@media (min-width: 768px) {
	.hero-nav-transparent .art-pm-hero--media-framed {
		box-sizing: border-box;
		height: auto !important;
		max-height: none !important;
		min-height: calc(var(--art-header-height, 100px) + var(--art-pm-hero-min-height, 0px)) !important;
		padding-bottom: clamp(2rem, 5vw, 4.5rem);
		padding-top: calc(var(--art-header-height, 100px) + clamp(1rem, 3vw, 2.5rem));
	}
}


/* ── Content Multi (Stacked): Read More ──────────────────────────────────────
   initContentMultiReadMore() adds --collapsed (and --faded) to a row's text
   only when it is longer than this height. Opening and closing animate the
   height (--animating, an inline max-height from the JS); the fade stays on
   the moving bottom edge until the text is fully open. The fade is a mask
   over roughly the last two lines, so it works on any Background Colour. */
.art-pm-module__content-multi-row-text--collapsed {
	max-height: var(--art-pm-content-multi-read-more-height, 11rem);
	overflow: hidden;
}

.art-pm-module__content-multi-row-text--faded {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5em), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5em), transparent 100%);
}

.art-pm-module__content-multi-row-text--animating {
	overflow: hidden;
	transition: max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.art-pm-module__content-multi-read-more {
	background: none;
	border: 0;
	color: var(--art-color-accent, #0073aa);
	cursor: pointer;
	font: inherit;
	margin-top: 0.75rem;
	min-height: 24px;
	padding: 0;
	text-decoration: underline;
}

.art-pm-module__content-multi-read-more:hover {
	color: var(--art-color-accent-hover, #005177);
}

.art-pm-module__content-multi-read-more:focus-visible {
	outline: 2px solid var(--art-color-accent, #0073aa);
	outline-offset: 2px;
}