/*
 * Sri Lanka Outsourcing brand layer.
 * Tokens + utility classes applied from Elementor (Advanced > CSS Classes).
 * Values mirror the Elementor Kit; see CLAUDE.md "Design tokens".
 */

:root {
	--forest: #0E4D33;
	--deep: #0B3F2A;
	--canopy: #2C9A5C;
	--lagoon: #7FCDB6;
	--mint: #CFE6DC;
	--mint-tint: #EEF6F1;
	--saffron: #F4B731;
	--saffron-hover: #FFC94D;
	--accent-tint: #FFF7E0;
	--ember: #E8742C;
	--maroon: #8B1D3F;
	--ink: #0A1F16;
	--body: #22382F;
	--muted: #3A5248;
	--soft: #6B7D75;
	--line: #E4E0D6;
	--paper: #F6F4EE;
	--tint: #FBFAF7;
	--surface: #FFFFFF;

	--font-sans: Manrope, system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;

	--max: 1280px;
	--gutter: clamp(20px, 5.5vw, 80px);
	--section-y: clamp(72px, 8vw, 144px);
	--ease: cubic-bezier(.2, .7, .2, 1);

	/* Motion: one quiet entrance for the whole site. */
	--motion-rise: 10px;
	--motion-dur: .6s;
	--motion-step: 70ms; /* stagger between items in a group */

	/* Section titles, two tiers (see CLAUDE.md "Typography"):
	   display  clamp(40px, 4.6vw, 68px), -.04em  — full-width section heads
	   split    clamp(32px, 3.2vw, 48px), -.035em — titles beside a side column */

	--r-chip: 9px;
	--r-btn: 12px;
	--r-card: 20px;
	--r-panel: 28px;
	--r-pill: 999px;
}

/* ---------- Base (overrides the parent theme's demo typography) ---------- */

body {
	font-family: var(--font-sans);
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}

body :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-sans);
	color: var(--ink);
}

/* The parent pins `p` to 16px and #666 (--paragraph-color), which would ignore
   Text Editor typography and colour set on the widget (Elementor controls or a
   brand class). Inherit them instead. */
.elementor-widget-text-editor p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--ember);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- Brand lockup ---------- */

body a.slo-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--forest);
	text-decoration: none;
}

body a.slo-brand:hover {
	color: var(--forest);
}

.slo-brand__word {
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1;
	text-transform: uppercase;
}

.slo-brand__top {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .04em;
}

.slo-brand__bottom {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 600;
}

body a.slo-brand--on-dark,
body a.slo-brand--on-dark:hover {
	color: #FFFFFF;
}

/* ---------- Eyebrow pill (Heading widget, tag p) ---------- */

.elementor-widget.slo-eyebrow .elementor-heading-title,
p.slo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 16px 8px 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--forest);
}

.elementor-widget.slo-eyebrow .elementor-heading-title::before,
p.slo-eyebrow::before {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--saffron);
}

.elementor-widget.slo-eyebrow--on-dark .elementor-heading-title {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .07);
	color: var(--lagoon);
}

/* Eyebrow on a white section: Paper fill instead of white. */
p.slo-eyebrow--paper,
.elementor-widget.slo-eyebrow--paper .elementor-heading-title {
	background: var(--paper);
}

/* Visually hidden text (fallback if the parent theme doesn't define it). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Buttons ----------
 * Plain links:      <a class="slo-btn slo-btn--primary">
 * Elementor Button: widget CSS classes "slo-btn slo-btn--primary"
 */

body a.slo-btn,
.elementor-widget.slo-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--r-btn);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0; /* Elementor buttons default to the Kit "accent" (mono) typography. */
	text-transform: none;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.elementor-widget.slo-btn .elementor-button-content-wrapper {
	align-items: center;
	gap: 10px;
}

/* Trailing arrow for Elementor buttons (plain links carry an inline SVG). */
.elementor-widget.slo-btn .elementor-button-text::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 10px;
	vertical-align: -4px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}

body a.slo-btn .slo-icon {
	transition: transform .2s ease;
}

body a.slo-btn:hover .slo-icon,
.elementor-widget.slo-btn .elementor-button:hover .elementor-button-text::after {
	transform: translateX(4px);
}

body a.slo-btn:active,
.elementor-widget.slo-btn .elementor-button:active {
	transform: translateY(0) scale(.98);
}

