/*
 * Softliro — core stylesheet.
 *
 * Loaded on every request. Everything else is conditional. Nothing here uses a
 * hard-coded colour or size: the values come from the design tokens printed
 * inline by inc/tokens.php, so the Customizer, the block editor and Elementor
 * all read the same source.
 *
 * 1. Reset and document
 * 2. Typography
 * 3. Layout primitives
 * 4. Components
 * 5. Header
 * 6. Mobile navigation
 * 7. Footer
 * 8. Forms
 * 9. Utilities and accessibility
 */

/* -------------------------------------------------- 1. Reset and document */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;

	/*
	 * The header is sticky, so an anchor that scrolls to the top of the window
	 * lands underneath it. Every in-page link on the site was arriving with its
	 * own heading hidden behind the bar. The token follows the header's own
	 * height at each breakpoint, so this stays correct when that changes.
	 */
	scroll-padding-top: calc(var(--sl-header-h) + 24px);
}

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

body {
	margin: 0;
	background: var(--sl-bg);
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: var(--sl-body-size);
	font-weight: var(--sl-body-weight);
	line-height: var(--sl-body-lh);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

svg {
	overflow: visible;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-top: var(--sl-border-w) solid var(--sl-hairline);
	margin: calc(var(--sl-section) / 2) 0;
}

::selection {
	background: var(--sl-primary);
	color: #fff;
}


/* ------------------------------------------------------------- Breadcrumbs */

/*
 * Lives here, not in blog.css. The trail appears on pages, projects and case
 * studies as well as posts, and blog.css only loads on archives and singles —
 * so an Elementor page that wanted a breadcrumb had to drag the whole blog
 * stylesheet along with it, and blog.css's long-form prose rules then leaked
 * into component headings on that page.
 */
.sl-breadcrumbs {
	margin-bottom: 20px;
}

.sl-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--sl-font-mono);
	font-size: 10px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	color: var(--sl-muted);
}

.sl-breadcrumbs__item + .sl-breadcrumbs__item::before {
	content: "/";
	margin-right: 8px;
	color: var(--sl-text-faint);
}

.sl-breadcrumbs__link {
	color: var(--sl-muted);
}

.sl-breadcrumbs__link:hover {
	color: var(--sl-text);
}

.sl-breadcrumbs__current {
	color: var(--sl-text);
}

/* --------------------------------------------------------- 2. Typography */

h1,
h2,
h3,
h4,
h5,
h6,
.sl-heading {
	font-family: var(--sl-font-display);
	font-weight: var(--sl-h-weight);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

/*
 * Line height and tracking are per-level, not per-class: the brand tightens
 * both as a heading grows, so an h1 is 1.02/-0.045em where an h2 is
 * 1.05/-0.04em.
 *
 * Two things make this awkward, and both are handled here rather than repeated
 * downstream:
 *
 * 1. .sl-heading rides along on every heading built in Elementor. Declared as a
 *    plain class rule these values would beat the element rules below (0-1-0
 *    over 0-0-1) and quietly render every h1 at the h2 values. :where() drops
 *    the group to zero specificity, so it still supplies the default for an h2
 *    or a .sl-heading on a div and steps aside for a real h1/h3/h4 rule.
 *
 * 2. Frameworks sometimes have to be out-specified — Elementor's heading widget
 *    ships line-height: 1 and its kit adds a 0-2-0 rule on top. So each level
 *    also *publishes* its values as custom properties, and elementor.css reads
 *    them back rather than hard-coding one level's numbers for all six. One
 *    source of truth, whatever the selector war looks like.
 */
:where(h1, h2, h3, h4, h5, h6, .sl-heading) {
	--sl-h-lh: 1.05;
	--sl-h-ls: var(--sl-h-tracking);
	letter-spacing: var(--sl-h-ls);
	line-height: var(--sl-h-lh);
}

h1,
.sl-h1 {
	--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);
}

h2,
.sl-h2 {
	font-size: var(--sl-h2);
}

h3,
.sl-h3 {
	--sl-h-lh: 1.15;
	--sl-h-ls: -0.025em;
	font-size: var(--sl-h3);
	font-weight: 700;
	letter-spacing: var(--sl-h-ls);
	line-height: var(--sl-h-lh);
}

h4,
.sl-h4 {
	--sl-h-lh: 1.2;
	--sl-h-ls: -0.02em;
	font-size: var(--sl-h4);
	font-weight: 700;
	letter-spacing: var(--sl-h-ls);
	line-height: var(--sl-h-lh);
}

h5 {
	font-size: 1.05rem;
	font-weight: 700;
}

h6 {
	font-size: 1rem;
	font-weight: 700;
}

p {
	margin: 0 0 1.1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--sl-link);
	text-decoration: none;
	transition: color var(--sl-duration) var(--sl-ease);
}

a:hover,
a:focus-visible {
	color: var(--sl-text);
}

strong,
b {
	font-weight: 600;
}

blockquote {
	margin: 1.6em 0;
	padding-left: 1.4em;
	border-left: 2px solid var(--sl-primary);
	font-family: var(--sl-font-display);
	font-weight: 300;
	font-size: 1.35em;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

code,
kbd,
pre,
samp {
	font-family: var(--sl-font-mono);
	font-size: 0.92em;
}

code {
	background: var(--sl-wash);
	border-radius: 3px;
	padding: 0.15em 0.4em;
}

pre {
	background: var(--sl-surface);
	border: var(--sl-border-w) solid var(--sl-hairline);
	border-radius: var(--sl-radius);
	padding: 1.2em 1.4em;
	overflow-x: auto;
	line-height: 1.55;
}

pre code {
	background: none;
	padding: 0;
}

/* The mono utility face. Labels, metadata, system readouts. */
.sl-label,
.sl-meta,
.sl-eyebrow {
	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;
	display: block;
}

a.sl-label:hover {
	color: var(--sl-text);
}

.sl-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	align-items: baseline;
}

.sl-meta__item {
	color: var(--sl-muted);
}

.sl-meta__item a {
	color: inherit;
}

.sl-meta__item a:hover {
	color: var(--sl-text);
}

.sl-meta__item--category {
	color: var(--sl-link);
}

/* --------------------------------------------------- 3. Layout primitives */

.sl-container {
	width: 100%;
	max-width: var(--sl-container);
	margin-inline: auto;
	padding-inline: var(--sl-gutter);
}

.sl-section {
	padding-block: var(--sl-section);
}

.sl-section--tight {
	padding-block: calc(var(--sl-section) / 2);
}

.sl-main > .sl-section:first-child {
	padding-top: calc(var(--sl-section) * 0.6);
}

.sl-reading {
	max-width: var(--sl-content);
}

