/*
 * Softliro — Elementor bridge.
 *
 * Two jobs, and nothing beyond them:
 *   1. Give Elementor pages the room to be full width.
 *   2. Make Elementor's default widgets inherit the theme tokens.
 *
 * Every rule here is written at the lowest specificity that works, so an
 * Elementor control always wins. There is no !important in this file.
 */

/* An Elementor-built page owns its own vertical rhythm. */
.sl-entry-content--elementor {
	padding: 0;
}

/* Elementor's container should use the theme's measurement, not its own. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con {
	--container-max-width: var(--sl-container);
}

/*
 * Type: Elementor headings and text inherit the display and body faces.
 *
 * Line height and tracking are read back from the per-level custom properties
 * app.css publishes on each heading tag, not hard-coded. This rule has to be
 * specific enough to beat Elementor's own .elementor-heading-title (line-height
 * 1) and the kit's global typography, and anything specific enough to win that
 * would otherwise flatten all six levels to whichever numbers were typed here —
 * which is exactly what it used to do, rendering every h1 at the h2 values.
 *
 * The doubled .elementor-widget.elementor-widget-heading is not a typo. The
 * kit writes the same selector into each page's generated post-N.css, which
 * loads after this file; at equal specificity the later rule wins, so matching
 * it is not enough — this has to outrank it.
 */
.elementor-widget.elementor-widget-heading .elementor-heading-title {
	font-family: var(--sl-font-display);
	font-weight: var(--sl-h-weight);
	letter-spacing: var(--sl-h-ls, var(--sl-h-tracking));
	line-height: var(--sl-h-lh, 1.05);
}

/*
 * A heading widget tagged with a theme utility class.
 *
 * Elementor puts `_css_classes` on the widget WRAPPER, never on the heading
 * element itself. So .sl-label styles a <span>/<div> that only wraps the text,
 * while the text renders inside .elementor-heading-title — which the rule above
 * has already claimed for the display face, and which the kit colours with the
 * global accent.
 *
 * The result is a label that takes its size and casing from .sl-label but its
 * family, weight, tracking and colour from the heading styling: Bricolage 300
 * in violet at -0.04em, where the brand calls for JetBrains Mono 500 in muted
 * grey at +0.1em. It looks like a different design system on the same page.
 *
 * Re-assert the utility on the child. 0-4-0, so it beats both the rule above
 * (0-3-0) and the kit's per-page rule (0-2-0). Values mirror .sl-label in
 * app.css — if that changes, change it here too.
 */
.elementor-widget.elementor-widget-heading.sl-label .elementor-heading-title,
.elementor-widget.elementor-widget-heading.sl-eyebrow .elementor-heading-title,
.elementor-widget.elementor-widget-heading.sl-meta .elementor-heading-title {
	font-family: var(--sl-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	color: var(--sl-muted);
	line-height: 1.4;
}

/*
 * A heading widget sized as the page's display h1 whatever tag it renders —
 * for a headline moved to h2 so another element can carry the h1 for search.
 * Add `sl-as-h1` to the widget's CSS classes. Mirrors the h1 rules in app.css,
 * including the small-phone floor; per-widget Elementor settings still win.
 */
.sl-as-h1 .elementor-heading-title {
	--sl-h-lh: 1.02;
	--sl-h-ls: calc(var(--sl-h-tracking) - 0.005em);
	font-size: var(--sl-h1);
	line-height: var(--sl-h-lh);
	letter-spacing: var(--sl-h-ls);
}

@media (max-width: 480px) {
	.sl-as-h1 .elementor-heading-title {
		font-size: clamp(32px, 11vw, 44px);
	}
}

.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
	font-family: var(--sl-font-body);
	color: var(--sl-text-soft);
}

/* Buttons pick up the theme's button tokens by default. */
.elementor-button {
	border-radius: var(--sl-btn-radius);
	font-family: var(--sl-font-ui);
	font-weight: var(--sl-btn-weight);
	letter-spacing: var(--sl-btn-tracking);
	padding: var(--sl-btn-py) var(--sl-btn-px);
	transition:
		background-color var(--sl-duration) var(--sl-ease),
		color var(--sl-duration) var(--sl-ease),
		border-color var(--sl-duration) var(--sl-ease);
}

.elementor-button-wrapper .elementor-button:not(.elementor-button-link):not([class*="elementor-background"]) {
	background-color: var(--sl-btn-bg);
	color: var(--sl-btn-text);
}

/* Dividers and icon strokes follow the motif: hairlines and round caps. */
.elementor-divider-separator {
	border-top-color: var(--sl-hairline);
}