.slo-btn--pill.slo-btn,
.elementor-widget.slo-btn--pill .elementor-button {
	border-radius: var(--r-pill);
}

body a.slo-btn--primary,
.elementor-widget.slo-btn--primary .elementor-button {
	background: var(--saffron);
	color: var(--ink);
	font-weight: 800;
}

body a.slo-btn--primary:hover,
.elementor-widget.slo-btn--primary .elementor-button:hover {
	background: #E6A51C;
	color: var(--ink);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(176, 122, 10, .55);
}

body a.slo-btn--secondary,
.elementor-widget.slo-btn--secondary .elementor-button {
	background: var(--forest);
	color: #FFFFFF;
}

body a.slo-btn--secondary:hover,
.elementor-widget.slo-btn--secondary .elementor-button:hover {
	background: #0A3A26;
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(10, 31, 22, .5);
}

.elementor-widget.slo-btn--lg .elementor-button {
	min-height: 56px;
	padding: 0 28px;
	font-size: 17px;
}

/* Text link with arrow (Elementor Button widget, class "slo-link"). */
.elementor-widget.slo-link .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--forest);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.elementor-widget.slo-link .elementor-button:hover {
	background: none;
	color: #0A3A26;
}

.elementor-widget.slo-link .elementor-button-text::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	vertical-align: -3px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}

.elementor-widget.slo-link .elementor-button:hover .elementor-button-text::after {
	transform: translateX(3px);
}

/* ---------- Text helpers ---------- */

.slo-hl {
	color: var(--canopy);
}

.elementor-widget.slo-balance .elementor-heading-title {
	text-wrap: balance;
}

