/* Sketch Landing — shared tokens and primitives.
   Loaded on every landing page. Values come from the main site's design system
   (Sketch Suite module CSS); module stylesheets consume the --lp-* tokens. */

:root {
	--lp-ink: #101326;
	--lp-ink-2: #0b062b;
	--lp-ink-3: #1a1636;
	--lp-indigo: #6552ff;
	--lp-indigo-live: #6647ff;
	--lp-indigo-hover: #5341e6;
	--lp-lilac: #ece9ff;
	--lp-lime: #d4f950;
	--lp-cyan: #24b6ff;
	--lp-magenta: #ff33b9;
	--lp-muted: #6b7280;
	--lp-soft: #98a2b3;
	--lp-line: #e7e6ee;
	--lp-line-2: #e2e0ea;
	--lp-panel: #f4f4f6;
	--lp-card: #f6f7f9;
	--lp-white: #ffffff;
	--lp-radius-sm: 12px;
	--lp-radius: 18px;
	--lp-radius-lg: 24px;
	--lp-max: 1280px;
	--lp-gutter: clamp(20px, 4vw, 48px);
	--lp-pad: clamp(56px, 7vw, 110px);
	--lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--lp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--lp-shadow-btn: 0 8px 22px rgba(0, 0, 0, 0.18);
	--lp-shadow-card: 0 1px 2px rgba(11, 6, 43, 0.04), 0 24px 60px -20px rgba(11, 6, 43, 0.22);
	--lp-bubble: #8b6cff; /* the case-study intro label on the main site */
}