.sl-layout {
	display: grid;
	gap: calc(var(--sl-gap) * 2);
	align-items: start;
}

.sl-layout--none {
	grid-template-columns: minmax(0, 1fr);
}

.sl-layout--right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
}

.sl-layout--left {
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}

.sl-layout--left .sl-layout__main {
	order: 2;
}

.sl-layout__main {
	min-width: 0;
}

.sl-grid {
	display: grid;
	gap: var(--sl-gap);
}

.sl-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sl-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sl-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sl-grid--list,
.sl-grid--index {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* The hairline-joined grid: one pixel of border colour showing between tiles. */
.sl-grid--joined {
	gap: var(--sl-border-w);
	background: var(--sl-hairline);
	border: var(--sl-border-w) solid var(--sl-hairline);
	border-radius: var(--sl-radius);
	overflow: hidden;
}

/* ---------------------------------------------------------- 4. Components */

.sl-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;
	/* Every button capitalises each word: forms, pricing cards and
	   Elementor buttons alike (see elementor.css). */
	text-transform: capitalize;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--sl-duration) var(--sl-ease),
		border-color var(--sl-duration) var(--sl-ease),
		color var(--sl-duration) var(--sl-ease);
}

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

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

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

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

.sl-button--ghost {
	background: transparent;
	color: var(--sl-text);
	padding-inline: calc(var(--sl-btn-px) * 0.5);
}

.sl-button--ghost:hover,
.sl-button--ghost:focus-visible {
	background: var(--sl-wash);
	color: var(--sl-text);
}

.sl-button--block {
	width: 100%;
}

.sl-arrow {
	flex: none;
	transition: transform var(--sl-duration) var(--sl-ease);
}

.sl-button:hover .sl-arrow,
.sl-link-arrow:hover .sl-arrow {
	transform: translateX(3px);
}

/*
 * Marks one word inside a heading.
 *
 * Signal Lime already means "this is the live one" everywhere else on the site
 * — the terminal node on a process line, the founder's role, the current row
 * in a timeline. Marking a word with the same colour reads as part of that
 * system rather than as decoration, and it survives the Elementor kit's
 * heading colour because the span carries its own colour rather than
 * inheriting one.
 */
.sl-mark {
	color: var(--sl-signal);

	/*
	 * Sheared, not italicised.
	 *
	 * Bricolage Grotesque ships no italic face, and the browser declines to
	 * synthesise one — `font-style: italic` and `oblique 10deg` both measure
	 * identical to upright, so neither does anything here. A transform is the
	 * only thing that actually leans the glyphs.
	 *
	 * inline-block is what makes the transform apply; the small left margin
	 * gives the sheared top-left corner room so it does not kiss the preceding
	 * word, and the padding stops the top-right of the last glyph clipping.
	 */
	display: inline-block;
	transform: skewX(-9deg);
	margin-left: 0.06em;
	padding-right: 0.04em;
}

.sl-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sl-font-ui);
	font-size: var(--sl-ui-size);
	font-weight: 500;
	white-space: nowrap;
}

/* The stroke motif. One continuous line, round caps, two turns. */
.sl-stroke {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.sl-divider {
	border: 0;
	border-top: var(--sl-border-w) solid var(--sl-hairline);
	margin-block: var(--sl-section);
}

/* Status: the dot is decoration, the label carries the meaning. */
.sl-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	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;
}

.sl-status__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: none;
	background: var(--sl-signal);
	animation: sl-pulse 2.4s var(--sl-ease) infinite;
}

.sl-status--ai .sl-status__dot {
	background: var(--sl-primary);
}

.sl-status--idle .sl-status__dot {
	background: var(--sl-muted);
	animation: none;
}

.sl-status--boxed {
	border: var(--sl-border-w) solid var(--sl-hairline);
	border-radius: var(--sl-radius);
	padding: 6px 10px;
}

/*
 * A status rendered as a heading (say, the hero's h1 for search). The tag is
 * for the outline only, so the label look is re-asserted at 0-2-0 over the
 * heading rules and the Elementor kit's (0-1-1). Mirrors .sl-status above.
 */
.sl-status.sl-status--tagged {
	margin: 0;
	font-family: var(--sl-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	text-wrap: wrap;
	color: var(--sl-muted);
	line-height: 1.4;
}

@keyframes sl-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.25;
	}
}

.sl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 1.4em;
}

.sl-chip {
	font-family: var(--sl-font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sl-muted);
	border: var(--sl-border-w) solid var(--sl-hairline);
	border-radius: var(--sl-radius);
	padding: 5px 8px;
}

.sl-chip:hover {
	border-color: var(--sl-text);
	color: var(--sl-text);
}

.sl-icon {
	color: var(--sl-text);
	flex: none;
}

.sl-section-header {
	display: flex;
	gap: 40px;
	margin-bottom: calc(var(--sl-gap) * 2);
}

.sl-section-header--between {
	justify-content: space-between;
	align-items: flex-end;
}

