/**
 * About Us (page 5063) — corrections against ABOUT US LAYOUT.pdf.
 *
 * Structural changes (column widths, alignment, the 107.706% widget overflow,
 * the page background) live in the Elementor data itself. What is left here is
 * the image proportion, which Elementor's image widget cannot express, plus the
 * stacking behaviour.
 */

/* LOCALLY CRAFTED — the client supplied this image already cropped to the vanity
   (1000x726), so it is shown at its own proportions rather than re-cropped. The
   earlier forced 247/270 box existed only to make the old 300x450 source fit. */
.page-id-5063 .elementor-element-0728ec0 img {
	width: 100%;
	height: auto;
	display: block;
}

/* Top edge of the image lines up with the top of the text, not the quote's
   padding box. */
.page-id-5063 .elementor-element-157cbe5 {
	align-self: flex-start;
}

/* The quote's left rule. #595959 is the colour the layout PDF actually fills
   this bar with - it reads dark grey, not black. */
.page-id-5063 .elementor-element-7fbfa3a > .elementor-widget-container {
	border-left-color: #595959;
	padding-left: 1.25rem;
}

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

/* Tablet and below the two columns stack. The image keeps its own proportions;
   only the gap above it needs adjusting. */
@media (max-width: 1024px) {
	.page-id-5063 .elementor-element-157cbe5 {
		margin-top: 32px;
	}
}

@media (max-width: 767px) {
	.page-id-5063 .elementor-element-7fbfa3a > .elementor-widget-container {
		padding-left: 1rem;
	}
}

/* Full-bleed photos should never force a horizontal scrollbar. */
.page-id-5063 .elementor-widget-image img {
	max-width: 100%;
	height: auto;
}

/* --- Round 2 -------------------------------------------------------------- */

/*
 * SN 1 - LOCALLY CRAFTED: the text sits against the middle of the photo.
 *
 * The row (f067231) is set to flex-start in the page data, so the shorter text
 * column hung from the top of the much taller image. Centring the row lines the
 * two up on their middles, which is what the reference shows.
 *
 * !important throughout this section: Elementor writes its own per-element
 * rules at `.elementor-5063 .elementor-element.elementor-element-XXXX`, which
 * is specificity 0,3,0 and beats anything page-level here.
 */
@media (min-width: 1025px) {
	.page-id-5063 .elementor-element-f067231 {
		align-items: center !important;
	}
}

/*
 * SN 2 - PERSONALIZATION: no gap between the panel and the photo strip.
 *
 * The gap is the Elementor container's own flex gap, not a margin on either
 * widget, so zeroing the widgets alone would not have closed it. The image is
 * made a block as well: an inline <img> sits on the text baseline and leaves a
 * few pixels of descender space underneath that reads as a remaining gap.
 */
/*
 * The gap lives on .e-con-inner, not on the element itself: this is an
 * e-con-boxed container, so Elementor puts the flex layout on the inner
 * wrapper and the children are its children, not the outer one's. Targeting
 * the outer element alone set a gap on a box with a single child, which
 * changed nothing.
 *
 * The custom properties are set as well as the shorthand - Elementor writes
 * `--gap: 24px 24px` and then `gap: var(--gap)`, so overriding the variable is
 * what actually holds.
 */
.page-id-5063 .elementor-element-269732a,
.page-id-5063 .elementor-element-269732a > .e-con-inner {
	--gap: 0px 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	gap: 0 !important;
	row-gap: 0 !important;
}

.page-id-5063 .elementor-element-7c2d21f,
.page-id-5063 .elementor-element-7c2d21f > .elementor-widget-container {
	margin-bottom: 0 !important;
}

.page-id-5063 .elementor-element-751c261,
.page-id-5063 .elementor-element-751c261 > .elementor-widget-container {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.page-id-5063 .elementor-element-751c261 img {
	display: block;
	vertical-align: bottom;
}