/* ── Section root (full-bleed breakout, as every Suite section does) ── */
.sklp {
	box-sizing: border-box;
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	font-family: var(--sk-font, "Saans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	color: var(--lp-ink);
	-webkit-font-smoothing: antialiased;
}
.sklp *,
.sklp *::before,
.sklp *::after { box-sizing: border-box; }
.sklp img { max-width: 100%; height: auto; }
.sklp :where(p) { margin: 0; }
/* BeTheme styles content lists (.the_content_wrapper ul: disc, 30px indent, grey)
   at class+element specificity, so the reset is scoped to beat it. Lists that
   carry their own spacing use a two-class selector in their module (.sklph .sklph__stats). */
body.sk-lp .sklp ul,
body.sk-lp .sklp ol { margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; list-style: none; color: inherit; }
body.sk-lp .sklp li { color: inherit; }

.sklp__inner {
	width: min(var(--lp-max), 100% - var(--lp-gutter) * 2);
	margin-inline: auto;
}
.sklp--pad { padding: var(--lp-pad) 0; }
.sklp--pad-sm { padding: clamp(40px, 5vw, 72px) 0; }
.sklp--panel { background: var(--lp-panel); }
.sklp--card { background: var(--lp-card); }
.sklp--dark { background: var(--lp-ink-2); color: #fff; }
.sklp--dark .sklp-h2 { color: #fff; }
.sklp--dark .sklp-sub { color: rgba(255, 255, 255, 0.72); }
.sklp--dark .sklp-eyebrow { color: rgba(255, 255, 255, 0.55); }
.sklp--dark { --sk-sweep-fg: #ffffff; }

/* ── Eyebrows ── */
.sklp-eyebrow {
	display: block;
	margin: 0 0 14px;
	font-size: clamp(12px, 0.85vw, 14px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lp-soft);
}
/* Section label — the speech-bubble label the main site's case-study intro
   uses (sketch-suite/modules/case-study, .skcs-intro__pill / __bubble).
   Values are copied from that stylesheet, tail and wobble included, so the two
   read as the same component. The wrapper element carries Sketch Reveal; the
   bubble itself pivots on its tail for the wobble. */
.sklp-pill {
	position: relative;
	display: inline-block;
	margin: 0 0 clamp(22px, 2.2vw, 30px);
	padding: 9px 18px 10px;
	border-radius: 10px;
	background: var(--lp-bubble);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
	white-space: nowrap;
	transform-origin: 50% 100%;
}
.sklp-pill::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 9px solid var(--lp-bubble);
}
/* The shake occupies the first fifth of the cycle; the rest is rest. */
.sklp [data-sk-reveal].sk-in > .sklp-pill {
	animation: sklp-wobble 4s ease-in-out 0.45s infinite;
}
@keyframes sklp-wobble {
	0%   { transform: rotate(0deg); }
	2%   { transform: rotate(-4.5deg); }
	5%   { transform: rotate(3.6deg); }
	8%   { transform: rotate(-2.6deg); }
	11%  { transform: rotate(1.7deg); }
	14%  { transform: rotate(-1deg); }
	17%  { transform: rotate(0.5deg); }
	20%  { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}
.sklp-head--center .sklp-pill { margin-inline: auto; }

/* ── Headings ── */
.sklp-h2 {
	margin: 0 0 16px;
	font-size: clamp(34px, 3.8vw, 58px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--lp-ink);
	text-wrap: balance;
	max-width: 20ch;
}
.sklp-h2--lg {
	font-size: clamp(40px, 5.2vw, 72px);
	letter-spacing: -0.03em;
	font-weight: 700;
}
.sklp-h3 {
	margin: 0 0 8px;
	font-size: clamp(18px, 1.4vw, 22px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--lp-ink);
}
.sklp-sub {
	margin: 0;
	font-size: clamp(16px, 1.25vw, 20px);
	line-height: 1.55;
	color: var(--lp-muted);
	max-width: 56ch;
}
.sklp-body {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.6;
	color: var(--lp-muted);
}
.sklp-head { margin-bottom: clamp(32px, 4vw, 56px); }
.sklp-head--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: end;
}
.sklp-head--center { text-align: center; }
.sklp-head--center .sklp-h2,
.sklp-head--center .sklp-sub { margin-inline: auto; }
@media (max-width: 768px) {
	.sklp-head--split { grid-template-columns: 1fr; align-items: start; }
}
.sklp-em {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 500;
}

/* ── Buttons (match the global header CTA) ── */
.sklp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 28px;
	border-radius: 999px;
	border: 0;
	margin: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.2s var(--lp-spring), box-shadow 0.2s ease, background 0.18s ease, color 0.18s ease, filter 0.18s ease;
}
.sklp-btn:hover { text-decoration: none; }
.sklp-btn--primary { background: var(--lp-indigo-live); color: #fff; box-shadow: 0 14px 30px -18px rgba(101, 82, 255, 0.85); }
.sklp-btn--primary:hover { background: var(--lp-indigo-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--lp-shadow-btn); }
.sklp-btn--dark { background: var(--lp-ink-2); color: #fff; }
.sklp-btn--dark:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--lp-shadow-btn); filter: brightness(1.15); }
.sklp-btn--light { background: #fff; color: var(--lp-ink); }
.sklp-btn--light:hover { color: var(--lp-ink); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
.sklp-btn--secondary { background: #f1f1f4; color: var(--lp-ink); }
.sklp-btn--secondary:hover { background: #e6e6ec; color: var(--lp-ink); transform: translateY(-1px); }
.sklp-btn--ghost {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
}
.sklp-btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65); transform: translateY(-1px); }
.sklp-btn--wide { width: 100%; }
.sklp-btn__arrow { width: 15px; height: 15px; flex: 0 0 auto; transition: transform 0.25s var(--lp-spring); }
.sklp-btn:hover .sklp-btn__arrow { transform: translate(2px, -2px); }
.sklp-btn:focus-visible { outline: 3px solid var(--lp-indigo); outline-offset: 3px; }
.sklp--dark .sklp-btn:focus-visible,
.sklp-btn--light:focus-visible,
.sklp-btn--ghost:focus-visible { outline-color: #fff; }

.sklp-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.18s ease;
}
.sklp-link:hover { color: var(--lp-indigo); }
.sklp-link:focus-visible { outline: 3px solid var(--lp-indigo); outline-offset: 3px; }

/* ── Stars ── */
.sklp-stars { position: relative; display: inline-flex; line-height: 0; color: #f5a623; }
.sklp-stars__bg { display: inline-flex; gap: 2px; opacity: 0.25; }
.sklp-stars__fill { position: absolute; inset: 0 auto 0 0; display: inline-flex; gap: 2px; overflow: hidden; white-space: nowrap; }
.sklp-stars svg { display: block; flex: 0 0 auto; }

/* ── Header / footer on landing pages ── */
/* The burger and drawer only exist for the page's anchor menu (Page settings →
   Header menu). Without one, a campaign page keeps the logo, phone and CTA. */
body.sk-lp:not(.sk-lp-has-nav) .skgh__toggle,
body.sk-lp:not(.sk-lp-has-nav) .skgh__mobile { display: none !important; }
body.sk-lp:not(.sk-lp-has-nav) .skgh__pill--nav { padding-right: 7px; }
@media (max-width: 980px) {
	body.sk-lp .skgh__pill--nav { padding-right: 7px; }
	body.sk-lp .skgh__phone {
		display: inline-flex !important;
		width: 40px;
		height: 40px;
		padding: 0;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
	}
	body.sk-lp .skgh__phone-text { display: none !important; }
	body.sk-lp .skgh__phone-icon { margin: 0; }
}
@media (max-width: 360px) {
	/* Phone icon + CTA + burger have to share 360px; the CTA gives up its arrow. */
	body.sk-lp-has-nav .skgh__actions .skgh__cta-btn .skgh__cta-arrow { display: none; }
	body.sk-lp-has-nav .skgh__actions .skgh__cta-btn { padding-inline: 10px; }
}
/* Confirmation pages only need the logo and the number. */
body.sk-lp-confirmation .skgh__cta-btn { display: none !important; }
/* Right-hand container (phone + CTA): a full pill, like the CTA inside it. The
   phone item's hover fill follows the same radius. The left container keeps the
   Suite's rounded-rectangle shape. */
body.sk-lp .skgh__pill--actions { border-radius: 999px; padding: 7px 7px 7px 12px; }
body.sk-lp .skgh__phone { border-radius: 999px; padding: 6px 16px 6px 14px; }
@media (max-width: 980px) {
	body.sk-lp .skgh__pill--actions { padding: 7px 7px 7px 9px; }
	body.sk-lp .skgh__phone { border-radius: 999px; }
}
@media (max-width: 600px) {
	body.sk-lp .skgh__pill--actions { padding: 5px 6px 5px 7px; }
}

/* BeTheme's a:hover recolours link text (theme link colour, indigo); on the
   header's indigo CTA that made the label vanish on hover. Pin the CTA colours. */
body.sk-lp .skgh__cta-btn--primary:hover,
body.sk-lp .skgh__cta-btn--primary:focus-visible { color: var(--skgh-cta-text, #14161d); }

/* BeTheme also styles every button:hover (.button-animation-slide button:hover,
   off-white fill with grey text) above the Suite's own class rules. The process
   section's step tabs and prev/next arrows are buttons, so restate their
   intended states here at a specificity the theme cannot reach. */
body.sk-lp .skpr__tab:hover,
body.sk-lp .skpr__tab:focus-visible { background: var(--skpr-tab-bg, #20263a); color: var(--skpr-tab-fg, #e7eaf2); border: 0; }
body.sk-lp .skpr__tab.is-active,
body.sk-lp .skpr__tab.is-active:hover { background: var(--skpr-accent, #d4f950); color: var(--skpr-accent-fg, #0b0f1a); }
body.sk-lp .skpr__nav:hover,
body.sk-lp .skpr__nav:focus-visible { background: var(--skpr-accent, #d4f950); color: var(--skpr-accent-fg, #0b0f1a); border-color: var(--skpr-accent, #d4f950); }

/* In-page anchors: scroll-padding-top / scroll-behavior are printed inline on
   <html> by SKLP_Plugin::enqueue(); lp-nav.js supplies --sklp-anchor-offset. */

/* WordPress admin bar. WP pushes the document down with html { margin-top }
   but a sticky/fixed header's `top` is measured from the viewport, so the bar
   would cover it. Offsets follow core's own heights: 32px, and 46px under
   783px. (Core's stylesheet makes the bar position: absolute under 601px, but
   BeTheme keeps it fixed at every width, so the offset stays on phones too.)
   Logged out, body.admin-bar is absent and nothing here applies. */
body.admin-bar { --sklp-admin-bar: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --sklp-admin-bar: 46px; } }

/* Header floats over an inset hero panel on desktop (the home-hero treatment);
   over the dark variants the pills go transparent and the text white. The bar
   sits a little inside the hero's own 10px inset so its ends do not land on the
   panel's edges (26px from the viewport = 16px in from the hero). */
@media (min-width: 769px) {
	body.sk-lp .skgh { --skgh-side-gap: 26px; }
	body.sklph-on-page .skgh {
		position: fixed !important;
		top: var(--skgh-sticky-offset, 10px) !important;
		left: var(--skgh-side-gap, 10px) !important;
		right: var(--skgh-side-gap, 10px) !important;
		margin: 0 !important;
	}
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__pill {
		background: transparent !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		border-color: transparent !important;
		box-shadow: none !important;
	}
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled),
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__phone,
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__phone-status,
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__phone-number,
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__cta-btn--secondary {
		color: #ffffff !important;
	}
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__phone:hover { background: rgba(255, 255, 255, 0.12); }
	/* Menu links follow the same flip; the magic pill goes translucent white so it still shows over the gradient. */
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__nav-link,
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__nav-plus { color: #ffffff !important; }
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__nav-wrap { --skgh-pill-hover: rgba(255, 255, 255, 0.18); }
	body.sklph-dark-on-page .skgh:not(.skgh--scrolled) .skgh__cta-btn--secondary:hover { background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; }
}
/* Sticky (phones) and fixed (desktop over the hero) alike: sit under the admin bar. */
body.admin-bar .skgh { top: calc(var(--skgh-sticky-offset, 10px) + var(--sklp-admin-bar, 0px)) !important; }
@media (max-width: 600px) { body.admin-bar .skgh { top: calc(6px + var(--sklp-admin-bar, 0px)) !important; } }

/* Footer. The legal strip (copyright + socials) is the last thing on the page,
   and Sketch Reveal never observes the bottom 8% of the viewport (its
   rootMargin), so with only 24–40px beneath it the strip could never scroll far
   enough in to be revealed and stayed invisible. Enough clearance below it,
   whatever the viewport height, and it lands like everything else. */
body.sk-lp .skgf .skgf__inner { padding-bottom: max(clamp(40px, 5vw, 72px), 12vh); }

/* Builder / theme resets so full-bleed sections sit flush against each other. */
body.sk-lp .vc_row { margin-left: 0 !important; margin-right: 0 !important; }
body.sk-lp .vc_row[data-vc-full-width] { padding-left: 0 !important; padding-right: 0 !important; }
body.sk-lp .vc_column_container > .vc_column-inner { padding: 0 !important; }
body.sk-lp .wpb_content_element,
body.sk-lp .wpb_wrapper > .vc_row { margin-bottom: 0 !important; }
body.sk-lp #Content,
body.sk-lp .content_wrapper,
body.sk-lp .mfn-page-wrapper,
body.sk-lp .entry-content,
body.sk-lp .the_content_wrapper { padding: 0 !important; margin: 0 !important; }
body.sk-lp .section_wrapper { max-width: none !important; padding: 0 !important; margin: 0 !important; }
/* BeTheme sets the content column to 98%; sections need the full viewport as their containing block. */
body.sk-lp .the_content_wrapper { width: 100% !important; float: none !important; margin: 0 !important; }
body.sk-lp #Content .section { padding: 0 !important; }
body.sk-lp #Wrapper, body.sk-lp #Content { overflow-x: clip; }
body.sk-lp { overflow-x: clip; }

/* Sweep needs the heading colour it inherits; dark sections re-point it. */
.sklp [data-sk-sweep] { --sk-sweep-fg: currentColor; }

/* Descender clipping. Sketch Sweep paints each line's gradient with
   background-clip: text, and a background only exists inside the element's own
   box. The headings run tight (line-height 0.98–1.02) while Saans sits at about
   1.17em ascent+descent, so a descender (g, y, p) hangs 0.08–0.1em below its
   line box and the browser has nothing to paint it with: at 84px that is 8px
   sliced off "your". The line is made an inline-block that owns extra
   padding above and below, pulled back by matching negative margins, so the
   background box now covers the ink while the layout is byte-for-byte the
   same (the margin box is still exactly one line tall). */
.sklp [data-sk-sweep] .sk-sweep__line {
	display: inline-block;
	width: 100%;
	vertical-align: top;
	padding: 0.14em 0.08em 0.24em;
	margin: -0.14em -0.08em -0.24em;
	box-sizing: content-box;
}

@media (prefers-reduced-motion: reduce) {
	.sklp-btn, .sklp-btn__arrow, .sklp-link { transition: none; }
	.sklp [data-sk-reveal].sk-in > .sklp-pill { animation: none; }
}