.elementor-widget-icon svg,
.elementor-icon svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Form fields match the theme's inputs so a form plugin looks native. */
.elementor-field-group .elementor-field,
.elementor-field-textual {
	background: var(--sl-surface);
	color: var(--sl-text);
	border: var(--sl-border-w) solid var(--sl-hairline-strong);
	border-radius: var(--sl-radius);
	font-family: var(--sl-font-ui);
	font-size: var(--sl-ui-size);
}

.elementor-field-textual:focus {
	outline: 2px solid var(--sl-focus);
	outline-offset: 1px;
	border-color: transparent;
}

/* Accordions, tabs and toggles: hairline rules, no card chrome. */
.elementor-accordion .elementor-accordion-item,
.elementor-toggle .elementor-tab-title {
	border-color: var(--sl-hairline);
}

.elementor-tab-title {
	font-family: var(--sl-font-ui);
}

/* Elementor's own images should respect the theme radius. */
.elementor-widget-image img {
	border-radius: var(--sl-radius);
}

/* Keep the editor's controls visible against a dark canvas. */
.elementor-editor-active .sl-header--transparent {
	position: relative;
}

/*
 * When Elementor Pro owns the header location, the theme's sticky offset would
 * double up. Stand down.
 */
.elementor-location-header ~ .sl-header {
	display: none;
}


/* ------------------------------------------------------------- Buttons */

/*
 * Elementor puts a widget's CSS classes on the *wrapper*, not on the element
 * inside it. So `sl-button sl-button--primary` on a Button widget paints the
 * wrapping div — a violet box — while the actual <a class="elementor-button">
 * keeps Elementor's defaults. These rules undo that and hand the styling down
 * to the anchor where it belongs.
 *
 * Specificity note. These were originally wrapped in :where() so an Elementor
 * control would always win. That was wrong: Elementor's *kit default* for a
 * button is the Accent global, which the theme maps to Signal Lime — so a
 * zero-specificity rule meant `sl-button--primary` rendered lime, never violet.
 *
 * A class the author typed is an explicit choice and should beat a framework
 * default, so the colour rules carry real specificity (0-3-0). To style a button
 * from Elementor's own controls instead, remove the sl-button class.
 */

.elementor-widget-button.sl-button,
.elementor-widget-button.sl-button--primary,
.elementor-widget-button.sl-button--secondary,
.elementor-widget-button.sl-button--outline,
.elementor-widget-button.sl-button--ghost {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.elementor-widget-button.sl-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--sl-btn-py) var(--sl-btn-px);
	border: var(--sl-border-w) solid transparent;
	border-radius: var(--sl-btn-radius);
	font-family: var(--sl-font-ui);
	font-size: var(--sl-btn-size);
	font-weight: var(--sl-btn-weight);
	letter-spacing: var(--sl-btn-tracking);
	line-height: 1.4;
	/*
	 * Set here on purpose. Before, the capitals came only by accident from the
	 * kit's "Accent" typography (the utility-label style), while the theme's own
	 * buttons stayed in sentence case. Every button capitalises each word;
	 * .sl-button in app.css matches.
	 */
	text-transform: capitalize;
}

.elementor-widget-button.sl-button--primary .elementor-button {
	background-color: var(--sl-btn-bg);
	border-color: var(--sl-btn-bg);
	color: var(--sl-btn-text);
}

.elementor-widget-button.sl-button--primary .elementor-button:hover,
.elementor-widget-button.sl-button--primary .elementor-button:focus-visible {
	background-color: var(--sl-btn-bg-hover);
	border-color: var(--sl-btn-bg-hover);
	color: var(--sl-btn-text-hover);
}

.elementor-widget-button.sl-button--secondary .elementor-button,
.elementor-widget-button.sl-button--outline .elementor-button {
	background-color: transparent;
	border-color: var(--sl-hairline-strong);
	color: var(--sl-text);
}

.elementor-widget-button.sl-button--secondary .elementor-button:hover,
.elementor-widget-button.sl-button--secondary .elementor-button:focus-visible,
.elementor-widget-button.sl-button--outline .elementor-button:hover,
.elementor-widget-button.sl-button--outline .elementor-button:focus-visible {
	border-color: var(--sl-text);
	background-color: var(--sl-wash);
	color: var(--sl-text);
}

.elementor-widget-button.sl-button--ghost .elementor-button {
	background-color: transparent;
	color: var(--sl-text);
}

.elementor-widget-button.sl-button--ghost .elementor-button:hover {
	background-color: var(--sl-wash);
}

