/* ==========================================================================
   OECL Theme ? design tokens ported from src/index.css + tailwind.config.ts
   ========================================================================== */

:root {
	--kargon-red: #e94335;
	--kargon-dark: #1b2129;
	--kargon-blue: #104c8f;
	--milk-texture: #F7F7F7;
	--radius: 0.5rem;
	--oecl-cta-radius: 9999px; /* matches header Switch Country / Get a Quote / Login pills */
	--container-max: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Karla', sans-serif;
	color: #1b2129;
	background-color: var(--milk-texture);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f1f0fb' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* font-weight: 600 !important overrides Tailwind's .font-bold (700) etc.
   applied directly on heading tags throughout the templates — every heading
   should render at 600 to match the reference site, regardless of whatever
   weight utility class happens to be in its markup. */
h1, h2, h3, h4, h5, h6 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600 !important; margin: 0 0 0.5em; }
p { margin: 0 0 1em; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	padding: .6rem 1.4rem; border-radius: var(--oecl-cta-radius); font-weight: 600; font-size: .9rem;
	border: 1px solid transparent; cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.btn-primary { background: var(--kargon-red); color: #fff; }
.btn-primary:hover { background: rgba(233,67,53,.9); }
.btn-outline { background: transparent; border-color: var(--kargon-red); color: var(--kargon-red); }
.btn-outline:hover { background: var(--kargon-red); color: #fff; }
.btn-block { width: 100%; }

/* Shared CTA pill ? same radius as header buttons */
.oecl-cta-pill {
	border-radius: var(--oecl-cta-radius) !important;
}

/* ---- Header / Navigation ------------------------------------------------ */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 50;
	background: #f8fafc; box-shadow: 0 2px 6px rgba(0,0,0,.08); padding: 19px 0;
}
.site-header .container { display: flex; justify-content: space-between; align-items: center; }
.site-logo { display: flex; align-items: center; gap: .75rem; }
.site-logo img { height: 36px; width: auto; }
.site-nav-desktop { display: none; align-items: center; gap: 1.5rem; }
.nav-link { position: relative; font-weight: 500; color: #000; font-size: .95rem; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--kargon-red); }
.nav-link::after {
	content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
	background: var(--kargon-red); transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
/* Primary header nav (Home/Services/Resources): larger text than the base
   .nav-link size shared with other nav contexts (e.g. dashboard tabs). */
.oecl-header-nav .nav-link {
	font-size: 1.05rem;
}
/* Nav dropdown toggles must match link styling (buttons inherit browser defaults otherwise). */
header nav button.nav-link,
.services-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: 'Karla', sans-serif;
	font-size: .95rem;
	font-weight: 500;
	line-height: normal;
	color: #000;
	letter-spacing: normal;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
}
header nav button.nav-link:hover,
.services-nav-toggle:hover,
header nav button.nav-link.is-active,
.services-nav-toggle.is-active { color: var(--kargon-red); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle { background: none; border: none; font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer; color: #000; }
.nav-dropdown-toggle:hover { color: var(--kargon-red); }
.nav-dropdown-menu {
	display: none; position: absolute; top: 100%; left: 0; margin-top: .5rem; min-width: 160px;
	background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; box-shadow: 0 10px 25px rgba(0,0,0,.1); z-index: 60; padding: .25rem;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: .5rem .75rem; border-radius: .375rem; font-size: .9rem; }
.nav-dropdown-menu a:hover { background: #f9fafb; color: var(--kargon-red); }

.site-header-actions { display: none; align-items: center; gap: .75rem; }
/* Switch Country — sized to match the other two header-action pills
   (.contact-quote-btn / .login-btn are both 36px tall, 0.875rem text). */
.switch-country-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 36px;
	padding: 0 1rem;
	border: 1px solid #000;
	border-radius: 9999px;
	background: #fff;
	color: #000;
	font-family: 'Karla', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.switch-country-btn:hover {
	background: #000;
	color: #fff;
}
/* Login trigger — Login text swaps with Shipsoft logo in the same slot on hover */
.login-btn {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 3px;
	border: none;
	border-radius: 9999px;
	background: rgb(233, 67, 53);
	cursor: pointer;
	font-family: 'Karla', sans-serif;
	box-shadow: none;
	overflow: hidden;
	flex-shrink: 0;
	transition: background 0.2s ease;
}
.login-btn:hover {
	background: rgb(209, 58, 45);
}
.login-btn:focus-visible {
	outline: 2px solid rgb(233, 67, 53);
	outline-offset: 2px;
}
.login-btn__slot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-width: 5.75rem;
	border-radius: 9999px;
	background: #fff;
	overflow: hidden;
}
/* The logo is the button's permanent, always-visible content — no more
   hover-to-reveal crossfade with the "Login" label. */
.login-btn__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	padding: 0 0.85rem;
}
.login-btn__logo {
	height: 22px;
	width: auto;
	max-width: 88px;
	object-fit: contain;
	display: block;
}
/* Kept in the DOM for screen readers only — visually replaced by the logo. */
.login-btn__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.login-btn__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 100%;
	color: #fff;
	flex: 0 0 auto;
	transition: transform 0.25s ease;
}
.group:hover > .login-btn .login-btn__chevron,
.login-btn[aria-expanded="true"] .login-btn__chevron {
	transform: rotate(180deg);
}

/* Login flyout root */
.oecl-header-actions > .group[data-nav-flyout-root]:has(.login-btn) {
	flex-shrink: 0;
	z-index: 70;
	overflow: visible;
}
header.fixed,
header .container {
	overflow: visible;
}

/* Login hover dropdown ? white card, theme colors */
.login-dropdown {
	width: min(440px, calc(100vw - 2rem));
	padding: 1.35rem 1.5rem 1.4rem;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	color: #1b2129;
	text-align: left;
}
.login-dropdown__hello {
	margin: 0 0 0.35rem;
	font-family: 'Karla', sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1b2129;
}
.login-dropdown__sub {
	margin: 0 0 1.15rem;
	font-family: 'Karla', sans-serif;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.45;
	color: #4b5563;
}
.login-dropdown__label {
	margin: 0 0 0.75rem;
	font-family: 'Karla', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: #1b2129;
}
.login-dropdown__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
}
.login-dropdown__action {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.45rem 0.85rem;
	border-radius: var(--oecl-cta-radius);
	background: transparent;
	color: var(--kargon-red);
	font-family: 'Karla', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.2s ease, color 0.2s ease;
}
.login-dropdown__action:hover {
	background: var(--kargon-red);
	color: #fff;
}
.login-dropdown__action--primary {
	background: var(--kargon-red);
	color: #fff;
	border-radius: var(--oecl-cta-radius);
}
.login-dropdown__action--primary:hover {
	background: #d13a2e;
	color: #fff;
}
.login-dropdown__action svg {
	flex-shrink: 0;
}

.mobile-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	background: none;
	border: none;
	padding: .5rem;
	cursor: pointer;
	color: #000;
}
.mobile-menu-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.mobile-menu-toggle__icon--close {
	display: none;
}
.mobile-menu-toggle.is-open .mobile-menu-toggle__icon--menu {
	display: none;
}
.mobile-menu-toggle.is-open .mobile-menu-toggle__icon--close {
	display: inline-flex;
}

/* Smooth mobile drawer (avoid display:none — it can't animate). */
.mobile-nav {
	display: block;
	background: #fff;
	border-top: 1px solid transparent;
	box-shadow: none;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	padding-top: 0;
	padding-bottom: 0;
	transform: translateY(-6px);
	transition:
		max-height 0.4s ease,
		opacity 0.3s ease,
		visibility 0.3s ease,
		padding 0.35s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		transform 0.35s ease;
}
.mobile-nav.is-open {
	max-height: min(85vh, 960px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-top-color: #e5e7eb;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(0);
}
.mobile-nav nav { display: flex; flex-direction: column; gap: 1rem; }
.mobile-nav-section-label { font-size: .8rem; font-weight: 600; color: #6b7280; text-transform: uppercase; }
.mobile-nav-divider { border-top: 1px solid #e5e7eb; padding-top: .75rem; margin-top: .5rem; }
body.oecl-mobile-menu-open {
	overflow: hidden;
}

/* Compact/tablet widths: hamburger. Full desktop nav from 1200px (avoids Login overflow). */
.oecl-header-nav,
.oecl-header-actions,
.oecl-header-nav-group {
	display: none;
}
/* Services and Resources flyouts anchor to this shared container (not their
   own trigger button) so both open at the exact same position — switching
   between them swaps only the inner content, the panel itself never moves. */
.oecl-header-nav {
	position: relative;
}
.oecl-header-toggle {
	display: inline-flex;
}
@media (min-width: 1200px) {
	.oecl-header-nav,
	.oecl-header-actions,
	.oecl-header-nav-group,
	.site-nav-desktop,
	.site-header-actions {
		display: flex;
	}
	.oecl-header-toggle,
	.oecl-header-mobile,
	.mobile-menu-toggle,
	.mobile-nav {
		display: none !important;
	}
	body.oecl-mobile-menu-open {
		overflow: visible;
	}
}

/* Header flyout menus ? group-hover:block is not in the Tailwind build */
header .nav-flyout { display: none; }
header .group:hover > .nav-flyout,
header .group:focus-within > .nav-flyout,
header .nav-flyout.is-open { display: block; }
header .nav-flyout--center {
	left: 50%;
	transform: translateX(-50%);
}

/* Mega dropdowns ? Info sidebar + Services grid */
.nav-mega {
	display: flex;
	align-items: stretch;
	max-width: calc(100vw - 2rem);
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(233, 67, 53, 0.12);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.nav-mega--info {
	flex-direction: column;
	width: min(520px, calc(100vw - 2rem));
	min-height: 160px;
	padding: 0.65rem;
}
.nav-mega__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}
.nav-mega__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nav-mega--services {
	flex-direction: column;
	width: min(520px, calc(100vw - 2rem));
	max-height: min(70vh, 480px);
	padding: 0.65rem;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(233, 67, 53, 0.4) #f3f4f6;
}
.nav-mega--services .nav-mega__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}
.nav-mega--services .nav-simple-menu__link--cta {
	display: inline-flex;
	align-self: flex-start;
	width: auto;
	max-width: 100%;
	margin-top: 0.5rem;
	padding: 0.4rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(233, 67, 53, 0.08);
	border: 1px solid rgba(233, 67, 53, 0.18);
	border-radius: 9999px;
	color: var(--kargon-red);
}
.nav-mega--services .nav-simple-menu__link--cta:hover,
.nav-mega--services .nav-simple-menu__link--cta.is-active {
	background: var(--kargon-red);
	color: #fff;
	border-left-color: transparent;
}
.nav-mega--services .nav-simple-menu__link--cta .nav-simple-menu__arrow {
	opacity: 1;
	transform: none;
}
.nav-mega .nav-simple-menu__link {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	padding: 12px;
	background: #fafafa;
	border: 1px solid #f1f1f2;
	font-family: 'Karla', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #1b2129;
	text-align: left;
	border-left: 3px solid transparent;
	border-radius: 8px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav-mega .nav-simple-menu__link:hover,
.nav-mega .nav-simple-menu__link.is-active {
	background: #fef2f2;
	color: var(--kargon-red);
	border-left-color: var(--kargon-red);
}
.nav-mega .nav-simple-menu__link:hover .nav-simple-menu__icon,
.nav-mega .nav-simple-menu__link.is-active .nav-simple-menu__icon {
	background: var(--kargon-red);
	color: #fff;
}
.nav-mega .nav-simple-menu__link:hover .nav-simple-menu__arrow,
.nav-mega .nav-simple-menu__link.is-active .nav-simple-menu__arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--kargon-red);
}

/* Simple unified header dropdown menus */
:root { --nav-dropdown-width: 260px; }
.nav-simple-menu {
	width: var(--nav-dropdown-width);
	min-width: var(--nav-dropdown-width);
	max-width: calc(100vw - 2rem);
	background: #fff;
	border-radius: 8px;
	border: 1px solid #eee;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}
.nav-simple-menu--enhanced {
	padding: 0.4rem;
	border: 1px solid rgba(233, 67, 53, 0.12);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
	background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}
.nav-simple-menu--scroll {
	max-height: min(70vh, 480px);
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(233, 67, 53, 0.4) #f3f4f6;
}
.nav-simple-menu--scroll::-webkit-scrollbar { width: 6px; }
.nav-simple-menu--scroll::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 3px; }
.nav-simple-menu--scroll::-webkit-scrollbar-thumb {
	background: rgba(233, 67, 53, 0.35);
	border-radius: 3px;
}
.nav-simple-menu__section {
	margin: 0.35rem 0.5rem 0.25rem;
	padding: 0 0.25rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kargon-red);
}
.nav-simple-menu__section:not(:first-child) {
	margin-top: 0.65rem;
	padding-top: 0.5rem;
	border-top: 1px solid #eee;
}
.nav-simple-menu__link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 11px 12px;
	font-family: 'Karla', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: #1b2129;
	text-align: left;
	border-bottom: none;
	border-left: 3px solid transparent;
	border-radius: 6px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.nav-simple-menu:not(.nav-simple-menu--enhanced) .nav-simple-menu__link {
	display: block;
	padding: 14px 20px;
	font-weight: 700;
	border-bottom: 1px solid #eee;
	border-left: none;
	border-radius: 0;
}
.nav-simple-menu:not(.nav-simple-menu--enhanced) .nav-simple-menu__link:last-child { border-bottom: none; }
.nav-simple-menu__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 6px;
	background: rgba(233, 67, 53, 0.08);
	color: var(--kargon-red);
	transition: background 0.2s ease, color 0.2s ease;
}
.nav-simple-menu__text {
	flex: 1;
	min-width: 0;
	line-height: 1.3;
}
.nav-simple-menu__arrow {
	flex-shrink: 0;
	color: #d1d5db;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.nav-simple-menu__link:hover,
.nav-simple-menu__link.is-active {
	background: #fef2f2;
	color: var(--kargon-red);
	border-left-color: var(--kargon-red);
}
.nav-simple-menu:not(.nav-simple-menu--enhanced) .nav-simple-menu__link:hover,
.nav-simple-menu:not(.nav-simple-menu--enhanced) .nav-simple-menu__link.is-active {
	background: #f9fafb;
	border-left-color: transparent;
}
.nav-simple-menu__link:hover .nav-simple-menu__icon,
.nav-simple-menu__link.is-active .nav-simple-menu__icon {
	background: var(--kargon-red);
	color: #fff;
}
.nav-simple-menu__link:hover .nav-simple-menu__arrow,
.nav-simple-menu__link.is-active .nav-simple-menu__arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--kargon-red);
}
.nav-simple-menu__link--cta {
	margin-top: 0.25rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	background: rgba(233, 67, 53, 0.06);
	border-top: 1px solid rgba(233, 67, 53, 0.12);
	border-left-color: transparent;
	font-weight: 700;
	color: var(--kargon-red);
}
.nav-simple-menu__link--cta .nav-simple-menu__arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--kargon-red);
}
.nav-simple-menu__link--cta:hover,
.nav-simple-menu__link--cta.is-active {
	background: var(--kargon-red);
	color: #fff;
	border-left-color: transparent;
}
.nav-simple-menu__link--cta:hover .nav-simple-menu__arrow,
.nav-simple-menu__link--cta.is-active .nav-simple-menu__arrow {
	color: #fff;
}

