/*
Theme Name:   Hello Elementor Child
Theme URI:    https://crawfordbespokeinteriors.co.uk/
Description:  Child theme for Hello Elementor. Home for custom CSS and PHP for Crawford Bespoke Interiors, so that changes survive parent-theme updates.
Author:       Blue Rock Digital
Author URI:   https://bluerockdigital.co.uk/
Template:     hello-elementor
Version:       1.9.30
Text Domain:  hello-elementor-child
*/

/* ---------------------------------------------------------------------------
   Custom CSS
   --------------------------------------------------------------------------- */

/* Two-column bands pair a heading + paragraph on the left with a single button
   on the right. Elementor stretches that button's column to the full height of
   the row, but leaves the button itself at the top, so it floats away from the
   text it belongs to. Centre it against the text block instead.

   Scoped to columns whose only child is a button, so rows that hold a button
   alongside other widgets (the header, for one) are untouched. Desktop only —
   below the tablet breakpoint the columns stack and there is nothing to align. */
@media (min-width: 768px) {
  .e-con:has(> .elementor-widget-button:only-child) {
    justify-content: center;  /* vertical: centre against the text block */
    align-items: flex-end;    /* horizontal: sit against the right edge   */
  }
}

/*
 * Removed 2026-10-19: the 1025–1199px squeeze that kept the main nav on one
 * row by shrinking the logo to 190px and tightening item spacing.
 *
 * It only ever bought headroom, and it ran out: Cormorant Garamond measures
 * wider in Firefox than in Chrome, so the nav wrapped again above 1199px,
 * dropping "Contact" onto a second line. The nav now has a row of its own
 * below the logo (header template 49, container cb1a002), which gives it the
 * full header width at every desktop size, so nothing needs squeezing.
 */

/*
 * Areas We Cover: town links shown as buttons.
 * Markup is a plain list in the text editor (<ul class="cbi-town-buttons">),
 * so towns stay easy to add and remain a semantic list of links. Matches the
 * site's outline button: maroon border and text, square corners, Roboto 600,
 * filling dark maroon on hover.
 */