.sl-section-header--start {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.sl-section-header__heading {
	margin: 14px 0 0;
	max-width: 22ch;
	font-size: var(--sl-h2);
}

.sl-section-header__lead {
	margin: 18px 0 0;
	color: var(--sl-text-soft);
	max-width: 52ch;
}

.sl-section-header__link {
	flex: none;
	padding-bottom: 6px;
}

/* ------------------------------------------------------------- 5. Header */

.sl-header {
	--sl-header-bg: var(--sl-bg);
	--sl-header-scrim: var(--sl-scrim);
	--sl-header-text: var(--sl-text);

	position: relative;
	z-index: 60;
	background: var(--sl-header-bg);
	color: var(--sl-header-text);
}

.sl-header--ruled {
	border-bottom: var(--sl-border-w) solid var(--sl-hairline);
}

.sl-header--sticky {
	position: sticky;
	top: 0;
	background: var(--sl-header-scrim);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.sl-header--transparent:not(.is-stuck) {
	position: absolute;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
}

.sl-header__bar {
	display: flex;
	align-items: center;
	/*
	 * Only the logo-to-navigation gap is really visible here: the actions block
	 * carries margin-left:auto, so the space on its side is whatever is left
	 * over. Customize → Softliro → Header sets this.
	 *
	 * The authored gap only holds from about 1280px. Below that it is taken out
	 * of the gap first, one pixel per pixel of viewport, down to 40px at 1170px
	 * — before, the nav shrank instead and wrapped its own items and the two
	 * buttons onto second lines from about 1230px.
	 */
	gap: min(var(--sl-header-gap, 48px), max(40px, 100vw - 1130px));
	height: var(--sl-header-h);
	transition: height var(--sl-duration) var(--sl-ease);
}

.sl-header.is-stuck .sl-header__bar {
	height: var(--sl-header-h-scrolled);
}

/*
 * The navigation sits in the exact centre of the bar: three columns, the two
 * outer ones sharing the space equally, logo left and actions right. Done
 * with a grid rather than positioning the nav, because a positioned or
 * transformed nav becomes the containing block for the mega panels and they
 * would shrink to its width instead of spanning the header. Below the nav
 * breakpoint the nav is hidden and its column simply stays empty.
 */
.sl-header:not(.sl-header--minimal) .sl-header__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.sl-header:not(.sl-header--minimal) .sl-header__branding {
	grid-column: 1;
	justify-self: start;
}

.sl-header:not(.sl-header--minimal) .sl-nav--primary {
	grid-column: 2;
}

.sl-header:not(.sl-header--minimal) .sl-header__actions {
	grid-column: 3;
	justify-self: end;
	margin-left: 0;
}

.sl-header__branding {
	flex: none;
}

.sl-branding {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
}

.sl-branding__link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
}

.sl-branding__logo {
	max-height: calc(var(--sl-header-h) - 33px);
	width: auto;
}

/* The compact path renders a mark instead of the lockup; bound it the same. */
.sl-branding__mark {
	max-height: calc(var(--sl-header-h) - 24px);
	width: auto;
}

.sl-branding__title {
	font-family: var(--sl-font-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.03em;
	color: var(--sl-text);
}

.sl-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 20px;
}

.sl-header__desktop-actions {
	display: flex;
	align-items: center;
	gap: 20px;
}

.sl-header__notice {
	font-family: var(--sl-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: var(--sl-label-tracking);
}

.sl-header__search-toggle {
	background: none;
	border: 0;
	color: inherit;
	padding: 8px;
	cursor: pointer;
	border-radius: var(--sl-radius);
	display: inline-flex;
}

.sl-header__search-toggle:hover {
	background: var(--sl-wash);
}

.sl-header__search {
	border-top: var(--sl-border-w) solid var(--sl-hairline);
	padding-block: 20px;
	background: var(--sl-surface);
}

/* Primary navigation */

.sl-nav--primary .sl-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-nav__item {
	position: relative;
}

.sl-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--sl-radius);
	background: none;
	color: inherit;
	font-family: var(--sl-font-ui);
	font-size: var(--sl-ui-size);
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color var(--sl-duration) var(--sl-ease);
}

.sl-nav__link:hover,
.sl-nav__item:focus-within > .sl-nav__link {
	background: var(--sl-wash);
	color: var(--sl-text);
}

/*
 * The current item is marked the way the brand header marks it: the same soft
 * wash the link takes on hover, held permanently. Not a rule underneath it —
 * a 2px violet bar reads as a tab strip, which this navigation is not.
 *
 * The wash is a filled block rather than a colour shift alone, and every
 * current item still carries aria-current="page", so the state is not
 * communicated by colour on its own.
 */
.sl-nav__item.current-menu-item > .sl-nav__link,
.sl-nav__item.current-menu-ancestor > .sl-nav__link,
.sl-nav__link[aria-current="page"] {
	background: var(--sl-wash);
	color: var(--sl-text);
}

.sl-nav__badge {
	font-family: var(--sl-font-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sl-signal);
	border: var(--sl-border-w) solid var(--sl-signal-wash);
	border-radius: 3px;
	padding: 2px 5px;
	line-height: 1;
}

.sl-nav__chevron {
	opacity: 0.6;
	transition: transform var(--sl-duration) var(--sl-ease);
}

[aria-expanded="true"] .sl-nav__chevron {
	transform: rotate(180deg);
}

.sl-nav__disclosure {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 8px 4px;
}

/* Standard dropdown (non-mega children) */

.sl-nav__dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 240px;
	background: var(--sl-surface);
	border: var(--sl-border-w) solid var(--sl-hairline);
	border-radius: var(--sl-radius);
	padding: 8px;
	z-index: 70;
}

.sl-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-nav__submenu .sl-nav__link {
	display: flex;
	width: 100%;
	padding: 9px 12px;
	font-weight: 400;
}

.sl-nav__desc {
	display: block;
	font-size: 13px;
	color: var(--sl-muted);
	margin-top: 2px;
}

/* Open state is driven by the script; hover and focus are the no-JS path. */
.sl-nav__dropdown[hidden] {
	display: none;
}

@media (hover: hover) {
	.sl-nav--primary .sl-nav__item--has-children:hover > .sl-nav__dropdown[hidden],
	.sl-nav--primary .sl-nav__item--has-children:focus-within > .sl-nav__dropdown[hidden] {
		display: block;
	}
}

.sl-nav--primary .sl-nav__item--has-children:focus-within > .sl-nav__dropdown[hidden] {
	display: block;
}

/* ------------------------------------------------- 6. Mobile navigation */

.sl-nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	background: none;
	border: var(--sl-border-w) solid var(--sl-hairline-strong);
	border-radius: var(--sl-radius);
	padding: 9px 13px;
	color: inherit;
	font-family: var(--sl-font-mono);
	font-size: 11px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	cursor: pointer;
}

.sl-nav-toggle__glyph {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	width: 16px;
}

.sl-nav-toggle__glyph span {
	display: block;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--sl-duration) var(--sl-ease);
}

.sl-nav-toggle[aria-expanded="true"] .sl-nav-toggle__glyph span:first-child {
	transform: translateY(3px) rotate(45deg);
}

.sl-nav-toggle[aria-expanded="true"] .sl-nav-toggle__glyph span:last-child {
	transform: translateY(-2.5px) rotate(-45deg);
}

.sl-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(var(--sl-bg-rgb), 0.6);
}

.sl-mobile-nav[hidden] {
	display: none;
}

.sl-mobile-nav__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(420px, 100%);
	background: var(--sl-bg);
	border-left: var(--sl-border-w) solid var(--sl-hairline);
	display: flex;
	flex-direction: column;
	padding: 0 24px 24px;
	animation: sl-slide-in 240ms var(--sl-ease);
}

.sl-mobile-panel .sl-mobile-nav__panel,
.sl-mobile-fullscreen .sl-mobile-nav__panel {
	width: 100%;
	border-left: 0;
	animation: sl-fade-in 200ms var(--sl-ease);
}

@keyframes sl-slide-in {
	from {
		transform: translateX(16px);
		opacity: 0;
	}
}

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

/*
 * The drawer's own header. It sits above the site header in stacking order, so
 * it carries the brand and the close control rather than leaving the visitor to
 * guess at Escape or the scrim.
 */
.sl-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--sl-header-h);
	margin-bottom: 8px;
}

.sl-mobile-nav__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--sl-radius);
	color: var(--sl-text);
	cursor: pointer;
	transition: background-color var(--sl-duration) var(--sl-ease);
}

