/* ==========================================================================
   Ollso+ custom styles
   Covers shapes/patterns that go beyond plain core-block styling:
   pill badges, the plus/cross mark, the process diagram, stat + portfolio
   rows, testimonial card, and footer wordmark.
   ========================================================================== */

:root {
	--ollso-navy: #1b1d36;
	--ollso-orange: #ff671f;
	--ollso-blue-grey: #bbc7d6;
	--ollso-ink: #16172c;
	--ollso-grey-pill: #e6e9ee;
}

html {
	scroll-behavior: smooth;
}

/* ---- WP core's wide-size cap doesn't reliably reach every alignwide block
   (columns in flex layout, groups nested in a non-constrained parent) ------ */
.alignwide {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Header floats over the hero on the front page ---------------------- */
.home header.wp-block-template-part {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	z-index: 20;
	background: transparent;
}
@media (max-width: 799px) {
	.home header.wp-block-template-part {
		top: 15px;
	}
	.ollso-nav-pill {
		box-sizing: border-box;
		height: 51px;
		align-items: center;
	}
}
.home .wp-site-blocks > main {
	margin-top: 0 !important;
}
/* WP's default block-gap adds margin-block-start:24px between every
   top-level section — but every section pattern already declares its own
   padding-top, so this just adds an unwanted extra gap on top of it. */
.wp-site-blocks > main > *:not(.ollso-hero-frame) {
	margin-block-start: 0 !important;
}
/* Tablet/mobile only: move the portfolio rows up to right after stats, and
   the client-logos strip up to right after the roadmap diagram — desktop
   keeps the normal DOM order (roadmap/portfolio/people/logos/testimonials). */
@media (max-width: 1199px) {
	.home .wp-site-blocks > main {
		display: flex;
		flex-direction: column;
	}
	/* Flex's default align-items:stretch is suppressed on any child that has
	   auto side-margins for its own centering (e.g. .ollso-hero-shell) — that
	   makes it shrink to content width instead of filling main. Force full
	   width on every top-level section so this reordering is layout-neutral. */
	.home .wp-site-blocks > main > * {
		width: 100%;
	}
	.home .wp-site-blocks > main > .ollso-hero-frame { order: 1; }
	.home .wp-site-blocks > main > #about { order: 2; }
	.home .wp-site-blocks > main > .ollso-stats-section { order: 3; }
	.home .wp-site-blocks > main > #projects { order: 4; }
	.home .wp-site-blocks > main > .ollso-roadmap { order: 5; }
	.home .wp-site-blocks > main > .ollso-clients-section { order: 6; }
	.home .wp-site-blocks > main > .ollso-people-section { order: 7; }
	.home .wp-site-blocks > main > .ollso-testimonials-section { order: 8; }
	.home .wp-site-blocks > main > #contact { order: 9; }
}
.ollso-hero-frame {
	position: relative;
	margin-top: 40px !important;
	margin-bottom: 40px !important;
}
.wp-block-cover__video-background {
	object-fit: cover;
}
/* Core only gives .wp-block-cover__inner-container z-index:1 in some
   Gutenberg versions — without it, this stacks below .ollso-hero-shade
   (a sibling of the cover, not a descendant) and the gradient covers the
   title text instead of sitting behind it. Set it explicitly so the title
   always wins regardless of core's own default. */
.ollso-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}
/* Bottom-darkening overlay matching the mockup's inner-shadow effect
   (Figma: offset Y -367, blur 179.4, on a 1040px-tall frame — converted here
   to height-relative percentages so it scales at every breakpoint). */
.ollso-hero-shade {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 40px;
	right: 40px;
	margin: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: 62px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 18%, rgba(0, 0, 0, 0) 52%);
}
@media (max-width: 799px) {
	.ollso-hero-shade {
		left: 15px;
		right: 15px;
		border-radius: 35px;
	}
}

/* ---- Hero proportions ---------------------------------------------------- */
/* Poster frame shown behind the video while it loads (native `poster` isn't
   supported by core's Cover block markup, so this is the block-validation-
   safe way to keep it). */
.ollso-hero.wp-block-cover {
	background-image: url('/wp-content/uploads/2026/08/hero-poster.jpg');
	background-size: cover;
	background-position: center;
	height: 1000px;
}
.ollso-hero-plus {
	position: absolute;
	/* 2.5rem visual gap from the cover's own edge, plus the 2.5rem side
	   padding .ollso-hero-shell adds to the positioning ancestor (the icon
	   now anchors to the outer group, not the cover, so the cover's own
	   right edge sits 2.5rem inside the group's edge already). */
	right: 5rem;
	bottom: 2.5rem;
	width: 113px;
	height: 113px;
	z-index: 5;
}
.ollso-hero-plus .ollso-plus-rounded {
	width: 100% !important;
	height: 100% !important;
}

.ollso-hero-title {
	line-height: 110%;
	text-transform: capitalize;
	font-size: 45px !important;
	letter-spacing: -5%;
}


@media (max-width: 799px) {
	.ollso-hero.wp-block-cover {
		border-radius: 35px !important;
	}
	.ollso-hero-plus {
		bottom: 11rem;
	}
}
@media (min-width: 800px) and (max-width: 1199px) {
	.ollso-hero-plus {
		bottom: 13rem;
		width: 113px !important;
		height: 113px !important;
	}
}
@media (min-width: 1200px) {
	.ollso-hero-title {
		font-size: clamp(4.5rem, 5.9vw, 6.25rem) !important;
		line-height: 1.1 !important;
		letter-spacing: -5%;
	}
	.ollso-hero-plus {
		width: clamp(110px, 11.5vw, 222px) !important;
		height: clamp(110px, 11.5vw, 222px) !important;
	}
}

@media (max-width: 400px) {
	.ollso-hero {
		border-right: 25px !important;
	}

}
/* ---- Shared shell for header + hero: capped at 1920px, 40px inset -------- */
.ollso-hero-shell {
	box-sizing: border-box;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}

/* ---- Mobile menu dropdown ---------------------------------------------
   Replace WordPress core's full-screen modal with a small card that
   floats directly below the nav pill, matching the mockup. ------------ */
