/* ==========================================================================
   Frosted-glass buttons

   The white buttons sit on dark bands and hero photography. The translucent
   fill itself lives in the Elementor settings (and in the slider layer data),
   so it stays editable in the builder - this file only adds the blur, which
   neither editor exposes a control for.

   Elementor buttons are hooked by the tbe-glass class set on the widget.
   The slider button has no custom-class hook: Revolution Slider's v6 renderer
   drops a class key on the layer, so it is targeted by the id the renderer
   emits, which is derived from slider/slide/layer index.
   ========================================================================== */

.tbe-glass .elementor-button,
#slider-1-slide-1-layer-0,          /* "View Locations" - slider hero */
.rs-layer.tbe-glass {               /* SR7 renderer, via the layer's iClass */
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
}

/* Without backdrop-filter the fill alone reads as a faint wash rather than a
   surface, so give it more body. Specificity has to clear Elementor's own
   per-element rule, hence the doubled-up widget classes. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.elementor-element.elementor-widget-button.tbe-glass .elementor-button {
		background-color: rgba(255, 255, 255, .22);
	}
}

/* Some people ask their system for less transparency. Give them a solid-enough
   surface and drop the blur entirely. */
@media (prefers-reduced-transparency: reduce) {

	.elementor-element.elementor-widget-button.tbe-glass .elementor-button {
		background-color: rgba(255, 255, 255, .3);
	}

	.tbe-glass .elementor-button,
	#slider-1-slide-1-layer-0,
	.rs-layer.tbe-glass {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* ==========================================================================
   Breakpoint alignment

   Elementor's tablet ceiling was moved to 991 so the mega menu collapses at
   992 (matching the Bootstrap scale used on the custom builds). The parent
   theme still steps its headings down at its own hardcoded 1024px, which left
   992-1024 showing a desktop nav next to tablet-sized headings.

   This restores the theme's desktop heading sizes across that band, so
   everything switches together at 992.
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1024px) {

	h1,
	.wp-site-blocks .entry-hero h1 {
		font-size: 70px;
		line-height: 80px;
	}

	h2 {
		font-size: 60px;
		line-height: 70px;
	}

	h3 {
		font-size: 28px;
		line-height: 36px;
	}
}

/* ==========================================================================
   Mega menu dropdown indicators

   The solid Font Awesome carets were replaced with rounded chevrons set
   through the widget's own icon control. Elementor sizes its bundled icons
   via the .e-font-icon-svg class, which a custom SVG never carries - without
   a constraint the chevron expands to fill its button. Sized in em so it
   tracks the menu's font size, and it inherits colour through
   stroke="currentColor".
   ========================================================================== */
.e-n-menu-dropdown-icon svg {
	width: .78em;
	height: .78em;
	flex: 0 0 auto;
}

/* ==========================================================================
   Mobile header

   The header row is flex-wrap:wrap with a 30px gap, and at 375px the logo
   (185), menu toggle (120) and CTA (160) cannot share a line - so "Book A
   Tour" dropped to a second row and the header stood 164px tall, a fifth of
   a phone screen. Tightening the gap, trimming the logo and compacting the
   button fits all three on one row, and the order is set so the toggle stays
   on the right where it is expected.
   ========================================================================== */
@media (max-width: 767px) {

	[data-elementor-type="header"] .e-con-inner,
	[data-elementor-type="header"] .elementor-container {
		flex-wrap: nowrap;
		gap: 10px;
		align-items: center;
	}

	[data-elementor-type="header"] .elementor-widget-image {
		order: 1;
		flex: 0 1 auto;
	}

	[data-elementor-type="header"] .elementor-widget-image img {
		max-width: 132px;
		height: auto;
	}

	[data-elementor-type="header"] .elementor-widget-button {
		order: 2;
		flex: 0 0 auto;
		margin-left: auto;
	}

	[data-elementor-type="header"] .elementor-widget-button .elementor-button {
		padding: 12px 16px;
		font-size: 11px;
		letter-spacing: .5px;
		white-space: nowrap;
	}

	[data-elementor-type="header"] .elementor-widget-n-menu {
		order: 3;
		flex: 0 0 auto;
		width: auto;
	}
}

/* ==========================================================================
   Touch targets

   The link-style buttons ("Get Directions") sit on 8px/2px padding, which
   leaves them 33px tall - under the 44px a finger needs. A floor on every
   button at mobile fixes those without touching the pills, which already
   clear it at 49px.
   ========================================================================== */
@media (max-width: 767px) {

	[data-elementor-type="wp-page"] .elementor-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Home benefit grid, 992-1399

   The six benefit cards sit three-up inside a half-width card, so between
   992 and 1399 each box is only 87-153px wide and the label gets 17-83px of
   that once the inline icon is subtracted. word-break:break-word then splits
   words mid-syllable ("Location s", "Infrastru cture"). Their container is
   flex-wrap:nowrap, so the columns cannot reflow on their own.

   Below 1400 the icon moves above the label, which gives the text the full
   box width - enough for three-up to keep working at 1200. Below 1200 there
   is no longer room for three, so the rows drop to two-up. At 1400 and over
   the original three-up inline layout is left alone.
   ========================================================================== */
@media (max-width: 1399px) {

	.elementor-element-1d0c836 > .elementor-container,
	.elementor-element-82d32ea > .elementor-container {
		flex-wrap: wrap;
	}

	/* Stacking the icon lets the label fill the box, so the columns need a
	   gutter of their own or adjacent labels run together. */
	.elementor-element-1d0c836 > .elementor-container > .elementor-column,
	.elementor-element-82d32ea > .elementor-container > .elementor-column {
		padding-right: 18px;
	}

	/* Elementor's own .elementor-widget-icon-box.elementor-position-inline-start
	   rule sets the row direction, so this has to out-specify it. */
	.elementor-element-1d0c836 .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-wrapper,
	.elementor-element-82d32ea .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 10px;
	}

	.elementor-element-1d0c836 .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-icon,
	.elementor-element-82d32ea .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-icon {
		margin: 0;
	}
}

/* ==========================================================================
   Circular badge pair

   The spinning ring and the tbe mark are two separate absolutely-positioned
   widgets - the mark sits 47px to the right of the ring and overlaps it. Both
   carry fixed left offsets, so their right edges stay at 1177 and 1224
   whatever the viewport, and below about 1250 they hang off the side.

   Shifting both by the same amount keeps their relationship intact while
   bringing them back on screen. The ring cannot be moved with a transform:
   its rotate-center animation owns that property.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1399px) {

	[data-elementor-type="wp-page"] .elementor-element-4cd2433 {
		left: 706px !important;   /* 750 - 44 */
		right: auto !important;
	}

	[data-elementor-type="wp-page"] .elementor-element-fc26856 {
		left: 995px !important;   /* 1039 - 44 */
	}
}