.sl-mobile-nav__close:hover,
.sl-mobile-nav__close:focus-visible {
	background: var(--sl-wash);
}

/* Two strokes crossing: the mark's round caps, at UI scale. */
.sl-mobile-nav__close-glyph,
.sl-mobile-nav__close-glyph::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.sl-mobile-nav__close-glyph {
	transform: rotate(45deg);
}

.sl-mobile-nav__close-glyph::after {
	content: "";
	transform: rotate(-90deg);
}

/*
 * overflow-y on its own computes overflow-x to `auto`, which quietly turned
 * the drawer into a horizontal scroller. The disclosure buttons hang 10px past
 * the content edge on purpose, so their 44px tap target optically lines up
 * with the close control above — and that overhang alone was enough to make
 * the list scrollable sideways. Swiped or scrolled into view by focus, it
 * sheared the first letter off every label.
 *
 * The negative margin plus matching padding hands that overhang a gutter to
 * live in, carved out of the panel's own 24px inset, so the text column does
 * not move. `hidden` then stops anything else from reintroducing the scroll.
 */
.sl-mobile-nav__scroll {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	margin-right: -10px;
	padding-right: 10px;
	overscroll-behavior: contain;
}

/*
 * A top-level row is a link plus its own disclosure button, side by side. The
 * list item is a list-item box by default, so the button wrapped onto its own
 * line and read as a stray chevron.
 */
.sl-nav--mobile .sl-nav__item--depth-0 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.sl-nav--mobile .sl-nav__item--depth-0 > .sl-nav__link {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.sl-nav--mobile .sl-nav__disclosure {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	background: none;
	border: 0;
	color: var(--sl-muted);
	cursor: pointer;
}

.sl-nav--mobile .sl-nav__disclosure:hover,
.sl-nav--mobile .sl-nav__disclosure:focus-visible {
	color: var(--sl-text);
}

/* The panel it discloses drops onto its own row, full width. */
.sl-nav--mobile .sl-nav__item--depth-0 > .sl-mega,
.sl-nav--mobile .sl-nav__item--depth-0 > .sl-nav__dropdown,
.sl-nav--mobile .sl-nav__item--depth-0 > .sl-nav__submenu {
	flex: 0 0 100%;
}

/*
 * In the drawer a dropdown is not a floating card. Left as the desktop panel
 * it positioned itself over the items below it, so opening Works covered
 * About and Contact instead of pushing them down.
 */
.sl-nav--mobile .sl-nav__dropdown {
	position: static;
	min-width: 0;
	padding: 0 0 10px;
	background: none;
	border: 0;
	border-radius: 0;
}

.sl-nav--mobile .sl-nav__list,
.sl-nav--mobile-secondary .sl-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-nav--mobile .sl-nav__item--depth-0 {
	border-bottom: var(--sl-border-w) solid var(--sl-hairline);
}

.sl-nav--mobile .sl-nav__link {
	width: 100%;
	justify-content: space-between;
	padding: 14px 0;
	font-family: var(--sl-font-display);
	font-size: 21px;
	font-weight: 300;
	letter-spacing: -0.02em;
	border-radius: 0;
}

.sl-nav--mobile .sl-nav__link:hover {
	background: none;
	color: var(--sl-link);
}

.sl-nav--mobile .sl-nav__submenu .sl-nav__link {
	font-family: var(--sl-font-ui);
	font-size: var(--sl-body-size);
	padding: 9px 0 9px 16px;
}

.sl-nav--mobile-secondary {
	margin-top: 24px;
}

.sl-nav--mobile-secondary .sl-nav__link {
	padding: 8px 0;
	font-size: var(--sl-ui-size);
	color: var(--sl-muted);
}

.sl-mobile-nav__foot {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 20px;
	border-top: var(--sl-border-w) solid var(--sl-hairline);
}

body.sl-nav-open {
	overflow: hidden;
}

/* ------------------------------------------------------------- 7. Footer */

.sl-footer {
	padding-block: var(--sl-footer-space) 40px;
	border-top: var(--sl-border-w) solid var(--sl-hairline);
	margin-top: var(--sl-section);
}

/*
 * Base: an even split. Below 1400px the row has no slack for anything else -
 * content-sized tracks overrun the container there, and a wider gutter puts
 * the longest service names onto two lines.
 */
.sl-footer__columns {
	display: grid;
	grid-template-columns: 1.4fr repeat(calc(var(--sl-footer-columns) - 1), minmax(0, 1fr));
	gap: 40px;
}

/*
 * From 1400px each link column is sized to what it holds rather than taking an
 * equal quarter: Services and Industries carry the longest names and the most
 * rows, while Company holds four short ones and was sitting on ~160px of
 * slack. `auto` tracks take their content width first and then share out what
 * is left, so the columns still finish flush to the container and the gutters
 * stay equal. The brand column is pinned to the width it already had.
 *
 * 48px is the gutter the mega panel uses, so the two places that present the
 * same layout - a brand block followed by link columns - are spaced alike.
 */
@media (min-width: 1400px) {
	.sl-footer__columns {
		grid-template-columns: 22.3% repeat(calc(var(--sl-footer-columns) - 1), auto);
		gap: 48px;
	}
}

.sl-footer__description {
	margin: 18px 0 0;
	font-size: 16px;
	color: var(--sl-text-soft);
	max-width: 34ch;
}

.sl-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 18px;
	font-style: normal;
	font-size: 16px;
	color: var(--sl-text-soft);
}

.sl-footer__contact-line {
	color: inherit;
}

.sl-footer__contact-line:hover {
	color: var(--sl-text);
}

.sl-footer .sl-widget {
	margin-bottom: 28px;
}

.sl-footer .sl-widget:last-child {
	margin-bottom: 0;
}

.sl-widget__title {
	margin: 0 0 14px;
}

.sl-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 16px;
}

.sl-widget ul a {
	color: var(--sl-text);
}

.sl-widget ul a:hover {
	color: var(--sl-link);
}

.sl-social__list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-family: var(--sl-font-mono);
	font-size: 11px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
}

.sl-social__list a {
	color: var(--sl-muted);
}

.sl-social__list a:hover {
	color: var(--sl-text);
}

.sl-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	margin-top: 56px;
	padding-top: 22px;
	border-top: var(--sl-border-w) solid var(--sl-hairline);
	font-family: var(--sl-font-mono);
	font-size: 10px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	color: var(--sl-muted);
}

.sl-footer__legal-list {
	list-style: none;
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
}

.sl-footer__legal-list a {
	color: var(--sl-muted);
}

.sl-footer__legal-list a:hover {
	color: var(--sl-text);
}

