/*
 * port.css — the small residue of the Finbiz port that NO block attribute can express.
 *
 * Everything a block can say lives on the block (theme.json presets + style attributes). What is
 * left here is exactly three kinds of rule, and each one carries its own css-allow reason plus the
 * source rule it transcribes:
 *   · absolute overlays (a badge sitting on top of a photo) — no block has a position control;
 *   · intrinsic min/max widths on a flex child — no block has a width control outside columns;
 *   · fixed control sizes the source pins in px on a WRAPPER of the link (.cta-btn, .hero-btn …).
 *
 * Breakpoints are the SOURCE's own: 991 / 767 / 479 (not the generic 1080/767 tiers).
 */

/* css-allow: .main-container caps the frame at 1310px and the block only carries the 30px gutter;
   the max-width itself has no block attribute (contentSize is a theme-wide value). */
.wp-site-blocks .is-layout-constrained > .wp-block-group:not(.alignfull) {
	margin-left: auto;
	margin-right: auto;
}

/* ── HERO ─────────────────────────────────────────────────────────────────────────────────── */
/* css-allow: .hero-heading-span [ padding: 0 10px ] — an inline highlight inside rich text; the
   core highlight format serialises only a background-color, it has no padding control. */
.hero-heading mark {
	padding-left: 10px;
	padding-right: 10px;
}