/* ------------------------------------------------------- Mega panels */

/*
 * Panels built as Elementor templates. These rules live here rather than in
 * mega.css because mega.css only loads once a menu item actually has a panel
 * enabled — so a freshly imported template, or one open in the editor, would
 * otherwise render with no styling at all.
 *
 * Scoped to .sl-mega-panel; nothing here leaks into ordinary page content.
 */

.sl-mega-panel {
	width: 100%;
}

/* The icon-list is used purely as an editable link repeater. */
.sl-mega-panel .elementor-icon-list-icon {
	display: none;
}

.sl-mega-panel .elementor-icon-list-items {
	padding: 0;
	margin: 0;
	list-style: none;
}

.sl-mega-panel .elementor-icon-list-item {
	margin: 0;
	font-family: var(--sl-font-ui);
	font-size: var(--sl-ui-size);
	line-height: 1.4;
}

.sl-mega-panel .elementor-icon-list-item > a {
	display: block;
	padding-block: 9px;
	color: var(--sl-text);
	transition: color var(--sl-duration) var(--sl-ease);
}

.sl-mega-panel .elementor-icon-list-item > a:hover,
.sl-mega-panel .elementor-icon-list-item > a:focus-visible {
	color: var(--sl-link);
}

/*
 * Heading widgets are emitted with header_size "div" so no h-level rule fights
 * these classes, but the title element still needs the type set on it directly
 * rather than inherited.
 */
.sl-mega-panel .sl-mega__headline .elementor-heading-title {
	font-family: var(--sl-font-display);
	font-weight: 300;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--sl-text);
	margin: 0;
}

.sl-mega-panel .sl-mega__eyebrow .elementor-heading-title,
.sl-mega-panel .sl-mega__column-title .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/*
 * Repeated from mega.css rather than referenced, because that file may not be
 * on the page — see the note above.
 */
.sl-mega-panel .sl-mega__column-title {
	display: block;
	padding-bottom: 12px;
	margin-bottom: 6px;
	border-bottom: var(--sl-border-w) solid var(--sl-hairline);
}

.sl-mega-panel .sl-mega__eyebrow {
	margin-bottom: 18px;
}

.sl-mega-panel .sl-mega__headline {
	margin-bottom: 22px;
}

.sl-mega-panel .sl-mega__cta p {
	margin: 0;
}

@media (max-width: 1180px) {
	.sl-mega-panel {
		flex-wrap: wrap;
	}
}

/*
 * Stacked calls to action go full width on a phone.
 *
 * Elementor centres a button widget, so once a row stacks the anchors float in
 * the middle of the column while the text beside them is flush left. Scoped to
 * buttons that opted into the theme's own classes, so a button styled purely
 * through Elementor's controls is left alone.
 *
 * Runs at Elementor's mobile breakpoint, and a row of buttons is allowed to
 * wrap so each one takes the full line instead of sharing it with its sibling.
 */
@media (max-width: 767px) {
	.e-con:has(> .elementor-widget-button.sl-button) {
		flex-wrap: wrap;
	}

	.e-con > .elementor-widget-button.sl-button {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}

	.elementor-widget-button.sl-button .elementor-button {
		width: 100%;
	}
}

/*
 * Component margins double up inside an Elementor column.
 *
 * .sl-hero__lead carries margin-top: 26px because in the theme's own hero
 * nothing else separates it from the heading. An Elementor column already
 * supplies --widgets-spacing between its children, so applying the class there
 * adds a second gap on top of the first — 46px on a phone where 24 reads right.
 *
 * Scoped to the widget wrapper (0-2-0) so it out-ranks the component rule in
 * sections.css, and only on small screens.
 */
@media (max-width: 782px) {
	.elementor-widget.sl-hero__lead,
	.elementor-widget .sl-hero__lead {
		margin-top: 4px;
	}

	.elementor-widget.sl-case__lead {
		margin-top: 4px;
	}
}

/*
 * Same doubling problem, all screens: .sl-chips carries margin-top: 1.4em for
 * the theme's own single-file entry footer, where nothing above it provides
 * space. In a column the widget spacing already does.
 */
.elementor-widget .sl-chips {
	margin-top: 0;
}

/*
 * Joins a hairline grid to the rule row directly above it, so a heading and its
 * six tiles read as one ruled block rather than a label floating over a card.
 * Put the class on the grid widget and set the container gap to 0.
 */