/* -------------------------------------------------------------- 8. Forms */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	background: var(--sl-surface);
	color: var(--sl-text);
	border: var(--sl-border-w) solid var(--sl-hairline-strong);
	border-radius: var(--sl-radius);
	padding: 11px 12px;
	font-family: var(--sl-font-ui);
	font-size: var(--sl-ui-size);
	line-height: 1.4;
	transition: border-color var(--sl-duration) var(--sl-ease);
}

/*
 * iOS Safari zooms the entire page when a form control smaller than 16px takes
 * focus, and the layout lurches sideways mid-form. Below the tablet breakpoint
 * --sl-ui-size drops under 16, so pin the controls back to 16 there. Same
 * specificity as the block above, so this wins only by coming after it.
 */
@media (max-width: 782px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px;
	}
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--sl-text-faint);
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--sl-focus);
	outline-offset: 1px;
	border-color: transparent;
}

::placeholder {
	color: var(--sl-text-faint);
	opacity: 1;
}

label {
	display: block;
	font-family: var(--sl-font-ui);
	font-size: var(--sl-ui-size);
	margin-bottom: 6px;
}

button,
input[type="submit"] {
	font-family: var(--sl-font-ui);
	cursor: pointer;
}

.sl-search-form {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.sl-search-form__field {
	flex: 1;
	min-width: 0;
}

.sl-search-form__submit {
	flex: none;
}

/* ------------------------------------ 9. Utilities and accessibility */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.sl-skip-link:focus,
.screen-reader-text:focus {
	clip-path: none;
	background: var(--sl-primary);
	color: #fff;
	display: block;
	font-family: var(--sl-font-ui);
	font-size: 15px;
	font-weight: 500;
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 14px 22px;
	border-radius: var(--sl-radius);
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid var(--sl-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Only remove the default ring where a custom one is drawn. */
:focus:not(:focus-visible) {
	outline: none;
}

.sl-main:focus {
	outline: none;
}

.sl-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: calc(var(--sl-section) / 2) 0 0;
	padding: 0;
}

.sl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	border: var(--sl-border-w) solid var(--sl-hairline);
	border-radius: var(--sl-radius);
	font-family: var(--sl-font-mono);
	font-size: 13px;
	color: var(--sl-text);
}

.sl-pagination .page-numbers:hover {
	border-color: var(--sl-text);
}

.sl-pagination .current {
	background: var(--sl-primary);
	border-color: var(--sl-primary);
	color: #fff;
}

.sl-page-links {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 2em;
}

/* Motion is opt-in and always yields to the visitor's preference. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body.sl-motion-off * {
	animation: none !important;
}

/* ---------------------------------------------------------- Breakpoints */

@media (max-width: 1024px) {
	.sl-layout--right,
	.sl-layout--left {
		grid-template-columns: minmax(0, 1fr);
	}

	.sl-layout--left .sl-layout__main {
		order: 0;
	}

	.sl-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.sl-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sl-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sl-footer__brand {
		grid-column: 1 / -1;
	}
}

/*
 * Responsive token overrides live in the inline :root block, not here — this
 * file is printed before it, and a media query adds no specificity, so a
 * `:root` rule in this file would lose to the base tokens.
 */

@media (max-width: 720px) {
	.sl-section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.sl-grid--2,
	.sl-grid--3,
	.sl-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.sl-footer__bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

@media (max-width: 560px) {
	/*
	 * Stacked, each group needs clearly more air above it than its links have
	 * between them (40px rows), or Services runs straight into Industries.
	 * Services and Industries carry the long names and take the full width;
	 * Resources and Company are short enough to share a row, Resources first.
	 * The column gutter matches the page's 24px side gutter.
	 */
	.sl-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 56px 24px;
	}

	.sl-footer__columns > :nth-child(-n+3) {
		grid-column: 1 / -1;
	}

	.sl-footer__columns > :nth-child(4) {
		order: 1;
	}
}

/* Below 360px a 24px gutter pushes "Apps & Products" onto two lines. */
@media (max-width: 360px) {
	.sl-footer__columns {
		column-gap: 16px;
	}
}

/* ============================================ Small-screen refinements */

/*
 * Measured across 320 / 375 / 414 / 768. Everything here is additive and sits
 * inside a max-width query, so the desktop rendering is untouched.
 */

@media (max-width: 782px) {
	/*
	 * Touch targets. WCAG 2.5.8 asks for 24px minimum; 44px is the size a thumb
	 * actually hits. Standalone controls get real height rather than relying on
	 * their text box, which was leaving several at 20–30px.
	 */
	.sl-nav-toggle,
	.sl-search-toggle {
		min-height: 44px;
	}


	.sl-footer__column a,
	.sl-footer__legal a,
	.sl-nav--mobile-secondary .sl-nav__link {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	/*
	 * The 40px tap target already sets the rhythm, so the list's own 9px gap
	 * was spacing these twice and stretching the stacked footer by ~250px.
	 */
	.sl-footer__column .sl-widget ul {
		gap: 0;
	}

	/*
	 * The footer's brand column is full width on a phone, so the lockup is not
	 * competing with a menu button the way the header's is and can read at a
	 * size closer to its desktop presence.
	 */
	.sl-branding--footer .sl-branding__logo {
		max-height: 44px;
	}

	/* The mono utility face is the one thing that must not shrink further. */
	.sl-label,
	.sl-meta,
	.sl-eyebrow {
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	/*
	 * The heading clamp floor is a proportion of the desktop maximum, which on a
	 * 320px screen leaves an h1 at 48px — about seven characters a line. Below
	 * this width the floor is overridden directly rather than retuning the scale
	 * for every other breakpoint.
	 */
	h1,
	.sl-h1 {
		font-size: clamp(32px, 11vw, 44px);
	}

	h2,
	.sl-h2 {
		font-size: clamp(26px, 8vw, 32px);
	}

	h3,
	.sl-h3 {
		font-size: 20px;
	}

	/*
	 * A wide logo plus a toggle does not fit; the mark carries the brand here.
	 * The drawer's lockup is the same lockup in the same place, so it takes the
	 * same size — left to the base rule it resolved to 25px and visibly shrank
	 * the moment the drawer opened over the header.
	 */
	.sl-header__branding .sl-branding__logo,
	.sl-branding--mobile .sl-branding__logo {
		max-height: 44px;
		width: auto;
	}
}

@media (max-width: 480px) {
	/* Sized to sit level with the 44px menu button in the 62px bar. */
	.sl-header__branding .sl-branding__logo,
	.sl-branding--mobile .sl-branding__logo {
		max-height: 40px;
	}


	/* The footer's legal row reads better stacked than wrapped mid-line. */
	.sl-footer__bottom {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
}

/*
 * Long unbroken strings — an email in a button, a URL in prose — are the usual
 * cause of a stray horizontal scrollbar on a phone.
 */
@media (max-width: 782px) {
	.sl-button,
	.elementor-button {
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}


/*
 * One element, two audiences.
 *
 * Where a phone needs different words from a desktop, the honest fix is two
 * elements and one of them hidden, rather than swapping text in with generated
 * content that a screen reader may or may not announce.
 *
 * Each class is only ever *hidden* by a query and never given a display value
 * of its own, so whatever the element already is — an inline-flex button, a
 * block, a grid — is what it stays when it is showing.
 *
 * 782px is the phone breakpoint the rest of the theme already turns on.
 */
@media (min-width: 783px) {
	.sl-only-mobile {
		display: none !important;
	}
}

@media (max-width: 782px) {
	.sl-only-desktop {
		display: none !important;
	}
}


/* The header's actions keep sentence case; every other button is uppercase.
   Covers the mobile menu's copy of the call to action too. */
.sl-header__actions .sl-button,
.sl-mobile-nav__foot .sl-button {
	text-transform: none;
}

/* One line each, whatever the width: a wrapped label doubles the bar height. */
.sl-header__actions .sl-button,
.sl-nav--primary .sl-nav__item--depth-0 {
	white-space: nowrap;
	flex-shrink: 0;
}

/* The panels hang off those items and would inherit it; they must wrap. */
.sl-nav--primary .sl-nav__item--depth-0 .sl-mega,
.sl-nav--primary .sl-nav__item--depth-0 .sl-nav__dropdown {
	white-space: normal;
}

/*
 * The header's secondary action.
 *
 * It sits beside a filled call to action, so it should read as the quieter of
 * the two and still be findable: signal-coloured text, going to the body colour
 * on hover, with no wash behind it. The generic ghost variant keeps its wash
 * for every other use; this is the header's own.
 *
 * Two classes deep so it beats .sl-button--ghost wherever that lands in the
 * cascade.
 */
.sl-button.sl-header__secondary {
	color: var(--sl-signal);
}

.sl-button.sl-header__secondary:hover,
.sl-button.sl-header__secondary:focus-visible {
	background: transparent;
	color: var(--sl-text);
}

/* Lime on a bone ground is unreadable, so a light header takes the primary. */
.sl-scheme-light .sl-button.sl-header__secondary,
.sl-invert .sl-button.sl-header__secondary {
	color: var(--sl-primary);
}

.sl-scheme-light .sl-button.sl-header__secondary:hover,
.sl-scheme-light .sl-button.sl-header__secondary:focus-visible,
.sl-invert .sl-button.sl-header__secondary:hover,
.sl-invert .sl-button.sl-header__secondary:focus-visible {
	color: var(--sl-text);
}

/* -------------------------------------------------------- Booking popup */

/*
 * The scheduler dialog (assets/js/booking.js). One white sheet, so it reads as
 * a single piece with Cal.com's light calendar inside it: the brand type, a
 * clear close control, a loading state until the calendar reports it is ready,
 * and a plain link out in case it never does. A floating sheet on phones too.
 */
html.sl-booking-open {
	overflow: hidden;
}

.sl-booking {
	--bk-bg: #fff;
	--bk-text: #0e1113;
	--bk-muted: #6b6f73;
	--bk-line: rgba(14, 17, 19, 0.1);
	--bk-ctl: rgba(14, 17, 19, 0.16);
	--bk-ctl-hover: rgba(14, 17, 19, 0.05);
	--bk-card: #fff;
	--bk-card-line: rgba(14, 17, 19, 0.12);
	--bk-chip: #f1f2f4;
	--bk-accent: var(--sl-primary);
	--bk-icon-bg: rgba(var(--sl-primary-rgb), 0.1);
	--bk-icon: var(--sl-primary);
	width: min(1080px, calc(100vw - 48px));
	max-width: none;
	height: min(800px, calc(100dvh - 48px));
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bk-text);
	overflow: visible;
}

.sl-booking::backdrop {
	background: rgba(6, 8, 12, 0.74);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.sl-booking[open] {
	animation: sl-booking-in 240ms var(--sl-ease) both;
}

@keyframes sl-booking-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.sl-booking__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 0;
	border-radius: 16px;
	background: var(--bk-bg);
	box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55);
	transition: background-color 280ms var(--sl-ease);
}

.sl-booking__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 22px 20px 28px;
	border-bottom: 1px solid var(--bk-line);
}

.sl-booking__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sl-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	color: var(--bk-muted);
}

.sl-booking__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bk-accent);
	animation: sl-pulse 2.4s var(--sl-ease) infinite;
}