/* Check list (Icon List widget with no icons, class "slo-checklist"). */
.elementor-widget.slo-checklist .elementor-icon-list-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.elementor-widget.slo-checklist .elementor-icon-list-item::before {
	content: "";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.elementor-widget.slo-checklist .elementor-icon-list-icon {
	display: none;
}

/* ---------- Hero ---------- */

.e-con.slo-hero__panel {
	overflow: hidden;
}

/*
 * Hero is full bleed, but its copy starts on the 1280px content grid used by
 * every boxed section. % padding resolves against the panel (= page) width.
 */
@media (min-width: 1025px) {
	.e-con.slo-hero__copy {
		padding-left: max(40px, calc((100% - var(--max)) / 2));
		padding-inline-start: max(40px, calc((100% - var(--max)) / 2));
	}
}

.elementor-widget.slo-hero__title .elementor-heading-title {
	max-width: 640px;
	font-size: clamp(36px, 3.6vw, 56px);
	line-height: 1.1;
	letter-spacing: -.025em;
	font-weight: 700;
	text-wrap: balance;
}

.elementor-widget.slo-hero__lead {
	max-width: 540px;
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.55;
	font-weight: 500;
	text-wrap: pretty;
}

.elementor-widget.slo-hero__lead p,
.elementor-widget.slo-hero__note p {
	margin: 0;
}

.elementor-widget.slo-hero__checks .elementor-icon-list-text {
	font-size: clamp(16px, 1.3vw, 18px);
	font-weight: 600;
	color: var(--ink);
}

.e-con.slo-hero__media {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.e-con.slo-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Forest wash over the photo: brand tint, and depth behind the glass card. */
	background:
		radial-gradient(ellipse 60% 70% at 50% 50%, rgba(11, 63, 42, .45) 0%, rgba(11, 63, 42, 0) 100%),
		linear-gradient(180deg, rgba(14, 77, 51, .3) 0%, rgba(14, 77, 51, .4) 55%, rgba(11, 63, 42, .75) 100%);
}

.slo-hero__media > .elementor-widget-image,
.elementor-widget.slo-hero__photo {
	position: absolute !important; /* Elementor sets position on widget wrappers. */
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
}

.elementor-widget.slo-hero__photo .elementor-widget-container,
.elementor-widget.slo-hero__photo img {
	width: 100%;
	height: 100%;
}

.elementor-widget.slo-hero__photo img {
	object-fit: cover;
	object-position: 70% 50%; /* Keeps the standing team lead clear of the glass card (Media 6194). */
	transform: scale(1.02);
	transform-origin: 70% 30%;
	transition: transform 1.8s var(--ease);
	will-change: transform;
}

.e-con.slo-hero__media:hover .slo-hero__photo img {
	transform: scale(1.12);
}

.elementor-widget.slo-hero__card {
	position: relative;
	z-index: 2;
	width: min(360px, 100%);
}

/* ---------- How it works ---------- */

.elementor-widget.slo-how__title .elementor-heading-title {
	font-size: clamp(40px, 4.6vw, 68px);
	line-height: 1;
	letter-spacing: -.04em;
	font-weight: 800;
	text-transform: uppercase;
}

.elementor-widget.slo-how__lead {
	max-width: 560px;
}

.elementor-widget.slo-how__lead {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.elementor-widget.slo-how__lead p {
	margin: 0;
}

.elementor-widget.slo-how__lead .slo-how__q {
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.5;
	color: #5B6B63;
}

.elementor-widget.slo-how__lead .slo-how__statement {
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.2;
	letter-spacing: -.025em;
	font-weight: 700;
	color: var(--ink);
	text-wrap: balance;
}

/* Highlighter stroke under a phrase. */
.slo-mark {
	background: linear-gradient(transparent 62%, rgba(244, 183, 49, .55) 62%);
}

/* Callout with a Saffron bar (Text Editor widget, class "slo-callout"). */
.elementor-widget.slo-callout {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 0 0 20px;
	border-left: 2px solid var(--saffron);
}

.elementor-widget.slo-callout p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
}

.elementor-widget.slo-how__closing .elementor-heading-title {
	max-width: 720px;
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.35;
	letter-spacing: -.015em;
	font-weight: 700;
	text-wrap: balance;
}

/* ---------- Scroll reveal ----------
 * Add "slo-reveal" (+ optional "slo-reveal--d1…d4" delay) to an Elementor
 * container or widget. brand.js arms it (hidden) and adds .is-in on scroll.
 * Without JS nothing is armed, so content is always visible.
 */

.slo-reveal[data-armed]:not(.is-in) {
	opacity: 0;
}

.slo-reveal.is-in {
	animation: slo-rise var(--motion-dur) var(--ease) var(--slo-delay, 0ms) both;
}

.slo-reveal--d1 { --slo-delay: 80ms; }
.slo-reveal--d2 { --slo-delay: 160ms; }
.slo-reveal--d3 { --slo-delay: 240ms; }
.slo-reveal--d4 { --slo-delay: 320ms; }

@keyframes slo-rise {
	from { opacity: 0; transform: translateY(var(--motion-rise)); }
	to { opacity: 1; transform: none; }
}

/* Section titles (tagged "slo-title" by brand.js): the text wipes up out of a
   soft mask, a beat after its block. The final clip is widened so descenders
   and underline strokes are never cut. */
.slo-title[data-armed]:not(.is-in) {
	opacity: 0;
}

.slo-title.is-in {
	animation: slo-title .8s var(--ease) calc(var(--slo-delay, 0ms) + 100ms) both;
}

@keyframes slo-title {
	from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 100% 0); }
	to { opacity: 1; transform: none; clip-path: inset(-10% -5% -30% -5%); }
}

/* The hero title is on screen at load: play the same reveal once, in CSS. */
.elementor-widget.slo-hero__title .elementor-heading-title {
	animation: slo-title .8s var(--ease) .1s both;
}

/* ---------- Photo panel (container "slo-photo-panel" + Image widget "slo-photo-panel__img") ---------- */

.e-con.slo-photo-panel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: 24px;
	background: #E3F3EC;
}

.e-con.slo-photo-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 31, 22, .18) 0%, rgba(10, 31, 22, 0) 30%, rgba(10, 31, 22, 0) 70%, rgba(10, 31, 22, .22) 100%);
}

.e-con.slo-photo-panel > .elementor-widget.slo-photo-panel__img {
	position: absolute !important; /* Elementor sets position on widget wrappers. */
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
}

.elementor-widget.slo-photo-panel__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% 35%;
}

/* Badge pill with a live dot (Heading widget, tag p, class "slo-badge"). */
.e-con.slo-photo-panel > .elementor-widget.slo-badge {
	position: absolute !important;
	top: 18px;
	left: 50%;
	z-index: 2;
	width: auto;
	transform: translateX(-50%);
}

.elementor-widget.slo-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--surface);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--ink);
}

.elementor-widget.slo-badge .elementor-heading-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--canopy);
	animation: slo-pulse 2.8s ease-in-out infinite;
}

@keyframes slo-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

/* ---------- The pilot ---------- */