@media (min-width: 992px) and (max-width: 1199px) {

	[data-elementor-type="wp-page"] .elementor-element-4cd2433 {
		left: 498px !important;   /* 750 - 252 */
		right: auto !important;
	}

	[data-elementor-type="wp-page"] .elementor-element-fc26856 {
		left: 787px !important;   /* 1039 - 252 */
	}
}

/* Below the tablet boundary both widgets collapse to zero width while the ring
   SVG carries on painting at its authored offset - off the side of the screen
   at 320, and floating loose over the section at 768. They are decoration, so
   they come out entirely rather than being chased across three more
   breakpoints. */
@media (max-width: 991px) {

	[data-elementor-type="wp-page"] .elementor-element-4cd2433,
	[data-elementor-type="wp-page"] .elementor-element-fc26856 {
		display: none !important;
	}
}

/* ==========================================================================
   "A Workspace Designed Around Business Growth" card, below 1200

   The card's content wrap is inset by a fixed 350px on the left (to clear the
   background photograph) and a fixed amount on the right, so its width is
   always viewport minus 622 - just 370px at 992. The paragraph then adds
   112px of its own right padding, leaving 250px of text and the one- and
   two-word lines in the 992 screenshot.

   Below 1200 the insets shrink so the card can use the width it has. It
   overlaps the photograph more, which is already how the design reads at
   larger sizes.
   ========================================================================== */
/* From 1200 up the card sits on Elementor's own 350px / 224px insets inside the
   1400px column, leaving it 826px wide. Trimming both a little gives it 925px
   without touching the column or the site's content width - the card grows into
   its own margins rather than the page growing around it.

   The badge ring hangs over the card's top-right corner. The card's text never
   reaches it: what extends furthest right is the benefit labels, which sit well
   below the ring, so the extra width costs nothing there. */