.sl-attach .sl-grid-items,
.sl-attach .sl-faq {
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/*
 * Uppercase on phones only.
 *
 * Elementor's text-transform control has no per-device value, so a heading
 * that should switch to capitals on a phone takes this class instead. Used on
 * the home hero headline, where the wider capitals fill the narrow column.
 */
@media (max-width: 767px) {
	.sl-upper-mobile .elementor-heading-title {
		text-transform: uppercase;
	}

	/* The same idea in capitalised case: each word starts with a capital. */
	.sl-cap-mobile .elementor-heading-title {
		text-transform: capitalize;
	}
}

/*
 * A stacked headline whose lines all end on the same right edge (phones).
 *
 * Each line is wrapped in .sl-hl and carries its own spacing in --ls, worked
 * out so every line reaches the same width in em. Em keeps the lines equal at
 * any phone size, since the font scales with the viewport. The negative right
 * margin cancels the spacing letter-spacing adds after the last glyph, so the
 * visible edges line up rather than the invisible ones. Inline above the phone
 * breakpoint, so the desktop headline flows as normal text.
 */
@media (max-width: 767px) {
	.sl-fit-lines .sl-hl {
		display: block;
		white-space: nowrap;
		letter-spacing: var(--ls, 0);
		margin-right: calc(var(--ls, 0) * -1);
	}
}

/*
 * On phones the stacked headline is sized to its column rather than to the h1
 * scale, so the lines fill about nine tenths of it at any phone width. The
 * lines are about 4.9em wide at their --ls values, the divisor is 5.4, and the
 * column is the viewport less 68px (the 34px gutters each side).
 * Change the --ls values or the gutters and these two numbers go with them.
 * Container units would be the tidier tool, but containment collapses the
 * widget's height inside Elementor's flex containers.
 */
/*
 * Above phones the same headline runs as two lines. With its closing full stop,
 * "Perfected by People." came out 12px wider than the 726px column at 1440, and
 * the heading fell to three lines. A hundredth of an em tighter keeps it on two
 * at every desktop width, and is not visible as a change.
 */
@media (min-width: 768px) {
	.sl-fit-lines.sl-as-h1 .elementor-heading-title {
		--sl-h-ls: calc(var(--sl-h-tracking) - 0.015em);
		letter-spacing: var(--sl-h-ls);
	}
}

@media (max-width: 480px) {
	.sl-fit-lines.sl-as-h1 .elementor-heading-title {
		font-size: min(calc((100vw - 68px) / 5.4), 58px);
		--sl-h-lh: 0.94;
		line-height: 0.94;
	}
}

/*
 * The intro film: Elementor's own Video widget, framed like the site's other
 * media (hairline, radius) so it reads as part of the page rather than an
 * embed dropped on top of it. The frame clips both the poster and the video.
 */
.sl-film .elementor-wrapper {
	overflow: hidden;
	border: var(--sl-border-w) solid var(--sl-hairline);
	border-radius: 16px;
	background: #0b0d12;
}

.sl-film .elementor-custom-embed-image-overlay {
	transition: opacity var(--sl-duration) var(--sl-ease);
}

/* Elementor centres the play button; this only adds depth and a hover lift. */
.sl-film .elementor-custom-embed-play {
	filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
	transition: transform var(--sl-duration) var(--sl-ease);
}

.sl-film .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play {
	transform: translate(-50%, -50%) scale(1.06);
}

@media (max-width: 767px) {
	.sl-film .elementor-wrapper {
		border-radius: 12px;
	}
}

/*
 * A right arrow after the label, for Elementor buttons that send someone on to
 * the brief. The same glyph the theme's own buttons print (softliro_arrow()),
 * drawn as a mask so it takes the button's text colour through every state.
 */
.elementor-widget-button.sl-button--arrow .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.elementor-widget-button.sl-button--arrow .elementor-button-content-wrapper::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--sl-duration) var(--sl-ease);
}

/* The same nudge the theme's own arrow buttons give on hover. */
.elementor-widget-button.sl-button--arrow .elementor-button:hover .elementor-button-content-wrapper::after,
.elementor-widget-button.sl-button--arrow .elementor-button:focus-visible .elementor-button-content-wrapper::after {
	transform: translateX(3px);
}

/*
 * The intro film on a phone: its own band in the surface colour, a real title
 * instead of the small label, and the film running edge to edge. At 390px a
 * framed 16:9 video inside the gutters came out barely bigger than a card,
 * and the section read as a footnote under the logos rather than a feature.
 */