.elementor-widget.slo-pilot__title .elementor-heading-title {
	font-size: clamp(32px, 3.2vw, 48px);
	line-height: 1.08;
	letter-spacing: -.035em;
	font-weight: 800;
}

.elementor-widget.slo-pilot__title .elementor-heading-title span {
	display: block;
}

.elementor-widget.slo-pilot__h3 .elementor-heading-title {
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.15;
	letter-spacing: -.025em;
	font-weight: 800;
}

/* Band: copy + switch on the left, statement on the right; both size to content. */
.e-con.slo-band__copy,
.elementor-widget.slo-band__statement {
	width: auto;
	max-width: 100%;
}

.elementor-widget.slo-band__lead p {
	margin: 0;
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--mint);
}

.elementor-widget.slo-band__statement .elementor-heading-title {
	font-size: clamp(34px, 4vw, 60px);
	line-height: 1;
	letter-spacing: -.04em;
	font-weight: 800;
	color: #FFFFFF;
}

/* Saffron underline that draws in when its slo-reveal ancestor is revealed. */
.slo-underline {
	position: relative;
	display: inline-block;
}

.slo-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	height: 5px;
	border-radius: 3px;
	background: var(--saffron);
	transform-origin: left center;
}

.slo-reveal[data-armed]:not(.is-in) .slo-underline::after {
	transform: scaleX(0);
}

.slo-reveal.is-in .slo-underline::after {
	animation: slo-underline .7s var(--ease) calc(var(--slo-delay, 0ms) + 300ms) both;
}

@keyframes slo-underline {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ---------- The path to scale ---------- */

/* Intro column stays in view beside the stage cards (two-column layout only).
   "slo-sticky" does the same for any side column. */
@media (min-width: 1025px) {
	.e-con.slo-path__side,
	.e-con.slo-sticky {
		position: sticky;
		top: calc(var(--slo-header-offset, 81px) + 40px);
		align-self: flex-start;
	}
}

.elementor-widget.slo-path__title .elementor-heading-title {
	font-size: clamp(32px, 3.2vw, 48px);
	line-height: 1.06;
	letter-spacing: -.035em;
	font-weight: 800;
}

.elementor-widget.slo-path__lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--muted);
}

/* Cap on the paragraph: Elementor pins widget wrappers to max-width: 100%. */
.elementor-widget.slo-path__lead p {
	max-width: 420px;
	margin: 0;
}

/* ---------- What can you build? ---------- */

.elementor-widget.slo-cap-head__title .elementor-heading-title,
.elementor-widget.slo-om__title .elementor-heading-title {
	font-size: clamp(40px, 4.6vw, 68px);
	line-height: 1;
	letter-spacing: -.04em;
	font-weight: 800;
}

.elementor-widget.slo-cap-head__lede {
	font-size: 19px;
	line-height: 1.55;
	color: var(--muted);
}

.elementor-widget.slo-cap-head__lede p {
	max-width: 430px;
	margin: 0;
}

/* Lede sits at the right edge beside the title on desktop. */
@media (min-width: 1025px) {
	.elementor-widget.slo-cap-head__lede {
		width: auto;
	}
}

/* Close: a bracket merges the two panels into one stem, then the statement.
   The container carries "slo-reveal"; its children stage in rather than the
   whole block rising at once. */
.e-con.slo-cap-close::before {
	content: "";
	position: static; /* Elementor makes .e-con::before an absolute overlay. */
	box-sizing: border-box;
	width: 50%;
	height: 30px;
	border: 1.5px solid rgba(14, 77, 51, .28);
	border-top: 0;
	border-radius: 0 0 16px 16px;
}

.elementor-widget.slo-teamchip {
	margin-top: 30px;
	margin-bottom: 28px;
}

.elementor-widget.slo-teamchip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 1.5px;
	height: 30px;
	margin-left: -.75px;
	background: rgba(14, 77, 51, .28);
}

.elementor-widget.slo-teamchip .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--surface);
	box-shadow: 0 10px 24px -18px rgba(10, 31, 22, .5);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--forest);
}

.elementor-widget.slo-cap-close__state .elementor-heading-title {
	font-size: clamp(34px, 4vw, 60px);
	line-height: 1.04;
	letter-spacing: -.04em;
	font-weight: 800;
	color: var(--ink);
}

.elementor-widget.slo-cap-close__state .elementor-heading-title span {
	color: var(--canopy);
}

.elementor-widget.slo-cap-close__sub {
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--muted);
}