@media (min-width: 1200px) {

	[data-elementor-type="wp-page"] .elementor-element-f4c389e > .elementor-element-populated {
		margin-left: 290px !important;
		margin-right: 185px !important;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {

	/* Elementor writes the 350px inset onto .elementor-element-populated from
	   the column's own settings, at equal specificity to anything we can write
	   here - hence !important rather than a selector-weight arms race. */
	[data-elementor-type="wp-page"] .elementor-element-f4c389e > .elementor-element-populated {
		margin-left: 22% !important;
		margin-right: 24px !important;
	}

	[data-elementor-type="wp-page"] .elementor-element-f4da234 {
		padding-right: 24px !important;
	}
}

/* At tablet and below the section stacks - the photograph sits above the card,
   so the card needs no left inset at all. It was still carrying one, plus
   140px of padding on each side, which left 258px of content and 68px labels
   ("Premiu m Busines s Locatio ns"). */
@media (max-width: 991px) {

	[data-elementor-type="wp-page"] .elementor-element-f4c389e > .elementor-element-populated {
		margin-left: 24px !important;
		margin-right: 24px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	[data-elementor-type="wp-page"] .elementor-element-f4da234 {
		padding-right: 0 !important;
	}
}

/* ==========================================================================
   Workspace card titles

   The hover-reveal cards carry word-break:break-word, so once the card
   narrows below about 1400 a title that no longer fits is split mid-word
   ("Meeting & Boardro oms"). Words should wrap, never break: a slightly
   tighter fit reads far better than a broken word.
   ========================================================================== */
.elementor-widget-ucaddon_hover_text_reveal_content_box,
.elementor-widget-ucaddon_hover_text_reveal_content_box * {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* ==========================================================================
   Our Primary Locations, tablet and below

   The five location cards sit in an asymmetric desktop grid: their groups
   carry fixed widths (264, 264, 179, 356...), so at 768 they crowd into the
   left half at four different sizes with the right half empty. Below 992 the
   groups and the cards inside them go full width of their track, two per row,
   so every card matches. The city labels also carried word-break:break-word,
   which split "JOHANNESBURG" across lines.
   ========================================================================== */
@media (max-width: 991px) {

	[data-elementor-type="wp-page"] .elementor-element-3cf6327 {
		gap: 20px;
	}

	/* The grouping wrappers only exist to build the desktop arrangement - one
	   of them nests a pair, which would otherwise split a single track into two
	   half-width cards. display:contents removes the wrappers from layout so
	   every card link becomes a direct grid item and they all size alike. */
	[data-elementor-type="wp-page"] .elementor-element-3cf6327 .e-con:not(a) {
		display: contents;
	}

	[data-elementor-type="wp-page"] .elementor-element-3cf6327 a.e-con {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: none !important;
	}

	[data-elementor-type="wp-page"] .elementor-element-3cf6327 * {
		word-break: normal;
		overflow-wrap: normal;
	}
}

/* Two-up only holds while the row is wide enough for the longest city name.
   At 375 a half-width card leaves 68px of text and "Johannesburg" needs 114,
   so below the tablet boundary the cards go one per row. */
@media (min-width: 768px) and (max-width: 991px) {

	[data-elementor-type="wp-page"] .elementor-element-3cf6327 a.e-con {
		width: calc(50% - 10px) !important;
		flex: 0 0 calc(50% - 10px) !important;
	}
}

/* ==========================================================================
   Our Primary Locations, desktop - spacing and alignment

   Nothing in this grid lined up. Three separate causes:

   - the right-hand group nests one level deeper than the left (the pair of
     Sandown and Rivonia sits in its own container), and that extra container
     carries its own 10px inset, pushing its two cards 10px down and 10px in
     from everything else
   - each card carries its own min-height - 270, 250, 290, 290 and 230 - so
     the seam between the two rows fell in a different place on each side
   - the two groups did not grow to fill the row, which left a 10px inset on
     the left against 30px on the right

   The gaps are also brought onto the 20px the workspace carousel uses, and
   the outer inset moves to the grid itself so every gutter inside it is that
   same 20px rather than two insets adding up to 40 between the groups.

   Below 992 the cards go one and two up under their own rules above, so this
   is scoped to the desktop arrangement.
   ========================================================================== */
@media (min-width: 992px) {

	[data-elementor-type="wp-page"] .elementor-element-3cf6327 {
		gap: 20px !important;
		padding: 20px !important;
	}

	[data-elementor-type="wp-page"] .elementor-element-730ab9e,
	[data-elementor-type="wp-page"] .elementor-element-1a240b1,
	[data-elementor-type="wp-page"] .elementor-element-330d2f6 {
		gap: 20px !important;
		padding: 0 !important;
	}

	/* fill the row, so the inset on the right matches the one on the left */
	[data-elementor-type="wp-page"] .elementor-element-730ab9e,
	[data-elementor-type="wp-page"] .elementor-element-1a240b1 {
		flex-grow: 1 !important;
	}

	/* one height per row, so the seam runs straight across both groups */
	[data-elementor-type="wp-page"] .elementor-element-4df0296,
	[data-elementor-type="wp-page"] .elementor-element-716a54a,
	[data-elementor-type="wp-page"] .elementor-element-9407bf3 {
		min-height: 290px !important;
	}

	[data-elementor-type="wp-page"] .elementor-element-11c93f4,
	[data-elementor-type="wp-page"] .elementor-element-76661b5 {
		min-height: 250px !important;
	}
}

/* ==========================================================================
   Workspace card titles, below 1200

   The hover-reveal cards carry a fixed 55px right padding from their widget
   settings, which is fine on a full-width desktop card but takes a third of
   the box once the grid narrows: at 992 the card is 198px and the title gets
   118px, so "Meeting & Boardrooms" is clipped. Below 1200 the padding drops
   to something proportional to the space actually available.
   ========================================================================== */
@media (max-width: 1199px) {

	/* Elementor writes these per element as
	   `.elementor-1503 .elementor-element.elementor-element-xxx .uc_box_content`,
	   which no selector here can outweigh - hence !important rather than a
	   specificity arms race. Its own tablet rule widens the right padding to
	   95px, which is the worse case of the two and has to go as well. */
	[data-elementor-type="wp-page"] .uc_box_content {
		padding-right: 16px !important;
		padding-left: 16px !important;
	}

	/* The title also steps down, the same 28 -> 24 the h3 scale takes on the
	   custom builds. Padding alone left "Meeting & Boardrooms" 7px short. */
	[data-elementor-type="wp-page"] .uc_title {
		font-size: 24px !important;
		line-height: 30px !important;
	}
}

/* ==========================================================================
   Section inset on small phones

   Every top-level container sits on a 20px inset except the page hero, which
   carries 40px. Nested containers add another 10px a side twice, so at 320
   the hero heading is left with 200px - and "Professionals" at 32px needs
   207, so the word is clipped. Bringing the hero into line with the rest
   gives it 240px, and the heading steps down to match the narrower measure.
   ========================================================================== */
@media (max-width: 575px) {

	[data-elementor-type="wp-page"] > .e-con {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 479px) {

	[data-elementor-type="wp-page"] h2,
	[data-elementor-type="wp-page"] h2.elementor-heading-title {
		font-size: 28px;
		line-height: 34px;
	}
}

/* ==========================================================================
   Floor-plan diagram

   The location pages carry an SVG floor plan authored on a 518-unit grid with
   its labels at 13 units. The SVG is set to width:100%, so the labels shrink
   with the column - at 375 they render at about 5px. Below the tablet
   boundary the diagram keeps a legible minimum width and scrolls sideways
   inside its own box instead, which is how the rest of the wide content on
   the site behaves.
   ========================================================================== */
.tbe-floorplan {
	max-width: 100%;
}

@media (max-width: 767px) {

	.tbe-floorplan {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 460px keeps the 13-unit labels at ~11.5px, the smallest that still reads */
	.tbe-floorplan svg {
		min-width: 460px;
	}
}

/* ==========================================================================
   Footer link touch targets

   The footer link lists are icon-list widgets rather than buttons, so the
   button floor set above does not reach them - they sit at 22px, half of
   what a finger needs. The spacing is added below the tablet boundary only,
   where the columns have already stacked and there is room for it.
   ========================================================================== */
@media (max-width: 767px) {

	[data-elementor-type="footer"] .elementor-icon-list-item > a,
	[data-elementor-type="footer"] .elementor-icon-list-item > span {
		min-height: 40px;
		display: flex;
		align-items: center;
	}
}

/* ==========================================================================
   Image pairs inside a flex row

   The workspace pages put two images side by side in a container that is
   flex-wrap:nowrap. A flex item defaults to min-width:auto, which floors it
   at the image's intrinsic width - 596px here - so a 616px row holding two
   of them cannot shrink either one, and the second is pushed clean outside
   the row. The page never scrolls sideways because .site clips it, so the
   image is simply not there.

   Letting the items shrink is all that is needed; the images already carry
   max-width:100%, so they follow.
   ========================================================================== */
[data-elementor-type="wp-page"] .e-con > .elementor-widget-image {
	min-width: 0;
	/* Co-Working's pair is additionally set to `flex: 1 0 auto`, so lifting the
	   min-width floor alone would not let it give ground. */
	flex-shrink: 1;
}

[data-elementor-type="wp-page"] .e-con > .elementor-widget-image img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Nested containers with a hard width

   3 Sandown's amenity grid is a container with width:1036px - the width three
   320px cards and their gaps need - sitting inside a column that is only
   952px at 992. It hangs 22px off each side and is clipped, taking the cards
   with it. Nested containers should never be wider than what holds them; the
   cards then wrap to two per row on their own.

   Scoped to .e-child so top-level stretched sections, which are meant to be
   wider than their wrapper, are left alone.
   ========================================================================== */
[data-elementor-type="wp-page"] .e-con.e-child {
	max-width: 100%;
}

/* ==========================================================================
   Mega menu panels below the navigation switch

   The Workspaces and Locations panels keep their desktop layout when the
   mobile toggle takes over: a flex-wrap:nowrap row of five columns. On a
   375px screen that row runs from 50px to 1184px, so only the first item and
   half of the second are reachable - the rest are off the side of the screen
   with no way to scroll to them.

   Below 992, where the toggle is in charge, the panel's top-level row stacks.
   The inner icon-and-label rows are left alone so each item still reads the
   way it does on desktop.
   ========================================================================== */
@media (max-width: 991px) {

	/* Every container in the panel, not just the outermost: Workspaces nests a
	   second nowrap row one level down that holds the five items. Only the
	   Elementor containers are touched, so each item's own icon-and-label
	   wrapper keeps its layout. */
	[data-elementor-type="header"] .e-n-menu-content .e-con,
	[data-elementor-type="header"] .e-n-menu-content .e-con-inner {
		flex-direction: column;
		flex-wrap: wrap;
	}

	[data-elementor-type="header"] .e-n-menu-content .e-con > *,
	[data-elementor-type="header"] .e-n-menu-content .e-con-inner > * {
		width: 100%;
		max-width: 100%;
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   Forms on small screens

   Two problems, both only visible on a phone.

   The fields are set at 14px. Safari on iOS zooms the page in whenever a
   field smaller than 16px takes focus, and does not zoom back out - the
   visitor is left on a magnified, sideways-scrolling page halfway through
   filling the form in. 16px is the threshold, so the fields go to 16px below
   the tablet boundary; nothing above it changes.

   The contact form also sits in a container carrying a 46px inset a side,
   which is a quarter of a 375px screen and squeezes the fields to 243px. The
   same container on the location pages is already at 10px, so this brings the
   contact page into line with them.
   ========================================================================== */
@media (max-width: 767px) {

	[data-elementor-type="wp-page"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
	[data-elementor-type="wp-page"] textarea,
	[data-elementor-type="wp-page"] select,
	/* the enquiry forms ship their own inline `.tbe-enquiry input, select,
	   textarea { font-size: 15px }`, which ties the rule above on specificity
	   and wins on order - the select and textarea need out-specifying */
	[data-elementor-type="wp-page"] .tbe-enquiry input,
	[data-elementor-type="wp-page"] .tbe-enquiry textarea,
	[data-elementor-type="wp-page"] .tbe-enquiry select {
		font-size: 16px;
	}

	[data-elementor-type="wp-page"] .e-con:has(> .elementor-widget-shortcode) {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   "Find The Right Workspace" - centre-mode carousel

   The five workspace cards were a fixed row of 280x540 portraits sitting
   flush against each other. They are now a carousel: 16:9 cards, one centred,
   the cards either side bleeding off the edges, with arrows, autoplay and a
   real loop so the last card sits beside the first.

   The movement is a transform on the track, driven by carousel.js, which
   clones the slides front and back to make the loop seamless. The cards stay
   ordinary Elementor columns so they remain editable in the builder, and the
   whole thing collapses back to a plain row if the script does not run.
   ========================================================================== */
.tbe-carousel,
.elementor-element-8dede7c > .elementor-container {
	--tbe-card: 60%;
}

.elementor-element-8dede7c > .elementor-container {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	will-change: transform;
}

/* The frame clips the loop; the track slides inside it. The frame is the
   column wrap, which is also where the arrows are anchored. */
.tbe-carousel {
	position: relative;
	overflow: hidden;
}

.tbe-carousel:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .65);
	outline-offset: 4px;
}

.elementor-element-8dede7c > .elementor-container > .elementor-column {
	flex: 0 0 var(--tbe-card);
	width: var(--tbe-card) !important;
	max-width: none !important;
}

/* The card's height is written onto four nested wrappers per element, so the
   ratio has to be set on all of them. */
.elementor-element-8dede7c .uc_long_content_box,
.elementor-element-8dede7c .uc_long_content_box_holder,
.elementor-element-8dede7c .uc_long_content_box_box,
.elementor-element-8dede7c .uc_image_box {
	height: auto !important;
	aspect-ratio: 16 / 9;
}

/* The cards either side are held back so the centred one leads. Opacity alone
   only fades them toward the backdrop, so brightness does the actual
   darkening - on the near-black band behind the carousel the two together
   read as genuinely dimmed rather than washed out. */
.elementor-element-8dede7c > .elementor-container > .elementor-column {
	transition: opacity .45s ease, filter .45s ease;
	opacity: .5;
	filter: brightness(.45);
}

.elementor-element-8dede7c > .elementor-container > .tbe-is-centre {
	opacity: 1;
	filter: none;
}

/* ---- arrows ------------------------------------------------------------- */
.tbe-carousel-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(18, 16, 15, .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}

.tbe-carousel-arrow svg {
	width: 22px;
	height: 22px;
}

.tbe-carousel-arrow:hover,
.tbe-carousel-arrow:focus-visible {
	border-color: rgba(255, 255, 255, .8);
	background: rgba(18, 16, 15, .8);
}

.tbe-carousel-prev {
	left: 18px;
}

.tbe-carousel-next {
	right: 18px;
}

/* A narrower screen needs a proportionally wider card, or the centre one ends
   up too small to read and the neighbours take over. */
@media (max-width: 1199px) {

	.elementor-element-8dede7c > .elementor-container {
		--tbe-card: 68%;
	}
}

@media (max-width: 991px) {

	.elementor-element-8dede7c > .elementor-container {
		--tbe-card: 76%;
		gap: 16px;
	}

	.tbe-carousel-arrow {
		width: 44px;
		height: 44px;
	}

	.tbe-carousel-prev {
		left: 10px;
	}

	.tbe-carousel-next {
		right: 10px;
	}
}

/* On a phone the track is only ~335px, so a wider card would leave the
   neighbours too thin to read as a strip that continues. */
@media (max-width: 767px) {

	.elementor-element-8dede7c > .elementor-container {
		--tbe-card: 78%;
		gap: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.elementor-element-8dede7c > .elementor-container,
	.elementor-element-8dede7c > .elementor-container > .elementor-column {
		transition: none !important;
	}
}

/* ==========================================================================
   Rounded corners on content blocks

   The location cards already ship with a 6px radius and the client wants the
   same softening everywhere else, so that value becomes a token and the rest
   of the blocks pick it up: page images, the workspace carousel cards and the
   Business Growth card.

   Scoped to [data-elementor-type="wp-page"] so the header logo, the footer
   and the hero slider keep their square edges - a radius on a full-bleed
   element reads as a mistake rather than a detail.

   The carousel card paints its photograph as a background on the innermost
   wrapper, so the radius goes on all four nested boxes; rounding only the
   outer one leaves square corners showing through.
   ========================================================================== */
:root {
	--tbe-radius: 6px;
}

[data-elementor-type="wp-page"] .elementor-widget-image img {
	border-radius: var(--tbe-radius) !important;
}

.elementor-element-8dede7c .uc_long_content_box,
.elementor-element-8dede7c .uc_long_content_box_holder,
.elementor-element-8dede7c .uc_long_content_box_box,
.elementor-element-8dede7c .uc_image_box {
	border-radius: var(--tbe-radius) !important;
}

[data-elementor-type="wp-page"] .elementor-element-f4c389e > .elementor-element-populated {
	border-radius: var(--tbe-radius) !important;
}

/* Cards: nested containers and inner-section columns. Applied broadly rather
   than card by card, because a radius on an element with no background and no
   border paints nothing - it only shows where there is something to round.
   Checked across the pages: no full-width element that is actually visible
   picks up a corner, so the wide layout wrappers this also matches are
   no-ops. Top-level sections are excluded by .e-child, which keeps the
   full-bleed dark bands square. */
[data-elementor-type="wp-page"] .e-con.e-child,
[data-elementor-type="wp-page"] .elementor-inner-section .elementor-element-populated {
	border-radius: var(--tbe-radius);
}

/* Form fields. Contact Form 7 ships them at 2px, which reads as an accident
   next to a 6px card. The submit button keeps its pill. */
[data-elementor-type="wp-page"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-elementor-type="wp-page"] textarea,
[data-elementor-type="wp-page"] select {
	border-radius: var(--tbe-radius) !important;
}

/* Maps, video embeds and the floor-plan diagram */
[data-elementor-type="wp-page"] iframe,
[data-elementor-type="wp-page"] .elementor-widget-video .elementor-wrapper,
.tbe-floorplan svg {
	border-radius: var(--tbe-radius);
}

/* ==========================================================================
   Home hero - locations carousel

   Replaces the Revolution Slider hero. Each slide is a full-bleed photograph
   of one location with a translucent panel over it, following the treatment
   on the location pages. The panel sits bottom-left at the client's request,
   so the photograph is not covered by it, and carries no paragraph - just the
   city, the building and the two buttons.

   Driven by carousel.js, the same script behind "Find The Right Workspace",
   so it loops, autoplays and takes arrows and swipes. Unlike that one the
   slides are full width: one location at a time rather than a centre with
   peeking neighbours.
   ========================================================================== */
/* The location pages run their hero edge to edge because they are on the
   full-width page template; the home page is on the default one, so its
   content sits inside .content-container - 1448 wide at most, with a 24px
   gutter. Rather than move the whole home page onto another template and
   shift every section on it, the hero alone steps out of that wrapper.

   100vw counts the scrollbar, so the breakout overhangs the layout by half
   a scrollbar each side; .site clips it. clip rather than hidden is
   deliberate - paired with a visible overflow-y it does not become a scroll
   container, so a sticky header still sticks. */
.site {
	overflow-x: clip;
}

.tbe-hero {
	position: relative;
	overflow: hidden;
}

/* the container cap further up this sheet is [attr] .e-con, so the breakout
   has to outrank it or max-width: 100% pins the hero back to the wrapper */
[data-elementor-type="wp-page"] > .e-con.tbe-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* The height is proportional, not a number: the client read 600px off her
   laptop, and a laptop viewport is about 830 tall, so 72vh is that 600. A
   fixed 600 would only ever be right on her screen - a letterbox strip on a
   large monitor. The floor keeps a short laptop from getting a squashed
   hero, the ceiling keeps a very tall monitor from getting a wall of
   photograph, and the builder keeps 72vh so the two agree in the middle. */
.tbe-hero-slide {
	min-height: clamp(480px, 72vh, 900px) !important;
}

/* Below the tablet boundary the box would be taller than it is wide, and a
   landscape building shot cropped to that shows only its middle third. */
@media (max-width: 767px) {

	.tbe-hero-slide {
		min-height: clamp(360px, 52vh, 470px) !important;
	}
}

.tbe-hero-track {
	display: flex;
	flex-wrap: nowrap;
	will-change: transform;
}

/* full width per slide, so flex-basis 100% of the track */
.tbe-hero-track > .tbe-hero-slide {
	flex: 0 0 100%;
	width: 100% !important;
	max-width: none !important;
}

/* The photograph needs holding back or white text on a bright reception shot
   is unreadable; the panel alone is not enough at the top of the image. */
.tbe-hero-slide::before {
	position: absolute;
	content: "";
	inset: 0;
	background: linear-gradient(to top, rgba(18, 16, 15, .55) 0%, rgba(18, 16, 15, .15) 45%, rgba(18, 16, 15, .05) 100%);
	pointer-events: none;
}

.tbe-hero-slide > .e-con {
	position: relative;   /* above the wash */
	z-index: 1;
}

.tbe-hero .tbe-carousel-arrow {
	top: auto;
	bottom: 56px;
	transform: none;
}

/* the panel is bottom-left, so the arrows sit bottom-right, clear of it */
.tbe-hero .tbe-carousel-prev {
	right: 96px;
	left: auto;
}

.tbe-hero .tbe-carousel-next {
	right: 32px;
}

@media (max-width: 991px) {

	.tbe-hero .tbe-carousel-arrow {
		bottom: 24px;
	}

	.tbe-hero .tbe-carousel-prev {
		right: 74px;
	}

	.tbe-hero .tbe-carousel-next {
		right: 18px;
	}
}

/* On a phone the panel runs the full width, so the arrows would land on top
   of the buttons - they move above it instead. */
@media (max-width: 767px) {

	.tbe-hero .tbe-carousel-arrow {
		top: 24px;
		bottom: auto;
	}
}

/* The section inset above puts 20px on every top-level container below 575.
   On the hero that lands on the outside of the track, so each slide comes out
   40px narrower than the frame it is translated across - enough to leave a
   sliver of the next one showing. The slides carry their own inset, so the
   hero takes none. */
@media (max-width: 575px) {

	[data-elementor-type="wp-page"] > .e-con.tbe-hero {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   Centre alignment once the columns stack

   The hand-built sites all do the same thing below the tablet boundary: when
   a two-column row becomes one, the content centres - the card, its heading,
   its paragraph and its button. loumac and referraltrail both spell it out,
   .our-services__card{text-align:center;align-items:center} and
   .about-hero-banner__card{justify-content:center;text-align:center} with the
   paragraph centred again under it and the button pushed to margin:auto.
   Elementor leaves everything flush left instead, so on a phone the home page
   had forty-three containers and every one of its twenty-two buttons hard
   against the left edge with a third of the screen empty beside them.

   This centres through text-align rather than align-items. On a stacked
   column align-items:center would size each child to its content instead of
   the column, which collapses the full-width cards and photographs.
   ========================================================================== */
@media (max-width: 767px) {

	[data-elementor-type="wp-page"] .e-con,
	[data-elementor-type="footer"] .e-con {
		text-align: center;
	}

	[data-elementor-type="wp-page"] .elementor-heading-title,
	[data-elementor-type="wp-page"] .elementor-widget-text-editor,
	[data-elementor-type="footer"] .elementor-heading-title,
	[data-elementor-type="footer"] .elementor-widget-text-editor {
		text-align: center;
	}

	/* a button is inline-block inside a block wrapper, so the wrapper centres
	   it; a row of them is a flex container and needs the justify instead */
	[data-elementor-type="wp-page"] .elementor-widget-button .elementor-button-wrapper,
	[data-elementor-type="footer"] .elementor-widget-button .elementor-button-wrapper {
		text-align: center;
	}

	[data-elementor-type="wp-page"] .e-con:has(> .elementor-widget-button),
	[data-elementor-type="footer"] .e-con:has(> .elementor-widget-button) {
		justify-content: center;
	}

	/* the icon stays beside its label, the pair sits in the middle */
	[data-elementor-type="wp-page"] .elementor-icon-list-item,
	[data-elementor-type="footer"] .elementor-icon-list-item {
		justify-content: center;
	}

	/* an icon box is a flex wrapper, so it wants the flex alignment as well as
	   the text one; the builder writes its own text-align at a specificity the
	   container rule cannot reach, hence the important. justify covers the
	   icon-beside-label arrangement, align the icon-above-label one. */
	[data-elementor-type="wp-page"] .elementor-icon-box-wrapper,
	[data-elementor-type="wp-page"] .elementor-image-box-wrapper,
	[data-elementor-type="footer"] .elementor-icon-box-wrapper {
		text-align: center !important;
		align-items: center;
		justify-content: center;
	}

	[data-elementor-type="wp-page"] .elementor-icon-box-title,
	[data-elementor-type="wp-page"] .elementor-icon-box-description,
	[data-elementor-type="wp-page"] .elementor-image-box-title,
	[data-elementor-type="wp-page"] .elementor-image-box-description,
	[data-elementor-type="footer"] .elementor-icon-box-title {
		text-align: center !important;
	}

	/* the footer copy carries its own alignment too */
	[data-elementor-type="footer"] .elementor-widget-text-editor,
	[data-elementor-type="footer"] .elementor-widget-text-editor p,
	[data-elementor-type="wp-page"] .elementor-widget-text-editor,
	[data-elementor-type="wp-page"] .elementor-widget-text-editor p {
		text-align: center !important;
	}

	/* the footer is still on Elementor's older section/column markup, so the
	   container rule above never reaches it - its logo needs saying outright,
	   the way .footer__logo{margin:0 auto} does on loumac */
	[data-elementor-type="footer"] .elementor-widget-wrap {
		text-align: center;
	}

	/* an image widget carries its own alignment from the builder, at a higher
	   specificity than the container rule, and the img inside it is
	   inline-block - so auto margins do nothing and the alignment has to be
	   said on the widget itself */
	[data-elementor-type="wp-page"] .elementor-widget-image,
	[data-elementor-type="footer"] .elementor-widget-image {
		text-align: center !important;
	}

	/* ---- what keeps its own alignment -------------------------------- */

	/* the hero panel is bottom-left at the client's request, so the photograph
	   behind it stays readable */
	.tbe-hero,
	.tbe-hero .e-con,
	.tbe-hero .elementor-heading-title,
	.tbe-hero .elementor-widget-text-editor,
	.tbe-hero .elementor-widget-text-editor p,
	.tbe-hero .elementor-button-wrapper {
		text-align: left !important;
	}

	.tbe-hero .e-con:has(> .elementor-widget-button) {
		justify-content: flex-start;
	}

	/* a form reads left - label above field, as on the other builds */
	.tbe-enquiry,
	.tbe-enquiry label,
	.tbe-enquiry input,
	.tbe-enquiry select,
	.tbe-enquiry textarea,
	.wpcf7 label,
	.wpcf7 .elementor-widget-text-editor,
	.wpcf7 .elementor-widget-text-editor p {
		text-align: left !important;
	}

	/* accordion answers are long copy and stay left, the way
	   .our-story .accordion-body does on referraltrail */
	.e-n-accordion-item-content,
	.e-n-accordion-item-content p,
	.elementor-tab-content,
	.elementor-tab-content p,
	.elementor-accordion-content,
	.elementor-accordion-content p {
		text-align: left !important;
	}

	.tbe-floorplan {
		text-align: left;
	}

	/* the eyebrow labels and form labels sit at 11px, which is below the 1.2rem
	   the other builds floor small text at. On a phone that is the difference
	   between readable and squinting. */
	[data-elementor-type="wp-page"] h6.elementor-heading-title,
	[data-elementor-type="footer"] h6.elementor-heading-title,
	.tbe-enquiry label,
	.wpcf7 label,
	.tbe-enquiry .tbe-hint {
		font-size: 12px !important;
	}

	/* Contact sets its icon-box titles smaller than the rest of the site does.
	   Scoped to that page: a blanket rule here would shrink the benefit labels
	   on the workspace pages, which are larger on purpose. */
	body.page-id-14 .elementor-icon-box-title,
	body.page-id-14 .elementor-icon-box-title a,
	body.page-id-14 .elementor-icon-box-title span {
		font-size: 12px !important;
	}
}

/* ==========================================================================
   Post titles wrap

   The theme sets white-space: nowrap on .entry-title, so a post title runs on
   one line however long it is - 725px of title inside a 342px column on a
   phone, clipped mid-word with nothing to say it had been cut. It wraps.
   ========================================================================== */
.entry-title,
.entry-title a {
	white-space: normal;
}

/* ==========================================================================
   Home benefit grid on a phone

   Elementor drops every column to 100% below 768, so the six benefit boxes
   ran one per row and this became the longest scroll on the page: six
   screens of icon and label before the picture arrives. Two-up is what the
   labels can take - at half of the 279px column each box has about 123px of
   text, which holds "Infrastructure" on one line.

   The picture under them was taking roughly three fifths of the column. It
   fills it now, which is what every other image does on a phone.
   ========================================================================== */
@media (max-width: 767px) {

	/* The card insets its contents by 32px a side, which on a 279px column
	   left the grid and the picture 215px to live in. Halving the inset gives
	   both 64px more without losing the card's edge. */
	.elementor-element-f4c389e > .elementor-widget-wrap.elementor-element-populated {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.elementor-element-1d0c836 > .elementor-container > .elementor-column,
	.elementor-element-82d32ea > .elementor-container > .elementor-column {
		width: 50%;
		padding-right: 8px;
		padding-left: 8px;
	}

	/* The icon was drawn at 100px and the label set 22px/32px - sized for a
	   third of a desktop card, not half of a phone column. At 108px of text
	   the label ran to three lines and each box stood 263px tall, so the six
	   of them were 1160px of scrolling on their own. A 56px icon and a
	   16px/22px label put a box at about 170px without crowding it. */
	.elementor-element-1d0c836 .elementor-icon-box-icon .elementor-icon,
	.elementor-element-82d32ea .elementor-icon-box-icon .elementor-icon,
	.elementor-element-1d0c836 .elementor-icon-box-icon svg,
	.elementor-element-82d32ea .elementor-icon-box-icon svg {
		width: 56px !important;
		height: 56px !important;
		font-size: 56px !important;
	}

	.elementor-element-1d0c836 .elementor-icon-box-title,
	.elementor-element-82d32ea .elementor-icon-box-title {
		margin-bottom: 0 !important;
		font-size: 16px !important;
		line-height: 22px !important;
	}

	/* The widget, its wrap and the img each carry a width of their own, and
	   the builder writes them at a specificity a plain selector loses to. */
	.elementor-element-b531fb6,
	.elementor-element-b531fb6 .elementor-widget-container,
	.elementor-element-b531fb6 figure,
	.elementor-element-b531fb6 img {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ==========================================================================
   Hero caption on a phone

   The caption panel was padded 40px top and bottom and 44px a side, which on
   a 375px screen made it 335x239 over a 422px slide - it covered the building
   it was captioning. The side padding also left the button row 247px to work
   in while the two buttons need 291, so they wrapped and stacked, adding
   another 58px of panel.

   A 20px inset gives the row 295px, which the pair fits into once the button
   padding comes in a little, and takes the panel to roughly 140px. The slide
   shows its photograph again and the buttons sit side by side.
   ========================================================================== */
@media (max-width: 767px) {

	.tbe-hero-slide > .e-con {
		padding: 20px !important;
	}

	.tbe-hero-slide .elementor-button {
		padding: 11px 18px !important;
		font-size: 13px !important;
	}
}

/* ==========================================================================
   Policy pages

   The Privacy and Cookie policies are long-form reading, and the site's
   global type is not built for that: h1 lands at 70px and h2 at 60px in the
   display face, both capitalised, and body text sits at 14px across the full
   1345px measure. A heading the same size as the page title, in title case,
   over seventy-word lines is hard to read and looks like a mistake.

   So these two pages get a reading column - about 780px, which is roughly
   75 characters at this size - headings that step down properly, and body
   text at 17px. The links are underlined because in a wall of prose, colour
   alone does not tell you where one is.
   ========================================================================== */
.tbe-policy > .e-con-inner {
	max-width: 780px;
}

.tbe-policy h1 {
	font-size: 44px;
	line-height: 52px;
	text-transform: none;
}

.tbe-policy h2 {
	font-size: 23px;
	line-height: 31px;
	text-transform: none;
}

.tbe-policy p,
.tbe-policy li {
	font-size: 17px;
	line-height: 29px;
}

.tbe-policy ul {
	margin: 0 0 4px;
	padding-left: 22px;
	list-style: disc;
}

.tbe-policy li {
	margin-bottom: 9px;
}

.tbe-policy a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 767px) {

	.tbe-policy h1 {
		font-size: 32px;
		line-height: 40px;
	}

	.tbe-policy h2 {
		font-size: 20px;
		line-height: 28px;
	}

	.tbe-policy p,
	.tbe-policy li {
		font-size: 16px;
		line-height: 27px;
	}
}


/* ---------------------------------------------------------------------------
   Cookie notice (CookieYes)

   The banner's words, colours, position and buttons are all set in the plugin,
   under CookieYes in the admin, so the client can change them without anyone
   touching code. Only two things cannot be set there: the plugin's Custom CSS
   box is a paid-plan feature, and corner radius has no control of its own. So
   the rules that give it the site's pill buttons and softer panel live here.

   Each selector carries a leading body to outrank the plugin's own stylesheet,
   which is printed after the theme's and would otherwise win the tie.
   --------------------------------------------------------------------------- */

body .cky-consent-container,
body .cky-consent-container .cky-consent-bar,
body .cky-modal .cky-preference-center {
	border-radius: 14px;
}

body .cky-notice-btn-wrapper .cky-btn,
body .cky-prefrence-btn-wrapper .cky-btn {
	border-radius: 30px;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 10px 18px;
}

/* The tab that brings the notice back once someone has answered. */
body .cky-btn-revisit-wrapper {
	width: 42px;
	height: 42px;
}

/* Stacked on a phone, the plugin's own order puts Customise between Accept and
   Decline, which separates the two choices most people came to make. Customise
   goes last; all three keep the same width, so refusing stays as easy as
   accepting. */
@media (max-width: 576px) {
	body .cky-notice-btn-wrapper {
		display: flex;
		flex-direction: column;
	}

	body .cky-notice-btn-wrapper .cky-btn-accept {
		order: 1;
	}

	body .cky-notice-btn-wrapper .cky-btn-reject {
		order: 2;
	}

	body .cky-notice-btn-wrapper .cky-btn-customize {
		order: 3;
	}
}

/* ---------------------------------------------------------------------------
   Footer at tablet width

   Five columns across a 1280px row is comfortable. Across a tablet it is not:
   each one lands at about 136px, which is too narrow for "Meeting &
   Boardrooms" or "Terms and Conditions" and they wrap to two lines while the
   columns beside them sit half empty.

   Between the point where Elementor stops stacking the columns and the point
   where there is room for all five, the brand takes a row of its own and the
   four link columns share the next one. That gives each about 180px - the
   width they had before there was a fifth - and the row reads as two bands
   rather than five slivers.
   --------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
	/* Elementor only lets the row wrap below its own tablet breakpoint. Without
	   this the brand's full width has nowhere to go and every column is simply
	   squeezed instead, which is the problem rather than the fix. */
	.elementor-element-d782c80 > .elementor-container {
		flex-wrap: wrap;
	}

	.elementor-element-d782c80 > .elementor-container > .elementor-element-b82e564 {
		width: 100%;
		margin-bottom: 38px;
	}

	.elementor-element-d782c80 > .elementor-container > .elementor-element-4f49e51,
	.elementor-element-d782c80 > .elementor-container > .elementor-element-cab1849,
	.elementor-element-d782c80 > .elementor-container > .elementor-element-499d233,
	.elementor-element-d782c80 > .elementor-container > .elementor-element-ae3f194 {
		width: 25%;
	}
}

/* The pricing cards are square. They are .e-con.e-child like every other card,
   so the 6px rule above would round them whatever Elementor is told; this is
   scoped to them rather than letting Elementor's own value win everywhere,
   which would also have changed the four elements set to 8px. */
[data-elementor-type="wp-page"] .e-con.e-child.tbe-square-card {
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
   Locations dropdown

   The three columns sit in a row set to 1200px so the longest label -
   "Continuity House, Century City" - fits on one line. Elementor writes that
   as a fixed width, which overflows the panel on screens narrower than about
   1230px and pushes the Durban column out of sight. This makes it a maximum
   instead, so the columns share whatever room there is.
   --------------------------------------------------------------------------- */

.elementor-element-7b00ea0 {
	max-width: 100%;
}