@media (max-width: 767px) {
	.e-con.sl-film-section {
		background: var(--sl-surface);
		border-block: var(--sl-border-w) solid var(--sl-hairline);
	}

	.elementor-widget-heading.sl-label.sl-film-title .elementor-heading-title {
		font-family: var(--sl-font-display);
		font-size: 28px;
		font-weight: var(--sl-h-weight);
		line-height: 1.12;
		letter-spacing: -0.02em;
		text-transform: none;
		color: var(--sl-text);
	}

	/* Out through the section's 24px side padding to the screen edges. Deep
	   enough to outrank Elementor's per-widget margin and max-width rules. */
	.e-con.sl-film-section > .e-con-inner > .elementor-widget-video.sl-film {
		width: calc(100% + 48px);
		max-width: none;
		margin-inline: -24px;
		/* Square at the screen edges; the rounded corners stay on wider screens. */
		border-radius: 0;
	}

	.sl-film-section .sl-film .elementor-wrapper {
		border-inline: 0;
		border-radius: 0;
		/* Taller than the film on a phone: square, cropped from the sides. The
		   film keeps its type in the middle, so the crop loses the edges of a
		   shot rather than a line of copy. */
		--video-aspect-ratio: 1;
		aspect-ratio: 1 / 1;
	}

	.sl-film-section .sl-film .elementor-wrapper video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.sl-film-section .sl-film .elementor-custom-embed-image-overlay {
		background-size: cover;
		background-position: center;
	}
}

/*
 * Typewriter headings (assets/js/typewriter.js). Hidden until the script has
 * wrapped the characters, then each character holds its space while hidden, so
 * the heading never reflows as it types. The failsafe shows the heading if the
 * script never arrives. The caret is drawn off the last revealed character, so
 * it takes no space either; it holds steady while typing and blinks once done.
 */
.sl-tw-on .sl-typewriter .elementor-heading-title {
	visibility: hidden;
	animation: sl-tw-failsafe 0s 3s forwards;
}

.sl-tw-on .sl-typewriter .elementor-heading-title.sl-tw-ready {
	visibility: visible;
	animation: none;
}

.sl-tw-c {
	visibility: hidden;
}

.sl-tw-c.is-on {
	visibility: inherit;
}

.sl-tw-c.is-caret {
	position: relative;
}

.sl-tw-c.is-caret::after {
	content: "";
	position: absolute;
	top: 0.12em;
	bottom: 0.06em;
	right: -0.1em;
	width: 0.06em;
	background: var(--sl-signal);
}

/* Words mode: only the chosen words wait for the script. */
.sl-tw-on .sl-typewriter-words .sl-tw-word {
	visibility: hidden;
	animation: sl-tw-failsafe 0s 3s forwards;
}

.sl-tw-on .sl-typewriter-words .sl-tw-ready .sl-tw-word {
	visibility: visible;
	animation: none;
}

/* The caret shows even on a character that is still hidden, and sits before it
   once a word has been erased back to nothing. */
.sl-tw-c.is-caret::after {
	visibility: visible;
}

.sl-tw-c.is-caret-start::after {
	right: auto;
	left: -0.1em;
}

.sl-tw-done .sl-tw-c.is-caret::after {
	animation: sl-tw-blink 1.05s steps(1) infinite;
}

@keyframes sl-tw-blink {
	50% {
		opacity: 0;
	}
}

@keyframes sl-tw-failsafe {
	to {
		visibility: visible;
	}
}

/*
 * The intro film's title on tablets and desktops: a display heading centred
 * over the film rather than the small label, so the section announces itself.
 * Phones keep their own size in the block above.
 */
@media (min-width: 768px) {
	.elementor-widget.elementor-widget-heading.sl-label.sl-film-title .elementor-heading-title {
		font-family: var(--sl-font-display);
		font-size: clamp(34px, 3.6vw, 52px);
		font-weight: var(--sl-h-weight);
		line-height: 1.08;
		letter-spacing: -0.03em;
		text-transform: none;
		text-align: center;
		color: var(--sl-text);
	}
}

/*
 * The centred homepage hero (container class sl-hero-center): one column, the
 * status pill, a larger headline, a lead held to a readable measure and the
 * buttons, with the intro film following straight after inside faint orbit
 * rings. Phones keep their own left-aligned layout.
 */
@media (min-width: 768px) {
	.sl-hero-center .sl-fit-lines.sl-as-h1 .elementor-heading-title {
		font-size: clamp(56px, 7.4vw, 112px);
		line-height: 1;
	}

	/* Five classes: Elementor caps each widget at 0-4-0 in a file loading later. */
	.elementor .sl-hero-center .elementor-element.elementor-widget.sl-hero__lead {
		width: 100%;
		max-width: 620px;
	}

	.sl-hero-center .elementor-widget-video.sl-film {
		margin-top: 72px;
	}
}

