/*
Theme Name: Smart Employment
Theme URI: https://smartemploymentagency.com
Author: Smart Employment Agency
Description: A modern, fast, accessible theme for recruitment and HR agencies. Built around the Smart Employment brand palette, with a designed homepage, job listing layouts and English/Somali support. Pairs with the Smart Jobs plugin, which supplies the job board, application forms and translations.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smart-employment
Tags: business, portfolio, blog, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar
*/

/* =========================================================================
 * 1. Design tokens
 *
 * The palette is taken directly from the logo: the deep teal of the SMART
 * wordmark, the teal of the left leaf and the lime green of the right leaf.
 * ====================================================================== */

:root {
	/* Brand */
	--se-teal-900: #0b3d4c;
	--se-teal-800: #0f5163;
	--se-teal-700: #12657d;
	--se-teal-600: #17809c;
	--se-teal-500: #1d93a8;
	--se-teal-200: #bfdde4;
	--se-teal-100: #e6f2f5;
	--se-teal-50: #f3f9fa;

	--se-green-700: #5f9224;
	--se-green-600: #74ac2e;
	--se-green-500: #8cc63f;
	--se-green-200: #d5ebb0;
	--se-green-100: #eef7e0;

	/* Neutrals */
	--se-ink: #16272d;
	--se-body: #4a5c63;
	--se-muted: #7b8b91;
	--se-line: #e2eaec;
	--se-surface: #ffffff;
	--se-surface-alt: #f6f9fa;

	/* Type */
	--se-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	/* A fluid scale, so headings shrink smoothly instead of stepping down. */
	--se-h1: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
	--se-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
	--se-h3: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);

	/* Space */
	--se-container: 1200px;
	--se-gutter: clamp(1.1rem, .6rem + 2vw, 2rem);
	--se-section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

	/* Surface treatment */
	--se-radius: 14px;
	--se-radius-lg: 22px;
	--se-radius-sm: 8px;
	--se-shadow: 0 1px 2px rgba(11, 61, 76, .06), 0 8px 24px rgba(11, 61, 76, .06);
	--se-shadow-lg: 0 2px 4px rgba(11, 61, 76, .06), 0 18px 48px rgba(11, 61, 76, .12);
	--se-transition: 180ms cubic-bezier(.4, 0, .2, 1);

	--se-header-h: 88px;

	/* Semantic roles.

	   The brand scale above never changes: teal-800/900 are always the dark
	   plates behind the top bar, the CTA band and the footer, in either theme.
	   These roles are what the interface actually paints with, and they are
	   nearly the only values the dark theme has to redefine. */
	--se-accent: var(--se-teal-700);            /* interactive text on a surface */
	--se-accent-hover: var(--se-teal-500);
	--se-accent-deep: var(--se-teal-800);       /* text on a tinted chip        */
	--se-accent-solid: var(--se-teal-700);      /* filled control background    */
	--se-accent-solid-hover: var(--se-teal-800);
	--se-accent-ink: #ffffff;                   /* text on --se-accent-solid    */

	--se-header-bg: rgba(255, 255, 255, .92);
	--se-scrim: rgba(11, 61, 76, .5);
	--se-logo-plate: transparent;
	--se-logo-pad: 0;

	--se-danger-bg: #fdecec;
	--se-danger-line: #d63638;
	--se-danger-ink: #8a1f21;
	--se-danger-text: #b32d2e;
	--se-success-ink: #2f4a10;

	color-scheme: light;
}

/* Bridge: the plugin reads its own --sj-* names, so map them to the theme's
   values. Installing both keeps one palette rather than two. */
:root {
	--sj-teal-900: var(--se-teal-900);
	--sj-teal-800: var(--se-teal-800);
	--sj-teal-700: var(--se-teal-700);
	--sj-teal-600: var(--se-teal-600);
	--sj-teal-500: var(--se-teal-500);
	--sj-teal-200: var(--se-teal-200);
	--sj-teal-100: var(--se-teal-100);
	--sj-teal-50: var(--se-teal-50);
	--sj-green-700: var(--se-green-700);
	--sj-green-600: var(--se-green-600);
	--sj-green-500: var(--se-green-500);
	--sj-green-100: var(--se-green-100);
	--sj-ink: var(--se-ink);
	--sj-body: var(--se-body);
	--sj-muted: var(--se-muted);
	--sj-line: var(--se-line);
	--sj-surface: var(--se-surface);
	--sj-surface-alt: var(--se-surface-alt);
	--sj-radius: var(--se-radius);
	--sj-radius-sm: var(--se-radius-sm);
	--sj-shadow: var(--se-shadow);
	--sj-shadow-lg: var(--se-shadow-lg);
	--sj-transition: var(--se-transition);
	--sj-accent: var(--se-accent);
	--sj-accent-hover: var(--se-accent-hover);
	--sj-accent-deep: var(--se-accent-deep);
	--sj-accent-solid: var(--se-accent-solid);
	--sj-accent-solid-hover: var(--se-accent-solid-hover);
	--sj-accent-ink: var(--se-accent-ink);
	--sj-danger-bg: var(--se-danger-bg);
	--sj-danger-line: var(--se-danger-line);
	--sj-danger-ink: var(--se-danger-ink);
	--sj-danger-text: var(--se-danger-text);
	--sj-success-ink: var(--se-success-ink);
}

/* =========================================================================
 * 1b. Dark theme
 *
 * Three states, cycled by the control in the header:
 *
 *   System  no attribute on <html>  - the media query below decides
 *   Light   data-se-theme="light"   - pins the light palette
 *   Dark    data-se-theme="dark"    - pins the dark palette
 *
 * A tiny script in <head> writes the attribute before the first paint, so a
 * dark-mode visitor never sees a white flash. With JavaScript off the media
 * query still delivers the right palette; only the control stops working.
 *
 * Only the semantic roles change. The brand scale (teal-600 upward, green)
 * is identical in both themes, which is why the footer, the top bar and the
 * CTA band keep their colour and the site still looks like itself.
 *
 * The two rules below are deliberate duplicates - keep them in sync.
 * ====================================================================== */