.elementor-widget.slo-cap-close__sub p {
	max-width: 520px;
	margin: 0 auto;
}

.elementor-widget.slo-cap-close__cta {
	margin-top: 30px;
}

.e-con.slo-cap-close.slo-reveal[data-armed]:not(.is-in) {
	opacity: 1;
}

.e-con.slo-cap-close.slo-reveal.is-in {
	animation: none;
}

.e-con.slo-cap-close.slo-reveal[data-armed]:not(.is-in) > .elementor-widget {
	opacity: 0;
}

.e-con.slo-cap-close.slo-reveal[data-armed]:not(.is-in)::before,
.e-con.slo-cap-close.slo-reveal[data-armed]:not(.is-in) > .slo-teamchip::before {
	clip-path: inset(0 50% 0 50%);
}

.e-con.slo-cap-close.slo-reveal.is-in::before {
	animation: slo-cap-grow .6s var(--ease) both;
}

.e-con.slo-cap-close.slo-reveal.is-in > .slo-teamchip::before {
	animation: slo-cap-drop .35s ease 300ms both;
}

.e-con.slo-cap-close.slo-reveal.is-in > .elementor-widget {
	animation: slo-rise var(--motion-dur) var(--ease) var(--slo-delay) both;
}

.e-con.slo-cap-close > .elementor-widget:nth-child(1) { --slo-delay: 400ms; }
.e-con.slo-cap-close > .elementor-widget:nth-child(2) { --slo-delay: 470ms; }
.e-con.slo-cap-close > .elementor-widget:nth-child(3) { --slo-delay: 540ms; }
.e-con.slo-cap-close > .elementor-widget:nth-child(4) { --slo-delay: 610ms; }