/*
 * The sky behind the centred hero (assets/js/hero-sky.js): a canvas of drifting
 * stars and orbit rings round the film, under the content. The film sits in
 * the hero at full width and scales from its top edge as the page scrolls.
 */
.sl-hero-center.e-con {
	position: relative;
	overflow: hidden;
}

.sl-hero__sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.sl-hero-center.e-con > .e-con-inner {
	position: relative;
	z-index: 1;
}

.elementor .sl-hero-center .elementor-element.elementor-widget-video.sl-film {
	width: 100%;
	max-width: 1376px;
	margin-top: 40px;
	transform-origin: 50% 0;
	will-change: transform;
}

.sl-hero-center .sl-film .elementor-wrapper {
	box-shadow: 0 50px 140px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(242, 239, 233, 0.02);
}

/*
 * The centred hero, matched to the design: glass pill, a 560px lead at 18px,
 * pill buttons (solid violet, and a glassy outline), and the film framed with
 * a hairline, 8px corners and a violet play button ringed by two halos.
 * Phones centre everything too; the headline keeps its equal-width lines.
 */
.sl-hero-center .sl-status--boxed {
	padding: 7px 14px;
	border-color: rgba(242, 239, 233, 0.14);
	border-radius: 999px;
	background: rgba(11, 14, 15, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.elementor .sl-hero-center .elementor-element.elementor-widget.sl-hero__lead {
	max-width: 560px;
}

.sl-hero-center .sl-hero__lead,
.sl-hero-center .sl-hero__lead p {
	font-size: 18px;
	line-height: 1.55;
	color: rgba(242, 239, 233, 0.7);
	text-wrap: pretty;
}

.sl-hero-center .elementor-button {
	border-radius: 999px;
	padding: 15px 26px;
	font-size: 15px;
	line-height: 1.4;
}

.sl-hero-center .sl-button--secondary .elementor-button {
	border: 1px solid rgba(242, 239, 233, 0.2);
	background: rgba(242, 239, 233, 0.06);
	color: #f2efe9;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.sl-hero-center .sl-button--secondary .elementor-button:hover {
	border-color: rgba(242, 239, 233, 0.4);
	background: rgba(242, 239, 233, 0.12);
}

.sl-hero-center .sl-film .elementor-wrapper {
	border: 1px solid rgba(242, 239, 233, 0.16);
	border-radius: 8px;
}

.sl-hero-center .sl-film .elementor-custom-embed-play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--sl-primary);
	box-shadow: 0 0 0 12px rgba(var(--sl-primary-rgb), 0.18), 0 0 0 26px rgba(var(--sl-primary-rgb), 0.07);
	filter: none;
}

.sl-hero-center .sl-film .elementor-custom-embed-play i,
.sl-hero-center .sl-film .elementor-custom-embed-play svg {
	font-size: 30px;
	width: 30px;
	height: 30px;
	margin-left: 5px;
	color: #f2efe9;
	fill: #f2efe9;
	opacity: 1;
	text-shadow: none;
	filter: none;
}

@media (max-width: 767px) {
	.sl-hero-center .sl-film .elementor-custom-embed-play {
		width: 64px;
		height: 64px;
		box-shadow: 0 0 0 8px rgba(var(--sl-primary-rgb), 0.18), 0 0 0 18px rgba(var(--sl-primary-rgb), 0.07);
	}

	.sl-hero-center .sl-film .elementor-custom-embed-play i,
	.sl-hero-center .sl-film .elementor-custom-embed-play svg {
		font-size: 22px;
		width: 22px;
		height: 22px;
		margin-left: 4px;
	}

	.elementor .sl-hero-center .elementor-element.elementor-widget-video.sl-film {
		margin-top: 32px;
	}

	/* On a phone the two hero buttons stack, each a full-width block of the
	   same height, like buttons elsewhere on a phone. */
	.sl-hero-center .e-con > .elementor-widget-button.sl-button {
		flex: 0 0 100%;
		width: 100%;
	}

	.sl-hero-center .elementor-widget-button.sl-button .elementor-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		min-height: 54px;
		padding: 12px 16px;
		font-size: 16px;
	}

	.sl-hero-center .sl-hero__lead,
	.sl-hero-center .sl-hero__lead p {
		font-size: 16px;
	}
}

/*
 * The intro button in the hero ("Softliro in 0:45"): a glassy pill with a lime
 * play disc on the left, as in the design. The disc is drawn here, so the
 * button stays a plain Elementor button.
 */