:root[data-se-theme="dark"] {
	/* Tints become deep washes rather than pale ones. */
	--se-teal-200: #1e4a58;
	--se-teal-100: #14313c;
	--se-teal-50: #0f242c;
	--se-green-200: #33501f;
	--se-green-100: #1b2c11;

	/* Neutrals: a deep teal-navy, never flat black, so the brand still reads. */
	--se-ink: #e8f1f3;
	--se-body: #a5bac1;
	--se-muted: #7d949c;
	--se-line: #1d3540;
	--se-surface: #0c191f;
	--se-surface-alt: #112229;

	/* Interactive colour has to lift off a dark surface, so the accent
	   brightens while the filled-control teal only steps up one stop -
	   white text on it still clears 4.5:1. */
	--se-accent: #61c8dc;
	--se-accent-hover: #8fdcec;
	--se-accent-deep: #9fdfec;
	--se-accent-solid: var(--se-teal-600);
	--se-accent-solid-hover: var(--se-teal-500);
	--se-accent-ink: #ffffff;

	/* Shadows read as depth only if they are darker than the surface. */
	--se-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .42);
	--se-shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .55);

	--se-header-bg: rgba(12, 25, 31, .88);
	--se-scrim: rgba(2, 9, 12, .68);

	/* The logo artwork is drawn on white, so on a dark header it gets the
	   same deliberate plate the footer mark already has. */
	--se-logo-plate: #ffffff;
	--se-logo-pad: .35rem .55rem;

	--se-danger-bg: #35191a;
	--se-danger-line: #e0696b;
	--se-danger-ink: #ffc9c9;
	--se-danger-text: #ff9b9b;
	--se-success-ink: #d3eaa9;

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-se-theme="light"]) {
		/* Tints become deep washes rather than pale ones. */
		--se-teal-200: #1e4a58;
		--se-teal-100: #14313c;
		--se-teal-50: #0f242c;
		--se-green-200: #33501f;
		--se-green-100: #1b2c11;

		/* Neutrals: a deep teal-navy, never flat black, so the brand still reads. */
		--se-ink: #e8f1f3;
		--se-body: #a5bac1;
		--se-muted: #7d949c;
		--se-line: #1d3540;
		--se-surface: #0c191f;
		--se-surface-alt: #112229;

		/* Interactive colour has to lift off a dark surface, so the accent
		   brightens while the filled-control teal only steps up one stop -
		   white text on it still clears 4.5:1. */
		--se-accent: #61c8dc;
		--se-accent-hover: #8fdcec;
		--se-accent-deep: #9fdfec;
		--se-accent-solid: var(--se-teal-600);
		--se-accent-solid-hover: var(--se-teal-500);
		--se-accent-ink: #ffffff;

		/* Shadows read as depth only if they are darker than the surface. */
		--se-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .42);
		--se-shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .55);

		--se-header-bg: rgba(12, 25, 31, .88);
		--se-scrim: rgba(2, 9, 12, .68);

		/* The logo artwork is drawn on white, so on a dark header it gets the
		   same deliberate plate the footer mark already has. */
		--se-logo-plate: #ffffff;
		--se-logo-pad: .35rem .55rem;

		--se-danger-bg: #35191a;
		--se-danger-line: #e0696b;
		--se-danger-ink: #ffc9c9;
		--se-danger-text: #ff9b9b;
		--se-success-ink: #d3eaa9;

		color-scheme: dark;
	}
}

/* --- Pieces that need more than a token swap --------------------------- */

/* The header logo sits on white artwork; give it a plate on dark. */
.se-header .se-logo img,
.se-header .custom-logo {
	background: var(--se-logo-plate);
	padding: var(--se-logo-pad);
	border-radius: var(--se-radius-sm);
	transition: background var(--se-transition), padding var(--se-transition);
}

/* The decorative hero shapes are washed out on a dark ground, so they are
   driven by variables instead of fixed fills. */
.se-hero__bg {
	--se-blob-a: var(--se-teal-600);
	--se-blob-b: var(--se-green-500);
	--se-blob-strong: .18;
	--se-blob-soft: .08;
}

:root[data-se-theme="dark"] .se-hero__bg {
	--se-blob-strong: .22;
	--se-blob-soft: .06;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-se-theme="light"]) .se-hero__bg {
		--se-blob-strong: .22;
		--se-blob-soft: .06;
	}
}

.se-hero__stop--a { stop-color: var(--se-blob-a); stop-opacity: var(--se-blob-strong); }
.se-hero__stop--b { stop-color: var(--se-blob-b); stop-opacity: var(--se-blob-soft); }
.se-hero__stop--c { stop-color: var(--se-blob-b); stop-opacity: var(--se-blob-strong); }
.se-hero__stop--d { stop-color: var(--se-blob-a); stop-opacity: var(--se-blob-soft); }
/* fill-opacity carries the tint so `opacity` is free to be animated. */
.se-hero__orb { fill: var(--se-blob-b); fill-opacity: var(--se-blob-soft); }

/* =========================================================================
 * 2. Reset and base
 * ====================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--se-header-h) + 20px);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	font-family: var(--se-font);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--se-body);
	background: var(--se-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	font-weight: 700;
	line-height: 1.22;
	color: var(--se-ink);
	letter-spacing: -.015em;
}

h1 { font-size: var(--se-h1); font-weight: 800; }
h2 { font-size: var(--se-h2); }
h3 { font-size: var(--se-h3); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--se-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--se-transition);
}

a:hover { color: var(--se-accent-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--se-green-500);
	outline-offset: 2px;
	border-radius: 4px;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
img { display: block; }

ul, ol { padding-left: 1.2rem; }

hr {
	border: 0;
	height: 1px;
	background: var(--se-line);
	margin: 2.5rem 0;
}

blockquote {
	margin: 1.8rem 0;
	padding: 1.1rem 1.5rem;
	border-left: 4px solid var(--se-green-500);
	background: var(--se-surface-alt);
	border-radius: 0 var(--se-radius-sm) var(--se-radius-sm) 0;
	font-size: 1.05rem;
	color: var(--se-ink);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

code {
	background: var(--se-teal-50);
	padding: .15em .4em;
	border-radius: 4px;
	color: var(--se-accent-deep);
}

pre {
	background: var(--se-teal-900);
	color: #e8f2f4;
	padding: 1.2rem;
	border-radius: var(--se-radius-sm);
	overflow-x: auto;
}

pre code { background: none; color: inherit; padding: 0; }

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

th, td {
	padding: .75rem 1rem;
	border: 1px solid var(--se-line);
	text-align: left;
}

th { background: var(--se-surface-alt); font-weight: 700; color: var(--se-ink); }

/* Accessibility helpers */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.se-skip {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: .8rem 1.4rem;
	background: var(--se-accent-solid);
	color: var(--se-accent-ink);
	border-radius: 0 0 var(--se-radius-sm) var(--se-radius-sm);
	text-decoration: none;
	font-weight: 600;
	transition: top var(--se-transition);
}

