/* ==========================================================================
   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;
	/* Subtract the top+bottom margins so the frame plus its own spacing
	   fits inside the first viewport instead of pushing the bottom gap
	   below the fold. */
	max-height: calc(100vh - 80px);
}
.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;
	max-height: calc(100vh - 80px);
}
.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-plus {
	display: block;
	text-decoration: none;
}
.ollso-hero-plus .ollso-plus-rounded path {
	transition: fill 0.3s ease;
}
.ollso-hero-plus:hover .ollso-plus-rounded path,
.ollso-hero-plus:focus-visible .ollso-plus-rounded path {
	fill: currentColor;
}

.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;
		max-height: calc(100vh - 30px);
	}
	.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;
}
/* ---- Hero itself stays full width on ultra-wide screens (only the header
   keeps the 1920px cap above) — higher specificity than .ollso-hero-shell
   alone so it wins regardless of source order. ---------------------------- */
.ollso-hero-frame.ollso-hero-shell {
	max-width: none;
}

/* ---- 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;
}
/* Core locks page scroll via `html.has-modal-open { overflow: hidden }`
   whenever the nav modal opens — meant for its default full-screen
   takeover. This menu is a small floating dropdown instead (see above),
   so the page behind it should stay scrollable while it's open. */
html.has-modal-open:has(.wp-block-navigation__responsive-container.is-menu-open .ollso-nav-toggle) {
	overflow: auto !important;
}
.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;
}
/* Targets .wp-block-button__link directly (not the .ollso-cta-with-icon
   class above) because the live header is a customized template part saved
   in the database — it no longer carries that class, only core's block
   markup classes, even though the theme's parts/header.html file still has
   it. Scoping to .ollso-header-cta keeps this from touching other buttons. */
.ollso-header-cta .wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease;
}
.ollso-header-cta .wp-block-button__link:hover,
.ollso-header-cta .wp-block-button__link:focus-visible {
	background-color: #fff !important;
	color: var(--ollso-orange) !important;
}
.ollso-header-cta .wp-block-button__link:hover .ollso-plus-inline svg path,
.ollso-header-cta .wp-block-button__link:focus-visible .ollso-plus-inline svg path {
	fill: var(--ollso-orange);
	stroke: var(--ollso-orange);
}

/* ---- 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: 20px;
	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 -------------------------------------------------------- */
/* Lead paragraphs fade + rise in all together as the section scrolls into
   view (JS toggles .is-visible via IntersectionObserver, see
   scroll-reveal.js). */
.ollso-intro-lead {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	/* Without this, the browser can pick one of these paragraphs as a scroll
	   anchor near the viewport edge — the exact spot where the reveal's
	   opacity/transform toggles — and "correct" the scroll position for it,
	   producing a stutter/jump when scrolling upward into the section. */
	overflow-anchor: none;
}
.ollso-intro-lead.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.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;
}
.ollso-intro-plus {
	display: block;
	text-decoration: none;
}
.ollso-intro-plus .ollso-plus-rounded path {
	transition: fill 0.3s ease;
}
.ollso-intro-plus:hover .ollso-plus-rounded path,
.ollso-intro-plus:focus-visible .ollso-plus-rounded path {
	fill: currentColor;
}
/* ---- 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;
		max-height: calc(100vh - 30px);
	}
	.ollso-phase-text > .ollso-badge {
		font-size: 15px !important;
	}
	.ollso-stats-section {
		padding-top: 50px !important;
		padding-bottom: 50px !important;
	}
	.ollso-stats-grid {
		gap: 20px !important;
	}
}
@media (max-width: 799px) {
	#about {
		padding-top: 40px !important;
		padding-bottom: 50px !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.ollso-intro-lead {
		font-size: 18px !important;
		font-weight: 600 !important;
	}
	#about .wp-block-spacer {
		height: 37px !important;
		margin-block-start: 0 !important;
	}
	.ollso-intro-footer {
	
		align-items: flex-start;
	}
	.ollso-intro-plus {
		
	}
	.ollso-intro-caption {
		font-size: 15px !important;
		align-self: flex-end;
		margin-top: 26px !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%;

}
.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;

	}
	.ollso-clients-track {
		gap: 90px;
	}
}
@media (min-width: 1200px) {
	.ollso-clients-section {
		padding-top: 150px !important;
		padding-bottom: 150px !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, opacity 0.7s ease, transform 0.7s ease;
}
/* Cards fade + rise in one after another as the grid scrolls into view (JS
   toggles .is-visible via IntersectionObserver, see scroll-reveal.js). */
