/* ============================================================
   STL Blocks — Design Tokens
   Single source of truth for colours, fonts, spacing, motion.
   Ported from handoff/new-web-landing-page/project/stl/colors_and_type.css
   The active theme already enqueues PT Sans + Roboto from Google Fonts,
   so we only declare font stacks here, not @font-face.
   ============================================================ */

:root {
	/* ----- CORE BRAND COLOURS (2017 / 2025 palette) ----- */
	--stl-red:        #E3051C;
	--stl-orange:     #F39200;
	--stl-navy:       #2A314D;
	--stl-burgundy:   #2A314D;       /* alias used by prototype */
	--stl-burgundy-deep: #1a2040;
	--stl-burgundy-warm: #3a4160;
	--stl-blue:       #6b8fd6;
	--stl-cream:      #ffd494;
	--stl-off-white:  #F6F7F8;

	/* Tints (used by stats / quote backgrounds) */
	--stl-orange-tint-1: #F4AC5B;
	--stl-orange-tint-3: #FFD494;
	--stl-red-tint-2:    #FB5B6C;
	--stl-navy-tint-1:   #6472AD;

	/* Neutrals */
	--stl-white:    #FFFFFF;
	--stl-grey-50:  #F6F7F8;
	--stl-grey-100: #EEF0F2;
	--stl-grey-200: #D9DCE1;
	--stl-grey-300: #BDC1CA;
	--stl-grey-400: #9BA0B1;
	--stl-grey-500: #5E6378;
	--stl-grey-700: #3A4160;
	--stl-grey-900: #2A314D;
	--stl-black:    #000000;

	/* Semantic — used by blocks */
	--stl-ink:        #2c2c2c;
	--stl-ink-soft:   #555;
	--stl-ink-muted:  #8a8a8a;
	--stl-hairline:       #ececec;
	--stl-hairline-soft:  #f0f0f0;

	/* Backgrounds shipped as palette presets in blocks */
	--stl-bg-paper:   #ffffff;
	--stl-bg-subtle:  #fafaf9;
	--stl-bg-tint:    #f7f1f2;   /* warm pink tint used on stats band */
	--stl-bg-inverse: var(--stl-burgundy);

	/* ----- TYPE FAMILIES (theme already loads webfonts) ----- */
	--stl-font-heading: "PT Sans", "Helvetica Neue", Arial, sans-serif;
	--stl-font-body:    "Roboto", "Helvetica Neue", Arial, sans-serif;

	/* Block-level shorthand */
	--stl-font:         var(--stl-font-body);

	/* ----- TYPE SCALE ----- */
	--stl-fs-12: 0.75rem;
	--stl-fs-14: 0.875rem;
	--stl-fs-16: 1rem;
	--stl-fs-18: 1.125rem;
	--stl-fs-20: 1.25rem;
	--stl-fs-24: 1.5rem;
	--stl-fs-28: 1.75rem;
	--stl-fs-32: 2rem;
	--stl-fs-40: 2.5rem;
	--stl-fs-48: 3rem;
	--stl-fs-56: 3.5rem;
	--stl-fs-72: 4.5rem;

	--stl-lh-tight:  1.15;
	--stl-lh-snug:   1.3;
	--stl-lh-normal: 1.5;
	--stl-lh-loose:  1.65;

	/* Brand guidelines: PT Sans Bold @ 25pt tracking ≈ 0.04em */
	--stl-tracking-heading: 0.04em;
	--stl-tracking-caps:    0.16em;

	/* ----- SPACING (8px grid) ----- */
	--stl-space-1:  0.25rem;
	--stl-space-2:  0.5rem;
	--stl-space-3:  0.75rem;
	--stl-space-4:  1rem;
	--stl-space-5:  1.5rem;
	--stl-space-6:  2rem;
	--stl-space-7:  2.5rem;
	--stl-space-8:  3rem;
	--stl-space-9:  4rem;
	--stl-space-10: 5rem;
	--stl-space-12: 7.5rem;

	/* Section padding scale (used by every block's wrapper) */
	--stl-section-pad-none: 0;
	--stl-section-pad-sm:   1.5rem;
	--stl-section-pad-md:   2.5rem;
	--stl-section-pad-lg:   4rem;
	--stl-section-pad-xl:   6rem;

	/* ----- ELEVATION ----- */
	--stl-shadow-xs:    0 1px 2px rgba(42,49,77,0.06);
	--stl-shadow-sm:    0 2px 14px rgba(30,8,18,0.04);
	--stl-shadow-md:    0 6px 16px rgba(42,49,77,0.10);
	--stl-shadow-lg:    0 18px 44px rgba(30,8,18,0.11);
	--stl-shadow-xl:    0 22px 48px rgba(30,8,18,0.18);

	/* ----- MOTION ----- */
	--stl-ease:    cubic-bezier(.22,1,.36,1);
	--stl-dur-fast: 200ms;
	--stl-dur-base: 350ms;

	/* ----- LAYOUT ----- */
	--stl-container: 1280px;
	--stl-gutter:    44px;
}