.se-skip:focus { top: 0; color: var(--se-accent-ink); }

/* =========================================================================
 * 3. Layout
 * ====================================================================== */

.se-page { display: flex; flex-direction: column; min-height: 100vh; }
.se-main { flex: 1; }

.se-container {
	width: 100%;
	max-width: var(--se-container);
	margin-inline: auto;
	padding-inline: var(--se-gutter);
}

.se-section { padding-block: var(--se-section-y); }
.se-section--alt { background: var(--se-surface-alt); }

/* A page header already supplies generous breathing room, so the section that
   follows it does not need a full-height top pad as well. */
.se-pagehead + .se-section {
	padding-top: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
}

.se-section--dark {
	background:
		radial-gradient(1000px 500px at 85% -10%, rgba(140, 198, 63, .18), transparent 60%),
		linear-gradient(145deg, var(--se-teal-900), var(--se-teal-700));
	color: #d3e5ea;
}

.se-section--dark h1,
.se-section--dark h2,
.se-section--dark h3 { color: #fff; }

.se-section__head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); max-width: 720px; }

.se-section__head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	max-width: none;
}

.se-section__head--split > div { max-width: 720px; }

.se-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 .85rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--se-teal-600);
}

.se-eyebrow::before {
	content: "";
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--se-green-500);
}

.se-section--dark .se-eyebrow { color: var(--se-green-500); }

.se-section__title { margin: 0 0 .7rem; }

.se-section__intro {
	margin: 0;
	font-size: 1.05rem;
	color: var(--se-body);
	line-height: 1.75;
}

.se-section--dark .se-section__intro { color: #b9d3da; }

.se-section__action {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: .35rem;
	border-bottom: 2px solid transparent;
}

.se-section__action:hover { border-bottom-color: var(--se-green-500); }
.se-section__action .sj-icon { transition: transform var(--se-transition); }
.se-section__action:hover .sj-icon { transform: translateX(3px); }

/* =========================================================================
 * 4. Top bar and header
 * ====================================================================== */

.se-topbar {
	background: var(--se-teal-900);
	color: #a9c9d2;
	font-size: .84rem;
}

.se-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 42px;
	flex-wrap: wrap;
}

.se-topbar__contact { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.se-topbar__contact a,
.se-topbar__right a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: #a9c9d2;
	text-decoration: none;
}

.se-topbar__contact a:hover { color: var(--se-green-500); }
.se-topbar__contact .sj-icon { width: 15px; height: 15px; opacity: .8; }

.se-topbar__right { display: flex; align-items: center; gap: 1rem; }

.se-topbar .sj-lang-switch {
	background: transparent;
	border-color: rgba(255, 255, 255, .22);
}

.se-topbar .sj-lang-switch__item { color: #a9c9d2; }
.se-topbar .sj-lang-switch__item:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.se-topbar .sj-lang-switch__item.is-active { background: var(--se-green-500); color: var(--se-teal-900); }

/* Social row, shared by header and footer */
.se-social {
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.se-social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: inherit;
	transition: background var(--se-transition), color var(--se-transition),
		transform var(--se-transition);
}

.se-social a:hover {
	background: var(--se-green-500);
	color: var(--se-teal-900);
	transform: translateY(-2px);
}

.se-social svg { width: 16px; height: 16px; }
.se-social--sm a { width: 28px; height: 28px; }
.se-social--sm svg { width: 14px; height: 14px; }

/* Header */
.se-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--se-header-bg);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--se-line);
	transition: box-shadow var(--se-transition);
}

.se-header.is-stuck { box-shadow: var(--se-shadow); }

.se-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--se-header-h);
}

.se-header__brand { flex: none; }

.se-logo { display: block; line-height: 0; }
/* The brand mark stacks the symbol above the wordmark, so it needs a taller
   box than a horizontal logo would to keep the agency name readable. */
.se-logo img,
.custom-logo { max-height: 68px; width: auto; }

.se-logo--text {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--se-accent-deep);
	text-decoration: none;
	line-height: 1.2;
}

/* Primary navigation */
.se-nav { margin-left: auto; }

.se-nav__list {
	display: flex;
	align-items: center;
	gap: .3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.se-nav__list li { position: relative; }

.se-nav__list a {
	display: block;
	padding: .6rem .85rem;
	border-radius: var(--se-radius-sm);
	font-size: .94rem;
	font-weight: 600;
	color: var(--se-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--se-transition), background var(--se-transition);
}

.se-nav__list a:hover { color: var(--se-accent); background: var(--se-teal-50); }

.se-nav__list .current-menu-item > a,
.se-nav__list .current_page_item > a,
.se-nav__list .current-menu-ancestor > a { color: var(--se-accent); }

/* Active underline */
.se-nav__list .current-menu-item > a::after,
.se-nav__list .current_page_item > a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 4px;
	border-radius: 2px;
	background: var(--se-green-500);
}

/* Dropdowns */
.se-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	padding: .5rem;
	margin: 0;
	list-style: none;
	background: var(--se-surface);
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius);
	box-shadow: var(--se-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--se-transition), transform var(--se-transition),
		visibility var(--se-transition);
	z-index: 20;
}

.se-nav__list li:hover > .sub-menu,
.se-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.se-nav__list .sub-menu a { padding: .6rem .8rem; font-weight: 500; }

.se-header__actions { display: flex; align-items: center; gap: .75rem; flex: none; }

/* Burger */
.se-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius-sm);
	background: var(--se-surface);
	cursor: pointer;
}

.se-burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--se-accent-deep);
	transition: transform var(--se-transition), opacity var(--se-transition);
}

.se-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.se-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.se-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.se-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--se-scrim);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity var(--se-transition);
}

.se-drawer.is-open { opacity: 1; }
.se-drawer[hidden] { display: none; }

.se-drawer__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(360px, 88vw);
	background: var(--se-surface);
	padding: 1.5rem;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	transform: translateX(100%);
	transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
}

.se-drawer.is-open .se-drawer__panel { transform: translateX(0); }

.se-drawer__close {
	align-self: flex-end;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--se-line);
	border-radius: 50%;
	background: var(--se-surface);
	color: var(--se-ink);
	cursor: pointer;
}