@keyframes slo-cap-grow {
	from { clip-path: inset(0 50% 0 50%); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes slo-cap-drop {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* Stacked panels: no bracket to draw, a longer stem instead. */
@media (max-width: 1024px) {
	.e-con.slo-cap-close::before {
		display: none;
	}

	.elementor-widget.slo-teamchip {
		margin-top: 48px;
	}

	.elementor-widget.slo-teamchip::before {
		height: 48px;
	}
}

/* ---------- Our model ---------- */

.elementor-widget.slo-om__intro-sub .elementor-heading-title {
	font-size: clamp(22px, 2.1vw, 30px);
	line-height: 1.25;
	letter-spacing: -.025em;
	font-weight: 700;
	color: var(--forest);
	text-wrap: balance;
}

.elementor-widget.slo-om__lede {
	font-size: 19px;
	line-height: 1.55;
	color: var(--muted);
}

.elementor-widget.slo-om__lede p,
.elementor-widget.slo-om__p p {
	margin: 0;
}

.elementor-widget.slo-om__list-h .elementor-heading-title {
	font-size: clamp(20px, 1.7vw, 24px);
	line-height: 1.2;
	letter-spacing: -.02em;
	font-weight: 800;
	color: var(--ink);
}

.elementor-widget.slo-om__h3 .elementor-heading-title {
	font-size: clamp(32px, 3.2vw, 48px);
	line-height: 1.06;
	letter-spacing: -.035em;
	font-weight: 800;
	color: var(--ink);
	text-wrap: balance;
}

.elementor-widget.slo-om__sub .elementor-heading-title {
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.3;
	letter-spacing: -.02em;
	font-weight: 600;
	color: var(--muted);
	text-wrap: balance;
}

.elementor-widget.slo-om__p {
	font-size: 18px;
	line-height: 1.55;
	color: var(--muted);
}

.elementor-widget.slo-om__p p {
	max-width: 560px;
}

/* On the Forest band. */
.slo-band--manage .elementor-widget.slo-om__h3 .elementor-heading-title {
	color: #FFFFFF;
}

.slo-band--manage .elementor-widget.slo-om__sub .elementor-heading-title {
	color: rgba(255, 255, 255, .82);
}

.slo-band--manage .elementor-widget.slo-om__p {
	color: rgba(255, 255, 255, .72);
}

/* Photo panel with a caption over a darker lower edge (Heading "slo-photo-quote", tag p). */
.e-con.slo-photo-panel--shade::after {
	background: linear-gradient(180deg, rgba(10, 31, 22, .05) 0%, rgba(10, 31, 22, 0) 35%, rgba(10, 31, 22, .8) 100%);
}

.e-con.slo-photo-panel > .elementor-widget.slo-photo-quote {
	position: absolute !important; /* Elementor sets position on widget wrappers. */
	right: 28px;
	bottom: 28px;
	left: 28px;
	z-index: 2;
	width: auto;
	margin: 0;
}

.elementor-widget.slo-photo-quote .elementor-heading-title {
	font-size: clamp(24px, 2.2vw, 32px);
	line-height: 1.15;
	letter-spacing: -.03em;
	font-weight: 800;
	color: #FFFFFF;
}

.elementor-widget.slo-photo-quote .elementor-heading-title::before {
	content: "";
	display: block;
	width: 36px;
	height: 3px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: var(--saffron);
}

.elementor-widget.slo-photo-quote .elementor-heading-title span {
	display: block;
	margin-top: 10px;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.4;
	letter-spacing: -.01em;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
}

.elementor-widget.slo-om__vis-img img {
	object-position: 32% 40%;
}

.elementor-widget.slo-om__gvis-img img {
	object-position: 72% 50%;
}

/* Stacked governance split: copy first, photo after. */
@media (max-width: 1024px) {
	.e-con.slo-om__gvis {
		order: 2;
	}
}

/* ---------- Pricing ---------- */

/* Plain mono kicker, no pill (Heading widget, tag p). */
.elementor-widget.slo-kicker .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--soft);
}

.elementor-widget.slo-pricing__title .elementor-heading-title {
	max-width: 880px;
	margin-inline: auto;
	font-size: clamp(40px, 4.6vw, 68px);
	line-height: 1.04;
	letter-spacing: -.04em;
	font-weight: 800;
	text-wrap: balance;
}

.elementor-widget.slo-pricing__sub {
	font-size: 19px;
	line-height: 1.55;
	color: var(--muted);
}

.elementor-widget.slo-pricing__sub p {
	max-width: 620px;
	margin: 0 auto;
}

.elementor-widget.slo-pricing__foot {
	font-size: 15px;
	line-height: 1.6;
	color: var(--soft);
}

.elementor-widget.slo-pricing__foot p {
	max-width: 760px;
	margin: 0 auto;
}

.elementor-widget.slo-pricing__foot p + p {
	margin-top: 4px;
}

/* Desktop: sub on one line, so the head, cards and foot link fit one screen
   when "Pricing" is reached from the nav. */
@media (min-width: 1025px) {
	.elementor-widget.slo-pricing__sub p {
		max-width: 920px;
	}
}

/* Stacked plans: one centred column. */
@media (max-width: 1024px) {
	.e-con.slo-pricing__plans {
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}
}

/* Text link with a saffron underline (Button widget, classes "slo-link slo-link--accent"). */
.elementor-widget.slo-link--accent .elementor-button {
	min-height: 0;
	padding: 0 0 3px;
	border-bottom: 2px solid var(--saffron);
	border-radius: 0;
	font-size: 17px;
	font-weight: 800;
	text-decoration: none;
	color: var(--ink);
}

.elementor-widget.slo-link--accent .elementor-button:hover {
	color: var(--ink);
}

/* ---------- The commercial question (Forest) ---------- */

.elementor-widget.slo-kicker--accent .elementor-heading-title {
	color: var(--saffron);
}

.elementor-widget.slo-cq__from .elementor-heading-title {
	font-size: clamp(24px, 2.3vw, 34px);
	line-height: 1.2;
	letter-spacing: -.025em;
	font-weight: 700;
	color: rgba(255, 255, 255, .72);
}

.elementor-widget.slo-cq__big .elementor-heading-title {
	font-size: clamp(42px, 4.6vw, 72px);
	line-height: 1;
	letter-spacing: -.045em;
	font-weight: 800;
	color: #FFFFFF;
	text-wrap: pretty;
}

/* Highlighted word: Lagoon with a saffron underline. */
.elementor-widget.slo-cq__big .elementor-heading-title em {
	padding-bottom: .04em;
	font-style: normal;
	color: var(--lagoon);
	background: linear-gradient(var(--saffron), var(--saffron)) left 92% / 100% .09em no-repeat;
}

/* ---------- Final CTA + pilot planner ---------- */

/* Soft Lagoon glow, top right ("slo-glow" container; ::after because
   Elementor owns .e-con::before). */
.e-con.slo-glow {
	position: relative;
	overflow: hidden;
}

.e-con.slo-glow::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -12%;
	z-index: 0;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(127, 205, 182, .28), rgba(127, 205, 182, 0));
	pointer-events: none;
}

