/* =========================================================================
   Spectrum 2020 — brand stylesheet
   All brand CSS lives here (per-element Custom CSS is an Elementor Pro
   feature). Styles the brand classes applied via Elementor's CSS Classes
   field, plus the custom widgets. Mobile-first; scale up with min-width
   media queries.
   ========================================================================= */

:root {
	/* Palette */
	--navy: #0A3777;
	--navy-deep: #04204D;
	--blue: #14629C;
	--green: #2E8B46;        /* brand Growth Green — accents, rules */
	--green-cta: #237A3B;    /* darker green for button fills so white text clears WCAG AA (4.5:1) */
	--paper: #F6F8FB;
	--surface: #FFFFFF;
	--line: #E4E9F0;
	--line-strong: #CBD4E0;
	--slate: #59657A;
	--ink: #19212F;

	/* The signature gradient (nine stops) */
	--spectrum: linear-gradient(90deg,#5E2C87,#3C3188,#14629C,#157E90,#2E8B46,#8DBB3E,#F4B60C,#FA6918,#F34224);

	/* Type */
	--font-display: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

	/* Shape + depth */
	--radius: 8px;
	--radius-lg: 12px;
	--shadow: 0 1px 2px rgba(9,45,95,.06), 0 8px 24px rgba(9,45,95,.06);
	--shadow-lift: 0 2px 6px rgba(9,45,95,.08), 0 18px 40px rgba(9,45,95,.10);

	/* Rhythm */
	--topbar-h: 6px;
}

/* -------------------------------------------------------------------------
   Base guards + typographic defaults
   ------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }

body {
	font-family: var(--font-body);
	color: var(--ink);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Let flex/grid children shrink instead of forcing horizontal scroll. */
.sp-card, .sp-testimonial, .sp-insight, .sp-form__row { min-width: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--navy);
	line-height: 1.12;
	letter-spacing: -0.01em;
	font-weight: 800;
}

/* Body links: spectrum blue, underline on hover only. Never rainbow. */
.sp-prose a, .entry-content a, .sp-insight__excerpt a {
	color: var(--blue);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}
.sp-prose a:hover, .entry-content a:hover { border-bottom-color: currentColor; }

/* -------------------------------------------------------------------------
   Top spectrum bar (injected at wp_body_open on every page)
   ------------------------------------------------------------------------- */
.sp-topbar {
	height: var(--topbar-h);
	width: 100%;
	background: var(--spectrum);
	position: relative;
	z-index: 100000;
}

/* -------------------------------------------------------------------------
   Eyebrow — uppercase label with a small spectrum gradient tick before it
   ------------------------------------------------------------------------- */
.sp-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--slate);
	margin: 0 0 16px;
}
.sp-eyebrow::before {
	content: "";
	width: 26px;
	height: 4px;
	border-radius: 2px;
	background: var(--spectrum);
	flex: 0 0 auto;
}
/* On navy surfaces the eyebrow text lightens; the tick stays vivid. */
.sp-hero .sp-eyebrow,
.sp-cta-band .sp-eyebrow,
.sp-on-navy .sp-eyebrow { color: rgba(255,255,255,.72); }

/* Center variant (tick sits above the label) */
.sp-eyebrow--center { flex-direction: column; gap: 12px; text-align: center; }

/* -------------------------------------------------------------------------
   Spectrum rule — gradient rule to open a section or underline a hero line
   ------------------------------------------------------------------------- */
.sp-rule-wrap { display: flex; }
.sp-rule {
	display: block;
	width: 72px;
	height: 5px;
	border-radius: 3px;
	background: var(--spectrum);
}

/* -------------------------------------------------------------------------
   Hero panel — navy, with a quiet cropped spectrum ring behind content
   ------------------------------------------------------------------------- */