.ollso-nav-pill {
	position: relative;
}
.ollso-logo-link {
	display: flex;
	align-items: center;
	height: 21px;
}
/* Core sets position:relative on the <nav> itself, which sits between the
   pill and the modal in the DOM — it would otherwise become the containing
   block instead of the pill, throwing off the centering below. */
nav.ollso-nav-toggle {
	position: static !important;
}
.wp-block-navigation__responsive-container:has(.ollso-nav-toggle) {
	position: absolute !important;
	top: calc(100% + 12px) !important;
	bottom: auto !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: min(320px, calc(100vw - 48px)) !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 20px !important;
	box-shadow: 0 20px 45px rgba(27, 29, 54, 0.25);
	overflow: hidden;
}
.wp-block-navigation__responsive-container:has(.ollso-nav-toggle) .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container:has(.ollso-nav-toggle) .wp-block-navigation__responsive-dialog {
	position: static;
	width: 100%;
	height: auto;
}
.wp-block-navigation__responsive-container:has(.ollso-nav-toggle) .wp-block-navigation__responsive-container-close {
	/* Hidden — the hamburger button itself toggles closed via nav-toggle.js,
	   so no second close icon is shown (matches the mockup: one icon only). */
	display: none;
}
.wp-block-navigation__responsive-container:has(.ollso-nav-toggle) .wp-block-navigation__responsive-container-content {
	padding: 8px 12px;
}
.ollso-nav-toggle.wp-block-navigation__container {
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100% !important;
}
.wp-block-navigation__responsive-container:has(.ollso-nav-toggle) .wp-block-navigation__responsive-container-content {
	display: block !important;
}
.ollso-nav-toggle .wp-block-navigation-item {
	box-sizing: border-box;
	width: 100%;
	border-bottom: 1px solid rgba(255, 103, 31, 0.6);
}
.ollso-nav-toggle .wp-block-navigation-item .wp-block-navigation-item__content {
	display: block;
	padding: 14px 24px;
	text-align: center;
	text-decoration: none !important;
}
.ollso-nav-toggle .wp-block-navigation-item:last-child {
	border-bottom: none;
	padding: 12px 24px 16px;
}
.ollso-nav-toggle .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 24px;
	background: var(--ollso-orange);
	color: #fff;
	border-radius: 999px;
	font-weight: 600;
	box-sizing: border-box;
}
.ollso-nav-toggle .wp-block-navigation-item:last-child .wp-block-navigation-item__content::after {
	content: "";
	display: block;
	width: 12px;
	height: 13px;
	flex: 0 0 auto;
	background-color: #fff;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 19'><path d='M7.5752 1H9.4248C9.4295 1 9.45743 0.999552 9.49805 1.04492C9.54027 1.09211 9.58203 1.17755 9.58203 1.29297V5.88086C9.58203 7.03948 10.4456 8.17383 11.7383 8.17383H15.8438C15.849 8.17383 15.876 8.17401 15.916 8.21875C15.9582 8.26592 16 8.35049 16 8.46582V10.5342C16 10.6495 15.9582 10.7341 15.916 10.7812C15.876 10.826 15.849 10.8262 15.8438 10.8262H11.7383C10.4456 10.8262 9.58203 11.9605 9.58203 13.1191V17.707C9.58203 17.8224 9.54027 17.9079 9.49805 17.9551C9.45743 18.0004 9.4295 18 9.4248 18H7.5752C7.5705 18 7.54257 18.0005 7.50195 17.9551C7.45973 17.9079 7.41797 17.8224 7.41797 17.707V13.1191C7.41797 11.9605 6.5544 10.8262 5.26172 10.8262H1.15625C1.15099 10.8262 1.12403 10.826 1.08398 10.7812C1.04178 10.7341 1.00004 10.6495 1 10.5342V8.46582C1.00004 8.35049 1.04178 8.26592 1.08398 8.21875C1.12403 8.17402 1.15099 8.17384 1.15625 8.17383H5.26172C6.5544 8.17383 7.41797 7.03948 7.41797 5.88086V1.29297C7.41797 1.17755 7.45973 1.09211 7.50195 1.04492C7.52207 1.02245 7.53934 1.01157 7.55176 1.00586L7.5752 1Z' fill='black' stroke='black' stroke-width='2'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 19'><path d='M7.5752 1H9.4248C9.4295 1 9.45743 0.999552 9.49805 1.04492C9.54027 1.09211 9.58203 1.17755 9.58203 1.29297V5.88086C9.58203 7.03948 10.4456 8.17383 11.7383 8.17383H15.8438C15.849 8.17383 15.876 8.17401 15.916 8.21875C15.9582 8.26592 16 8.35049 16 8.46582V10.5342C16 10.6495 15.9582 10.7341 15.916 10.7812C15.876 10.826 15.849 10.8262 15.8438 10.8262H11.7383C10.4456 10.8262 9.58203 11.9605 9.58203 13.1191V17.707C9.58203 17.8224 9.54027 17.9079 9.49805 17.9551C9.45743 18.0004 9.4295 18 9.4248 18H7.5752C7.5705 18 7.54257 18.0005 7.50195 17.9551C7.45973 17.9079 7.41797 17.8224 7.41797 17.707V13.1191C7.41797 11.9605 6.5544 10.8262 5.26172 10.8262H1.15625C1.15099 10.8262 1.12403 10.826 1.08398 10.7812C1.04178 10.7341 1.00004 10.6495 1 10.5342V8.46582C1.00004 8.35049 1.04178 8.26592 1.08398 8.21875C1.12403 8.17402 1.15099 8.17384 1.15625 8.17383H5.26172C6.5544 8.17383 7.41797 7.03948 7.41797 5.88086V1.29297C7.41797 1.17755 7.45973 1.09211 7.50195 1.04492C7.52207 1.02245 7.53934 1.01157 7.55176 1.00586L7.5752 1Z' fill='black' stroke='black' stroke-width='2'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ---- "Book a Call" plus icon (header button + CTA section buttons) ---- */
.ollso-cta-with-icon {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}
.ollso-plus-inline {
	display: inline-flex;
	/* Matches the CTA text's 16px height; width follows the icon's own
	   17:19 aspect ratio (its SVG viewBox) so it isn't stretched. */
	height: 13px;
	width: calc(16px * 17 / 19);
}
.ollso-plus-inline svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- Nav pill --------------------------------------------------------
   Mobile (below 800px): 24px inset from the card edge on each side.
   Tablet (800px - 1199px): 48px inset from the card edge on each side.
   Desktop (1200px+): fixed 951px, centered, never grows or shrinks. --- */
.ollso-nav-pill {
	width: calc(100% - 48px);
	margin-left: auto;
	margin-right: auto;
}
.ollso-header-cta {
	display: none !important;
}
.ollso-header-cta .ollso-cta-with-icon {
	border-radius: 42px;
	padding: 10px;
}

/* ---- Nav links: forced breakpoint at 800px, independent of the
   navigation block's own auto-detected collapse point --------------- */
.ollso-nav-inline {
	display: none !important;
}
.ollso-nav-toggle {
	display: flex !important;
}

/* ---- Thicker 2-bar hamburger icon, matching the mockup's proportions
   (22px x 16px, bold bars) instead of WordPress core's thin default --- */
.ollso-nav-toggle .wp-block-navigation__responsive-container-open {
	padding: 0;
}
.ollso-nav-toggle .wp-block-navigation__responsive-container-open svg {
	display: none;
}
.ollso-nav-toggle .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 22px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'><path d='M19.3448 10.9141C20.8112 10.9141 22 12.0526 22 13.457C21.9998 14.8613 20.8111 16 19.3448 16H2.65517C1.18887 16 0.000177105 14.8613 0 13.457C0 12.0526 1.18876 10.9141 2.65517 10.9141H19.3448ZM19.3448 0C20.8112 0 22 1.13853 22 2.54297C22 3.94742 20.8112 5.08594 19.3448 5.08594H2.65517C1.18876 5.08594 0 3.94742 0 2.54297C0 1.13853 1.18876 0 2.65517 0H19.3448Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'><path d='M19.3448 10.9141C20.8112 10.9141 22 12.0526 22 13.457C21.9998 14.8613 20.8111 16 19.3448 16H2.65517C1.18887 16 0.000177105 14.8613 0 13.457C0 12.0526 1.18876 10.9141 2.65517 10.9141H19.3448ZM19.3448 0C20.8112 0 22 1.13853 22 2.54297C22 3.94742 20.8112 5.08594 19.3448 5.08594H2.65517C1.18876 5.08594 0 3.94742 0 2.54297C0 1.13853 1.18876 0 2.65517 0H19.3448Z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
@media (min-width: 800px) {
	.ollso-header-cta {
		display: flex !important;
	}
	.ollso-nav-pill {
		width: calc(100% - 96px);
		border-radius: 107px !important;
	}
	.ollso-nav-inline {
		display: flex !important;
	}
	.ollso-nav-toggle {
		display: none !important;
	}
}
@media (min-width: 1200px) {
	.ollso-nav-pill {
		width: 951px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 54px !important;
	}
}

/* ---- Header menu fades in on load (same opacity technique as the
   testimonials plus icon, but no scale/size change) ---------------------- */
.ollso-nav-pill {
	opacity: 0;
	transition: opacity 1s ease;
}
.ollso-nav-pill.is-visible {
	opacity: 1;
}

/* ---- Badges / pill tags ------------------------------------------------ */
.ollso-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 1.1rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.ollso-badge.is-orange { background: var(--ollso-orange); color: #fff; }
.ollso-badge.is-grey { background: var(--ollso-grey-pill); color: var(--ollso-ink); }
.ollso-badge.is-navy { background: var(--ollso-navy); color: #fff; }
.ollso-badge.is-outline { background: transparent; border: 1px solid currentColor; }

/* ---- Decorative plus / cross mark -------------------------------------- */
.ollso-plus {
	display: inline-block;
	width: var(--icon-size, 48px);
	height: var(--icon-size, 48px);
	color: var(--ollso-orange);
	line-height: 1;
}
.ollso-plus svg { display: block; width: 100%; height: 100%; }

/* ---- Intro section -------------------------------------------------------- */
.ollso-intro-caption {
	text-align: right;
	max-width: 340px;
	margin-left: auto;
}
.ollso-intro-plus {
	width: 113px;
	height: 113px;
}
.ollso-intro-plus .ollso-plus-rounded {
	width: 100% !important;
	height: 100% !important;
}
/* ---- Sections with 40px side padding drop to 15px on mobile ------------- */
@media (max-width: 799px) {
	.ollso-hero-frame,
	.ollso-testimonials-section,
	#projects,
	.ollso-stats-section {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.ollso-hero-frame {
		margin-top: 15px !important;
		margin-bottom: 15px !important;
	}
}
@media (max-width: 799px) {
	#about {
		padding-top: 15px !important;
		padding-bottom: 15px !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.ollso-intro-lead {
		font-size: 20px !important;
		font-weight: 600 !important;
	}
	.ollso-intro-footer {
		flex-direction: column;
		align-items: flex-start;
	}
	.ollso-intro-plus {
		margin-left: 20px !important;
	}
	.ollso-intro-caption {
		font-size: 15px !important;
		align-self: flex-end;
		margin-top: 60px !important;
	}
}

/* ---- Rounded-corner plus / cross mark (intro + hero) --------------------- */
.ollso-plus-rounded {
	display: inline-flex;
	width: var(--icon-size, 90px);
	height: var(--icon-size, 90px);
}
.ollso-plus-rounded svg { display: block; width: 100%; height: 100%; }

/* ---- Small solid plus mark (button icons) -------------------------------- */
.ollso-solid-plus {
	display: inline-flex;
	width: var(--icon-size, 14px);
	height: var(--icon-size, 14px);
}
.ollso-solid-plus svg { display: block; width: 100%; height: 100%; }

/* ---- Client logo strip: infinite left-scrolling marquee ----------------- */
.ollso-clients-section {
	display: flex;
	justify-content: center;
}
.ollso-clients-marquee {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.ollso-clients-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 40px;
	animation: ollso-clients-scroll 32s linear infinite;
}
.ollso-clients-logo {
	height: 56px;
	width: auto;
	flex: 0 0 auto;
}
@keyframes ollso-clients-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@media (min-width: 800px) and (max-width: 1199px) {
	.ollso-clients-section {
		padding-top: 100px !important;
		padding-bottom: 100px !important;
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	.ollso-clients-track {
		gap: 90px;
	}
}
@media (min-width: 1200px) {
	.ollso-clients-section {
		padding-top: 150px !important;
		padding-bottom: 150px !important;
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	.ollso-clients-track {
		gap: 145px;
	}
}

/* ---- Stat cards ---------------------------------------------------------- */
.ollso-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Progressively grows from 85px at 1280px wide up to 108px at 1920px. */
	gap: clamp(85px, calc(85px + (100vw - 1280px) * 0.0359375), 108px);
	max-width: 1236px;
}
/* Tablet (800px - 1199px): stack single column, matching the tablet mockup,
   instead of squeezing 3 across. */
@media (max-width: 1199px) {
	.ollso-stats-grid {
		grid-template-columns: 1fr;
		gap: 43px;
	}
}
@media (min-width: 800px) and (max-width: 1199px) {
	.ollso-stat-card {
		box-sizing: border-box;
		width: 100%;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
}
.ollso-stat-card {
	position: relative;
	background: transparent;
	border: 1px solid #1b1d36;
	border-radius: 59px;
	padding: 1.75rem;
	min-height: 340px;
	text-align: left;
	overflow: hidden;
	transition: background-color 0.25s ease;
}
.ollso-stat-card:hover {
	background: #1b1d36;
}
.ollso-stat-card .ollso-stat-text {
	position: relative;
	z-index: 1;
}
.ollso-stat-card .ollso-stat-top {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 0.5rem;
}
.ollso-stat-card .ollso-stat-suffix {
	white-space: nowrap;
}
.ollso-stat-card .ollso-stat-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 60px;
	line-height: 1;
	letter-spacing: 0;
	font-weight: 600;
	color: #1b1d36;
	white-space: nowrap;
	transition: color 0.25s ease;
}
.ollso-stat-card .ollso-stat-suffix {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 40px;
	line-height: 1;
	font-weight: 600;
	color: #1b1d36;
	transition: color 0.25s ease;
}
.ollso-stat-card .ollso-stat-label {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	line-height: 1;
	font-weight: 400;
	color: #1b1d36;
	text-align: right;
	transition: color 0.25s ease;
}
@media (max-width: 799px) {
	.ollso-stat-card .ollso-stat-number {
		font-size: 50px;
	}
	.ollso-stat-card .ollso-stat-label {
		font-size: 25px;
	}
}
@media (min-width: 1200px) {
	.ollso-stat-card {
		box-sizing: border-box;
		height: 321px;
		min-height: 321px;
	}
}
.ollso-stat-card:hover .ollso-stat-number,
.ollso-stat-card:hover .ollso-stat-suffix,
.ollso-stat-card:hover .ollso-stat-label {
	color: #fff;
}
.ollso-stat-card .ollso-stat-icon {
	transition: filter 0.25s ease;
}
.ollso-stat-card:hover .ollso-stat-icon {
	filter: brightness(0) invert(1);
}
/* Fixed size + position so every card's icon sits identically, regardless
   of how many lines the label above it wraps to. */
.ollso-stat-icon-wrap {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 236px;
	height: 190px;
}
.ollso-stat-icon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
}
/* Each breakpoint gets its own icon crop: mobile below 800px, tablet
   800px - 1199px, desktop 1200px+. */
.ollso-stat-icon-tablet,
.ollso-stat-icon-desktop {
	display: none;
}
.ollso-stat-icon-mobile {
	display: block;
}
@media (min-width: 800px) and (max-width: 1199px) {
	.ollso-stat-icon-mobile,
	.ollso-stat-icon-desktop {
		display: none;
	}
	.ollso-stat-icon-tablet {
		display: block;
	}
}
@media (min-width: 1200px) {
	.ollso-stat-icon-mobile,
	.ollso-stat-icon-tablet {
		display: none;
	}
	.ollso-stat-icon-desktop {
		display: block;
	}
	.ollso-stat-icon-wrap {
		width: 210px;
		height: 169px;
	}
}
@media (min-width: 1200px) {
	.ollso-intro-lead {
		max-width: 1520px;
	}
}

/* ---- Roadmap section title ------------------------------------------------ */
.ollso-roadmap-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	text-align: center;
	margin: 0 0 157px;
}
@media (min-width: 800px) and (max-width: 1199px) {
	.ollso-roadmap-title {
		font-size: 20px;
		font-weight: 700;
	}
}
@media (min-width: 1200px) {
	.ollso-roadmap-title {
		font-size: 50px;
		font-weight: 700;
		margin-bottom: 280px;
	}
}

/* ---- Process diagram (cross of squares) ---------------------------------- */
/* Total diagram box (6 cells + 5 gaps): 335px below 1200px, 635px at 1200px+. */
.ollso-diagram-wrap {
	--gap: 6px;
	--cell: calc((335px - 5 * var(--gap)) / 6);
	position: relative;
	width: max-content;
	margin: 0 auto;
}
.ollso-diagram {
	display: grid;
	grid-template-columns: repeat(6, var(--cell));
	grid-template-rows: repeat(6, var(--cell));
	gap: var(--gap);
	justify-content: center;
	margin: 0 auto;
}
.ollso-diagram .cell {
	border: 1px solid #fff;
	border-radius: 6px;
	transition: background-color 0.25s ease;
}
.ollso-diagram .cell.is-node {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 6px;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 400;
	color: #fff;
	border-color: #fff;
	cursor: pointer;
}
@media (min-width: 1200px) {
	.ollso-diagram .cell.is-node {
		padding: 10px;
		font-size: 30px;
	}
}
.ollso-diagram .n01 { grid-column: 3; grid-row: 1; }
.ollso-diagram .c01b { grid-column: 4; grid-row: 1; }
.ollso-diagram .c-3-2 { grid-column: 3; grid-row: 2; }
.ollso-diagram .c-4-2 { grid-column: 4; grid-row: 2; }
.ollso-diagram .row3 { grid-row: 3; }
.ollso-diagram .row4 { grid-row: 4; }
.ollso-diagram .n04 { grid-column: 1; grid-row: 4; }
.ollso-diagram .n02 { grid-column: 6; grid-row: 4; }
.ollso-diagram .c-3-5 { grid-column: 3; grid-row: 5; }
.ollso-diagram .c-4-5 { grid-column: 4; grid-row: 5; }
.ollso-diagram .n03 { grid-column: 3; grid-row: 6; }
.ollso-diagram .c03b { grid-column: 4; grid-row: 6; }

/* ---- Roadmap hover phases (desktop only) --------------------------------- */
.ollso-phase {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.ollso-phase-icon {
	position: absolute;
	display: block;
	width: 130px;
	height: auto;
}
.ollso-phase-text {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: max-content;
	max-width: 380px;
}
.ollso-phase-text h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 25px;
	color: #fff;
	margin: 0 0 4px;
}
.ollso-badge.is-outline-light {
	background: #fff;
	color: var(--ollso-navy);
}
.ollso-phase-text .ollso-badge.is-outline-light {
	box-sizing: border-box;
	height: 40px;
	padding: 10px 20px;
	border-radius: 64px;
}
@media (min-width: 1200px) {
	.ollso-phase-text h3 {
		font-size: 30px;
	}
	.ollso-phase-text .ollso-badge.is-outline-light {
		height: 36px;
		padding: 5px 20px;
	}
}
.ollso-hover-zone {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

@media (min-width: 1200px) {
	.ollso-roadmap {
		padding-top: 90px !important;
		padding-bottom: 220px !important;
	}
	.ollso-diagram-wrap { --gap: 14px; --cell: calc((635px - 5 * var(--gap)) / 6); }

	.ollso-hover-zone {
		width: calc(2 * var(--cell) + var(--gap));
		height: calc(2 * var(--cell) + var(--gap));
		cursor: pointer;
	}
	.ollso-hover-zone-01 { left: calc(2 * (var(--cell) + var(--gap))); top: 0; }
	.ollso-hover-zone-02 { left: calc(4 * (var(--cell) + var(--gap))); top: calc(2 * (var(--cell) + var(--gap))); }
	.ollso-hover-zone-03 { left: calc(2 * (var(--cell) + var(--gap))); top: calc(4 * (var(--cell) + var(--gap))); }
	.ollso-hover-zone-04 { left: 0; top: calc(2 * (var(--cell) + var(--gap))); }

	.ollso-phase-01 .ollso-phase-icon { left: calc(2 * (var(--cell) + var(--gap)) + var(--cell) - 65px); top: calc(-166px - var(--gap)); }
	.ollso-phase-01 .ollso-phase-text { left: calc(4 * (var(--cell) + var(--gap))); bottom: calc(-2 * (var(--cell) + var(--gap)) + var(--gap)); align-items: flex-start; }

	.ollso-phase-02 .ollso-phase-icon { left: calc(6 * var(--cell) + 6 * var(--gap)); top: calc(2 * (var(--cell) + var(--gap)) + var(--cell) + var(--gap) / 2 - 83px); }
	.ollso-phase-02 .ollso-phase-text { left: calc(4 * (var(--cell) + var(--gap))); top: calc(4 * (var(--cell) + var(--gap))); align-items: flex-start; }

	.ollso-phase-03 .ollso-phase-icon { left: calc(2 * (var(--cell) + var(--gap)) + var(--cell) - 65px); top: calc(6 * var(--cell) + 6 * var(--gap)); }
	.ollso-phase-03 .ollso-phase-text { right: calc(-2 * var(--cell) - var(--gap)); top: calc(4 * (var(--cell) + var(--gap))); align-items: flex-end; text-align: right; }

	.ollso-phase-04 .ollso-phase-icon { left: calc(-130px - var(--gap)); top: calc(2 * (var(--cell) + var(--gap)) + var(--cell) + var(--gap) / 2 - 83px); }
	.ollso-phase-04 .ollso-phase-text { right: calc(-2 * var(--cell) - var(--gap)); bottom: calc(-2 * (var(--cell) + var(--gap)) + var(--gap)); align-items: flex-end; text-align: right; }

	.ollso-diagram-wrap[data-active="01"] .ollso-phase-01,
	.ollso-diagram-wrap[data-active="02"] .ollso-phase-02,
	.ollso-diagram-wrap[data-active="03"] .ollso-phase-03,
	.ollso-diagram-wrap[data-active="04"] .ollso-phase-04 {
		opacity: 1;
		visibility: visible;
	}
	.ollso-diagram-wrap[data-active="01"] .g01,
	.ollso-diagram-wrap[data-active="02"] .g02,
	.ollso-diagram-wrap[data-active="03"] .g03,
	.ollso-diagram-wrap[data-active="04"] .g04 {
		background: #fff;
	}
	.ollso-diagram-wrap[data-active="01"] .g01.is-node,
	.ollso-diagram-wrap[data-active="02"] .g02.is-node,
	.ollso-diagram-wrap[data-active="03"] .g03.is-node,
	.ollso-diagram-wrap[data-active="04"] .g04.is-node {
		color: var(--ollso-navy);
	}
}
/* ---- Roadmap hover phases (tablet/mobile) --------------------------------
   No real hover below 1200px, so tapping a numbered cell shows that phase's
   details stacked below the diagram instead of overlaid on top of it —
   only one phase at a time (tapping the active one again closes it). ---- */
@media (max-width: 1199px) {
	.ollso-diagram .cell.g01,
	.ollso-diagram .cell.g02,
	.ollso-diagram .cell.g03,
	.ollso-diagram .cell.g04 {
		cursor: pointer;
	}
	.ollso-phase {
		display: none;
		position: static;
		opacity: 1;
		visibility: visible;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 335px;
		margin: 60px auto 0;
	}
	.ollso-phase-icon {
		position: static;
		width: 170px;
		margin-bottom: 24px;
	}
	.ollso-phase-text {
		position: static;
		width: 100%;
		max-width: none;
		align-items: center;
		text-align: center;
	}
	.ollso-diagram-wrap[data-active="01"] .ollso-phase-01,
	.ollso-diagram-wrap[data-active="02"] .ollso-phase-02,
	.ollso-diagram-wrap[data-active="03"] .ollso-phase-03,
	.ollso-diagram-wrap[data-active="04"] .ollso-phase-04 {
		display: flex;
	}
	.ollso-diagram-wrap[data-active="01"] .g01,
	.ollso-diagram-wrap[data-active="02"] .g02,
	.ollso-diagram-wrap[data-active="03"] .g03,
	.ollso-diagram-wrap[data-active="04"] .g04 {
		background: #fff;
	}
	.ollso-diagram-wrap[data-active="01"] .g01.is-node,
	.ollso-diagram-wrap[data-active="02"] .g02.is-node,
	.ollso-diagram-wrap[data-active="03"] .g03.is-node,
	.ollso-diagram-wrap[data-active="04"] .g04.is-node {
		color: var(--ollso-navy);
	}
}

/* ---- Portfolio heading + description ---------------------------------- */
.ollso-portfolio-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 30px;
	line-height: normal;
}
@media (max-width: 1199px) {
	.ollso-portfolio-heading,
	.ollso-portfolio-description {
		text-align: center;
	}
}
@media (min-width: 1200px) {
	.ollso-portfolio-heading {
		font-size: 50px;
		line-height: 72px;
		letter-spacing: -1.28px;
	}
}
.ollso-portfolio-description {
	font-weight: 400;
	font-size: 30px;
	line-height: 28px;
	letter-spacing: 0;
}
@media (max-width: 799px) {
	.ollso-portfolio-description {
		font-size: 20px;
	}
}

/* ---- Portfolio rows -------------------------------------------------- */
.ollso-portfolio-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.ollso-portfolio-row {
	display: flex;
	align-items: center;
	border: 1.5px solid rgba(255, 103, 31, 0.55);
	border-radius: 32px;
	padding: 1.25rem 1.75rem;
	overflow: hidden;
}
.ollso-portfolio-row .ollso-portfolio-title {
	flex: 0 0 auto;
	width: 220px;
	margin-right: 1rem;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 25px;
	line-height: normal;
	letter-spacing: -0.4px;
}
@media (min-width: 1200px) {
	.ollso-portfolio-list {
		gap: 23px;
	}
	.ollso-portfolio-row {
		box-sizing: border-box;
		height: 110px;
		padding: 30px 40px;
		border-radius: 57px;
		transition: height 0.45s ease;
	}
	.ollso-portfolio-row.has-photo:hover,
	.ollso-portfolio-row.has-photo:focus-within {
		height: auto;
	}
	.ollso-portfolio-row .ollso-portfolio-title {
		width: auto;
		white-space: nowrap;
		font-size: 30px;
		line-height: 48px;
	}
}
.ollso-portfolio-row .ollso-portfolio-image {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 0;
	min-width: 0;
	height: 0;
	margin-right: 0;
	border-radius: 38px;
	overflow: hidden;
	border: 0 solid rgba(255, 103, 31, 0.55);
	opacity: 0;
	transition: flex-grow 0.45s ease, height 0.45s ease, opacity 0.35s ease, border-width 0.45s ease, margin-right 0.45s ease;
}
.ollso-portfolio-row .ollso-portfolio-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ollso-portfolio-row.has-photo:hover .ollso-portfolio-image,
.ollso-portfolio-row.has-photo:focus-within .ollso-portfolio-image {
	flex-grow: 1;
	height: 200px;
	margin-right: 1.5rem;
	border-width: 1.5px;
	opacity: 1;
}
.ollso-portfolio-row .ollso-portfolio-tags {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-left: auto;
}
.ollso-portfolio-tags .ollso-badge {
	box-sizing: border-box;
	height: 36px;
	padding: 9px 17px;
	border-radius: 9999px;
	font-size: 16px;
	font-weight: 700;
}
.ollso-portfolio-tags .ollso-badge.is-orange {
	gap: 3px;
}
.ollso-portfolio-tags .ollso-badge-num {
	font-size: 16px;
	font-weight: 700;
}
.ollso-portfolio-tags .ollso-badge-unit {
	font-size: 11px;
	font-weight: 600;
}

/* ---- People / founder section -------------------------------------- */
.ollso-people-row {
	display: flex;
	flex-direction: column;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}
.ollso-people-photo {
	flex: 0 0 auto;
	width: 100%;
	height: 380px;
	overflow: hidden;
}
.ollso-people-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 15%;
}
.ollso-people-text {
	box-sizing: border-box;
	flex: 1 1 auto;
	padding: 40px 24px;
}
.ollso-people-heading {
	grid-area: heading;
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 30px;
	letter-spacing: -1.28px;
}
.ollso-people-heading-break {
	display: none;
}
/* Areas differ per breakpoint so DOM order can stay [heading, bio, quote,
   founder] while desktop/tablet still group heading+bio+founder into one
   visual column with the quote as a separate, bottom-aligned column beside
   it. Below 1860px "What our Partners can expect." (the widest of the 3
   forced lines) no longer fits its own line at the full text-column width,
   so the heading stays confined to the left (bio) column instead and wraps
   naturally — only once it's wide enough to hold the clean 3-line version
   does it span both columns. */
.ollso-people-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"heading ."
		"bio quote"
		"founder quote";
	gap: 1.5rem 24px;
}
@media (min-width: 1860px) {
	.ollso-people-heading-break {
		display: inline;
	}
	.ollso-people-columns {
		grid-template-areas:
			"heading heading"
			"bio quote"
			"founder quote";
	}
}
.ollso-people-bio {
	grid-area: bio;
	margin: 0;
	font-weight: 400;
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0;
	color: var(--ollso-blue-grey);
}
.ollso-people-quote {
	grid-area: quote;
	align-self: start;
	margin: 110px 0 0;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 0;
	color: var(--ollso-blue-grey);
}
.ollso-people-quote strong {
	font-weight: 700;
	font-style: italic;
}
.ollso-people-founder {
	grid-area: founder;
}
.ollso-people-name {
	margin: 0 0 12px;
	color: #fff;
	font-weight: 400;
	font-size: 30px;
	line-height: 28px;
	letter-spacing: 0;
}
.ollso-founder-tag {
	display: inline-block;
	white-space: nowrap;
	padding: 9px 17px;
	border-radius: 999px;
	background: var(--ollso-blue-grey);
	color: var(--ollso-navy);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0.7px;
}
@media (min-width: 800px) {
	.ollso-people-heading {
		font-size: 50px;
	}
	.ollso-people-bio {
		font-size: 30px;
		line-height: 28px;
	}
	.ollso-people-quote {
		font-size: 30px;
	}
}
@media (max-width: 799px) {
	.ollso-people-photo {
		height: 480px;
	}
}
@media (min-width: 800px) and (max-width: 1279px) {
	.ollso-people-photo {
		height: 800px;
	}
}
/* Image/text side-by-side layout only from 1280px up — below that both the
   image and the bio/quote columns stack full-width, per the mockup. The
   902px : 922px : 96px split (image : text : gap) at a 1920px canvas is kept
   as percentages of the row's own width, so it scales fluidly all the way
   down to 1280px instead of snapping to a fixed px value. */
@media (min-width: 1280px) {
	.ollso-people-quote {
		align-self: end;
		margin-top: 0;
	}
	.ollso-people-columns {
		column-gap: 80px;
	}
	.ollso-people-row {
		flex-direction: row;
		align-items: stretch;
		gap: 5%;
	}
	.ollso-people-photo {
		flex: 0 0 46.9792%;
		width: auto;
		height: auto;
	}
	.ollso-people-text {
		flex: 0 0 48.0208%;
		display: flex;
		flex-direction: column;
		padding: 110px 60px 110px 0;
	}
	.ollso-people-columns {
		flex: 1 1 auto;
	}
}

/* ---- Testimonial carousel ------------------------------------------------ */
.ollso-testimonials-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}
.ollso-testimonials-main {
	width: 100%;
	max-width: 900px;
}
.ollso-testimonial-stack {
	position: relative;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	transition: height 0.4s ease;
}
.ollso-testimonial-stack.is-dragging {
	cursor: grabbing;
}
.ollso-testimonial-card {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border: 1.5px solid var(--ollso-orange);
	border-radius: 1.5rem;
	padding: 2.5rem;
	box-sizing: border-box;
	background: #fff;
	opacity: 0;
	transform: translateX(0);
	transition: transform 0.5s ease, opacity 0.5s ease;
	pointer-events: none;
}
.ollso-testimonial-card.is-active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}
.ollso-testimonial-card.is-enter-right {
	transform: translateX(60px);
}
.ollso-testimonial-card.is-enter-left {
	transform: translateX(-60px);
}
.ollso-testimonial-card.is-exit-left {
	transform: translateX(-60px);
	opacity: 0;
}
.ollso-testimonial-card.is-exit-right {
	transform: translateX(60px);
	opacity: 0;
}
.ollso-testimonial-card .ollso-quote {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ollso-navy);
}
.ollso-testimonial-card .ollso-badge {
	font-size: 15px;
	font-weight: 600;
}
.ollso-testimonials-heading {
	font-size: 30px;
	font-weight: 700;
}
.ollso-testimonials-description {
	font-weight: 400;
	font-size: 30px;
	line-height: 28px;
	letter-spacing: 0;
}
@media (max-width: 1199px) {
	.ollso-testimonials-heading,
	.ollso-testimonials-description {
		text-align: center;
	}
	.ollso-testimonial-card .ollso-quote {
		text-align: center;
	}
	.ollso-testimonial-card .ollso-portfolio-tags {
		justify-content: center;
	}
	.ollso-dots {
		justify-content: center;
	}
}
@media (min-width: 800px) {
	.ollso-testimonial-card .ollso-quote {
		font-size: 30px;
		line-height: 1;
	}
	.ollso-testimonial-card .ollso-badge {
		font-size: 18px;
	}
}
@media (min-width: 1200px) {
	.ollso-testimonials-heading {
		font-size: 50px;
		line-height: 72px;
		letter-spacing: -1.28px;
	}
}
.ollso-testimonial-card .ollso-portfolio-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.75rem;
}
.ollso-dots {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 1.5rem;
}
.ollso-dots span {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 1.5px solid var(--ollso-orange);
	background: transparent;
	display: inline-block;
	cursor: pointer;
	box-sizing: border-box;
	padding: 0;
}
.ollso-dots span.is-active {
	background: var(--ollso-orange);
}
.ollso-testimonial-plus {
	width: 110px;
	height: 110px;
	flex: 0 0 auto;
	opacity: 0;
	transform: scale(0.3);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.ollso-testimonial-plus.is-visible {
	opacity: 1;
	transform: scale(1);
}
.ollso-testimonial-plus .ollso-plus-rounded path {
	fill: #ff671f;
}
@media (max-width: 799px) {
	.ollso-testimonial-plus .ollso-plus-rounded path {
		fill: none;
	}
}
@media (min-width: 1200px) {
	.ollso-testimonials-row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 3rem;
	}
}