.ollso-stat-card {
	opacity: 0;
	transform: translateY(40px);
	overflow-anchor: none;
}
.ollso-stat-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}
/* transition-delay values are positional, matching the order of properties
   listed in the transition shorthand above (background-color, opacity,
   transform) — background-color keeps 0s so hover isn't delayed by the
   stagger, only the reveal's opacity/transform are staggered. */
.ollso-stat-card:nth-child(1) { transition-delay: 0s, 0s, 0s; }
.ollso-stat-card:nth-child(2) { transition-delay: 0s, 0.15s, 0.15s; }
.ollso-stat-card:nth-child(3) { transition-delay: 0s, 0.3s, 0.3s; }
.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;
	}
	
	.ollso-stat-card {
	aspect-ratio: 11 / 10 !important;
	min-height: auto !important;
	height: 260px;
    padding-left: 5%;
    padding-right: 5%;
    margin: 0 auto;

	}
}
@media (min-width: 1200px) {
	.ollso-stat-card {
		box-sizing: border-box;
		height: 321px;
		min-height: 321px;
	}
}
.ollso-stat-card .ollso-stat-icon {
	transition: filter 0.25s ease;
}
/* Hover state only from 800px up — below that, taps on a touchscreen would
   otherwise trigger and stick the hover look on mobile. */
@media (min-width: 800px) {
	.ollso-stat-card:hover {
		background: #1b1d36;
	}
	.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: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 38px;
}
@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((min(335px, 100vw - 40px) - 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: 16px;
	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;
		white-space: nowrap;
	}
	.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-wrap {
		width: 100%;
		max-width: min(620px, 100vw - 40px);
	}
	.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: min(620px, 100vw - 40px);
		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);
	}

	.ollso-phase-text .ollso-badge.is-outline-light {
		box-sizing: border-box;
		height: auto;
		min-height: 40px;
		max-width: 100%;
		white-space: normal;
		text-align: center;
		line-height: 1.3;
	}
}

/* ---- 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: 18px;
	}
}

/* ---- 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: var(--ollso-portfolio-img-h, 200px);
	margin-right: 1.5rem;
	border-width: 1.5px;
	opacity: 1;
}
/* ---- Portfolio accordion toggle icon — tablet/mobile only (desktop uses
   hover/focus-within instead and never shows this icon). Closed and open
   are the same markup: the row's .is-open class (portfolio-toggle.js)
   swaps the circle fill and plus color instead of switching icons. */
.ollso-portfolio-toggle-icon {
	display: none;
}
.ollso-portfolio-toggle-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ollso-portfolio-toggle-bg {
	transition: fill 0.25s ease;
}
.ollso-portfolio-toggle-plus {
	transition: fill 0.25s ease, stroke 0.25s ease;
}
.ollso-portfolio-row.is-open .ollso-portfolio-toggle-bg {
	fill: #1b1d36;
}
.ollso-portfolio-row.is-open .ollso-portfolio-toggle-plus {
	fill: #fff;
	stroke: #fff;
}
.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;
	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 {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 110%;
	letter-spacing: -1.28px;
}
.ollso-people-heading-break {
	display: none;
}
/* Single stacked column at every breakpoint: heading, bio, quote, then the
   founder name + badge last — the quote sits above the founder block
   rather than beside it. */