/* ============================================================
   Utility classes — used inside every block.
   ============================================================ */
.stl-container {
	max-width: var(--stl-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--stl-gutter);
	padding-right: var(--stl-gutter);
}

.stl-eyebrow {
	font-family: var(--stl-font-heading);
	font-size: var(--stl-fs-12);
	font-weight: 700;
	letter-spacing: var(--stl-tracking-caps);
	text-transform: uppercase;
	color: var(--stl-orange);
	margin: 0 0 0.875rem;
}

.stl-section-heading {
	font-family: var(--stl-font-heading);
	font-size: clamp(var(--stl-fs-28), 3.2vw, var(--stl-fs-40));
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: var(--stl-lh-tight);
	color: var(--stl-burgundy);
	margin: 0 0 0.875rem;
}

.stl-section-rule {
	width: 48px;
	height: 2px;
	background: var(--stl-orange);
	margin: 0 0 1.125rem;
	border: 0;
	display: block;
}

.stl-section-intro {
	font-family: var(--stl-font-body);
	font-size: var(--stl-fs-16);
	font-weight: 300;
	line-height: var(--stl-lh-loose);
	color: var(--stl-ink-soft);
	max-width: 640px;
	margin: 0;
}

/* CTA arrow link — shared across all "View all" / "Read more" / "Explore" links */
.stl-block .stl-link-arrow {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-family: var(--stl-font-heading);
	font-size: var(--stl-fs-12);
	font-weight: 700;
	letter-spacing: var(--stl-tracking-caps);
	text-transform: uppercase;
	color: var(--stl-burgundy) !important;
	text-decoration: none !important;
	border-bottom: 1.5px solid var(--stl-burgundy) !important;
	padding-bottom: 4px;
	background: none !important;
	transition: color var(--stl-dur-fast) var(--stl-ease),
	            border-color var(--stl-dur-fast) var(--stl-ease),
	            gap var(--stl-dur-fast) var(--stl-ease);
}
.stl-block .stl-link-arrow:hover {
	color: var(--stl-orange) !important;
	border-bottom-color: var(--stl-orange) !important;
	gap: 14px;
}
.stl-block .stl-link-arrow svg {
	flex-shrink: 0;
	stroke: currentColor;
}

/* Solid orange CTA button used by book-a-call and subscribers.
 * Hover: text stays white, background becomes the STL warm gradient
 * (red→orange) per brand guidelines. Heavy use of !important is to
 * defeat theme/Divi rules that aggressively colour <a:hover>. */
.stl-block .stl-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	padding: 13px 22px;
	font-family: var(--stl-font-heading);
	font-size: var(--stl-fs-12);
	font-weight: 700;
	letter-spacing: var(--stl-tracking-caps);
	text-transform: uppercase;
	color: #fff !important;
	background: var(--stl-orange) !important;
	background-image: none !important;
	border: 0 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform var(--stl-dur-fast) var(--stl-ease),
	            background var(--stl-dur-base) var(--stl-ease),
	            background-image var(--stl-dur-base) var(--stl-ease);
}
.stl-block .stl-btn:hover,
.stl-block .stl-btn:focus {
	color: #fff !important;
	transform: translateY(-1px);
	/* STL warm gradient: red → orange (135deg per brand book) */
	background: var(--stl-red) !important;
	background-image: linear-gradient(135deg, var(--stl-red) 0%, var(--stl-orange) 100%) !important;
}
.stl-block .stl-btn svg { stroke: currentColor; }
.stl-block .stl-btn--outline {
	background: transparent !important;
	background-image: none !important;
	color: #fff !important;
	border: 1.5px solid rgba(255,255,255,0.92) !important;
}
.stl-block .stl-btn--outline:hover { background: rgba(255,255,255,0.08) !important; background-image: none !important; }

/* Section padding modifiers (shared API across all blocks).
 * !important so they always win over per-block padding declarations
 * AND any theme/Divi default section padding. */
.stl-block.stl-pt-none { padding-top: var(--stl-section-pad-none) !important; }
.stl-block.stl-pt-sm   { padding-top: var(--stl-section-pad-sm)   !important; }
.stl-block.stl-pt-md   { padding-top: var(--stl-section-pad-md)   !important; }
.stl-block.stl-pt-lg   { padding-top: var(--stl-section-pad-lg)   !important; }
.stl-block.stl-pt-xl   { padding-top: var(--stl-section-pad-xl)   !important; }
.stl-block.stl-pb-none { padding-bottom: var(--stl-section-pad-none) !important; }
.stl-block.stl-pb-sm   { padding-bottom: var(--stl-section-pad-sm)   !important; }
.stl-block.stl-pb-md   { padding-bottom: var(--stl-section-pad-md)   !important; }
.stl-block.stl-pb-lg   { padding-bottom: var(--stl-section-pad-lg)   !important; }
.stl-block.stl-pb-xl   { padding-bottom: var(--stl-section-pad-xl)   !important; }