/* ---- CTA / contact section -------------------------------------------- */
.ollso-cta-title {
	font-size: 30px !important;
	font-weight: 700;
	letter-spacing: -0.9px;
	line-height: normal;
}
.ollso-cta-form-column .ollso-cta-title {
	font-size: 18px !important;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0;
}
.ollso-cta-description {
	font-size: 16px !important;
	font-weight: 400;
	letter-spacing: 0;
	margin-top: 16px !important;
}
.ollso-cta-form-column .ollso-cta-description {
	margin-top: 8px !important;
}
p.ollso-cta-description.has-white-color {
	color: rgba(255, 255, 255, 0.8) !important;
}
@media (max-width: 1199px) {
	.ollso-cta-description {
		font-size: 14px !important;
	}
}
.ollso-cta-form-column {
	background: transparent !important;
	border: 1px solid var(--ollso-navy);
}
/* Outer gutter "breathes" via a max-width cap on the columns wrapper instead
   of card padding: fixed caps naturally widen the side gutter as the
   viewport grows past each cap. */
@media (max-width: 1199px) {
	.ollso-cta-columns {
		flex-wrap: wrap !important;
	}
	.ollso-cta-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}
@media (min-width: 800px) and (max-width: 1199px) {
	.ollso-cta-columns {
		max-width: 796px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (min-width: 1200px) {
	.ollso-cta-columns {
		max-width: 1152px;
		margin-left: auto;
		margin-right: auto;
	}
	.ollso-cta-card {
		box-sizing: border-box;
		flex: 0 0 484px !important;
		height: 336px;
		display: flex;
		flex-direction: column;
	}
	.ollso-cta-form-column {
		flex: 0 0 645px !important;
	}
}
.ollso-cta-contact-pills {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
	margin-top: 40px !important;
}
@media (min-width: 1200px) {
	.ollso-cta-contact-pills {
		margin-top: auto !important;
	}
}
.ollso-cta-form {
	margin-top: 40px !important;
}
@media (min-width: 1200px) {
	.ollso-cta-form {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		margin-top: 12px !important;
	}
	.ollso-cta-form input:first-child {
		margin-top: auto;
	}
	.ollso-cta-form button {
		align-self: flex-start;
		margin-top: auto;
	}
}
.ollso-cta-pill {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 9px 17px;
	border-radius: 9999px;
	background: #fff;
	color: var(--ollso-navy);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}
@media (min-width: 1200px) {
	.ollso-cta-pill {
		padding: 10px;
	}
}
.ollso-cta-form input[type="text"],
.ollso-cta-form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 14px 20px;
	border-radius: 110px;
	border: 1px solid var(--ollso-navy);
	background: transparent;
	margin-bottom: 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--ollso-navy);
}
@media (min-width: 1200px) {
	.ollso-cta-form input[type="text"],
	.ollso-cta-form input[type="email"] {
		height: 39px;
		padding: 10px;
	}
}
.ollso-cta-form input[type="text"]::placeholder,
.ollso-cta-form input[type="email"]::placeholder {
	color: var(--ollso-navy);
	opacity: 0.6;
}
.ollso-cta-form button {
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	padding: 16px 10px;
	border: 1px solid transparent;
	cursor: pointer;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	background: var(--ollso-orange);
	color: #fff;
	border-radius: 101px;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@media (max-width: 799px) {
	.ollso-cta-form button {
		padding-left: 0;
		padding-right: 0;
	}
}
@media (min-width: 1200px) {
	.ollso-cta-form button {
		width: auto;
		height: 40px;
		padding: 10px;
		border-radius: 42px;
		font-weight: 700;
		background: transparent;
		color: var(--ollso-navy);
		border-color: var(--ollso-navy);
	}
	.ollso-cta-form button:hover {
		background: var(--ollso-orange);
		color: #fff;
		border-color: var(--ollso-orange);
	}
}
.ollso-cta-form button:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}
.ollso-cta-form-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}
.ollso-cta-form-message {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 500;
	min-height: 1em;
}
.ollso-cta-form-message:empty {
	margin: 0;
	min-height: 0;
}
.ollso-cta-form-message.is-success {
	color: #2f7a4d;
}
.ollso-cta-form-message.is-error {
	color: #c1432f;
}

