/* ==========================================================================
   Blushwood Realty Group - custom CSS
   --------------------------------------------------------------------------
   Layout, spacing, colour and type are set in Elementor (Global Site Settings
   + widget controls) using the design's exact values. This file covers only
   what Elementor Pro has no control for. Every rule says why it is here.

   Contents
     1. Hairline SVG icon set
     2. Header: transparent -> solid on scroll
     3. Hero scrim
     4. Testimonial rails (dual vertical marquee)
     5. Partner logo marquee
     6. Headline emphasis
     7. Design breakpoints Elementor cannot express
     8. Motion preferences
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hairline SVG icon set.

   The Blushwood icons are stroke-based (fill:none; stroke:currentColor;
   stroke-width:1.9). Elementor tints icons by writing `fill` onto the <svg>,
   which would flood a stroked shape solid. So: neutralise the fill and drive
   the stroke from `color` instead. `!important` is required because
   Elementor's generated selector is far more specific than anything here.

   Buttons need no colour rule - .elementor-button sets `color`, and
   currentColor inherits into the icon on its own.
   -------------------------------------------------------------------------- */
.elementor-icon svg,
.elementor-icon-list-icon svg,
.elementor-social-icon svg,
.elementor-button .elementor-button-icon svg,
.e-n-carousel .swiper-button-next svg,
.e-n-carousel .swiper-button-prev svg {
	fill: none !important;
	stroke: currentColor;
}

/* The Instagram and LinkedIn marks each carry one deliberately filled dot. */
.elementor-social-icon svg [fill="currentColor"],
.elementor-icon svg [fill="currentColor"] {
	fill: currentColor !important;
	stroke: none;
}

/* Icon colour per context, matching the design. */
.bw-header .elementor-icon svg,
.bw-header .elementor-button .elementor-button-icon svg {
	color: #fdfbfa;
}

.bw-header .elementor-icon:hover svg {
	color: var( --e-global-color-blushlt );
}

.bw-footer-social .elementor-social-icon svg {
	color: var( --e-global-color-onlight );
}

.bw-footer-social .elementor-social-icon:hover svg {
	color: #fff;
}

.bw-footer-contact .elementor-icon-list-icon svg {
	color: var( --e-global-color-onlight );
}

/* Compliance marks sit as one artwork file; cap the height so the bottom bar
   keeps its rhythm regardless of the source image's pixel dimensions. */
.bw-compliance img {
	height: 34px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.bw-card-contact .elementor-icon-list-icon svg,
.bw-cta-contact .elementor-icon-list-icon svg,
.bw-check .elementor-icon svg {
	color: var( --e-global-color-primary );
}

/* CTA contact rows: the design sets each icon in a white disc. Elementor's
   Icon List has no background control for the icon itself. */
.bw-cta-contact .elementor-icon-list-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
}

/* Carousel arrows on the dark "Recently sold" band. */
.bw-sold-carousel .swiper-button-next svg,
.bw-sold-carousel .swiper-button-prev svg {
	color: #f3ede9;
}

/* --------------------------------------------------------------------------
   2. Header: transparent over the hero, solid once the page scrolls.

   The header is positioned with Elementor's Advanced > Positioning controls.
   What Elementor has no control for is changing appearance *in response to
   scroll*, so custom.js adds .bw-header--scrolled past 40px.
   Values from the design: rgba(18,15,13,.92), blur 14px, 120px -> 92px.
   -------------------------------------------------------------------------- */
.bw-header {
	transition: background-color 0.35s ease, box-shadow 0.35s ease,
		border-color 0.35s ease, min-height 0.35s ease;
	border-bottom: 1px solid transparent;
}

.bw-header--scrolled {
	background-color: rgba( 18, 15, 13, 0.92 );
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	border-bottom-color: rgba( 255, 255, 255, 0.08 );
	box-shadow: 0 8px 30px -18px rgba( 0, 0, 0, 0.6 );
	min-height: 92px;
}

/* --------------------------------------------------------------------------
   3. Hero scrim.

   The hero needs a dark wash at BOTH the top (so the white nav stays legible)
   and the bottom (so the headline does). Elementor's Background Overlay is a
   single two-stop gradient and cannot express a transparent middle.
   -------------------------------------------------------------------------- */
/* Lift the content above the scrim. Target direct children, not .e-con-inner:
   a full-width container renders as .e-con-full and has no inner wrapper, so
   the content stayed unpositioned and the positioned ::after painted over it. */
.bw-hero-scrim > * {
	position: relative;
	z-index: 1;
}

.bw-hero-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		linear-gradient( to bottom, rgba( 0, 0, 0, 0.70 ) 0%, rgba( 0, 0, 0, 0 ) 50% ),
		linear-gradient( to top, rgba( 20, 16, 13, 0.76 ) 0%, rgba( 20, 16, 13, 0 ) 46% );
}