/* ============================================================
 * Full-bleed support — when a block has alignfull, escape any
 * theme content container and span the full viewport width.
 * Mirrors the technique used by .stl-banner.
 * ============================================================ */
.stl-block.alignfull,
.alignfull > .stl-block,
.wp-block .stl-block.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ============================================================
 * Theme/Divi resets inside our blocks. The active theme adds
 * decorative h2/h3 underlines via ::after, ::before, AND
 * border-bottom rules. Strip them all inside STL blocks.
 * ============================================================ */
.stl-block h1,
.stl-block h2,
.stl-block h3,
.stl-block h4,
.stl-block h5 {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.stl-block h1::after,
.stl-block h2::after,
.stl-block h3::after,
.stl-block h4::after,
.stl-block h5::after,
.stl-block h1::before,
.stl-block h2::before,
.stl-block h3::before,
.stl-block h4::before,
.stl-block h5::before {
	display: none !important;
	content: none !important;
	background: none !important;
	border: 0 !important;
}

/* Reset theme list bullets inside our pillar/links lists */
.stl-block ul { list-style: none; padding: 0; margin: 0; }
.stl-block li { list-style: none; }
.stl-block li::before, .stl-block li::after { display: none !important; content: none !important; }

@media (max-width: 768px) {
	:root {
		--stl-gutter: 24px;
	}
}

/* Shared section wrapper — every block uses this */
.stl-block {
	font-family: var(--stl-font-body);
	color: var(--stl-ink);
	box-sizing: border-box;
	width: 100%;
}
.stl-block * { box-sizing: border-box; }

.stl-block__heading-stack {
	margin-bottom: 2rem;
}

/* =================================================================
   8. INSIGHTS PACK PROMO
   ================================================================= */
.stl-block--insights-pack {
	background: #fff;
	padding-left: var(--stl-gutter);
	padding-right: var(--stl-gutter);
}
.stl-block--insights-pack__shell {
	max-width: var(--stl-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
	border-top: 4px solid var(--stl-navy);
	box-shadow: 0 16px 38px rgba(42,49,77,0.10);
	background: #fff;
}
.stl-block--insights-pack--image-left .stl-block--insights-pack__shell {
	grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1fr);
}
.stl-block--insights-pack__message {
	background: var(--stl-burgundy-deep);
	color: #fff;
	padding: clamp(2.25rem, 5vw, 4.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 520px;
}
.stl-block--insights-pack--image-left .stl-block--insights-pack__message {
	order: 2;
}
.stl-block--insights-pack--image-left .stl-block--insights-pack__pack {
	order: 1;
}
.stl-block--insights-pack__message-inner {
	width: 100%;
	max-width: 980px;
	margin: 0;
}
.stl-block--insights-pack__eyebrow {
	font-family: var(--stl-font-heading);
	font-size: var(--stl-fs-12);
	font-weight: 700;
	letter-spacing: var(--stl-tracking-caps);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--stl-insights-accent, var(--stl-orange));
	margin: 0 0 1.5rem;
}
.stl-block--insights-pack__title {
	font-family: var(--stl-font-heading);
	font-size: var(--stl-insights-title-size, clamp(2.25rem, 4.2vw, 3.875rem));
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.18;
	color: #fff !important;
	margin: 0;
}
.stl-block--insights-pack__highlights {
	font-family: var(--stl-font-heading);
	font-size: var(--stl-insights-bullet-size, clamp(1.375rem, 2.15vw, 2rem));
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.48;
	color: #fff !important;
	list-style: none;
	margin: 3.25rem 0 0;
	padding: 0;
	max-width: 980px;
}
.stl-block--insights-pack__highlights li {
	display: flex !important;
	gap: 0.32em;
	align-items: start;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1rem;
	padding-left: 0;
	color: #fff !important;
	opacity: 1 !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	writing-mode: horizontal-tb !important;
}
.stl-block--insights-pack__dash {
	flex: 0 0 auto;
	color: #fff !important;
	opacity: 1 !important;
}
.stl-block--insights-pack__highlight-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	color: #fff !important;
	opacity: 1 !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}