/* ---- Footer -------------------------------------------------------------- */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}
.ollso-footer {
	overflow: hidden;
}
.ollso-footer-top {
	max-width: 1520px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.ollso-footer-icon {
	width: 90px;
	flex: 0 0 auto;
}
.ollso-footer-icon img {
	display: block;
	width: 100%;
	height: auto;
}
.ollso-footer-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 56px;
}
.ollso-footer-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 39px;
}
.ollso-footer-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 39px;
}
.ollso-footer-top a,
.ollso-footer-label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #fff;
	text-decoration: none;
}
.ollso-footer-email {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ollso-footer-linkedin {
	margin-top: 39px;
}
.ollso-footer-wordmark {
	display: block;
	width: 100%;
	height: auto;
	margin: 60px auto 0;
	max-width: 1520px;
}
@media (min-width: 800px) {
	.ollso-footer-icon { width: 130px; }
	.ollso-footer-wordmark { margin-top: 90px; }
}
@media (min-width: 1200px) {
	.ollso-footer {
		padding-left: 200px !important;
		padding-right: 200px !important;
		padding-top: 150px !important;
		padding-bottom: 80px !important;
	}
	.ollso-footer-top {
		flex-direction: row;
		align-items: flex-start;
	}
	.ollso-footer-icon {
		display: none;
	}
	.ollso-footer-right {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		width: auto;
		flex: 1;
		margin-top: 0;
		margin-left: 0;
		padding-left: 40px;
		padding-right: 40px;
	}
	.ollso-footer-links {
		flex-direction: column;
		align-items: flex-start;
		gap: 56px;
	}
	.ollso-footer-col {
		align-items: flex-start;
		gap: 11px;
	}
	.ollso-footer-linkedin {
		margin-top: 0;
	}
	.ollso-footer-wordmark {
		width: 100%;
		margin-top: 116px;
	}
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 782px) {
	.ollso-stats-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1199px) {
	.ollso-portfolio-row {
		flex-direction: column;
		align-items: center;
		text-align: center;
		border-radius: 1.5rem;
		padding: 1.5rem;
		gap: 0.75rem;
	}
	.ollso-portfolio-row .ollso-portfolio-title {
		width: auto;
		margin-right: 0;
	}
	.ollso-portfolio-row.has-photo .ollso-portfolio-image {
		flex: 0 0 auto;
		width: 100%;
		height: 160px;
		margin-right: 0;
		border-width: 1.5px;
		opacity: 1;
		border-radius: 1.25rem;
	}
	.ollso-portfolio-row.has-photo .ollso-portfolio-image img {
		width: 100%;
	}
	.ollso-portfolio-row .ollso-portfolio-tags {
		flex: 0 0 auto;
		width: 100%;
		justify-content: center;
		margin-left: 0;
	}
}