.se-drawer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.se-drawer__nav li { border-bottom: 1px solid var(--se-line); }

.se-drawer__nav a {
	display: block;
	padding: .95rem .25rem;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--se-ink);
	text-decoration: none;
}

.se-drawer__nav a:hover { color: var(--se-accent); }
.se-drawer__nav .sub-menu { padding-left: 1rem; }
.se-drawer__nav .sub-menu a { font-weight: 500; font-size: .95rem; }
.se-drawer__nav .sub-menu li:last-child { border-bottom: 0; }

.se-drawer__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

.se-drawer__foot .sj-btn { width: 100%; }

.se-drawer__phone {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	text-decoration: none;
}

/* =========================================================================
 * 5. Hero
 * ====================================================================== */

.se-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--se-teal-50) 0%, var(--se-surface) 100%);
	padding-block: clamp(3rem, 1.5rem + 6vw, 6rem);
}

.se-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.se-hero__bg svg { width: 100%; height: 100%; }

.se-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: center;
}

.se-hero__eyebrow {
	display: inline-block;
	margin: 0 0 1.1rem;
	padding: .4rem 1rem;
	border-radius: 999px;
	background: var(--se-surface);
	border: 1px solid var(--se-teal-200);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--se-accent);
	box-shadow: var(--se-shadow);
}

.se-hero__title {
	margin: 0 0 1.1rem;
	max-width: 16ch;
}

/* The green underline echoes the logo's accent leaf. */
.se-hero__title::after {
	content: "";
	display: block;
	width: 92px;
	height: 5px;
	margin-top: 1.1rem;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--se-green-500), var(--se-teal-500));
}

.se-hero__subtitle {
	margin: 0 0 2rem;
	max-width: 54ch;
	font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
	color: var(--se-body);
}

.se-hero__search {
	display: flex;
	align-items: center;
	gap: .5rem;
	max-width: 560px;
	margin-bottom: 1.75rem;
	padding: .45rem .45rem .45rem 1rem;
	background: var(--se-surface);
	border: 1px solid var(--se-line);
	border-radius: 999px;
	box-shadow: var(--se-shadow);
	transition: border-color var(--se-transition), box-shadow var(--se-transition);
}

.se-hero__search:focus-within {
	border-color: var(--se-teal-500);
	box-shadow: 0 0 0 4px rgba(29, 147, 168, .14);
}

.se-hero__search .sj-icon { color: var(--se-muted); flex: none; }

.se-hero__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: .6rem .25rem;
	font-family: inherit;
	font-size: .97rem;
	color: var(--se-ink);
}

.se-hero__search input:focus { outline: none; }
.se-hero__search .sj-btn { flex: none; }

.se-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.se-hero__aside {
	background: var(--se-surface);
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius-lg);
	padding: 1.6rem;
	box-shadow: var(--se-shadow-lg);
}

.se-hero__aside-title {
	margin: 0 0 1rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--se-muted);
}

.se-hero__cats { list-style: none; margin: 0; padding: 0; }

.se-hero__cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem .25rem;
	border-bottom: 1px solid var(--se-line);
	font-size: .93rem;
	font-weight: 600;
	color: var(--se-ink);
	text-decoration: none;
	transition: color var(--se-transition), padding-left var(--se-transition);
}

.se-hero__cats li:last-child a { border-bottom: 0; }

.se-hero__cats a:hover {
	color: var(--se-accent);
	padding-left: .6rem;
}

.se-hero__cat-count {
	flex: none;
	min-width: 30px;
	padding: .1rem .5rem;
	border-radius: 999px;
	background: var(--se-teal-50);
	color: var(--se-accent);
	font-size: .78rem;
	font-weight: 700;
	text-align: center;
}

/* =========================================================================
 * 6. Stats
 * ====================================================================== */

.se-stats { margin-top: -2.5rem; position: relative; z-index: 2; }

.se-stats__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--se-line);
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius-lg);
	overflow: hidden;
	box-shadow: var(--se-shadow-lg);
}

.se-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	padding: 1.9rem 1.25rem;
	background: var(--se-surface);
	text-align: center;
}

.se-stat__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: .35rem;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--se-teal-100), var(--se-green-100));
	color: var(--se-accent);
}

.se-stat__value {
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--se-accent-deep);
}

.se-stat__label { font-size: .85rem; color: var(--se-muted); }

/* =========================================================================
 * 7. Process steps
 * ====================================================================== */

.se-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: se-step;
}

.se-step {
	position: relative;
	padding: 2rem 1.5rem 1.5rem;
	background: var(--se-surface);
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius);
	transition: transform var(--se-transition), box-shadow var(--se-transition);
}

.se-step:hover { transform: translateY(-4px); box-shadow: var(--se-shadow-lg); }

/* Connector line between steps on wide screens. */
@media (min-width: 1000px) {
	.se-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 2.6rem;
		right: -1.5rem;
		width: 1.5rem;
		height: 2px;
		background: repeating-linear-gradient(90deg, var(--se-teal-200) 0 6px, transparent 6px 12px);
	}
}

.se-step__num {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1rem;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--se-teal-700), var(--se-teal-500));
	color: #fff;
	font-size: .95rem;
	font-weight: 800;
	letter-spacing: .02em;
}

.se-step__title { margin: 0 0 .5rem; font-size: 1.1rem; }
.se-step__text { margin: 0; font-size: .93rem; line-height: 1.7; }

/* =========================================================================
 * 8. Why choose us
 * ====================================================================== */

.se-why {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: start;
}

.se-why__lead { margin: 0 0 1.75rem; color: #b9d3da; }

.se-why__list {
	display: grid;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.se-why__item {
	display: flex;
	gap: 1rem;
	padding: 1.35rem;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--se-radius);
	transition: background var(--se-transition), border-color var(--se-transition);
}

.se-why__item:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(140, 198, 63, .5);
}

.se-why__check {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--se-green-500);
	color: var(--se-teal-900);
}

.se-why__check .sj-icon { width: 18px; height: 18px; stroke-width: 2.5; }