.e-con.slo-glow > .e-con-inner,
.e-con.slo-glow > .e-con,
.e-con.slo-glow > .elementor-widget {
	position: relative;
	z-index: 1;
}

.elementor-widget.slo-close__title .elementor-heading-title {
	font-size: clamp(40px, 4.6vw, 68px); /* Matches the other section titles. */
	line-height: 1;
	letter-spacing: -.04em;
	font-weight: 800;
	text-wrap: balance;
}

.elementor-widget.slo-close__note {
	font-size: 16px;
	line-height: 1.55;
	color: var(--muted);
}

.elementor-widget.slo-close__note p {
	max-width: 300px;
	margin: 0;
}

/* Big pill CTA with a saffron arrow disc (Button widget, class "slo-cta-pill"). */
.elementor-widget.slo-cta-pill .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 8px 8px 26px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--forest);
	box-shadow: 0 24px 50px -28px rgba(14, 77, 51, .75);
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: none;
	color: #FFFFFF;
	transition: background .25s ease, box-shadow .25s ease;
}

.elementor-widget.slo-cta-pill .elementor-button-content-wrapper {
	align-items: center;
	gap: 14px;
}

.elementor-widget.slo-cta-pill .elementor-button-content-wrapper::after {
	content: "";
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1F16' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat, var(--saffron);
	transition: transform .3s var(--ease);
}

.elementor-widget.slo-cta-pill .elementor-button:hover {
	background: var(--ink);
	box-shadow: 0 28px 56px -26px rgba(10, 31, 22, .8);
	color: #FFFFFF;
}

.elementor-widget.slo-cta-pill .elementor-button:hover .elementor-button-content-wrapper::after {
	transform: translateX(4px) rotate(90deg);
}

@media (max-width: 640px) {
	.elementor-widget.slo-cta-pill,
	.elementor-widget.slo-cta-pill .elementor-button {
		width: 100%;
	}

	.elementor-widget.slo-cta-pill .elementor-button-content-wrapper {
		justify-content: space-between;
		width: 100%;
	}
}

.elementor-widget.slo-planner__title .elementor-heading-title {
	font-size: clamp(32px, 3.2vw, 48px);
	line-height: 1.06;
	letter-spacing: -.035em;
	font-weight: 800;
	text-wrap: balance;
}

.elementor-widget.slo-planner__intro {
	font-size: 18px;
	line-height: 1.55;
	color: var(--muted);
}

.elementor-widget.slo-planner__intro p {
	margin: 0;
}

/* "What happens next" box (Text Editor, class "slo-next": <b> + <ol>). */
.elementor-widget.slo-next {
	margin-top: 12px;
	padding: 24px;
	border-radius: 18px;
	background: var(--mint-tint);
}

.elementor-widget.slo-next b {
	display: block;
	margin-bottom: 14px;
	font-size: 15px;
	font-weight: 800;
	color: var(--forest);
}

.elementor-widget.slo-next ol {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor-widget.slo-next li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--body);
}

.elementor-widget.slo-next li::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 7px;
	border-radius: 2px;
	background: var(--canopy);
}

/* ---------- Site footer band (itecho-core footer template) ---------- */

.e-con.slo-footer-band {
	position: relative;
	overflow: hidden;
}

.e-con.slo-footer-band::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -12%;
	z-index: 0;
	width: 48%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(127, 205, 182, .18), rgba(127, 205, 182, 0));
	pointer-events: none;
}

.e-con.slo-footer-band > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.elementor-widget.slo-hero__title .elementor-heading-title {
		animation: none;
	}

	body a.slo-btn,
	body a.slo-btn .slo-icon,
	.elementor-widget.slo-btn .elementor-button,
	.elementor-widget.slo-btn .elementor-button-text::after,
	.elementor-widget.slo-link .elementor-button-text::after,
	.elementor-widget.slo-hero__photo img {
		transition: none;
	}

	body a.slo-btn:hover,
	body a.slo-btn:hover .slo-icon,
	.elementor-widget.slo-btn .elementor-button:hover,
	.elementor-widget.slo-btn .elementor-button:hover .elementor-button-text::after,
	.elementor-widget.slo-link .elementor-button:hover .elementor-button-text::after {
		transform: none;
	}

	.e-con.slo-hero__media:hover .elementor-widget.slo-hero__photo img {
		transform: scale(1.02);
	}
}