.stl-block--insights-pack__dark-image-wrap {
	width: min(100%, 520px);
	margin-top: 2.75rem;
	padding: 1rem;
	background: rgba(255,255,255,0.08);
	box-shadow: 0 14px 36px rgba(0,0,0,0.18);
}
.stl-block--insights-pack__dark-image {
	display: block;
	width: 100%;
	height: auto;
}
.stl-block--insights-pack__pack {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 4vw, 3.5rem);
	gap: 2rem;
	background:
		linear-gradient(180deg, rgba(246,247,248,0.9) 0%, rgba(255,255,255,0) 42%),
		#fff;
}
.stl-block--insights-pack__image-wrap {
	width: min(100%, 520px);
	margin: 0 auto;
	padding: 1.25rem;
	background: #fff;
	box-shadow: 0 12px 34px rgba(42,49,77,0.12);
}
.stl-block--insights-pack__image {
	display: block;
	width: 100%;
	height: auto;
}
.stl-block--insights-pack__content {
	max-width: 560px;
	margin: 0 auto;
	width: 100%;
}
.stl-block--insights-pack__intro {
	font-family: var(--stl-font-body);
	font-size: clamp(1.125rem, 1.5vw, 1.5rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--stl-navy);
	margin: 0 0 1.5rem;
}
.stl-block--insights-pack__details {
	font-family: var(--stl-font-body);
	font-size: clamp(1.0625rem, 1.35vw, 1.375rem);
	font-weight: 300;
	line-height: 1.55;
	color: var(--stl-navy);
	margin: 0;
	padding-left: 1.35em;
}
.stl-block--insights-pack__details li {
	margin: 0 0 0.55rem;
	padding-left: 0.15em;
}
.stl-block--insights-pack__details li::marker {
	color: var(--stl-navy);
}
.stl-block--insights-pack__cta {
	margin-top: 2rem;
	background: var(--stl-insights-accent, var(--stl-orange)) !important;
	border-color: var(--stl-insights-accent, var(--stl-orange)) !important;
	color: #fff !important;
}
.stl-block--insights-pack__cta:hover,
.stl-block--insights-pack__cta:focus {
	background: var(--stl-navy) !important;
	border-color: var(--stl-navy) !important;
	color: #fff !important;
}
.stl-block--insights-pack__form {
	margin-top: 2rem;
	font-family: var(--stl-font-body);
	color: var(--stl-navy);
}
.stl-block--insights-pack__form iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}
.stl-block--insights-pack__form form {
	display: grid;
	gap: 0.875rem;
}
.stl-block--insights-pack__form label {
	display: block;
	font-family: var(--stl-font-heading);
	font-size: var(--stl-fs-14);
	font-weight: 700;
	color: var(--stl-navy);
	margin-bottom: 0.35rem;
}
.stl-block--insights-pack__form input,
.stl-block--insights-pack__form select,
.stl-block--insights-pack__form textarea {
	width: 100%;
	border: 1px solid var(--stl-grey-200);
	border-radius: 0;
	padding: 0.875rem 1rem;
	font-family: var(--stl-font-body);
	font-size: var(--stl-fs-16);
	color: var(--stl-navy);
	background: #fff;
}
.stl-block--insights-pack__form button,
.stl-block--insights-pack__form input[type="submit"] {
	justify-self: start;
	border: 1px solid var(--stl-insights-accent, var(--stl-orange));
	background: var(--stl-insights-accent, var(--stl-orange));
	color: #fff;
	padding: 0.95rem 1.4rem;
	font-family: var(--stl-font-heading);
	font-size: var(--stl-fs-12);
	font-weight: 700;
	letter-spacing: var(--stl-tracking-caps);
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--stl-dur-fast) var(--stl-ease), border-color var(--stl-dur-fast) var(--stl-ease);
}
.stl-block--insights-pack__form button:hover,
.stl-block--insights-pack__form input[type="submit"]:hover {
	background: var(--stl-navy);
	border-color: var(--stl-navy);
}

@media (max-width: 980px) {
	.stl-block--insights-pack__shell {
		grid-template-columns: 1fr;
	}
	.stl-block--insights-pack__message {
		min-height: 0;
	}
	.stl-block--insights-pack--image-left .stl-block--insights-pack__message,
	.stl-block--insights-pack--image-left .stl-block--insights-pack__pack {
		order: initial;
	}
}

@media (max-width: 768px) {
	.stl-block--insights-pack {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.stl-block--insights-pack__message,
	.stl-block--insights-pack__pack {
		padding: 2rem 1.5rem;
	}
	.stl-block--insights-pack__highlights {
		margin-top: 2rem;
	}
	.stl-block--insights-pack__title {
		font-size: min(var(--stl-insights-title-size, 62px), 38px);
	}
	.stl-block--insights-pack__highlights {
		font-size: min(var(--stl-insights-bullet-size, 32px), 22px);
	}
}