/* Switch Country dropdown ? rich layout with flags & scroll */
.country-switcher-menu {
	width: 280px;
	max-height: min(70vh, 520px);
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px solid #fde68a;
	background: #fff;
	padding: 0.5rem;
	border-radius: 0.5rem;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	scrollbar-width: thin;
	scrollbar-color: rgba(233, 67, 53, 0.55) #f3f4f6;
	overscroll-behavior: contain;
}
.country-switcher-menu::-webkit-scrollbar { width: 8px; }
.country-switcher-menu::-webkit-scrollbar-track {
	background: #f3f4f6;
	border-radius: 4px;
}
.country-switcher-menu::-webkit-scrollbar-thumb {
	background: rgba(233, 67, 53, 0.45);
	border-radius: 4px;
}
.country-switcher-menu::-webkit-scrollbar-thumb:hover {
	background: rgba(233, 67, 53, 0.7);
}
.country-switcher-menu__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 0.75rem;
	min-height: 60px;
	border-radius: 0.375rem;
	transition: background 0.2s ease;
}
.country-switcher-menu__item:hover {
	background: #fffbeb;
}

.mobile-services-accordion__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	background: none;
	border: none;
	font: inherit;
	font-weight: 500;
	color: #000;
	cursor: pointer;
	text-align: left;
}
.mobile-services-accordion__toggle.is-active { color: var(--kargon-red); }
.mobile-services-accordion__chevron { transition: transform 0.3s ease; }
.mobile-services-accordion.is-open .mobile-services-accordion__chevron { transform: rotate(180deg); }
.mobile-services-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	opacity: 0;
	transition: grid-template-rows 0.35s ease, margin-top 0.3s ease, opacity 0.25s ease;
}
.mobile-services-accordion.is-open .mobile-services-accordion__panel {
	grid-template-rows: 1fr;
	margin-top: 0.75rem;
	opacity: 1;
}
.mobile-services-accordion__panel-inner {
	overflow: hidden;
	min-height: 0;
	padding: 0 0.75rem;
	border-radius: 0.75rem;
	background: #f8fafc;
	border: 1px solid transparent;
	transition: padding 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.mobile-services-accordion.is-open .mobile-services-accordion__panel-inner {
	padding: 0.75rem;
	border-color: #e5e7eb;
}
.mobile-services-accordion__link {
	display: block;
	padding: 0.75rem 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #1f2937;
	border-bottom: 1px solid #e5e7eb;
	transition: background 0.2s ease, color 0.2s ease;
}
.mobile-services-accordion__link:last-child { border-bottom: none; }
.mobile-services-accordion__link:hover,
.mobile-services-accordion__link.is-active {
	background: #fff;
	color: var(--kargon-red);
}

/* header offset since it's position: fixed (py-[19px]*2 + ~40px content) */
:root { --oecl-header-h: 78px; }
main { padding-top: var(--oecl-header-h); }

/* Full-viewport hero under fixed header ? mobile-first */
[data-hero-root],
.oecl-hero {
	position: relative;
	margin-top: calc(-1 * var(--oecl-header-h));
	min-height: 100svh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #000;
	color: #fff;
}
.oecl-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.oecl-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 2s ease, transform 2s ease;
	z-index: 0;
}
.oecl-hero__slide.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 1;
}
.oecl-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.oecl-hero__shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.65) 100%);
	pointer-events: none;
}
.oecl-hero__shell {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-height: 100svh;
	min-height: 100dvh;
	padding-top: var(--oecl-header-h);
	box-sizing: border-box;
}
.oecl-hero__content {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
	/* Horizontal padding matches the header's container (px-4 = 1rem) so the
	   hero title lines up with the logo above it. */
	padding: 1.5rem 1rem 1.25rem;
}
.oecl-hero__copy {
	width: 100%;
	max-width: 42rem;
}
.oecl-hero__title {
	margin: 0 0 0.85rem;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(1.6rem, 7vw, 2.5rem);
	font-weight: 600;
	line-height: 1.18;
	color: #f8fafc;
	text-wrap: balance;
}
.oecl-hero__desc {
	margin: 0 0 1.25rem;
	max-width: 34rem;
	font-size: clamp(0.95rem, 3.4vw, 1.15rem);
	line-height: 1.55;
	color: rgba(229, 231, 235, 0.95);
}
.oecl-hero__cta {
	display: flex;
}
.oecl-hero__cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 100%;
	padding: 1.35rem 1.8rem;
	border-radius: var(--oecl-cta-radius);
	background: linear-gradient(90deg, #dc2626, #b91c1c);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid rgba(239, 68, 68, 0.35);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.oecl-hero__cta-btn:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 16px 32px rgba(220, 38, 38, 0.28);
}
.oecl-hero__cta-arrow {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
}
.oecl-hero__cta-arrow {
	transition: transform 0.25s ease;
}
.oecl-hero__cta-btn:hover .oecl-hero__cta-arrow {
	transform: translateX(3px);
}
.oecl-hero__dots {
	display: none;
}
.oecl-hero__portals {
	flex-shrink: 0;
	width: 100%;
	padding: 0 1.15rem max(1.15rem, env(safe-area-inset-bottom, 0px));
}
.oecl-hero__portals-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem;
	width: 100%;
	max-width: 28rem;
	margin: 0 auto;
}
.oecl-hero__portal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 3.35rem;
	padding: 0.6rem 0.45rem;
	border-radius: var(--oecl-cta-radius);
	background: linear-gradient(135deg, #ef4444, #b91c1c);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}
.oecl-hero__portal:hover {
	color: #fff;
	transform: translateY(-2px);
}
.oecl-hero__portal-icon {
	display: inline-flex;
	padding: 0.2rem;
	border-radius: 0.3rem;
	background: rgba(255, 255, 255, 0.2);
}
.oecl-hero__portal-svg {
	width: 1rem;
	height: 1rem;
}
.oecl-hero__portal-label {
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}
@media (max-height: 620px) and (orientation: landscape) {
	.oecl-hero,
	.oecl-hero__shell {
		min-height: auto;
	}
	.oecl-hero__content {
		padding-top: 1rem;
		padding-bottom: 0.75rem;
		align-items: flex-start;
	}
.oecl-hero__title {
		font-size: 1.45rem;
		margin-bottom: 0.5rem;
	}
	.oecl-hero__desc {
		font-size: 0.9rem;
		margin-bottom: 0.75rem;
	}
	.oecl-hero__cta-btn {
		padding: 0.9rem 1.2rem;
		font-size: 1rem;
	}
	.oecl-hero__portal {
		min-height: 2.85rem;
		flex-direction: row;
		gap: 0.45rem;
	}
}
@media (min-width: 480px) {.oecl-hero__title {
		font-size: clamp(1.85rem, 5.5vw, 2.75rem);
	}
	.oecl-hero__cta-btn {
		width: auto;
		max-width: 28rem;
		padding: 1.45rem 2.1rem;
		font-size: 1.3rem;
	}
}
.oecl-gp-map-mask {
	height: 50px;
}
@media (min-width: 768px) {
	.oecl-gp-map-mask {
		/* Matches the map iframe's -125px crop offset so Google's toolbar chrome is fully hidden, not just partially. */
		height: 125px;
	}
}
@media (min-width: 768px) {
	.oecl-hero__content {
		/* Matches the header's md:px-6 = 1.5rem. */
		padding: 2rem 1.5rem 1.5rem;
	}
.oecl-hero__title {
		font-size: clamp(2.25rem, 4vw, 3.25rem);
		margin-bottom: 1rem;
	}
	.oecl-hero__desc {
		font-size: clamp(1.05rem, 2vw, 1.35rem);
		margin-bottom: 1.5rem;
		line-height: 1.6;
	}
	.oecl-hero__portals {
		padding: 0 2rem 1.5rem;
	}
	.oecl-hero__portal {
		min-height: 3.85rem;
	}
	.oecl-hero__portal-label {
		font-size: 0.8rem;
	}
}
@media (min-width: 1024px) {
	.oecl-hero,
	.oecl-hero__shell {
		min-height: 100vh;
		min-height: 100dvh;
	}
	.oecl-hero__content {
		/* Horizontal padding matches md:px-6 = 1.5rem, same as every other
		   breakpoint. Top padding nudged up slightly from 2.5rem so the title/
		   description/CTA block sits a touch lower, off the very top edge. */
		padding: 3.5rem 1.5rem 2rem 1.5rem;
	}
	.oecl-hero__copy {
		/* Wide enough that the title's clamp()-scaled font (which grows with
		   viewport width) still settles into 2 balanced lines instead of 3 —
		   48rem was fixed while the font kept growing past ~1400px wide. */
		max-width: 64rem;
	}
.oecl-hero__title {
		font-size: clamp(2.75rem, 3.5vw, 3.75rem);
	}
	.oecl-hero__portals {
		padding: 0 2rem 1.75rem;
	}
	.oecl-hero__shade {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.35) 100%);
	}
}

