/* =========================================================
   Base / reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* `overflow-x: clip` — NOT `hidden`. Setting overflow-x to hidden forces
   the computed overflow-y to `auto`, which turns html/body into a scroll
   container and silently disables `position: sticky` for every element on
   the site. `clip` stops the same horizontal overflow without creating a
   scroll container, so sticky keeps working. */
/* scroll-behavior only turns on after window "load" (see frontend.js) —
   left unconditionally "smooth" here, the browser's own scroll-position
   restore on a page refresh gets animated too, so refreshing a page you'd
   scrolled down visibly glides back down instead of landing instantly. */
html.infinitas-smooth-scroll { scroll-behavior: smooth; }
html { overflow-x: clip; }
body {
	margin: 0;
	overflow-x: clip;
	font-family: var( --infinitas-font-body, 'DM Sans' ), sans-serif;
	font-size: var( --infinitas-body-size, 15px );
	font-weight: var( --infinitas-body-weight, 400 );
	line-height: var( --infinitas-body-line, 1.6 );
	color: var( --infinitas-body-color, #0D1630 );
	background: var( --infinitas-color-page_bg, #fff );
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	margin: 0 0 0.5em;
}
h1 { font-size: var( --infinitas-h1-size-mobile, 34px ); font-weight: var( --infinitas-h1-weight, 700 ); line-height: var( --infinitas-h1-line, 1.1 ); color: var( --infinitas-h1-color, #060C1A ); }
h2 { font-size: var( --infinitas-h2-size-mobile, 26px ); font-weight: var( --infinitas-h2-weight, 700 ); line-height: var( --infinitas-h2-line, 1.15 ); color: var( --infinitas-h2-color, #060C1A ); }
h3 { font-size: var( --infinitas-h3-size-mobile, 24px ); font-weight: var( --infinitas-h3-weight, 700 ); line-height: var( --infinitas-h3-line, 1.17 ); color: var( --infinitas-h3-color, #060C1A ); }
h4 { font-size: var( --infinitas-h4-size-mobile, 22px ); font-weight: var( --infinitas-h4-weight, 700 ); line-height: var( --infinitas-h4-line, 1.19 ); color: var( --infinitas-h4-color, #060C1A ); }
h5 { font-size: var( --infinitas-h5-size-mobile, 20px ); font-weight: var( --infinitas-h5-weight, 600 ); line-height: var( --infinitas-h5-line, 1.21 ); color: var( --infinitas-h5-color, #060C1A ); }
h6 { font-size: var( --infinitas-h6-size-mobile, 18px ); font-weight: var( --infinitas-h6-weight, 700 ); line-height: var( --infinitas-h6-line, 1.26 ); color: var( --infinitas-h6-color, #060C1A ); }

@media ( min-width: 768px ) {
	h1 { font-size: var( --infinitas-h1-size-tablet, 50px ); }
	h2 { font-size: var( --infinitas-h2-size-tablet, 32px ); }
	h3 { font-size: var( --infinitas-h3-size-tablet, 30px ); }
	h4 { font-size: var( --infinitas-h4-size-tablet, 26px ); }
	h5 { font-size: var( --infinitas-h5-size-tablet, 24px ); }
	h6 { font-size: var( --infinitas-h6-size-tablet, 20px ); }
}
@media ( min-width: 1024px ) {
	h1 { font-size: var( --infinitas-h1-size-desktop, 64px ); }
	h2 { font-size: var( --infinitas-h2-size-desktop, 40px ); }
	h3 { font-size: var( --infinitas-h3-size-desktop, 36px ); }
	h4 { font-size: var( --infinitas-h4-size-desktop, 32px ); }
	h5 { font-size: var( --infinitas-h5-size-desktop, 29px ); }
	h6 { font-size: var( --infinitas-h6-size-desktop, 23px ); }
}

.infinitas-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.infinitas-section { padding: 64px 0; }
.infinitas-section--alt { background: var( --infinitas-color-alt_bg, #F5F7FA ); }
.infinitas-section--dark { background: var( --infinitas-color-dark_bg, #060C1A ); color: #fff; }

/* Eyebrow / section heading helpers, used by blocks */
.infinitas-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var( --infinitas-el-section-eyebrow-size-desktop, 14px );
	font-weight: var( --infinitas-el-section-eyebrow-weight, 700 );
	color: var( --infinitas-el-section-eyebrow-color, #1D50E0 );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --infinitas-color-brand, #1D50E0 ) 9%, transparent );
}
.infinitas-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
/* On dark sections that were already dark before any of this redesign
   work (ownership band, CTA) — same chip, just white instead of the
   brand-blue tint so it reads on a dark background. */
.infinitas-eyebrow--light {
	color: #fff;
	background: rgba( 255, 255, 255, 0.12 );
}

/* =========================================================
   Marquee ticker — a continuous CSS-only scroll, not tied to
   page scroll position. Used by the trust strip.
   ========================================================= */
@keyframes infinitas-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.infinitas-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
	mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.infinitas-marquee__track {
	display: flex;
	width: max-content;
	animation: infinitas-marquee 22s linear infinite;
}
@media ( prefers-reduced-motion: reduce ) {
	.infinitas-marquee__track { animation: none; }
}

/* =========================================================
   Scroll reveal
   ========================================================= */
.infinitas-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.infinitas-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media ( prefers-reduced-motion: reduce ) {
	.infinitas-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
.infinitas-section-title {
	font-size: var( --infinitas-el-section-title-size-mobile, 22px );
	font-weight: var( --infinitas-el-section-title-weight, 700 );
	line-height: var( --infinitas-el-section-title-line, 1.2 );
	color: var( --infinitas-el-section-title-color, #060C1A );
}
@media ( min-width: 1024px ) {
	.infinitas-section-title { font-size: var( --infinitas-el-section-title-size-desktop, 30px ); }
}
.infinitas-section-text {
	font-size: var( --infinitas-el-section-text-size-desktop, 15px );
	color: var( --infinitas-el-section-text-color, #64748B );
	max-width: 640px;
}

/* Shared by the Stats block and the About block's own stat grid. */
.infinitas-stat-item {
	text-align: center;
}
.infinitas-stat-item__value {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-size: var( --infinitas-el-stat-value-size-mobile, 24px );
	font-weight: var( --infinitas-el-stat-value-weight, 700 );
	color: var( --infinitas-el-stat-value-color, #1D50E0 );
	line-height: 1.1;
}
@media ( min-width: 1024px ) {
	.infinitas-stat-item__value { font-size: var( --infinitas-el-stat-value-size-desktop, 32px ); }
}
.infinitas-stat-item__label {
	margin-top: 6px;
	font-size: 13px;
	color: var( --infinitas-color-muted_text, #64748B );
}

/* =========================================================
   Buttons
   ========================================================= */
.infinitas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: var( --infinitas-el-button-text-size-desktop, 16px );
	font-weight: var( --infinitas-el-button-text-weight, 600 );
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
	cursor: pointer;
}
.infinitas-btn:hover { transform: translateY(-1px); }
/* Inline SVG arrow, swapped in for a trailing "→" by infinitas_button()
   — see inc/components.php. Inherits the button's colour via
   currentColor, so it works on every button style. */
.infinitas-btn__arrow {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	display: block;
	transition: transform 0.18s ease;
}
.infinitas-btn:hover .infinitas-btn__arrow { transform: translateX(3px); }
.infinitas-btn--solid {
	background: var( --infinitas-color-brand, #1D50E0 );
	border-color: var( --infinitas-color-brand, #1D50E0 );
	color: #fff;
}
.infinitas-btn--solid:hover {
	border-color: #fff;
}
.infinitas-btn--outline {
	background: transparent;
	border-color: var( --infinitas-color-brand, #1D50E0 );
	color: var( --infinitas-color-brand, #1D50E0 );
}
.infinitas-btn--outline:hover { background: var( --infinitas-color-brand_tint, #E0EAFF ); }
/* Same outline button, adapted for dark sections (CTA, ownership band,
   the dark hero variant) — white instead of brand-blue. */
.infinitas-btn--outline-light {
	background: transparent;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	color: #fff;
}
.infinitas-btn--outline-light:hover {
	background: rgba( 255, 255, 255, 0.08 );
}
.infinitas-btn--text {
	background: transparent;
	color: var( --infinitas-color-text_link, #1D4ED8 );
	padding-left: 4px;
	padding-right: 4px;
}
.infinitas-btn--text:hover { text-decoration: underline; }

/* =========================================================
   Top bar
   ========================================================= */
.infinitas-topbar {
	background: var( --infinitas-color-dark_bg, #060C1A );
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 13px;
}
.infinitas-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 20px;
	gap: 20px;
	flex-wrap: wrap;
}
.infinitas-topbar__contact { display: flex; gap: 18px; }
.infinitas-topbar__contact a:hover { color: #fff; }

/* =========================================================
   Header
   ========================================================= */
.infinitas-header {
	background: #fff;
	border-bottom: 1px solid var( --infinitas-color-border, #E4E8F0 );
	position: relative;
}
.infinitas-header.is-sticky { position: sticky; top: 0; }
.infinitas-header.is-scrolled { box-shadow: 0 4px 20px rgba(6, 12, 26, 0.06); }

.infinitas-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* Left/right padding intentionally left unset here — it inherits
	   .infinitas-container's 0 20px, the same horizontal padding every
	   other section uses, so the header can never drift out of
	   alignment with the content below it. Only the vertical padding is
	   header-specific. */
	padding-top: 8px;
	padding-bottom: 8px;
}

.infinitas-header__logo img { max-height: 68px; width: auto; }
@media ( max-width: 1024px ) {
	.infinitas-header__logo img { max-height: 48px; }
}
.infinitas-header__logo span {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var( --infinitas-color-heading_text, #060C1A );
}

/* Landing template only — header floats transparently over the dark
   hero (fixed, out of document flow, so the hero's own background
   starts at the very top with no gap/bar above it, matching the
   reference), turning solid white once scrolled. Scoped to this one
   template so every other page keeps the normal solid header. */
body.infinitas-has-dark-hero .infinitas-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.3 );
	box-shadow: none;
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	z-index: 99 !important;
}
body.infinitas-has-dark-hero .infinitas-header.is-scrolled {
	background: var( --infinitas-color-page_bg, #fff );
	border-bottom-color: var( --infinitas-color-border, #E4E8F0 );
	box-shadow: 0 4px 20px rgba(6, 12, 26, 0.06);
}
body.infinitas-has-dark-hero .infinitas-header:not(.is-scrolled) .infinitas-header__logo span,
body.infinitas-has-dark-hero .infinitas-header:not(.is-scrolled) .infinitas-nav-menu a:not(.infinitas-btn) {
	color: #fff;
}
body.infinitas-has-dark-hero .infinitas-header:not(.is-scrolled) .infinitas-header__burger span {
	background: #fff;
}
/* Forces the logo image white while transparent, regardless of its own
   baked-in colors, then releases it back to normal once the header is
   solid white and the logo's real colors read fine again. */
body.infinitas-has-dark-hero .infinitas-header:not(.is-scrolled) .infinitas-header__logo img {
	filter: brightness( 0 ) invert( 1 );
}

.infinitas-nav-menu {
	display: flex;
	align-items: center;
	gap: 28px;
}
/* :not(.infinitas-btn) throughout — a bare `.infinitas-nav-menu a` beats
   `.infinitas-btn--solid` on specificity (0,1,1 vs 0,1,0), so it was
   repainting the mega menu's CTA button: dark text once the header
   scrolled solid, brand-blue-on-brand-blue on hover. Buttons inside the
   nav keep their own colours. */
.infinitas-nav-menu a:not(.infinitas-btn) {
	font-size: 14.5px;
	font-weight: 500;
	color: var( --infinitas-color-heading_text, #23231F );
}
.infinitas-nav-menu a:not(.infinitas-btn):hover,
.infinitas-nav-menu .current-menu-item > a:not(.infinitas-btn) { color: var( --infinitas-color-brand, #1D50E0 ); }

/* Small dropdown arrow next to any nav item that has a submenu or a mega
   menu — desktop only. Mobile has its own separate arrow further down
   (inside the max-width:900px block): the two used to both target the
   same ::after unscoped, and this one's :hover variant had higher
   specificity than the mobile default state, so on hover it silently
   won and rotated the arrow regardless of open/closed state — the
   actual cause of "the arrow moves on hover" on mobile. */
@media (min-width: 901px) {
	.infinitas-nav-menu .menu-item-has-children > a,
	.infinitas-nav-menu .infinitas-has-mega > a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.infinitas-nav-menu .menu-item-has-children > a::after,
	.infinitas-nav-menu .infinitas-has-mega > a::after {
		content: "";
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		margin-top: -3px;
		opacity: 0.55;
		transition: transform 0.2s;
	}
	.infinitas-nav-menu .infinitas-has-mega.is-open > a::after,
	.infinitas-nav-menu .infinitas-has-mega:hover > a::after,
	.infinitas-nav-menu .menu-item-has-children.is-open > a::after,
	.infinitas-nav-menu .menu-item-has-children:hover > a::after {
		transform: rotate(225deg);
		margin-top: 3px;
	}
}

/* Plain (non-mega) submenus, e.g. child pages added under a menu item in
   Appearance → Menus. */
.infinitas-nav-menu .menu-item-has-children {
	position: relative;
}
.infinitas-nav-menu .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	min-width: 210px;
	background: var( --infinitas-color-page_bg, #fff );
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 10px;
	box-shadow: 0 20px 45px rgba(6, 12, 26, 0.12);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 200;
}
.infinitas-nav-menu .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
/* Hover/focus-opening is a desktop-only interaction, scoped here on
   purpose — this selector's specificity (four classes) is higher than
   the mobile drawer's own "closed" rule (.infinitas-nav-menu .sub-menu,
   two classes), so left unscoped it would win the cascade at ANY
   width and force the mobile panel open on hover regardless of the
   .is-open class or JS state entirely — a pure-CSS bug, no JS involved. */
@media (min-width: 901px) {
	.infinitas-nav-menu .menu-item-has-children:hover > .sub-menu,
	.infinitas-nav-menu .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}
}
.infinitas-nav-menu .sub-menu li { margin: 0; }
.infinitas-nav-menu .sub-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	white-space: nowrap;
}
.infinitas-nav-menu .sub-menu a:hover { background: var( --infinitas-color-alt_bg, #F5F7FA ); }

@media (max-width: 900px) {
	/* The submenu becomes its own full-panel layer that slides in over
	   the main list, matching the drawer's own exact bounds — position:
	   fixed, not absolute. absolute + inset:0 would size this relative
	   to its nearest positioned ancestor, which is the small <li> itself
	   (only as tall as the "Services" row), not the drawer — that
	   mismatch is what produced an oversized/blank panel. */
	.infinitas-nav-menu .sub-menu {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(360px, 86vw);
		min-width: 0;
		background: var( --infinitas-color-dark_bg, #060C1A );
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding: 96px 24px 32px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(100%);
		transition: transform 0.28s ease;
		overflow-y: auto;
		z-index: 6;
	}
	.infinitas-nav-menu .menu-item-has-children.is-open > .sub-menu {
		transform: translateX(0);
	}
	.infinitas-nav-menu .sub-menu a { color: #fff; padding: 12px 0; }
	.infinitas-nav-menu .sub-menu a:hover { background: transparent; color: var( --infinitas-color-brand_light, #4F8EF7 ); }
}

.infinitas-header__actions { display: flex; align-items: center; gap: 14px; }

.infinitas-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.infinitas-header__burger span {
	display: block;
	height: 2px;
	background: var( --infinitas-color-heading_text, #060C1A );
	border-radius: 2px;
	transition: transform 0.2s, opacity 0.2s;
}
.infinitas-header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.infinitas-header__burger.is-open span:nth-child(2) { opacity: 0; }
.infinitas-header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hidden by default (desktop) — the "Back" button injected at the top
   of every submenu / mega menu panel (see initMobilePanelClose in
   frontend.js). The mobile media query below switches it to flex. */
.infinitas-nav-panel-close {
	display: none;
}

/* Hidden by default (desktop) — the drawer's own header row: logo on the
   left, close button on the right (markup in header.php, close wired in
   frontend.js). */
.infinitas-nav-close,
.infinitas-nav-head {
	display: none;
}

@media ( max-width: 900px ) {
	.infinitas-header__burger { display: flex; }

	/* Logo and close button share one row at the top of the drawer, so
	   the close sits inline beside the logo rather than floating over
	   the panel on its own. */
	/* position + z-index so the whole row (logo included) stays above the
	   submenu / mega-menu panels, which slide in as fixed layers at
	   z-index 6 covering the drawer. Previously only the close button
	   carried a z-index, so the logo disappeared behind an open panel. */
	.infinitas-nav-head {
		position: relative;
		z-index: 8;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 20px 24px;
		background: var( --infinitas-color-dark_bg, #060C1A );
		border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
	}
	.infinitas-nav-logo {
		display: inline-flex;
		align-items: center;
		min-width: 0;
	}
	.infinitas-nav-logo img {
		max-height: 34px;
		width: auto;
		display: block;
		/* The logo artwork is dark — force it white so it reads on the
		   dark drawer, same treatment as the transparent landing header. */
		filter: brightness( 0 ) invert( 1 );
	}
	.infinitas-nav-logo span {
		color: #fff;
		font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
		font-weight: 700;
		font-size: 17px;
	}

	.infinitas-nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: rgba( 255, 255, 255, 0.08 );
		border: none;
		color: #fff;
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
		z-index: 8;
	}

	/* Full-width slide-in panel, always the same dark colour whether
	   the header itself is transparent or scrolled-solid — it doesn't
	   inherit the header's own background at all. */
	.infinitas-header__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: none;
		background: var( --infinitas-color-dark_bg, #060C1A );
		border-bottom: none;
		overflow-y: auto;
		overflow-x: hidden;
		transform: translateX(100%);
		transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
		z-index: 999;
	}
	.infinitas-header__nav.is-open { transform: translateX(0); }
	/* 8px top, not 96px — that old value existed only to clear the close
	   button back when it was absolutely positioned over the drawer. The
	   logo/close row is in normal flow now, so the menu starts right
	   under it. */
	.infinitas-nav-menu {
		position: relative;
		flex-direction: column;
		align-items: stretch;
		padding: 8px 24px 32px;
		gap: 0;
	}
	/* :not(.infinitas-btn) here is NOT cosmetic — it's needed to win on
	   specificity. The desktop rule `.infinitas-nav-menu a:not(.infinitas-btn)`
	   is (0,2,1) and sets the dark heading colour; without the :not() this
	   selector is only (0,1,2), so the dark colour won and the drawer's
	   links went invisible against the dark panel. With it, this is
	   (0,2,2) and wins. Don't remove it.

	   display:flex + width:100% on every top-level link (not just the
	   ones with a dropdown) — an <a> is display:inline by default, which
	   would make border-bottom only wrap the text instead of spanning
	   the row. Verified: without this, "Home"/"Projects"/"Blog" get a
	   short divider matching their text width instead of the full row. */
	.infinitas-nav-menu > li > a:not(.infinitas-btn) {
		display: flex;
		width: 100%;
		color: #fff;
		padding: 15px 0;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
	}
	.infinitas-nav-menu > li:last-child > a:not(.infinitas-btn) { border-bottom: none; }
	.infinitas-nav-menu a:not(.infinitas-btn):hover,
	.infinitas-nav-menu .current-menu-item > a:not(.infinitas-btn) { color: var( --infinitas-color-brand_light, #4F8EF7 ); }
	.infinitas-header__actions .infinitas-btn { display: none; }

	/* The dropdown arrow: pushed to the far right of the row, an outline
	   chevron (not filled) pointing right — toward where its panel slides
	   in from — rotating to point down once open. Split across two
	   pseudo-elements on purpose: ::before is the vertical divider line
	   (stays fixed), ::after is only the chevron shape (rotates) — the
	   same element can't both rotate and keep an unrotated divider.
	   Explicit "order" on both: ::before generates BEFORE the label text
	   in flex order by default, so its margin-left:auto was pushing the
	   text along with it, shoving the whole row right instead of just
	   the divider+arrow — order:1/2 (text stays the default order:0)
	   places them after the text without changing their generated
	   content. No :hover variants here: on mobile the panel only opens
	   via the click toggle (see initDropdowns in frontend.js). */
	.infinitas-nav-menu .menu-item-has-children > a::before,
	.infinitas-nav-menu .infinitas-has-mega > a::before {
		content: "";
		order: 1;
		align-self: stretch;
		width: 1px;
		margin-left: auto;
		margin-right: 14px;
		background: rgba( 255, 255, 255, 0.2 );
	}
	.infinitas-nav-menu .menu-item-has-children > a::after,
	.infinitas-nav-menu .infinitas-has-mega > a::after {
		content: "";
		order: 2;
		flex: 0 0 auto;
		align-self: center;
		width: 7px;
		height: 7px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		border-top: none;
		border-left: none;
		transform: rotate(-45deg);
		opacity: 0.75;
		transition: transform 0.2s;
	}
	.infinitas-nav-menu .infinitas-has-mega.is-open > a::after,
	.infinitas-nav-menu .menu-item-has-children.is-open > a::after {
		transform: rotate(45deg);
	}

	/* Dividers between items inside an open submenu / mega menu layer. */
	.infinitas-nav-menu .sub-menu li:not(:last-child) > a {
		border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	}

	/* The "Back" button injected at the top of every panel (see
	   initMobilePanelClose in frontend.js) — display:none by default
	   above this media query, since it's only meant to be seen here,
	   where these panels are full-screen layers rather than hover
	   dropdowns. */
	.infinitas-nav-panel-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		flex: 0 0 auto;
		padding: 0;
		margin-bottom: 18px;
		border: none;
		border-radius: 50%;
		background: rgba( 255, 255, 255, 0.08 );
		color: #fff;
		cursor: pointer;
		transition: background 0.18s ease;
	}
	.infinitas-nav-panel-close:hover {
		background: rgba( 255, 255, 255, 0.16 );
	}
	.infinitas-nav-panel-close svg {
		width: 18px;
		height: 18px;
		display: block;
	}
}

body.infinitas-nav-locked {
	overflow: hidden;
}

/* =========================================================
   Footer
   ========================================================= */
.infinitas-footer {
	background: var( --infinitas-color-dark_bg, #060C1A );
	color: rgba( 255, 255, 255, 0.75 );
	padding-top: 60px;
}
.infinitas-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 32px;
	padding-bottom: 40px;
}
/* The logo artwork is dark-on-transparent, so it disappears against the
   dark footer — sit it on a light panel instead of shipping a second
   inverted logo file. */
.infinitas-footer__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --infinitas-color-page_bg, #fff );
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 16px;
}
.infinitas-footer__logo img { max-height: 40px; display: block; }
.infinitas-footer__desc { font-size: 14px; line-height: 1.7; margin-bottom: 18px; }
.infinitas-footer__social { display: flex; gap: 10px; }
.infinitas-footer__social a {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.13);
	border-radius: 50%;
	color: #fff;
}
.infinitas-footer__social a:hover { background: var( --infinitas-color-brand, #1D50E0 ); }

.infinitas-footer__col h4 {
	color: var( --infinitas-el-footer-column-title-color, #fff );
	font-size: var( --infinitas-el-footer-column-title-size-desktop, 16px );
	font-weight: var( --infinitas-el-footer-column-title-weight, 600 );
	margin-bottom: 16px;
}
.infinitas-footer__col ul li { margin-bottom: 10px; font-size: 14px; }
.infinitas-footer__col a:hover { color: #fff; }
.infinitas-footer__note { opacity: 0.6; font-size: 12px; }

/* Plain wordmark — sole element again now the SVG logotype's been
   removed, so this is back to its original (pre-SVG) size. */
.infinitas-footer__wordmark {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	font-size: clamp( 28px, 6vw, 88px );
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	text-align: center;
	margin: 24px 0 20px;
	word-break: break-word;
	animation: infinitas-wordmark-pulse 4s ease-in-out infinite;
}
@keyframes infinitas-wordmark-pulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}
@media ( prefers-reduced-motion: reduce ) {
	.infinitas-footer__wordmark { animation: none; opacity: 0.9; }
}
.infinitas-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 18px 0;
	font-size: 13px;
}
.infinitas-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.infinitas-footer__legal { display: flex; gap: 18px; }
.infinitas-footer__legal a:hover { color: #fff; }

@media ( max-width: 900px ) {
	.infinitas-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media ( max-width: 560px ) {
	.infinitas-footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   WhatsApp floating button
   ========================================================= */
.infinitas-whatsapp-btn {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
	z-index: 999;
}
.infinitas-whatsapp-btn.is-bouncing { animation: infinitas-bounce 0.6s ease 2; }
@keyframes infinitas-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* =========================================================
   Blog / single post basics
   ========================================================= */
.infinitas-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 60px 20px;
}
/* Bullet/numbered lists inside post content — the sitewide reset
   (ul{list-style:none}) is meant for nav/card lists, not body copy, so
   without this a blog post's <ul><li> had no visible marker at all. <ol>
   isn't touched by that reset, so numbered lists already showed numbers;
   this just gives it matching spacing. */
.infinitas-content ul {
	list-style: disc;
	padding-left: 22px;
	margin: 16px 0;
}
.infinitas-content ol {
	padding-left: 22px;
	margin: 16px 0;
}
.infinitas-content li {
	margin-bottom: 8px;
	line-height: 1.6;
}
.infinitas-content li::marker {
	color: var( --infinitas-color-brand, #1D50E0 );
}

/* =========================================================
   Policy pages (page-templates/page-policy.php) — Privacy Policy, Terms
   of Service, Cookie Policy. Shares .infinitas-content's width/padding;
   this just adds the brand-colour dot bullet used nowhere else on
   .infinitas-content (blog posts/project fallback keep plain bullets).
   ========================================================= */
.infinitas-policy-content h2 { margin-top: 2em; }
.infinitas-policy-content h2:first-child,
.infinitas-policy-content > *:first-child { margin-top: 0; }
.infinitas-policy-content ul,
.infinitas-policy-content ol {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}
.infinitas-policy-content ul li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 10px;
	line-height: 1.65;
}
.infinitas-policy-content ul li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.65em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --infinitas-color-brand, #1D50E0 );
}
.infinitas-policy-content ol {
	counter-reset: infinitas-policy-ol;
}
.infinitas-policy-content ol li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	line-height: 1.65;
	counter-increment: infinitas-policy-ol;
}
.infinitas-policy-content ol li::before {
	content: counter( infinitas-policy-ol ) '.';
	position: absolute;
	left: 0;
	color: var( --infinitas-color-brand, #1D50E0 );
	font-weight: 600;
}
.infinitas-post-list { display: grid; gap: 32px; grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; padding: 60px 20px; }
@media ( min-width: 700px ) {
	.infinitas-post-list { grid-template-columns: repeat( 2, 1fr ); }
}
.infinitas-post-card { border: 1px solid var( --infinitas-color-border, #E4E8F0 ); border-radius: 12px; overflow: hidden; }
/* No forced crop — the image shows at its own full natural size, same
   rule everywhere it appears (blog listing/category/tag, single post
   thumbnail, home page blog card — see infinitas-single-thumb below and
   the infinitas/blog-posts block, which follow the same width:100%;
   height:auto instead of their own aspect-ratio/object-fit override). */
.infinitas-post-card img { display: block; width: 100%; height: auto; }
.infinitas-single-thumb {
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 12px;
	overflow: hidden;
}
.infinitas-post-card__body { padding: 20px; }
.infinitas-post-card__body h2 {
	font-size: var( --infinitas-el-card-title-size-desktop, 18px );
	line-height: 1.3;
	margin: 0 0 8px;
}
.infinitas-post-card__meta { font-size: 12.5px; color: var( --infinitas-color-muted_text, #64748B ); margin-bottom: 6px; }

/* =========================================================
   Project detail page (single-project.php)
   ========================================================= */
.infinitas-project-detail__cover {
	margin-top: -40px;
	margin-bottom: 56px;
	position: relative;
	z-index: 2;
}
.infinitas-project-detail__cover img {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	border-radius: 18px;
	box-shadow: 0 30px 70px rgba( 6, 12, 26, 0.16 );
}
.infinitas-project-detail__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
	padding-bottom: 20px;
}
@media ( min-width: 900px ) {
	.infinitas-project-detail__layout { grid-template-columns: 1fr 300px; }
}
.infinitas-project-detail__main.infinitas-content {
	max-width: none;
	margin: 0;
	padding: 0;
}
.infinitas-project-detail__main h2 {
	font-size: 24px;
	margin: 1.4em 0 0.6em;
}
.infinitas-project-detail__main h2:first-child { margin-top: 0; }
.infinitas-project-detail__main ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1em; }
.infinitas-project-detail__main li { margin-bottom: 0.4em; }
.infinitas-project-detail__meta {
	background: var( --infinitas-color-alt_bg, #F5F7FA );
	border-radius: 16px;
	padding: 28px;
	display: grid;
	gap: 20px;
	align-content: start;
	position: sticky;
	top: 110px;
}
.infinitas-project-detail__meta-row { display: grid; gap: 4px; }
.infinitas-project-detail__meta-label {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --infinitas-color-muted_text, #64748B );
}
.infinitas-project-detail__meta-value {
	font-size: 15px;
	font-weight: 600;
	color: var( --infinitas-color-heading_text, #060C1A );
}
.infinitas-project-detail__visit { width: 100%; justify-content: center; }
.infinitas-project-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var( --infinitas-color-brand, #1D50E0 );
}
.infinitas-project-detail__back svg { width: 15px; height: 15px; }

/* "Keep exploring" (template-parts/related-projects.php) and "Related
   posts" (template-parts/related-posts.php) — flexbox instead of the
   shared grid, so however many related cards there are (the Projects/blog
   lists are still small) sit evenly in a single row rather than waiting
   for a min-width breakpoint to unlock more columns. Targets the direct
   <article> child generically so it works for both .infinitas-project-card
   and .infinitas-post-card. */
.infinitas-related-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: 24px;
}
.infinitas-related-row > article {
	flex: 1 1 300px;
	max-width: calc( 33.333% - 16px );
}
@media ( max-width: 700px ) {
	.infinitas-related-row > article {
		max-width: 100%;
	}
}

/* Blog layout — main column + sidebar (index.php, single.php, category.php,
   tag.php). .infinitas-content / .infinitas-post-list already carry their
   own centering/padding for standalone use elsewhere (e.g. page-service.php),
   so once nested in a grid column here that's redundant — cancelled below. */
.infinitas-blog-layout {
	max-width: 1240px;
	margin: 0 auto;
	padding: 60px 20px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}
@media ( min-width: 960px ) {
	.infinitas-blog-layout { grid-template-columns: 1fr 320px; }
}
.infinitas-blog-layout__main .infinitas-content,
.infinitas-blog-layout__main .infinitas-post-list {
	max-width: none;
	margin: 0;
	padding: 0;
}
.infinitas-blog-layout__sidebar {
	display: grid;
	gap: 28px;
	align-content: start;
}
.infinitas-widget {
	background: var( --infinitas-color-alt_bg, #F5F7FA );
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 14px;
	padding: 24px;
}
.infinitas-widget__title {
	font-size: 16px;
	font-weight: 700;
	color: var( --infinitas-color-heading_text, #060C1A );
	margin: 0 0 16px;
}
.infinitas-widget .search-form {
	display: flex;
	gap: 8px;
}
.infinitas-widget .search-form__label,
.infinitas-widget .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.infinitas-widget .search-field {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: var( --infinitas-color-page_bg, #fff );
	color: var( --infinitas-color-heading_text, #060C1A );
}
.infinitas-widget .search-submit {
	/* Icon-only button (searchform.php) — <button>/<input> elements don't
	   inherit typography from their surroundings by default the way an
	   <a> would, so the sitewide font has to be set here explicitly, even
	   though this button shows no visible text. */
	font-family: var( --infinitas-font-body, 'DM Sans' ), sans-serif;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var( --infinitas-color-brand, #1D50E0 );
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
}
.infinitas-widget .search-submit:hover {
	background: var( --infinitas-color-brand_hover, #123F9E );
}
.infinitas-widget .search-submit svg {
	width: 16px;
	height: 16px;
}
.infinitas-widget ul { display: grid; gap: 12px; }
.infinitas-widget li { font-size: 14px; }
.infinitas-widget a { color: var( --infinitas-color-heading_text, #060C1A ); }
.infinitas-widget a:hover { color: var( --infinitas-color-brand, #1D50E0 ); }
.infinitas-widget.widget_categories li { display: flex; justify-content: space-between; gap: 8px; }
.infinitas-widget.widget_tag_cloud .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.infinitas-widget.widget_tag_cloud .tagcloud a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var( --infinitas-color-page_bg, #fff );
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	font-size: 13px !important;
	color: var( --infinitas-color-muted_text, #64748B );
}
.infinitas-widget.widget_tag_cloud .tagcloud a:hover {
	border-color: var( --infinitas-color-brand, #1D50E0 );
	color: var( --infinitas-color-brand, #1D50E0 );
}
.infinitas-recent-posts { display: grid; gap: 14px; }
.infinitas-recent-posts__item {
	display: flex;
	align-items: center;
	gap: 12px;
}
.infinitas-recent-posts__thumb {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: var( --infinitas-color-alt_bg, #F5F7FA );
}
.infinitas-recent-posts__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.infinitas-recent-posts__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}
.infinitas-recent-posts__link {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --infinitas-color-heading_text, #060C1A );
}
.infinitas-recent-posts__link:hover {
	color: var( --infinitas-color-brand, #1D50E0 );
}