/* css-allow: [max-width:767px] .hero-heading-span [ padding: 0 5px ] */
@media (max-width: 767px) {
	/* css-allow: [max-width:767px] .hero-heading-span [ padding: 0 5px ] (tier max-width:767px) */
	.hero-heading mark {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* css-allow: .home-hero-flex-left [ max-width:600px; flex:0 0 auto ] — a flex child's basis and
   max-width have no block attribute outside core/columns, and this row is not a columns block
   (its two children have different flex rules). */
.hero-flexbox > .home-hero-flex-left {
	max-width: min( 600px, 100% );
	flex: 0 0 auto;
}

/* css-allow: .hero-flex-right [ max-width:535px; min-width:360px; flex:1 ] */
.hero-flexbox > .hero-flex-right {
	max-width: 535px;
	min-width: 360px;
	flex: 1;
}

/* css-allow: [max-width:479px] .hero-flex-right [ min-width:auto ] */
@media (max-width: 479px) {
	/* css-allow: [max-width:479px] .hero-flex-right [ min-width:auto ] (tier max-width:479px) */
	.hero-flexbox > .hero-flex-right {
		min-width: auto;
	}
}

/* css-allow: .hero-image-wrapper is the positioning context for the absolutely placed widget. */
.hero-image-wrapper {
	position: relative;
}

/* css-allow: .hero-image [ width:535px; object-fit:contain ] — core/image carries the class on the
   <figure>, so the size never reaches the <img> (work-flow responsive gotcha 4). */
.hero-image img {
	width: 535px;
	max-width: 100%;
	object-fit: contain;
}

/* css-allow: .hero-widget [ position:absolute; left:-75px; bottom:80px; width/height 180px ] —
   an absolute overlay; no block has a position control. */
.hero-image-wrapper .hero-widget-img {
	position: absolute;
	left: -75px;
	right: 0;
	bottom: 80px;
	z-index: 1;
	width: 180px;
	height: 180px;
	margin: 0;
}

/* css-allow: .hero-widget-img [ border-radius:10px; box-shadow:0 5px 20px 0 rgba(0,0,0,.1) ] */
.hero-image-wrapper .hero-widget-img img {
	width: 180px;
	height: 180px;
	border-radius: 10px;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);
}

/* css-allow: [max-width:991px] .hero-widget [ left:auto; top:0; bottom:0; margin:auto;
   transform: translate(70px,-30px) ] */
@media (max-width: 991px) {
	/* css-allow: [max-width:991px] .hero-widget [ left:auto; top:0; bottom:0; margin:auto; (tier max-width:991px) */
	.hero-image-wrapper .hero-widget-img {
		left: auto;
		top: 0;
		bottom: 0;
		margin-top: auto;
		margin-bottom: auto;
		transform: translate( 70px, -30px );
	}
}

/* css-allow: [max-width:767px] .hero-widget [ left:0; right:0; bottom:-50px; 150x150; margin auto;
   transform:none ] + .hero-image [ width:400px; height:450px ] */
@media (max-width: 767px) {
	/* css-allow: [max-width:767px] .hero-widget [ left:0; right:0; bottom:-50px; 150x150; margin auto; (tier max-width:767px) */
	.hero-image-wrapper .hero-widget-img {
		left: 0;
		top: auto;
		right: 0;
		bottom: -50px;
		width: 150px;
		height: 150px;
		margin-left: auto;
		margin-right: auto;
		transform: none;
	}

	/* css-allow: [max-width:767px] .hero-widget [ left:0; right:0; bottom:-50px; 150x150; margin auto; (tier max-width:767px) */
	.hero-image-wrapper .hero-widget-img img {
		width: 150px;
		height: 150px;
	}

	/* css-allow: [max-width:767px] .hero-widget [ left:0; right:0; bottom:-50px; 150x150; margin auto; (tier max-width:767px) */
	.hero-image img {
		width: 400px;
		height: 450px;
	}
}

/* css-allow: [max-width:479px] .hero-image [ height:auto ] */
@media (max-width: 479px) {
	/* css-allow: [max-width:479px] .hero-image [ height:auto ] (tier max-width:479px) */
	.hero-image img {
		height: auto;
	}
}

/* css-allow: .hero-btn [ max-width:225px; height:60px ] — the source pins the size on the WRAPPER
   of the link and the link fills it; core/button has no width or height attribute. */
.hero-btn .wp-block-button__link {
	width: 225px;
	height: 60px;
}

/* css-allow: .company-heading is centred inside .company-logo-container [ max-width:1120px ]. */
.company-logo-images > .company-heading {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .client-image-wrapper [ box-shadow:0 25px 35px 0 rgba(40,126,116,.05) ] — a shadow on
   a core/image figure; the block's shadow support is not serialised for images. */
.client-image-wrapper {
	box-shadow: 0 25px 35px 0 rgba( 40, 126, 116, 0.05 );
}

/* css-allow: [max-width:991px] .client-image-wrapper [ width:30% ] ·
   [max-width:767px] [ width:120px; height:60px ] */
@media (max-width: 991px) {
	/* css-allow: [max-width:991px] .client-image-wrapper [ width:30% ] · (tier max-width:991px) */
	/* moved to the end of this file — see the logo tiers there */
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:767px */
@media (max-width: 767px) {
	/* css-allow: [max-width:991px] .client-image-wrapper [ width:30% ] · (tier max-width:767px) */
	/* moved to the end of this file — see the logo tiers there */
}

/* ── EXPERTISE ────────────────────────────────────────────────────────────────────────────── */
/* css-allow: .expertise-heading [ max-width:720px ] · .expertise-sub-para [ max-width:540px ] —
   an intrinsic content cap with no block attribute. */
.expertise-heading {
	max-width: 720px;
}

/* css-allow: .expertise-heading [ max-width:720px ] · .expertise-sub-para [ max-width:540px ] — (tier max-width:767px) */
.expertise-sub-para {
	max-width: 540px;
}

/* css-allow: .iconbox-row [ max-width:1125px ] */
.iconbox-row {
	max-width: 1125px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .icon-card [ box-shadow:0 5px 40px 0 rgba(0,0,0,.07), 0 25px 35px 0 rgba(40,126,116,.05) ] —
   a two-layer shadow; theme.json shadow presets serialise one value on supported blocks only. */
.icon-card {
	height: 100%;
	box-shadow: 0 5px 40px 0 rgba( 0, 0, 0, 0.07 ), 0 25px 35px 0 rgba( 40, 126, 116, 0.05 );
}

/* css-allow: [max-width:991px] .icon-card [ max-width:360px; padding:20px; align-items:center;
   text-align:center ] */
@media (max-width: 991px) {
	/* css-allow: [max-width:991px] .icon-card [ max-width:360px; padding:20px; align-items:center; (tier max-width:991px) */
	.icon-card {
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px !important;
		align-items: center;
		text-align: center;
	}
}

/* css-allow: .icon-box-wrapper is the positioning context for .decorative. */
.icon-box-wrapper {
	position: relative;
}

/* css-allow: .decorative [ position:absolute; top:-50px; right:-50px; 123x90; z-index:0 ] */
.icon-box-wrapper .decorative {
	position: absolute;
	top: -50px;
	right: -50px;
	z-index: 0;
	width: 123px;
	height: 90px;
	margin: 0;
}

/* ── VALUE ────────────────────────────────────────────────────────────────────────────────── */
/* css-allow: .value-left-flex [ max-width:515px ] · .value-image [ width:535px ] — see the
   figure/img note above; the class sits on the figure. */
.value-left-flex {
	max-width: 515px;
}

/* css-allow: .value-left-flex [ max-width:515px ] · .value-image [ width:535px ] — see the (tier max-width:991px) */
.value-image img {
	width: 535px;
	max-width: 100%;
	object-fit: contain;
}

/* css-allow: [max-width:991px] .value-image [ width:100% ] + the source REVERSES the pair
   (.value-image-wrapper order:1, .value-left-flex order:-1) — flex order has no block attribute. */
@media (max-width: 991px) {
	/* css-allow: [max-width:991px] .value-image [ width:100% ] + the source REVERSES the pair (tier max-width:991px) */
	.value-left-flex {
		width: 100%;
		max-width: none;
		order: -1;
	}

	/* css-allow: [max-width:991px] .value-image [ width:100% ] + the source REVERSES the pair (tier max-width:991px) */
	.value-image-wrapper {
		order: 1;
	}

	/* css-allow: [max-width:991px] .value-image [ width:100% ] + the source REVERSES the pair (tier max-width:991px) */
	.value-image img {
		width: 100%;
	}
}

/* css-allow: [max-width:767px] .value-image [ height:500px ] ·
   [max-width:479px] [ height:auto; min-height:250px ] and .value-left-flex [ order:1 ] */
@media (max-width: 767px) {
	/* css-allow: [max-width:767px] .value-image [ height:500px ] · (tier max-width:767px) */
	.value-image img {
		height: 500px;
	}
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:479px */
@media (max-width: 479px) {
	/* css-allow: [max-width:767px] .value-image [ height:500px ] · (tier max-width:479px) */
	.value-image img {
		height: auto;
		min-height: 250px;
	}

	/* css-allow: [max-width:767px] .value-image [ height:500px ] · (tier max-width:479px) */
	/* the source keeps the text column first at 390 — measured, no order flip here */
}

/* css-allow: .value-btn [ max-width:230px; height:52px ] — size pinned on the link's wrapper. */
.value-btn .wp-block-button__link {
	width: 230px;
	height: 52px;
}

/* ── BENEFITS ─────────────────────────────────────────────────────────────────────────────── */
/* css-allow: .tabs-menu [ max-width:435px ] · .tab-image [ width:500px ] */
.tabs-menu {
	width: 100%;
	max-width: 435px;
}

/* css-allow: .tabs-menu [ max-width:435px ] · .tab-image [ width:500px ] (tier max-width:479px) */
.tab-image img {
	width: 500px;
	max-width: 100%;
	object-fit: contain;
}

/* css-allow: .tab-link [ border-left:5px solid transparent; box-shadow:0 35px 25px 0 rgba(0,0,0,.07);
   padding:21px 26px 24px 25px; border-radius:10px; background:#fff ] — core/accordion-item has no
   border/background/padding support, so the card face has to be stated here. */
.tabs-menu .tab-link {
	overflow: hidden;
	padding: 21px 26px 24px 25px;
	border-left: 5px solid transparent;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 35px 25px 0 rgba( 0, 0, 0, 0.07 );
	transition: all 300ms ease-in-out;
}

/* css-allow: .tab-link.w--current [ border-left-color:#fcc845 ] — the open item's gold edge. */
.tabs-menu .tab-link.is-open,
.tabs-menu .tab-link[open] {
	border-left-color: #fcc845;
}

/* css-allow: .tab-link-flex [ justify-content:space-between; align-items:center ] and
   .tab-link-left [ column-gap:18px ] — core/accordion-heading holds its label in one RichText, so
   the icon, the label and the chevron are laid out here rather than as sibling blocks. */
.tabs-menu .tab-link-flex .wp-block-accordion-heading__toggle {
	padding: 0;
}

/* css-allow: .tab-link-flex [ justify-content:space-between; align-items:center ] and (tier max-width:479px) */
.tabs-menu .tab-link-flex .wp-block-accordion-heading__toggle-title {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* css-allow: .tab-link-flex [ justify-content:space-between; align-items:center ] and (tier max-width:479px) */
.tabs-menu .tab-link-flex .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* css-allow: .tab-link-image [ width:24px; height:24px; object-fit:contain ] */
.tabs-menu .tab-link-image {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* css-allow: .tab-arrow [ width:24px; height:24px; transform:rotate(180deg) ] — pinned to the far
   edge because .tab-link-flex is justify-content:space-between in the source. */
.tabs-menu .tab-arrow {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-left: auto;
	transform: rotate( 180deg );
}

/* css-allow: .tab-link [ row-gap:22px ] — the gap between the heading and the open panel. */
.tabs-menu .tab-link .wp-block-accordion-panel {
	margin-top: 22px;
}

/* css-allow: .tab-wrapper.hide-element-for-mob [ position:relative ] — context for .tab-video. */
.tab-wrapper {
	position: relative;
}

/* css-allow: .tab-video [ position:absolute; inset:0; margin:auto; 78x78; border-radius:50% ] */
.tab-wrapper .tab-video {
	position: absolute;
	inset: 0;
	width: 78px;
	height: 78px;
	margin: auto;
}

/* css-allow: [max-width:991px] .tab-wrapper.hide-element-for-mob [ display:none ] */
@media (max-width: 991px) {
	/* css-allow: [max-width:991px] .tab-wrapper.hide-element-for-mob [ display:none ] (tier max-width:991px) */
	.tab-wrapper {
		display: none !important;
	}
}

/* ── CTA ──────────────────────────────────────────────────────────────────────────────────── */
/* css-allow: .cta-section [ background-image:url(CTA section img.jpg); background-size:cover;
   background-position:50% 50% ] — a section background IMAGE; core/group's background support
   covers colour and gradient only, and swapping the group for a core/cover would change the
   element structure the source has. */
.cta-section {
	background-image: url( "../images/cta-section-img.jpg" );
	background-position: 50% 50%;
	background-size: cover;
}

/* css-allow: .cta-container [ max-width:560px ] */
.cta-container {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .cta-btn [ max-width:225px; height:62px ] ·
   [max-width:991px] [ width:207px; height:58px ] · [max-width:767px] [ width:100% ] */
.cta-btn .wp-block-button__link {
	width: 225px;
	height: 62px;
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:991px */
@media (max-width: 991px) {
	/* css-allow: .cta-btn [ max-width:225px; height:62px ] · (tier max-width:991px) */
	.cta-btn .wp-block-button__link {
		width: 207px;
		height: 58px;
	}
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:767px */
@media (max-width: 767px) {
	.cta-btn,
	/* css-allow: .cta-btn [ max-width:225px; height:62px ] · (tier max-width:767px) */
	.cta-btn .wp-block-button__link {
		width: 100%;
	}
}

/* ── TEAM ─────────────────────────────────────────────────────────────────────────────────── */
/* css-allow: .team-container [ max-width:1130px ] · .team-heading-wrapper [ max-width:420px ] ·
   .team-para [ max-width:395px ] */
.team-container {
	max-width: 1130px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .team-container [ max-width:1130px ] · .team-heading-wrapper [ max-width:420px ] · (tier max-width:767px) */
.team-heading-wrapper {
	max-width: 420px;
}

/* css-allow: .team-container [ max-width:1130px ] · .team-heading-wrapper [ max-width:420px ] · (tier max-width:767px) */
.team-para {
	max-width: 395px;
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:991px */
@media (max-width: 991px) {
	.team-heading-wrapper,
	/* css-allow: .team-container [ max-width:1130px ] · .team-heading-wrapper [ max-width:420px ] · (tier max-width:991px) */
	.team-para {
		width: 100%;
		max-width: none;
	}
}

/* css-allow: .team-member-image [ width:345px; margin-bottom:20px; object-fit:contain ] */
.team-member-image img {
	width: 345px;
	max-width: 100%;
	object-fit: contain;
}

/* css-allow: .team-member-image [ width:345px; margin-bottom:20px; object-fit:contain ] (tier max-width:991px) */
.team-member-image {
	margin-bottom: 20px;
}

/* css-allow: [max-width:991px] .team-member-image [ margin-bottom:10px ] */
@media (max-width: 991px) {
	/* css-allow: [max-width:991px] .team-member-image [ margin-bottom:10px ] (tier max-width:991px) */
	.team-member-image {
		margin-bottom: 10px;
	}
}

/* ── TESTIMONIALS ─────────────────────────────────────────────────────────────────────────── */
/* css-allow: .testimonials-container [ max-width:1100px ] · .testimonial-text-wrapper
   [ max-width:475px ] · .testimonial-quote [ max-width:650px ] */
.testimonials-container {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .testimonials-container [ max-width:1100px ] · .testimonial-text-wrapper (tier max-width:991px) */
.testimonial-text-wrapper {
	width: 100%;
	max-width: 475px;
}

/* css-allow: .testimonials-container [ max-width:1100px ] · .testimonial-text-wrapper (tier max-width:991px) */
.testimonial-quote-text {
	max-width: 650px;
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:991px */
@media (max-width: 991px) {
	/* css-allow: .testimonials-container [ max-width:1100px ] · .testimonial-text-wrapper (tier max-width:991px) */
	.testimonial-quote-text {
		max-width: 530px;
	}
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:767px */
@media (max-width: 767px) {
	/* css-allow: .testimonials-container [ max-width:1100px ] · .testimonial-text-wrapper (tier max-width:767px) */
	.testimonial-quote-text {
		max-width: 430px;
	}
}

/* css-allow: .testimonial-heading-wrapper [ max-width:420px ] */
.testimonial-heading-wrapper {
	max-width: 420px;
}

/* css-allow: .reviewer-image-wrapper [ position:relative; border-radius:50% ] and the quote badge
   sits on top of the portrait — an absolute overlay. */
.reviewer-image-wrapper {
	position: relative;
	flex: 0 0 auto;
	border-radius: 50%;
}

/* css-allow: .reviewer-image-wrapper [ position:relative; border-radius:50% ] and the quote badge (tier max-width:767px) */
.reviewer-image img {
	width: 154px;
	height: 154px;
}

/* css-allow: .reviewer-image-wrapper [ position:relative; border-radius:50% ] and the quote badge (tier max-width:767px) */
.reviewer-image-wrapper .teastimonial-quote-icon {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	margin: 0;
}

/* css-allow: .slider-arrow [ 46x46; border-radius:50%; background:hsla(0,0%,100%,.1) ] — the
   source's arrow chrome, mapped onto insta/slider's own control class. */
.testimonial-slider .ib-slider__prev,
.testimonial-slider .ib-slider__next {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: hsla( 42, 0%, 100%, 0.1 );
	color: #fff;
}

/* ── BLOG ─────────────────────────────────────────────────────────────────────────────────── */
/* css-allow: .blog-item [ max-width:350px ] · .blog-card [ height:100%;
   box-shadow:0 9px 50px 0 rgba(0,0,0,.08) ] */
.blog-list > .wp-block-column {
	max-width: 350px;
}

/* css-allow: .blog-item [ max-width:350px ] · .blog-card [ height:100%; (tier max-width:767px) */
.blog-card {
	height: 100%;
	box-shadow: 0 9px 50px 0 rgba( 0, 0, 0, 0.08 );
}

/* css-allow: .blog-card-image-wrapper [ height:215px; overflow:hidden; border-radius:10px ] and
   .blog-card-image [ object-fit:cover ] — a fixed crop box; core/image has no height attribute. */
.blog-card-image-wrapper {
	overflow: hidden;
	width: 100%;
	height: 215px;
	margin: 0;
	border-radius: 10px;
}

/* css-allow: .blog-card-image-wrapper [ height:215px; overflow:hidden; border-radius:10px ] and (tier max-width:767px) */
.blog-card-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── FOOTER ───────────────────────────────────────────────────────────────────────────────── */
/* css-allow: .footer-container [ max-width:1070px ] */
.footer-container {
	max-width: 1070px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .footer-column-text-wrapper._2-column-layout [ width:245px;
   grid-template-columns:1fr 1fr; column-gap:25px ] — a two-column link list. */
.footer-column-text-wrapper._2-column-layout.footer-column-text-wrapper {
	display: grid;
	width: 245px;
	grid-template-columns: 1fr 1fr;
	column-gap: 25px;
}

/* css-allow: .footer-btn-wrapper [ width:185px; height:52px ] ·
   [max-width:991px] [ width:100% ] */
.footer-btn-wrapper .wp-block-button__link {
	width: 185px;
	height: 52px;
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:991px */
@media (max-width: 991px) {
	/* css-allow: .footer-btn-wrapper [ width:185px; height:52px ] · (tier max-width:991px) */
	.footer-btn-wrapper .wp-block-button__link {
		width: 100%;
	}

	/* css-allow: .footer-btn-wrapper [ width:185px; height:52px ] · (tier max-width:991px) */
	.footer-columns {
		min-width: 300px;
	}
}

/* ── SHARED CONTROLS ──────────────────────────────────────────────────────────────────────── */
/* css-allow: .primary-btn / .secondary-btn / .ghost-btn are flex rows with column-gap 10-12px so
   the icon sits beside the label; a button's rich text has no layout control. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

/* css-allow: .btn-icon [ width:20px; height:16px ] — an inline image inside rich text. */
.wp-block-button__link .btn-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 16px;
}

/* css-allow: .contact-btn-wrapper [ width:144px; height:50px ] */
.contact-btn-wrapper .wp-block-button__link {
	width: 144px;
	height: 50px;
}

/* css-allow: .nav-link [ padding:6px 10px; border-radius:5px ] and its hover/current state
   [ background:#fff; color:#4e3bf0 ] — core/navigation exposes no padding or radius control on
   the link element. */
.nav-links-wrapper .wp-block-navigation-item__content {
	padding: 6px 10px;
	border-radius: 5px;
	transition: all 300ms ease;
}

.nav-links-wrapper .wp-block-navigation-item__content:hover,
/* css-allow: .nav-link [ padding:6px 10px; border-radius:5px ] and its hover/current state (tier max-width:991px) */
.nav-links-wrapper .current-menu-item .wp-block-navigation-item__content {
	background-color: #fff;
	color: #4e3bf0;
}

/* css-allow: the source collapses its menu at 991px; core/navigation hard-wires its overlay switch
   to 600px, so the switch has to be moved here (there is no attribute for it). */
@media (max-width: 991px) {
	/* css-allow: the source collapses its menu at 991px; core/navigation hard-wires its overlay switch (tier max-width:991px) */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* css-allow: the source collapses its menu at 991px; core/navigation hard-wires its overlay switch (tier max-width:991px) */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at min-width:992px */
@media (min-width: 992px) {
	/* css-allow: the source collapses its menu at 991px; core/navigation hard-wires its overlay switch (tier min-width:992px) */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}

	/* css-allow: the source collapses its menu at 991px; core/navigation hard-wires its overlay switch (tier min-width:992px) */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: flex;
	}
}

/* css-allow: .top-bar-wrapper [ display:none ] below 992 — the contact bar collapses to its rule,
   and the navbar's 27px offset (which places it at y=90 on desktop) goes with it. */
@media (max-width: 991px) {
	/* css-allow: .top-bar-wrapper [ display:none ] below 992 — the contact bar collapses to its rule, (tier max-width:991px) */
	.top-bar-wrapper {
		display: none !important;
	}

	/* css-allow: .top-bar-wrapper [ display:none ] below 992 — the contact bar collapses to its rule, (tier max-width:991px) */
	.navbar-wrapper {
		margin-top: 0 !important;
	}
}

/* ── RESPONSIVE TIERS THE BLOCK CANNOT CARRY ──────────────────────────────────────────────────
 * A block serialises spacing INLINE (style="margin-top:50px"), and an inline style outranks any
 * stylesheet rule, so a tier that steps a value the block owns needs !important. The desktop value
 * stays editable on the block in the Site Editor; only the breakpoint step lives here. These are
 * the triples the source shapes as "flat, then jump at desktop", which has no single-clamp form.
 */

/* css-allow: .icon-box-wrapper [ margin-top:50px ] · [767] 0 · [479] 15px */
@media (max-width: 767px) {
	/* css-allow: .icon-box-wrapper [ margin-top:50px ] · [767] 0 · [479] 15px (tier max-width:767px) */
	.icon-box-wrapper {
		margin-top: 0 !important;
	}
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:479px */
@media (max-width: 479px) {
	/* css-allow: .icon-box-wrapper [ margin-top:50px ] · [767] 0 · [479] 15px (tier max-width:479px) */
	.icon-box-wrapper {
		margin-top: 15px !important;
	}
}

/* css-allow: .hero-btn [ margin-top:15px ] · [991] 25px */
@media (max-width: 991px) {
	/* css-allow: .hero-btn [ margin-top:15px ] · [991] 25px (tier max-width:991px) */
	.hero-btn {
		margin-top: 25px !important;
	}
}

/* css-allow: .value-points [ margin-top:18px ] · [991] 5px */
@media (max-width: 991px) {
	/* css-allow: .value-points [ margin-top:18px ] · [991] 5px (tier max-width:991px) */
	.value-points {
		margin-top: 5px !important;
	}
}

/* css-allow: .team-heading-wrapper [ row-gap:20px ] · [991] 5px */
@media (max-width: 991px) {
	/* css-allow: .team-heading-wrapper [ row-gap:20px ] · [991] 5px (tier max-width:991px) */
	.team-heading-wrapper.team-heading-wrapper {
		row-gap: 5px;
	}
}

/* css-allow: .testimonial-quote [ margin-bottom:40px ] · [991] 20px */
@media (max-width: 991px) {
	/* css-allow: .testimonial-quote [ margin-bottom:40px ] · [991] 20px (tier max-width:991px) */
	.testimonial-quote-text {
		margin-bottom: 20px !important;
	}
}

/* css-allow: .copyright-wrapper [ margin-top:60px ] · [991] 5px */
@media (max-width: 991px) {
	/* css-allow: .copyright-wrapper [ margin-top:60px ] · [991] 5px (tier max-width:991px) */
	.copyright-wrapper {
		margin-top: 5px !important;
	}
}

/* css-allow: .footer-column-text-wrapper [ row-gap:13px ] · [767] 15px and
   .footer-column-btn-wrapper [ row-gap:20px ] · [767] 15px */
@media (max-width: 767px) {
	.footer-column-text-wrapper.footer-column-text-wrapper,
	/* css-allow: .footer-column-text-wrapper [ row-gap:13px ] · [767] 15px and (tier max-width:767px) */
	.footer-column-btn-wrapper.footer-column-btn-wrapper {
		row-gap: 15px;
	}
}

/* ── TEXT FRAGMENTS INSIDE RICH TEXT ──────────────────────────────────────────────────────────
 * These are spans and links the source styles individually but which live inside ONE block's rich
 * text, so no block attribute reaches them.
 */

/* css-allow: the phone number is .body-text._500-medium (1rem/1.875rem) inside a
   .body-text-variant-2 line, and rich text has no per-fragment typography control. */
.top-bar-phone {
	font-size: 1rem;
	line-height: 1.875rem;
	font-weight: 500;
}

/* css-allow: .webflow-link [ color:#fcc845; font-weight:600; letter-spacing:0.5px ] */
.webflow-link {
	color: #fcc845;
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* css-allow: .blog-card-heading [ color:#191148; text-decoration:none ] and its hover — the card
   title is a link inside a paragraph's rich text. */
.blog-card-heading a,
.footer-link a,
.copyright-link a,
.top-bar-contact-link a {
	color: inherit;
	text-decoration: none;
}

/* css-allow: .blog-card-heading [ color:#191148; text-decoration:none ] and its hover — the card (tier max-width:767px) */
.blog-card-heading a:hover {
	color: #4e3bf0;
}

/* css-allow: .footer-link:hover / .copyright-link:hover [ color:#fcc845 ] */
.footer-link a:hover,
.copyright-link a:hover {
	color: #fcc845;
}

/* css-allow: .expertise-sub-para [ margin-right:auto; margin-left:auto ] */
.expertise-sub-para {
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .play [ margin-right:-3px ] — the triangle is optically centred in its circle. */
.tab-video .play {
	margin: 0 -3px 0 0;
}

/* css-allow: [max-width:767px] .play-btn [ width:70px; height:70px ] and .play [ 20x20 ] */
@media (max-width: 767px) {
	/* css-allow: [max-width:767px] .play-btn [ width:70px; height:70px ] and .play [ 20x20 ] (tier max-width:767px) */
	.tab-video {
		width: 70px;
		height: 70px;
	}
}

/* css-allow: .company-logo-images [ margin-top:135px ] · [991] 90px · [767] 120px — non-monotonic,
   so the desktop value is on the block and the two tiers are here. */
@media (max-width: 991px) {
	/* css-allow: [991] .company-logo-images margin-top 90px — an inline block style, hence important */
	.company-logo-images {
		margin-top: 90px !important;
	}
}

/* css-allow: the source's own 767 tier for the same value */
@media (max-width: 767px) {
	/* css-allow: [767] .company-logo-images margin-top 120px — an inline block style, hence important */
	.company-logo-images {
		margin-top: 120px !important;
	}
}

/* ── SIZING THE CRITIC MEASURED BUT NO BLOCK EXPRESSES ────────────────────────────────────────
 * Each of these reproduces a MEASURED source box that the block layout cannot state on its own.
 */

/* css-allow: the six client logos shrink to share the row — measured 183x101 each against a 337px
   natural width. A flex item's min-width defaults to auto, which blocks that shrink, so the basis
   has to be stated. */
.company-logo-row .client-image-wrapper {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/* css-allow: .client-image [ width:auto; height:auto; object-fit:contain ] — core/image puts the
   class on the figure, so the size never reaches the img. */
.client-image-wrapper img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* css-allow: .blog-collection-list [ width:100% ] — .blog-container is align-items:center, which
   would otherwise shrink the card row to its content (measured 274px cards against 350px). */
.blog-list {
	width: 100%;
}

/* css-allow: .nav-link [ padding:6px 10px; border-radius:5px ] — core/navigation nests the label in
   its own span, so the source's link box is reproduced on that span, not on the anchor. */
.nav-links-wrapper .wp-block-navigation-item__content {
	padding: 0;
}

/* css-allow: .nav-link [ padding:6px 10px; border-radius:5px ] — core/navigation nests the label in (tier max-width:767px) */
.nav-links-wrapper .wp-block-navigation-item__label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 5px;
	transition: all 300ms ease;
}

/* css-allow: .nav-link:hover and .nav-link.w--current [ background:#fff; color:#4e3bf0 ] */
.nav-links-wrapper .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.nav-links-wrapper .current-menu-item .wp-block-navigation-item__label {
	background-color: #fff;
	color: #4e3bf0;
}

/* css-allow: measured — all three .day-title labels are exactly 95px wide in the source, so the
   times line up at x=680 regardless of the day's length. */
.footer-text .day-title {
	flex: 0 0 95px;
}

/* css-allow: .blog-list [ justify-content:center ] — the three 350px cards are centred in the
   1250px frame (measured: first card at x=155, not at the container edge). */
.blog-list.blog-list {
	justify-content: center;
}

/* css-allow: the phone icon in a ghost button is 24x24 in the source and carries no class, unlike
   the 20x16 .btn-icon every other button uses. */
.wp-block-button__link .ghost-btn-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

/* css-allow: core gives .wp-block-accordion-heading__toggle-title flex:1, but the trailing chevron
   can only sit at the far edge when the title spans the whole card. */
.tabs-menu .tab-link-flex .wp-block-accordion-heading__toggle-title {
	width: 100%;
}

/* css-allow: [max-width:991px] .testimonial-content [ flex-direction:column; row-gap:30px;
   text-align:center ] and .testimonial-text-wrapper [ align-items:center ] */
@media (max-width: 991px) {
	/* css-allow: [991] .testimonial-content stacks and centres */
	.testimonial-content.testimonial-content {
		flex-direction: column;
		row-gap: 30px;
		text-align: center;
	}

	/* css-allow: [991] .testimonial-text-wrapper [ align-items:center ] */
	.testimonial-text-wrapper.testimonial-text-wrapper {
		width: 100%;
		align-items: center;
		text-align: center;
	}
}

/* css-allow: [max-width:991px] .tabs-menu [ max-width:none ] — the accordion goes full width once
   the row stacks (measured: the source's first tab label sits at the container edge, x=114). */
@media (max-width: 991px) {
	/* css-allow: [991] .tabs-menu drops its 435px cap */
	.tabs-menu.tabs-menu {
		max-width: none;
	}

	/* css-allow: [991] .icon-card [ max-width:360px ] inside an align-items:center column, so the
	   whole .icon-box-wrapper shrinks to the card and .decorative follows it (measured x=491). */
	.iconbox-row.iconbox-row {
		max-width: 360px;
	}
}

/* css-allow: .navbar-container keeps its OWN frame — max-width:1310px with a 30px gutter — and is
   not the .main-container the theme.json tier caps at 600px, so the header opts out of that cap
   (measured: the source logo stays at x=30 at 768). */
@media (max-width: 991px) {
	/* css-allow: the header's band keeps its gutter below 992 */
	.ib-header .wp-block-group.alignfull.is-layout-constrained {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* css-allow: and its inner row keeps the full width rather than the 600px frame */
	.ib-header .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: none;
	}
}

/* css-allow: [max-width:767px] .navbar-container [ padding:20px ] */
@media (max-width: 767px) {
	/* css-allow: [767] the header gutter drops to 20px */
	.ib-header .navbar-wrapper.wp-block-group.alignfull.is-layout-constrained {
		padding: 20px !important;
	}
}

/* ── LOGO STRIP TIERS ─────────────────────────────────────────────────────────────────────────
 * These sit at the END of the file on purpose: they share their specificity with the desktop
 * flex-basis rule above, so only source order decides which one wins.
 */

/* css-allow: [max-width:991px] .client-image-wrapper [ width:30% ] — measured 180px in a 600px row */
@media (max-width: 991px) {
	/* css-allow: [991] the logos go three-up at 30% each */
	.company-logo-row .client-image-wrapper {
		flex: 0 0 30%;
		width: 30%;
	}
}

/* css-allow: [max-width:767px] .client-image-wrapper [ width:120px; height:60px ] */
@media (max-width: 767px) {
	/* css-allow: [767] the logos take a fixed 120x60 box */
	.company-logo-row .client-image-wrapper {
		flex: 0 0 120px;
		width: 120px;
		height: 60px;
	}
}

/* css-allow: [max-width:991px] .footer-column-wrapper [ flex-direction:column ] with
   .footer-columns [ min-width:300px; margin-bottom:55px ] — the four footer columns stack rather
   than wrapping into two rows (measured: the source footer is 1054px tall at 768, not 572px). */
@media (max-width: 991px) {
	/* css-allow: [991] the footer columns stack */
	.footer-column-wrapper.footer-column-wrapper {
		flex-direction: column;
	}

	/* css-allow: [991] .footer-columns [ margin-bottom:55px ] */
	.footer-columns {
		margin-bottom: 55px;
	}
}

/* css-allow: [max-width:767px] .team-blocks-wrapper [ row-gap:40px ] and .blog-list [ row-gap:40px ]
   — the 60px stack gap on the block is the 991 value; 767 tightens it. */
@media (max-width: 767px) {
	/* css-allow: [767] both stacked card rows tighten to 40px */
	.team-blocks-wrapper.team-blocks-wrapper,
	.blog-list.blog-list {
		row-gap: 40px;
	}
}

/* css-allow: [max-width:991px] .blog-list [ max-width:400px ] */
@media (max-width: 991px) {
	/* css-allow: [991] the stacked card column caps at 400px */
	.blog-list.blog-list {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	/* css-allow: [991] .testimonial-slider [ padding-bottom:90px ] — room for the arrows once the
	   quote stacks (measured: the source band is 848px tall at 768, the port 764px without it). */
	.testimonial-slider {
		padding-bottom: 90px;
	}
}

/* ── THE 991 TIER FOR GAPS AND ALIGNMENT THE BLOCK OWNS AT DESKTOP ────────────────────────────
 /* css-allow: [991] .testimonial-slider [ padding-bottom:90px ] — room for the arrows once the (tier max-width:991px) */
 * WordPress emits `.wp-container-… > * { margin: 0 }` for every flex container at 0-2-0, and a
 * block's own gap is an inline custom property, so each of these has to outrank one of the two.
 */
/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:991px */
@media (max-width: 991px) {
	/* css-allow: [991] .hero-flexbox [ justify-content:flex-start; row-gap:80px ] */
	.hero-flexbox.hero-flexbox {
		justify-content: flex-start;
		row-gap: 80px;
	}

	/* css-allow: [991] .home-hero-flex-left [ row-gap:15px ] */
	.home-hero-flex-left.home-hero-flex-left {
		row-gap: 15px;
	}

	/* css-allow: [991] .company-logo-images [ row-gap:40px ] */
	.company-logo-images.company-logo-images {
		row-gap: 40px;
	}

	/* css-allow: [991] the footer columns are min-width:300px items in a flex-start column, and
	   their 55px separation is a MARGIN on each column (the last one included), not a row gap. */
	.footer-column-wrapper.footer-column-wrapper {
		align-items: flex-start;
		row-gap: 0;
	}

	/* css-allow: [991] .footer-columns [ margin-bottom:55px ] — beats the layout engine's
	   `> * { margin: 0 }` for flex children. */
	/* css-allow: [991] .footer-columns [ margin-bottom:55px ] — beats the layout engine's (tier max-width:991px) */
	.footer-column-wrapper .footer-columns {
		margin-bottom: 55px !important;
	}
}

/* css-allow: [max-width:767px] .hero-flexbox [ row-gap:60px ] */
@media (max-width: 767px) {
	/* css-allow: [767] the hero row tightens to a 60px stack gap */
	.hero-flexbox.hero-flexbox {
		row-gap: 60px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * INNER PAGES — company · services · blog · contact
 * Same three kinds of rule as above: absolute overlays, intrinsic max/min widths on a flex child,
 * and control sizes the source pins on a WRAPPER of the link.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* css-allow: .company-hero-container / .services-hero-container / .contact-hero-container /
   .news-hero-container [ max-width:1170px; margin:auto ] */
.company-hero-container,
.services-hero-container,
.contact-hero-container,
.news-hero-container {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .company-hero-heading / .services-hero-heading [ max-width:650px; margin-right:10px ] */
.company-hero-heading,
.services-hero-heading {
	max-width: 650px;
	margin-right: 10px;
}

/* css-allow: .company-hero-para / .services-hero-para [ max-width:420px ] */
.company-hero-para,
.services-hero-para {
	max-width: 420px;
}

/* css-allow: .contact-hero-heading / .news-hero-heading [ max-width:670px ] */
.contact-hero-heading,
.news-hero-heading {
	max-width: 670px;
}

/* css-allow: .company-span [ display:inline-block; margin-top:5px; padding:0 5px; color:#191148 ] —
   an inline highlight inside rich text; the core highlight format carries only a background. */
.company-span {
	display: inline-block;
	margin-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	color: #191148;
}

/* css-allow: .comapny-light-box [ height:500px; background:company img.webp 50% 50%/cover ] — a
   section background IMAGE, which core/group's background support does not cover. */
.comapny-light-box {
	width: 100%;
	height: 500px;
	background-image: url( "../images/company-img.webp" );
	background-position: 50% 50%;
	background-size: cover;
}

/* css-allow: .company-video-btn [ width:78px; height:78px ] */
.company-video-btn {
	flex: 0 0 auto;
	width: 78px;
	height: 78px;
}

/* css-allow: .startup-heading [ max-width:296px ] · .startup-logo-wrapper [ max-width:745px ] */
.startup-heading {
	max-width: 296px;
}

/* css-allow: .startup-heading [ max-width:296px ] · .startup-logo-wrapper [ max-width:745px ] (tier max-width:767px) */
.startup-logo-wrapper {
	max-width: 745px;
}

/* css-allow: .startup-logo [ 163x90; border-radius:10px; shadow; object-fit:contain ] */
.startup-logo {
	flex: 0 0 auto;
	margin: 0;
}

/* css-allow: .startup-logo [ 163x90; border-radius:10px; shadow; object-fit:contain ] (tier max-width:767px) */
.startup-logo img {
	width: 163px;
	height: 90px;
	border-radius: 10px;
	box-shadow: 0 25px 35px 0 rgba( 40, 126, 116, 0.05 );
	object-fit: contain;
}

/* css-allow: .value-image-wrapper-2 is the positioning context for .value-widget */
.value-image-wrapper-2 {
	position: relative;
}

/* css-allow: .value-image-2 [ width:535px; object-fit:contain ] */
.value-image-2 img {
	width: 535px;
	max-width: 100%;
	object-fit: contain;
}

/* css-allow: .value-widget [ position:absolute; right:-40px; inset-block:0; margin:auto ] and
   .value-widget-img [ 170x165; radius 10; shadow 0 10px 60px rgba(0,0,0,.05) ] */
.value-image-wrapper-2 .value-widget-img {
	position: absolute;
	top: 0;
	right: -40px;
	bottom: 0;
	z-index: 1;
	width: 170px;
	height: 165px;
	margin-top: auto;
	margin-bottom: auto;
}

/* css-allow: .value-widget [ position:absolute; right:-40px; inset-block:0; margin:auto ] and (tier max-width:767px) */
.value-image-wrapper-2 .value-widget-img img {
	width: 170px;
	height: 165px;
	border-radius: 10px;
	box-shadow: 0 10px 60px 0 rgba( 0, 0, 0, 0.05 );
}

/* css-allow: .mission-container [ max-width:1130px ] · .mission-text [ max-width:415px ] ·
   .mission-heading-wrapper [ max-width:420px ] */
.mission-container {
	max-width: 1130px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .mission-container [ max-width:1130px ] · .mission-text [ max-width:415px ] · (tier max-width:767px) */
.mission-text {
	width: 100%;
	max-width: 415px;
}

/* css-allow: .mission-container [ max-width:1130px ] · .mission-text [ max-width:415px ] · (tier max-width:767px) */
.mission-heading-wrapper {
	max-width: 420px;
}

/* css-allow: .mission-image [ width:510px; height:535px; object-fit:contain ] */
.mission-image img {
	width: 510px;
	max-width: 100%;
	height: 535px;
	object-fit: contain;
}

/* css-allow: .mission-btn [ max-width:220px; height:60px ] */
.mission-btn .wp-block-button__link {
	width: 220px;
	height: 60px;
}

/* css-allow: .contact-flex-box [ column-gap:75px ] · .contact-form-div [ max-width:585px ] ·
   .contact-flex-right-wrapper [ row-gap:70px ] */
.contact-form-div {
	width: 100%;
	max-width: 585px;
}

/* css-allow: .contact-flex-box [ column-gap:75px ] · .contact-form-div [ max-width:585px ] · (tier max-width:767px) */
.contact-flex-right-wrapper {
	row-gap: 70px;
}

/* css-allow: .contact-icons [ 50x50; object-fit:contain; object-position:0% 50% ] */
.contact-icons img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	object-position: 0% 50%;
}

/* css-allow: .contact-detail-card [ column-gap:15px ] · .contact-details [ row-gap:15px ] */
.contact-detail-card {
	column-gap: 15px;
}

/* css-allow: .office-phone-link [ #454159; 1rem/1.875rem; 500; margin-left:4px ] and its
   .yellow-color variant [ #fcc845; 1.188rem/2.125rem; 700; margin-left:6px ] — inline fragments. */
.office-phone-link {
	display: inline-block;
	margin-left: 4px;
	color: #454159;
	font-size: 1rem;
	line-height: 1.875rem;
	font-weight: 500;
	text-decoration: none;
}

/* css-allow: .office-phone-link [ #454159; 1rem/1.875rem; 500; margin-left:4px ] and its (tier max-width:767px) */
.office-phone-link.yellow-color {
	margin-left: 6px;
	color: #fcc845;
	font-size: 1.188rem;
	line-height: 2.125rem;
	font-weight: 700;
}

/* css-allow: .services-container [ max-width:1170px ] */
.services-container {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .services-image-wrapper [ position:relative; margin-top:-225px ] — the photograph is
   pulled up over the hero's deep bottom padding; no block expresses a negative margin context. */
.services-image-wrapper {
	position: relative;
	width: 100%;
	margin-top: -225px;
}

/* css-allow: .services-image [ width:100%; max-width:1170px; border-radius:15px; object-fit:contain ] */
.services-image {
	margin: 0;
}

/* css-allow: .services-image [ width:100%; max-width:1170px; border-radius:15px; object-fit:contain ] (tier max-width:767px) */
.services-image img {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1170px;
	border-radius: 15px;
	object-fit: contain;
}

/* css-allow: .service-decorative [ position:absolute; top:-25px; right:-25px; 123x90; z-index:0 ] */
.services-image-wrapper .service-decorative {
	position: absolute;
	top: -25px;
	right: -25px;
	z-index: 0;
	width: 123px;
	height: 90px;
	margin: 0;
}

/* css-allow: [min-width:1280px] .service-decorative [ top:-45px; right:-50px ] */
@media (min-width: 1280px) {
	/* css-allow: the source lifts the decorative further on wide screens */
	.services-image-wrapper .service-decorative {
		top: -45px;
		right: -50px;
	}
}

/* css-allow: .service-btn [ max-width:225px; height:60px ] */
.service-btn .wp-block-button__link {
	width: 225px;
	height: 60px;
}

/* css-allow: .faqs-wrapper [ max-width:855px ] */
.faqs-wrapper {
	width: 100%;
	max-width: 855px;
}

/* css-allow: .faq [ padding:27px 23px; radius 10; #fff; shadow 0 25px 35px rgba(40,126,116,.05) ] —
   core/accordion-item has no background, border or padding support, so the card face lives here. */
.faqs-wrapper .faq {
	padding: 27px 23px;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 25px 35px 0 rgba( 40, 126, 116, 0.05 );
	cursor: pointer;
}

/* css-allow: .faq-row [ justify-content:space-between; column-gap:20px ] and the 16px gap to the
   answer below it */
.faqs-wrapper .faq-row .wp-block-accordion-heading__toggle {
	padding: 0;
	gap: 20px;
}

/* css-allow: .faq-row [ justify-content:space-between; column-gap:20px ] and the 16px gap to the (tier min-width:1280px) */
.faqs-wrapper .faq .wp-block-accordion-panel {
	margin-top: 16px;
}

/* css-allow: .faq-para [ padding-right:80px; #454159; 15px/28px; 500 ] */
.faqs-wrapper .faq-para {
	padding-right: 80px;
}

/* css-allow: .blog-posts-container [ max-width:1180px ] · .blog-post-list is a 2-column grid with
   column-gap 50 / row-gap 40 · .blog-post-item [ width:350px ] */
.blog-posts-container {
	width: 100%;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

/* css-allow: .blog-posts-container [ max-width:1180px ] · .blog-post-list is a 2-column grid with (tier min-width:1280px) */
.blog-post-item {
	width: 350px;
}

/* css-allow: .contact-form-wrapper [ max-width:830px; z-index:0; position:relative ] — it is the
   positioning context for .contact-decorative and overlaps the hero above it. */
.contact-form-wrapper {
	position: relative;
	z-index: 0;
	width: 100%;
	max-width: 830px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 25px 35px 0 rgba( 40, 126, 116, 0.05 );
}

/* css-allow: .contact-decorative [ position:absolute; top:-25px; right:-25px; 123x90; z-index:0 ] */
.contact-form-wrapper .contact-decorative {
	position: absolute;
	top: -25px;
	right: -25px;
	z-index: 0;
	width: 123px;
	height: 90px;
	margin: 0;
}

/* css-allow: [min-width:1280px] .contact-decorative [ top:-45px; right:-50px ] */
@media (min-width: 1280px) {
	/* css-allow: the source lifts the decorative further on wide screens */
	.contact-form-wrapper .contact-decorative {
		top: -45px;
		right: -50px;
	}
}

/* css-allow: .contact-block [ width:330px; max-width:330px; shadow ] */
.contact-block {
	flex: 0 0 auto;
	width: 330px;
	max-width: 330px;
	box-shadow: 0 25px 35px 0 rgba( 40, 126, 116, 0.05 );
}

/* css-allow: .contact-block-icon [ 43x43; object-fit:contain ] */
.contact-block-icon img {
	width: 43px;
	height: 43px;
	object-fit: contain;
}

/* css-allow: .contact-form-box carries the card shadow the block cannot express */
.contact-form-box {
	box-shadow: 0 25px 35px 0 rgba( 40, 126, 116, 0.05 );
}

/* ── INNER-PAGE TIERS ─────────────────────────────────────────────────────────────────────────
 * The source's own 991 / 767 / 479 steps for the sections above. `!important` appears only where
 * the value it steps is an inline block style or a WordPress layout class.
 */
/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:991px */
@media (max-width: 991px) {
	/* css-allow: [991] .company-hero-heading [ max-width:500px; margin-right:0 ] */
	.company-hero-heading {
		max-width: 500px;
		margin-right: 0;
	}

	/* css-allow: [991] .company-hero-para / .services-hero-para / .mission-heading-wrapper
	   [ max-width:none ] */
	.company-hero-para,
	.services-hero-para,
	.mission-heading-wrapper {
		max-width: none;
	}

	/* css-allow: [991] .services-hero-heading [ margin-right:0 ] */
	.services-hero-heading {
		margin-right: 0;
	}

	/* css-allow: [991] .comapny-light-box [ height:400px; margin:60px 0 90px ] */
	.comapny-light-box {
		height: 400px;
		margin-top: 60px !important;
		margin-bottom: 90px !important;
	}

	/* css-allow: [991] .startup-heading [ max-width:520px; margin:auto; text-align:center ] */
	.startup-heading {
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	/* css-allow: [991] .startup-logo-wrapper [ justify-content:center ] */
	.startup-logo-wrapper.startup-logo-wrapper {
		justify-content: center;
	}

	/* css-allow: [991] .startup-logo [ width:21%; height:85px; object-fit:cover ] */
	.startup-logo img {
		width: 100%;
		height: 85px;
		object-fit: cover;
	}

	/* css-allow: [991] .startup-logo [ width:21%; height:85px; object-fit:cover ] (tier max-width:991px) */
	.startup-logo {
		flex: 0 0 21%;
		width: 21%;
	}

	/* css-allow: [991] .value-widget [ right:-80px ] */
	.value-image-wrapper-2 .value-widget-img {
		right: -80px;
	}

	/* css-allow: [991] .mission-text [ max-width:480px ] and .mission-text-wrapper [ order:1 ] —
	   the source moves the copy BELOW the image once the row stacks. */
	.mission-text {
		max-width: 480px;
		order: 1;
	}

	/* css-allow: [991] .mission-image [ width:100%; height:450px ] */
	.mission-image img {
		width: 100%;
		height: 450px;
	}

	/* css-allow: [991] .mission-btn [ margin-top:30px ] */
	.mission-btn-wrap {
		margin-top: 30px !important;
	}

	/* css-allow: [991] .contact-flex-box stacks and .contact-form-div [ margin-bottom:60px ] */
	.contact-flex-box.contact-flex-box {
		flex-direction: column;
	}

	/* css-allow: [991] .contact-flex-box stacks and .contact-form-div [ margin-bottom:60px ] (tier max-width:991px) */
	.contact-form-div {
		width: 100%;
		max-width: none;
		margin-bottom: 60px;
	}

	/* css-allow: [991] .contact-flex-right-wrapper becomes a 3-column grid, column-gap 16 / row-gap 30 */
	.contact-flex-right-wrapper.contact-flex-right-wrapper {
		align-items: stretch;
		column-gap: 16px;
		row-gap: 30px;
	}

	/* css-allow: [991] .contact-detail-card [ padding:20px; radius 10; background:#fff ] */
	.contact-detail-card {
		padding: 20px;
		border-radius: 10px;
		background-color: #fff;
	}

	/* css-allow: [991] .services-image-wrapper [ margin-top:-175px ] and .services-image
	   [ height:350px; object-fit:cover ] */
	.services-image-wrapper {
		margin-top: -175px;
	}

	/* css-allow: [991] .services-image-wrapper [ margin-top:-175px ] and .services-image (tier max-width:991px) */
	.services-image img {
		height: 350px;
		object-fit: cover;
	}

	/* css-allow: [991] .faq-para [ display:flex ] — every answer is open below 992 in the source,
	   so the panel's hidden/inert state has to be undone. */
	.faqs-wrapper .faq-para[aria-hidden="true"],
	.faqs-wrapper .faq-para[inert] {
		display: block !important;
	}

	/* css-allow: [991] .blog-post-item [ max-width:280px ] */
	.blog-post-item {
		width: 100%;
		max-width: 280px;
	}

	/* css-allow: [991] .contact-form-wrapper [ max-width:620px; padding-inline:40px ] */
	.contact-form-wrapper {
		max-width: 620px;
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	/* css-allow: [991] .contact-block stacks its icon above the text and centres */
	.contact-block.contact-block {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	/* css-allow: [991] .contact-blocks-wrapper stacks */
	.contact-blocks-wrapper.contact-blocks-wrapper {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	/* css-allow: [991] .blog-post-section [ padding:90px 0 ] — it DECREASES with width at the top,
	   so the desktop 55px is on the block and this is the tier. */
	.blog-post-section {
		padding-top: 90px !important;
	}
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:767px */
@media (max-width: 767px) {
	/* css-allow: [767] .comapny-light-box [ height:300px ] */
	.comapny-light-box {
		height: 300px;
	}

	/* css-allow: [767] .startup-logo-wrapper [ width:100% ] and .startup-logo [ width:30% ] */
	.startup-logo-wrapper {
		width: 100%;
	}

	/* css-allow: [767] .startup-logo-wrapper [ width:100% ] and .startup-logo [ width:30% ] (tier max-width:767px) */
	.startup-logo {
		flex: 0 0 30%;
		width: 30%;
	}

	/* css-allow: [767] .value-image-2 [ width:100%; height:450px ] */
	.value-image-2 img {
		width: 100%;
		height: 450px;
	}

	/* css-allow: [767] .value-widget [ left:0; right:0; bottom:-80px; 150x150; margin:auto;
	   transform:translate(10px,-20px) ] */
	.value-image-wrapper-2 .value-widget-img {
		left: 0;
		top: auto;
		right: 0;
		bottom: -80px;
		width: 150px;
		height: 150px;
		margin-left: auto;
		margin-right: auto;
		transform: translate( 10px, -20px );
	}

	/* css-allow: [767] .value-widget [ left:0; right:0; bottom:-80px; 150x150; margin:auto; (tier max-width:767px) */
	.value-image-wrapper-2 .value-widget-img img {
		width: 150px;
		height: 150px;
	}

	/* css-allow: [767] .services-image [ height:300px ] */
	.services-image img {
		height: 300px;
	}

	/* css-allow: [767] .faq-para [ padding-right:0 ] */
	.faqs-wrapper .faq-para {
		padding-right: 0;
	}

	/* css-allow: [767] .blog-post-item [ max-width:none ] */
	.blog-post-item {
		width: 100%;
		max-width: none;
	}

	/* css-allow: [767] .contact-block [ min-width:220px ] and .contact-blocks-wrapper wraps with
	   column-gap 60 / row-gap 30 */
	.contact-block.contact-block {
		min-width: 220px;
	}

	/* css-allow: [767] .contact-block [ min-width:220px ] and .contact-blocks-wrapper wraps with (tier max-width:767px) */
	.contact-blocks-wrapper.contact-blocks-wrapper {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 60px;
		row-gap: 30px;
	}
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:479px */
@media (max-width: 479px) {
	/* css-allow: [479] .comapny-light-box [ height:200px; margin-bottom:60px ] */
	.comapny-light-box {
		height: 200px;
		margin-bottom: 60px !important;
	}

	/* css-allow: [479] .startup-logo-wrapper gap 20 and .startup-logo [ 140x75 ] */
	.startup-logo-wrapper.startup-logo-wrapper {
		column-gap: 20px;
		row-gap: 20px;
	}

	/* css-allow: [479] .startup-logo-wrapper gap 20 and .startup-logo [ 140x75 ] (tier max-width:479px) */
	.startup-logo {
		flex: 0 0 140px;
		width: 140px;
	}

	/* css-allow: [479] .startup-logo-wrapper gap 20 and .startup-logo [ 140x75 ] (tier max-width:479px) */
	.startup-logo img {
		width: 140px;
		height: 75px;
	}

	/* css-allow: [479] .value-image-2 [ height:auto ] */
	.value-image-2 img {
		height: auto;
	}

	/* css-allow: [479] .services-container [ row-gap:60px ] · .services-image [ height:250px ] ·
	   .services-image-wrapper [ margin-top:-125px ] */
	.services-image img {
		height: 250px;
	}

	/* css-allow: [479] .services-container [ row-gap:60px ] · .services-image [ height:250px ] · (tier max-width:479px) */
	.services-image-wrapper {
		margin-top: -125px;
	}

	/* css-allow: [479] .contact-form-wrapper [ max-width:none; padding-inline:20px ] */
	.contact-form-wrapper {
		max-width: none;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* css-allow: [479] .contact-block [ width:100%; min-width:auto; padding-inline:20px ] */
	.contact-block.contact-block {
		width: 100%;
		min-width: auto;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* css-allow: [479] .blog-post-item [ max-width:360px ] */
	.blog-post-item {
		max-width: 360px;
	}

	/* css-allow: [479] .contact-form-box [ padding:35px 25px ] */
	.contact-form-box {
		padding: 35px 25px !important;
	}
}

/* css-allow: [max-width:991px] .company-hero-row / .services-hero-row [ flex-direction:column;
   align-items:flex-start ] with row-gap 40 and 15 respectively */
@media (max-width: 991px) {
	/* css-allow: [991] the company hero's two-column intro stacks, left-aligned */
	.company-hero-row.company-hero-row {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 40px;
	}

	/* css-allow: [991] the services hero's intro stacks with a 15px gap */
	.services-hero-row.services-hero-row {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 15px;
	}
}

/* css-allow: [max-width:767px] .services-hero-row [ row-gap:10px ] */
@media (max-width: 767px) {
	/* css-allow: [767] the services hero intro tightens */
	.services-hero-row.services-hero-row {
		row-gap: 10px;
	}
}

/* css-allow: .contact-flex-right takes the space beside the 585px form column, as the source's
   flex row does (measured: the detail cards start at x=969 at 1440). */
.contact-flex-right {
	display: flex;
	align-items: center;
}

/* css-allow: .contact-form-paragraph [ display:flex; flex-wrap:wrap; justify-content:center;
   align-items:center; margin-bottom:40px ] — the source centres the sentence and its email link as
   a pair while each keeps its own left text-align, which one paragraph block cannot express. */
.contact-form-paragraph {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

/* css-allow: [max-width:479px] .contact-form-paragraph [ text-align:center ] */
@media (max-width: 479px) {
	/* css-allow: [479] the consultation lead centres its text */
	.contact-form-paragraph {
		text-align: center;
	}
}

/* css-allow: [max-width:991px] .h3 [ font-size:34px ] — the .h3 role steps 26 / 34 / 32 across the
   three tiers, which is non-monotonic and has no clamp form, so the desktop 32px is the preset and
   this is the tier. */
@media (max-width: 991px) {
	/* css-allow: [991] the .h3 role grows to 34px */
	.startup-heading {
		font-size: 34px !important;
	}
}

/* css-allow: [max-width:991px] .webflow-branding [ flex-direction:column; justify-content:center;
   flex-wrap:wrap; row-gap:5px ] — the copyright block centres itself under the footer once the row
   stacks (measured: the source's copyright line sits at x=130 inside a 600px container at 768). */
@media (max-width: 991px) {
	/* css-allow: [991] the footer's branding row stacks and centres */
	.webflow-branding.webflow-branding {
		flex-direction: column;
		justify-content: center;
		flex-wrap: wrap;
		row-gap: 5px;
	}
}

/* css-allow: [max-width:767px] .webflow-branding [ margin-top:0; flex-direction:column ] */
@media (max-width: 767px) {
	/* css-allow: [767] same stack, with no top margin */
	.webflow-branding.webflow-branding {
		margin-top: 0;
	}
}

/* css-allow: [max-width:479px] .webflow-branding [ align-items:flex-start; padding-inline:0 ] and
   .copyright-text-wrapper [ flex-wrap:wrap; margin-bottom:10px; text-align:left ] */
@media (max-width: 479px) {
	/* css-allow: [479] the branding block aligns left */
	.webflow-branding.webflow-branding {
		align-items: flex-start;
		padding-left: 0;
		padding-right: 0;
	}

	/* css-allow: [479] .copyright-text-wrapper wraps and gains a 10px bottom margin */
	.copyright-text-wrapper.copyright-text-wrapper {
		flex-wrap: wrap;
		margin-bottom: 10px;
		text-align: left;
	}
}

/* css-allow: [max-width:767px] .h3 [ font-size:26px ] and [max-width:479px] [ line-height:40px ] —
   the 991 tier above raises this role to 34px, so the smaller tiers bring it back down. */
@media (max-width: 767px) {
	/* css-allow: [767] the .h3 role drops to 26px */
	.startup-heading {
		font-size: 26px !important;
	}
}

/* css-allow: the source's own breakpoint — every rule inside restates a tier it declares at max-width:479px */
@media (max-width: 479px) {
	/* css-allow: [479] the .h3 role's line-height */
	.startup-heading {
		line-height: 40px !important;
	}
}