/* ---- Sections ------------------------------------------------------------ */
.section { padding: 4rem 0; }
.section-title { font-size: 2rem; margin-bottom: .75rem; }
.section-subtitle { color: #6b7280; max-width: 640px; margin: 0 auto 3rem; text-align: center; }
/* .grid-2/3/4 are legacy helpers for the old (non-Tailwind) form pages only
   (login/signup/forgot-password/dashboard) ? kept scoped to a private prefix
   so they can't collide with real Tailwind utility classes used elsewhere. */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
	.grid-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Hero ------------------------------------------------------------ */
.hero { position: relative; min-height: 600px; display: flex; align-items: center; color: #fff; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.35)); }
.hero-content { position: relative; z-index: 2; max-width: 640px; }
.hero-content h1 { font-size: 2.5rem; line-height: 1.15; margin-bottom: 1rem; }
.hero-content p { font-size: 1.1rem; color: rgba(255,255,255,.9); }
.hero-quicklinks { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .hero-content h1 { font-size: 3.25rem; } }

/* ---- Cards ------------------------------------------------------------ */
.service-card { position: relative; overflow: hidden; border-radius: .5rem; height: 260px; }
.service-card img { width: 100%; height: 100%; object-fit: cover; }
.service-card-overlay {
	position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
	padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; transition: all .3s ease;
}
.service-card:hover .service-card-overlay { background: linear-gradient(to top, rgba(233,67,53,.9), rgba(233,67,53,.6)); }
.service-card-icon {
	background: #fff; border-radius: 50%; padding: .75rem; width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; transition: transform .3s ease;
}
.service-card:hover .service-card-icon { transform: scale(1.1); }

.card { background: #fff; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); padding: 1.5rem; }
.blog-card { background: #fff; border-radius: .5rem; box-shadow: 0 1px 4px rgba(0,0,0,.1); overflow: hidden; transition: all .3s ease; }
.blog-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.12); transform: translateY(-4px); }
.blog-card img { height: 200px; object-fit: cover; width: 100%; }
.blog-card-body { padding: 1.25rem; }

.testimonial-card { background: #fff; border-radius: .75rem; padding: 1.75rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

.stat-card { text-align: center; color: #fff; }
.stat-card .stat-value { font-size: 2.5rem; font-weight: 800; color: var(--kargon-red); }

.numbered-process-item { position: relative; padding-left: 3.5rem; padding-bottom: 2rem; }
.numbered-process-item::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: #e5e7eb; }
.numbered-process-item:last-child::before { bottom: 2rem; }
.numbered-process-item .number {
	position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
	background: var(--kargon-red); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; z-index: 1;
}

/* ---- Forms ------------------------------------------------------------ */
.form-field { margin-bottom: 1rem; }
.form-field label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.form-field input, .form-field textarea, .form-field select {
	width: 100%; padding: .65rem .75rem; border: 1px solid #d1d5db; border-radius: .375rem; font: inherit; font-size: .95rem;
}
.form-field textarea { min-height: 120px; }
.form-notice { padding: .75rem 1rem; border-radius: .5rem; margin-bottom: 1rem; font-size: .9rem; }
.form-notice.success { background: #ecfdf5; color: #047857; }
.form-notice.error { background: #fef2f2; color: #b91c1c; }

/* ---- Footer ------------------------------------------------------------ */
.oecl-footer__grid {
	display: grid;
	gap: 2rem 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.oecl-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.oecl-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem 1.25rem;
	}
}
@media (min-width: 1280px) {
	.oecl-footer__grid {
		grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr)) 1.35fr;
		gap: 1.75rem 1.25rem;
		align-items: start;
	}
}
.oecl-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
}
.oecl-footer__logo-link {
	display: inline-block;
}
.oecl-footer__logo {
	height: 3.5rem;
	width: auto;
	object-fit: contain;
}
.oecl-footer__badge {
	display: inline-flex;
	align-items: center;
	border-radius: 0.375rem;
	background: #fff;
	padding: 0.5rem 0.75rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.oecl-footer__badge-img {
	height: 2rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
@media (min-width: 768px) {
	.oecl-footer__badge-img {
		height: 2.25rem;
	}
}
.oecl-footer__heading {
	margin: 0 0 1rem;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: #fff;
}
.oecl-footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.oecl-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.925rem;
	line-height: 1.4;
	transition: color 0.2s ease;
}
.oecl-footer__link:hover {
	color: var(--kargon-red);
}
.oecl-footer__link-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--kargon-red);
}
.oecl-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.oecl-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.925rem;
	line-height: 1.45;
	transition: color 0.2s ease;
}
.oecl-footer__contact-item:hover {
	color: var(--kargon-red);
}
.oecl-footer__contact-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
	color: var(--kargon-red);
}
.oecl-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}
.oecl-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 999px;
	background: #fff;
	color: #000;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.oecl-footer__social-link:hover {
	background: var(--kargon-red);
	color: #fff;
	transform: translateY(-2px);
}
.oecl-footer__social-icon {
	width: 1.05rem;
	height: 1.05rem;
}
.oecl-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	margin-top: 2.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	text-align: center;
}
@media (min-width: 768px) {
	.oecl-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}