.ollso-people-columns {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (min-width: 1860px) {
	.ollso-people-heading-break {
		display: inline;
	}
}
.ollso-people-bio {
	margin: 0;
	font-weight: 400;
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0;
	color: white;
}
.ollso-people-quote {
	margin: 0;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 0;
	color:  white;
}
.ollso-people-quote strong {
	font-weight: 700;
	font-style: italic;
}
.ollso-people-name {
	margin: 0 0 12px;
	color: #fff;
	font-weight: 400;
	font-size: 30px;
	line-height: 110%;
	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 (max-width: 1279px) {
	.ollso-people-columns {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}
@media (min-width: 800px) {
	.ollso-people-columns {
		gap: 32px;
	}
	.ollso-people-heading {
		font-size: 50px;
		line-height: normal;
	}
	.ollso-people-bio {
		font-size: 30px;
		line-height: 110%;
	}
	.ollso-people-quote {
		font-size: 30px;
		line-height: 110%;
	}
}
@media (max-width: 799px) {
	.ollso-people-photo {
		height: 480px;
	}
	.ollso-diagram .cell {
	border-radius: 10px;

}
}
@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 text column stack full-width, per the mockup. */
@media (min-width: 1280px) {
	.ollso-people-row {
		flex-direction: row;
		align-items: stretch;
		/* Fluid gap between photo and text: 96px at a 1920px viewport,
		   narrowing to 30px at 1280px — interpolated, not stepped. */
		gap: clamp(30px, calc(96px - (1920px - 100vw) * 0.103125), 96px);
	}
	.ollso-people-photo {
		flex: 0 0 auto;
		/* Fluid width: 506px at 1920px, widening slightly to 537px at
		   1280px (the image's own aspect ratio drives its height, so it
		   always renders uncropped — see height:auto below). */
		width: clamp(506px, calc(506px + (1920px - 100vw) * 0.048438), 537px);
		height: auto;
	}
	.ollso-people-photo img {
		height: auto;
		object-fit: contain;
		object-position: top;
	}
	.ollso-people-text {
		flex: 1 1 auto;
		min-width: 0;
		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;
}
/* ---- Testimonials fade + rise in as the section scrolls into view --------
   Heading + description are revealed together as one block (see
   scroll-reveal.js) rather than individually, so one doesn't visibly animate
   ahead of the other. The card stack + dots fade in as their own unit,
   independent of the carousel's own opacity/transform on each card. */
.ollso-testimonials-heading,
.ollso-testimonials-description,
.ollso-testimonials-main {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	overflow-anchor: none;
}
.ollso-testimonials-heading.is-visible,
.ollso-testimonials-description.is-visible,
.ollso-testimonials-main.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (max-width: 1199px) {
	.ollso-testimonials-heading,
	.ollso-testimonials-description {
		text-align: center;
	}
	.ollso-testimonials-heading {
		font-size: 25px;
	}
	.ollso-testimonials-description {
		font-size: 18px;
	}
	.ollso-testimonial-card .ollso-quote {
		text-align: center;
	}
	.ollso-testimonial-card .ollso-portfolio-tags {
		justify-content: center;
	}
	.ollso-dots {
		justify-content: center;
	}
	.ollso-footer {
		padding-top: 40px !important;
	}
	.ollso-footer-wordmark {
        margin-top: 120px !important;
    }
}
@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 -------------------------------------------- */
/* Title + description sizes, line-height, and margins are shared by both
   CTA cards ("Let's talk" and "Book a 30-min call") — no per-card overrides. */
.ollso-cta-title {
	font-size: 25px !important;
	font-weight: 700;
	letter-spacing: -0.9px;
	line-height: normal;
}
.ollso-cta-description {
	font-size: 18px !important;
	font-weight: 400;
	letter-spacing: 0;
	margin-top: 24px;
	margin-bottom: 24px;
	line-height: 1.1;
}
p.ollso-cta-description.has-white-color {
	color: rgba(255, 255, 255, 0.8) !important;
}
@media (min-width: 800px) and (max-width: 1199px) {
	.ollso-cta-title {
		font-size: 40px !important;
	}
	.ollso-cta-description {
		font-size: 25px !important;
	}
}
@media (min-width: 1200px) {
	.ollso-cta-title {
		font-size: 50px !important;
	}
	.ollso-cta-description {
		font-size: 30px !important;
	}
}
.ollso-cta-form-column {
	background: transparent !important;
	border: 1px solid var(--ollso-navy);
}
/* ---- CTA cards fade + rise in, one after another, as the section scrolls
   into view (JS toggles .is-visible via IntersectionObserver, see
   scroll-reveal.js) — same staggered treatment as the stat cards. */
.ollso-cta-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	overflow-anchor: none;
}
.ollso-cta-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.ollso-cta-columns > .ollso-cta-card:nth-child(1) { transition-delay: 0s; }
.ollso-cta-columns > .ollso-cta-card:nth-child(2) { transition-delay: 0.15s; }
/* 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: auto;
		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;
	}

	.ollso-cta-description {
		    margin-top: 18px;
    margin-bottom: 18px;

}

}

@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;
}
/* ---- Footer content fades + rises in as it scrolls into view — top block
   and wordmark are revealed together (see scroll-reveal.js) since they're
   stacked vertically and observing them separately would make one visibly
   animate ahead of the other. */
.ollso-footer-top,
.ollso-footer-wordmark {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	overflow-anchor: none;
}
.ollso-footer-top.is-visible,
.ollso-footer-wordmark.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.ollso-footer-top {
	max-width: 1920px;
	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-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 39px;
	margin-top: 39px;
}
.ollso-footer-wordmark {
	display: block;
	width: 100%;
	height: auto;
	margin: 60px auto 0;
	max-width: 1920px;
}
@media (min-width: 800px) {
	.ollso-footer-icon { width: 130px; }
	.ollso-footer-wordmark { margin-top: 90px; }
}
@media (min-width: 1200px) {
	.ollso-footer {
		padding-left: 40px !important;
		padding-right: 40px !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-meta {
		flex-direction: row;
		gap: 28px;
		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;
	}
	/* Closed by default — tapping the row (see portfolio-toggle.js) adds
	   .is-open to reveal the image, same transition the desktop hover uses. */
	.ollso-portfolio-row.has-photo {
		cursor: pointer;
	}
	.ollso-portfolio-toggle-icon {
		display: inline-flex;
		width: 22px;
		height: 22px;
		margin: -0.25rem 0;
	}
	.ollso-portfolio-row.has-photo.is-open .ollso-portfolio-image {
		flex: 0 0 auto;
		width: 100%;
		height: var(--ollso-portfolio-img-h-mobile, 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;
	}
}


.ollso-intro-lead {
	line-height:1.1;
	letter-spacing:-0.03em;
}

/* ---- Static pages (e.g. Terms & Conditions) ------------------------------ */
.ollso-page-main {
	padding-top: 60px;
	padding-bottom: 100px;
}
.ollso-page-main h1 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 0.5em;
}
.ollso-page-main h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 2em;
}
.ollso-page-main p,
.ollso-page-main li {
	color: var(--wp--preset--color--ink);
}
@media (min-width: 800px) {
	.ollso-page-main {
		padding-top: 90px;
		padding-bottom: 140px;
	}
}

/* ---- Respect reduced-motion preference: skip the reveal animations, just
   show the content ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ollso-intro-lead,
	.ollso-stat-card,
	.ollso-testimonials-heading,
	.ollso-testimonials-description,
	.ollso-testimonials-main,
	.ollso-cta-card,
	.ollso-footer-top,
	.ollso-footer-wordmark {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}