.se-why__title { margin: 0 0 .35rem; font-size: 1.05rem; }
.se-why__text { margin: 0; font-size: .92rem; color: #b9d3da; line-height: 1.7; }

/* =========================================================================
 * 9. Page header and breadcrumbs
 * ====================================================================== */

.se-pagehead {
	position: relative;
	padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	background:
		radial-gradient(700px 320px at 88% 0%, rgba(140, 198, 63, .1), transparent 65%),
		linear-gradient(180deg, var(--se-teal-50), var(--se-surface));
	border-bottom: 1px solid var(--se-line);
}

.se-pagehead__title { margin: 0; }

.se-pagehead__subtitle {
	margin: .9rem 0 0;
	max-width: 62ch;
	font-size: 1.03rem;
	color: var(--se-body);
}

.se-breadcrumbs { margin-bottom: 1rem; font-size: .85rem; }

.se-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.se-breadcrumbs li { display: flex; align-items: center; gap: .5rem; color: var(--se-muted); }

.se-breadcrumbs li:not(:last-child)::after {
	content: "/";
	color: var(--se-teal-200);
}

.se-breadcrumbs a { color: var(--se-muted); text-decoration: none; }
.se-breadcrumbs a:hover { color: var(--se-accent); }
.se-breadcrumbs [aria-current] { color: var(--se-ink); font-weight: 600; }

/* =========================================================================
 * 10. Single job
 * ====================================================================== */

.se-jobhead {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: center;
	margin-top: .5rem;
}

.se-jobhead__mark {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--se-teal-600), var(--se-teal-800));
	color: #fff;
	font-size: 1.9rem;
	font-weight: 800;
	flex: none;
	box-shadow: var(--se-shadow);
}

.se-jobhead__company { margin: .2rem 0 .9rem; color: var(--se-muted); font-weight: 600; }
.se-jobhead__cta { flex: none; }

.se-jobhead__closed {
	display: inline-block;
	padding: .7rem 1.2rem;
	border-radius: var(--se-radius-sm);
	background: var(--se-danger-bg);
	color: var(--se-danger-ink);
	font-weight: 600;
	font-size: .9rem;
}

.se-joblayout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
	align-items: start;
}

.se-joblayout__side {
	position: sticky;
	top: calc(var(--se-header-h) + 20px);
	display: grid;
	gap: 1.25rem;
}

.se-job__figure {
	margin: 0 0 2rem;
	border-radius: var(--se-radius);
	overflow: hidden;
}

.se-job__section-title {
	margin: 0 0 1rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--se-line);
	font-size: 1.3rem;
}

/* Responsibilities, requirements, benefits and how to apply. Each is a
   separate .se-prose block so it picks up the same typography and the same
   custom bullet as the description above it. */
.se-job__section { margin-top: 2.5rem; }

.se-job__section .se-job__section-title { margin-bottom: 1.2rem; }

.se-job__section .sj-job-section__list { margin-bottom: 0; }

.se-job__apply { margin-top: 2.5rem; scroll-margin-top: calc(var(--se-header-h) + 20px); }

.se-jobcard {
	background: var(--se-surface);
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius);
	padding: 1.5rem;
	box-shadow: var(--se-shadow);
}

.se-jobcard__title {
	margin: 0 0 1rem;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--se-muted);
}

.se-jobcard__list { margin: 0; display: grid; gap: .1rem; }

.se-jobcard__row {
	display: grid;
	grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
	gap: .75rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--se-line);
}

.se-jobcard__row:last-child { border-bottom: 0; }

.se-jobcard__row dt { font-size: .85rem; color: var(--se-muted); }

.se-jobcard__row dd {
	margin: 0;
	font-size: .92rem;
	font-weight: 600;
	color: var(--se-ink);
	overflow-wrap: anywhere;
}

.se-jobcard__cta { width: 100%; margin-top: 1.25rem; }

.se-jobcard--share .se-social a {
	background: var(--se-teal-50);
	color: var(--se-accent);
}

.se-jobcard--share .se-social a:hover { background: var(--se-green-500); color: var(--se-teal-900); }

.se-jobcard--back {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--se-accent);
}

.se-jobcard--back .sj-icon { transform: rotate(180deg); transition: transform var(--se-transition); }
.se-jobcard--back:hover .sj-icon { transform: rotate(180deg) translateX(3px); }

/* =========================================================================
 * 11. Prose (page and post content)
 * ====================================================================== */

.se-prose {
	max-width: 76ch;
	font-size: 1.03rem;
	color: var(--se-body);
}

.se-prose > *:first-child { margin-top: 0; }
.se-prose h2 { margin-top: 2.2rem; }
.se-prose h3 { margin-top: 1.8rem; }
.se-prose ul, .se-prose ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.se-prose li { margin-bottom: .5rem; }

.se-prose ul { list-style: none; padding-left: 0; }

.se-prose ul li {
	position: relative;
	padding-left: 1.65rem;
}

.se-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--se-green-500);
}

.se-prose img { border-radius: var(--se-radius); }

.se-prose a { font-weight: 600; }

.se-page__figure {
	margin: 0 0 2.5rem;
	border-radius: var(--se-radius-lg);
	overflow: hidden;
	box-shadow: var(--se-shadow);
}

.se-linkpages { margin-top: 2rem; font-weight: 600; }

/* =========================================================================
 * 12. Blog
 * ====================================================================== */

.se-blog {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

.se-blog:not(:has(.se-blog__side)) { grid-template-columns: minmax(0, 1fr); }

.se-postgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.75rem;
}

.se-postcard {
	display: flex;
	flex-direction: column;
	background: var(--se-surface);
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius);
	overflow: hidden;
	transition: transform var(--se-transition), box-shadow var(--se-transition);
}

.se-postcard:hover { transform: translateY(-4px); box-shadow: var(--se-shadow-lg); }

.se-postcard__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--se-teal-50);
}

.se-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}

.se-postcard:hover .se-postcard__media img { transform: scale(1.04); }

.se-postcard__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--se-teal-200);
}

.se-postcard__placeholder .sj-icon { width: 40px; height: 40px; }

.se-postcard__body {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.35rem;
	flex: 1;
}

.se-postcard__meta,
.se-postmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	font-size: .82rem;
	color: var(--se-muted);
}

.se-postmeta { margin-top: 1rem; }
.se-postmeta a { color: var(--se-muted); }

.se-postcard__title { margin: 0; font-size: 1.15rem; line-height: 1.4; }
.se-postcard__title a { color: var(--se-ink); text-decoration: none; }
.se-postcard__title a:hover { color: var(--se-accent); }

.se-postcard__excerpt { margin: 0; font-size: .93rem; line-height: 1.7; }