.oecl-footer__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
}
.oecl-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	font-size: 0.875rem;
}
.oecl-footer__legal a {
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.2s ease;
}
.oecl-footer__legal a:hover {
	color: var(--kargon-red);
}
.oecl-footer__legal-sep {
	color: rgba(255, 255, 255, 0.35);
}

/* Legacy footer helpers (kept for older markup references) */
.site-footer { padding: 4rem 0 2rem; background: #000; color: #fff; }
.footer-divider { height: 4px; border-radius: 999px; background: linear-gradient(to right, #eab308, #facc15, #eab308); margin-bottom: 2rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-col h3 { font-weight: 700; font-size: 1.1rem; color: #fff; margin-bottom: 1rem; }
.footer-col p { color: rgba(255,255,255,.8); font-size: .95rem; max-width: 320px; }
.footer-social { display: flex; gap: .75rem; margin-top: 1rem; }
.footer-social a { background: #fff; color: #000; padding: .5rem; border-radius: 50%; display: flex; }
.footer-social a:hover { background: #eab308; }
.footer-links { display: flex; flex-direction: column; gap: .5rem; }
.footer-links a { color: rgba(255,255,255,.8); display: flex; align-items: center; gap: .5rem; }
.footer-links a:hover { color: #eab308; }
.footer-office-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.footer-office-next { background: #eab308; color: #000; padding: .4rem; border-radius: 50%; border: none; cursor: pointer; }
.footer-office-block { color: rgba(255,255,255,.8); }
.footer-office-block .office-name { font-weight: 600; color: #eab308; margin-bottom: .25rem; }
.footer-office-block .office-row { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; font-size: .9rem; }
.footer-office-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.footer-office-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.3); cursor: pointer; padding: 0; }
.footer-office-dots button.active { background: #eab308; }
.footer-bottom { text-align: center; color: rgba(255,255,255,.7); margin-top: 2.5rem; font-size: .875rem; }

/* Footer newsletter */
.oecl-newsletter {
	width: 100%;
	max-width: 22rem;
}
.oecl-newsletter__title {
	margin: 0 0 0.75rem;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
}
.oecl-newsletter__text {
	margin: 0 0 1.1rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
}
.oecl-newsletter__form {
	width: 100%;
}
.oecl-newsletter__row {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.oecl-newsletter__input {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0.55rem;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-family: 'Karla', sans-serif;
	font-size: 0.9rem;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.oecl-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}
.oecl-newsletter__input:focus {
	border-color: #e94335;
	background: rgba(255, 255, 255, 0.1);
}
.oecl-newsletter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.7rem 1.1rem;
	border: none;
	border-radius: var(--oecl-cta-radius);
	background: #e94335;
	color: #fff;
	font-family: 'Karla', sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.oecl-newsletter__btn:hover {
	background: #d13a2e;
}
.oecl-newsletter__btn-icon {
	width: 0.9rem;
	height: 0.9rem;
}
.oecl-newsletter__msg {
	margin: 0.65rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: #4ade80;
}
.oecl-newsletter__msg.is-error {
	color: #fca5a5;
}
@media (min-width: 480px) {
	.oecl-newsletter__row {
		flex-direction: row;
		align-items: stretch;
	}
	.oecl-newsletter__input {
		flex: 1;
		min-width: 0;
	}
	.oecl-newsletter__btn {
		flex-shrink: 0;
		white-space: nowrap;
	}
}
@media (min-width: 1024px) {
	.oecl-newsletter {
		max-width: 100%;
	}
}
@media (min-width: 1280px) {
	.oecl-footer__col--newsletter .oecl-newsletter__row {
		flex-direction: column;
		align-items: stretch;
	}
	.oecl-footer__col--newsletter .oecl-newsletter__btn {
		width: 100%;
	}
}

/* Homepage testimonials */
.oecl-testimonials {
	padding: 3.5rem 0;
	background: #fff;
}
.oecl-testimonials__header {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto 2.25rem;
}
.oecl-testimonials__title {
	margin: 0 0 0.85rem;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(1.7rem, 3vw, 2.25rem);
	font-weight: 600;
	line-height: 1.25;
	color: #1b2129;
}
.oecl-testimonials__rating {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: #6b7280;
}
.oecl-testimonials__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	max-width: 64rem;
	margin: 0 auto;
}
.oecl-testimonials__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 1.5rem 1.35rem 1.45rem;
	background: #f8fafc;
	border: 1px solid #eef2f7;
	border-radius: 1rem;
	box-shadow: 0 8px 20px rgba(27, 33, 41, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.oecl-testimonials__card:hover {
	transform: translateY(-3px);
	border-color: rgba(233, 67, 53, 0.16);
	box-shadow: 0 12px 28px rgba(233, 67, 53, 0.08);
}
.oecl-testimonials__stars {
	display: flex;
	align-items: center;
	gap: 0.28rem;
	margin-bottom: 1rem;
	color: var(--kargon-red);
}
.oecl-testimonials__star-wrap {
	position: relative;
	display: inline-flex;
	width: 1.1rem;
	height: 1.1rem;
	line-height: 0;
}
.oecl-testimonials__star {
	width: 1.1rem;
	height: 1.1rem;
	display: block;
}
.oecl-testimonials__star-wrap--full .oecl-testimonials__star {
	fill: currentColor;
	stroke: currentColor;
}
.oecl-testimonials__star-wrap--empty .oecl-testimonials__star {
	fill: none;
	stroke: currentColor;
	opacity: 0.35;
}
.oecl-testimonials__star-wrap--partial .oecl-testimonials__star-base,
.oecl-testimonials__star-wrap--partial .oecl-testimonials__star-fill {
	position: absolute;
	inset: 0;
}
.oecl-testimonials__star-wrap--partial .oecl-testimonials__star-base .oecl-testimonials__star {
	fill: none;
	stroke: currentColor;
	opacity: 0.35;
}
.oecl-testimonials__star-wrap--partial .oecl-testimonials__star-fill {
	overflow: hidden;
	width: var(--star-fill, 80%);
}
.oecl-testimonials__star-wrap--partial .oecl-testimonials__star-fill .oecl-testimonials__star {
	fill: currentColor;
	stroke: currentColor;
}
.oecl-testimonials__quote {
	flex: 1;
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.7;
	color: #374151;
}
.oecl-testimonials__footer {
	margin-top: 1.35rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}
.oecl-testimonials__author {
	margin: 0 0 0.2rem;
	font-family: 'Karla', sans-serif;
	font-size: 0.98rem;
	font-weight: 700;
	color: #1b2129;
}
.oecl-testimonials__role {
	margin: 0;
	font-size: 0.875rem;
	color: #6b7280;
}
@media (min-width: 768px) {
	.oecl-testimonials {
		padding: 4.75rem 0;
	}
	.oecl-testimonials__header {
		margin-bottom: 2.75rem;
	}
	.oecl-testimonials__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
	.oecl-testimonials__card {
		padding: 1.75rem 1.6rem 1.7rem;
	}
	.oecl-testimonials__quote {
		font-size: 1.02rem;
	}
}
@media (max-width: 639px) {
	.oecl-testimonials {
		padding: 3rem 0;
	}
	.oecl-testimonials__header {
		margin-bottom: 1.75rem;
	}
	.oecl-testimonials__card {
		padding: 1.25rem 1.15rem 1.3rem;
	}
}

/* Homepage FAQ */
.oecl-faq {
	padding: 3.5rem 0;
	background: #f1f5f9;
}
.oecl-faq__header {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 2rem;
}
.oecl-faq__eyebrow {
	display: inline-block;
	margin-bottom: 0.7rem;
	font-family: 'Karla', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kargon-red);
}
.oecl-faq__title {
	margin: 0 0 0.75rem;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 600;
	line-height: 1.2;
	color: #1b2129;
}
.oecl-faq__subtitle {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: #6b7280;
}
.oecl-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	max-width: 46rem;
	margin: 0 auto;
}
.oecl-faq-item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.9rem;
	box-shadow: 0 6px 18px rgba(27, 33, 41, 0.04);
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.oecl-faq-item.is-open {
	border-color: rgba(233, 67, 53, 0.22);
	box-shadow: 0 10px 24px rgba(233, 67, 53, 0.08);
}
.oecl-faq-item__toggle {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.15rem 1.2rem;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font-family: 'Karla', sans-serif;
	color: #1b2129;
	transition: color 0.2s ease, background 0.2s ease;
}
.oecl-faq-item__toggle:hover {
	color: var(--kargon-red);
	background: rgba(233, 67, 53, 0.03);
}
.oecl-faq-item__question {
	flex: 1;
	min-width: 0;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.45;
}
.oecl-faq-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	margin-top: 0.05rem;
	border-radius: 9999px;
	background: rgba(233, 67, 53, 0.08);
	color: var(--kargon-red);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease;
}
.oecl-faq-item.is-open .oecl-faq-item__icon {
	transform: rotate(180deg);
	background: rgba(233, 67, 53, 0.14);
}
.oecl-faq-item__chevron {
	width: 1.05rem;
	height: 1.05rem;
}
.oecl-faq-item__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.oecl-faq-item.is-open .oecl-faq-item__panel {
	grid-template-rows: 1fr;
}
.oecl-faq-item__body {
	overflow: hidden;
	min-height: 0;
	padding: 0 1.2rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: #4b5563;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.28s ease, transform 0.28s ease, padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.oecl-faq-item.is-open .oecl-faq-item__body {
	padding: 0 1.2rem 1.25rem;
	opacity: 1;
	transform: translateY(0);
}
@media (min-width: 768px) {
	.oecl-faq {
		padding: 4.75rem 0;
	}
	.oecl-faq__header {
		margin-bottom: 2.5rem;
	}
	.oecl-faq__list {
		gap: 1rem;
	}
	.oecl-faq-item__toggle {
		padding: 1.3rem 1.5rem;
		gap: 1.25rem;
	}
	.oecl-faq-item__question {
		font-size: 1.05rem;
	}
	.oecl-faq-item__body {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		font-size: 1rem;
	}
	.oecl-faq-item.is-open .oecl-faq-item__body {
		padding: 0 1.5rem 1.45rem;
	}
}
@media (max-width: 639px) {
	.oecl-faq {
		padding: 3rem 0;
	}
	.oecl-faq__header {
		margin-bottom: 1.5rem;
	}
	.oecl-faq-item__toggle {
		padding: 1.05rem 1rem;
	}
	.oecl-faq-item__question {
		font-size: 0.94rem;
	}
	.oecl-faq-item__body,
	.oecl-faq-item.is-open .oecl-faq-item__body {
		font-size: 0.9rem;
	}
	.oecl-faq-item.is-open .oecl-faq-item__body {
		padding: 0 1rem 1.15rem;
	}
}

/* Certificates grid ? existing certificate images */
.oecl-certs {
	padding: 3.5rem 0;
	background-color: rgb(248, 250, 252);
}
.oecl-certs__header {
	text-align: center;
	margin-bottom: 2rem;
}
.oecl-certs__title {
	margin: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 600;
	color: #1b2129;
	line-height: 1.2;
}
.oecl-certs__rule {
	width: 4.5rem;
	height: 3px;
	margin: 0.85rem auto 0;
	border-radius: 9999px;
	background: linear-gradient(90deg, var(--kargon-red), #f59e0b);
}
.oecl-certs__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.oecl-certs__card {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.15rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	box-shadow: 0 8px 22px rgba(27, 33, 41, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.oecl-certs__card:hover {
	transform: translateY(-4px);
	border-color: rgba(233, 67, 53, 0.2);
	box-shadow: 0 14px 30px rgba(233, 67, 53, 0.1);
}
.oecl-certs__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 28rem;
	object-fit: contain;
}
@media (min-width: 640px) {
	.oecl-certs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.35rem;
	}
	.oecl-certs__card {
		padding: 1.35rem;
	}
}
@media (min-width: 1024px) {
	.oecl-certs {
		padding: 4.5rem 0;
	}
	.oecl-certs__header {
		margin-bottom: 2.5rem;
	}
	.oecl-certs__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
	.oecl-certs__card {
		padding: 1.5rem;
	}
	.oecl-certs__img {
		max-height: 26rem;
	}
}
@media (max-width: 639px) {
	.oecl-certs {
		padding: 2.75rem 0;
	}
	.oecl-certs__header {
		margin-bottom: 1.5rem;
	}
	.oecl-certs__card {
		padding: 1rem;
	}
	.oecl-certs__img {
		max-height: 22rem;
	}
}

/* Homepage CTA banner */
.oecl-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 4.25rem 0;
}
.oecl-cta__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.oecl-cta__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
}
.oecl-cta__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(120deg, rgba(27, 33, 41, 0.94) 0%, rgba(27, 33, 41, 0.82) 48%, rgba(233, 67, 53, 0.55) 100%),
		linear-gradient(0deg, rgba(27, 33, 41, 0.55), rgba(27, 33, 41, 0.35));
}
.oecl-cta__glow {
	position: absolute;
	width: 28rem;
	height: 28rem;
	right: -8rem;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(233, 67, 53, 0.35) 0%, rgba(233, 67, 53, 0) 70%);
	pointer-events: none;
}
.oecl-cta__panel {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
	padding: 2.25rem 1.35rem 2.15rem;
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.oecl-cta__title {
	margin: 0 0 0.9rem;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(1.85rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}
.oecl-cta__text {
	margin: 0 auto 1.75rem;
	max-width: 34rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.88);
}
.oecl-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 0.85rem;
}
.oecl-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.8rem 1.35rem;
	border-radius: var(--oecl-cta-radius);
	font-family: 'Karla', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.oecl-cta__btn-icon {
	width: 1.1rem;
	height: 1.1rem;
	transition: transform 0.2s ease;
}
.oecl-cta__btn--primary {
	background: var(--kargon-red);
	color: #fff;
	box-shadow: 0 10px 28px rgba(233, 67, 53, 0.35);
}
.oecl-cta__btn--primary:hover {
	background: #d13a2d;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(233, 67, 53, 0.42);
}
.oecl-cta__btn--primary:hover .oecl-cta__btn-icon {
	transform: translateX(3px);
}
@media (min-width: 768px) {
	.oecl-cta {
		padding: 5.5rem 0;
	}
	.oecl-cta__panel {
		padding: 2.85rem 2.5rem 2.5rem;
	}
	.oecl-cta__text {
		font-size: 1.125rem;
		margin-bottom: 2rem;
	}
	.oecl-cta__btn {
		min-height: 3.25rem;
		padding: 0.9rem 1.55rem;
		font-size: 1rem;
	}
}
@media (max-width: 639px) {
	.oecl-cta {
		padding: 3.25rem 0;
	}
	.oecl-cta__panel {
		padding: 1.65rem 1.1rem 1.5rem;
		border-radius: 1rem;
	}
	.oecl-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.oecl-cta__btn {
		width: 100%;
	}
	.oecl-cta__glow {
		width: 18rem;
		height: 18rem;
		right: -6rem;
		opacity: 0.8;
	}
}

/* Our Process ? sequential timeline */
.oecl-process {
	padding: 4.5rem 0;
	background: #f7f8fa;
}
.oecl-process__header {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 2.75rem;
}
.oecl-process__title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 600;
	color: #1b2129;
	line-height: 1.2;
	margin: 0;
}
.oecl-process__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
.oecl-process__step {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: 1rem;
	align-items: stretch;
}
.oecl-process__rail {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.oecl-process__node {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: #1b2129;
	color: #fff;
	font-family: 'Karla', sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	box-shadow: 0 0 0 4px #f7f8fa;
}
.oecl-process__line {
	flex: 1;
	width: 2px;
	min-height: 1.5rem;
	margin: 0.35rem 0 0;
	background: #d1d5db;
}
.oecl-process__step:last-child .oecl-process__line {
	display: none;
}
.oecl-process__body {
	min-width: 0;
	padding: 1.25rem 1.15rem 1.35rem;
	margin-bottom: 1.25rem;
	background: #fff;
	border: 1px solid rgba(27, 33, 41, 0.08);
	border-radius: 0.75rem;
}
.oecl-process__step:last-child .oecl-process__body {
	margin-bottom: 0;
}
.oecl-process__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1b2129;
	margin-bottom: 0.55rem;
}
.oecl-process__icon-svg {
	width: 1.35rem;
	height: 1.35rem;
}
.oecl-process__step-title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #1b2129;
	margin: 0 0 0.4rem;
	line-height: 1.3;
}
.oecl-process__step-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #6b7280;
}
@media (min-width: 1024px) {
	.oecl-process {
		padding: 5.5rem 0;
	}
	.oecl-process__header {
		margin-bottom: 3.5rem;
	}
	.oecl-process__track {
		grid-template-columns: repeat(var(--oecl-process-cols, 4), minmax(0, 1fr));
		gap: 0 1.25rem;
		align-items: start;
	}
	.oecl-process__step {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		grid-template-columns: none;
		gap: 0;
		text-align: center;
		height: 100%;
	}
	.oecl-process__rail {
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin-bottom: 1.35rem;
		min-height: 2.75rem;
	}
	.oecl-process__node {
		width: 3rem;
		height: 3rem;
		font-size: 0.875rem;
		margin: 0 auto;
		box-shadow: 0 0 0 6px #f7f8fa;
	}
	.oecl-process__step:not(:last-child) .oecl-process__rail {
		padding-right: 0;
	}
	.oecl-process__line {
		position: absolute;
		left: calc(50% + 1.5rem);
		right: calc(-50% - 1.25rem + 1.5rem);
		top: 50%;
		width: auto;
		height: 2px;
		min-height: 0;
		margin: 0;
		flex: none;
		transform: translateY(-50%);
		background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 100%);
	}
	.oecl-process__line::after {
		content: '';
		position: absolute;
		right: -1px;
		top: 50%;
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 6px solid #9ca3af;
		transform: translateY(-50%);
	}
	.oecl-process__body {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 0;
		padding: 1.5rem 1.15rem 1.6rem;
	}
	.oecl-process__step:last-child .oecl-process__body {
		margin-bottom: 0;
	}
	.oecl-process__icon {
		margin-bottom: 0.7rem;
	}
	.oecl-process__icon-svg {
		width: 1.5rem;
		height: 1.5rem;
	}