.sp-hero {
	position: relative;
	background: var(--navy-deep);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.sp-hero h1, .sp-hero h2, .sp-hero h3 { color: #fff; }
/* Readable body text on navy */
.sp-hero p, .sp-on-navy p { color: rgba(255,255,255,.82); }

/* -------------------------------------------------------------------------
   Card — white surface, hairline border, restrained shadow
   ------------------------------------------------------------------------- */
.sp-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 28px;
}
/* Subtle hover lift for interactive cards */
.sp-card--lift { transition: transform .2s ease, box-shadow .2s ease; }
.sp-card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* -------------------------------------------------------------------------
   CTA band — full-width navy call-to-action
   ------------------------------------------------------------------------- */
.sp-cta-band {
	background: var(--navy-deep);
	color: #fff;
}
.sp-cta-band h1, .sp-cta-band h2, .sp-cta-band h3 { color: #fff; }
.sp-cta-band p { color: rgba(255,255,255,.82); }

/* -------------------------------------------------------------------------
   Buttons — primary navy, secondary outlined, CTA green (highest intent).
   Used by the custom widgets; native Elementor buttons are styled via the
   editor but can also carry these classes.
   ------------------------------------------------------------------------- */
.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	padding: 15px 26px;
	border-radius: var(--radius);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.sp-btn--primary { background: var(--navy); color: #fff; }
.sp-btn--primary:hover { background: #0d3f88; box-shadow: var(--shadow); }

.sp-btn--secondary { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.sp-btn--secondary:hover { border-color: var(--navy); background: rgba(10,55,119,.04); }
/* On navy backgrounds the outline button reverses. */
.sp-hero .sp-btn--secondary, .sp-cta-band .sp-btn--secondary, .sp-on-navy .sp-btn--secondary {
	color: #fff; border-color: rgba(255,255,255,.4);
}
.sp-hero .sp-btn--secondary:hover, .sp-cta-band .sp-btn--secondary:hover, .sp-on-navy .sp-btn--secondary:hover {
	border-color: #fff; background: rgba(255,255,255,.08);
}

.sp-btn--cta { background: var(--green-cta); color: #fff; }
.sp-btn--cta:hover { background: #1f6e35; box-shadow: 0 8px 20px rgba(35,122,59,.28); }

/* -------------------------------------------------------------------------
   Editorial prose (Insights body, About bio, pull quotes)
   ------------------------------------------------------------------------- */
.sp-prose { font-size: 18px; line-height: 1.7; color: var(--ink); }
.sp-prose p { margin: 0 0 1.15em; }
.sp-prose h3 {
	font-family: var(--font-display);
	font-size: 22px;
	margin: 1.8em 0 .5em;
	color: var(--navy);
}
/* Pull quote / editorial statement in Source Serif. The kit body font is
   applied to text-editor paragraphs with a specificity a single class cannot
   beat on font-family, so enforce the serif on the class and its inner <p>. */
.sp-pullquote, .sp-pullquote p {
	font-family: var(--font-serif) !important;
	font-style: italic;
}
.sp-pullquote {
	font-size: clamp(22px, 4vw, 30px);
	line-height: 1.4;
	color: var(--navy);
	border-left: 4px solid transparent;
	border-image: var(--spectrum) 1;
	padding-left: 24px;
	margin: 8px 0;
}
.sp-pullquote p { margin: 0; font-size: inherit; color: inherit; }

/* -------------------------------------------------------------------------
   Testimonials widget
   ------------------------------------------------------------------------- */
.sp-testimonials {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.sp-testimonial { display: flex; flex-direction: column; gap: 16px; }
.sp-testimonial__mark {
	width: 40px; height: 5px; border-radius: 3px;
	background: var(--spectrum);
}
.sp-testimonial__quote {
	font-family: var(--font-serif) !important;
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0;
}
.sp-testimonial__quote::before { content: "\201C"; }
.sp-testimonial__quote::after { content: "\201D"; }
.sp-testimonial__cite { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.sp-testimonial__author { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 16px; }
.sp-testimonial__role { color: var(--slate); font-size: 14px; }

/* -------------------------------------------------------------------------
   Insights widget (article cards)
   ------------------------------------------------------------------------- */
.sp-insights {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.sp-insight { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sp-insight__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); }
.sp-insight__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sp-insight:hover .sp-insight__media img { transform: scale(1.03); }
.sp-insight__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sp-insight__eyebrow { margin: 0; }
.sp-insight__title { font-size: 21px; line-height: 1.25; margin: 0; }
.sp-insight__title a { color: var(--navy); text-decoration: none; }
.sp-insight__title a:hover { color: var(--blue); }
.sp-insight__excerpt { color: var(--slate); font-size: 16px; margin: 0; }
.sp-insight__more {
	margin-top: auto;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--blue);
	text-decoration: none;
}
.sp-insight__more:hover { color: var(--navy); }

/* -------------------------------------------------------------------------
   Contact form widget
   ------------------------------------------------------------------------- */
.sp-form { display: flex; flex-direction: column; gap: 18px; }
.sp-form__row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.sp-field { display: flex; flex-direction: column; gap: 6px; }
.sp-field__label { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--navy); }
.sp-field input, .sp-field textarea {
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: var(--surface);
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 12px 14px;
	width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-field input:focus, .sp-field textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(20,98,156,.15);
}
.sp-field.is-invalid input, .sp-field.is-invalid textarea { border-color: #C0392B; }
.sp-field__error { color: #C0392B; font-size: 13px; min-height: 0; }
.sp-form__actions { margin-top: 4px; }
.sp-form__status { margin: 4px 0 0; font-size: 15px; }
.sp-form__status.is-success { color: var(--green); font-weight: 600; }
.sp-form__status.is-error { color: #C0392B; }

/* Honeypot: keep in the layout flow but out of sight and off the a11y tree. */
.sp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Editor-only empty-state notes for the dynamic widgets */
.sp-empty { color: var(--slate); font-style: italic; }

/* -------------------------------------------------------------------------
   Footer helpers (UAE footer carries these classes)
   ------------------------------------------------------------------------- */
.sp-footer-rule { height: 5px; width: 100%; background: var(--spectrum); }

/* -------------------------------------------------------------------------
   Motion — gentle, restrained, and disabled under reduced-motion
   ------------------------------------------------------------------------- */
@keyframes spReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.sp-reveal { opacity: 1; animation: spReveal .7s ease both; } /* starts & ends visible */

@media (prefers-reduced-motion: reduce) {
	.sp-reveal { animation: none; }
	.sp-btn:hover, .sp-card--lift:hover { transform: none; }
	.sp-insight:hover .sp-insight__media img { transform: none; }
	* { scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------------------
   Responsive — scale up from the mobile-first base
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
	body { font-size: 18px; }
	.sp-card { padding: 32px; }
	.sp-form__row { grid-template-columns: 1fr 1fr; }
	.sp-testimonials { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.sp-insights { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
	.sp-testimonials { grid-template-columns: repeat(3, 1fr); }
	.sp-insights { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   Header (Spectrum Header widget inside the UAE header template)
   Mobile-first: logo + hamburger; nav is a slide-down panel. Scales to a
   horizontal bar on desktop.
   ------------------------------------------------------------------------- */
.sp-wordmark {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	color: var(--navy);
	letter-spacing: -0.01em;
	line-height: 1;
}
.sp-wordmark span { color: var(--blue); }

.sp-header { background: var(--surface); width: 100%; }
.sp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 20px;
	position: relative;
}
.sp-header__logo { display: inline-flex; align-items: center; text-decoration: none; }
.sp-header__logo-img { display: block; height: 40px; width: auto; max-width: 220px; }

/* Hamburger toggle */
.sp-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	padding: 0;
}
.sp-header__toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sp-header__toggle-box { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.sp-header__toggle-bar { display: block; height: 2px; width: 100%; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.sp-header[data-open="true"] .sp-header__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sp-header[data-open="true"] .sp-header__toggle-bar:nth-child(2) { opacity: 0; }
.sp-header[data-open="true"] .sp-header__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Nav panel (mobile) */
.sp-header__nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: var(--shadow);
	padding: 12px 20px 20px;
	display: none;
	flex-direction: column;
	gap: 4px;
	z-index: 90;
}
.sp-header[data-open="true"] .sp-header__nav { display: flex; }
.sp-header__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sp-header__menu li { margin: 0; }
.sp-header__menu a {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--navy);
	text-decoration: none;
	padding: 12px 4px;
	border-bottom: 1px solid var(--line);
}
.sp-header__menu a:hover, .sp-header__menu .current-menu-item > a { color: var(--blue); }
.sp-header__cta { margin-top: 14px; width: 100%; }

/* -------------------------------------------------------------------------
   Footer (Spectrum Footer widget inside the UAE footer template)
   ------------------------------------------------------------------------- */
.sp-footer { background: var(--navy-deep); color: rgba(255,255,255,.82); position: relative; }
/* Force footer links light on navy: beats the kit's blue link colour without
   touching the footer CTA button. */
.sp-footer a:not(.sp-btn):not(.elementor-button) { color: rgba(255,255,255,.85); }
.sp-footer a:not(.sp-btn):not(.elementor-button):hover { color: #fff; }
.sp-footer .sp-footer-rule { position: absolute; top: 0; left: 0; }
.sp-wordmark--footer { color: #fff; font-size: 24px; }
.sp-wordmark--footer span { color: #8DBB3E; }
.sp-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 20px 32px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}
.sp-footer__line { color: rgba(255,255,255,.72); font-size: 16px; margin: 14px 0 0; max-width: 34ch; }
.sp-footer__heading {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
	margin: 0 0 14px;
}
.sp-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-footer__menu a, .sp-footer__contact a {
	color: rgba(255,255,255,.85);
	text-decoration: none;
	font-size: 16px;
	border-bottom: 1px solid transparent;
}
.sp-footer__menu a:hover, .sp-footer__contact a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.sp-footer__contact p { margin: 0 0 10px; }
.sp-footer__mailing { color: rgba(255,255,255,.6); }
.sp-footer__cta-wrap { margin: 18px 0 0; }
.sp-footer__cta { display: inline-flex; }
.sp-footer__social { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 0 0; padding: 0; }
.sp-footer__social a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; font-weight: 600; }
.sp-footer__social a:hover { color: #fff; }
.sp-footer__legal {
	border-top: 1px solid rgba(255,255,255,.12);
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-size: 14px;
	color: rgba(255,255,255,.55);
}

@media (min-width: 900px) {
	/* Header becomes a horizontal bar; hamburger hidden. */
	.sp-header__toggle { display: none; }
	.sp-header__nav {
		position: static;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 28px;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
	}
	.sp-header__menu { flex-direction: row; gap: 26px; }
	.sp-header__menu a { padding: 6px 0; border-bottom: 2px solid transparent; font-size: 16px; }
	.sp-header__menu a:hover, .sp-header__menu .current-menu-item > a { border-bottom-color: var(--blue); color: var(--navy); }
	.sp-header__cta { margin-top: 0; width: auto; }

	.sp-footer__inner { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; padding-top: 64px; }
}

/* The header manages its own stickiness, scroll shadow, and admin-bar offset
   inside the header template (.sp-hd), so no #masthead sticky rules here — a
   second sticky wrapper would double the admin-bar offset. */

/* =========================================================================
   INSIGHTS — single article + archive (rendered by spectrum-core templates)
   ========================================================================= */
.sp-single { background: var(--surface); }

/* Insight card: intentional accent when a post has no featured image */
.sp-insight__accent { display: block; height: 6px; width: 100%; background: var(--spectrum); }

/* --- Single article --- */
.sp-article { max-width: 1000px; margin: 0 auto; padding: 64px 20px 0; }
.sp-article__head { max-width: 720px; margin: 0 auto; }
.sp-article__title { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; margin: 14px 0 0; color: var(--navy); }
.sp-article__meta { color: var(--slate); font-size: 15px; font-family: var(--font-body); margin: 16px 0 0; }
.sp-article__media { margin: 40px 0 0; }
.sp-article__media img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; }
.sp-article__body { font-family: var(--font-serif); font-size: 19px; line-height: 1.75; color: var(--ink); max-width: 720px; margin: 40px auto 0; }
.sp-article__body p { margin: 0 0 1.3em; }
.sp-article__body h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; color: var(--navy); margin: 1.9em 0 .5em; }
.sp-article__body a { color: var(--blue); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Share row */
.sp-share { max-width: 720px; margin: 40px auto 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
.sp-share__label { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--slate); }
.sp-share a, .sp-share button {
	font-family: var(--font-body); font-size: 14px; font-weight: 600;
	color: var(--navy); background: var(--paper); border: 1px solid var(--line);
	border-radius: 999px; padding: 8px 16px; text-decoration: none; cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.sp-share a:hover, .sp-share button:hover { border-color: var(--navy); color: var(--blue); }

/* More insights */
.sp-more { margin-top: 72px; background: var(--paper); border-top: 1px solid var(--line); }
.sp-more__inner { max-width: 1200px; margin: 0 auto; padding: 64px 20px; }
.sp-more .sp-insights { margin-top: 20px; }

/* Article closing CTA (plugin template, standalone .sp-btn) */
.sp-article-cta { background: var(--navy-deep); color: #fff; text-align: center; }
.sp-article-cta__inner { max-width: 760px; margin: 0 auto; padding: 72px 20px; }
.sp-article-cta h2 { color: #fff !important; }
.sp-article-cta p { color: rgba(255,255,255,.82); margin: 12px 0 24px; }

/* --- Insights archive / index --- */
.sp-archive-hero { background: var(--navy-deep); color: #fff; }
.sp-archive-hero__inner { max-width: 1200px; margin: 0 auto; padding: 88px 20px; }
.sp-archive-hero h1 { color: #fff !important; font-size: clamp(34px, 6vw, 56px); margin: 10px 0 0; }
.sp-archive-hero__sub { color: rgba(255,255,255,.9); font-size: 20px; margin: 16px 0 0; font-family: var(--font-serif); font-style: italic; }
.sp-archive-hero__intro { color: rgba(255,255,255,.78); font-size: 18px; margin: 14px 0 0; max-width: 620px; }
.sp-archive-body { max-width: 1200px; margin: 0 auto; padding: 64px 20px 88px; }
.sp-pagination { margin-top: 48px; display: flex; gap: 8px; flex-wrap: wrap; }
.sp-pagination .page-numbers {
	display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center;
	padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius);
	color: var(--navy); text-decoration: none; font-family: var(--font-display); font-weight: 600;
}
.sp-pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.sp-pagination a.page-numbers:hover { border-color: var(--navy); }

@media (max-width: 600px) {
	.sp-article { padding-top: 44px; }
	.sp-more__inner { padding: 48px 20px; }
}

/* =========================================================================
   404 + SEARCH (spectrum-core templates)
   ========================================================================= */
.sp-404 { background: var(--navy-deep); color: #fff; }
.sp-404__inner { max-width: 720px; margin: 0 auto; padding: 104px 20px; text-align: center; }
.sp-404 .sp-eyebrow { justify-content: center; }
.sp-404 h1 { color: #fff !important; font-size: clamp(30px, 6vw, 52px); margin: 10px 0 0; }
.sp-404 p { color: rgba(255,255,255,.82); font-size: 18px; margin: 16px auto 30px; max-width: 46ch; }
.sp-404__links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Branded search form */
.sp-searchform { display: flex; gap: 10px; max-width: 540px; }
.sp-searchform input[type="search"] {
	flex: 1; min-width: 0; font-family: var(--font-body); font-size: 16px; color: var(--ink);
	padding: 13px 15px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
}
.sp-searchform input[type="search"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,98,156,.15); }

/* Search results */
.sp-search-head { max-width: 820px; margin: 0 auto; padding: 72px 20px 0; }
.sp-search-head h1 { font-size: clamp(28px, 5vw, 42px); margin: 8px 0 20px; }
.sp-search-body { max-width: 820px; margin: 0 auto; padding: 28px 20px 88px; }
.sp-result { padding: 24px 0; border-top: 1px solid var(--line); }
.sp-result:first-child { border-top: none; }
.sp-result__title { font-family: var(--font-display); font-size: 22px; line-height: 1.25; margin: 6px 0; }
.sp-result__title a { color: var(--navy); text-decoration: none; }
.sp-result__title a:hover { color: var(--blue); }
.sp-result__excerpt { color: var(--slate); font-size: 16px; margin: 4px 0 0; }
.sp-search-empty { max-width: 820px; margin: 0 auto; padding: 8px 20px 40px; }
.sp-search-empty p { color: var(--slate); font-size: 18px; }

/* Skip-link target: clear the sticky header when focused, no visual footprint */
#content, .sp-skip-target { scroll-margin-top: 90px; }
.sp-skip-target { display: block; height: 0; }

/* Skip link (accessibility) — visible on focus */
.sp-skip-link {
	position: absolute;
	left: 12px; top: -60px;
	background: var(--navy);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--radius);
	z-index: 100001;
	transition: top .15s ease;
}
.sp-skip-link:focus { top: 12px; }

/* =========================================================================
   PAGE BUILDING — helpers for Elementor pages built with native widgets.
   Applied via the CSS Classes (Advanced) field on containers/widgets.
   ========================================================================= */

/* Native Elementor button, dressed in the brand. Class goes on the button
   widget; we style its inner .elementor-button so it beats Elementor defaults. */
.sp-el-btn .elementor-button {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	padding: 15px 26px;
	border-radius: var(--radius);
	border: 1.5px solid transparent;
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sp-el-btn .elementor-button:hover { transform: translateY(-1px); }
.sp-el-btn .elementor-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* Prefix the widget class (.elementor-widget-button.sp-el-btn--x, specificity
   0,3,0) so these beat the kit's per-widget rule that paints every button with
   the Accent colour (.elementor-widget-button .elementor-button, 0,2,0). */
.elementor-widget-button.sp-el-btn--primary .elementor-button { background-color: var(--navy); color: #fff; }
.elementor-widget-button.sp-el-btn--primary .elementor-button:hover { background-color: #0d3f88; box-shadow: var(--shadow); }
.elementor-widget-button.sp-el-btn--secondary .elementor-button { background-color: transparent; color: var(--navy); border-color: var(--line-strong); }
.elementor-widget-button.sp-el-btn--secondary .elementor-button:hover { border-color: var(--navy); background-color: rgba(10,55,119,.04); }
.elementor-widget-button.sp-el-btn--cta .elementor-button { background-color: var(--green-cta); color: #fff; }
.elementor-widget-button.sp-el-btn--cta .elementor-button:hover { background-color: #1f6e35; box-shadow: 0 8px 20px rgba(35,122,59,.28); }
/* Reversed outline button on navy sections */
.sp-on-navy .sp-el-btn--secondary .elementor-button,
.sp-hero .sp-el-btn--secondary .elementor-button,
.sp-cta-band .sp-el-btn--secondary .elementor-button {
	color: #fff; border-color: rgba(255,255,255,.45);
}
.sp-on-navy .sp-el-btn--secondary .elementor-button:hover,
.sp-hero .sp-el-btn--secondary .elementor-button:hover,
.sp-cta-band .sp-el-btn--secondary .elementor-button:hover {
	border-color: #fff; background-color: rgba(255,255,255,.08);
}

/* Each button sits in a wrapper container that carries Elementor's default
   ~10px padding, nudging it out of alignment with the section content. Zero it
   so buttons line up with the eyebrow/heading/body left edge. Handles both a
   full-width row (button is a direct child) and a boxed row (button nested in
   .e-con-inner). Then centre the button inside CTA bands, where the heading and
   text are already centred. */
.e-con:has(> .elementor-widget-button),
.e-con:has(> .e-con-inner > .elementor-widget-button) { padding: 0; }
.sp-cta-band .e-con:has(> .elementor-widget-button) { justify-content: center; }
.sp-cta-band .e-con:has(> .e-con-inner > .elementor-widget-button) > .e-con-inner { justify-content: center; }

/* Text-block width + centering helpers */
.sp-measure { max-width: 660px; }
.sp-measure-wide { max-width: 860px; }
.sp-center { margin-left: auto; margin-right: auto; }

/* Eyebrow works whether the class is on the widget wrapper or a <p> inside it */
.sp-eyebrow p { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-transform: inherit; }

/* Cards laid out as flex-grow columns already inherit .sp-card surface.
   Give the card body an internal rhythm and a small accent tick. */
.sp-card { display: flex; flex-direction: column; gap: 12px; }
.sp-card .elementor-widget:not(:last-child) { margin-bottom: 0; }
.sp-card__tick { width: 34px; height: 5px; border-radius: 3px; background: var(--spectrum); }
.sp-card h3, .sp-card .elementor-heading-title { color: var(--navy); }

/* Line icon inside a card (focus areas, practice areas) */
.sp-ico .elementor-icon { color: var(--navy); }
.sp-ico svg, .sp-ico .elementor-icon svg { width: 28px; height: 28px; fill: currentColor; }

/* Checklist (Impact) — Icon List rendered as a responsive two-column grid */
.sp-checklist .elementor-icon-list-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 28px;
}
.sp-checklist .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; align-items: flex-start; }
.sp-checklist .elementor-icon-list-icon { color: var(--blue); padding-top: 3px; }
.sp-checklist .elementor-icon-list-text {
	font-family: var(--font-body);
	font-size: 17px;
	color: var(--ink);
	font-weight: 600;
}

/* Credential list (About: Education, Recognition) — single column, hairline
   separators, inside a card. */
.sp-credlist .elementor-icon-list-items { display: block; }
.sp-credlist .elementor-icon-list-item {
	align-items: flex-start;
	padding: 12px 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--line);
}
.sp-credlist .elementor-icon-list-item:last-child { border-bottom: none; }
.sp-credlist .elementor-icon-list-icon { color: var(--blue); padding-top: 4px; }
.sp-credlist .elementor-icon-list-text { font-size: 16px; line-height: 1.45; color: var(--ink); }

/* Framed landscape photo (About: speaking) + caption */
.sp-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; }
.sp-caption, .sp-caption p { font-family: var(--font-serif) !important; font-style: italic; color: var(--slate); font-size: 16px; }
.sp-caption { margin: 12px 0 0; }
.sp-caption p { margin: 0; }

/* Services page: stacked practice-area blocks with hairline separators. */
.sp-services-list > .e-con { padding: 44px 0; }
.sp-services-list > .e-con:first-child { padding-top: 4px; }
.sp-services-list > .e-con + .e-con { border-top: 1px solid var(--line); }
.e-con.sp-split--top { align-items: start; }

/* Sub-service list within a practice area — two columns on desktop. */
.sp-sublist .elementor-icon-list-items { display: grid; grid-template-columns: 1fr; gap: 10px 28px; }
.sp-sublist .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; align-items: flex-start; }
.sp-sublist .elementor-icon-list-icon { color: var(--blue); padding-top: 3px; }
.sp-sublist .elementor-icon-list-text { font-size: 16px; color: var(--ink); font-weight: 600; }
@media (min-width: 600px) { .sp-sublist .elementor-icon-list-items { grid-template-columns: 1fr 1fr; } }

/* Practice-area number label */
.sp-service-num { color: var(--slate); }

/* Practice-area list (What we do) — Icon List, single column, arrow markers */
.sp-practice .elementor-icon-list-item { border-bottom: 1px solid var(--line); padding: 14px 0 !important; margin: 0 !important; }
.sp-practice .elementor-icon-list-text { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--navy); }
.sp-practice .elementor-icon-list-icon { color: var(--blue); }

/* Hero: quiet cropped spectrum ring behind the content (pure SVG/CSS) */
.sp-hero__ring {
	position: absolute;
	top: 50%;
	right: -18%;
	transform: translateY(-50%);
	width: 620px;
	max-width: 90vw;
	aspect-ratio: 1 / 1;
	opacity: .5;
	pointer-events: none;
	z-index: 0;
}
.sp-hero__ring svg { width: 100%; height: 100%; display: block; }
.sp-hero__content { position: relative; z-index: 1; }
.sp-hero p.sp-hero__sub { color: rgba(255,255,255,.82); font-size: 19px; }

/* Featured band (Mathematics & STEM) sits on navy; reuse .sp-on-navy */
.sp-featured .sp-card__tick { background: var(--spectrum); }

/* Portrait image (founder block) */
.sp-portrait img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
	display: block;
}

/* Section intro paragraph under a heading */
.sp-lead { font-size: 19px; color: var(--slate); }
.sp-hero .sp-lead, .sp-on-navy .sp-lead, .sp-cta-band .sp-lead { color: rgba(255,255,255,.82); }

/* Layout overrides use .e-con.<class> (0,2,0) so they beat Elementor's own
   per-element CSS, which loads after brand.css and would otherwise win ties. */

/* Multi-column layouts use CSS Grid on the row container. display:grid
   !important overrides Elementor's container flex so equal columns are
   guaranteed regardless of content length, without fighting Elementor's
   flex-item CSS-variable system. Children (.e-con) become grid items. */

/* Equal-width columns (card rows): 1 → 2 → 3 up. */
.e-con.sp-cols { display: grid !important; grid-template-columns: 1fr; gap: 24px; }
.sp-cols > .e-con { min-width: 0; }
@media (min-width: 640px) { .e-con.sp-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .e-con.sp-cols { grid-template-columns: repeat(3, 1fr); } }
/* Two-column variant: 1 → 2 up (stays 2 on desktop). */
@media (min-width: 1000px) { .e-con.sp-cols--2 { grid-template-columns: repeat(2, 1fr); } }

/* Asymmetric split (image + text): stacked on mobile, 42/58 on desktop. */
.e-con.sp-split { display: grid !important; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.sp-split > .e-con { min-width: 0; }
@media (min-width: 900px) { .e-con.sp-split { grid-template-columns: minmax(0, 42%) 1fr; gap: 56px; } }
/* Wide-first variant (Contact: form larger than the aside). */
@media (min-width: 900px) { .e-con.sp-split--wide-first { grid-template-columns: 1.5fr 1fr; align-items: start; } }

/* Inline brand link (shortcodes, aside) */
.sp-link { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; }
.sp-link:hover { border-bottom-color: currentColor; }
.sp-contact-email { font-family: var(--font-display); font-weight: 600; font-size: 18px; }

/* White text on navy sections — target the heading element and beat the kit's
   heading colour. Readability is non-negotiable, so !important is warranted. */
.sp-hero .elementor-heading-title,
.sp-cta-band .elementor-heading-title,
.sp-on-navy .elementor-heading-title { color: #fff !important; }
.sp-hero .elementor-widget-text-editor,
.sp-cta-band .elementor-widget-text-editor,
.sp-on-navy .elementor-widget-text-editor { color: rgba(255,255,255,.85); }

/* Card surface, raised specificity so the radius/border survive Elementor's
   per-element container CSS. */
.e-con.sp-card {
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

@media (min-width: 700px) {
	.sp-checklist .elementor-icon-list-items { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
	.sp-hero__ring { right: -8%; width: 720px; opacity: .6; }
}