.se-postcard__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	padding-top: .8rem;
	font-size: .88rem;
	font-weight: 700;
	color: var(--se-accent);
}

.se-postcard__more .sj-icon { width: 16px; height: 16px; transition: transform var(--se-transition); }
.se-postcard:hover .se-postcard__more .sj-icon { transform: translateX(3px); }

.se-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }

.se-tags a {
	display: inline-block;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--se-teal-50);
	border: 1px solid var(--se-teal-100);
	font-size: .82rem;
	color: var(--se-accent-deep);
	text-decoration: none;
}

.se-tags a:hover { background: var(--se-accent-solid); color: var(--se-accent-ink); border-color: var(--se-accent-solid); }

.se-postnav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--se-line);
}

.se-postnav a { font-weight: 600; text-decoration: none; }

/* Sidebar widgets */
.se-widget {
	background: var(--se-surface-alt);
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius);
	padding: 1.4rem;
	margin-bottom: 1.5rem;
}

.se-widget__title {
	margin: 0 0 1rem;
	font-size: 1rem;
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--se-green-500);
	display: inline-block;
}

.se-widget ul { list-style: none; margin: 0; padding: 0; }
.se-widget li { padding: .5rem 0; border-bottom: 1px solid var(--se-line); font-size: .93rem; }
.se-widget li:last-child { border-bottom: 0; }
.se-widget a { text-decoration: none; }

/* Search form */
.se-searchform { display: flex; gap: .5rem; }

.se-searchform input {
	flex: 1;
	min-width: 0;
	padding: .7rem .9rem;
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius-sm);
	font-family: inherit;
	font-size: .95rem;
	background: var(--se-surface);
	color: var(--se-ink);
}

/* Pagination for core loops */
.pagination,
.navigation.pagination { margin-top: 2.5rem; }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .7rem;
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius-sm);
	color: var(--se-body);
	text-decoration: none;
	font-size: .9rem;
	transition: all var(--se-transition);
}

.pagination .page-numbers:hover { border-color: var(--se-accent-hover); color: var(--se-accent); }

.pagination .page-numbers.current {
	background: var(--se-accent-solid);
	border-color: var(--se-accent-solid);
	color: var(--se-accent-ink);
	font-weight: 700;
}

/* =========================================================================
 * 13. Empty state and 404
 * ====================================================================== */

.se-empty {
	max-width: 560px;
	margin-inline: auto;
	padding: 3rem 1.5rem;
	text-align: center;
}

.se-empty__title { margin-bottom: .6rem; }
.se-empty .se-searchform { margin-top: 1.5rem; }

.se-404 { text-align: center; }

.se-404__code {
	margin: 0;
	font-size: clamp(5rem, 3rem + 12vw, 10rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	background: linear-gradient(135deg, var(--se-accent), var(--se-green-500));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.se-404__title { margin: .5rem 0 .75rem; }
.se-404__text { max-width: 46ch; margin-inline: auto; }

.se-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 2rem;
}

.se-404__search { max-width: 420px; margin: 2.5rem auto 0; }

/* =========================================================================
 * 14. Closing CTA band and footer
 * ====================================================================== */

.se-cta {
	background:
		radial-gradient(800px 400px at 12% 110%, rgba(140, 198, 63, .22), transparent 60%),
		linear-gradient(120deg, var(--se-teal-800), var(--se-teal-600));
	color: #fff;
	padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem);
}

.se-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.se-cta__title { margin: 0 0 .4rem; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.se-cta__sub { margin: 0; color: #c9e2e9; max-width: 52ch; }
.se-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.se-cta__ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
}

.se-cta__ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.se-footer {
	background: var(--se-teal-900);
	color: #a9c9d2;
	padding-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
	font-size: .93rem;
}

.se-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
	padding-bottom: 3rem;
}

.se-footer__col--brand .se-logo img,
.se-footer__col--brand .custom-logo {
	max-height: 84px;
	/* The logo artwork is on white, so it needs its own plate on dark. */
	background: #fff;
	padding: .55rem .8rem;
	border-radius: var(--se-radius-sm);
}

.se-footer__tagline { margin: 1.1rem 0 1.5rem; max-width: 34ch; line-height: 1.7; }

.se-footer__title {
	margin: 0 0 1.1rem;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.se-footer__list,
.se-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .65rem;
}

.se-footer__list a,
.se-footer__contact a {
	color: #a9c9d2;
	text-decoration: none;
	transition: color var(--se-transition), padding-left var(--se-transition);
}

.se-footer__list a:hover,
.se-footer__contact a:hover { color: var(--se-green-500); }
.se-footer__list a:hover { padding-left: .35rem; }

.se-footer__contact li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.6; }
.se-footer__contact .sj-icon { flex: none; margin-top: .25rem; color: var(--se-green-500); width: 17px; height: 17px; }

.se-footer__bar {
	padding-block: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .86rem;
}

.se-footer__bar p { margin: 0; }

/* Back to top */
.se-totop {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--se-accent-solid);
	color: var(--se-accent-ink);
	cursor: pointer;
	box-shadow: var(--se-shadow-lg);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--se-transition), transform var(--se-transition),
		background var(--se-transition);
}

.se-totop[hidden] { display: none; }
.se-totop.is-visible { opacity: 1; transform: translateY(0); }
.se-totop:hover { background: var(--se-accent-solid-hover); }
.se-totop svg { width: 20px; height: 20px; }

/* =========================================================================
 * 15. Comments
 * ====================================================================== */

.comments-area { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--se-line); }
.comment-list { list-style: none; padding: 0; margin: 0 0 2.5rem; }

.comment-list .comment-body {
	padding: 1.25rem;
	margin-bottom: 1rem;
	background: var(--se-surface-alt);
	border-radius: var(--se-radius);
}

.comment-list .children { list-style: none; padding-left: 1.5rem; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--se-line);
	border-radius: var(--se-radius-sm);
	font-family: inherit;
	font-size: .95rem;
	background: var(--se-surface);
}

.comment-form .submit {
	padding: .8rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--se-accent-solid);
	color: var(--se-accent-ink);
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
}

.comment-form .submit:hover { background: var(--se-accent-solid-hover); }

/* =========================================================================
 * 16. Theme control
 *
 * One button cycling System -> Light -> Dark. The three glyphs are stacked
 * and cross-faded, so the control never changes size as it switches.
 * ====================================================================== */