.cbi-town-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cbi-town-buttons li {
	margin: 0;
	padding: 0;
}
.cbi-town-buttons a {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid #762F41;
	background: #fff;
	color: #762F41;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.cbi-town-buttons a:hover,
.cbi-town-buttons a:focus-visible {
	background: #592335;
	border-color: #592335;
	color: #fff;
}
.cbi-town-buttons a:focus-visible {
	outline: 2px solid #592335;
	outline-offset: 2px;
}

/*
 * Sticky "Send us your room photos" WhatsApp bar (markup in functions.php).
 *
 * Full-width bar at the foot of every page, in the pattern used on
 * golfwithireland.com. WhatsApp's dark teal rather than its bright green, so
 * white text passes WCAG AA contrast. The inner row lines up with the page's
 * content column and is right-aligned on desktop; on phones it centres and the
 * second line is dropped so the bar stays one line. Body padding matches the
 * bar's height so it never covers the last line of the footer.
 */
.cbi-whatsapp {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9990;
	display: block;
	background: #075E54;
	color: #fff;
	font-family: "Roboto", sans-serif;
	text-decoration: none;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cbi-whatsapp:hover,
.cbi-whatsapp:focus-visible {
	background: #054a42;
	color: #fff;
}
.cbi-whatsapp:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}
.cbi-whatsapp__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 11px 30px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}
.cbi-whatsapp__icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
}
.cbi-whatsapp__text {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	text-align: right;
}
.cbi-whatsapp__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
}
.cbi-whatsapp__sub {
	font-size: 13px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .88);
}
.cbi-whatsapp__cta {
	flex: 0 0 auto;
	padding: 9px 18px;
	border-radius: 999px;
	background: #fff;
	color: #075E54;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
/* Room at the foot of the page so the bar never covers the footer's last line. */
body {
	padding-bottom: 74px;
}
@media (max-width: 767px) {
	.cbi-whatsapp__inner {
		padding: 10px 16px;
		gap: 10px;
		justify-content: center;
	}
	.cbi-whatsapp__icon { width: 24px; height: 24px; }
	.cbi-whatsapp__title { font-size: 15px; white-space: nowrap; }
	.cbi-whatsapp__sub { display: none; }
	.cbi-whatsapp__cta { font-size: 13px; padding: 7px 14px; }
	body { padding-bottom: 60px; }
}
@media (max-width: 360px) {
	.cbi-whatsapp__cta { display: none; }
}
/* Never inside the editor, and never on paper. */
.elementor-editor-active .cbi-whatsapp {
	display: none;
}
@media print {
	.cbi-whatsapp { display: none !important; }
	body { padding-bottom: 0; }
}

/*
 * Enquiry form photo uploads: match the form's text fields (1px #c8c3be border,
 * white, square, Roboto 16px) and give the picker button the site's outline
 * button style, instead of the browser's default grey "Choose files".
 */
.elementor-field-type-upload input[type="file"] {
	width: 100%;
	padding: 8px;
	border: 1px solid #c8c3be;
	background: #fff;
	color: #333;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	cursor: pointer;
}
.elementor-field-type-upload input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 10px 16px;
	border: 1px solid #762F41;
	background: #fff;
	color: #762F41;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.elementor-field-type-upload input[type="file"]:hover::file-selector-button,
.elementor-field-type-upload input[type="file"]:focus-visible::file-selector-button {
	background: #592335;
	border-color: #592335;
	color: #fff;
}

/*
 * "Areas we cover" town links in the enquiry-form sidebar (every form page).
 * A compact wrapping list of text links, sized for a narrow column. Written by
 * tools/update-areas-sidebar.py.
 */
.cbi-town-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin: 8px 0 14px;
	padding: 0;
	list-style: none;
}
.cbi-town-list li {
	margin: 0;
	padding: 0;
}
.cbi-town-list a {
	display: inline-block;
	padding: 4px 0; /* ~27px tall: a comfortable tap target on phones */
	color: #762F41;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cbi-town-list a:hover,
.cbi-town-list a:focus-visible {
	color: #592335;
}

/*
 * Long unbroken strings must wrap, not widen the page.
 * The customer service address (34 characters, no spaces) pushed the whole
 * document 23px wider than a 375px phone screen, which breaks the layout of
 * every fixed element too. Applies to any email, phone or URL in content.
 */
a[href^="mailto:"],
a[href^="tel:"],
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/*
 * Enquiry form block: stack the form above the "Prefer a conversation?" panel
 * instead of sitting them side by side (Sean, 2026-10-01). The block is cloned
 * onto 59 pages with different element ids, so this matches on structure — the
 * inner flex row whose columns contain the form — rather than on ids.
 * Below 768px Elementor already stacks them.
 */
@media (min-width: 768px) {
	.e-con-inner:has(> .e-con .elementor-form) {
		flex-direction: column;
	}
	.e-con-inner:has(> .e-con .elementor-form) > .e-con {
		width: 100%;
	}
}

/*
 * Header top bar: two phone numbers and five social icons, on every screen.
 *
 * The icons live in their own container (template 49, "Social icons"), so they
 * wrap as a single group rather than splitting four-and-one. Below 1025px the
 * contact column is only ~337px, so the group drops neatly onto its own centred
 * line and the icons tighten slightly.
 */
.elementor-49 .elementor-element-cbisoc1 {
	width: auto;
	flex-grow: 0;
}

/*
 * One type scale for everything in the bar: 13px text, light weight, small
 * icons. It had grown to three sizes and two weights (eyebrow 16/700, numbers
 * 15/700 in 46px boxes, icons 15–18px). Elementor's per-element CSS is (0,4,0)
 * specific, hence the extra classes here.
 */
body .elementor-49 .elementor-element-15ce9ae7 {
	--padding-top: 6px;
	--padding-bottom: 6px;
	align-items: center;
}
body .elementor-49 .elementor-element-6599aa3a .elementor-widget-container .elementor-heading-title {
	white-space: nowrap;
	/* Roboto, matching the numbers beside it, rather than Cormorant italic. */
	font-family: "Roboto", sans-serif;
	font-style: normal;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .01em;
}
body .elementor-49 .elementor-element-1d8aae8 .elementor-widget-container .elementor-button,
body .elementor-49 .elementor-element-29037332 .elementor-widget-container .elementor-button,
body .elementor-49 .elementor-element-92b4668 .elementor-widget-container .elementor-button,
body .elementor-49 .elementor-element-2704ae53 .elementor-widget-container .elementor-button {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	min-height: 0;
	padding: 4px 0;
	white-space: nowrap;   /* a number must never break across two lines */
}
body .elementor-49 .elementor-element-15ce9ae7 .elementor-button-icon svg,
body .elementor-49 .elementor-element-15ce9ae7 .elementor-button-icon i {
	font-size: 13px;
	width: 13px;
	height: 13px;
}
body .elementor-49 .elementor-element-cbisoc1 .elementor-widget-container svg {
	width: 14px;
	height: 14px;
}
/* Tablet: keep the whole bar on one line — Elementor stacks these two columns
   below 1025px, which put the eyebrow, numbers and icons on three rows. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-49 .elementor-element-15ce9ae7 {
		--flex-direction: row;
		--justify-content: space-between;
		--align-items: center;
		flex-wrap: nowrap;
	}
	body .elementor-49 .elementor-element.elementor-element-6d0f2f02,
	body .elementor-49 .elementor-element.elementor-element-558b910a {
		--width: auto;
		width: auto;
	}
	body .elementor-49 .elementor-element-558b910a {
		flex-wrap: nowrap;
		justify-content: flex-end;
		column-gap: 14px;
	}
	body .elementor-49 .elementor-element-cbisoc1 {
		flex-basis: auto;
		flex-shrink: 0;
		column-gap: 14px;   /* don't let the icons squeeze together as space tightens */
	}
	body .elementor-49 .elementor-element-cbisoc1 .elementor-widget {
		flex: 0 0 auto;
	}
	/*
	 * The numbers and icons must never shrink: their text is nowrap, so a
	 * squeezed box overflows and the number visibly collides with the icons
	 * (it did, from ~850px down to the breakpoint). The eyebrow gives way
	 * instead, truncating if it has to.
	 */
	body .elementor-49 .elementor-element-558b910a {
		flex-shrink: 0;
	}
	body .elementor-49 .elementor-element-558b910a > .elementor-widget {
		flex: 0 0 auto;
	}
	body .elementor-49 .elementor-element.elementor-element-6d0f2f02 {
		flex: 0 1 auto;
		min-width: 0;
	}
	body .elementor-49 .elementor-element-6599aa3a .elementor-widget-container .elementor-heading-title {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Phones: numbers on one line, the five icons centred beneath them. */
/* Phones: two lines only — the eyebrow, then the numbers and icons together. */
@media (max-width: 767px) {
	.elementor-49 .elementor-element-558b910a {
		flex-wrap: nowrap;
		justify-content: center;
		column-gap: 10px;
	}
	.elementor-49 .elementor-element-cbisoc1 {
		flex-basis: auto;
		flex-shrink: 0;
		column-gap: 10px;
	}
	body .elementor-49 .elementor-element-558b910a > .elementor-widget {
		flex: 0 0 auto;
	}
	body .elementor-49 .elementor-element-cbisoc1 .elementor-widget-container svg {
		width: 13px;
		height: 13px;
	}
	/* Everything on one centre line: the phone glyphs, the numbers and the
	   social icons. Sizes come down a little so all three fit a 375px screen. */
	body .elementor-49 .elementor-element-558b910a,
	body .elementor-49 .elementor-element-cbisoc1 {
		align-items: center;
		column-gap: 8px;
	}
	body .elementor-49 .elementor-element-1d8aae8 .elementor-widget-container .elementor-button,
	body .elementor-49 .elementor-element-29037332 .elementor-widget-container .elementor-button {
		font-size: 12px;
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}
	body .elementor-49 .elementor-element-15ce9ae7 .elementor-button-icon,
	body .elementor-49 .elementor-element-15ce9ae7 .elementor-button-icon svg,
	body .elementor-49 .elementor-element-15ce9ae7 .elementor-button-icon i {
		display: inline-flex;
		align-items: center;
		font-size: 12px;
		width: 12px;
		height: 12px;
	}
	body .elementor-49 .elementor-element-cbisoc1 .elementor-widget-container,
	body .elementor-49 .elementor-element-cbisoc1 .elementor-icon {
		display: flex;
		align-items: center;
		line-height: 1;
	}
	body .elementor-49 .elementor-element-cbisoc1 .elementor-widget-container svg {
		width: 12px;
		height: 12px;
		display: block;
	}
}
@media (max-width: 360px) {
	body .elementor-49 .elementor-element-558b910a,
	body .elementor-49 .elementor-element-cbisoc1 {
		column-gap: 6px;
	}
	body .elementor-49 .elementor-element-1d8aae8 .elementor-widget-container .elementor-button,
	body .elementor-49 .elementor-element-29037332 .elementor-widget-container .elementor-button {
		font-size: 11px;
	}
}

/*
 * Back to top. Sits clear of the WhatsApp bar (74px desktop / 60px mobile,
 * matching the body padding above), hidden until the visitor is roughly a
 * screen down the page. Square, in the site's maroon, like the other buttons.
 */
.cbi-top {
	position: fixed;
	right: 24px;
	bottom: calc(90px + env(safe-area-inset-bottom, 0px));
	z-index: 9989;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: #762F41;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s, transform .25s, visibility .25s linear, background-color .2s;
}
.cbi-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.cbi-top:hover,
.cbi-top:focus-visible {
	background: #592335;
}
.cbi-top:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #762F41;
}
@media (max-width: 767px) {
	.cbi-top {
		right: 14px;
		bottom: calc(72px + env(safe-area-inset-bottom, 0px));
		width: 40px;
		height: 40px;
	}
}
.elementor-editor-active .cbi-top {
	display: none;
}
@media print {
	.cbi-top { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Headings: line-height only.

   Button and card-title sizes live in Elementor → Site Settings → Custom CSS
   (kit 7), which sets them with !important and so wins over this file. They
   were changed there on 2026-10-01: buttons min-height 54→46 and padding
   16·24→13·20 (12·18 on phones), h3 28→24 (20 on phones). Backup of the
   previous kit CSS: backups/kit-7-custom-css-before-sizing.css.

   Elementor sets heading line-height per element at (0,4,0), hence the extra
   class here.
   --------------------------------------------------------------------------- */
body .elementor-element .elementor-widget-container h1.elementor-heading-title,
body .elementor-element .elementor-widget-container h2.elementor-heading-title {
	line-height: 1.1;
}
/* Card titles. The kit CSS only covers the homepage and contact page; the
   service, location and new pages set 32px per element, which matched the
   secondary H2 and flattened the hierarchy. */
body .elementor-element .elementor-widget-container h3.elementor-heading-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}
@media (max-width: 767px) {
	body .elementor-element .elementor-widget-container h3.elementor-heading-title {
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Slide-out menu panel (markup in inc-nav-panel.php).
   Same pattern as fireplacesolutions.co.uk — right-hand panel, eyebrow, serif
   question, sections with a one-line description, one CTA at the foot — in
   Crawford's cream, maroon, Cormorant and Roboto.
   --------------------------------------------------------------------------- */
.cbi-nav {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
}
.cbi-nav.is-open { visibility: visible; }
.cbi-nav__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 18, 21, .5);
	opacity: 0;
	transition: opacity .3s;
}
.cbi-nav.is-open .cbi-nav__backdrop { opacity: 1; }
.cbi-nav__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(420px, 100%);
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	--cbi-nav-px: 28px;
	--cbi-nav-py: 24px;
	padding: var(--cbi-nav-py) var(--cbi-nav-px) calc(28px + env(safe-area-inset-bottom, 0px));
	background: #F9F7F4;
	color: #333;
	box-shadow: -12px 0 36px rgba(0, 0, 0, .25);
	transform: translateX(100%);
	transition: transform .3s ease;
}
.cbi-nav.is-open .cbi-nav__panel { transform: none; }
/* White band behind the logo and close button, full width of the panel. */
.cbi-nav__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: calc(var(--cbi-nav-py) * -1) calc(var(--cbi-nav-px) * -1) 24px;
	padding: 14px var(--cbi-nav-px);
	background: #fff;
	border-bottom: 1px solid #e7e0d9;
}
.cbi-nav__brand {
	font-family: "Cormorant Garamond", serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #762F41;
	text-transform: uppercase;
}
.cbi-nav__brand span {
	display: block;
	font-family: "Roboto", sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .18em;
	color: #6b6b6b;
}
.cbi-nav__close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: #762F41;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s;
}
.cbi-nav__close:hover,
.cbi-nav__close:focus-visible { background: #592335; }
.cbi-nav__title {
	margin: 0 0 6px;
	font-family: "Cormorant Garamond", serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: #762F41;
}
.cbi-nav__sub {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b6b6b;
}
.cbi-nav__list,
.cbi-nav__sub[id] {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cbi-nav__item { margin-bottom: 8px; }
.cbi-nav__link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 13px 16px;
	border: 1px solid #e7e0d9;
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s;
}
/* The accordion rows are <button> elements, which inherit white-space: nowrap
   from the UA/theme button styling — the blurb then refused to wrap and ran
   under the chevron and off the card on phones. The direct-link rows are <a>
   and wrapped correctly, which is why only some rows showed it. */
.cbi-nav .cbi-nav__link,
.cbi-nav .cbi-nav__label,
.cbi-nav .cbi-nav__blurb { white-space: normal; }
/* The text column must also be allowed to shrink, or it keeps its max-content
   width whatever the wrapping rules say. */
.cbi-nav__link > span {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.cbi-nav__label {
	display: block;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #333;
}
.cbi-nav__blurb {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.45;
	color: #6b6b6b;
}
/* The toggles are <button> elements, so the theme's and the kit's generic
   button hover styles paint them solid burgundy. Hold the card appearance and
   tint only the border, as the reference site does. */
.cbi-nav .cbi-nav__link,
.cbi-nav .cbi-nav__link:hover,
.cbi-nav .cbi-nav__link:focus,
.cbi-nav .cbi-nav__link:active {
	background-color: #fff;
	color: #333;
	box-shadow: none;
	min-height: 0;
}
.cbi-nav .cbi-nav__link:hover,
.cbi-nav .cbi-nav__link:focus-visible { border-color: #762F41; }
.cbi-nav__link:focus-visible {
	outline: 2px solid #762F41;
	outline-offset: 2px;
}
.cbi-nav__chev {
	flex: 0 0 auto;
	color: #762F41;
	transition: transform .2s;
}
.cbi-nav__toggle[aria-expanded="true"] .cbi-nav__chev { transform: rotate(180deg); }
.cbi-nav__logo { display: block; flex: 0 1 auto; }
.cbi-nav__logo img {
	display: block;
	width: auto;
	max-width: 190px;
	height: auto;
}
.cbi-nav__sub[id] { padding: 8px 0 0 12px; }
.cbi-nav__sub[id] li { margin: 0 0 6px; }
.cbi-nav__sub[id] a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid #ece6e0;
	border-radius: 6px;
	background: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	color: #444;
	text-decoration: none;
	transition: border-color .15s;
}
.cbi-nav__sub[id] a:hover,
.cbi-nav__sub[id] a:focus-visible { border-color: #762F41; }
.cbi-nav__sub[id] a:focus-visible {
	outline: 2px solid #762F41;
	outline-offset: 2px;
}
.cbi-nav__foot {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e4ded8;
}
.cbi-nav__cta {
	display: block;
	padding: 13px 20px;
	background: #762F41;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s;
}
.cbi-nav__cta:hover,
.cbi-nav__cta:focus-visible { background: #592335; color: #fff; }
.cbi-nav__contact {
	margin: 16px 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 12px;
	align-items: baseline;
	font-size: 13px;
}
.cbi-nav__contact a {
	font-weight: 600;
	color: #762F41;
	text-decoration: none;
	white-space: nowrap;
}
.cbi-nav__contact span { color: #6b6b6b; font-size: 12px; }
.cbi-nav__note {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6b6b6b;
}
@media (prefers-reduced-motion: reduce) {
	.cbi-nav__panel,
	.cbi-nav__backdrop { transition: none; }
}

/* Child-link arrows sit a little smaller than the top-level ones. */
.cbi-nav__sub[id] .cbi-nav__chev { width: 16px; height: 16px; }

/* Hero slider buttons on phones.
   The Slides widget caps its content at 66% of the slide, which left the CTA
   about 208px wide — "Explore Bespoke Interiors" then wrapped onto two lines
   with the arrow stranded below. The widget's content width is not a
   responsive control, so release it below the mobile breakpoint here. */
@media (max-width: 767px) {
	.elementor-widget-slides .elementor-slides .swiper-slide .swiper-slide-contents { max-width: 100%; }
	.elementor-widget-slides .elementor-slide-button { white-space: nowrap; }
}

/* Hero slider height.
   Elementor's defaults are 500px (desktop and tablet) and 400px on phones,
   which is taller than the hero needs and, on a phone, taller than the space
   left under the top bar, header, strapline and CTA band — the slide ran under
   the WhatsApp bar and the dots could only be reached by scrolling.
   On phones the height is tied to the small viewport height (svh, i.e. with
   the browser's address bar showing) less roughly the header stack and the
   WhatsApp bar, so the whole slide is visible on landing. */
.elementor-widget-slides { --cbi-hero-h: 420px; }
/* The slide's own 500px comes from Elementor's JS (it measures and sets the
   slide height at runtime), so the height has to be forced here or the slide
   stays 500 tall inside a 380 wrapper and its centred content is pushed down
   onto the pagination dots. */
.elementor-widget-slides .elementor-slides-wrapper,
.elementor-widget-slides .elementor-slides .swiper-slide,
.elementor-widget-slides .elementor-slides .swiper-slide-inner {
	height: var(--cbi-hero-h) !important;
}
@media (max-width: 1024px) {
	.elementor-widget-slides { --cbi-hero-h: 380px; }
}
@media (max-width: 767px) {
	/* Finish the hero exactly at the bottom of the viewport: the small
	   viewport height (address bar showing) less the measured distance from
	   the top of the page to the top of the slider. The fallback matches a
	   typical header stack in case the script has not run yet. */
	/* Reclaim height above the hero so it is not stretched to fill what is
	   left: the tagline line is decorative and repeated by the page heading,
	   and the promo band's own mobile padding is generous. */
	.elementor-location-header .elementor-element-6d0f2f02 { display: none; }
	.cc-header-promo-message {
		padding: 10px 16px !important;
		font-size: 20px !important;
	}
	.cc-header-promo-link {
		padding: 10px 16px !important;
		min-height: 48px !important;
	}

	/* Hero runs from under the header to the bottom of the viewport, with a
	   sensible ceiling so it never becomes a letterbox on a tall phone. */
	.elementor-widget-slides {
		--cbi-hero-h: clamp(340px, calc(100svh - var(--cbi-hero-offset, 240px)), 580px);
	}
	/* Keep the centred text and button clear of the dots and the WhatsApp bar
	   below them, rather than letting them collide. */
	.elementor-widget-slides .elementor-slides .swiper-slide-inner {
		padding-bottom: 112px;
	}
	/* The slide now runs to the bottom of the screen, where the fixed WhatsApp
	   bar sits, so lift the pagination dots clear of it. */
	.elementor-widget-slides.elementor-pagination-position-inside .swiper-pagination,
	.elementor-widget-slides .swiper-pagination { bottom: 72px !important; }
}

/* The top bar's hover/focus colours live in the widgets themselves (header
   template 49, phone buttons 1d8aae8 and 29037332) and are white there — they
   were black, which is what turned a number black when anything focused it. */
/* Programmatic focus target for back-to-top: no visible ring from the click,
   keyboard users still get :focus-visible on the controls inside. */
.elementor-location-header[tabindex="-1"]:focus { outline: none; }

/* Removed 2026-10-19, with the other 1025–1199px squeeze near the top of this
   file: both shrank type and spacing to keep seven top-level items on one row
   beside the logo. The nav now has its own row below the logo, so there is
   room at every desktop width and the type stays at its designed size. */

/* ---------------------------------------------------------------------------
   Blog (2026-10-19)

   Sean asked for the card and article treatment from Sharps' inspiration
   section: a small grey sans date ABOVE a modest serif title, a flat card with
   no border, shadow or radius, and articles set in generous type on a narrow
   measure. The hierarchy is theirs; the type and colour are Crawford's —
   Cormorant Garamond and the maroon, not their Libre Baskerville and near-black.

   Why CSS rather than widget settings: Elementor's Posts skin fixes the card
   order (image, title, meta, excerpt), so moving the date above the title needs
   flex order, and the skin's style controls are not exposed on the widget in a
   way the build script can set reliably.
   --------------------------------------------------------------------------- */

/* --- archive cards ------------------------------------------------------- */

/* Cards (Sean, 19 Oct), in the site's own idiom — the mega-menu tiles:
   white, square corners, a hairline border, image flush to the top edge.

   One card, one stylesheet block. The markup comes from the "Blog — Card"
   loop item template, which the loop grid uses on BOTH the blog index and
   "More from the blog" on an article — so a change here, or there, shows up
   in both places. That is why this is keyed on the card, not on a widget
   class belonging to one grid or the other.

   The two containers are selected by element id rather than a class:
   Elementor applies a widget's "CSS Classes" but not a flexbox container's,
   so cbicard01 (the card) and cbicard03 (its text block) have only their own
   ids to go on. The ids are fixed by tools/build-blog-section.py, and the
   header CSS above does the same thing. */

.elementor-loop-container { align-items: stretch; }

.elementor-element-cbicard01 {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid #E6E1DB;
	transition: box-shadow .25s ease, border-color .25s ease;
}

.elementor-element-cbicard01:hover {
	border-color: #D8D0C6;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.cbi-card__media { overflow: hidden; }
.cbi-card__media .elementor-widget-container { line-height: 0; }

.cbi-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .4s ease;
}

.elementor-element-cbicard01:hover .cbi-card__media img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.cbi-card__media img,
	.elementor-element-cbicard01:hover .cbi-card__media img { transition: none; transform: none; }
}

.elementor-element-cbicard03 {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* !important throughout: Elementor writes per-widget CSS for the loop item
   (post-1275.css) which loads after the theme stylesheet at equal
   specificity, so the kit's heading face won every tie. */
.cbi-card__date .elementor-heading-title {
	font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.02em;
	color: #6E6E6E !important;
	margin-bottom: 6px;
}

.cbi-card__title .elementor-heading-title,
.cbi-card__title .elementor-heading-title a {
	font-family: var(--e-global-typography-secondary-font-family, "Cormorant Garamond"), serif !important;
	font-size: 25px !important;
	font-weight: 600 !important;
	line-height: 1.22 !important;
	color: #762F41 !important;
	text-decoration: none;
}

.cbi-card__title .elementor-heading-title a:hover { color: #592332; }

.cbi-card__excerpt { margin-top: 10px; }

/* The dynamic excerpt tag outputs bare text, so style the container too. */
.cbi-card__excerpt .elementor-widget-container,
.cbi-card__excerpt p {
	margin: 0;
	font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	color: #333333 !important;
}

/* Pushed to the bottom so the links line up across a row of uneven cards. */
.cbi-card__more { margin-top: auto; padding-top: 14px; }

.cbi-card__more p { margin: 0; }

.cbi-card__more a {
	font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #762F41;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.cbi-card__more a:hover { color: #592332; }

@media (max-width: 767px) {
	.cbi-card__title .elementor-heading-title,
	.cbi-card__title .elementor-heading-title a { font-size: 23px !important; }
}

/* --- article -------------------------------------------------------------- */

/* Generous type on a narrow measure: ~660px and 19px, close to the reference.
   The container caps the column; these set the rhythm inside it. */
/* Size the paragraphs themselves: the kit sets `p` directly, so a size on the
   widget wrapper alone is inherited straight past (it stayed at 16px). */
.single-post .elementor-widget-theme-post-content { color: #333333; }

.single-post .elementor-widget-theme-post-content p,
.single-post .elementor-widget-theme-post-content li {
	font-size: 19px;
	line-height: 1.65;
	color: #333333;
}

.single-post .elementor-widget-theme-post-content p { margin: 0 0 1.15em; }

.single-post .elementor-widget-theme-post-content h2 {
	margin: 1.7em 0 0.5em;
	font-family: var(--e-global-typography-secondary-font-family, "Cormorant Garamond"), serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2;
	color: #762F41;
}

.single-post .elementor-widget-theme-post-content h3 {
	margin: 1.4em 0 0.4em;
	font-family: var(--e-global-typography-secondary-font-family, "Cormorant Garamond"), serif;
	font-size: 26px;
	font-weight: 600;
	color: #762F41;
}

.single-post .elementor-widget-theme-post-content ul,
.single-post .elementor-widget-theme-post-content ol { margin: 0 0 1.15em 1.1em; }
.single-post .elementor-widget-theme-post-content li { margin-bottom: 0.4em; }

.single-post .elementor-widget-theme-post-content a {
	color: #762F41;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The date and category line under the title. */
.single-post .elementor-widget-post-info .elementor-icon-list-text,
.single-post .elementor-widget-post-info a {
	font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif;
	font-size: 15px;
	color: #6E6E6E;
}

/* Prev/next. It was overflowing in huge serif, then sitting squashed between
   the CTA band and the footer with both titles centred in their halves
   (Sean, 19 Oct). Now: a rule above it, each link aligned to its own outer
   edge, and the arrow doing the work the duplicate "Previous"/"Next" words
   were doing. */
.single-post .elementor-element-cbiblog40 { border-top: 1px solid #E6E1DB; }

.single-post .elementor-post-navigation {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

.single-post .elementor-post-navigation__prev,
.single-post .elementor-post-navigation__next { flex: 1 1 0; min-width: 0; }

/* Alignment has to go on the spans: Elementor centres them, so setting it on
   the <a> alone leaves the wrapped second line centred. */
.single-post .elementor-post-navigation__prev a,
.single-post .elementor-post-navigation__prev .post-navigation__prev--label,
.single-post .elementor-post-navigation__prev .post-navigation__prev--title { text-align: left; }

.single-post .elementor-post-navigation__next a,
.single-post .elementor-post-navigation__next .post-navigation__next--label,
.single-post .elementor-post-navigation__next .post-navigation__next--title { text-align: right; }

.single-post .elementor-post-navigation__link a {
	display: block;
	font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif;
	text-decoration: none;
}

/* Elementor prints an arrow label and a word label; one is enough. */
.single-post .elementor-post-navigation .post-navigation__arrow-wrapper { display: none; }

.single-post .elementor-post-navigation__separator { display: none; }

.single-post .elementor-post-navigation .post-navigation__prev--label,
.single-post .elementor-post-navigation .post-navigation__next--label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6E6E6E;
}

.single-post .elementor-post-navigation .post-navigation__prev--title,
.single-post .elementor-post-navigation .post-navigation__next--title {
	display: block;
	margin-top: 4px;
	font-family: var(--e-global-typography-secondary-font-family, "Cormorant Garamond"), serif;
	font-size: 20px;
	line-height: 1.3;
	color: #762F41;
	white-space: normal;
	overflow-wrap: anywhere;
}

.single-post .elementor-post-navigation__link a:hover .post-navigation__prev--title,
.single-post .elementor-post-navigation__link a:hover .post-navigation__next--title {
	color: #592332;
}

@media (max-width: 600px) {
	.single-post .elementor-post-navigation { flex-direction: column; gap: 20px; }

	/* flex: 1 1 0 sizes the main axis, so once the container turns into a
	   column it zeroed the links' HEIGHT, and Elementor's overflow:hidden
	   clipped them away — the band rendered empty on a phone
	   (Sean, 19 Oct). Let them take their natural height here. */
	.single-post .elementor-post-navigation__prev,
	.single-post .elementor-post-navigation__next {
		flex: 0 0 auto;
		width: 100%;
	}

	.single-post .elementor-post-navigation__next a,
	.single-post .elementor-post-navigation__next .post-navigation__next--label,
	.single-post .elementor-post-navigation__next .post-navigation__next--title { text-align: left; }
}

@media (max-width: 767px) {
	.single-post .elementor-widget-theme-post-content p,
	.single-post .elementor-widget-theme-post-content li { font-size: 17px; }
	.single-post .elementor-widget-theme-post-content h2 { font-size: 28px; }
	.single-post .elementor-widget-theme-post-content h3 { font-size: 23px; }
}

/* Article hero: breadcrumb and meta over the photo need to be legible and
   quiet, not competing with the title. */
.single-post .elementor-element-cbiblog01 .elementor-widget-breadcrumbs,
.single-post .elementor-element-cbiblog01 .elementor-widget-breadcrumbs a,
.single-post .elementor-element-cbiblog01 .elementor-widget-breadcrumbs span {
	font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

.single-post .elementor-element-cbiblog01 .elementor-widget-breadcrumbs a:hover { color: #FFFFFF; }

.single-post .elementor-element-cbiblog01 .elementor-widget-post-info,
.single-post .elementor-element-cbiblog01 .elementor-widget-post-info a,
.single-post .elementor-element-cbiblog01 .elementor-widget-post-info .elementor-icon-list-text {
	font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.9);
}

/* The date and category icons kept the global icon colour (maroon) against
   the dark hero. Covers both the icon-font and SVG renderings. */
.single-post .elementor-element-cbiblog01 .elementor-widget-post-info .elementor-icon-list-icon i,
.single-post .elementor-element-cbiblog01 .elementor-widget-post-info .elementor-icon-list-icon {
	color: rgba(255, 255, 255, 0.9);
}

.single-post .elementor-element-cbiblog01 .elementor-widget-post-info .elementor-icon-list-icon svg,
.single-post .elementor-element-cbiblog01 .elementor-widget-post-info .elementor-icon-list-icon svg * {
	fill: rgba(255, 255, 255, 0.9);
}

.single-post .elementor-element-cbiblog01 h1 {
	max-width: 17em;
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

/* --- article: contents list and author blocks ---------------------------- */

/* Generated from the H2s by inc-blog.php — the writer does not maintain it. */
.cbi-toc {
	margin: 0 0 2em;
	padding: 20px 24px 22px;
	background: #F7F6F2;
	border-left: 3px solid #762F41;
}

.cbi-toc__title {
	margin: 0 0 10px !important;
	font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6E6E6E !important;
}

.cbi-toc__list { margin: 0; padding-left: 1.2em; }

.cbi-toc__list li {
	margin-bottom: 6px;
	font-size: 17px !important;
	line-height: 1.45 !important;
}

.cbi-toc__list a {
	color: #762F41;
	text-decoration: none;
	border-bottom: 1px solid rgba(118, 47, 65, 0.3);
}

.cbi-toc__list a:hover { border-bottom-color: #762F41; }

/* Anchor targets clear the sticky header. */
.single-post .elementor-widget-theme-post-content h2 { scroll-margin-top: 150px; }

/*
 * Author blocks. The reference runs an alternating image/text rhythm, which
 * is composed per article rather than set by the template, so these are the
 * patterns a writer drops into the editor. See notes/blog-authoring.md.
 *
 *   <div class="cbi-split"> <figure>…</figure> <div>…</div> </div>
 *
 * Every other .cbi-split flips, so a run of them alternates on its own.
 */
.cbi-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
	margin: 2.4em 0;
}

.cbi-split > figure { margin: 0; }

.cbi-split > figure img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
}

.cbi-split > figure figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: #6E6E6E;
}

/* Added by inc-blog.php to every second split; see the note there. */
.cbi-split--reverse > figure { order: 2; }

.cbi-split h2:first-child,
.cbi-split h3:first-child { margin-top: 0 !important; }

.cbi-split p:last-child { margin-bottom: 0; }

/* A full-bleed image. The article now sits on the site's normal full-width
   container with 30px gutters, so this only has to clear those gutters. */
.cbi-wide {
	margin: 2.4em calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.cbi-wide img { display: block; width: 100%; max-height: 560px; object-fit: cover; }

.cbi-wide figcaption {
	margin: 8px 0 0;
	padding: 0 30px;
	font-size: 14px;
	color: #6E6E6E;
}

/* A pulled-out summary, like the reference's "At a glance". */
.cbi-callout {
	margin: 2.2em 0;
	padding: 22px 26px;
	background: #F7F6F2;
	border-left: 3px solid #347F6C;
}

.cbi-callout > :first-child { margin-top: 0 !important; }
.cbi-callout > :last-child { margin-bottom: 0 !important; }

@media (max-width: 767px) {
	.cbi-split { grid-template-columns: 1fr; gap: 18px; }
	.cbi-split--reverse > figure { order: 0; }
	.cbi-wide { margin: 1.8em calc(50% - 50vw); }
}

/* --- share row and related posts ----------------------------------------- */

.cbi-eyebrow .elementor-heading-title {
	font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.single-post .elementor-widget-share-buttons .elementor-share-btn {
	border: 1px solid #E6E1DB;
	border-radius: 0;
	background: #FFFFFF;
	color: #762F41;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.single-post .elementor-widget-share-buttons .elementor-share-btn:hover {
	background: #762F41;
	border-color: #762F41;
	color: #FFFFFF;
}

.single-post .elementor-widget-share-buttons .elementor-share-btn__icon { color: inherit; }

/* "More from the blog" sits on the full width, like the archive grid, so its
   heading lines up with the cards rather than the article measure. */
.single-post .elementor-element-cbiblog35 .elementor-heading-title {
	font-size: 30px;
}

/* The → after a slide button is a text character, and the global kit's rule
   for it sets no font, so it inherits Roboto. Roboto is served as a variable
   font split by unicode range, and U+2192 falls outside the latin subset — so
   that one arrow pulled down a whole extra 40KB font file, at the priority
   fonts get, competing with the hero image for bandwidth. Arial has the glyph
   and is already used by the sibling rule on .elementor-button-icon::after, so
   this also makes the two arrows match, which they did not before. */
.elementor-slide-button::after {
	font-family: Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------------------
   Tap target sizes (WCAG 2.5.8 / Lighthouse "target-size")
   ---------------------------------------------------------------------------
   Three controls were smaller than the 24×24px minimum: the footer's social
   icons (12×17), the hero slider's pagination dots (10×10 on a phone) and the
   menu links in the slide-out panel (22px tall). Each gets a bigger hit area
   without changing what is drawn, so the design is untouched and the controls
   simply become easier to hit with a thumb. */

/* Social icons: the glyph keeps its size, the link gets room around it. */
.elementor-widget-icon .elementor-icon-wrapper > a.elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
}

/* Pagination dots: the hit area goes to 24×24 while the visible dot stays the
   size the kit sets, by moving the colour onto a centred pseudo-element. The
   two colours mirror the widget's own settings (white, active #762F41). */
.elementor-widget-slides .swiper-pagination-bullet {
	position: relative;
	width: 24px !important;
	height: 24px !important;
	background-color: transparent !important;
	opacity: 1 !important;
}

.elementor-widget-slides .swiper-pagination-bullet::before {
	content: "";
	position: absolute;
	inset: 4.5px;
	border-radius: 50%;
	background-color: #FFFFFF;
}

.elementor-widget-slides .swiper-pagination-bullet-active::before {
	background-color: #762F41;
}

@media (max-width: 1024px) {
	.elementor-widget-slides .swiper-pagination-bullet::before { inset: 6px; }
}

@media (max-width: 767px) {
	.elementor-widget-slides .swiper-pagination-bullet::before { inset: 7px; }
}

/* Menu links: 22px tall was two pixels short of the minimum. */
.elementor-nav-menu--main .elementor-item {
	min-height: 24px;
}

/* Static hero (tools/static-hero.php) — matches what the Slides widget used to
   render, so swapping between the two is not a visual change: the content
   column was 66% of the slide, and on a phone the hero ran from under the
   header to the bottom of the viewport. */
.cbi-static-hero > .elementor-element {
	max-width: 66%;
}

@media (max-width: 767px) {
	.cbi-static-hero {
		min-height: clamp(340px, calc(100svh - var(--cbi-hero-offset, 240px)), 580px) !important;
	}

	.cbi-static-hero > .elementor-element {
		max-width: 100%;
	}
}

/* Hide "More from the blog" while there is nothing to put in it. The body
   class is only present on a single post with no other published post, so
   this stops applying by itself once the second piece goes out. */
body.cbi-no-related .elementor-element-cbiblog35 { display: none !important; }

/* Article hero: the featured image as a real <img> behind the overlay.
   As a CSS background the container was the LCP element and 94% of its
   5.5s was element render delay, with the file downloaded by 131ms — the
   paint, not the fetch, was the problem. An <img> is painted by the normal
   layout pass. Positioned rather than flowed so the breadcrumb, title and
   meta keep their original places. */
.elementor-element-cbiblog01 { position: relative; overflow: hidden; }
.elementor-element-cbiblog01 > .cbi-hero-img {
	/* !important throughout: Elementor's own per-element rules
	   (.elementor-element.elementor-element-cbiblog09) out-specify a
	   descendant selector, so position came back as 'relative' and the
	   image sat in the flow at partial width. */
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	z-index: 0 !important;
	pointer-events: none;
}
.elementor-element-cbiblog01 > .cbi-hero-img .elementor-widget-container,
.elementor-element-cbiblog01 > .cbi-hero-img figure,
.elementor-element-cbiblog01 > .cbi-hero-img a { height: 100% !important; display: block; margin: 0; }
.elementor-element-cbiblog01 > .cbi-hero-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center center;
	display: block;
}
/* The gradient scrim is the container's ::before; keep it over the image
   and the text over both. */
.elementor-element-cbiblog01::before { z-index: 1; }
.elementor-element-cbiblog01 > *:not(.cbi-hero-img) { position: relative; z-index: 2; }