.oecl-process__step-title {
		font-size: 1.125rem;
		margin-bottom: 0.55rem;
	}
	.oecl-process__step-desc {
		max-width: none;
	}
}
@media (max-width: 1023px) {
	.oecl-process {
		padding: 3.5rem 0;
	}
	.oecl-process__header {
		margin-bottom: 2rem;
	}
}

/* Detailing */
.oecl-detailing {
	padding: 4.5rem 0;
	background: #fff;
}
.oecl-detailing__header {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 2.75rem;
}
.oecl-detailing__eyebrow,
.oecl-specialized__eyebrow,
.oecl-community__eyebrow {
	display: inline-block;
	font-family: 'Karla', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kargon-red);
	margin-bottom: 0.75rem;
}
.oecl-detailing__title,
.oecl-specialized__title,
.oecl-community__title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 600;
	color: #1b2129;
	line-height: 1.2;
	margin: 0 0 0.85rem;
}
.oecl-detailing__subtitle,
.oecl-specialized__subtitle,
.oecl-community__subtitle {
	margin: 0 auto;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.65;
	color: #6b7280;
}
.oecl-detailing__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.oecl-detailing__card {
	padding: 1.5rem 1.35rem;
	border: 1px solid rgba(27, 33, 41, 0.06);
	border-radius: 1rem;
	background: #f8fafc;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.oecl-detailing__card:hover {
	transform: translateY(-3px);
	border-color: rgba(233, 67, 53, 0.18);
	box-shadow: 0 12px 28px rgba(233, 67, 53, 0.08);
	background: #fff;
}
.oecl-detailing__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: 0.85rem;
	background: rgba(233, 67, 53, 0.08);
	color: var(--kargon-red);
}
.oecl-detailing__icon-svg {
	width: 1.35rem;
	height: 1.35rem;
}
.oecl-detailing__card-title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #1b2129;
	margin: 0 0 0.5rem;
}
.oecl-detailing__card-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4b5563;
}
@media (min-width: 640px) {
	.oecl-detailing__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.35rem;
	}
}
@media (min-width: 1024px) {
	.oecl-detailing {
		padding: 5.5rem 0;
	}
	.oecl-detailing__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
	.oecl-detailing__grid--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.oecl-detailing__grid--9 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Specialized */
.oecl-specialized {
	padding: 4.5rem 0;
	background: #f1f5f9;
}
.oecl-specialized__header {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 2.75rem;
}
.oecl-specialized__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.oecl-specialized__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem 1.35rem 1.65rem;
	background: #fff;
	border: 1px solid rgba(27, 33, 41, 0.06);
	border-radius: 1rem;
	box-shadow: 0 8px 24px rgba(27, 33, 41, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.oecl-specialized__card:hover {
	transform: translateY(-4px);
	border-color: rgba(233, 67, 53, 0.18);
	box-shadow: 0 14px 32px rgba(233, 67, 53, 0.08);
}
.oecl-specialized__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1rem;
	border-radius: 9999px;
	background: rgba(233, 67, 53, 0.1);
	color: var(--kargon-red);
}
.oecl-specialized__icon-svg {
	width: 1.4rem;
	height: 1.4rem;
}
.oecl-specialized__card-title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #1b2129;
	margin: 0 0 0.55rem;
}
.oecl-specialized__card-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4b5563;
	flex: 1;
}
@media (min-width: 640px) {
	.oecl-specialized__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.oecl-specialized {
		padding: 5.5rem 0;
	}
	.oecl-specialized__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
	.oecl-specialized__grid--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Global Community ? responsive country grid */
.oecl-community {
	padding: 3.5rem 0 3.25rem;
	background: #0a0a0a;
	color: #fff;
	overflow: hidden;
}
.oecl-community__header {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 2rem;
}
.oecl-community__title {
	color: #fff;
}
.oecl-community__subtitle {
	color: rgba(255, 255, 255, 0.72);
}
.oecl-community__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}
.oecl-community__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.3rem;
	min-width: 0;
	padding: 1rem 0.95rem;
	border-radius: 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	text-decoration: none;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.oecl-community__card:hover {
	background: rgba(233, 67, 53, 0.14);
	border-color: rgba(233, 67, 53, 0.45);
	transform: translateY(-2px);
	color: #fff;
}
.oecl-community__flag {
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 0.3rem;
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	margin-bottom: 0.25rem;
	flex-shrink: 0;
}
.oecl-community__flag--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	color: #f6b100;
}
.oecl-community__name {
	font-family: 'Karla', sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	word-break: break-word;
}
.oecl-community__company {
	font-size: 0.7rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
}
.oecl-community__cta {
	text-align: center;
	margin-top: 1.75rem;
}
.oecl-community__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 22rem;
	padding: 0.85rem 1.25rem;
	border-radius: var(--oecl-cta-radius);
	background: var(--kargon-red);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(233, 67, 53, 0.28);
	transition: background 0.25s ease, transform 0.25s ease;
}
.oecl-community__btn:hover {
	background: #d13a2e;
	color: #fff;
	transform: translateY(-1px);
}
@media (min-width: 640px) {
	.oecl-community__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.9rem;
	}
	.oecl-community__btn {
		width: auto;
	}
}
@media (min-width: 768px) {
	.oecl-community {
		padding: 4.5rem 0 4rem;
	}
	.oecl-community__header {
		margin-bottom: 2.5rem;
	}
	.oecl-community__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}
	.oecl-community__card {
		padding: 1.15rem 1.1rem;
	}
	.oecl-community__name {
		font-size: 0.95rem;
	}
}
@media (min-width: 1024px) {
	.oecl-community {
		padding: 5.5rem 0 4.5rem;
	}
	.oecl-community__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1.1rem;
	}
}
@media (min-width: 1280px) {
	.oecl-community__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ---- Utility ------------------------------------------------------------
   NOTE: generic names that collide with real Tailwind utility classes
   (.container, .text-center, .grid, .flex, .items-center, .justify-between,
   .gap-2, .gap-4, .text-white, .mt-0, .mb-0) were removed from this file ?
   this stylesheet loads *after* the real Tailwind build, so an unconditional
   rule here would silently win over Tailwind's responsive (lg:/md:) variants
   of the same class name sitewide. Tailwind's own build now provides those.
   ---------------------------------------------------------------------- */
.text-muted { color: #6b7280; }
.bg-dark { background: var(--kargon-dark); color: #fff; }

/* .bg-kargon-dark and its gradient (from-/via-/to-) variants aren't in the
   compiled Tailwind build — that build was generated once from the original
   React source, and these exact class combinations were introduced later in
   new PHP templates, so the static compiler never saw them. Defined here
   using Tailwind's own gradient CSS-variable mechanism so they compose
   correctly with the (working) .bg-gradient-to-r base rule. */
.bg-kargon-dark { background-color: #1b2129; }
.from-kargon-dark { --tw-gradient-from: #1b2129 var(--tw-gradient-from-position); --tw-gradient-to: rgba(27,33,41,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-kargon-dark\/90 { --tw-gradient-to: rgba(27,33,41,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(27,33,41,.9) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.via-kargon-dark\/80 { --tw-gradient-to: rgba(27,33,41,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(27,33,41,.8) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-kargon-dark\/70 { --tw-gradient-to: rgba(27,33,41,.7) var(--tw-gradient-to-position); }
.to-kargon-dark\/60 { --tw-gradient-to: rgba(27,33,41,.6) var(--tw-gradient-to-position); }
.to-kargon-dark\/50 { --tw-gradient-to: rgba(27,33,41,.5) var(--tw-gradient-to-position); }
.to-kargon-dark { --tw-gradient-to: #1b2129 var(--tw-gradient-to-position); }

/* Service page hero — a dedicated, guaranteed-correct class instead of composing
   Tailwind gradient utilities (see note above), used identically across all 9
   service pages. Uniform overlay (not left-to-right) so centered text stays
   readable against the photo everywhere, not just on one side. */
.oecl-service-hero { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: center; padding: 7.5rem 0 4.5rem; }
.oecl-service-hero__bg { position: absolute; inset: 0; }
.oecl-service-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.oecl-service-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,33,41,.85) 0%, rgba(27,33,41,.8) 55%, rgba(27,33,41,.9) 100%); }
/* Air Freight's hero photo should stay clearly visible rather than being
   muted under the default dark scrim — lighter overlay, a slight clarity
   boost on the image itself, and a text-shadow safety net so the heading
   stays readable against the brighter photo. Scoped to this page only. */
.oecl-service-hero--bright .oecl-service-hero__overlay { background: linear-gradient(180deg, rgba(27,33,41,.55) 0%, rgba(27,33,41,.45) 55%, rgba(27,33,41,.62) 100%); }
.oecl-service-hero--bright .oecl-service-hero__bg img { filter: contrast(1.08) saturate(1.15); }
.oecl-service-hero--bright .oecl-service-hero__content h1,
.oecl-service-hero--bright .oecl-service-hero__content p { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.oecl-service-hero__content { position: relative; z-index: 2; width: 100%; }
.oecl-service-rich h1, .oecl-service-rich h2, .oecl-service-rich h3 { text-wrap: balance; }
@media (min-width: 768px) { .oecl-service-hero { min-height: 520px; } }

/* Tagline: light neutral (not red-400) so it stays legible against both the
   dark and bright hero overlays instead of washing out to low-contrast pink. */
.oecl-service-hero__tagline {
	color: rgba(229, 231, 235, 0.95);
}
/* Slightly smaller than the homepage hero CTA it shares a class with. */
.oecl-service-hero__cta .oecl-hero__cta-btn {
	padding: 0.8rem 1.2rem;
	font-size: 0.95rem;
}

/* Service page FAQ — plain native <details>/<summary>, no JS needed. Uses its
   own class name (was accidentally reusing .oecl-faq-item from the unrelated
   homepage FAQ accordion, whose CSS makes closed answers opacity:0 instead of
   actually hidden, leaving invisible text still taking up layout space). */
.oecl-svc-faq { overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.oecl-svc-faq[open] { border-color: rgba(233, 67, 53, .25); box-shadow: 0 8px 20px rgba(233, 67, 53, .08); }
.oecl-svc-faq__summary { list-style: none; }
.oecl-svc-faq__summary::-webkit-details-marker { display: none; }
/* .hover\:bg-gray-50 is missing from the compiled build (same static-scan gap
   as everything else on this page), so the summary's own hover state is
   defined directly here instead of depending on that utility class. */
.oecl-svc-faq__summary:hover { background: #f9fafb; }
.oecl-svc-faq__chevron { transition: transform .3s ease; }
.oecl-svc-faq[open] .oecl-svc-faq__chevron { transform: rotate(180deg); }
/* Proper breathing room between the question and the answer when expanded —
   .pb-5 (and any pt-* we'd have paired with it) isn't in the compiled build,
   so this is hand-written rather than composed from utility classes. */
.oecl-svc-faq__answer { padding: 0.5rem 1.5rem 1.25rem; }

/* Global Presence page — country accordion cards. Same native <details>/
   <summary> chevron pattern as .oecl-svc-faq above. */
.oecl-gp-country__summary { list-style: none; }
.oecl-gp-country__summary::-webkit-details-marker { display: none; }
.oecl-gp-country__chevron { transition: transform .2s ease; }
.oecl-gp-country[open] .oecl-gp-country__chevron { transform: rotate(180deg); }

/* Global Presence page — "partner of One Global Logistics" closing section.
   A card (matching the map/sidebar cards above it on this page) with the
   logo left / content right on tablet+, stacked and centered on mobile. */
.oecl-gp-partner__card {
	background: #fff;
	border: 1px solid #f3f4f6;
	border-radius: 1.5rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	padding: 2rem 1.5rem;
}
.oecl-gp-partner__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}
.oecl-gp-partner__logo {
	flex-shrink: 0;
	display: inline-block;
	transition: opacity 0.2s ease;
}
.oecl-gp-partner__logo:hover { opacity: 0.85; }
/* Same h-* w-auto convention as the identical logo in header.php. */
.oecl-gp-partner__logo-img { height: 2.75rem; width: auto; display: block; }
.oecl-gp-partner__divider {
	display: none;
}
.oecl-gp-partner__content { flex: 1 1 auto; min-width: 0; width: 100%; }
.oecl-gp-partner__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1b2129;
}
.oecl-gp-partner__lead {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #4b5563;
	text-align: left;
}
.oecl-gp-partner__countries {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}
.oecl-gp-partner__country {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.95rem;
	border: 1px solid #fecaca;
	border-radius: 9999px;
	background: #fff;
	color: #1b2129;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.oecl-gp-partner__country:hover {
	background: #e94335;
	border-color: #e94335;
	color: #fff;
}
@media (min-width: 768px) {
	.oecl-gp-partner__card {
		padding: 2.75rem 3rem;
	}
	.oecl-gp-partner__row {
		flex-direction: row;
		align-items: center;
		gap: 2.5rem;
		text-align: left;
	}
	.oecl-gp-partner__logo-img { height: 3.25rem; }
	.oecl-gp-partner__divider {
		display: block;
		align-self: stretch;
		width: 1px;
		background: #e5e7eb;
	}
	.oecl-gp-partner__title {
		font-size: 1.75rem;
		text-align: left;
	}
}

/* .text-red-400 isn't in the compiled build either — used for the hero badge
   label and tagline text. */
.text-red-400 { color: #f87171; }

.page-hero { background: var(--kargon-dark); color: #fff; padding: 6rem 0 3rem; text-align: center; }
.page-hero h1 { font-size: 2.25rem; }

.dashicons { font-size: 24px; width: 24px; height: 24px; }

/* Service page "Industries We Serve" — 4-column card grid (md:grid-cols-4
   isn't in the compiled Tailwind build, so hand-written). At 8 industries
   this is exactly 2 rows, no wrapping/scrolling needed to see them all. */
.oecl-industries-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
}
@media (min-width: 640px) {
	.oecl-industries-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.oecl-industries-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.5rem 1rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 0.75rem;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.oecl-industries-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}