.se-theme-toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	padding: 0;
	border: 1px solid var(--se-line);
	border-radius: 50%;
	background: var(--se-surface);
	color: var(--se-accent-deep);
	cursor: pointer;
	overflow: hidden;
	transition: color var(--se-transition), border-color var(--se-transition),
		background var(--se-transition), transform var(--se-transition),
		box-shadow var(--se-transition);
}

/* `display: grid` above would otherwise beat the browser's own [hidden]
   rule, leaving a dead button for a visitor with no JavaScript. */
.se-theme-toggle[hidden] { display: none; }

/* ...and the labelled drawer row goes with it. */
.se-drawer__theme:has(.se-theme-toggle[hidden]) { display: none; }

.se-theme-toggle:hover {
	color: var(--se-accent);
	border-color: var(--se-teal-200);
	box-shadow: var(--se-shadow);
	transform: translateY(-2px);
}

.se-theme-toggle:active { transform: translateY(0) scale(.94); }

.se-theme-toggle__icons {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

.se-theme-toggle__icon {
	position: absolute;
	inset: 0;
	width: 20px;
	height: 20px;
	opacity: 0;
	transform: rotate(-90deg) scale(.4);
	transition: opacity 260ms cubic-bezier(.4, 0, .2, 1),
		transform 320ms cubic-bezier(.34, 1.4, .5, 1);
}

.se-theme-toggle[data-se-mode="system"] .se-theme-toggle__icon--auto,
.se-theme-toggle[data-se-mode="light"] .se-theme-toggle__icon--sun,
.se-theme-toggle[data-se-mode="dark"] .se-theme-toggle__icon--moon {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* The sun's rays wake up on hover. */
.se-theme-toggle__rays {
	transform-origin: 12px 12px;
	transition: transform 420ms cubic-bezier(.34, 1.4, .5, 1);
}

.se-theme-toggle:hover .se-theme-toggle__rays { transform: rotate(45deg); }

/* A dot marks "follow the system" so the state is readable at a glance. */
.se-theme-toggle::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--se-green-500);
	opacity: 0;
	transform: scale(.4);
	transition: opacity var(--se-transition), transform var(--se-transition);
}

.se-theme-toggle[data-se-mode="system"]::after { opacity: 1; transform: scale(1); }

/* In the drawer the control sits on a labelled row instead of alone. */
.se-drawer__theme {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--se-ink);
}

/* Repainting every surface at once looks abrupt, so the swap is crossfaded.
   The class is added by the script for the length of the transition only. */
.se-theme-anim,
.se-theme-anim *,
.se-theme-anim *::before,
.se-theme-anim *::after {
	transition: background-color 300ms ease, background-image 300ms ease,
		border-color 300ms ease, color 300ms ease, fill 300ms ease,
		stroke 300ms ease, box-shadow 300ms ease, opacity 300ms ease,
		transform 300ms cubic-bezier(.34, 1.4, .5, 1) !important;
}

/* =========================================================================
 * 17. Motion
 *
 * Two rules govern everything here.
 *
 * Nothing that carries information is hidden by a script: the entrances are
 * CSS animations with `both` fill, so if the animation never runs the
 * element is simply visible. The scroll reveal is the one exception, and it
 * only hides an element after the script has proved it is running (the
 * `se-js` class) - plus a two-second failsafe in main.js.
 *
 * Everything is wrapped in `prefers-reduced-motion: no-preference`, so a
 * visitor who asks for less movement gets a completely still page.
 * ====================================================================== */

@keyframes se-rise {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes se-zoom {
	from { opacity: 0; transform: scale(.94); }
	to { opacity: 1; transform: none; }
}

@keyframes se-wipe {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes se-drift {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.07); }
}

@keyframes se-drift-alt {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
	50% { transform: translate3d(3%, -2%, 0) scale(1); }
}

@keyframes se-glow {
	0%, 100% { opacity: .55; }
	50% { opacity: 1; }
}

/* --- Scroll reveal ----------------------------------------------------- */

/* The initial hidden state is scoped to `.se-js`, which main.js adds to
   <html> the moment it runs. No script, nothing hidden. */
@media (prefers-reduced-motion: no-preference) {
	.se-js [data-se-reveal] {
		opacity: 0;
		transform: translate3d(0, 22px, 0);
		transition: opacity 640ms cubic-bezier(.22, .8, .28, 1) var(--se-reveal-delay, 0ms),
			transform 640ms cubic-bezier(.22, .8, .28, 1) var(--se-reveal-delay, 0ms);
	}

	.se-js [data-se-reveal="fade"] { transform: none; }
	.se-js [data-se-reveal="zoom"] { transform: scale(.95); }
	.se-js [data-se-reveal="left"] { transform: translate3d(-28px, 0, 0); }
	.se-js [data-se-reveal="right"] { transform: translate3d(28px, 0, 0); }

	.se-js [data-se-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
}

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

@media (prefers-reduced-motion: no-preference) {
	.se-hero__eyebrow,
	.se-hero__title,
	.se-hero__subtitle,
	.se-hero__search,
	.se-hero__actions {
		animation: se-rise 720ms cubic-bezier(.22, .8, .28, 1) both;
	}

	.se-hero__eyebrow { animation-delay: 60ms; }
	.se-hero__title { animation-delay: 150ms; }
	.se-hero__subtitle { animation-delay: 240ms; }
	.se-hero__search { animation-delay: 330ms; }
	.se-hero__actions { animation-delay: 420ms; }

	.se-hero__aside { animation: se-zoom 820ms cubic-bezier(.22, .8, .28, 1) 440ms both; }

	/* The accent rule under the headline draws itself in. */
	.se-hero__title::after {
		transform-origin: left center;
		animation: se-wipe 640ms cubic-bezier(.22, .8, .28, 1) 700ms both;
	}

	/* The two logo-leaf shapes behind the hero breathe, very slowly.
	   fill-box keeps the percentage transforms relative to each shape rather
	   than to the whole 1200x600 viewBox. */
	.se-hero__blob,
	.se-hero__orb { transform-box: fill-box; transform-origin: center; }
	.se-hero__blob--a { animation: se-drift 22s ease-in-out infinite; }
	.se-hero__blob--b { animation: se-drift-alt 27s ease-in-out infinite; }
	.se-hero__orb { animation: se-drift-alt 19s ease-in-out infinite, se-glow 11s ease-in-out infinite; }
}

/* --- Ambient light on the dark bands ----------------------------------- */

.se-section--dark,
.se-cta { position: relative; overflow: hidden; }

.se-section--dark > *,
.se-cta > * { position: relative; z-index: 1; }

.se-section--dark::before,
.se-cta::before {
	content: "";
	position: absolute;
	top: -30%;
	left: -10%;
	width: 60%;
	padding-bottom: 60%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(140, 198, 63, .20), transparent);
	pointer-events: none;
}