/* Slow zoom-in on load, exactly as the design opens. */
.bw-hero-scrim {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Testimonial rails.

   Two columns of review cards scrolling in opposite directions, masked at top
   and bottom, pausing on hover. Elementor's carousels are step-based and
   horizontal only - there is no native continuous vertical marquee. Each rail
   renders its cards twice so translateY(-50%) loops seamlessly.
   Timings are the design's: 46s up, 52s down.
   -------------------------------------------------------------------------- */
.bw-testi-rails {
	height: clamp( 460px, 64vh, 660px );
	overflow: hidden;
	-webkit-mask-image: linear-gradient( 180deg, transparent, #000 12%, #000 88%, transparent );
	mask-image: linear-gradient( 180deg, transparent, #000 12%, #000 88%, transparent );
}

.bw-rail-track {
	overflow: hidden;
}

.bw-rail-a,
.bw-rail-b {
	will-change: transform;
}

.bw-rail-a {
	animation: bwRailUp 46s linear infinite;
}

.bw-rail-b {
	animation: bwRailDown 52s linear infinite;
}

.bw-testi-rails:hover .bw-rail-a,
.bw-testi-rails:hover .bw-rail-b {
	animation-play-state: paused;
}

@keyframes bwRailUp {
	from { transform: translateY( 0 ); }
	to   { transform: translateY( -50% ); }
}

@keyframes bwRailDown {
	from { transform: translateY( -50% ); }
	to   { transform: translateY( 0 ); }
}

/* --------------------------------------------------------------------------
   5. Partner logo strip.

   A native Image Carousel (5 up on desktop, 3 tablet, 2 mobile). The only thing
   it cannot do is normalise the marks: they range from wide wordmarks to a tall
   portrait badge, and the widget scales slides to a common WIDTH, which blows
   the portrait one up. Size them on height and centre them in their slide.
   -------------------------------------------------------------------------- */
.bw-logo-carousel .swiper-slide,
.bw-logo-carousel .swiper-slide-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
}

.bw-logo-carousel .swiper-slide img {
	height: 46px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: 0;
}

@media ( max-width: 767px ) {
	.bw-logo-carousel .swiper-slide img {
		height: 38px;
	}
}

/* --------------------------------------------------------------------------
   5a. "Follow along" portrait.

   Height and object-fit come from the image widget's own controls. Elementor's
   Object Position control only exposes keyword pairs (top left, center center,
   ...), so the pixel offset that frames the shot is set here.

   !important is required: the control defaults to "center center" and always
   emits it, from a per-element selector far more specific than this class.
   -------------------------------------------------------------------------- */
.bw-follow-image img {
	object-position: 0 -100px !important;
}

/* --------------------------------------------------------------------------
   5b. Card hover.

   The card lifts and deepens its shadow while the image inside scales. The
   image reacting to the *card's* hover is a descendant-of-ancestor rule, which
   widget controls cannot express, so the whole effect is kept together here.
   Values are the design's: -6px, 0 34px 60px -34px rgba(26,22,19,.4), 1.06.
   -------------------------------------------------------------------------- */
.bw-card {
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), box-shadow 0.3s ease;
}
.bw-card .elementor-widget-image {
    overflow: hidden;
}
.bw-card img {
	transition: transform 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.bw-card:hover {
	transform: translateY( -6px );
	box-shadow: 0 34px 60px -34px rgba( 26, 22, 19, 0.4 ) !important;
}

.bw-card:hover img {
	transform: scale( 1.06 );
}

/* Buttons lift 2px, as the design's shared `lift` handler does. */
.elementor-button {
	transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease,
		border-color 0.25s ease;
}

.elementor-button:hover {
	transform: translateY( -2px );
}

/* --------------------------------------------------------------------------
   5c. "Recently sold" carousel navigation.

   The design puts prev/next below the rail, left-aligned, as 50px outline
   circles. Elementor's arrows_position control only offers inside/outside.
   The widget positions its arrows from custom properties (top defaults to 50%,
   i.e. centred over the slides). Retargeting those properties is cleaner and
   more upgrade-safe than out-specifying Elementor's selectors: move both to
   100% + 32px (below the rail) and pull "next" over to sit beside "prev".
   -------------------------------------------------------------------------- */
.bw-sold-carousel {
	--e-n-carousel-arrow-prev-top-align: 100%;
	--e-n-carousel-arrow-prev-top-position: 32px;
	--e-n-carousel-arrow-prev-left-align: 0px;
	--e-n-carousel-arrow-prev-caption-spacing: 0px;

	--e-n-carousel-arrow-next-top-align: 100%;
	--e-n-carousel-arrow-next-top-position: 32px;
	--e-n-carousel-arrow-next-caption-spacing: 0px;
	/* "next" is offset from the right edge; place it 62px in from the left. */
	--e-n-carousel-arrow-next-right-align: calc( 100% - 112px );

	/* Room beneath the slides for the row of buttons. */
	padding-bottom: 82px;
}

.bw-sold-carousel .elementor-swiper-button {
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	border: 1px solid #3a322c;
	border-radius: 50%;
	background: transparent;
	color: #f3ede9;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bw-sold-carousel .elementor-swiper-button:hover {
	background-color: var( --e-global-color-blushlt );
	border-color: var( --e-global-color-blushlt );
	color: var( --e-global-color-secondary );
}

.bw-sold-carousel .elementor-swiper-button:hover svg {
	color: var( --e-global-color-secondary );
}

/* --------------------------------------------------------------------------
   5d. Footer and off-canvas link hovers, per the design's handlers.
   -------------------------------------------------------------------------- */
.bw-footer-social .elementor-social-icon {
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.bw-footer-social .elementor-social-icon:hover {
	background-color: var( --e-global-color-blushlt ) !important;
	border-color: var( --e-global-color-blushlt ) !important;
}

.bw-footer-social .elementor-social-icon:hover svg {
	color: var( --e-global-color-secondary );
}

/* In-page footer links slide 5px, external ones just recolour. */
.bw-footer .elementor-nav-menu a {
	transition: color 0.25s ease, transform 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.bw-footer .elementor-nav-menu a:hover {
	transform: translateX( 5px );
}

/* --------------------------------------------------------------------------
   5d2. Header dropdown.

   Elementor styles dropdown colours and type through widget controls, but not
   the panel itself - no radius, shadow, offset or entrance. A cream panel
   against the dark header echoes the off-canvas treatment.
   -------------------------------------------------------------------------- */
/* Scope to the desktop submenu only: the mobile nav container carries the same
   .elementor-nav-menu--dropdown class and must not inherit any of this. */
.bw-nav .elementor-nav-menu--main .sub-menu {
	border-radius: 14px;
	box-shadow: 0 26px 50px -22px rgba( 18, 15, 13, 0.55 );
	border: 1px solid #eaddd9;
	margin-top: 30px;
	min-width: 272px;
	padding: 8px 0;
	/* Keep item hover backgrounds inside the rounded corners. Safe here because
	   the arrow and hover bridge are drawn outside the panel via `clip` rather
	   than `hidden`, which would cut them off. */
	overflow: clip;
	overflow-clip-margin: 24px;
}

/* Bridge the gap to the parent item. Without this the pointer leaves every
   hoverable element on the way down and the panel closes before you reach it.
   The pseudo-element is hit-tested as part of the submenu, so hover holds. */
.bw-nav .elementor-nav-menu--main .sub-menu::before {
	content: "";
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	height: 30px;
}

/* Arrow tying the panel to its parent item. No overflow:hidden on the panel,
   or this gets clipped - the 8px vertical padding keeps item hover states
   clear of the rounded corners instead. */
.bw-nav .elementor-nav-menu--main .sub-menu::after {
	content: "";
	position: absolute;
	top: -6px;
	left: 26px;
	width: 11px;
	height: 11px;
	background: #fbf7f5;
	border-left: 1px solid #eaddd9;
	border-top: 1px solid #eaddd9;
	transform: rotate( 45deg );
}

/* Shift the label by trading padding left-for-right so the horizontal total
   stays at 44px. The box never changes size, so the panel neither reflows nor
   lets the hover background slide out past its edge - which is what a
   transform did, since it moved the link's background with it. */
.bw-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
	border-radius: 0;
	transition: color 0.25s ease, background-color 0.25s ease,
		padding 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.bw-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover {
	padding-left: 30px;
	padding-right: 14px;
}

/* Hairlines between items, but not under the last one. */
.bw-nav .elementor-nav-menu--main .sub-menu li:not( :last-child ) > a.elementor-sub-item {
	border-bottom: 1px solid #f2e8e5;
}

/* --------------------------------------------------------------------------
   Communities submenu: ten towns in one column is unwieldy, so it runs two on
   desktop. CSS columns rather than flex on purpose - SmartMenus toggles the
   panel with an inline `display`, which would beat a stylesheet `display:flex`
   and leave the menu permanently open (or permanently shut).
   -------------------------------------------------------------------------- */
@media ( min-width: 1081px ) {
	.bw-nav .bw-mega > .sub-menu {
		min-width: 520px;
		column-count: 2;
		column-gap: 0;
	}

	.bw-nav .bw-mega > .sub-menu > li {
		break-inside: avoid;
	}

	/* A hairline between the two columns instead of under every item. */
	.bw-nav .bw-mega > .sub-menu > li > a.elementor-sub-item {
		border-bottom: 0;
	}

	.bw-nav .bw-mega > .sub-menu > li:nth-child( n + 6 ) > a.elementor-sub-item {
		border-left: 1px solid #f2e8e5;
	}
}

/* Nudge the parent's chevron away from its label. */
.bw-nav .elementor-nav-menu--main .sub-arrow {
	margin-inline-start: 7px;
}

.bw-nav .elementor-nav-menu--main .sub-arrow svg {
	width: 9px;
	height: 9px;
	fill: currentColor !important;
	stroke: none;
}

/* --------------------------------------------------------------------------
   5e. Navigation panel (Elementor Popup).

   Opening and closing are native: the popup's "open_selector" watches
   .bw-menu-toggle and its built-in close button handles dismissal. Only the
   things Elementor has no control for live here.
   -------------------------------------------------------------------------- */
.bw-menu-toggle {
	cursor: pointer;
}

/* The panel scrolls internally when the menu is taller than the viewport. */
.bw-nav-popup .dialog-message {
	overflow-y: auto;
}

/* Items nudge right on hover, as the design's menuIn handler does. */
.bw-panel-nav .elementor-nav-menu a {
	transition: color 0.3s ease, padding-left 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
	padding-left: 2px;
}

.bw-panel-nav .elementor-nav-menu a:hover {
	padding-left: 12px;
}

/* Close button: a bare X pinned to the top right - no ring, no ground.
   Elementor's close_button_hover_color selector only targets
   `.dialog-close-button:hover i`, never `svg`, so with icons rendering as
   inline SVG the hover colour has to be set here. */
.bw-nav-popup .dialog-close-button {
	top: 22px;
	inset-inline-end: 22px;
	border: 0;
	background-color: transparent;
	display: grid;
	place-items: center;
	font-size: 20px;
	opacity: 1;
	transition: opacity 0.25s ease;
}

.bw-nav-popup .dialog-close-button svg {
	width: 20px;
	height: 20px;
	transition: fill 0.25s ease;
}

.bw-nav-popup .dialog-close-button:hover {
	opacity: 0.6;
}

.bw-nav-popup .dialog-close-button:hover svg {
	fill: var( --e-global-color-primary ) !important;
}

.bw-nav-popup .dialog-close-button:hover i {
	color: var( --e-global-color-primary );
}

/* Group heading rule: the design pairs each label with a hairline that fades
   out to the right. Drawn here because Elementor has no such control, and a
   1px container with a gradient background renders unreliably. */
.bw-panel-group-head::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient( 90deg, #e2c9cc, rgba( 226, 201, 204, 0 ) );
}

/* Two of these headings are links (Buyers / Sellers). Elementor colours the
   heading, not the anchor inside it, so the anchor has to inherit - and it
   needs a hover, which the heading widget has no control for. */
.bw-panel-group-link a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.bw-panel-group-link a:hover,
.bw-panel-group-link a:focus-visible {
	color: var( --e-global-color-primary );
}

.bw-panel-social .elementor-social-icon svg {
	color: #8a6169;
}

/* --------------------------------------------------------------------------
   5f. "Search area" eyebrow rule.

   Same reason as the panel group heading: a hairline that fades out beside a
   label is not something a widget control can express.
   -------------------------------------------------------------------------- */
.bw-eyebrow-rule::after {
	content: "";
	flex: 1 1 auto;
	max-width: 190px;
	height: 1px;
	background: linear-gradient( 90deg, #d9a7ad, rgba( 217, 167, 173, 0 ) );
}

/* The map is a flat image for now - keep it from overflowing its column. */
.bw-area-map img {
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   5g. Why Blushwood page.
   -------------------------------------------------------------------------- */

/* The hero carries two crossing scrims (top-to-bottom and left-to-right).
   Elementor's Background Overlay is a single two-stop gradient. */
.bw-why-hero > * {
	position: relative;
	z-index: 1;
}

.bw-why-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		linear-gradient( to bottom, rgba( 18, 15, 13, 0.72 ) 0%, rgba( 18, 15, 13, 0.30 ) 34%, rgba( 18, 15, 13, 0.72 ) 66%, rgba( 18, 15, 13, 0.92 ) 100% ),
		linear-gradient( to right, rgba( 18, 15, 13, 0.62 ) 0%, rgba( 18, 15, 13, 0.24 ) 52%, rgba( 18, 15, 13, 0 ) 78% );
}

/* Underlined CTA links in the dark split, the founder block and the pull quote.
   Elementor's button has no "rule underneath the text" treatment, and its pill
   radius has to be zeroed or the rule curves up at both ends. */
.bw-underline-link .elementor-button {
	border: 0;
	border-bottom: 1px solid #6a5a44 !important;
	border-radius: 0 !important;
	padding: 0 0 12px !important;
	gap: 12px;
	transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}

.bw-underline-link .elementor-button:hover {
	transform: none;
	border-bottom-color: var( --e-global-color-blushlt ) !important;
	gap: 18px;
}

.bw-underline-link .elementor-button-content-wrapper {
	gap: inherit;
}

.bw-underline-gold .elementor-button {
	border-bottom-color: var( --e-global-color-accent ) !important;
}

/* Breathing room above the split's CTA and below its list. */
.bw-split-list {
	margin-bottom: 34px;
}

/* Check marks in the sellers / buyers lists are blush on the dark ground. */
.bw-split-list .elementor-icon-list-icon svg {
	color: var( --e-global-color-blushlt );
}

/* Pillar icons: stroked, so the stacked view's fill has to be neutralised. */
.bw-pillar-icon .elementor-icon svg,
.bw-highlight-tile .elementor-icon svg {
	color: var( --e-global-color-primary );
}

/* --------------------------------------------------------------------------
   Reviews masonry. Twelve reviews of very different lengths, so CSS columns
   let each card keep its natural height instead of padding out a grid row.
   Elementor containers are flex, and it has no multi-column control.
   -------------------------------------------------------------------------- */
.bw-masonry {
	display: block !important;
	column-count: 3;
	column-gap: 24px;
}

.bw-masonry > .bw-review-card {
	break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 24px;
	width: 100%;
}

@media ( max-width: 1024px ) {
	.bw-masonry {
		column-count: 2;
	}
}

@media ( max-width: 767px ) {
	.bw-masonry {
		column-count: 1;
	}
}

/* Stars are a filled mark, so they need an exception to the hairline icon rule
   at the top of this file, which forces fill:none / stroke:currentColor. */
.bw-star .elementor-icon svg {
	fill: currentColor !important;
	stroke: none !important;
}

.bw-star,
.bw-star .elementor-icon {
	line-height: 0;
	display: block;
}

/* Keep the star row and its caption on the same centre line. */
.bw-hero-rating p {
	margin: 0;
}

/* Paragraph spacing inside a review, where the source had a double break. */
.bw-review-body p + p {
	margin-top: 1em;
}

/* --------------------------------------------------------------------------
   Review "read full review" toggle.

   The full text is always in the HTML - custom.js clamps it and injects the
   button only where the text actually overflows, so without JS (or for a
   crawler) every review still reads in full. Elementor has no line-clamp
   control, and the button is created in JS so it can be a real <button>.
   -------------------------------------------------------------------------- */
/* Clamp the widget element itself - this Elementor build renders no
   .elementor-widget-container wrapper. max-height rather than line-clamp so it
   still works when a review is split across several <p> elements.

   The open/close is animated: custom.js swaps max-height between the clamp and
   the measured full height, because a transition to `none` does not animate. */
.bw-review-body {
	position: relative;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		opacity 0.45s ease;
}

.bw-review-body.is-clamped {
	max-height: calc( 15px * 1.78 * 8 );
}

/* Fade the cut so it reads as truncated rather than broken. Kept present at
   zero opacity so it can fade out as the review opens. */
.bw-review-body::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.6em;
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), #fff 82% );
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.bw-review-body.is-clamped::after {
	opacity: 1;
}

/* Matches the .bw-underline-link convention used elsewhere on the site
   (12px / 700 / .2em / 1px rule 12px below the text) so the toggle reads as
   the same family of control, not a one-off.

   Scoped as `.bw-review-card button.bw-review-toggle` on purpose: the kit's
   Theme Style paints every bare <button> as a filled pill via
   `.elementor-kit-7 button`, which out-specifies a lone class. Two classes plus
   an element beats one class plus an element, so this wins without !important.
   The card is a flex column, hence align-self so the control hugs its text
   instead of stretching the full width. */
.bw-review-card button.bw-review-toggle {
	display: inline-block;
	width: auto;
	align-self: flex-start;
	margin-top: 14px;
	padding: 0 0 12px;
	background: none;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid #e2c9cc;
	border-radius: 0;
	box-shadow: none;
	color: var( --e-global-color-primary );
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.bw-review-card button.bw-review-toggle:hover,
.bw-review-card button.bw-review-toggle:focus-visible {
	background: none;
	background-color: transparent;
	color: var( --e-global-color-secondary );
	border-bottom-color: var( --e-global-color-secondary );
	transform: none;
}

/* Highlight tiles lift on hover, per the design's `tile` handler. Elementor has
   no hover transform/shadow pair for a widget wrapper. */
.bw-highlight-tile {
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), box-shadow 0.3s ease;
}

.bw-highlight-tile:hover {
	transform: translateY( -3px );
	box-shadow: 0 22px 40px -26px rgba( 26, 22, 19, 0.3 );
}

/* Decorative blush glow bleeding off the top-right of a dark band. Elementor
   has no control for a free-floating radial shape, and it must sit behind the
   content - hence the z-index on direct children (a full-width container has
   no .e-con-inner to hang it on). */
.bw-glow {
	--bw-glow-size: 560px;
	--bw-glow-tint: rgba( 219, 167, 173, 0.14 );
	--bw-glow-top: -180px;
	--bw-glow-right: -140px;
	--bw-glow-bottom: auto;
	--bw-glow-left: auto;
	position: relative;
	overflow: hidden;
}

.bw-glow::before {
	content: "";
	position: absolute;
	width: var( --bw-glow-size );
	height: var( --bw-glow-size );
	border-radius: 50%;
	background: radial-gradient( circle, var( --bw-glow-tint ), transparent 68% );
	top: var( --bw-glow-top );
	right: var( --bw-glow-right );
	bottom: var( --bw-glow-bottom );
	left: var( --bw-glow-left );
	pointer-events: none;
	z-index: 0;
}

.bw-glow > * {
	position: relative;
	z-index: 1;
}

/* Pull-quote bands: slightly smaller and a touch brighter. */
.bw-glow--quote {
	--bw-glow-size: 520px;
	--bw-glow-tint: rgba( 219, 167, 173, 0.15 );
	--bw-glow-right: -120px;
}

/* CTA bands: same circle, bottom-left and much stronger on the blush ground. */
.bw-glow--cta {
	--bw-glow-size: 520px;
	--bw-glow-tint: rgba( 219, 167, 173, 0.4 );
	--bw-glow-top: auto;
	--bw-glow-right: auto;
	--bw-glow-bottom: -180px;
	--bw-glow-left: -120px;
}

/* Affiliation marks sit at a common height and are dialled back, per design. */
.bw-affiliations .swiper-slide,
.bw-affiliations .swiper-slide-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
}

.bw-affiliations .swiper-slide img {
	height: 56px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	opacity: 0.62;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   6. Emphasis inside a headline ("a <em>fiercely personal</em> approach").
   A heading is one widget, so the accented words cannot be styled with widget
   controls. Reads from Global Colors so re-theming still works.
   -------------------------------------------------------------------------- */
.bw-em {
	font-style: italic;
	color: var( --e-global-color-primary );
}

.bw-em-light {
	font-style: italic;
	color: var( --e-global-color-blushlt );
}

/* The Success Stories design takes the accent a shade deeper than the global
   primary - the only page that does, so it stays a local modifier. */
.bw-em-deep {
	font-style: italic;
	color: #8a5a62;
}

/* --------------------------------------------------------------------------
   7. Component breakpoints from the design.

   The design switches individual components at 1080/900/820/640/560/520/400px.
   Elementor only exposes its own global tablet (1024) and mobile (767)
   breakpoints, so the component-specific ones live here.
   -------------------------------------------------------------------------- */

/* Desktop nav and the full phone number give way to the icon + burger. */
@media ( max-width: 1080px ) {
	.bw-nav,
	.bw-navtel {
		display: none !important;
	}

	.bw-telmini {
		display: inline-flex !important;
	}

	/* Logo, phone and burger on one line.

	   Elementor gives a widget full width inside a flex container, so the logo
	   claimed the whole row and pushed the controls onto a second one. Letting
	   it size to its content, with wrapping off, keeps the three together. */
	.bw-header .e-con-inner {
		flex-wrap: nowrap;
		align-items: center;
		gap: 16px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.bw-header .bw-logo {
		width: auto;
		flex: 0 1 auto;
		min-width: 0;
	}

	.bw-header .bw-logo img {
		max-width: 100%;
	}

	/* The controls keep their size; only the logo gives ground. */
	.bw-header .e-con-inner > .e-con {
		flex: 0 0 auto;
		width: auto;
	}
}

@media ( min-width: 1081px ) {
	.bw-telmini {
		display: none !important;
	}
}

/* Testimonials stack, rails drop below the copy. */
@media ( max-width: 900px ) {
	.bw-testi-rails {
		order: 2;
		height: clamp( 400px, 56vh, 560px );
	}
}

/* Below 560px a single rail reads better than two narrow ones. */
@media ( max-width: 560px ) {
	.bw-rail-track--b {
		display: none !important;
	}
}

/* The team headline holds one line on desktop, as the design sets it, and is
   released once there is no longer room. The centred paragraph beneath keeps
   its own measure, so the head block itself can run full width. */
.bw-teamhead h2 {
	white-space: nowrap;
}

.bw-teamhead .elementor-widget-text-editor {
	margin-inline: auto;
}

@media ( max-width: 820px ) {
	.bw-teamhead h2 {
		white-space: normal;
	}
}

@media ( max-width: 520px ) {
	.bw-header .bw-logo img {
		width: 232px !important;
	}
}

@media ( max-width: 400px ) {
	.bw-header .bw-logo img {
		width: 190px !important;
	}
}

/* --------------------------------------------------------------------------
   7b. Contact page.

   Everything here is a treatment Elementor has no control for: hover states
   that cross from a wrapper to a descendant, an image cropped to a fixed band,
   a pill floated over that image, and the form's radio group redrawn as the
   design's chips.
   -------------------------------------------------------------------------- */

/* Quick contact strip -------------------------------------------------- */

/* The whole row is one link, so the circle has to react to the row's hover -
   a descendant-of-ancestor rule that widget controls cannot express. */
.bw-strip-item .elementor-icon {
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* The framed icon view drives border and glyph from one colour control; the
   design wants a dark ring around a blush glyph, so the ring is set here. */
.bw-strip-item .elementor-icon {
	border-color: #3a322c;
}

.bw-strip-item:hover .elementor-icon {
	background-color: var( --e-global-color-blushlt );
	color: var( --e-global-color-secondary );
}

/* Office card ---------------------------------------------------------- */

/* The photo is a fixed-height band with the pill floated inside it. Elementor
   can size an image, but not crop it to a band its parent defines. */
.bw-office-media {
	position: relative;
	height: clamp( 200px, 26vh, 260px );
}

/* Filling the band by absolute layer rather than height:100% - the widget is a
   flex item, so a percentage height would depend on how Elementor happens to
   align it. */
.bw-office-media .bw-office-photo {
	position: absolute;
	inset: 0;
	width: 100%;
}

.bw-office-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bw-maps-pill {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	width: auto;
}

/* Direct lines --------------------------------------------------------- */

/* Same lift as the team cards, a touch shallower - the design's own values. */
.bw-card--line:hover {
	transform: translateY( -4px );
	box-shadow: 0 28px 50px -32px rgba( 26, 22, 19, 0.34 ) !important;
}

/* Contact form --------------------------------------------------------- */

/* Elementor styles fields at rest only - no focus or placeholder control. */
.bw-contact-form .elementor-field-textual:focus {
	border-color: #c9a9ae;
	background-color: #fff;
	box-shadow: none;
	outline: none;
}

.bw-contact-form .elementor-field-textual::placeholder {
	color: #a99e98;
	opacity: 1;
}

.bw-contact-form textarea.elementor-field-textual {
	resize: vertical;
}

/* Both groups are addressed through `elementor-field-group-<field id>`, which
   Elementor puts on the field wrapper. A field's own CSS Classes control is no
   use here - it lands on the subgroup for radios but on the input itself for
   the acceptance box, so it cannot reach both the box and its text. */

/* "I'm interested in" - the design's chips. The radios stay in the markup and
   keep working with the keyboard; only their painting changes. */
.bw-contact-form .elementor-field-group-intent .elementor-field-subgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bw-contact-form .elementor-field-group-intent .elementor-field-option {
	position: relative;
	margin: 0;
}

.bw-contact-form .elementor-field-group-intent input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bw-contact-form .elementor-field-group-intent input[type="radio"] + label {
	display: inline-block;
	margin: 0;
	padding: 11px 20px;
	border: 1px solid #e8deda;
	border-radius: 999px;
	background-color: #fbf7f5;
	color: #3a312c;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bw-contact-form .elementor-field-group-intent input[type="radio"]:hover + label {
	border-color: #d9bfc2;
}

.bw-contact-form .elementor-field-group-intent input[type="radio"]:checked + label {
	border-color: var( --e-global-color-secondary );
	background-color: var( --e-global-color-secondary );
	color: #fff;
}

/* The label is the only visible target, so the focus ring moves to it. */
.bw-contact-form .elementor-field-group-intent input[type="radio"]:focus-visible + label {
	outline: 2px solid var( --e-global-color-primary );
	outline-offset: 2px;
}

/* Consent - a small-print line beside the box, so the group's own label is
   redundant. Kept in the markup for screen readers. */
.bw-contact-form .elementor-field-group-consent > .elementor-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.bw-contact-form .elementor-field-group-consent .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 4px;
}

.bw-contact-form .elementor-field-group-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 2px;
	accent-color: var( --e-global-color-primary );
	cursor: pointer;
}

.bw-contact-form .elementor-field-group-consent input[type="checkbox"] + label {
	margin: 0;
	color: #6e635d;
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.bw-contact-form .elementor-field-group-consent a {
	color: var( --e-global-color-primary );
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7c. Success Stories page.
   -------------------------------------------------------------------------- */

/* The case-study rail folds away below 700px - a component breakpoint that
   sits between Elementor's tablet and mobile, so it has to live here. */
@media ( max-width: 700px ) {
	.bw-story {
		flex-direction: column !important;
		gap: 14px !important;
	}

	.bw-story-rail {
		flex-direction: row !important;
		align-items: center !important;
		width: 100% !important;
	}

	.bw-story-rule {
		display: none !important;
	}
}

/* Headline measure, on the heading itself so `ch` uses its own font size. */
.bw-story-title .elementor-heading-title {
	max-width: 40ch;
}

/* The place/outcome tags are labels, not controls - drop the button lift and
   pointer so they do not read as clickable. */
.bw-tag .elementor-button {
	cursor: default;
	pointer-events: none;
}

/* The story bullets set their own text size, so the check has to keep its
   own; Elementor sizes list icons from the text line-height otherwise. */
.bw-story-list .elementor-icon-list-icon {
	margin-top: 5px;
}

/* CTA lockup. */
.bw-cta-logo img {
	height: 46px;
	width: auto;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   7d. Insights page.

   The cards are Loop Grid items bound to real posts, so everything here is
   either a crop the widget cannot express or a hover that has to cross from
   the card to the image inside it.
   -------------------------------------------------------------------------- */

/* Fixed crops: the design sets an aspect ratio on the media box and lets the
   image fill it. Elementor can size an image but not crop it to its parent. */
.bw-feature-media {
	aspect-ratio: 16 / 10;
}

.bw-article-media {
	aspect-ratio: 3 / 2;
	background: linear-gradient( 135deg, #efe0dc, #e4d3ce );
}

.bw-feature-media,
.bw-article-media {
	overflow: hidden;
}

/* The image fills its box in normal flow. It used to be positioned absolutely,
   which let it escape the media box and paint over the "Read the guide" link
   whenever the box did not end up being its containing block. */
.bw-feature-media > .elementor-widget-image,
.bw-article-media > .elementor-widget-image {
	width: 100%;
	height: 100%;
	min-height: 0;
}

.bw-feature-media img,
.bw-article-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

/* Equal heights across a row.

   A container exposes min-height but not height, so the card cannot fill its
   grid cell from Elementor's controls. The cell stretches by default; making it
   a flex parent lets the card take the whole of it, and the body's flex-grow
   then pushes "Read more" to the foot of every card alike. */
.bw-article-grid .e-loop-item {
	display: flex;
}

.bw-article-card {
	width: 100%;
	height: 100%;
}

/* Card lift and image zoom, the design's values. */
.bw-article-card {
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), box-shadow 0.3s ease;
	text-decoration: none;
}

.bw-article-card:hover {
	transform: translateY( -6px );
	box-shadow: 0 34px 60px -34px rgba( 26, 22, 19, 0.38 ) !important;
}

.bw-article-card:hover .bw-article-media img {
	transform: scale( 1.05 );
}

.bw-feature {
	text-decoration: none;
}

.bw-feature:hover .bw-feature-media img {
	transform: scale( 1.04 );
}

/* The dot between category and reading time.

   The widget wrapper is a block containing a block heading, so a ::before on it
   lands on its own line. Making the wrapper a flex row puts the dot beside the
   text and centres it against the cap height. */
.bw-read-time {
	display: flex;
	align-items: center;
	gap: 11px;
}

.bw-read-time::before {
	content: "";
	flex: 0 0 auto;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #c9bdb6;
}

/* "9 articles" - the number is set larger and darker than its label. */
.bw-article-count strong {
	color: var( --e-global-color-secondary );
	font-size: 17px;
}

/* The featured card is two columns above 980px, as in the design.

   Done by pinning flex-wrap rather than switching the container to grid:
   Elementor drives `grid-template-columns` from its own custom property on
   .e-con, so a grid override here only ever produced a single column. With
   nowrap the two items cannot break apart, and they shrink to absorb the gap -
   which is what 1.15fr / 1fr resolves to anyway. */
@media ( min-width: 981px ) {
	.bw-feature {
		flex-wrap: nowrap !important;
		align-items: center;
	}

	.bw-feature > *:first-child {
		width: 53.5% !important;
	}

	.bw-feature > *:last-child {
		width: 46.5% !important;
	}
}

@media ( max-width: 980px ) {
	.bw-feature {
		flex-wrap: wrap !important;
	}

	.bw-feature > * {
		width: 100% !important;
	}
}

/* "Read more" / "Read the guide".

   These are headings, not buttons: the whole card is an <a>, so a Button widget
   (which always renders an <a>) would make the browser close the card's anchor
   early and drop everything after it outside the card. The arrow is drawn here
   for the same reason - a heading takes no icon. */
/* The arrow hangs off the heading's own text element, not the widget wrapper.
   A ::before/::after on the wrapper is a sibling of a block-level heading, so
   it can only ever land on its own line. */
.bw-readmore .elementor-heading-title,
.bw-readlink .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.bw-readmore .elementor-heading-title::after,
.bw-readlink .elementor-heading-title::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-top: 1.9px solid currentColor;
	border-right: 1.9px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.25s ease;
}

.bw-article-card:hover .bw-readmore .elementor-heading-title::after,
.bw-feature:hover .bw-readlink .elementor-heading-title::after {
	transform: rotate( 45deg ) translate( 2px, -2px );
}

/* The read link sits at the foot of the card whatever the excerpt's length. */
.bw-readmore {
	margin-top: auto;
}

/* Hug the text so the feature's rule does not run the column's full width. */
.bw-readlink .elementor-heading-title {
	padding-bottom: 8px;
	border-bottom: 1px solid var( --e-global-color-accent );
}

/* --------------------------------------------------------------------------
   7e. Article detail (Single Post template).

   The body is one Post Content widget, so the article's own typography has to
   be styled here - Elementor has no per-element controls inside it. Everything
   below is scoped to .bw-article-content so it cannot leak into page copy.
   -------------------------------------------------------------------------- */

.bw-article-content > * + * {
	margin-top: 16px;
}

/* The opening paragraph is the standfirst. */
.bw-article-content > p:first-child {
	margin-bottom: 34px;
	padding-bottom: 30px;
	border-bottom: 1px solid #f0e4e0;
	color: #2a2320;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp( 21px, 2.2vw, 28px );
	font-weight: 500;
	line-height: 1.5;
}

/* The article headline's measure. It lives here rather than on the widget so
   `ch` resolves against the headline's own font size. */
.bw-article-title .elementor-heading-title {
	max-width: 26ch;
}

.bw-article-content h2 {
	margin-top: clamp( 34px, 4.5vh, 50px );
	margin-bottom: 16px;
	color: var( --e-global-color-secondary );
	font-family: "Cormorant Garamond", serif;
	font-size: clamp( 25px, 2.9vw, 36px );
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.005em;
	scroll-margin-top: 130px;
}

/* The body runs the full width of its column rather than the design's 72ch
   measure - the column is already narrowed by the sidebar, and capping it again
   left a band of empty space down the right of every article. */
.bw-article-content p {
	color: #4a403b;
	font-size: 16.5px;
	line-height: 1.85;
}

.bw-article-content ul {
	margin-top: 20px;
	padding: 0;
	list-style: none;
}

.bw-article-content li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	color: #4a403b;
	font-size: 15.5px;
	line-height: 1.72;
}

/* The design's check mark, drawn rather than loaded - it is decorative and
   repeats on every bullet of every article. */
.bw-article-content li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 2px;
	width: 13px;
	height: 7px;
	border-left: 2.2px solid var( --e-global-color-primary );
	border-bottom: 2.2px solid var( --e-global-color-primary );
	transform: rotate( -45deg );
}

/* A blockquote in the editor becomes the design's "In practice" note. */
.bw-article-content blockquote {
	margin: 24px 0 0;
	padding: 22px 26px;
	border: 0;
	border-radius: 18px;
	background: var( --e-global-color-blushtn );
	color: #3a312c;
	font-size: 15.5px;
	line-height: 1.72;
}

.bw-article-content blockquote::before {
	content: "In practice";
	display: block;
	margin-bottom: 7px;
	color: #7a5a2e;
	font-family: "Manrope", sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.bw-article-content blockquote p {
	font-size: inherit;
	line-height: inherit;
}

/* Key takeaways: the box is part of the template, its content is a custom
   field. Fold it away entirely when an article has not filled it in. */
.bw-takeaways:not( :has( li ) ) {
	display: none;
}

.bw-takeaway-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bw-takeaway-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 14px;
}

.bw-takeaway-list li::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 2px;
	width: 13px;
	height: 7px;
	border-left: 2.2px solid var( --e-global-color-blushlt );
	border-bottom: 2.2px solid var( --e-global-color-blushlt );
	transform: rotate( -45deg );
}

/* Dot separators in the hero meta line - same reason as .bw-read-time. */
.bw-dotted {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bw-dotted::before {
	content: "";
	flex: 0 0 auto;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #8c7f77;
}

/* Meta rows sit on one line; Elementor's widgets default to full width. */
.bw-article-byline > .elementor-widget {
	width: auto;
}

/* Byline portrait: a true circle cropped to the face.

   The Image widget only emits a width, and the theme resets img height to auto,
   so without forcing both dimensions the portrait keeps its full aspect ratio
   and the border-radius bends it into an ellipse. */
.bw-author-photo img {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 18%;
}

/* Share circles - Elementor's minimal skin has no outlined-circle preset. */
.bw-share .elementor-share-btn {
	width: 38px;
	height: 38px;
	border: 1px solid #e8deda;
	border-radius: 50%;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bw-share .elementor-share-btn:hover {
	border-color: var( --e-global-color-secondary );
	background-color: var( --e-global-color-secondary );
	color: #fff;
}

.bw-share .elementor-share-btn:hover .elementor-share-btn__icon {
	color: #fff;
}

/* Sidebar tracks the reader down the article. */
.bw-artside {
	position: sticky;
	top: 140px;
}

@media ( max-width: 1024px ) {
	.bw-artside {
		position: static;
	}
}

/* Contents list, built by custom.js from the article's own headings. */
.bw-toc-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bw-toc-list a {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	color: #3a312c;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 1.55;
	text-decoration: none;
	transition: color 0.25s ease;
}

.bw-toc-list a::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin-top: 7px;
	border-radius: 50%;
	background: #c08d8d;
}

.bw-toc-list a:hover {
	color: var( --e-global-color-primary );
}

/* An article with no headings has nothing to list. */
.bw-toc:not( :has( .bw-toc-list ) ) {
	display: none;
}

/* The "Keep reading" rule sits on the blush ground, so it needs more contrast
   than the white-background version. */
.bw-eyebrow-rule--tint::after {
	background: linear-gradient( 90deg, #d9bfc2, rgba( 217, 191, 194, 0 ) );
}

.bw-side-cta .elementor-button {
	width: 100%;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   7f. Agent pages (Rachel Moussa, Diana Korkor, Rachel Cooney).

   All three profiles share these classes, so the two newer pages match the
   Rachel page without any per-page styling.
   -------------------------------------------------------------------------- */

/* Hero glow: larger and further out than the standard band. */
.bw-glow--agent {
	--bw-glow-size: 620px;
	--bw-glow-tint: rgba( 219, 167, 173, 0.16 );
	--bw-glow-top: -200px;
	--bw-glow-right: -160px;
}

/* Hero column widths are set per page in the editor, not here - the Rachel
   page was tuned that way and the other two now carry the same settings. No
   width rules in this file, so nothing fights the editor.

   Only the stacking below the design's 980px breakpoint lives here, because
   Elementor's own breakpoints are 1024 and 767. */
@media ( max-width: 980px ) {
	.bw-agenthero > .e-con-inner,
	.bw-bio > .e-con-inner {
		flex-wrap: wrap !important;
	}

	.bw-agenthero > .e-con-inner > *,
	.bw-bio > .e-con-inner > * {
		width: 100% !important;
	}

	.bw-cred {
		width: 100% !important;
	}

	.bw-bioside {
		position: static;
	}
}

@media ( min-width: 981px ) {
	.bw-bioside {
		position: sticky;
		top: 140px;
	}
}

/* Hero contact rows: a ringed disc rather than the CTA's filled one. */
.bw-agentcontact .elementor-icon-list-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border: 1px solid #3a322c;
	border-radius: 50%;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bw-agentcontact .elementor-icon-list-item:hover .elementor-icon-list-icon {
	border-color: var( --e-global-color-blushlt );
	background-color: var( --e-global-color-blushlt );
	color: var( --e-global-color-secondary );
}

.bw-agentcontact .elementor-icon-list-item:hover .elementor-icon-list-icon svg {
	color: var( --e-global-color-secondary );
}

/* The contact discs stay white on every band - a blush disc on the blush
   "Get in touch" ground all but disappears. */

/* Community links inside the biography. */
.bw-bio-links a {
	color: #8a5a62;
	text-decoration: underline;
}

/* The standfirst runs the full width of its column. The design caps it at 40ch,
   but the sidebar has already narrowed the column and a second cap left the
   opening line wrapping much shorter than the body beneath it. */
.bw-bio-lede p {
	max-width: none;
}

/* "Read all reviews" carries the design's gold rule. */
.bw-readlink-btn .elementor-button {
	border-bottom: 1px solid var( --e-global-color-accent );
	border-radius: 0;
}

/* Team card names link through to the agent's profile. Elementor colours the
   heading, not the anchor inside it, so the anchor has to inherit. */
.bw-agent-link a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.bw-agent-link a:hover,
.bw-agent-link a:focus-visible {
	color: var( --e-global-color-primary );
}

/* The card photo links to the same profile. Elementor wraps the image in an
   anchor, which by default picks up the global link colour on focus. */
.bw-agent-photo-link a {
	display: block;
	color: inherit;
}

/* --------------------------------------------------------------------------
   7g. Community pages: "About the area".

   Applies to every community page - #about is only ever this section.
   -------------------------------------------------------------------------- */
/* #about is the outer band; the columns live in .e-con-inner two levels down,
   inside the boxed container - so this is a descendant selector, not a child
   one. A child combinator here matches nothing at all. */
@media ( min-width: 1025px ) {
	/* Sticky needs the items aligned to the top; the band centres them, which
	   also leaves the shorter column floating in the middle of the taller one. */
	#about .e-con-inner {
		align-items: flex-start !important;
	}

	#about .e-con-inner > *:first-child {
		width: calc( 66.666% - clamp( 40px, 5vw, 80px ) / 2 ) !important;
	}

	/* The highlight tiles: one third, and they follow the reader down the copy. */
	#about .e-con-inner > *:last-child {
		width: calc( 33.333% - clamp( 40px, 5vw, 80px ) / 2 ) !important;
		position: sticky;
		top: 140px;
		align-self: flex-start;
	}
}

/* The copy fills its column rather than stopping at the design's 52ch - the
   tiles column has already narrowed it once. */
#about .elementor-widget-text-editor,
#about .elementor-widget-heading {
	width: 100% !important;
	max-width: none !important;
}

/* --------------------------------------------------------------------------
   8. Motion and scrolling preferences.
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

/* Stop the fixed header covering a section heading when an anchor is hit. */
[id] {
	scroll-margin-top: 110px;
}

::selection {
	background: var( --e-global-color-blushlt );
	color: var( --e-global-color-secondary );
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	.bw-rail-a,
	.bw-rail-b,
	.bw-logo-track {
		animation: none !important;
	}

	/* Open/close the reviews instantly rather than sliding or fading. The
	   !important is only on the body, so the ::after keeps showing the cut
	   gradient while clamped and hiding it once expanded. */
	.bw-review-body,
	.bw-review-body::after {
		transition: none;
	}

	.bw-review-body {
		opacity: 1 !important;
	}
}
/* --------------------------------------------------------------------------
   9. Hero video sound control.

   Elementor's background video is hard-wired to autoplay muted and offers no
   control of its own, so the design's sound button is injected by custom.js
   and dressed here. Every value below is the design's: a 48px disc sitting
   28px off the bottom, aligned to the same right gutter as the hero copy.
   -------------------------------------------------------------------------- */

/*
 * The button anchors to the hero. Elementor already positions .e-con, but the
 * containing block is stated here so a builder change can never fling the
 * control into the page corner.
 */
.bw-hero-scrim {
	position: relative;
}

/*
 * Scoped to a direct child on purpose: section 3 lifts every child of the hero
 * with `.bw-hero-scrim > *  { position: relative; z-index: 1 }`, which carries
 * the same weight as a lone class and would otherwise decide this by source
 * order alone. The extra class settles it outright.
 */
.bw-hero-scrim > .bw-video-sound {
	position: absolute;
	right: clamp(20px, 4vw, 52px);
	bottom: 28px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(20, 16, 13, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.bw-video-sound:hover {
	background: rgba(20, 16, 13, 0.62);
}

.bw-video-sound:focus {
	outline: none;
}

/* Over moving video the hover tint alone is too faint to read as focus. */
.bw-video-sound:focus-visible {
	background: rgba(20, 16, 13, 0.62);
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/*
 * Both icons ship in the markup and are swapped by class, so the control never
 * rewrites its own HTML mid-interaction. Sizes are set explicitly because
 * icon-bearing themes routinely declare `svg { width: 1em }`.
 */
.bw-video-sound svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
}

.bw-video-sound .bw-video-sound__on,
.bw-video-sound.is-muted .bw-video-sound__off {
	display: block;
}

.bw-video-sound .bw-video-sound__off,
.bw-video-sound.is-muted .bw-video-sound__on {
	display: none;
}