/**
 * Linq Header & Footer — styles lifted from the standalone homepage.
 *
 * Everything is namespaced under .linq-hf so it cannot collide with the
 * theme's own .container / .nav / .btn rules.
 */

.linq-hf {
	--linq-blue: #00448F;
	--linq-blue-dark: #003573;
	--linq-ink: #1E1E1E;
	--linq-line: #E4E6EA;
	--linq-accent: #A8C6E8;
	--linq-font-display: 'Outfit', sans-serif;
	--linq-font-body: 'Poppins', sans-serif;
	--linq-container: 1224px;
	--linq-drawer-w: 420px;

	font-family: var(--linq-font-body);
	font-size: 15px;
	line-height: 1.75;
	color: var(--linq-ink);
	-webkit-font-smoothing: antialiased;
}

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

.linq-hf img {
	display: block;
	max-width: 100%;
}

.linq-hf a {
	color: inherit;
	text-decoration: none;
}

.linq-hf button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.linq-container {
	width: 100%;
	max-width: var(--linq-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- button ---------- */

.linq-hf .linq-btn {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	height: 54px;
	padding: 0 13px 0 27px;
	border-radius: 999px;
	background: var(--linq-blue);
	color: #fff;
	font-family: var(--linq-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.linq-hf .linq-btn:hover {
	background: var(--linq-blue-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 68, 143, .28);
	color: #fff;
}

.linq-btn__ic {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	transition: transform .25s ease;
}

.linq-btn:hover .linq-btn__ic {
	transform: translateX(3px);
}

.linq-btn__ic svg {
	width: 12px;
	height: 12px;
	stroke: var(--linq-blue);
	fill: none;
}

/* ============================================================
   HEADER
   ============================================================ */

.linq-header {
	height: 89px;
	background: #fff;
	border-bottom: 2px solid var(--linq-line);
	z-index: 60;
}

.linq-header--sticky {
	position: sticky;
	top: 0;
}

.linq-header .linq-container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.linq-brand img {
	width: 206px;
	height: 80px;
	object-fit: contain;
	margin-left: -43px;
}

.linq-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.linq-nav__list > li {
	position: relative;
}

.linq-nav__list > li > a {
	position: relative;
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--linq-ink);
	line-height: 1;
	padding-bottom: 8px;
}

.linq-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 0;
	background: var(--linq-blue);
	transition: width .3s ease;
}

.linq-nav__list > li > a:hover::after,
.linq-nav__list > li.is-active > a::after,
.linq-nav__list > li.current-menu-item > a::after,
.linq-nav__list > li.current-menu-ancestor > a::after {
	width: 100%;
}

/* Sub-menus — kept quiet so they read as part of the same bar. */
.linq-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--linq-line);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(16, 24, 32, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .24s ease, transform .24s ease, visibility .24s;
	z-index: 5;
}

.linq-nav__list li:hover > .linq-nav__sub,
.linq-nav__list li:focus-within > .linq-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.linq-hf .linq-nav__sub a {
	display: block;
	padding: 9px 20px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--linq-ink);
	transition: background .2s ease, color .2s ease;
}

.linq-hf .linq-nav__sub a:hover {
	background: rgba(0, 68, 143, .06);
	color: var(--linq-blue);
}

.linq-head-side {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Scoped so a theme's `.elementor button` reset cannot outrank it. */
.linq-hf .linq-burger {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--linq-line);
	background: transparent;
	color: var(--linq-ink);
	place-items: center;
	transition: background .24s ease, border-color .24s ease, color .24s ease;
}

.linq-hf .linq-burger:hover {
	background: var(--linq-blue);
	border-color: var(--linq-blue);
	color: #fff;
}

.linq-hf .linq-burger svg {
	width: 19px;
	height: 19px;
	fill: none;
}

/* ============================================================
   DRAWER — full-screen (as the source page) or side panel
   ============================================================ */

.linq-drawer {
	position: fixed;
	inset: 0;
	z-index: 950;
	visibility: hidden;
}

.linq-drawer.open {
	visibility: visible;
}

.linq-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 32, .55);
	opacity: 0;
	transition: opacity .5s ease;
}

.linq-drawer.open .linq-drawer__backdrop {
	opacity: 1;
}

.linq-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--linq-ink);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 8vw, 70px);
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: transform 700ms cubic-bezier(.76, 0, .24, 1);
}

/* These have to out-rank the closed-state rules below, which carry the
   variant classes and would otherwise win on specificity. */
.linq-drawer--full.open .linq-drawer__panel,
.linq-drawer--side.linq-drawer--left.open .linq-drawer__panel,
.linq-drawer--side.linq-drawer--right.open .linq-drawer__panel {
	transform: none;
}

/* Full-screen variant — the original behaviour. */
.linq-drawer--full .linq-drawer__panel {
	left: 0;
	right: 0;
	transform: translateY(-101%);
}