.sl-booking__title {
	margin: 10px 0 6px;
	font-family: var(--sl-font-display);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: var(--sl-h-weight);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--bk-text);
}

.sl-booking__meta {
	font-size: 14px;
	line-height: 1.5;
	color: var(--bk-muted);
}

.sl-booking__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--bk-ctl);
	border-radius: 50%;
	background: transparent;
	color: var(--bk-text);
	cursor: pointer;
	transition:
		background-color var(--sl-duration) var(--sl-ease),
		border-color var(--sl-duration) var(--sl-ease),
		transform var(--sl-duration) var(--sl-ease);
}

.sl-booking__close:hover {
	border-color: var(--bk-text);
	background: var(--bk-ctl-hover);
	transform: rotate(90deg);
}

.sl-booking__close:focus-visible {
	outline: 2px solid var(--sl-primary);
	outline-offset: 3px;
}

/* The only part of the dialog that scrolls. */
.sl-booking__body {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--bk-bg);
}

.sl-booking__frame {
	min-height: 100%;
}

.sl-booking__loader {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: var(--bk-bg);
	color: var(--bk-muted);
	font-size: 14px;
	transition: opacity 240ms var(--sl-ease);
}

.sl-booking.is-ready .sl-booking__loader {
	opacity: 0;
	pointer-events: none;
}

.sl-booking__spinner {
	width: 30px;
	height: 30px;
	border: 2.5px solid rgba(14, 17, 19, 0.1);
	border-top-color: var(--sl-primary);
	border-radius: 50%;
	animation: sl-booking-spin 0.8s linear infinite;
}

@keyframes sl-booking-spin {
	to {
		transform: rotate(360deg);
	}
}

.sl-booking__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding: 12px 20px;
	border-top: 1px solid var(--bk-line);
	font-size: 13px;
	color: var(--bk-muted);
}