.sl-hero-center .sl-watch-intro .elementor-button {
	padding: 8px 22px 8px 8px;
	border: 1px solid rgba(242, 239, 233, 0.2);
	background: rgba(242, 239, 233, 0.06);
	color: #f2efe9;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.sl-hero-center .sl-watch-intro .elementor-button:hover,
.sl-hero-center .sl-watch-intro .elementor-button:focus-visible {
	border-color: rgba(242, 239, 233, 0.4);
	background: rgba(242, 239, 233, 0.12);
	color: #f2efe9;
}

.sl-watch-intro .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.sl-watch-intro .elementor-button-content-wrapper::before {
	content: "";
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sl-signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M0 0l12 7-12 7z' fill='%230B0E0F'/%3E%3C/svg%3E") 55% 50% / 11px 13px no-repeat;
}

@media (max-width: 767px) {
	.sl-hero-center .elementor-widget-button.sl-watch-intro .elementor-button {
		padding: 6px 16px;
	}

	.sl-watch-intro .elementor-button-content-wrapper::before {
		width: 34px;
		height: 34px;
	}
}

/* Pills in the hero: the theme button rule sets its own radius at 0-3-0. */
.sl-hero-center .elementor-widget-button .elementor-button {
	border-radius: 999px;
}

/*
 * The headline's second line, "Perfected by People.", sits in a <strong>: bold
 * on tablets and desktops, and the headline's own light weight on phones,
 * where the stacked lines' spacing (--ls) is worked out for that weight.
 */
.sl-as-h1 .elementor-heading-title strong {
	font-weight: 700;
}

@media (max-width: 767px) {
	.sl-as-h1 .elementor-heading-title strong {
		font-weight: inherit;
	}
}

/*
 * Phones: the intro film is hidden in the hero, and the "Softliro in 0:45"
 * button plays it in a popup instead (assets/js/hero-sky.js).
 */
@media (max-width: 767px) {
	.elementor .sl-hero-center .elementor-element.elementor-widget-video.sl-film {
		display: none;
	}
}

/*
 * Only as big as the film itself, centred over a light dim of the page, and
 * popping in with a small scale-up, like a video window rather than a screen.
 */
.sl-film-pop {
	width: min(960px, calc(100vw - 16px));
	max-width: none;
	height: fit-content; /* auto would stretch the dialog top to bottom */
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: #f2efe9;
}

.sl-film-pop[open] {
	animation: sl-film-pop-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.sl-film-pop::backdrop {
	background: rgba(5, 6, 7, 0.6);
}

.sl-film-pop[open]::backdrop {
	animation: sl-film-pop-fade 0.25s ease-out;
}

@keyframes sl-film-pop-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.86);
	}
}

@keyframes sl-film-pop-fade {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-film-pop[open],
	.sl-film-pop[open]::backdrop {
		animation: none;
	}
}

/* The film's box: a tap anywhere on it plays or pauses. */
.sl-film-pop__frame {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.sl-film-pop__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * A 16:9 film is only about 200px tall across a phone, so there the window
 * is 4:3 and the film fills it, trimming a little from each side (its titles
 * sit in the middle).
 */
@media (max-width: 767px) {
	.sl-film-pop__frame {
		aspect-ratio: 4 / 3;
		border-radius: 16px;
	}

	.sl-film-pop__video {
		object-fit: cover;
	}
}

/* One control: the violet play button, shown only while the film is paused.
   While it plays the button is hidden; a tap on the film pauses it and the
   button comes back. */
.sl-film-pop__toggle {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sl-primary);
	box-shadow: 0 0 0 8px rgba(var(--sl-primary-rgb), 0.18), 0 0 0 18px rgba(var(--sl-primary-rgb), 0.07);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: scale(0.85);
	transition:
		opacity var(--sl-duration) var(--sl-ease),
		transform var(--sl-duration) var(--sl-ease);
}

.sl-film-pop__frame.is-paused .sl-film-pop__toggle,
.sl-film-pop__toggle:focus-visible {
	opacity: 1;
	transform: none;
}

/* A triangle while paused, two bars while playing (seen on keyboard focus). */
.sl-film-pop__toggle span {
	display: block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent currentColor;
}

.sl-film-pop__frame:not(.is-paused) .sl-film-pop__toggle span {
	width: 14px;
	height: 18px;
	margin-left: 0;
	border-width: 0 5px;
	border-color: currentColor;
}

.sl-film-pop__toggle:focus-visible {
	outline: 2px solid var(--sl-signal);
	outline-offset: 4px;
}