.linq-drawer--full .linq-drawer__backdrop {
	display: none;
}

/* Side variant. */
.linq-drawer--side .linq-drawer__panel {
	width: min(var(--linq-drawer-w, 420px), 86vw);
}

.linq-drawer--side.linq-drawer--right .linq-drawer__panel {
	right: 0;
	transform: translateX(101%);
}

.linq-drawer--side.linq-drawer--left .linq-drawer__panel {
	left: 0;
	transform: translateX(-101%);
}

.linq-drawer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.linq-hf .linq-drawer__nav a {
	font-family: var(--linq-font-display);
	font-weight: 600;
	font-size: clamp(26px, 7vw, 44px);
	color: #fff;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

/* The side panel is narrower, so the display size steps down. */
.linq-drawer--side .linq-drawer__nav a {
	font-size: clamp(20px, 5vw, 28px);
	padding: 13px 0;
}

.linq-hf .linq-drawer__nav a:hover {
	color: var(--linq-accent);
}

.linq-drawer__nav span {
	font-family: var(--linq-font-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .18em;
	color: var(--linq-accent);
}

.linq-drawer__sub {
	list-style: none;
	margin: 0;
	padding: 0 0 0 14px;
}

.linq-hf .linq-drawer__sub a {
	font-size: clamp(15px, 4vw, 18px);
	font-weight: 400;
	padding: 10px 0;
	color: rgba(255, 255, 255, .82);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.linq-drawer__close {
	position: absolute;
	top: clamp(24px, 4vw, 44px);
	right: clamp(24px, 4vw, 44px);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .28);
	background: transparent;
	color: #fff;
	display: grid;
	place-items: center;
	z-index: 2;
}

.linq-drawer__close:hover {
	background: var(--linq-blue);
	border-color: var(--linq-blue);
}

.linq-drawer__close svg {
	width: 20px;
	height: 20px;
	fill: none;
}

/* ============================================================
   FOOTER
   ============================================================ */

.linq-footer {
	background: var(--linq-blue);
	color: #fff;
	padding: 102px 0 0;
}

.linq-cta-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 40px;
}

.linq-cta-row--stacked {
	grid-template-columns: 1fr;
}

.linq-cta-row h2 {
	font-family: var(--linq-font-display);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.015em;
	margin: 0;
	color: #fff;
}

.linq-cta-row p {
	margin: 21px 0 0;
	font-size: 15px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .88);
	max-width: 480px;
}

/* Two buttons in one row, beside the copy. They keep their line on every
   size that has room, and wrap to their own line only when the footer is
   genuinely too narrow. */
.linq-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.linq-cta-row > .linq-cta-actions {
	justify-content: flex-end;
	align-self: center;
}

.linq-cta-row--stacked .linq-cta-actions {
	margin-top: 32px;
}

.linq-hf .linq-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 30px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font-family: var(--linq-font-body, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease;
}

.linq-hf .linq-cta-btn--solid {
	background: #fff;
	border-color: #fff;
	color: var(--linq-blue);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
}

.linq-hf .linq-cta-btn--solid:hover,
.linq-hf .linq-cta-btn--solid:focus-visible {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, .9);
	color: var(--linq-blue);
}

.linq-hf .linq-cta-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.linq-hf .linq-cta-btn--ghost:hover,
.linq-hf .linq-cta-btn--ghost:focus-visible {
	transform: translateY(-2px);
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.linq-footer-rule {
	height: 1px;
	background: rgba(255, 255, 255, .22);
	margin-top: 68px;
}

.linq-footer-cols {
	display: grid;
	grid-template-columns: 512px 360px 1fr;
	column-gap: 0;
	padding-top: 57px;
}

.linq-footer-cols img.linq-flogo {
	width: 98px;
	height: 38px;
	object-fit: contain;
}

.linq-footer-cols .linq-fdesc {
	margin: 24px 0 0;
	font-size: 13.5px;
	line-height: 1.74;
	color: rgba(255, 255, 255, .86);
	max-width: 380px;
}

.linq-socials {
	display: flex;
	gap: 10px;
	margin-top: 26px;
	flex-wrap: wrap;
}

.linq-hf .linq-socials a {
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 500;
	color: #fff;
	transition: background .25s ease, transform .25s ease;
}

.linq-hf .linq-socials a:hover {
	background: rgba(255, 255, 255, .32);
	transform: translateY(-2px);
}

.linq-socials svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.linq-footer-cols h4 {
	font-family: var(--linq-font-display);
	font-size: 17px;
	font-weight: 600;
	margin: 0;
	line-height: 1;
}

.linq-footer-cols ul {
	list-style: none;
	margin: 27px 0 0;
	padding: 0;
}

.linq-footer-cols li {
	margin-bottom: 12px;
	line-height: 1.5;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .9);
}

.linq-hf .linq-footer-cols li a {
	transition: opacity .2s ease;
}

.linq-hf .linq-footer-cols li a:hover {
	opacity: .7;
}