.sl-booking__fallback {
	color: var(--bk-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sl-booking__fallback:hover,
.sl-booking.is-slow .sl-booking__fallback {
	color: var(--sl-primary);
}

@media (max-width: 767px) {
	/* Full screen on a phone. */
	.sl-booking {
		width: 100vw;
		height: 100dvh;
		max-width: 100vw;
		max-height: 100dvh;
		margin: 0;
	}

	.sl-booking__panel {
		border: 0;
		border-radius: 0;
	}

	.sl-booking__head {
		gap: 16px;
		padding: 16px 16px 14px 20px;
	}

	.sl-booking__title {
		margin: 8px 0 4px;
		font-size: 20px;
	}

	.sl-booking__meta {
		font-size: 13px;
	}
}

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

	.sl-booking__close:hover {
		transform: none;
	}
}

/*
 * Step one of the booking popup, for a link to the whole Cal.com profile: the
 * event types as two large cards, so the choice is one obvious tap. Once a
 * card has been picked, a Back button sits beside the close control.
 */
.sl-booking__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sl-booking__back {
	display: none;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--bk-ctl);
	border-radius: 999px;
	background: transparent;
	font-family: var(--sl-font-ui);
	font-size: 14px;
	font-weight: 500;
	color: var(--bk-text);
	cursor: pointer;
	transition:
		background-color var(--sl-duration) var(--sl-ease),
		border-color var(--sl-duration) var(--sl-ease);
}

.sl-booking.is-picked .sl-booking__back {
	display: inline-flex;
}

.sl-booking__back:hover {
	border-color: var(--bk-text);
	background: var(--bk-ctl-hover);
}

.sl-booking__back:focus-visible {
	border-radius: 999px;
	outline: 2px solid var(--sl-primary);
	outline-offset: 3px;
}

.sl-booking__choices {
	display: none;
}

/* Two halves filling the body edge to edge, split by a hairline. */
.sl-booking.is-choosing .sl-booking__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	box-sizing: border-box;
	min-height: 100%;
}

.sl-booking.is-choosing .sl-booking__loader,
.sl-booking.is-choosing .sl-booking__frame {
	display: none;
}

/*
 * A grid, so the arrow can sit on the icon's row at the right while the
 * rest runs full width beneath; the block is centred in the half's height.
 */
