/* ==========================================================================
 * Extreme Toolkit — base: tokens, reset, type, buttons, logo.
 *
 * Night-service look: ink and navy grounds, full-bleed photography, a wide
 * italic uppercase display face (Mona Sans at 118–125% width) that echoes the
 * logo's lettering, signal green for actions, amber only for extreme
 * cleaning. Buttons and cards carry the logo's slant.
 *
 * Every widget root carries `ex`; rules are written `.ex .x` (0,2,0) so they
 * beat Hello's resets, while Elementor's own control CSS (0,3,0+) still wins.
 * Tokens are prefixed --ex-… (never Elementor's own --display, --gap, …).
 * ======================================================================== */

:root {
	--ex-ink: #070f22;
	--ex-navy-900: #0a1530;
	--ex-navy-800: #0f1d3f;
	--ex-navy-700: #16295a;
	--ex-brand: #244688;
	--ex-paper: #f4f6fa;
	--ex-white: #fff;
	--ex-text: #eef2fa;
	--ex-text-dim: #b3c0dc;
	--ex-ink-text: #0d1830;
	--ex-ink-dim: #46536f;
	--ex-line: rgba(255, 255, 255, .14);
	--ex-line-light: #dde3ee;
	--ex-green: #7ccc45;
	--ex-green-hi: #94dc62;
	--ex-green-ink: #0a2410;
	--ex-green-dark: #2c7a1f;
	--ex-amber: #ffc53d;
	--ex-red: #c62f2a;
	--ex-arc: linear-gradient(90deg, #2a54a6 0%, #3d82d6 35%, #55b4e8 55%, #3fa57e 78%, #72c33c 100%);

	--ex-font: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ex-fs-hero: clamp(46px, 7vw, 112px);
	--ex-fs-h2: clamp(32px, 4.2vw, 60px);
	--ex-fs-h3: clamp(22px, 2vw, 28px);
	--ex-fs-lead: clamp(17px, 1.35vw, 20px);
	--ex-fs-small: 14px;

	--ex-gutter: clamp(16px, 4vw, 56px);
	--ex-sec: clamp(72px, 9vw, 136px);
	--ex-max: 1320px;
	--ex-cut: 22px;
	--ex-hdr: 68px;
	--ex-ease: cubic-bezier(.2, .7, .2, 1);

	/* names the shared form engine, cookie banner and CRM screens read */
	--ink: var(--ex-ink-text);
	--navy: var(--ex-brand);
	--navy-2: #1b3870;
	--navy-soft: #f0f4fb;
	--text: var(--ex-ink-text);
	--muted: var(--ex-ink-dim);
	--line: var(--ex-line-light);
	--white: #fff;
	--silver: #b9c3d6;
	--olive: var(--ex-green-dark);
	--olive-light: #e6f4e3;
	--ok: #1e7a4c;
	--warn: #9a5b00;
	--red: var(--ex-red);
	--green: var(--ex-green-dark);
	--soft: var(--ex-paper);
	--r: 4px;
	--body: var(--ex-font);
	--ex-display: var(--ex-font);
	--mono: var(--ex-font);
	--ease: var(--ex-ease);
}

body.ex-site { margin: 0; background: var(--ex-ink); color: var(--ex-text); font: 400 16px/1.55 var(--ex-font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html:has(body.ex-site) { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 68px; }
body.ex-site .site-main, body.ex-site .page-content, body.ex-site .page-header { margin: 0; padding: 0; max-width: none; }
body.ex-site .page-header .entry-title { display: none; }

.ex { position: relative; font-family: var(--ex-font); color: var(--ex-text); line-height: 1.55; -webkit-font-smoothing: antialiased; }
.ex *, .ex *::before, .ex *::after { box-sizing: border-box; }
.ex img, .ex video { display: block; max-width: 100%; }
.ex img { height: auto; }
.ex a { color: inherit; text-decoration: none; }
.ex h1, .ex h2, .ex h3, .ex h4, .ex p, .ex ul, .ex ol, .ex dl, .ex dd, .ex figure { margin: 0; }
.ex ul, .ex ol { padding: 0; list-style: none; }
.ex button, .ex input, .ex select, .ex textarea { font: inherit; color: inherit; }
.ex svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ex :focus-visible { outline: 2px solid var(--ex-green); outline-offset: 3px; }

.ex .wrap { width: 100%; max-width: calc(var(--ex-max) + var(--ex-gutter) * 2); margin: 0 auto; padding: 0 var(--ex-gutter); }
.ex .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── type ── */
.ex .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ex-green); margin-bottom: 18px; }
.ex .eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--ex-arc); transform: skewX(-24deg); }
.ex .eyebrow--warn { color: var(--ex-amber); }
.ex .h2 { font-size: var(--ex-fs-h2); line-height: .98; font-weight: 850; font-stretch: 118%; font-style: italic; letter-spacing: -.02em; text-transform: uppercase; color: inherit; text-wrap: balance; }
.ex .lead { font-size: var(--ex-fs-lead); line-height: 1.55; color: var(--ex-text-dim); max-width: 56ch; text-wrap: pretty; }
.ex.sec, .ex .sec { padding: var(--ex-sec) 0; }
.ex .sec-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.ex .sec-head .lead { margin-top: 20px; }

/* ── buttons: slanted like the logo's lettering ── */
.ex .btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 26px; font-weight: 700; font-size: 16px; font-stretch: 108%; line-height: 1; border: 0; border-radius: 3px; cursor: pointer; transform: skewX(-10deg); transition: background-color .2s, color .2s, box-shadow .2s; text-decoration: none; white-space: nowrap; }
.ex .btn > span { transform: skewX(10deg); display: inline-flex; align-items: center; gap: 10px; }
.ex .btn svg { width: 18px; height: 18px; }
.ex .btn--go { background: var(--ex-green); color: var(--ex-green-ink); }
.ex .btn--go:hover, .ex .btn--go:focus-visible { background: var(--ex-green-hi); color: var(--ex-green-ink); }
.ex .btn--line { background: transparent; color: var(--ex-text); box-shadow: inset 0 0 0 1.5px var(--ex-line); }
.ex .btn--line:hover, .ex .btn--line:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ex-text); color: var(--ex-text); }
.ex .btn--sm { height: 46px; padding: 0 20px; font-size: 15px; }

/* ── logo ── */
.ex .logo { display: inline-flex; align-items: center; }
.ex .logo img { display: block; width: auto; height: 52px; max-width: none; }

/* Elementor: sections sit edge to edge */
.elementor-widget[class*="elementor-widget-ex_"] > .elementor-widget-container { margin: 0; padding: 0; }
.elementor-widget[class*="elementor-widget-ex_"] { align-self: stretch; width: 100%; }

@media (max-width: 640px) {
	:root { --ex-hdr: 56px; }
	html:has(body.ex-site) { scroll-padding-top: 56px; }
	.ex .logo img { height: 38px; }
}
/* Sky360's floating WhatsApp button: desktop only. Phones have the Call / WhatsApp dock
   (Sky360's own "show on mobile" setting isn't applied, and a server check would break with the page cache). */
@media (max-width: 1024px), (hover: none) {
	.sky-whatsapp-widget { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	html:has(body.ex-site) { scroll-behavior: auto; }
	.ex *, .ex *::before, .ex *::after { animation: none !important; transition: none !important; }
}