.linq-hf .linq-footer-cols li a.linq-u {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.linq-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .22);
	margin-top: 47px;
	padding: 26px 0 32px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .82);
}

/* ============================================================
   RESPONSIVE — matching the source page's breakpoints
   ============================================================ */

@media (max-width: 1240px) {
	.linq-brand img {
		margin-left: 0;
	}

	.linq-footer-cols {
		grid-template-columns: 1fr 1fr;
		row-gap: 48px;
	}
}

@media (max-width: 980px) {
	.linq-cta-row h2 {
		font-size: 36px;
	}

	/* Beside the copy there is no longer room for two buttons, so they move
	   under it instead of shrinking to nothing. */
	.linq-cta-row {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.linq-cta-row > .linq-cta-actions {
		justify-content: flex-start;
	}
}

@media (max-width: 680px) {
	.linq-container {
		padding: 0 18px;
	}

	.linq-brand img {
		width: 150px;
		height: 58px;
	}

	.linq-btn {
		height: 50px;
		padding: 0 12px 0 22px;
		font-size: 13px;
	}

	.linq-cta-row {
		grid-template-columns: 1fr;
	}

	.linq-cta-row h2 {
		font-size: 30px;
	}

	/* Full width buttons, stacked, so both stay comfortably tappable. */
	.linq-cta-actions {
		width: 100%;
		gap: 10px;
	}

	.linq-hf .linq-cta-btn {
		width: 100%;
		padding: 15px 22px;
		white-space: normal;
		text-align: center;
	}

	.linq-footer-cols {
		grid-template-columns: 1fr;
	}

	.linq-footer-bottom {
		flex-direction: column;
		gap: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.linq-hf *,
	.linq-drawer__panel,
	.linq-drawer__backdrop {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* Inside the Elementor editor the drawer must never trap the canvas. */
.elementor-editor-active .linq-drawer {
	pointer-events: none;
}

.elementor-editor-active .linq-drawer.open {
	pointer-events: auto;
}

/* ============================================================
   SCROLL REVEAL — lifted from the source page
   ============================================================ */

.linq-hf [data-anim] {
	opacity: 0;
	will-change: transform, opacity;
	transition:
		opacity var(--linq-anim-dur, .85s) cubic-bezier(.22, .68, .28, 1),
		transform var(--linq-anim-dur, .85s) cubic-bezier(.22, .68, .28, 1);
}

.linq-hf [data-anim="left"] {
	transform: translateX(-70px);
}

.linq-hf [data-anim="right"] {
	transform: translateX(70px);
}

.linq-hf [data-anim="up"] {
	transform: translateY(50px);
}

.linq-hf [data-anim="zoom"] {
	transform: scale(.92);
}

.linq-hf [data-anim="rotate"] {
	transform: rotate(-7deg) scale(.9) translateY(40px);
	transform-origin: 50% 100%;
}

.linq-hf [data-anim="rotate-r"] {
	transform: rotate(7deg) scale(.9) translateY(40px);
	transform-origin: 50% 100%;
}

.linq-hf [data-anim].is-in {
	opacity: 1;
	transform: none;
}

/* A side reveal parks the element outside the container. There is only room
   for the full 70px once the viewport is wider than the content plus its
   gutters; below that the travel is capped to the gutter so nothing can push
   the page sideways. The source page hid this with overflow-x on <html>, which
   would break the sticky header, so the distance is limited instead. */
@media (max-width: 1351px) {
	.linq-hf [data-anim="left"] {
		transform: translateX(-24px);
	}

	.linq-hf [data-anim="right"] {
		transform: translateX(24px);
	}
}

@media (max-width: 680px) {
	/* Sideways travel has no room on a phone at all, so it becomes a lift. */
	.linq-hf [data-anim="left"],
	.linq-hf [data-anim="right"] {
		transform: translateY(24px);
	}

	.linq-hf [data-anim="rotate"],
	.linq-hf [data-anim="rotate-r"] {
		transform: scale(.94) translateY(24px);
	}
}

/* Never leave content invisible if the script cannot run. The reveal is an
   enhancement; if the JS is missing, blocked or the widget was rendered after
   the observer was set up, the content must still be readable. */
.no-js .linq-hf [data-anim] {
	opacity: 1;
	transform: none;
}

/* Inside the Elementor editor nothing should ever be hidden. */
.elementor-editor-active .linq-hf [data-anim],
.elementor-editor-preview .linq-hf [data-anim] {
	opacity: 1 !important;
	transform: none !important;
}

/* A last-resort safety net: if the script never marks an element revealed,
   this brings it back a few seconds in rather than leaving a blank section. */
@keyframes linq-anim-failsafe {
	to {
		opacity: 1;
		transform: none;
	}
}

.linq-hf [data-anim]:not(.is-in) {
	animation: linq-anim-failsafe 1ms linear 6s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.linq-hf [data-anim] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}