.sl-film-pop__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(242, 239, 233, 0.24);
	border-radius: 50%;
	background: rgba(5, 6, 7, 0.55);
	color: #f2efe9;
	cursor: pointer;
}

/* A drawn cross, so it needs no icon font. */
.sl-film-pop__close span,
.sl-film-pop__close span::after {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transform: rotate(45deg);
}

.sl-film-pop__close span::after {
	content: "";
	transform: rotate(90deg);
}

.sl-film-pop__close:focus-visible {
	outline: 2px solid var(--sl-signal);
	outline-offset: 2px;
}

html.sl-film-pop-open,
html.sl-film-pop-open body {
	overflow: hidden;
}

/* Spec lists that read as plain contact details (class sl-spec-plain on the
   widget): the value links go without the trailing arrow. */
.sl-spec-plain .sl-arrow {
	display: none;
}

/*
 * The contact lists: the label ("Send us an email") is the bold item and the
 * detail under it reads quieter, in the display face at the same size but a
 * regular weight and the soft text colour, on every screen.
 */
.sl-spec-plain .sl-specs__value {
	font-family: var(--sl-font-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-transform: none;
}

.sl-spec-plain .sl-specs__value-link {
	color: var(--sl-text-soft);
}

.sl-spec-plain .sl-specs__value-link:hover,
.sl-spec-plain .sl-specs__value-link:focus-visible {
	color: var(--sl-signal);
}

/*
 * Laptops and tablets: Elementor sections are authored with 32px side
 * padding, which ran the content almost to the edges of a small laptop. The
 * content inside each boxed section is drawn in to the theme's wider gutter
 * for this range (inc/tokens.php), so it lines up with the header and
 * footer. Full-width sections, such as the logo strip, stay edge to edge.
 */
@media (min-width: 768px) and (max-width: 1399px) {
	.elementor .e-con.e-parent.e-con-boxed > .e-con-inner {
		max-width: min(var(--content-width), calc(100% - 2 * (var(--sl-gutter) - 32px)));
	}
}

/*
 * Phones: the hero fills the screen below the header and its content sits in
 * the middle of it, with the same space above and below on any phone height.
 * Where the content is taller than the screen, the hero simply grows and the
 * equal 32px above and below still holds.
 */
@media (max-width: 767px) {
	.elementor .sl-hero-center.e-con {
		min-height: calc(100svh - var(--sl-header-h, 61px));
	}

	.elementor .sl-hero-center.e-con > .e-con-inner {
		justify-content: center;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* The content column carries 10px of space under its buttons; a 10px
	   top margin balances it, so the badge and the last button sit the same
	   distance from the hero's edges. */
	.elementor .sl-hero-center.e-con > .e-con-inner > .elementor-element-85d9bc4 {
		margin-top: 10px;
	}
}

/*
 * The screenshot beside the headline on an industry page (container class
 * "sl-industry-shot"): softer, larger corners and a soft shadow, so it sits
 * on the page like a framed piece of work rather than a flat panel.
 */
.elementor .e-con.sl-industry-shot {
	border-radius: 18px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(242, 239, 233, 0.06),
		0 24px 60px rgba(0, 0, 0, 0.45),
		0 8px 20px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
	.elementor .e-con.sl-industry-shot {
		border-radius: 14px;
	}
}

/*
 * A breadcrumb strip sits directly above a page's hero section: the hero
 * drops its own top padding there, so the trail reads as part of the title
 * block instead of floating halfway between the header and the headline.
 */
.elementor .e-con.e-parent:has(> .e-con-inner > .elementor-widget-softliro-breadcrumbs) + .e-con.e-parent > .e-con-inner {
	padding-top: 0;
}

/*
 * The strip holding the breadcrumb starts as far below the header as the
 * case-study header does, so every page with a trail opens at the same depth.
 */
.elementor .e-con.e-parent:has(> .e-con-inner > .elementor-widget-softliro-breadcrumbs) > .e-con-inner {
	padding-top: calc(var(--sl-section) * 0.7);
}

/*
 * When the hero sits under a breadcrumb strip, its side panel rises to the
 * trail's line instead of the headline's, so the two columns open together.
 * The pull is the trail's own line plus its bottom margin.
 */
@media (min-width: 1025px) {
	.elementor .e-con.e-parent:has(> .e-con-inner > .elementor-widget-softliro-breadcrumbs) + .e-con.e-parent > .e-con-inner > .e-con:has(> .elementor-widget-softliro-system-panel) {
		padding-top: 0;
		margin-top: -36px;
	}
}