.se-cta::before { top: auto; bottom: -45%; left: -5%; }

@media (prefers-reduced-motion: no-preference) {
	.se-section--dark::before { animation: se-drift 24s ease-in-out infinite; }
	.se-cta::before { animation: se-drift-alt 20s ease-in-out infinite; }
}

/* --- Buttons ----------------------------------------------------------- */

/* A light sweeps across the button on hover. The pseudo-element sits behind
   the label (z-index -1 inside the button's own stacking context) so the
   text is never dimmed by it. */
.sj-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.sj-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, .32) 48%, transparent 62%);
	transform: translateX(-120%);
	pointer-events: none;
}

.sj-btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: no-preference) {
	.sj-btn:hover::after {
		transform: translateX(120%);
		transition: transform 780ms cubic-bezier(.4, 0, .2, 1);
	}
}

/* --- Navigation -------------------------------------------------------- */

.se-nav__list > li > a { position: relative; }

.se-nav__list > li:not(.current-menu-item):not(.current_page_item) > a::before {
	content: "";
	position: absolute;
	left: .85rem;
	right: .85rem;
	bottom: .3rem;
	height: 2px;
	border-radius: 2px;
	background: var(--se-green-500);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
}

.se-nav__list > li:not(.current-menu-item):not(.current_page_item) > a:hover::before,
.se-nav__list > li:not(.current-menu-item):not(.current_page_item) > a:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Drawer links arrive one after another rather than all at once. */
@media (prefers-reduced-motion: no-preference) {
	.se-drawer.is-open .se-drawer__nav li {
		animation: se-rise 420ms cubic-bezier(.22, .8, .28, 1) both;
		animation-delay: calc(60ms + var(--se-drawer-i, 0) * 45ms);
	}
}

/* --- Reading progress -------------------------------------------------- */

.se-progress {
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--se-teal-500), var(--se-green-500));
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* --- Cards and small polish -------------------------------------------- */

.se-step,
.se-postcard,
.sj-card,
.sj-service {
	transition: transform 280ms cubic-bezier(.22, .8, .28, 1),
		box-shadow 280ms cubic-bezier(.22, .8, .28, 1),
		border-color 280ms cubic-bezier(.22, .8, .28, 1),
		background 280ms cubic-bezier(.22, .8, .28, 1);
}

.se-step:hover { border-color: var(--se-teal-200); }

.se-step__num,
.se-stat__icon,
.sj-service__icon {
	transition: transform 380ms cubic-bezier(.34, 1.4, .5, 1),
		background var(--se-transition), color var(--se-transition);
}

.se-step:hover .se-step__num,
.se-stat:hover .se-stat__icon,
.sj-service:hover .sj-service__icon { transform: translateY(-3px) rotate(-6deg); }

.se-stat {
	transition: background var(--se-transition);
}

.se-stat:hover { background: var(--se-surface-alt); }

/* Numbers that count up get a fixed-width figure so the row does not jiggle
   while the value climbs. */
.se-stat__value { font-variant-numeric: tabular-nums; }

.se-totop:hover { transform: translateY(-3px); }
.se-totop svg { transition: transform var(--se-transition); }
.se-totop:hover svg { transform: translateY(-2px); }

.se-social a:focus-visible { transform: translateY(-2px); }

/* Section headings share the reveal, so give the eyebrow rule the same
   drawn-in treatment the hero underline has. */
.se-eyebrow::before { transform-origin: left center; transition: width var(--se-transition); }
.se-section__head:hover .se-eyebrow::before { width: 40px; }

/* =========================================================================
 * 18. Responsive
 * ====================================================================== */

@media (max-width: 1100px) {
	.se-hero__inner { grid-template-columns: 1fr; }
	.se-hero__aside { max-width: 460px; }
	.se-joblayout { grid-template-columns: 1fr; }
	.se-joblayout__side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
	.se-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	.se-nav { display: none; }
	.se-burger { display: flex; }
	.se-header__inner { justify-content: space-between; }
	.se-header__actions { margin-left: auto; }
	.se-why { grid-template-columns: 1fr; }
	.se-blog { grid-template-columns: 1fr; }
	.se-section__head--split { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 780px) {
	.se-topbar__contact { gap: 1rem; }
	.se-topbar__contact a span { display: none; }
	.se-jobhead { grid-template-columns: auto minmax(0, 1fr); }
	.se-jobhead__cta { grid-column: 1 / -1; }
	.se-jobhead__cta .sj-btn { width: 100%; }
	.se-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
	.se-header__cta { display: none; }
	.se-logo img,
	.custom-logo { max-height: 54px; }
	.se-stats { margin-top: -1.5rem; }
	.se-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.se-hero__search { flex-wrap: wrap; border-radius: var(--se-radius); padding: .75rem; }
	.se-hero__search input { flex-basis: 100%; }
	.se-hero__search .sj-btn { width: 100%; }
	.se-hero__actions .sj-btn { width: 100%; }
	.se-footer__grid { grid-template-columns: 1fr; }
	.se-jobhead__mark { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 16px; }
	.se-404__actions .sj-btn { width: 100%; }
}

/* =========================================================================
 * 19. Reduced motion and print
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.se-step:hover,
	.se-postcard:hover,
	.sj-btn:hover,
	.se-totop:hover,
	.se-theme-toggle:hover,
	.se-step:hover .se-step__num,
	.se-stat:hover .se-stat__icon,
	.sj-service:hover .sj-service__icon { transform: none; }

	/* Nothing may be left mid-reveal when motion is switched off. */
	[data-se-reveal] { opacity: 1 !important; transform: none !important; }

	.se-progress { display: none; }
}

@media print {
	.se-topbar, .se-header, .se-drawer, .se-cta, .se-footer,
	.se-totop, .se-breadcrumbs, .se-postnav, .se-job__apply,
	.se-theme-toggle, .se-progress { display: none !important; }

	body { color: #000; background: #fff; font-size: 12pt; }
	.se-section { padding-block: 1rem; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}