.sl-booking__choice {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"icon go"
		"label label"
		"title title"
		"text text"
		"chips chips";
	align-content: center;
	justify-items: start;
	gap: 10px 16px;
	min-height: 100%;
	padding: clamp(32px, 5vw, 64px);
	border: 0;
	border-radius: 0;
	background: var(--bk-card);
	color: var(--bk-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		background-color var(--sl-duration) var(--sl-ease),
		color var(--sl-duration) var(--sl-ease),
		border-color var(--sl-duration) var(--sl-ease),
		box-shadow var(--sl-duration) var(--sl-ease),
		transform var(--sl-duration) var(--sl-ease);
}

.sl-booking__choice + .sl-booking__choice {
	border-left: 1px solid var(--bk-line);
}

/* The content keeps a readable measure inside a wide half. */
.sl-booking__choice > * {
	max-width: 460px;
}

.sl-booking__choice:focus-visible {
	outline: 2px solid var(--sl-primary);
	outline-offset: -4px;
}

.sl-booking__choice-icon {
	grid-area: icon;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 10px;
	border-radius: 16px;
	background: var(--bk-icon-bg);
	color: var(--bk-icon);
}

.sl-booking__choice-label {
	grid-area: label;
	font-family: var(--sl-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	color: var(--bk-accent);
}

.sl-booking__choice-title {
	grid-area: title;
	font-family: var(--sl-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.sl-booking__choice-text {
	grid-area: text;
	font-size: 15px;
	line-height: 1.55;
	color: var(--bk-muted);
}

/* The wrapper steps aside so the tags and the arrow each take a grid area. */
.sl-booking__choice-foot {
	display: contents;
}

.sl-booking__choice-chips {
	grid-area: chips;
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sl-booking__chip {
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--bk-chip);
	font-size: 12px;
	font-weight: 500;
	color: var(--bk-text);
}

/* Top right, on the icon's row (see the grid on .sl-booking__choice). */
.sl-booking__choice-go {
	grid-area: go;
	align-self: center;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--bk-ctl);
	border-radius: 50%;
	color: var(--bk-text);
	transition:
		background-color var(--sl-duration) var(--sl-ease),
		border-color var(--sl-duration) var(--sl-ease),
		color var(--sl-duration) var(--sl-ease),
		transform var(--sl-duration) var(--sl-ease);
}

.sl-booking__choice:hover .sl-booking__choice-go,
.sl-booking__choice:focus-visible .sl-booking__choice-go {
	border-color: var(--sl-primary);
	background: var(--sl-primary);
	color: #fff;
	transform: translate(2px, -2px);
}

/*
 * Phones: a compact card, so both fit on one screen. The icon sits beside the
 * label and title; the description and the tags-and-arrow row run full width.
 */
@media (max-width: 767px) {
	/* Two boxed rows, inset from the edges and centred in the screen. */
	.sl-booking.is-choosing .sl-booking__choices {
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		gap: 12px;
		padding: 24px 20px;
	}

	.sl-booking__choice + .sl-booking__choice {
		border-left: 0;
	}

	.sl-booking__choice {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		grid-template-areas:
			"icon label go"
			"icon title go"
			". chips chips";
		column-gap: 14px;
		row-gap: 2px;
		min-height: 0;
		padding: 18px;
		border: 1px solid var(--bk-card-line);
		border-radius: 16px;
		align-content: center;
	}

	.sl-booking__choice-icon {
		align-self: center;
		width: 44px;
		height: 44px;
		margin: 0;
		border-radius: 12px;
	}

	.sl-booking__choice-icon svg {
		width: 22px;
		height: 22px;
	}

	.sl-booking__choice-label {
		align-self: end;
		font-size: 10px;
	}

	.sl-booking__choice-title {
		font-size: 21px;
	}

	/* A compact row per option on a phone: no description, and of the tags
	   only the ways to meet (the durations are in the header). */
	.sl-booking__choice-text,
	.sl-booking__chip:nth-child(-n+2) {
		display: none;
	}

	.sl-booking__choice-chips {
		margin-top: 10px;
	}

	.sl-booking__chip {
		padding: 3px 9px;
		font-size: 11.5px;
	}

	.sl-booking__choice-go {
		width: 38px;
		height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-booking__choice:hover,
	.sl-booking__choice:focus-visible,
	.sl-booking__choice:hover .sl-booking__choice-go {
		transform: none;
	}
}

/*
 * Step one in the site's own dark palette, so the choice feels like part of
 * Softliro; the popup turns white once a card is picked and Cal.com's light
 * calendar takes over. Only the colour settings change, so every part of the
 * popup follows without rules of its own.
 */
.sl-booking.is-choosing {
	--bk-bg: var(--sl-surface);
	--bk-text: var(--sl-text);
	--bk-muted: var(--sl-muted);
	--bk-line: var(--sl-hairline);
	--bk-ctl: var(--sl-hairline-strong);
	--bk-ctl-hover: rgba(255, 255, 255, 0.06);
	--bk-card: transparent;
	--bk-card-line: var(--sl-hairline-strong);
	--bk-chip: rgba(255, 255, 255, 0.07);
	--bk-accent: var(--sl-signal);
	--bk-icon-bg: rgba(var(--sl-primary-rgb), 0.22);
	--bk-icon: var(--sl-text);
}

/*
 * The two options read apart at a glance: International dark and Bangladesh
 * white at rest. Under the pointer either card turns the brand violet, the
 * whole box and not just its border, so the choice is unmistakable.
 */
.sl-booking.is-choosing .sl-booking__choice--bd {
	--bk-card: #fff;
	--bk-text: #0e1113;
	--bk-muted: #6b6f73;
	--bk-chip: #f1f2f4;
	--bk-accent: var(--sl-primary);
	--bk-icon-bg: rgba(var(--sl-primary-rgb), 0.1);
	--bk-icon: var(--sl-primary);
	--bk-ctl: rgba(14, 17, 19, 0.16);
	--bk-card-line: #fff;
}

.sl-booking.is-choosing .sl-booking__choice:hover,
.sl-booking.is-choosing .sl-booking__choice:focus-visible {
	--bk-card: var(--sl-primary);
	--bk-text: #fff;
	--bk-muted: rgba(255, 255, 255, 0.78);
	--bk-chip: rgba(255, 255, 255, 0.16);
	--bk-accent: var(--sl-signal);
	--bk-icon-bg: rgba(255, 255, 255, 0.16);
	--bk-icon: #fff;
	--bk-ctl: rgba(255, 255, 255, 0.4);
	--bk-card-line: var(--sl-primary);
}

/* On the violet card the arrow turns white, so it still stands out. */
.sl-booking.is-choosing .sl-booking__choice:hover .sl-booking__choice-go,
.sl-booking.is-choosing .sl-booking__choice:focus-visible .sl-booking__choice-go {
	border-color: #fff;
	background: #fff;
	color: var(--sl-primary);
}

.sl-booking.is-choosing .sl-booking__choice:focus-visible {
	outline-color: #fff;
}

/* The way out stays readable on the dark step. */
.sl-booking.is-choosing .sl-booking__fallback {
	color: var(--bk-text);
}

.sl-booking.is-choosing .sl-booking__fallback:hover {
	color: var(--sl-signal);
}

/* The dialog takes focus on open so nothing inside starts ringed. */
.sl-booking:focus {
	outline: none;
}

/*
 * Phones, step one: the heading leaves the top bar and sits centred just
 * above the two cards, and the pair is centred on the screen together, so
 * there is no empty band between them. The close button stays top right.
 */
@media (max-width: 767px) {
	.sl-booking.is-choosing .sl-booking__panel {
		position: relative;
	}

	.sl-booking.is-choosing .sl-booking__head {
		display: block;
		margin-top: auto;
		padding: 0 20px;
		border-bottom: 0;
		text-align: center;
	}

	.sl-booking.is-choosing .sl-booking__actions {
		position: absolute;
		top: 16px;
		right: 16px;
		z-index: 2;
	}

	.sl-booking.is-choosing .sl-booking__title {
		margin: 10px 0 4px;
		font-size: 24px;
	}

	.sl-booking.is-choosing .sl-booking__body {
		flex: 0 1 auto;
		margin-bottom: auto;
	}

	.sl-booking.is-choosing .sl-booking__choices {
		padding-top: 20px;
	}
}

/*
 * Phones, the calendar step: the "Book a slot" eyebrow and the meeting line
 * under the title step aside, so the bar is just the title, Back and close.
 */
@media (max-width: 767px) {
	.sl-booking:not(.is-choosing) .sl-booking__eyebrow,
	.sl-booking:not(.is-choosing) .sl-booking__meta {
		display: none;
	}

	.sl-booking:not(.is-choosing) .sl-booking__title {
		margin-top: 2px;
	}
}

/* Step one reads "Book a slot" then "Based on your timezone.": the meeting
   line waits for the calendar step (and on phones is hidden there too). */
.sl-booking.is-choosing .sl-booking__meta {
	display: none;
}

/* No separator rules in the booking popup: the header, the body and the
   "Trouble loading?" line sit on one surface, and the two halves of step one
   are told apart by their colours. */
.sl-booking .sl-booking__head {
	border-bottom: 0;
}

.sl-booking .sl-booking__foot {
	border-top: 0;
}

.sl-booking .sl-booking__choice + .sl-booking__choice {
	border-left: 0;
}

/* Step one: the top bar and the bottom line sit on the site's raised
   surface, a step lighter than the cards between them. On phones the heading
   sits with the cards, so neither takes it there. */
.sl-booking.is-choosing .sl-booking__head,
.sl-booking.is-choosing .sl-booking__foot {
	background: var(--sl-surface-2);
}

@media (max-width: 767px) {
	.sl-booking.is-choosing .sl-booking__head,
	.sl-booking.is-choosing .sl-booking__foot {
		background: transparent;
	}
}

/* On phones the calendar step keeps a rule under its top bar, and the
   "Trouble loading?" line is left out on both steps. */
@media (max-width: 767px) {
	.sl-booking:not(.is-choosing) .sl-booking__head {
		border-bottom: 1px solid var(--bk-line);
	}

	.sl-booking .sl-booking__foot {
		display: none;
	}
}

/* Step one: the cards carry no description on any screen, only the label,
   title and the ways to meet (phones already hid it). */
.sl-booking .sl-booking__choice-text {
	display: none;
}

/*
 * Static pages (Terms, Privacy Policy, Imprint and any other plain page):
 * room between the header and the page title, the same as the blog's page
 * header (assets/css/blog.css), which these pages do not load.
 */
.sl-page-entry > .sl-page-header {
	padding-top: calc(var(--sl-section) * 0.7);
}

/* Section headings in a static page's text get clear room above them. */
.sl-page-entry .sl-entry-content h2 {
	margin-top: 64px;
}

.sl-page-entry .sl-entry-content h3 {
	margin-top: 36px;
}

.sl-page-entry .sl-entry-content > :first-child {
	margin-top: 0;
}

@media (max-width: 767px) {
	.sl-page-entry .sl-entry-content h2 {
		margin-top: 44px;
	}
}

/*
 * Desktop step one: the arrow sits at the right end of the title's line
 * rather than beside the icon. Phones keep their own compact grid.
 */
@media (min-width: 768px) {
	.sl-booking__choice {
		grid-template-areas:
			"icon icon"
			"label label"
			"title go"
			"text text"
			"chips chips";
	}

	.sl-booking__choice-go {
		align-self: center;
	}
}