/*
Theme Name: Sorim Technologies
Theme URI: https://sorimtechnologies.com
Author: Sorim Technologies
Author URI: https://sorimtechnologies.com
Description: Custom enterprise digital-engineering theme for Sorim Technologies, built with Advanced Custom Fields (ACF). Font: Noto Sans. Primary color: #00408E.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: sorim
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
	--color-primary:#00408E;
	--color-primary-dark:#00306B;
	--color-primary-light:#0A5AC2;
	--color-accent:#62AF33;
	--color-accent-dark:#4F9628;
	--color-text:#1A1A1A;
	--color-text-muted:#5B6472;
	--color-body:#3F4750;
	--color-border:#E5E8EC;
	--color-surface:#FFFFFF;
	--color-surface-alt:#F5F7FA;
	--color-surface-dark:#0B1F3A;
	--font-base:"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--container:1280px;
	--radius:10px;
	--shadow-sm:0 2px 10px rgba(10,20,40,.06);
	--shadow-md:0 10px 30px rgba(10,20,40,.10);
	--transition:.25s ease;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
	margin:0;
	overflow-x:clip;
	font-family:var(--font-base);
	color:var(--color-body);
	font-size:16px;
	line-height:1.65;
	background:var(--color-surface);
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color var(--transition);}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{
	opacity:0;
	transform:translateY(32px);
	transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].is-revealed{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
	[data-reveal]{opacity:1;transform:none;transition:none;}
}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,h5,h6{
	font-family:var(--font-base);
	color:var(--color-text);
	margin:0 0 .5em;
	line-height:1.25;
	font-weight:700;
}
p{margin:0 0 1em;}
figure{margin:0;}

.container{
	width:100%;
	max-width:var(--container);
	margin:0 auto;
	padding:0 24px;
}
.screen-reader-text{
	position:absolute!important;
	width:1px;height:1px;
	overflow:hidden;
	clip:rect(1px,1px,1px,1px);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:13px 28px;
	border-radius:30px;
	font-weight:600;
	font-size:14px;
	border:2px solid transparent;
	transition:all var(--transition);
	white-space:nowrap;
}
.btn-accent{
	display:inline-flex !important;
	padding:5px 5px 5px 20px !important;
	gap:10px !important;
	border-radius:140px !important;
	background:#62AF33 !important;
	color:#FFF !important;
	text-align:center !important;
	align-items:center !important;
	font-family:"Noto Sans" !important;
	font-size:16px !important;
	font-style:normal !important;
	font-weight:500 !important;
	line-height:normal !important;
}
.btn-accent:hover{background:var(--color-accent-dark);color:#fff;}
.btn-accent::after{
	content:"";
	flex-shrink:0;
	width:34px;height:34px;
	border-radius:50%;
	background-color:#fff;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1363 11.9197C21.2944 11.9182 21.4454 11.9796 21.5562 12.0904C21.6669 12.2011 21.7283 12.3521 21.7268 12.5103L21.6606 19.262C21.6626 19.3421 21.6485 19.4221 21.6191 19.4972C21.5896 19.5723 21.5455 19.641 21.4893 19.6992C21.433 19.7574 21.3659 19.8039 21.2918 19.8359C21.2177 19.868 21.1383 19.8849 21.0581 19.8857C20.978 19.8865 20.8988 19.8711 20.8254 19.8405C20.7519 19.8099 20.6856 19.7647 20.6305 19.7076C20.5754 19.6505 20.5326 19.5826 20.5047 19.5081C20.4767 19.4335 20.4642 19.3538 20.4678 19.2737L20.5199 13.9623L12.4576 22.0246C12.3446 22.1376 12.1922 22.202 12.0339 22.2036C11.8756 22.2051 11.7244 22.1437 11.6136 22.0329C11.5028 21.9221 11.4414 21.7709 11.443 21.6126C11.4445 21.4544 11.5089 21.302 11.6219 21.1889L19.6842 13.1266L14.3728 13.1788C14.2927 13.1824 14.213 13.1698 14.1384 13.1419C14.0639 13.1139 13.996 13.0711 13.9389 13.016C13.8818 12.9609 13.8366 12.8946 13.806 12.8212C13.7754 12.7477 13.7601 12.6686 13.7608 12.5884C13.7616 12.5083 13.7785 12.4288 13.8106 12.3547C13.8426 12.2806 13.8891 12.2135 13.9474 12.1573C14.0056 12.101 14.0743 12.0569 14.1494 12.0275C14.2245 11.998 14.3045 11.9839 14.3845 11.986L21.1363 11.9197Z' fill='%2362AF33'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:center;
}
.btn-outline{background:transparent;border-color:#fff;color:#fff;}
.btn-outline:hover{background:#fff;color:var(--color-primary);}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-primary:hover{background:var(--color-primary-dark);color:#fff;}

/* ==========================================================================
   Under construction placeholder page
   ========================================================================== */
.under-construction{
	padding:140px 0;
	text-align:center;
}
.under-construction h1{
	margin:8px 0 12px;
	color:#1A1A1A;
	font-family:"Noto Sans";
	font-size:32px;
	font-weight:700;
	line-height:42px;
}
.under-construction p{
	max-width:480px;
	margin:0 auto 28px;
	color:#5B6472;
	font-family:"Noto Sans";
	font-size:16px;
	line-height:24px;
}

.eyebrow{
	display:inline-block !important;
	font-family:"Noto Sans" !important;
	font-size:18px !important;
	font-style:normal !important;
	font-weight:600 !important;
	line-height:normal !important;
	text-transform:uppercase !important;
	margin-bottom:5px !important;
	color:#00408E;
}

.section{padding:80px 0;}
#about.section{padding:120px 0;}
#services.section{padding:120px 0px;}
#case-studies.section{padding:100px 0px;background-color:#F8F8F8 !important;}
#industries.section{padding:100px 0px 0px 0px;}
body.single-service #industries.section{background:#F8F8F8;}
#testimonials.section{padding:120px 0px;}
#blog.section{padding:100px 0px;}
#events .section-head{
	display:flex !important;
	align-items:end !important;
	gap:20px !important;
	margin-bottom:40px !important;
	flex-wrap:wrap !important;
	justify-content:space-between;
}
#events .section-head h2{width:535px !important;}
#events .section-head .desc{width:415px !important;}
.section-alt{background:var(--color-surface-alt);}
.section-head{
	display:flex !important;
	align-items:end !important;
	gap:68px !important;
	margin-bottom:40px !important;
	flex-wrap:wrap !important;
}
.section-head h2{
	width:556px !important;
	color:#333 !important;
	font-family:"Noto Sans" !important;
	font-size:36px !important;
	font-style:normal !important;
	font-weight:700 !important;
	line-height:46px !important;
	margin:0em !important;
}
.section-head .desc{
	width:373px !important;
	color:#000 !important;
	font-family:"Noto Sans" !important;
	font-size:16px !important;
	font-style:normal !important;
	font-weight:400 !important;
	line-height:24px !important;
	margin:0em !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
	position:sticky;
	top:0;
	z-index:120;
	background:#fff;
	box-shadow:var(--shadow-sm);
}
.site-header .container{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-top:14px;
	padding-bottom:14px;
	gap:24px;
}
.site-branding img{max-height:68px;}
.site-branding{font-weight:800;font-size:20px;color:var(--color-primary);}

.main-navigation{margin-left:auto;}
/* .mobile-navigation is the separate full-screen panel — hidden on
   desktop, shown (and made fixed/full-screen) at <=900px instead. */
.mobile-navigation{display:none;}
.main-navigation ul{
	display:flex;
	align-items:center;
	gap:28px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:500;
	line-height:normal;
}
.main-navigation li{position:relative;}
.main-navigation a{
	font-family:"Noto Sans";
	font-weight:500;
	font-size:16px;
	font-style:normal;
	line-height:normal;
	color:#000;
	padding:8px 0;
}
.main-navigation li.has-mega-menu > a{position:relative;display:inline-flex;align-items:center;gap:5px;}
.submenu-caret{display:inline-flex;align-items:center;color:inherit;}
.nav-mega-caret{
	position:absolute;
	top:100%;left:50%;
	transform:translateX(-50%);
	margin-top:6px;
	opacity:0;
	visibility:hidden;
	transition:all var(--transition);
	pointer-events:none;
	z-index:91;
}
.main-navigation li.has-mega-menu:hover > a .nav-mega-caret{opacity:1;visibility:visible;}
.main-navigation a:hover,
.main-navigation .current-menu-item > a{color:var(--color-primary);}
.nav-badge{
	display:inline-block;
	margin-left:6px;
	padding:4px 12px;
	border-radius:30px;
	background:#104AAC;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:12px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
	text-transform:uppercase;
	vertical-align:middle;
}
.main-navigation .sub-menu{
	position:absolute;
	top:100%;left:0;
	background:#fff;
	min-width:220px;
	box-shadow:var(--shadow-md);
	border-radius:8px;
	padding:8px;
	opacity:0;
	visibility:hidden;
	transform:translateY(6px);
	transition:all var(--transition);
}
.main-navigation li:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.main-navigation .sub-menu a{display:block;padding:9px 12px;border-radius:6px;}
.main-navigation .sub-menu a:hover{background:var(--color-surface-alt);}
.header-cta{display:flex;align-items:center;gap:18px;}
.header-cta .btn{
	display:inline-flex !important;
	align-items:center !important;
	padding:5px 5px 5px 20px !important;
	gap:10px !important;
	border-radius:140px !important;
	background:#62AF33 !important;
	color:#fff !important;
	font-size:16px !important;
}
.header-cta .btn:hover{background:var(--color-accent-dark) !important;}
/* Figma's toggle icon is a single SVG (3 bars, the middle one only
   right-half length) rather than a CSS-drawn hamburger — the icon
   itself never animates to an "X" (matches the Figma mobile menu
   screenshot, which still shows the plain hamburger while open). */
.menu-toggle{
	display:none;
	background:none;
	border:none;
	padding:0;
	width:18px;height:13px;
}
.menu-toggle svg{display:block;width:100%;height:100%;}
.mobile-nav-footer{display:none;}
.mobile-nav-top{display:none;}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
	position:relative;
	overflow:hidden;
	background:linear-gradient(120deg,#B9BEC4 0%,#CBCFD3 60%,#D8DBDE 100%);
}
.hero-track{
	display:flex;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	-ms-overflow-style:none;
	scrollbar-width:none;
}
.hero-track::-webkit-scrollbar{display:none;}
.hero-slide{
	flex:0 0 100%;
	scroll-snap-align:start;
	height:91vh;
	display:flex;
	align-items:center;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	padding:60px 0 130px;
	box-sizing:border-box;
	opacity:.82;
	transition:opacity .6s ease;
}
.hero-slide.is-active{opacity:1;}
.hero-content{max-width:560px;}
.hero-eyebrow{
	display:block !important;
	letter-spacing:.06em !important;
	margin-bottom:3px !important;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:18px !important;
	font-style:normal !important;
	font-weight:500 !important;
	line-height:normal !important;
	text-transform:uppercase !important;
}
.hero h1{
	margin-bottom:10px !important;
	color:#FFF !important;
	font-family:"Noto Sans" !important;
	font-size:50px !important;
	font-style:normal !important;
	font-weight:700 !important;
	line-height:60px !important;
}
.hero p{
	max-width:548px !important;
	padding-bottom:30px !important;
	color:#FFF !important;
	font-family:"Noto Sans" !important;
	font-size:16px !important;
	font-style:normal !important;
	font-weight:400 !important;
	line-height:24px !important;
	margin-bottom:0px !important;
}
.hero-actions{margin-top:0px !important;}

/* Thumbnail-strip pagination: one small preview tile per slide,
   showing that slide's own background photo, bottom-left over the
   hero image. The active tile gets a white ring.
   .hero-thumbs-wrap > .container reuses the real .container element
   (same one .hero-content sits in) so the strip's left edge always
   matches the text/button column exactly — a hand-rolled calc()
   approximating the container's own responsive padding used to drift
   out of sync with it at in-between viewport widths. */
.hero-thumbs-wrap{
	position:absolute;
	left:0;right:0;
	bottom:50px;
	z-index:3;
}
.hero-thumbs{
	display:flex;
	gap:10px;
}
.hero-thumb{
	width:80px;height:50px;
	border-radius:6px;
	border:2px solid transparent;
	background-color:rgba(255,255,255,.15);
	background-size:cover;
	background-position:center;
	padding:0;
	cursor:pointer;
	opacity:.65;
	transition:opacity var(--transition), border-color var(--transition);
}
.hero-thumb:hover{opacity:.85;}
.hero-thumb.is-active{opacity:1;border-color:#fff;}

/* ==========================================================================
   Section head with slider arrows
   ========================================================================== */
.section-head{position:relative;}
.section-head .slider-arrows{margin-left:auto;}
#blog .section-head{
	display:flex !important;
	align-items:end !important;
	gap:10px !important;
	margin-bottom:44px !important;
	flex-wrap:wrap !important;
	justify-content:space-between;
}
#blog .section-head h2{
	color:#000 !important;
	line-height:46px !important;
	margin:0px !important;
	width:450px !important;
	font-weight:700 !important;
}
#blog .section-head .desc{
	width:400px !important;
	color:#000000 !important;
}
#case-studies .section-head,
#industries .section-head{
	display:flex !important;
	align-items:end !important;
	gap:46px !important;
	margin-bottom:44px !important;
	flex-wrap:wrap !important;
}
#industries .section-head .desc{
	width:470px !important;
}
#case-studies .section-head h2{
	width:556px !important;
	color:#000 !important;
	font-family:"Noto Sans" !important;
	font-size:36px !important;
	font-style:normal !important;
	font-weight:700 !important;
	line-height:46px !important;
	margin:0em !important;
}

/* ==========================================================================
   About
   ========================================================================== */
.about-header{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	margin-bottom:44px;
}
.about-header-left .eyebrow{
	margin-bottom:6px !important;
	font-family:"Noto Sans" !important;
	font-size:18px !important;
	font-style:normal !important;
	font-weight:600 !important;
	line-height:normal !important;
	text-transform:uppercase !important;
	color:#00408E !important;
}
.about-header-left h2{
	width:593px !important;
	max-width:100% !important;
	color:#000 !important;
	font-family:"Noto Sans" !important;
	font-size:36px !important;
	font-style:normal !important;
	font-weight:600 !important;
	line-height:46px !important;
	margin-bottom:10px !important;
}
.about-intro{
	width:524px !important;
	max-width:100% !important;
	color:#000 !important;
	font-family:"Noto Sans" !important;
	font-style:normal !important;
	font-size:16px !important;
	font-weight:400 !important;
	line-height:24px !important;
}
.about-trust-badge{
	display:flex;
	align-items:center;
	gap:12px;
	margin-top:26px;
}
.about-trust-badge img{width:79px;height:69px;flex-shrink:0;}
.about-trust-badge span{
	font-family:"Noto Sans";
	font-size:14px;
	font-weight:700;
	color:var(--color-text);
}
.about-header-right .about-text{color:var(--color-text-muted);}
.about-header-right .about-text strong{color:var(--color-text);font-weight:700;}
.about-header-right .btn-accent{
	display:inline-flex !important;
	padding:5px 5px 5px 20px !important;
	gap:10px !important;
	border-radius:140px !important;
	background:#62AF33 !important;
	color:#FFF !important;
	text-align:center !important;
	align-items:center !important;
	font-family:"Noto Sans" !important;
	font-size:16px !important;
	font-style:normal !important;
	font-weight:500 !important;
	line-height:normal !important;
	margin-top:35px !important;
}
.about-header-right .about-text p{
	margin-bottom:15px !important;
	width:564px !important;
	max-width:100% !important;
	color:#000 !important;
	font-family:"Noto Sans" !important;
	font-size:16px !important;
	font-style:normal !important;
	font-weight:400 !important;
	line-height:24px !important;
}

.about-row{
	display:grid;
	grid-template-columns:repeat(5,auto);
	gap:30px;
	align-items:center;
	justify-content:center;
	margin-top:60px;
}
.about-row > *:nth-child(1){width:240px;height:320px;}
.about-row > *:nth-child(2){width:240px;height:251px;border-radius:20px;background:#F1F3FC;}
.about-row > *:nth-child(3){width:210px;height:226px;margin-top:90px;}
.about-row > *:nth-child(4){width:240px;height:251px;border-radius:20px;background:#F1F3FC;}
.about-row > *:nth-child(5){width:250px;height:320px;border-radius:20px;background:#F6F6F6;padding:30px;}
.about-row-image{border-radius:var(--radius);overflow:hidden;transform:translateZ(0);}
.about-row-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.about-row-image:hover img{transform:scale(1.06);}
.about-stat-card{
	box-sizing:border-box;
	background:var(--color-surface-alt);
	border-radius:var(--radius);
	padding-top:23px;
	padding-bottom:23.5px;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.about-stat-card .num{
	color:#333;
	text-align:center;
	font-family:"Noto Sans";
	font-size:70px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
	padding-left:40px;
	padding-right:39px;
}
.about-stat-card .label{
	color:#333;
	text-align:center;
	font-family:"Noto Sans";
	font-size:18px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
	text-transform:capitalize;
	padding-left:35px;
	padding-right:34px;
}
.about-stat-card .desc{
	color:#333;
	text-align:center;
	font-family:"Noto Sans";
	font-size:14px;
	font-style:normal;
	font-weight:400;
	line-height:20px;
	padding-top:6.5px;
	padding-left:31px;
	padding-right:31px;
}
.about-stat-card.has-avatars .num{
	color:#000;
	font-family:"Noto Sans";
	font-size:70px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
	padding:0px !important;
	text-align:start;
}
.about-stat-card.has-avatars .label{
	margin-top:0px !important;
	text-align:left;
	color:#000;
	font-family:"Noto Sans";
	font-size:18px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
	padding-left:0;
	padding-right:0;
	text-transform:none;
}
.about-stat-card.has-avatars .desc{
	margin:8px 0 0;
	color:#000;
	font-family:"Noto Sans";
	font-size:14px;
	font-style:normal;
	font-weight:400;
	line-height:20px;
	text-align:left;
	padding:0;
}
.about-stat-avatars{display:flex;justify-content:left;margin-bottom:0px;}
.about-stat-avatars img{
	object-fit:cover;
	border:2px solid var(--color-surface-alt);
	margin-left:-10px;
}
.about-stat-avatars img:first-child{
	margin-left:0;
	padding-left:0px;
	padding-right:79px;
	padding-bottom:30px;
}

/* ==========================================================================
   Services
   ========================================================================== */
.section-services-bg{background:linear-gradient(180deg, rgba(245, 245, 245, 0.70) 0%, rgba(255, 255, 255, 0.00) 100%);}
.services-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
}
.service-card{
	background:#fff !important;
	border:1px solid var(--color-border) !important;
	border-radius:var(--radius) !important;
	overflow:hidden !important;
	transition:background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition) !important;
	width:419px !important;
	/* height:458px !important; */
}
.service-card:hover{
	background:var(--color-primary) !important;
}
.service-card .body{
	padding-top:30px !important;
	padding-left:30px !important;
	padding-right:30px !important;
}
.service-card h3{
	transition:color var(--transition) !important;
	color:#000 !important;
	font-family:"Noto Sans" !important;
	font-size:22px !important;
	font-style:normal !important;
	font-weight:500 !important;
	line-height:normal !important;
	letter-spacing:-0.44px !important;
	padding-bottom:3px !important;
}
.service-card p{
	margin-bottom:13px !important;
	transition:color var(--transition) !important;
	width:359px !important;
	color:#333 !important;
	font-family:"Noto Sans" !important;
	font-size:16px !important;
	font-style:normal !important;
	font-weight:400 !important;
	line-height:24px !important;
	display:-webkit-box !important;
	-webkit-line-clamp:2 !important;
	-webkit-box-orient:vertical !important;
	overflow:hidden !important;
}
.service-card .more{
	display:inline-flex !important;
	align-items:center !important;
	gap:6px !important;
	color:#62AF33 !important;
	text-align:right !important;
	font-family:"Noto Sans" !important;
	font-size:14px !important;
	font-style:normal !important;
	font-weight:400 !important;
	line-height:normal !important;
	text-transform:uppercase !important;
}
.service-card .thumb{
	aspect-ratio:16/10 !important;
	padding-top:27px !important;
	padding-left:20px !important;
	padding-right:20px !important;
	padding-bottom:20px !important;
}
/* The zoom-on-hover clip has to sit on a wrapper with no padding of its
   own — .thumb's padding is the card's frame around the photo, and
   clipping happens at a box's padding edge, so putting overflow:hidden
   directly on .thumb let the scaled image balloon out into that frame
   instead of staying inside the photo's own footprint. */
.service-card .thumb-clip{
	display:block !important;
	width:100% !important;
	height:100% !important;
	overflow:hidden !important;
	border-radius:8px !important;
	transform:translateZ(0) !important;
}
.service-card .thumb img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	border-radius:8px !important;
	transition:transform .5s ease !important;
}
.service-card:hover .thumb img{transform:scale(1.08) !important;}
.service-card:hover h3,
.service-card:hover p{color:#fff !important;}
.service-card:hover .more{color:#fff !important;}
.service-card:hover .more svg path{fill:#FFF !important;}

/* ==========================================================================
   Case studies — one unified card (text pane + image pane) per slide,
   looping peek slider
   ========================================================================== */
.case-slider{position:relative;padding:8px 0 0;}
.case-track{
	display:flex;
	gap:24px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-padding-left:max(24px, calc((100vw - var(--container)) / 2 + 24px));
	/* Extra right slack so the last card can actually reach "start"
	   alignment — see .industries-track for the full explanation. */
	padding:4px calc(max(24px, calc((100vw - var(--container)) / 2)) + min(90vw, 1300px) - 20px) 24px max(24px, calc((100vw - var(--container)) / 2));
	-ms-overflow-style:none;
	scrollbar-width:none;
}
.case-track::-webkit-scrollbar{display:none;}
.case-card{
	flex:0 0 min(90vw, 1300px);
	scroll-snap-align:start;
	display:grid;
	grid-template-columns:1fr 1fr;
	background:#fff;
	border:1px solid var(--color-border);
	border-radius:20px;
	overflow:hidden;
	box-shadow:var(--shadow-sm);
}
.case-text-pane{
	padding:50px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
}
.case-card .eyebrow{
	display:inline-block !important;
	font-family:"Noto Sans" !important;
	font-size:18px !important;
	font-style:normal !important;
	font-weight:600 !important;
	line-height:normal !important;
	text-transform:uppercase !important;
	margin-bottom:5px !important;
	color:#00408E !important;
}
.case-text-pane h3{
	margin:0 0 .5em;
	color:#000;
	font-family:"Noto Sans";
	font-size:30px !important;
	font-style:normal;
	font-weight:700;
	line-height:40px;
	width:543px;
}
.case-desc{
	margin-bottom:30px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.case-stats{display:flex;gap:24px;margin-bottom:42px;}
.case-stats > div{padding-right:50px;border-right:1px solid var(--color-border);}
.case-stats > div:last-child{border-right:none;padding-right:0;padding-left:40px;}
.case-stats .num{
	color:#000;
	font-family:"Noto Sans";
	font-size:50px;
	font-style:normal;
	font-weight:700;
	line-height:normal;
}
.case-stats .label{
	max-width:140px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:22px;
}
.case-image-pane{min-height:380px;padding:50px;box-sizing:border-box;}
/* Clip on a padding-free wrapper, not .case-image-pane itself — that
   padding is the frame around the photo, and overflow:hidden clips at
   the padding edge, so the scaled image was ballooning into the frame
   instead of staying inside the photo's own footprint. */
.case-image-clip{display:block;width:100%;height:100%;overflow:hidden;border-radius:20px;transform:translateZ(0);}
.case-image-pane img{width:100%;height:100%;object-fit:cover;border-radius:20px;transition:transform .5s ease;}
.case-card:hover .case-image-pane img{transform:scale(1.08);}

/* ==========================================================================
   Banner / stat CTA
   ========================================================================== */
.stat-banner{
	position:relative;
	padding:100px 0;
	background:var(--color-primary);
	background-size:cover;
	background-position:center;
	color:#fff;
}
.stat-banner .container{position:relative;min-height:536px;display:flex;align-items:center;}
.stat-banner-card{
	background:var(--color-primary);
	border-radius:20px;
	padding:50px;
	width:714px;
	max-width:100%;
	min-height:536px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	box-shadow:var(--shadow-md);
}
.stat-banner-eyebrow{
	background:none !important;
	-webkit-background-clip:initial !important;
	background-clip:initial !important;
	-webkit-text-fill-color:#fff !important;
	color:#fff !important;
}
.stat-banner-card h3{
	margin:8px 0 12px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:36px;
	font-style:normal;
	font-weight:700;
	line-height:46px;
}
.stat-banner-card p{
	margin-bottom:22px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.stat-banner-numbers{display:flex;margin-bottom:41px;}
.stat-banner-numbers > div{padding-right:40px;margin-right:50px;border-right:1px solid rgba(255,255,255,.25);}
.stat-banner-numbers > div:last-child{border-right:none;margin-right:0;padding-right:0;}
.stat-banner-numbers .num{
	color:#FFF;
	font-family:"Noto Sans";
	font-size:50px;
	font-style:normal;
	font-weight:700;
	line-height:normal;
}
.stat-banner-numbers .label{
	color:#FFF;
	font-family:"Noto Sans";
	font-size:15px;
	font-style:normal;
	font-weight:500;
	line-height:20px;
	max-width:250px;
}
.stat-banner-play{
	position:absolute;
	right:12%;
	top:50%;
	transform:translateY(-50%);
	width:140px;height:140px;
	border:none;
	background:none;
	padding:0;
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;
	transition:transform var(--transition);
}
.stat-banner-play svg{width:100%;height:100%;display:block;}
button.stat-banner-play:hover{transform:translateY(-50%) scale(1.08);}

.video-modal{
	position:fixed;
	inset:0;
	z-index:1000;
	display:flex;
	align-items:center;
	justify-content:center;
}
.video-modal-backdrop{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.8);
}
.video-modal-dialog{
	position:relative;
	width:min(90vw, 960px);
	aspect-ratio:16/9;
	background:#000;
	border-radius:12px;
	overflow:hidden;
	z-index:1;
}
.video-modal-frame,
.video-modal-frame iframe{
	width:100%;
	height:100%;
	border:0;
	display:block;
}
.video-modal-close{
	position:absolute;
	top:-44px;
	right:0;
	width:36px;height:36px;
	border:none;
	border-radius:50%;
	background:#fff;
	color:#000;
	font-size:22px;
	line-height:1;
	cursor:pointer;
	display:flex;align-items:center;justify-content:center;
}
body.video-modal-open{overflow:hidden;}

/* ==========================================================================
   Industries (peek slider, hover expands to a blue panel)
   ========================================================================== */
.industries-slider{position:relative;}
.industries-track{
	display:flex;
	gap:20px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-padding-left:max(24px, calc((100vw - var(--container)) / 2 + 24px));
	/* Right padding needs a full card-width of extra slack beyond the
	   normal container margin — otherwise the browser's native max
	   scrollLeft falls short of where the last card needs to sit to
	   reach "start" alignment, and the slide never fully completes. */
	padding:4px calc(max(24px, calc((100vw - var(--container)) / 2)) + clamp(230px, 24vw, 320px) + 20px) 8px max(24px, calc((100vw - var(--container)) / 2));
	-ms-overflow-style:none;
	scrollbar-width:none;
}
.industries-track::-webkit-scrollbar{display:none;}
.industry-card{
	position:relative;
	flex:0 0 clamp(230px, 24vw, 320px);
	scroll-snap-align:start;
	border-radius:var(--radius);
	overflow:hidden;
	aspect-ratio:3/4;
	color:#fff;
	transform:translateZ(0);
}
.industry-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.industry-card:hover img{transform:scale(1.06);}
.industry-card .overlay{
	position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,20,50,0) 40%,rgba(0,20,50,.85) 100%);
	transition:background var(--transition);
}
.industry-card .content{
	position:absolute;left:0;right:0;bottom:0;
	padding:20px;
	bottom: -20px;
	transition:background var(--transition), padding var(--transition), top var(--transition);
}
.industry-card h3{color:#fff;font-size:24px;margin-bottom:6px;line-height:24px;transition:font-size var(--transition);}
.industry-card p{
	font-size:12.5px;color:#DDE4EC;margin-bottom:0;
	display:none;
	-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
	text-overflow:ellipsis;
}
.industry-main .clients{
padding-top:300px;
}
.about-main .clients{
	padding:0px 0px 120px 0px;
	border-top:none;
	border-bottom:none;
	background:#FFF !important;
	position:static;
	margin-top:120px;
}
.contact-main .clients{
	border-top:none;
	border-bottom:none;
	background:#FFF !important;
	position:static;
}
.industry-card:hover p{display:-webkit-box;}
.industry-card .btn{
	align-self:flex-start;
	margin-top:auto;
	/* Opacity-only fade instead of a max-height/overflow collapse: a
	   zero-height, overflow-hidden button has no real hit area to click
	   at all until the hover transition finishes growing it, which made
	   the link unreliable (a quick click landed on the image behind it
	   instead). Keeping the button's real box always in place — just
	   invisible — means it's clickable immediately, hover or not. */
	opacity:0;
	transition:opacity var(--transition);
}
.industry-card:hover .content{
	top:0;
	background:transparent;
	padding:24px 20px 35px;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
}
.industry-card:hover .overlay{background:rgba(0,64,142,.88);}
.industry-card:hover h3{font-size:24px;}
.industry-card:hover p{-webkit-line-clamp:8;font-size:13.5px;}
.industry-card:hover .btn{opacity:1;}

/* ==========================================================================
   Testimonials — full-bleed looping slider, fixed-size cards
   (hover flips to blue, like Services)
   ========================================================================== */
.testimonial-slider{position:relative;}
.testimonial-track{
	display:flex;
	gap:20px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-padding-left:max(24px, calc((100vw - var(--container)) / 2 + 24px));
	/* Extra right slack so the last card can actually reach "start"
	   alignment — see .industries-track for the full explanation. */
	padding:4px calc(max(24px, calc((100vw - var(--container)) / 2)) + 380px) 8px max(24px, calc((100vw - var(--container)) / 2));
	-ms-overflow-style:none;
	scrollbar-width:none;
}
.testimonial-track::-webkit-scrollbar{display:none;}
.testimonial-card{
	flex:0 0 380px;
	width:380px;
	height:434px;
	scroll-snap-align:start;
	border-radius:12px;
	border:none;
	border-bottom:none;
	padding:40px;
	background:#F7F8FA;
	font-size:14px;
	color:var(--color-text-muted);
	display:flex;
	flex-direction:column;
	transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.testimonial-card .quote-mark{
	width:67px;height:57px;
	margin-bottom:20px;
}
.testimonial-card .quote-mark svg{width:100%;height:100%;display:block;}
.testimonial-card p{
	margin:0 0 50px;
	color:#000;
	font-family:"Noto Sans";
	font-size:18px;
	font-style:normal;
	font-weight:400;
	line-height:26px;
}
.testimonial-card:hover{background:var(--color-primary);border-color:var(--color-primary);color:#EAF1FB;}
.testimonial-card:hover p{color:#FFF;}
.testimonial-card .author{
	display:flex;align-items:center;gap:12px;margin-top:auto;
}
.testimonial-card .author img{width:40px;height:40px;border-radius:5px;object-fit:cover;}
.testimonial-card .author .name{
	color:#000;
	font-family:"Noto Sans";
	font-size:18px;
	font-style:normal;
	font-weight:500;
	line-height:normal;
}
.testimonial-card:hover .author .name{color:#FFF;}
.testimonial-card .author .role{
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:normal;
}
.testimonial-card:hover .author .role{color:#FFF;}
.testimonial-card:hover .quote-mark svg path{fill:#104AAC;}

/* ==========================================================================
   Events
   ========================================================================== */
.events-section{background:#F2F5FF;}
.events-grid{
	display:grid;
	grid-template-columns:1fr 1fr 2fr;
	gap:20px;
	align-items:stretch;
}
.event-card{
	display:flex;
	flex-direction:column;
	color:inherit;
	text-decoration:none;
	border-radius:0;
	overflow:hidden;
}
.event-card-image{
	position:relative;
	aspect-ratio:4/3;
	border-radius:15px !important;
	overflow:hidden;
	transform:translateZ(0);
}
.event-card-image::before{
	content:"";
	position:absolute;
	inset:0;
	background:inherit;
	background-size:cover;
	background-position:center;
	transition:transform var(--transition);
}
.event-card:hover .event-card-image::before{transform:scale(1.03);}
.event-card-body{padding:16px 2px 0;}
.event-meta{
	display:flex;
	align-items:center;
	gap:8px;
	margin-bottom:15px;
	color:#8D8686;
	font-family:"Noto Sans";
	font-size:15px;
	font-style:normal;
	font-weight:400;
	line-height:18px;
}
.event-card h3{
	margin:0 0 8px;
	transition:color var(--transition);
	color:#000;
	font-family:"Noto Sans";
	font-size:22px;
	font-style:normal;
	font-weight:500;
	line-height:28px;
}
.event-card:hover h3{color:var(--color-primary);}
.event-card p{
	margin:0;
	color:#494949;
	font-family:"Noto Sans";
	font-size:15px;
	line-height:22px;
	display:-webkit-box;
	-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.event-card--featured{
	position:relative;
	/* border-radius:15px; */
	overflow:hidden;
}
.event-card--featured .event-card-image{
	position:absolute;
	inset:0;
	height:100%;
	aspect-ratio:auto;
	border-radius:0;
}
.event-card--featured::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(5,15,35,0) 40%,rgba(5,15,35,.85) 100%);
	border-radius:15px;
}
.event-card--featured .event-card-body{
	position:relative;
	z-index:1;
	margin-top:auto;
	padding:24px;
}
.event-card--featured .event-meta,
.event-card--featured p{color:#EAF1FB;}
.event-card--featured h3{color:#fff;font-size:24px;}

.event-card--featured .event-card-body:hover h3 {
color:white;
}

/* ==========================================================================
   Client logos
   ========================================================================== */
.clients{
	padding:200px 0px 120px 0px;
	border-top:none;
	border-bottom:none;
	background:#F5F5F5B2;
	position:static;
	margin-top:-200px;
}
.clients .heading{
	letter-spacing:.04em;
	margin-bottom:61px;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:20px;
	font-style:normal;
	font-weight:400;
	line-height:normal;
	text-transform:capitalize;
}
.clients-grid{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	row-gap:60px;
	column-gap:56px;
	max-width:960px;
	margin:0 auto;
}
.clients-grid img{
	flex:0 0 auto;
	width:auto;
	height:34px;
	object-fit:contain;
	filter:grayscale(1);
	opacity:.6;
	transition:all var(--transition);
}
.clients-grid img:hover{filter:none;opacity:1;}
.client-placeholder{
	display:block;
	flex:0 0 120px;
	height:36px;
	border-radius:6px;
	background:repeating-linear-gradient(135deg, var(--color-surface-alt), var(--color-surface-alt) 8px, #ECEFF3 8px, #ECEFF3 16px);
}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:32px;
}
.blog-card{
	background:transparent;
	border-radius:var(--radius);
	overflow:hidden;
}
.blog-card .thumb{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);transform:translateZ(0);}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition);}
.blog-card:hover .thumb img{transform:scale(1.04);}
.blog-card .body{padding:15px 0px 0;}
.blog-card .meta{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:20px;
	color:#5E5E5E;
	font-family:"Noto Sans";
	font-size:15px;
	font-style:normal;
	font-weight:400;
	line-height:normal;
}
.blog-card .meta .category{
	color:#00408E;
	font-weight:400;
	font-size:15px;
	border-radius:50px;
	background:#EBEFFE;
	display:inline-flex;
	height:36px;
	padding:9px 15px;
	justify-content:center;
	align-items:center;
	gap:10px;
}
.blog-card .meta > span:last-child{
	color:#5E5E5E;
	text-align:right;
	font-family:"Noto Sans";
	font-size:15px;
	font-style:normal;
	font-weight:400;
	line-height:normal;
}
.blog-card h3{
	font-size:17px;
	margin-bottom:6px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card h3 a{
	text-decoration:none;
	transition:color var(--transition);
	color:#000;
	font-family:"Noto Sans";
	font-size:24px;
	font-style:normal;
	font-weight:600;
	line-height:32px;
}
.blog-card h3 a:hover{color:var(--color-primary);}
.blog-desc{
	margin:0;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	color:#494949;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}

/* ==========================================================================
   Footer wrap — CTA band and footer links/offices are ONE continuous
   section sharing a single blue background and one decorative swoosh
   graphic that spans across both (not two separately-colored blocks).
   ========================================================================== */
.site-footer-wrap{
	position:relative;
	background:#0E2F66;
	overflow:hidden;
}
.footer-bg-swoosh{
	position:absolute;
	top:10%;
	left:50%;
	transform:translateX(-50%);
	width:1404px;
	height:902px;
	max-width:none;
	pointer-events:none;
	z-index:0;
}

.footer-cta{
	position:relative;
	z-index:1;
	color:#fff;
	padding:80px 0px 100px 0px;
}
.footer-cta .container{
	display:grid;
	grid-template-columns:1.2fr 1fr;
	align-items:center;
	gap:30px;
}
.footer-cta .eyebrow{
	display:inline-block;
	font-weight:400 !important;
	font-size:20px !important;
	text-transform:uppercase;
	margin-bottom:3px !important;
	font-family:"Noto Sans" !important;
	line-height:normal !important;
	color:#FFF !important;
}
.footer-cta h2{
	max-width:none;
	margin:0;
	width:611px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:36px;
	font-style:normal;
	font-weight:800;
	line-height:46px;
}
.footer-cta .btn-accent{
	gap:12px !important;
	font-weight:400 !important;
}
.footer-cta p{
	margin-bottom:18px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
	width:379px;
}
.footer-cta-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ==========================================================================
   Site footer
   ========================================================================== */
.site-footer{position:relative;z-index:1;color:#C9D9EF;padding:0px 0 0;}
.footer-grid{
	display:grid;
	grid-template-columns:2.4fr 1fr 1fr 1fr;
	grid-template-rows:auto auto;
	gap:0;
	padding-bottom:40px;
}
.footer-brand{grid-column:1;grid-row:1;}
.footer-links{grid-column:2;grid-row:1;}
.footer-services{grid-column:3;grid-row:1;}
.footer-products{grid-column:4;grid-row:1;}
/* Offices sit in a shared second row, each pinned under its matching
   column, so they line up regardless of how tall each column's own
   content (links, products+policies, etc.) is above them. */
.footer-office--col-1{grid-column:1;grid-row:2;}
.footer-office--col-2{grid-column:2;grid-row:2;}
.footer-office--col-3{grid-column:3;grid-row:2;}
.footer-grid h4{
	color:#fff;
	font-size:16px;
	text-transform:uppercase;
	font-family:"Noto Sans";
	margin-bottom:17px;
	line-height:normal;
	font-weight:500;
}
.footer-grid li{
	margin-bottom:12px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:14px;
	font-style:normal;
	font-weight:400;
	line-height:normal;
}
.footer-grid li a{color:#FFFFFF;}
.footer-grid li:hover a{color:#709EEC;}
.footer-logo{display:block;max-height:174px;margin-bottom:25px;filter:brightness(0) invert(1);}
.footer-brand-text{width:360px;max-width:100%;}
.footer-brand p{
	width:82%;
	margin:0 0 14px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:22px;
}
.footer-brand p:last-child{margin-bottom:0;}
.footer-follow{font-size:13px;color:#fff;margin:25px 0 6px !important;}
.footer-contact{margin-top:18px;}
.footer-contact p{font-size:13.5px;margin:0 0 6px;color:#C9D9EF;}
.footer-contact a:hover{color:#fff;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
	display:flex;align-items:center;justify-content:center;
	width:30px;height:30px;
}
.footer-social a svg{display:block;width:100%;height:100%;}
.footer-social a:hover svg circle{stroke:#104AAC;fill:#104AAC;}

.footer-subheading{margin-top:40px;}

/* Each office now sits at the bottom of its matching column, in the
   same vertical line as that column's links, instead of a separate row. */
.footer-office{margin-top:80px;}
.footer-office h4{
	margin-bottom:8px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:600;
	line-height:20px;
	text-transform:uppercase;
}
.footer-office p.office-company{
	margin-bottom:5px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:500;
	line-height:20px;
}
.footer-office p.office-legal{
	margin-bottom:15px;
	width:300px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:14px;
	font-style:normal;
	font-weight:400;
	line-height:20px;
}
.footer-office p{
	margin:0 0 8px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:14px;
	font-style:normal;
	font-weight:500;
	line-height:18px;
	display:flex;
	align-items:center;
	gap:8px;
}
.footer-office p svg{flex-shrink:0;}
.footer-office a:hover{color:#fff;}

.footer-bottom{
	display:flex;
	justify-content:center;
	padding:20px 0;
	margin-top:8px;
	border-top:1px solid rgba(255,255,255,.18);
	flex-wrap:wrap;
	gap:10px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:14px;
	font-style:normal;
	font-weight:400;
	line-height:normal;
}
.footer-bottom a:hover{color:#fff;}

/* ==========================================================================
   Slider dots (generic, JS toggles .is-active)
   ========================================================================== */
.slider-nav{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin-top:30px;
}
.slider-nav button{
	width:9px;height:9px;
	border-radius:50%;
	border:none;
	background:var(--color-border);
	padding:0;
}
.slider-nav button.is-active{background:var(--color-primary);width:22px;border-radius:6px;}
.slider-arrows{display:flex;gap:18px;flex-shrink:0;}
.slider-arrows button{
	width:52px;height:52px;
	border-radius:50%;
	border:1px solid var(--color-primary);
	background:#fff;
	color:var(--color-primary);
	display:flex;align-items:center;justify-content:center;
	transition:background var(--transition), color var(--transition);
}
.slider-arrows button svg{width:9px;height:15px;display:block;}
.slider-arrows button.is-next svg{transform:scaleX(-1);}
.slider-arrows button:hover{background:var(--color-primary);color:#fff;}

/* ==========================================================================
   WP core
   ========================================================================== */
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto;}
.alignfull{max-width:none;}
.wp-block-image{margin-bottom:1.5em;}
.entry-content{max-width:800px;margin:0 auto;padding:60px 0;}
.entry-content h1,.entry-content h2,.entry-content h3{margin-top:1.4em;}
.entry-content img{border-radius:var(--radius);}

/* ==========================================================================
   Responsive
   Breakpoints: >1200 desktop, 1024-1200 small desktop/laptop,
   768-1024 tablet, 480-768 large phone, <480 phone
   ========================================================================== */

/* Small desktop / laptop */
@media (max-width:1200px){
	.section{padding:64px 0;}
	.hero h1{font-size:40px;}
	.services-grid{grid-template-columns:repeat(3,1fr);}
	.service-card{width:auto !important;height:auto !important;}
	.service-card p{width:auto !important;}
	.section-head h2,.section-head .desc{width:auto !important;}
	.clients-grid{column-gap:32px;row-gap:32px;}
	.about-row{grid-template-columns:repeat(3,1fr);}
	.about-row > *{width:auto !important;max-width:100%;}
}

/* Tablet */
@media (max-width:1024px){
	.container{padding:0 20px;}
	.site-header .container{gap:14px;}
	.main-navigation ul{gap:18px;}
	.main-navigation a{font-size:13.5px;}

	.hero-slide{min-height:480px;padding:48px 0 150px;text-align:center;}
	.hero-content{max-width:none;margin:0 auto;}
	.hero h1{font-size:36px !important;max-width:none;margin-left:auto;margin-right:auto;}
	.hero p{margin-left:auto;margin-right:auto;}
	.hero-actions{display:flex;justify-content:center;}
	.hero-thumbs{justify-content:center;}

	.about-header{grid-template-columns:1fr;gap:20px;}
	.about-row{grid-template-columns:1fr 1fr;}
	.about-row > *{width:auto !important;height:auto !important;min-height:180px;}
	/* Was display:none here (tablet only, ~900-1024px) — that broke the
	   image/card alternating pairs and left the grid's rows visibly
	   uneven, which is what was showing as mismatched card heights. */
	.about-row-image{aspect-ratio:4/5;}

	.services-grid{grid-template-columns:repeat(2,1fr);}
	.case-card{flex-basis:88vw;grid-template-columns:1fr;}
	.case-image-pane{min-height:260px;padding:24px;order:-1;}

	.stat-banner{padding:64px 0;}
	.stat-banner .container{min-height:0;justify-content:center;}
	.stat-banner-card{width:100%;max-width:560px;min-height:0;padding:24px;}
	.stat-banner-card h3{font-size:22px;line-height:28px;margin:8px 0 10px;}
	.stat-banner-card p{font-size:14px;line-height:20px;margin-bottom:20px;}
	.stat-banner-numbers{flex-direction:column;gap:16px;margin-bottom:24px;}
	.stat-banner-numbers .num{font-size:24px;line-height:32.7px;}
	.stat-banner-numbers .label{font-size:14px;line-height:18px;font-weight:400;max-width:none;}
	.stat-banner-play{display:none;}

	.clients-grid{column-gap:24px;row-gap:28px;}
	.blog-grid{grid-template-columns:repeat(2,1fr);}

	.footer-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:30px 24px;}
	.footer-brand,.footer-links,.footer-products,.footer-services,
	.footer-office--col-1,.footer-office--col-2,.footer-office--col-3{grid-column:auto;grid-row:auto;margin-top:50px;}
	/* .footer-office's 80px margin-top is there to separate it from the
	   column content sitting above it in the same desktop grid row —
	   once the offices flow into normal single-column stacking above,
	   that margin just adds a big blank gap before each one instead. */
	.footer-office{margin-top:0;}
	.footer-cta .container{grid-template-columns:1fr;text-align:center;}
	.footer-cta-actions{justify-content:center;}
}

/* Mobile nav kicks in at tablet-portrait / large phone */
@media (max-width:900px){
	.events-grid{grid-template-columns:1fr 1fr;}
	.event-card--featured{grid-column:1 / 3;}

	/* Desktop and mobile are two separate <nav> elements (two separate,
	   independently editable WordPress menus) now — only one is ever
	   shown at a time. */
	.main-navigation{display:none;}

	.mobile-navigation{
		position:fixed;
		inset:0;
		width:100%;
		height:100vh;
		background:#0E2F66;
		transform:translateX(100%);
		transition:transform var(--transition);
		margin-left:0;
		z-index:130;
		display:flex;
		flex-direction:column;
	}
	.mobile-navigation.is-open{transform:translateX(0);}

	/* Self-contained logo + close control for the mobile panel — it no
	   longer depends on the real header staying visible above it (that
	   relied on a z-index relationship between two different stacking
	   contexts — .mobile-navigation is a DOM child of .site-header, not a
	   sibling — which wasn't reliably winning). z-index:130 above puts
	   this panel above the header outright, so the header simply doesn't
	   matter anymore while the menu is open.
	   A real (non-scrolling) sibling of the scrolling region below it —
	   not position:sticky mixed into that same scrolling flex column —
	   is what actually keeps this fixed in place; sticky combined with
	   the negative-margin edge-to-edge bleed it needed didn't stick
	   reliably, letting menu items scroll up through it. */
	.mobile-nav-top{
		display:flex;
		align-items:center;
		justify-content:space-between;
		flex-shrink:0;
		padding:24px 30px;
		background:#0E2F66;
	}
	/* Everything below the logo/close bar — the menu list and the
	   social/copyright footer — scrolls in its own region instead. */
	.mobile-nav-scroll{
		flex:1 1 auto;
		min-height:0;
		overflow-y:auto;
		display:flex;
		flex-direction:column;
		padding:0 30px 24px;
	}
	/* This logo only ever appears here, against the navy panel — always
	   force it to white rather than depending on a body.nav-open class
	   that no longer exists on this self-contained element. */
	.mobile-nav-logo img{max-height:34px;display:block;filter:brightness(0) invert(1);}
	.mobile-nav-close{
		display:flex;
		align-items:center;
		justify-content:center;
		width:34px;height:34px;
		background:none;
		border:none;
		color:#fff;
		cursor:pointer;
		padding:0;
	}

	.mobile-navigation ul{flex-direction:column;align-items:flex-start;gap:0;width:100%;flex-shrink:0;}
	.mobile-navigation li{width:100%;}
	.mobile-navigation a{
		display:flex;
		align-items:center;
		gap:10px;
		padding:10px 0;
		color:#fff;
		font-size:14px;
	}
	.mobile-navigation .submenu-caret{margin-left:auto;transition:transform var(--transition);}
	.mobile-navigation .submenu-caret svg path{fill:#fff;}
	.mobile-navigation li.is-open > a .submenu-caret{transform:rotate(180deg);}
	.mobile-navigation .nav-mega-caret{display:none;}
	.mobile-navigation .sub-menu{
		position:static;
		opacity:1;visibility:visible;transform:none;
		box-shadow:none;
		display:none;
		padding:5px 0 25px 15px;
		min-width:0;
	}
	.mobile-navigation .sub-menu a{padding:5px 0;font-size:14px;color:#C3D6EE;}
	.mobile-navigation li.is-open > .sub-menu{display:block;}
	.mobile-navigation li.is-open > a{color:#fff;}
	.mobile-navigation .nav-badge{padding:2px 6px;font-size:10px;}

	/* Services / Platforms & Products mega menu collapses to a plain
	   indented list on mobile — the icon/description card grid and CTA
	   footer strip are desktop-only. */
	.mobile-navigation .nav-mega-menu{
		position:static;
		opacity:1;visibility:visible;transform:none;
		background:none;
		box-shadow:none;
		border-radius:0;
		display:none;
	}
	.mobile-navigation li.has-mega-menu.is-open > .nav-mega-menu{display:block;}
	.mobile-navigation .nav-mega-grid{display:block;padding:5px 0 25px 15px;max-width:none;}
	.mobile-navigation .nav-mega-item{padding:5px 0;gap:0;}
	.mobile-navigation .nav-mega-icon,
	.mobile-navigation .nav-mega-desc,
	.mobile-navigation .nav-mega-arrow{display:none;}
	.mobile-navigation .nav-mega-title{font-size:14px;color:#C3D6EE;}
	.mobile-navigation .nav-mega-footer{display:none;}

	/* The real site-header stays visible (white bg, blue icon) even while
	   the mobile menu is open — the full-screen panel has its own logo/
	   close button and sits above the header via z-index, so the header
	   itself never needs to change color underneath it. */
	.menu-toggle{display:block;order:3;}
	/* The header CTA button ("Talk to Expert") isn't shown in the mobile
	   header bar in the Figma design — only the logo and hamburger are.
	   It's still reachable as the last item inside the mobile menu list. */
	.header-cta{gap:10px;}
	/* Base rule sets display:inline-flex !important, so this needs its
	   own !important or it can never win regardless of media query. */
	.header-cta .btn{display:none !important;}

	body.nav-open{overflow:hidden;}

	/* Social + copyright block bundled inside the mobile menu panel
	   itself, since the full-screen takeover has no footer beneath it. */
	/* margin-top:auto pins this to the bottom of the flex column
	   (.mobile-navigation) regardless of how few/many nav items there are —
	   previously it just followed the list in normal flow, so a short
	   item list left it stranded partway down the screen instead of
	   anchored at the very bottom. */
	.mobile-nav-footer{display:block;margin-top:auto;padding-top:40px;flex-shrink:0;}
	.mobile-nav-social{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
	.mobile-nav-follow{color:#fff;font-size:14px;font-weight:400;}
	.mobile-nav-social a{display:inline-flex;width:24px;height:24px;}
	.mobile-nav-social a svg{width:24px;height:24px;}
	.mobile-nav-bottom{
		display:flex;
		flex-direction:column;
		gap:15px;
		padding-top:20px;
		border-top:1px solid #5B78C6;
		color:#fff;
		font-size:14px;
	}
	.mobile-nav-credit{display:inline-flex;align-items:center;gap:6px;font-family:"Fira Sans",sans-serif;font-weight:700;}
	.mobile-nav-heart{color:#F27C22;}

	.nav-overlay{display:none;}
}

/* Large phone / small tablet */
@media (max-width:768px){
	.container{padding:0 15px;}
	.events-grid{grid-template-columns:1fr;}
	.event-card--featured{grid-column:1;min-height:340px;}
	.event-card h3{font-size:18px;line-height:22px;}
	.event-card p{font-size:14px;line-height:20px;color:#333;}
	.event-meta{font-size:14px;line-height:19px;}

	/* These sections set their own much bigger desktop padding via an
	   #id.section selector, which beats the plain .section rule above on
	   specificity regardless of media-query order — so the mobile
	   reduction was never actually winning the cascade for them. That's
	   what was showing as excess empty space between sections. */
	.section,
	#about.section,
	#services.section,
	#case-studies.section,
	#industries.section,
	#testimonials.section,
	#blog.section{padding:50px 0;}
	.eyebrow{font-size:14px !important;font-weight:500 !important;margin-bottom:5px !important;}
	/* The base .section-head rule sets align-items/gap/margin-bottom with
	   !important, so a plain (non-!important) override here can never
	   win regardless of source order or media query — it needs its own
	   !important to actually take effect at mobile widths. Without this,
	   align-items:end (desktop, meant for a row layout) was right-
	   aligning everything in the column layout, and the 68px desktop gap
	   was still opening a large blank space between the heading and the
	   description/arrows below it. */
	.section-head{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;margin-bottom:24px !important;}
	.section-head .slider-arrows{margin-left:0;margin-top:10px;}
	.section-head h2,
	#blog .section-head h2,
	#case-studies .section-head h2,
	#industries .section-head h2,
	#events .section-head h2{width:auto !important;font-size:22px !important;line-height:28px !important;}
	.section-head .desc,
	#blog .section-head .desc,
	#industries .section-head .desc,
	#events .section-head .desc{width:auto !important;font-size:14px !important;line-height:20px !important;margin-top:10px !important;}
	/* These 4 sections set their own #id .section-head rule for
	   display/align-items/gap/margin-bottom/flex-wrap, which has higher
	   specificity (ID + class) than the plain .section-head rule above —
	   so that rule alone never actually reached them; align-items:end
	   (desktop row layout) was still right-aligning their heading text
	   in the mobile column layout, on top of the leftover 44-46px gap. */
	#blog .section-head,
	#case-studies .section-head,
	#industries .section-head,
	#events .section-head{
		flex-direction:column !important;
		align-items:flex-start !important;
		gap:10px !important;
		margin-bottom:24px !important;
		justify-content:flex-start !important;
	}

	/* min-height alone isn't safe here: if the (editable) hero copy wraps
	   to more lines than the reference design, the slide would grow but
	   the bottom-pinned thumbnail strip could end up overlapping the
	   button. Reserving the strip's own space as real padding-bottom
	   means the text can never encroach on it, regardless of how much it
	   wraps. */
	.hero-slide{min-height:0;padding:156px 0 89px;text-align:left;}
	.hero .container{padding-left:30px;padding-right:0px;}
	.hero-content{max-width:none;margin:0;}
	.hero-eyebrow{font-size:14px !important;font-weight:500 !important;margin-bottom:5px !important;}
	.hero h1{font-size:28px !important;font-weight:700 !important;line-height:32px !important;margin-left:0;margin-right:0;}
	.hero p{font-size:14px !important;font-weight:400 !important;line-height:20px !important;padding-bottom:20px !important;margin-left:0;margin-right:0;max-width:none !important;}
	.hero-actions{display:block !important;justify-content:flex-start;margin-bottom:24px !important;}
	.hero-actions .btn{width:auto !important;justify-content:flex-start;}
	.hero-thumbs-wrap{bottom:25px;}
	/* Peek strip, not a shrink-to-fit row: tiles stay a fixed 64x40 (Figma
	   spec) and the strip scrolls horizontally within its container —
	   .hero .container above already gives it the same 30px inset as the
	   text/button column, and overflow-x lets whatever doesn't fit (slide
	   count is editable via ACF, currently 6) peek in from the right edge
	   and be revealed by swiping, same as the other carousels on the
	   site. */
	.hero-thumbs{
		gap:8px;
		overflow-x:auto;
		scroll-snap-type:x proximity;
		-ms-overflow-style:none;scrollbar-width:none;
	}
	.hero-thumbs::-webkit-scrollbar{display:none;}
	.hero-thumb{flex:0 0 64px;width:64px;height:40px;scroll-snap-align:start;}

	/* About header collapses to one linear column: eyebrow, heading, intro,
	   the right-column paragraphs, then the trust badge last — matching the
	   Figma mobile flow, which reorders content across what are two
	   separate desktop columns. display:contents lifts each column's
	   children into the shared grid so the `order` values below can
	   interleave them. The "About Us" button isn't part of the mobile
	   design at all. */
	.about-header{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:20px;}
	.about-header-left,.about-header-right{display:contents;}
	.about-header-left .eyebrow{order:1;font-size:14px !important;margin-bottom:5px !important;}
	.about-header-left h2{order:2;font-size:22px !important;line-height:28px !important;width:auto !important;margin-bottom:10px !important;}
	.about-intro{order:3;font-size:14px !important;line-height:20px !important;width:auto !important;margin-bottom:15px;}
	.about-header-right .about-text{order:4;}
	.about-header-right .about-text p{font-size:14px !important;line-height:20px !important;width:auto !important;margin-bottom:15px !important;}
	.about-header-right .btn-accent{display:none !important;}
	.about-trust-badge{order:5;margin-top:5px;}

	.about-row{grid-template-columns:1fr;gap:20px;margin-top:40px;}
	/* Desktop's 90px margin-top on this card creates a staggered visual
	   effect in the multi-column row layout — in mobile's single-column
	   stack that just becomes a big ugly gap before this one card, so
	   it's reset here (scoped to mobile only, desktop keeps the stagger). */
	.about-row > *:nth-child(3){margin-top:0px;}

	/* .footer-grid centers all footer text on mobile — this office
	   heading should stay left-aligned regardless. */
	.footer-office h4{text-align:left;}
	.footer-grid li{text-align:left;}
	.footer-grid h4{text-align:left;}
	.about-row > *{width:auto !important;height:auto !important;min-height:0;}
	.about-row-image{display:block;aspect-ratio:315/265;border-radius:20px;}
	/* Card-level padding instead of separate per-element left/right
	   padding on .num/.label/.desc (those still apply too, so resetting
	   them to 0 here avoids doubling up). Scoped to mobile only — this is
	   a shared class with desktop, and changing the base rule directly
	   would carry the same change over to desktop unintentionally. */
	.about-stat-card{padding:30px 68px;}
	.about-stat-card .num,
	.about-stat-card .label,
	.about-stat-card .desc{padding-left:0;padding-right:0;}

	.services-grid,.blog-grid{grid-template-columns:1fr;}
	.blog-card h3 a{font-size:18px;line-height:22px;}
	.blog-desc{font-size:14px;line-height:20px;}
	.blog-card .meta,
	.blog-card .meta .category,
	.blog-card .meta > span:last-child{font-size:14px;}
	.service-card h3{font-size:20px !important;}
	.service-card p{font-size:14px !important;line-height:20px !important;width:auto !important;}
	.clients-grid{column-gap:20px;row-gap:24px;}

	.case-card{flex-basis:88vw;}
	.case-text-pane{padding:28px 24px;}
	.case-card .eyebrow{font-size:14px !important;font-weight:500 !important;}
	.case-text-pane h3{font-size:20px !important;line-height:26px !important;width:auto;}
	.case-desc{font-size:14px;line-height:20px;}
	.case-stats{gap:16px;}
	.testimonial-card{width:315px;height:auto;min-height:350px;flex-basis:315px;}
	.testimonial-card p{font-size:15px;line-height:22px;}
	.testimonial-card .author .name{font-size:15px;line-height:20.43px;}
	.testimonial-card .author .role{font-size:13px;line-height:17.7px;}
	/* Cards have no hover state on touch devices, so the desktop
	   hover-to-reveal description/button would otherwise never be seen on
	   mobile — force it permanently visible, matching the Figma mobile
	   design where the full card content always shows. */
	.industry-card{flex-basis:315px;width:315px;aspect-ratio:315/350;}
	.industry-card h3{font-size:20px;line-height:26px;}
	.industry-card p{display:-webkit-box !important;font-size:14px;line-height:20px;color:#fff;-webkit-line-clamp:8;margin-bottom:20px;}
	/* Without display:flex + top:0 here, .content had no "top" set at
	   all — its box just sized to fit its own content and sat pinned to
	   the bottom, leaving the unstyled image/overlay exposed above it
	   (the blank space at the top of the card). And .btn's
	   margin-top:auto (meant to push it to the bottom with a gap above
	   it) does nothing outside a flex container, which is why the button
	   had no breathing room above it either — both fixed by matching the
	   desktop hover-state layout instead of only copying `bottom`. */
	.industry-card .content{
		top:0;
		bottom:0;
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		padding:30px 20px 30px;
	}
	.industry-card .btn{opacity:1 !important;}
	/* Figma's mobile spec: brand blue (#00408E) top-to-bottom, not the
	   black bottom-fade desktop uses — scoped to mobile only, since this
	   is a shared class with desktop and changing the base rule affected
	   desktop's look too the first time. */
	.industry-card .overlay{background:linear-gradient(180deg,rgba(0,64,142,.95) 0%,rgba(0,64,142,.7) 100%);}

	.footer-cta{padding:0px 0;text-align:center;}
	/* line-height wasn't overridden alongside font-size, so the desktop
	   46px line-height (sized for a 36px heading) was still being used
	   at a much smaller mobile font size — each wrapped line kept the
	   full 46px of vertical space, showing as odd gaps between lines. */
	.footer-cta h2{font-size:26px;line-height:32px;width:auto;text-align:left;}
	.footer-cta p{width:auto;text-align:left;}
	.footer-cta .eyebrow{text-align:left;}
	.footer-cta-actions{justify-content:center;flex-wrap:wrap;}
	.site-footer-wrap{padding:50px 20px 20px 20px;}

	.footer-grid{grid-template-columns:1fr;gap:28px;text-align:center;}
	.footer-social{justify-content:left;}
	.footer-brand p{width:100%;text-align:left;}
	.footer-bottom{justify-content:center;text-align:left;}
}

/* Phone */
@media (max-width:480px){
	.container{padding:0 15px;}
	.site-branding{font-size:17px;}
	.site-branding img{max-height:34px;}
	.mobile-navigation{padding:76px 16px 24px;}

	.hero h1{font-size:26px !important;}
	.hero-actions .btn,
	.hero-actions{width:100%;}
	.hero-actions .btn{width:100%;justify-content:center;}
	.about-row{grid-template-columns:1fr;}

	.stat-banner-numbers{flex-direction:column;gap:16px;}
	.stat-banner-numbers > div{border-right:none;margin-right:0;padding-right:0;}
	.clients-grid{column-gap:20px;row-gap:20px;}
	.clients-grid img{height:26px;}
	.industry-card{flex-basis:min(315px,80vw);width:min(315px,80vw);min-height:350px !important;}
	.testimonial-card{width:min(315px,82vw);flex-basis:min(315px,82vw);}

	.site-header .container{flex-wrap:wrap;row-gap:8px;}
	.header-cta{margin-left:auto;}

	.footer-cta h2{font-size:22px;line-height:28px;text-align:left;}
	.footer-cta-actions{flex-direction:column;width:100%;}
	.footer-cta-actions .btn{width:fit-content;justify-content:center;}

	.btn:not(.btn-accent){padding:12px 22px;font-size:13.5px;}
	.btn-accent{font-size:13.5px !important;}
}


/* Desktop-only fixed widths — these unconditioned #id.section-head rules
   have the same specificity as (and appear later than) the mobile
   overrides above, so without this guard they'd win the cascade at
   every width and force the heading/description boxes wider than a
   phone screen, causing horizontal page overflow. */
@media (min-width:769px){
	#case-studies .section-head h2 {
	    width: 520px !important;
	}

	#case-studies .section-head, #industries .section-head {
	    gap: 0px !important;
	}

	#case-studies .section-head .desc {
	    width: 525px !important;
	}
}

.case-stats .label {
    max-width: 174px;
}

.industry-card:hover .content {
    bottom: 0;
}

.event-card--featured:hover h3 {
	color:#fff;
}

/* =========================================================
   Industries Banner
   ========================================================= */

.industries-banner {
	position: relative;
	width: 100%;
	height: 600px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Background Image */
.industries-banner__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;

	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/* Dark overlay */
.industries-banner__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;

	background: rgba(0, 0, 0, 0.58);
}

/* Container */
.industries-banner .container {
	position: relative;
	z-index: 2;
	height: 100%;
}

/* Content */
.industries-banner__content {
	width: 100%;
	max-width: 560px;
	padding-top: 173px;
	padding-bottom: 173px;
	color: #ffffff;
}

/* Title */
.industries-banner__title {
	margin: 0 0 10px;

	max-width: 540px;

	font-family: "Noto Sans";
	font-size: 36px;
	font-weight: 700;
	line-height: 46px;

	color: #ffffff;
}

/* Description */
.industries-banner__description {
	max-width: 526px;

	margin: 0;

	font-family: "Noto Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;

	color: #ffffff;
}

/* Eyebrow */
.industries-banner .eyebrow {
	color: #fff;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991px) {

	.industries-banner {
		min-height: 300px;
	}

	.industries-banner__content {
		max-width: 480px;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.industries-banner__title {
		font-size: 26px;
	}

	.industries-banner__description {
		font-size: 14px;
		max-width: 400px;
	}
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

	/* The base rule sets a fixed height:600px — min-height alone (the
	   previous fix) can't override an explicit height that's already
	   larger, so the banner was still rendering at 600px on mobile the
	   whole time regardless of this block. height must be reassigned
	   directly. Figma's mobile hero image is exactly 500px tall, and its
	   content block sits 212px from the top / 30px from the bottom
	   inside it (not the symmetric ~170px this used before), inset 30px
	   on each side — same content column as every other mobile section. */
	.industries-banner {
		height: 500px;
		min-height: 0;
		align-items: center;
	}

	.industries-banner__image {
		background-position: center center;
	}

	.industries-banner__overlay {
		background: rgba(0, 0, 0, 0.62);
	}

	.industries-banner__content {
		max-width: 100%;
		padding: 212px 30px 30px;
	}

	/* Figma mobile spec: 22px/28 heading, 14px/20 body — the previous
	   25px/12px values weren't from the design, and 12px in particular
	   is noticeably smaller than the 14px body text used everywhere else
	   on the site. */
	.industries-banner__title {
		max-width: 100%;
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.industries-banner__description {
		max-width: 100%;
		font-size: 14px;
		line-height: 20px;
	}
}


/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 480px) {

	.industries-banner {
		height: 500px;
		min-height: 0;
	}
}

/* =========================================
   TECHNOLOGY BANNER
   ========================================= */

.technology-banner {
	position: relative;
	width: 100%;
	height: 600px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Background Image */
.technology-banner__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;

	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/* Dark Overlay */
.technology-banner__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;

	background: rgba(0, 0, 0, 0.58);
}

/* Container */
.technology-banner .container {
	position: relative;
	z-index: 2;
	height: 100%;
}

/* Content */
.technology-banner__content {
	width: 100%;
	max-width: 560px;
	padding-top: 173px;
	padding-bottom: 173px;
	color: #ffffff;
}

/* Eyebrow */
.technology-banner__label {
	display: block;

	margin-bottom: 5px;

	font-family: "Noto Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;

	color: #FFF;
	text-transform: uppercase;
}

/* Title */
.technology-banner__title {
	margin: 0 0 12px;

	max-width: 540px;

	font-family: "Noto Sans";
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 46px;

	color: #FFF;
}

/* Description */
.technology-banner__description {
	max-width: 526px;

	margin: 0;

	font-family: "Noto Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;

	color: #ffffff;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991px) {

	.technology-banner {
		min-height: 300px;
	}

	.technology-banner__content {
		max-width: 480px;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.technology-banner__title {
		font-size: 26px;
	}

	.technology-banner__description {
		font-size: 14px;
		max-width: 400px;
	}
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

	/* Same height:600px-never-actually-overridden bug as
	   .industries-banner had — min-height alone can't beat an explicit
	   height that's already larger. Same shared banner component in
	   Figma, so the same exact mobile spec applies: 500px tall, content
	   212px from the top / 30px from the bottom, 30px horizontal inset. */
	.technology-banner {
		height: 500px;
		min-height: 0;
		align-items: center;
	}

	.technology-banner__image {
		background-position: center center;
	}

	.technology-banner__overlay {
		background: rgba(0, 0, 0, 0.62);
	}

	/* Verified separately against Figma — this page's content block is
	   40px taller than Industries' (298px vs 258px), so with both bottom-
	   anchored 30px from the image bottom, the top padding is 172px here,
	   not the 212px Industries uses (they're the same component, just
	   with different amounts of copy). */
	.technology-banner__content {
		max-width: 100%;
		padding: 172px 30px 30px;
	}

	.technology-banner__label {
		font-size: 14px;
	}

	/* Same copy-pasted values as .industries-banner had — 25px/12px
	   weren't from the design; matches the site's standard mobile banner
	   scale (22px/28 heading, 14px/20 body) used elsewhere. */
	.technology-banner__title {
		max-width: 100%;
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.technology-banner__description {
		max-width: 100%;
		font-size: 14px;
		line-height: 20px;
	}
}


/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 480px) {

	.technology-banner {
		height: 500px;
		min-height: 0;
	}
}

/* ==========================================================================
   Service detail page
   ========================================================================== */
.service-hero{
	position:relative;
	display:flex;
	align-items:flex-end;
	width:100%;
	min-height:600px;
	padding:180px 0 180px;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	color:#fff;
}
.service-hero-content{max-width:560px;}
.service-hero-eyebrow{
	background:none !important;
	-webkit-background-clip:initial !important;
	background-clip:initial !important;
	-webkit-text-fill-color:#fff !important;
	color:#fff !important;
}
.service-hero-content h1{
	color:#FFF;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:46px;
	margin:0px 0 12px;
}
.service-hero-content p{
	color:#FFF;
	font-family:"Noto Sans";
	font-size:16px;
	font-weight:400;
	line-height:24px;
	margin-bottom:30px;
}

/* Detail blocks */
.service-details{padding:120px 0;}
.service-detail{
	display:flex;
	align-items:center;
	gap:60px;
}
.service-detail + .service-detail{margin-top:150px;}
.service-detail:nth-child(even){flex-direction:row-reverse;}
.service-detail-text,.service-detail-image{flex:1 1 0;min-width:0;}
.service-detail .eyebrow{
	display:inline-block !important;
	font-size:18px !important;
	font-style:normal !important;
	font-weight:600 !important;
	line-height:normal !important;
	text-transform:uppercase !important;
	margin-bottom:5px !important;
	color:#00408E;
	font-family:"Noto Sans";
}
.service-detail-text h2{
	width:auto;
	color:#000;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:46px;
	margin:5px 0 12px;
}
.service-detail-text p{
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-weight:400;
	line-height:24px;
	margin-bottom:20px;
}
.service-detail-image{border-radius:15px;overflow:hidden;transform:translateZ(0);}
.service-detail-image img{
	width:100%;
	display:block;
	transition:transform .5s ease;
}
.service-detail:hover .service-detail-image img{transform:scale(1.08);}
.service-checklist{list-style:none;margin:0 0 30px;padding:0;}
.service-checklist li{
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	line-height:24px;
	margin-bottom:12px;
}
.service-checklist li svg{flex-shrink:0;margin-top:4px;}
.service-detail-text .service-checklist p{margin-bottom:0;}

/* Powered by */
.service-powered{padding:100px 0;}
#service-detail #industries.section{background-color:#F8F8F8;padding-bottom:100px;}
#product-detail #industries.section{padding-bottom:50px;padding-top:40px;}
.service-powered--cta-only{padding:100px 0 100px;background:none;}
.industry-cta-box{padding-bottom:0px;}
.service-powered-head{
	display:flex !important;
	justify-content:center;
	text-align:center;
	margin-bottom:50px !important;
}

.service-powered .powered-features .powered-feature:hover img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(1800%) hue-rotate(180deg) brightness(85%);
}

.service-powered-head h2{
	width:auto !important;
	max-width:640px;
	margin:8px auto 0 !important;
}
.service-powered-head .desc{width:auto !important;max-width:560px;margin:10px auto 0 !important;}
.powered-features{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:30px;
	margin-bottom:50px;
}
.powered-feature{
	text-align:center;
	background:#ffffff00;
	border-radius:0px;
	padding:30px 20px;
	box-shadow:none;
}
.powered-feature img{
	margin:0 auto 16px;
	/* width:50px; */
	/* height:50px; */
	transition: background-color 0.4s ease;

}
.powered-feature h3{
	margin-bottom:8px;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:22px;
	font-style:normal;
	font-weight:600;
	line-height:28px;
}
.powered-feature p{
	margin:0;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.powered-cta{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	background:#00408E;
	border-radius:15px;
	padding:80px 100px 80px 80px;
	overflow:hidden;
}
.powered-cta-text{color:#fff;max-width:480px;position:relative;z-index:1;}
.powered-cta-text h2{
	color:#FFF;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:46px;
	margin-bottom:10px;
}
.powered-cta-text p{
	color:#FFFFFF;
	font-family:"Noto Sans";
	font-size:16px;
	line-height:24px;
	margin:0;
	margin-bottom:30px;
}
.powered-cta .btn-accent{position:relative;z-index:1;flex-shrink:0;}
.powered-cta-image{
	position:absolute;
	right:100px;
	bottom:0;
	height:100%;
	max-width:45%;
	object-fit:contain;
	object-position:bottom right;
}

/* Why choose us */
.service-why{padding:300px 0 100px;position:static;margin-top:-300px;}
#product-detail .service-why{padding:100px 0 100px;position:static;margin-top:0;}
.why-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
	margin-top:20px;
}
.why-card{
	background:#fff;
	border-radius:15px;
	padding:40px;
	box-shadow:none;
}
.why-card img{
	/* width:40px; */
	/* height:40px; */
	margin-bottom:16px;
	transition: background-color 0.4s ease;

}

.why-card:hover img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(1800%) hue-rotate(180deg) brightness(85%);
}


.why-card h3{
	color:#1A1A1A;
	font-family:"Noto Sans";
	font-size:20px;
	font-weight:600;
	margin-bottom:8px;
	line-height:normal;
}
.why-card p{color:#000;font-family:"Noto Sans";font-size:16px;line-height:24px;margin:0;font-weight:400;}

/* Contact */
.service-contact{padding:100px 0px 150px 0px;position:relative;}
.service-contact .container{
	display:grid;
	grid-template-columns:1fr 1.15fr;
	gap:60px;
	align-items:start;
}
.service-contact-intro h2{
	color:#1A1A1A;
	font-family:"Noto Sans";
	font-size:32px;
	font-weight:700;
	line-height:42px;
	margin:8px 0 16px;
}
.service-contact .service-contact-intro{width:384px;}
.service-contact-quote{display:block;margin-bottom:16px;}
.service-contact-intro p{color:#3F4750;font-family:"Noto Sans";font-size:16px;line-height:24px;margin-bottom:24px;}
.service-contact-image{
	border-radius:var(--radius);
	position:absolute;
	width:auto;
	z-index:9;
	bottom:-40px;
}

.service-contact-form{
	border-radius:15px;
	border:1px solid #E8E8E8;
	background:#FFF;
	padding:40px;
}
.service-contact-form h3{
	margin:0 0 8px;
	color:#000;
	font-family:"Noto Sans";
	font-size:22px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
}
.service-contact-form-desc{
	margin:0 0 30px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.contact-form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact-form-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
	margin-bottom:20px;
}
.contact-form-field{margin-bottom:18px;}
.contact-form-row .contact-form-field{margin-bottom:0;}
.required-star{color:#EA4141;}
.contact-form-field label{
	display:block;
	margin-bottom:6px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:normal;
}
.contact-form-field input,
.contact-form-field textarea{
	width:100%;
	box-sizing:border-box;
	padding:12px 16px;
	border:1px solid var(--color-border);
	border-radius:8px;
	font-family:"Noto Sans";
	font-size:14px;
	color:#1A1A1A;
}
.contact-form-field textarea{resize:vertical;}
.contact-form-hint{display:block;margin-top:5px;color:#848484;}
.contact-form-consent{
	display:block;
	align-items:center;
	gap:8px;
	color:#5B6472;
	font-size:16px;
	line-height:24px;
	margin-bottom:24px;
}
.contact-form-consent input{margin-top:3px !important;width:24px !important;height:24px !important;accent-color:var(--color-primary) !important;cursor:pointer;}
.contact-form-consent a{color:#00408E;text-decoration:underline;}
.form-notice{padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:20px;}
.form-notice--success{background:#EAF7E9;color:#2E7D32;}
.form-notice--error{background:#FDEAEA;color:#C62828;}

/* Contact Form 7 default markup — the forms in inc/cf7-forms.php already
   reuse .contact-form-field/.contact-form-row/.contact-form-hint/
   .contact-form-consent/.phone-field by hand, so inputs/textareas pick up
   the rules above automatically; only CF7's own wrapper span and its
   validation/response states need dedicated rules here. */
.wpcf7-form-control-wrap{display:block;}
.wpcf7-not-valid-tip{display:block;margin-top:4px;color:#C62828;font-size:12px;}
.wpcf7-form-control.wpcf7-not-valid{border-color:#C62828 !important;}
/* Bootstrap 4 .alert component look (padding/border/radius match
   Bootstrap 4 exactly), applied to CF7's own response-output classes —
   .wpcf7-mail-sent-ok maps to .alert-success, everything else (validation
   errors, mail failed, spam blocked, aborted) maps to .alert-danger. */
.wpcf7-response-output{
	position:relative;
	padding:0.75rem 1.25rem !important;
	margin:1rem 0 0;
	border:1px solid transparent !important;
	border-radius:0.25rem;
	font-size:14px;
	line-height:1.5;
}
.wpcf7-mail-sent-ok{color:#155724 !important;background-color:#d4edda !important;border-color:#c3e6cb !important;}
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked,
.wpcf7-aborted{color:#721c24 !important;background-color:#f8d7da !important;border-color:#f5c6cb !important;}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output{
	border:1px solid #ffb900 !important;
	background:#ffb900 !important;
	background-color:#ffb900 !important;
}
.wpcf7-spinner{margin-left:10px;}

/* Submit buttons on every CF7 form. CF7's "use_button_tag" submit option
   (which would render a real <button>, needed for an ::after pseudo-
   element) requires CF7 5.6+ and is silently ignored on older installs —
   confirmed on this site, which still renders <input type="submit">
   despite the option being set — so this targets the guaranteed
   .wpcf7-submit class directly and draws the circular arrow icon as a
   background-image instead of ::after, since that works on <input> too. */
.wpcf7-submit{
	display:inline-flex !important;
	align-items:center !important;
	padding:5px 54px 5px 20px !important;
	border-radius:140px !important;
	background-color:#62AF33 !important;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Ccircle cx='17' cy='17' r='17' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1363 11.9197C21.2944 11.9182 21.4454 11.9796 21.5562 12.0904C21.6669 12.2011 21.7283 12.3521 21.7268 12.5103L21.6606 19.262C21.6626 19.3421 21.6485 19.4221 21.6191 19.4972C21.5896 19.5723 21.5455 19.641 21.4893 19.6992C21.433 19.7574 21.3659 19.8039 21.2918 19.8359C21.2177 19.868 21.1383 19.8849 21.0581 19.8857C20.978 19.8865 20.8988 19.8711 20.8254 19.8405C20.7519 19.8099 20.6856 19.7647 20.6305 19.7076C20.5754 19.6505 20.5326 19.5826 20.5047 19.5081C20.4767 19.4335 20.4642 19.3538 20.4678 19.2737L20.5199 13.9623L12.4576 22.0246C12.3446 22.1376 12.1922 22.202 12.0339 22.2036C11.8756 22.2051 11.7244 22.1437 11.6136 22.0329C11.5028 21.9221 11.4414 21.7709 11.443 21.6126C11.4445 21.4544 11.5089 21.302 11.6219 21.1889L19.6842 13.1266L14.3728 13.1788C14.2927 13.1824 14.213 13.1698 14.1384 13.1419C14.0639 13.1139 13.996 13.0711 13.9389 13.016C13.8818 12.9609 13.8366 12.8946 13.806 12.8212C13.7754 12.7477 13.7601 12.6686 13.7608 12.5884C13.7616 12.5083 13.7785 12.4288 13.8106 12.3547C13.8426 12.2806 13.8891 12.2135 13.9474 12.1573C14.0056 12.101 14.0743 12.0569 14.1494 12.0275C14.2245 11.998 14.3045 11.9839 14.3845 11.986L21.1363 11.9197Z' fill='%2362AF33'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:right 5px center !important;
	background-size:34px 34px !important;
	color:#FFF !important;
	text-align:center !important;
	font-family:"Noto Sans" !important;
	font-size:16px !important;
	font-style:normal !important;
	font-weight:500 !important;
	line-height:34px !important;
	border:2px solid transparent !important;
	cursor:pointer;
	transition:all var(--transition);
}
.wpcf7-submit:hover{background-color:var(--color-accent-dark) !important;color:#fff !important;}

/* ==========================================================================
   Contact page — Office locations
   ========================================================================== */
.contact-offices{padding:0px 0;}
.contact-offices-head{text-align:center;max-width:600px;margin:0 auto 50px;}
.contact-offices-head h2{color:#000;font-family:"Noto Sans";font-size:36px;font-weight:700;line-height:46px;margin:8px 0 12px;}
.contact-offices-head p{color:#5B6472;font-size:16px;line-height:24px;margin:0;}
.contact-offices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.contact-offices-slider{display:none;}
.contact-office-card{
	border-radius:15px;
	border:1px solid #E8E8E8;
	background:#FFF;
	overflow:hidden;
	display:flex;
	flex-direction:column;
}
.contact-office-map{width:412px;height:299px;}
.contact-office-map iframe{width:100%;height:100%;border:0;display:block;}
.contact-office-body{padding:30px;flex:1 1 auto;height:241px;background:#F8F8FE;}
.contact-office-label{
	display:block;
	margin-bottom:8px;
	color:#00408E;
	font-family:"Noto Sans";
	font-size:14px;
	font-weight:600;
	letter-spacing:.02em;
	text-transform:uppercase;
}
.contact-office-company{color:#000;font-family:"Noto Sans";font-size:16px;font-weight:700;margin:0 0 6px;}
.contact-office-address{color:#5B6472;font-family:"Noto Sans";font-size:14px;line-height:20px;margin:0 0 14px;}
.contact-office-email{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 18px;}
.contact-office-email a{color:#000;text-decoration:none;}
.contact-office-email a:hover{color:#00408E;text-decoration:underline;}
.contact-office-direction{display:inline-flex;align-items:center;gap:6px;color:#00408E;font-family:"Noto Sans";font-size:14px;font-weight:600;text-decoration:none;}
.contact-office-direction:hover{text-decoration:underline;}

@media (max-width:991px){
	.contact-offices-grid{grid-template-columns:1fr;}
}

@media (max-width:991px){
	.powered-features{grid-template-columns:repeat(2,1fr);}
	.why-grid{grid-template-columns:repeat(2,1fr);}
	.service-contact .container{grid-template-columns:1fr;}
}
@media (max-width:767px){
	.service-detail,
	.service-detail:nth-child(even){flex-direction:column;gap:20px;}
	/* .service-detail + .service-detail has a 150px desktop gap between
	   blocks with no mobile reduction — same "excess whitespace" pattern
	   already fixed elsewhere. .service-detail .eyebrow is also more
	   specific (class+class) than the shared .eyebrow mobile fix
	   (single class), so it was staying at the desktop 18px regardless. */
	.service-detail + .service-detail{margin-top:50px;}
	.service-detail .eyebrow{font-size:14px !important;font-weight:500 !important;}
	.service-detail-text h2{font-size:22px;line-height:28px;}
	.service-detail-text p{font-size:14px;line-height:20px;}
	.service-checklist li{font-size:14px;line-height:20px;}
	/* No mobile override existed at all for the service-detail-page hero
	   — the 36px/46-line-height heading and 180px vertical padding (sized
	   for a 1920px desktop hero) were applying unconditionally on phones
	   too. Matches the same hero type scale already used on the
	   homepage's own hero at this breakpoint. */
	.service-hero{min-height:0;padding:100px 0 40px;}
	.service-hero-content{max-width:none;}
	.service-hero-content h1{font-size:28px;line-height:32px;}
	.service-hero-content p{font-size:14px;line-height:20px;margin-bottom:20px;}
	.service-details{padding:50px 0;}
	.powered-features{grid-template-columns:1fr;}
	.powered-feature p{font-size:14px;line-height:20px;}
	.why-grid{grid-template-columns:1fr;}
	.why-card{padding:24px;}
	.why-card p{font-size:14px;line-height:20px;}
	.service-why .section-head p{font-size:16px;line-height:24px;width:100% !important;}
	/* Neither had a mobile reduction at all — same 100px desktop padding
	   applying unconditionally on phones. */
	.service-powered{padding:50px 0;}
	.service-powered--cta-only{padding:0px 0 100px;background:none;}
	.contact-form-row{grid-template-columns:1fr;}
	/* Figma's mobile spec has the image below the text/button (not above,
	   centered, like the desktop side-by-side layout) and everything
	   left-aligned rather than centered — .powered-cta-image comes first
	   in the DOM (it's the decorative element floated over the desktop
	   layout), so order:1 is what actually moves it after the text block
	   in the column layout instead of relying on DOM order alone. */
	.powered-cta{flex-direction:column;align-items:flex-start;text-align:left;padding:0px 0px;}
	.powered-cta-text{padding:30px 30px 0px;text-align:left;max-width:none;}
	.powered-cta-text h2{font-size:22px;line-height:28px;}
	.powered-cta-text p{font-size:14px;line-height:20px;margin-bottom:20px;}
	.powered-cta-image{position:static;order:1;max-width:100%;height:auto;margin-top:20px;}

	/* .service-contact-intro/.service-contact-form/.service-contact-image
	   all have fixed desktop pixel widths (384px / 720px / 415px) with no
	   mobile override anywhere — on a 375px phone that's a severe
	   horizontal-overflow bug, worst of all on the Contact page where the
	   form alone was fixed at 720px wide. The image is also
	   position:absolute on desktop (floats over the bottom of the intro
	   column); Figma's mobile design shows it inline in normal flow
	   instead, right after the intro paragraph. */
	.service-contact{padding:40px 0 60px;}
	/* .contact-main .service-contact-form/.service-contact-image below
	   are unconditioned rules (no media query) that appear LATER in this
	   file than these fixes — with matching specificity and neither side
	   using !important, the later one always won regardless of screen
	   width, so the 720px form and absolutely-positioned 415px image were
	   still winning on mobile. All of these need !important to actually
	   take effect. */
	.service-contact .service-contact-intro,
	.contact-main .service-contact-form{width:auto !important;}
	.service-contact-intro h2,
	.contact-main .service-contact-intro h2{font-size:22px !important;line-height:28px !important;margin:8px 0 10px;}
	.service-contact-intro p,
	.contact-main .service-contact-intro p{font-size:14px !important;line-height:20px !important;}
	.service-contact-image,
	.contact-main .service-contact-image{
		position:static !important;
		width:100% !important;
		height:auto !important;
		object-fit:contain !important;
		bottom:auto !important;
		margin-top:20px;
	}
	.service-contact-form{padding:24px !important;}
	.service-contact-form-desc{font-size:14px;line-height:20px;margin-bottom:20px;}

	/* Figma's mobile design uses a horizontal peek-carousel for the
	   office cards, not the desktop grid — .contact-office-map also has a
	   fixed 412px width with nothing resetting it for mobile, which
	   overflowed the screen even in the grid's 1-column state. */
	.contact-offices{padding:40px 0 60px;}
	.contact-offices-head{text-align:left;margin:0 0 30px;}
	.contact-offices-head h2{font-size:22px;line-height:28px;text-align:left;}
	.contact-offices-head p{font-size:14px;line-height:20px;text-align:left;}
	.contact-offices-grid{display:none;}
	.contact-offices-slider{display:block;}
	.contact-offices-track{
		display:flex;
		gap:20px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-padding-left:20px;
		padding:4px 20px 8px;
		-ms-overflow-style:none;
		scrollbar-width:none;
	}
	.contact-offices-track::-webkit-scrollbar{display:none;}
	.contact-offices-track > div{flex:0 0 315px;width:315px;scroll-snap-align:start;}
	/* height:auto on the body let each card size to its own address
	   length (Melbourne's is one short line, Chennai's wraps to three),
	   so the three cards ended up visibly different heights — a fixed
	   card height (matching Figma) with the body flexing to fill the
	   remaining space keeps all three uniform regardless of content. */
	.contact-offices-slider .contact-office-card{width:100%;height:417px;}
	.contact-offices-slider .contact-office-map{width:100%;height:215px;flex-shrink:0;}
	.contact-offices-slider .contact-office-body{flex:1 1 auto;height:auto;padding:20px;overflow:hidden;}
}

/* ==========================================================================
   Technology page
   ========================================================================== */
.technology-section-head{
	max-width:640px;
	margin:0 auto 40px;
	text-align:center;
}
.technology-section-head h2{
	margin:0px 0 12px;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:36px;
	font-style:normal;
	font-weight:700;
	line-height:46px;
}
.technology-section-head p{
	margin:0;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}

/* Tech stack grid */
.technology-stack{padding:100px 0 0;}
.technology-stack-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:51px 40px;
}
.technology-stack-card{
	background:var(--color-surface-alt);
	border-radius:var(--radius);
	padding:35px 0px 0px 35px;
	width:630px;
}
.technology-stack-card-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:8px;
	padding-right:35px;
}
.technology-stack-card-head img{}
.technology-stack-card-head h3{
	margin:0;
	color:#000;
	font-family:"Noto Sans";
	font-size:24px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
}
.technology-stack-card p{
	margin:0 0 30px;
	padding-right:35px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.technology-stack-logos{
	display:flex;
	align-items:center;
	gap:25px;
	margin-bottom:40px;
	flex-wrap:wrap;
	padding-right:35px;
}
.technology-stack-logos img{object-fit:contain;}
.technology-stack-image{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;transform:translateZ(0);}
.technology-stack-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.technology-stack-card:hover .technology-stack-image img{transform:scale(1.08);}

/* Architecture principles */
.technology-principles{padding:121px 0;}
.technology-principles-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
}
.technology-principle-card{
	background:var(--color-primary);
	border-radius:15px;
	padding:40px;
	width:380px;
	height:347px;
}
.technology-principle-card img{
	/* width:36px; */
	/* height:36px; */
	margin-bottom:30px;
}
.technology-principle-card h3{
	margin:0 0 8px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:20px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
}
.technology-principle-card p{
	margin:0;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}

/* Innovation lab */
.technology-innovation{padding:340px 0 100px;background:#F5F5F5B2;margin-top:-320px;}
.technology-innovation-grid{
	display:flex;
	justify-content:center;
	gap:60px;
	flex-wrap:wrap;
}
.technology-innovation-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
}
.technology-innovation-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:150px;height:150px;
	border-radius:50%;
	background:var(--color-accent);
	transition: background-color 0.4s ease;

}

.technology-innovation-item:hover .technology-innovation-icon {
    background: #0e2f66;
}




.technology-innovation-icon img{}
.technology-innovation-label{
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:18px;
	font-style:normal;
	font-weight:500;
	line-height:normal;
}

@media (max-width:767px){
	.technology-stack{padding:50px 0 0;}
	.technology-stack-grid{grid-template-columns:1fr;}
	/* Both cards have fixed desktop widths (630px / 380px) with no
	   mobile override at all — guaranteed horizontal overflow on a
	   375-420px phone regardless of the grid already going 1-column. */
	.technology-stack-card{width:auto;padding:24px;}
	.technology-stack-card-head,
	.technology-stack-card p,
	.technology-stack-logos{padding-right:0;}
	.technology-stack-card-head h3{font-size:20px;}
	.technology-stack-card p{font-size:14px;line-height:20px;}

	.technology-section-head{max-width:100%;margin-bottom:24px;}
	.technology-section-head h2{font-size:22px;line-height:28px;}
	.technology-section-head p{font-size:14px;line-height:20px;}

	.technology-principles{padding:50px 0;}
	.technology-principles-grid{grid-template-columns:1fr;}
	.technology-principle-card{width:auto;height:auto;padding:24px;}
	.technology-principle-card p{font-size:14px;line-height:20px;}

	/* The -320px margin-top + 340px top padding combo is a desktop-only
	   overlap trick (this section's background panel floats up over the
	   previous one). On mobile, where section heights reflow completely,
	   that pull-up risks this section's content overlapping/hiding
	   behind the previous section instead — reset to a normal block. */
	.technology-innovation{padding:50px 0;margin-top:0;}
	/* Figma's mobile spec is a clean 2x2 grid with 100x100px icons — the
	   desktop version is a centered flex-wrap row of 150px icons, which
	   is what produced the uneven "1 on top, 2 below" stagger (flex-wrap
	   packs items based on whatever happens to fit per line, it doesn't
	   guarantee an even 2-per-row the way a real grid does). */
	.technology-innovation-grid{
		display:grid;
		grid-template-columns:repeat(2,1fr);
		justify-content:center;
		gap:30px 20px;
	}
	.technology-innovation-item{gap:10px;}
	.technology-innovation-icon{width:100px;height:100px;margin:0 auto;}
	.technology-innovation-label{font-size:14px;}
}

/* ==========================================================================
   Product page
   ========================================================================== */
.product-intro{padding:120px 0;}
.product-intro .container{
	display:flex;
	align-items:center;
	gap:70px;
	flex-wrap:wrap;
}
.product-intro-text{max-width:480px;}
.product-intro-text h2{
	color:#1A1A1A;
	font-family:"Noto Sans";
	font-size:32px;
	font-weight:700;
	line-height:42px;
	margin:8px 0 12px;
}
.product-intro-text p{
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	line-height:24px;
	margin:0;
}
.product-intro-stats{display:flex;gap:60px;flex-shrink:0;}
.product-stat-number{
	color:var(--color-primary);
	font-family:"Noto Sans";
	font-size:100px;
	font-weight:800;
	line-height:96px;
}
.product-stat-label{
	color:#000;
	font-family:"Noto Sans";
	font-size:20px;
	line-height:normal;
}

/* Highlight: photo + blue copy box */
.product-highlight{padding:0 0 100px;position:relative;}
.product-highlight:before{
	position:absolute;
	content:"";
	width:85%;
	height:90%;
	right:0;
	top:0;
	background:#00408e;
	z-index:-1;
}
.product-highlight-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0;
	align-items:stretch;
}
.product-highlight-image{
	display:block;
	height:100%;
	min-height:0;
	border-radius:0;
	overflow:hidden;
	margin-top:-50px;
	transform:translateZ(0);
}
.product-highlight-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.product-highlight-grid:hover .product-highlight-image img{transform:scale(1.08);}
.product-highlight-box{
	position:relative;
	overflow:hidden;
	padding:50px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-height:0;
}
.product-highlight-box h2{
	color:#FFF;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:400;
	line-height:46px;
	margin:0 0 16px;
	width:85%;
}
.product-highlight-box p{
	color:#fff;
	font-family:"Noto Sans";
	font-size:16px;
	line-height:24px;
	margin:0 0 16px;
}
.product-highlight-box .btn-accent{align-self:flex-start;margin-top:8px;}

@media (max-width:767px){
	.product-intro{padding:50px 0;}
	.product-intro .container{flex-direction:column;align-items:flex-start;gap:30px;}
	.product-intro-text{max-width:none;}
	.product-intro-text h2{font-size:24px;line-height:32px;}
	/* .product-stat-number is a fixed 100px font with a 60px gap between
	   the two stats — never overridden for mobile, so it was forcing
	   horizontal overflow on any screen under ~450px. */
	.product-intro-stats{gap:30px;}
	.product-stat-number{font-size:48px;line-height:1;}
	.product-stat-label{font-size:15px;}
	.product-highlight-grid{grid-template-columns:1fr;}
	.product-highlight-image{border-radius:var(--radius) var(--radius) 0 0;aspect-ratio:16/9;margin-top:0;padding:20px;}
	.product-highlight:before{width:100%;}
	.product-highlight-box{border-radius:0 0 var(--radius) var(--radius);padding:30px;}
	.product-highlight-box h2{font-size:26px;line-height:34px;width:100%;}
}

/* ==========================================================================
   Header nav mega menu (Services / Platforms & Products)
   ========================================================================== */
.main-navigation li.has-mega-menu{position:static;}
.nav-mega-menu{
	position:absolute;
	top:100%;left:0;right:0;
	background:#fff;
	box-shadow:var(--shadow-md);
	border-radius:12px;
	opacity:0;
	visibility:hidden;
	transform:translateY(6px);
	transition:all var(--transition);
	z-index:90;
}
@media (min-width:1900px){
	.nav-mega-menu {
    right: 550px;
    left: revert;
    width: 886px;
    height: auto;
    top: 82px;
}

}

.main-navigation li.has-mega-menu:hover > .nav-mega-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-mega-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:4px;
	padding:16px;
	max-width:900px;
	margin:0 auto;
	row-gap: 10px;
    padding: 25px;
}
.nav-mega-item{
	display:flex;
	align-items:flex-start;
	gap:14px;
	padding:14px 16px;
	border-radius:10px;
	transition:background var(--transition);
}
.nav-mega-item:hover{background:var(--color-surface-alt);}
.nav-mega-icon{
	flex-shrink:0;
	width:40px;height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:8px;
	background:var(--color-primary);
}
.nav-mega-icon img{
    width: 40px;
    height: 40px;
object-fit:contain;
}
.nav-mega-text{flex:1 1 auto;min-width:0;}
.nav-mega-title{
	display:block;
	color: #333;
	font-family:"Noto Sans";
	font-size:15px;
	font-weight: 500;
	line-height: normal;
}
.nav-mega-desc{
	display:block;
    color: #797A7E;
	font-family:"Noto Sans";
	font-size:13px;
    line-height: 18px;
    margin-top: 5px;

}
.nav-mega-arrow{flex-shrink:0;align-self:center;opacity:0;transform:translateX(-4px);transition:all var(--transition);}
.nav-mega-item:hover .nav-mega-arrow{opacity:1;transform:translateX(0);}
.nav-mega-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	background: #F5F5F7;
	padding: 20px 30px;
	border-radius: 0 0 9px 9px;
}

.nav-mega-item:hover {
	background: #EEF5FD!important;
    border-radius: 8px!important;
}
.nav-mega-item:hover .nav-mega-title {
    color: #114EBA;
}

.nav-mega-arrow {
    align-self: flex-start;
}

.nav-mega-footer-text{display:flex;flex-direction:column;gap:2px;}
.nav-mega-footer-text strong{color:#000;font-family:"Noto Sans";font-size:14px;font-weight:500;line-height: normal;}
.nav-mega-footer-text span{color: #5F6368;font-family:"Noto Sans";font-size:13px;}


#product-detail .service-why {
    padding: 100px 0 100px;
    position: static;
    margin-top: 0;
}


/* Contact page's own copy of the shared "Talk to Expert" component
   (template-parts/section-service-contact.php, also used on every Service
   page) needs different spacing/sizing here — scoped to .contact-main
   (Contact.php's <main> class) so Service pages keep the shared defaults
   above instead of these being global overrides. */
.contact-main .service-contact-intro h2{
	color:#000;
	font-family:"Noto Sans";
	font-size:36px;
	font-style:normal;
	font-weight:700;
	line-height:46px;
	margin:0px 0 50px;
}
.contact-main .service-contact-intro p{
	margin-top:20px;
	margin-bottom:24px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.contact-main .service-contact-form{width:720px;}
.contact-main .service-contact-image{
	border-radius:var(--radius);
	position:absolute;
	z-index:9;
	bottom:50px;
	width:415px;
}

.product-highlight:before {
	background-image: url("https://sorimtechnologies.com/wp-content/uploads/2026/08/Vector-35.png");
	background-repeat:no-repeat;
	background-size: 40% auto;
    background-position: bottom right;
}

@media (min-width:769px){
	#industries .section-head h2 {
	    width: 545px !important;
	}
}

.service-why .section-head p{
	    font-size: 16px;
    line-height: 24px;
    width: 35%;
}

.nav-mega-menu {
	right: 350px;
    left: revert;
    width: 886px;
    height: auto;
    top: 82px;
}

.footer-bg-swoosh {
	left: revert;
    right: 0;
    transform: translate(0px);
    width: 80%;
}

.industries-slider {
    padding-bottom: 100px !important;
    /* padding-top: 40px !important; */
}

.main-navigation .nav-mega-item {
    padding: 15px;
	display:flex;
align-items:start;
}

/* ==========================================================================
   Events page — banner
   ========================================================================== */
.events-banner{
	position:relative;
	width:100%;
	height:600px;
	display:flex;
	align-items:center;
	overflow:hidden;
}
.events-banner__image{
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	z-index:0;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
.events-banner__overlay{
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	z-index:1;
	background:rgba(0,0,0,.58);
}
.events-banner .container{position:relative;z-index:2;height:100%;}
.events-banner__content{
	width:100%;
	max-width:560px;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	color:#fff;
}
.events-banner__title{
	margin:0 0 10px;
	max-width:540px;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:46px;
	color:#fff;
}
.events-banner__description{
	max-width:526px;
	margin:0;
	font-family:"Noto Sans";
	font-size:16px;
	font-weight:400;
	line-height:24px;
	color:#fff;
}
.events-banner .eyebrow{color:#fff;}

@media (max-width:991px){
	.events-banner{height:340px;}
	.events-banner__content{max-width:480px;}
}
@media (max-width:767px){
	.events-banner{height:300px;}
	.events-banner__content{max-width:100%;}
	.events-banner__title{font-size:26px;line-height:1.3;}
	.events-banner__description{font-size:14px;line-height:20px;}
}
@media (max-width:480px){
	.events-banner{height:260px;}
	.events-banner__title{font-size:22px;}
	.events-banner__description{font-size:14px;}
}

/* ==========================================================================
   Events page — filter tabs + listing grid
   ========================================================================== */
.events-list-section{padding:60px 0 100px;}
.events-tabs{
	display:flex;
	align-items:center;
	gap:32px;
	border-bottom:2px solid var(--color-border);
	margin-bottom:50px;
}
.events-tab{
	background:none;
	border:none;
	padding:0 0 15px;
	margin-bottom:-1px;
	font-family:"Noto Sans";
	font-size:16px;
	font-weight:400;
	color:var(--color-text-muted);
	border-bottom:4px solid transparent;
	transition:color var(--transition), border-color var(--transition);
}
.events-tab:hover{color:var(--color-primary);}
.events-tab.is-active{color:var(--color-primary);border-bottom-color:var(--color-primary);}

.events-list-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap: 50px 35px;
}
.events-list-grid .event-card p{
	display:-webkit-box;
	-webkit-line-clamp:2;
	line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis;
	color:#333;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.events-load-more{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	margin-top:48px;
}
.events-load-more::before,
.events-load-more::after{
	content:"";
	flex:1 1 auto;
	height:1px;
	background:var(--color-border);
}
.events-load-more-link{
	flex:0 0 auto;
	background:none;
	border:none;
	padding:0;
	font-family:"Noto Sans";
	font-size:16px;
	font-weight:600;
	color:var(--color-primary);
}
.events-load-more-link:hover{color:var(--color-accent);}

@media (max-width:991px){
	.events-list-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
	.events-tabs{gap:20px;overflow-x:auto;}
	.events-tab{white-space:nowrap;}
	.events-list-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   Single event detail page
   ========================================================================== */
.event-detail{padding:48px 0 120px;}
.back-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-bottom:12px;
	font-family:"Noto Sans";
	font-size:16px;
	font-weight:400;
	color:#00408E;
}
.back-link svg{flex-shrink:0;}
.back-link:hover{color:var(--color-accent);}

.event-detail-title{
	color:#000;
	font-family:"Noto Sans";
	font-size:24px;
	font-weight:500;
	line-height:100%;
	margin:0 0 4px;
}		
.event-detail-meta{margin-bottom:30px;}

.event-detail-grid{
	display:grid;
	grid-template-columns:1fr 384px;
	gap:100px;
	align-items:start;
}
.event-detail-main{min-width:0;}

.event-detail-image{margin-bottom:30px;}
.event-detail-image img{
	
	aspect-ratio:16/10;
	object-fit:cover;
	border-radius:15px;
	width:770px;
	height: 420px;
}

.event-detail-content{
	width:770px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.event-detail-content h2,
.event-detail-content h3{
	margin:30px 0 8px;
	color:#000;
	font-family:"Noto Sans";
	font-size:20px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
}
.event-detail-content > *:first-child{margin-top:0;}
.event-detail-content p{margin:0 0 15px;}

.content-bullet-list{list-style:none;margin:0 0 20px;padding:0;}
.content-bullet-list li{
	position:relative;
	padding-left:20px;
	margin-bottom:10px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.content-bullet-list li::before{
	content:"";
	position:absolute;
	left:0;
	top:9px;
	width:7px;height:7px;
	border-radius:50%;
	background:var(--color-primary);
}
.content-bullet-list li strong{
	color:#010000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:700;
	line-height:24px;
}

.event-register{
	position:sticky;
	top:24px;
	background:#FAFAFA;
	border:1px solid #E8E8E8;
	border-radius:15px;
	padding:40px;
	box-shadow:var(--shadow-sm);
}
.event-register h3{
	color:#000;
	font-family:"Noto Sans";
	font-size:22px;
	font-weight:600;
	line-height:100%;
	margin:0 0 8px;
}
.event-register-desc{color:#000000;font-size:16px;line-height:24px;margin:0 0 30px;font-weight: 400;}
.event-register-form .contact-form-field{margin-bottom:20px;}
.event-register-form textarea{resize:vertical;}
.event-register-form .contact-form-consent input{accent-color:#00408E;}

.phone-field{
	position:relative;
	display:flex;
	align-items:stretch;
	border:1px solid var(--color-border);
	border-radius:8px;
	background:#fff;
}
.phone-field-code{
	display:flex;
	align-items:center;
	gap:6px;
	flex-shrink:0;
	padding:0 12px;
	border-right:1px solid var(--color-border);
	color:var(--color-text);
	font-family:"Noto Sans";
	font-size:15px;
}
.phone-field .wpcf7-form-control-wrap{flex:1 1 auto;}
.phone-field input{
	width:100%;
	border:none !important;
	border-radius:0 !important;
}
.phone-field input:focus{outline:none;}
.phone-field .wpcf7-not-valid-tip{
	position:absolute;
	left:0;
	top:100%;
}

@media (max-width:991px){
	.event-detail-grid{grid-template-columns:1fr;}
	.event-register{position:static;}
	/* .event-detail-content and its own image both have a fixed 770px
	   width — grid-template-columns going 1fr above doesn't touch this,
	   it's a severe overflow bug independent of the grid, same as
	   .career-content p{width:800px} found on the Career detail page. */
	.event-detail-content{width:auto;}
	.event-detail-image img{width:100%;height:auto;}
}
@media (max-width:767px){
	.event-detail-title{font-size:26px;}
	.event-detail-content{font-size:14px;line-height:20px;}
	.event-detail-content h2,
	.event-detail-content h3{font-size:18px;}
}
@media (max-width:480px){
	.event-detail-title{font-size:22px;}
	.event-register{padding:24px;}
}

/* ==========================================================================
   Terms & Conditions / Privacy Policy pages
   ========================================================================== */
.policy-hero{padding:120px 0 60px;
    background: linear-gradient(180deg, rgba(238, 238, 238, 0.50) 0%, rgba(255, 255, 255, 0.50) 89.83%);}
.policy-hero .container{max-width:1280px;}
.policy-title{
	color:#000;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:46px;
	margin:0 0 0px;
}
.policy-updated{
	color:#5F6368;
	font-size:16px;
	line-height:24px;
	font-weight:400;
	margin:0 0 20px;
}
.policy-intro{color:#000;font-size:16px;line-height:24px;margin:0;font-weight:400;width:489px;}

.policy-content{background:#F0F5FB;padding:60px 0;color:#000;}

.policy-grid{
	display:grid;
	grid-template-columns:1fr 380px;
	gap:120px;
	align-items:start;
}

.policy-body{color:#000;font-family:"Noto Sans";font-size:16px;line-height:24px;min-width:0;}
.policy-body h4{
	color:#000;
	font-family:"Noto Sans";
	font-size:25px;
	font-weight:600;
	line-height:normal;
	margin:30px 0 8px;
}
.policy-body > *:first-child{margin-top:0;}
.policy-body p{margin:0 0 0px;color:#000;text-align:left;font-style: normal;font-weight: 400;line-height: 24px;}
.policy-body [style*="color"]{color:inherit !important;}
.policy-body p.is-highlighted,
.event-detail-content p.is-highlighted{color:#00408E;}
.policy-body p:last-of-type{margin-bottom:40px;}
.policy-body a{color:#000;text-decoration:underline;}

.policy-body .content-bullet-list{
	list-style:none;
	border-left:none;
	background:#fff;
	padding:30px 30px;
	margin:15px 0;
	border-radius:15px;
}
.policy-body .content-bullet-list li{
	position:static;
	list-style:disc;
	margin-left:18px;
	padding-left:0;
	font-style:italic;
	font-size:16px;
	line-height:24px;
	color:#000;
	font-weight: 400;
}
.policy-body .content-bullet-list li::before{content:none;}
.policy-body .content-bullet-list li::marker{color:#00408E;}
.policy-body .content-bullet-list li strong{font-style:normal;}

.policy-sidebar{position:sticky;top:100px;}
.policy-cta{
	border-radius:15px;
	overflow:hidden;
	background:linear-gradient(189deg, #CCE4BD -11.65%, #F7FFF3 37.88%, #D9ECCD 86.75%);
    padding-top: 20px;
}
.policy-cta-image{width:100%;display:block;}
.policy-cta-body{padding:40px;}
.policy-cta-body h2{
	color: #000;
    font-family: "Noto Sans";
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    margin: 0 0 10px;
    width: 237px;
}
.policy-cta-body h2 span{color:#000000;}
.policy-cta-body p{
	color: #000;
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 20px;

}
.policy-cta-checklist{list-style:none;margin:0 0 24px;padding:0;}
.policy-cta-checklist li{
	display: flex;
    align-items: center;
    gap: 10px;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
}
.policy-cta-checklist li svg{flex-shrink:0;}
.policy-cta-btn{width:auto;}

@media (max-width:991px){
	.policy-grid{grid-template-columns:1fr;}
	.policy-sidebar{position:static;margin-top:40px;}
	.policy-cta{max-width:480px;}
}
@media (max-width:767px){
	.policy-hero{padding:44px 0 24px;}
	.policy-title{font-size:26px;}
	/* .policy-intro carries a fixed 489px width with no base media query,
	   so it was overflowing every screen under ~530px (container padding
	   included). */
	.policy-intro{width:auto;}
	.policy-content{padding:36px 0 64px;}
	.policy-body h4{font-size:18px;}
	.policy-cta{max-width:100%;}
	.policy-cta-body{padding:24px;}
	.policy-cta-body h2{width:auto;font-size:20px;line-height:26px;}
}

/* ==========================================================================
   About Us page — banner
   ========================================================================== */
.about-banner{padding:120px 0 60px;}
.about-banner-heading{max-width:700px;margin:0 auto;text-align:center;}
.about-banner-heading h1{
	color:#000;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:46px;
	margin:5px 0 12px;
}
.about-banner-heading p{
	font-size:16px;
	line-height:24px;
	margin:0;
	font-weight:400;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	max-width:734px;
}

.about-banner-strip{position:relative;margin-top:50px;overflow:hidden;}
.about-banner-strip-track{
	display:flex;
	gap:20px;
	width:max-content;
	animation:aboutBannerSlide 35s linear infinite;
}
.about-banner-strip-item{
	display:block;
	width:220px;
	height:280px;
	border-radius:12px;
	overflow:hidden;
	flex-shrink:0;
}
.about-banner-strip-item img{
	width:100%;
	height:100%;
	object-fit:cover;
}
@keyframes aboutBannerSlide{
	0%{transform:translateX(0);}
	100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
	.about-banner-strip-track{animation:none;}
}

/* ==========================================================================
   About Us page — Why Choose Us
   ========================================================================== */
.about-why{padding:60px 0 60px;}
.about-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.about-why-left{width:524px;}
.about-why-left h2{
	color:#000;
	font-family:"Noto Sans";
	font-size:36px;
	font-style:normal;
	font-weight:700;
	line-height:46px;
	margin:0px 0 20px;
}
.about-why-subtitle{
	margin:0;
	color:#000;
	font-family:"Noto Sans";
	font-size:18px;
	font-style:normal;
	font-weight:500;
	line-height:26px;
}

.about-stats-row{display:flex;flex-wrap:wrap;column-gap:100px;row-gap:32px;margin-top:40px;}
.about-stat .num{
	display:block;
	margin-bottom:8px;
	color:#333;
	font-family:"Noto Sans";
	font-size:70px;
	font-style:normal;
	font-weight:700;
	line-height:normal;
}
.about-stat p{
	margin:0;
	color:#333;
	font-family:"Noto Sans";
	font-size:18px;
	font-style:normal;
	font-weight:500;
	line-height:normal;
	text-transform:capitalize;
}

.about-why-right p{
	margin:0 0 15px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.about-why-right b{
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:700;
	line-height:24px;
}
.about-why-right .content-bullet-list{margin:20px 0;}
.about-quote-box{
	border-left:none;
	background:#F5F9FF;
	padding:15px 30px;
	margin:30px 0 0;
	border-radius:6px;
}
.about-quote-box h3{color:#000;font-size:16px;font-weight:600;margin:0 0 6px;}
.about-quote-box p{color:#000;font-size:14px;line-height:24px;font-style:italic;margin:0;}

/* ==========================================================================
   About Us page — Problem / Solution
   ========================================================================== */
.about-points{padding:0 0 120px;}
.about-points-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;}
.about-points-box{padding:50px;}
.about-points-box.is-problem{border-radius:40px 40px 0 40px;background:#FFE0E0;}
.about-points-box.is-solution{border-radius:0 40px 40px 40px;background:#D5FBE1;}
.about-points-label{
	display:inline-block;
	border-radius:4px;
	padding:10px 12px;
	margin-bottom:25px;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:500;
	line-height:normal;
	text-transform:uppercase;
}
.is-problem .about-points-label{color:#EA4141;border:1px solid #F39F9F;background:#FFDFDF;}
.is-solution .about-points-label{color:#34A853;border:1px solid #77DD97;background:#D8FFE5;}
.about-points-box p{color:#000;font-size:15px;line-height:22px;margin:0 0 15px;}
.about-points-box p:last-of-type{margin-bottom:25px;}
.about-points-image{margin-top:20px;border-radius:12px;overflow:hidden;transform:translateZ(0);}
.about-points-image img{width:100%;border-radius:12px;display:block;transition:transform .5s ease;}
.about-points-image:hover img{transform:scale(1.06);}
.is-solution .about-points-image{margin-top:0;margin-bottom:30px;}
.about-solution-item{margin-top:0px;}
.about-solution-item h3{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 7px;
	color:#000;
	font-family:"Noto Sans";
	font-size:18px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
}
.about-solution-item h3 img{width:24px;height:24px;flex-shrink:0;}
.about-solution-item p{
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}

/* ==========================================================================
   About Us page — Leadership
   ========================================================================== */
.about-leadership{padding:30px 0 60px;}
.about-leadership-head{text-align:center;max-width:479px;margin:0 auto 50px;}
.about-leadership-head h2{
	margin:0 0 12px;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:36px;
	font-style:normal;
	font-weight:700;
	line-height:46px;
}
.about-leadership-head p{
	margin:0;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}

.about-leadership-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
/* Mobile shows the horizontal peek-carousel version instead (see
   .about-leadership-slider mobile rules below) — only one of the two
   is ever visible at a given width. */
.about-leadership-slider{display:none;}
.about-leadership-card{
	text-align:center;
	background:#F0F5FB;
	border-radius:15px;
	padding:40px 30px;
	height:436px;
}
.about-leadership-photo{margin:0 auto 15px;width:80px;height:80px;border-radius:50%;overflow:hidden;transform:translateZ(0);}
.about-leadership-photo img{
	width:80px;
	height:80px;
	border-radius:50%;
	object-fit:cover;
	display:block;
	transition:transform .5s ease;
}
.about-leadership-photo:hover img{transform:scale(1.1);}
.about-leadership-role{
	display:block;
	margin-bottom:4px;
	color:#00408E;
	text-align:center;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.about-leadership-card h3{
	margin:0 0 20px;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:18px;
	font-style:normal;
	font-weight:600;
	line-height:normal;
}
.about-leadership-card p{
	margin:0;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}

/* ==========================================================================
   About Us page — Vision / Mission / Values
   ========================================================================== */
.about-strategic{padding:90px 0 100px;}
.about-strategic-head{text-align:center;max-width:640px;margin:0 auto 50px;}
.about-strategic-head h2{
	margin:0 0 12px;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:36px;
	font-style:normal;
	font-weight:700;
	line-height:46px;
}
.about-strategic-head p{
	margin:0;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.about-strategic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px;}
.about-strategic-card{
	position:relative;
	border-radius:15px;
	border:1px solid #DBDBF7;
	background:#F1F3FC;
	padding:30px;
	width:380px;
	height:322px;
	overflow:hidden;
}
.about-strategic-card-quote{position:absolute;top:24px;right:24px;}
.about-strategic-icon{position:relative;margin-bottom:30px;}
.about-strategic-card h3{color:#000;font-family:"Noto Sans";font-size:20px;font-weight:600;margin:0 0 8px;}
.about-strategic-card p{
	margin:0;
	color:#575757;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.about-strategic-card .content-bullet-list{margin:0;}
.about-strategic-card .content-bullet-list li{
	padding-left:0;
	color:#575757;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:22px;
	margin-bottom:8px;
}
.about-strategic-card .content-bullet-list li::before{content:none;}
.about-strategic-card .content-bullet-list li strong{
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:500;
	line-height:22px;
}

/* ==========================================================================
   About Us page — Commitment
   ========================================================================== */
.about-commitment{padding:60px 0 100px;}
.about-commitment-head{text-align:center;max-width:600px;margin:0 auto 50px;}
.about-commitment-head h2{
	margin:5px 0 12px;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:36px;
	font-style:normal;
	font-weight:700;
	line-height:46px;
}
.about-commitment-head p{
	margin:0;
	color:#000;
	text-align:center;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.about-commitment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.about-commitment-slider{display:none;}
.about-commitment-card{
	position:relative;
	border-radius:12px;
	overflow:hidden;
	aspect-ratio:3/4;
	color:#fff;
	transform:translateZ(0);
}
.about-commitment-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.about-commitment-card:hover img{transform:scale(1.06);}
.about-commitment-card .overlay{
	position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,0) 17%,rgba(0,0,0,.85) 100%);
}
.about-commitment-card .content{
	position:absolute;left:0;right:0;bottom:0px;
	padding:24px;
	transition:bottom var(--transition), padding var(--transition);
}
.about-commitment-card h3{
	margin:0 0 10px;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:20px;
	font-style:normal;
	font-weight:500;
	line-height:28px;
	text-transform:uppercase;
}
.about-commitment-card p{
	margin:0;
	display:none;
	-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
	color:#FFF;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
}
.about-commitment-card:hover .content{bottom:0;padding:28px 24px;}
.about-commitment-card:hover p{display:-webkit-box;}

@media (max-width:991px){
	.about-why-grid{grid-template-columns:1fr;gap:50px;}
	.about-points-grid{grid-template-columns:1fr;}
	.about-leadership-grid{grid-template-columns:repeat(2,1fr);}
	.about-strategic-grid{grid-template-columns:repeat(2,1fr);}
	.about-commitment-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
	.about-banner{padding:50px 0 40px;}
	/* Figma mobile spec has this heading block left-aligned, not centered
	   like desktop — and at the site's usual mobile type scale (14/22-28
	   /14-20), not simply a smaller version of the desktop sizes. */
	.about-banner-heading{max-width:none;margin:0;text-align:left;}
	.about-banner-heading h1{font-size:22px;line-height:28px;margin:5px 0 10px;}
	.about-banner-heading p{font-size:14px;line-height:20px;text-align:left;max-width:none;}
	.about-why{padding:40px 0 60px;}
	/* .about-why-left has a fixed 524px width on desktop for the 2-column
	   grid — that alone overflows a 375px phone screen once the grid
	   collapses to a single column, since nothing here reset it. */
	.about-why-left{width:auto;}
	.about-why-left h2{font-size:22px;line-height:28px;}
	.about-why-subtitle{font-size:14px;line-height:20px;}
	.about-stats-row{column-gap:40px;row-gap:24px;}
	.about-stat .num{font-size:36px;}
	.about-stat p{font-size:14px;}
	.about-why-right p,
	.about-why-right b{font-size:14px;line-height:20px;}
	.about-points{padding:0 0 60px;}
	/* Figma mobile spec: uniform 15px corners on both boxes, 20px inner
	   padding — not desktop's 40px asymmetric-corner treatment scaled
	   down to 24px. */
	.about-points-box{padding:20px;}
	.about-points-box.is-problem,
	.about-points-box.is-solution{border-radius:15px;}
	.about-points-box p{font-size:14px;line-height:20px;}
	.about-points-label{font-size:14px;padding:8px 12px;margin-bottom:20px;}
	.about-solution-item h3{font-size:16px;}
	.about-solution-item p{font-size:14px;line-height:20px;}
	.about-leadership{padding:60px 0 40px;}
	/* These heads keep the desktop 46px line-height (sized for a 36px
	   heading) when only font-size was overridden before — each wrapped
	   line kept the full 46px of vertical space, showing as odd gaps.
	   Figma's mobile spec also has these left-aligned, not centered. */
	.about-leadership-head h2,
	.about-strategic-head h2,
	.about-commitment-head h2{font-size:22px;line-height:28px;text-align:left;}
	.about-leadership-head p,
	.about-strategic-head p,
	.about-commitment-head p{font-size:14px;line-height:20px;text-align:left;}
	/* Figma's mobile design uses a horizontal peek-carousel here instead
	   of a stacked grid — see .about-leadership-slider markup in
	   template-parts/section-about-leadership.php. */
	.about-leadership-grid{display:none;}
	.about-leadership-slider{display:block;}
	.about-leadership-track{
		display:flex;
		gap:20px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-padding-left:20px;
		padding:4px 20px 8px;
		-ms-overflow-style:none;
		scrollbar-width:none;
	}
	.about-leadership-track::-webkit-scrollbar{display:none;}
	.about-leadership-slider .about-leadership-card{
		flex:0 0 315px;
		width:315px;
		height:391px;
		scroll-snap-align:start;
		background:#F1F3FC;
		padding:30px;
	}
	.about-leadership-slider .about-leadership-role{font-size:14px;line-height:19px;}
	.about-leadership-slider .about-leadership-card h3{font-size:16px;margin-bottom:8px;}
	.about-leadership-slider .about-leadership-card p{font-size:14px;line-height:20px;}
	.about-strategic{padding:60px 0 60px;}
	.about-strategic-grid{grid-template-columns:1fr;}
	/* .about-strategic-card has a fixed desktop width:380px with nothing
	   resetting it for mobile — wider than a 375px screen minus the
	   container's own padding, so it overflowed past the right edge
	   instead of respecting any margin there (looked like white space
	   missing on one side, when the card was actually just bleeding off
	   past the viewport). */
	.about-strategic-card{width:auto;height:auto;}
	.about-commitment{padding:40px 0 60px;}
	/* Figma's mobile design: horizontal peek-carousel, description
	   always visible instead of desktop's hover-to-reveal (which has no
	   equivalent on touch — without this, the description was invisible
	   on mobile entirely, same bug already fixed for .industry-card). */
	.about-commitment-grid{display:none;}
	.about-commitment-slider{display:block;}
	.about-commitment-track{
		display:flex;
		gap:20px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-padding-left:20px;
		padding:4px 20px 8px;
		-ms-overflow-style:none;
		scrollbar-width:none;
	}
	.about-commitment-track::-webkit-scrollbar{display:none;}
	.about-commitment-slider .about-commitment-card{
		flex:0 0 315px;
		width:315px;
		aspect-ratio:315/400;
	}
	.about-commitment-slider .about-commitment-card .content{
		top:0;bottom:0;
		display:flex;
		flex-direction:column;
		justify-content:flex-end;
		padding:24px;
	}
	.about-commitment-slider .about-commitment-card p{
		display:-webkit-box !important;
		font-size:14px;
		line-height:20px;
	}
	.about-commitment-slider .about-commitment-card h3{
		font-size:16px;
		font-weight:600;
		line-height:22px;
		text-transform:none;
	}
}
@media (max-width:480px){
	.about-commitment-head{text-align:left;max-width:600px;margin:0 auto 50px;}
	/* Match .container's own padding at this width (16px here vs 20px
	   above 480px) so the carousel cards' left/right edges keep lining up
	   with the heading text above them instead of drifting out of sync. */
	.about-commitment-track,
	.about-leadership-track,
	.contact-offices-track{scroll-padding-left:16px;padding:4px 16px 8px;}
}

/* ==========================================================================
   Peek sliders — mouse drag-to-scroll affordance
   ========================================================================== */
[data-peek-track]{cursor:grab;}
[data-peek-track].is-dragging{
	cursor:grabbing;
	scroll-snap-type:none;
	scroll-behavior:auto;
}
[data-peek-track].is-dragging [data-peek-step]{pointer-events:none;}

/* ==========================================================================
   Case Studies page — banner
   ========================================================================== */
.case-studies-banner{
	position:relative;
	width:100%;
	height:600px;
	display:flex;
	align-items:center;
	overflow:hidden;
}
.case-studies-banner__image{
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	z-index:0;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
.case-studies-banner__overlay{
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	z-index:1;
	background:rgba(0,0,0,.58);
}
.case-studies-banner .container{position:relative;z-index:2;height:100%;}
.case-studies-banner__content{
	width:100%;
	max-width:600px;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	color:#fff;
}
.case-studies-banner__title{
	margin:0 0 10px;
	max-width:560px;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:46px;
	color:#fff;
}
.case-studies-banner__description{
	max-width:560px;
	margin:0;
	font-family:"Noto Sans";
	font-size:16px;
	font-weight:400;
	line-height:24px;
	color:#fff;
}
.case-studies-banner .eyebrow{color:#fff;}

@media (max-width:991px){
	.case-studies-banner{height:340px;}
	.case-studies-banner__content{max-width:480px;}
}
@media (max-width:767px){
	.case-studies-banner{height:300px;}
	.case-studies-banner__content{max-width:100%;}
	.case-studies-banner__title{font-size:26px;line-height:1.3;}
	.case-studies-banner__description{font-size:14px;line-height:20px;}
}
@media (max-width:480px){
	.case-studies-banner{height:260px;}
	.case-studies-banner__title{font-size:22px;}
	.case-studies-banner__description{font-size:14px;}
}

/* ==========================================================================
   Case Studies — listing grid + card (shared with "Related Case Studies")
   ========================================================================== */
.case-studies-list-section{padding:60px 0 100px;}
.case-studies-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.case-study-card{
	display:block;
	border-radius:15px;
	overflow:hidden;
	border:1px solid var(--color-border);
	background:#fff;
	box-shadow:var(--shadow-sm);
	color:inherit;
	text-decoration:none;
}
.case-study-card-image{aspect-ratio:4/3;overflow:hidden;transform:translateZ(0);}
.case-study-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.case-study-card:hover .case-study-card-image img{transform:scale(1.08);}
.case-study-card-body{padding:20px;}
.case-study-card-tags{
	display:block;
	color:var(--color-primary);
	font-family:"Noto Sans";
	font-size:13px;
	font-weight:600;
	margin-bottom:8px;
}
.case-study-card-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.case-study-card-row h3{margin:0;color:#000;font-family:"Noto Sans";font-size:16px;font-weight:700;line-height:22px;}
.case-study-card-arrow{
	flex-shrink:0;
	width:32px;height:32px;
	border-radius:20%;
	background:var(--color-primary);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background var(--transition);
}
.case-study-card:hover .case-study-card-arrow{background:var(--color-accent);}

@media (max-width:991px){
	.case-studies-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
	.case-studies-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   Single case study detail page
   ========================================================================== */
.case-study-detail{padding:48px 0 100px;}

.case-study-top{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	align-items:start;
	margin-bottom:60px;
}
.case-study-tags{
	color:var(--color-primary);
	font-family:"Noto Sans";
	font-size:14px;
	font-weight:700;
	letter-spacing:.02em;
	margin-bottom:10px;
}
.case-study-title{
	color:#000;
	font-family:"Noto Sans";
	font-size:32px;
	font-weight:700;
	line-height:1.25;
	margin:0 0 20px;
}
.case-study-meta-row{margin-bottom:14px;}
.case-study-meta-label{
	display:block;
	color:var(--color-primary);
	font-family:"Noto Sans";
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.03em;
	margin-bottom:4px;
}
.case-study-meta-row p{margin:0;color:#3F4750;font-size:15px;line-height:22px;}
.case-study-top-image img{
	width:100%;
	aspect-ratio:16/10;
	object-fit:cover;
	border-radius:15px;
	display:block;
}

.case-study-grid{
	display:grid;
	grid-template-columns:1fr 384px;
	gap:100px;
	align-items:start;
}
.case-study-content{color:#3F4750;font-family:"Noto Sans";font-size:16px;line-height:24px;min-width:0;}
.case-study-content h2{
	color:#000;
	font-family:"Noto Sans";
	font-size:22px;
	font-weight:700;
	line-height:1.3;
	margin:32px 0 12px;
}
.case-study-content > *:first-child{margin-top:0;}
.case-study-content p{margin:0 0 15px;}
.case-study-content .numbered-heading{
	color:var(--color-primary);
	font-family:"Noto Sans";
	font-size:18px;
	font-weight:700;
	line-height:1.3;
	margin:28px 0 8px;
}
.case-study-content .content-bullet-list{
	background:#EAF1FB;
	border-radius:12px;
	padding:24px 28px;
	margin:16px 0 24px;
}

.case-study-sidebar{
	position:sticky;
	top:24px;
	background:#FAFAFA;
	border:1px solid #E8E8E8;
	border-radius:15px;
	padding:40px;
	box-shadow:var(--shadow-sm);
}
.case-study-sidebar h3{
	color:#000;
	font-family:"Noto Sans";
	font-size:22px;
	font-weight:600;
	line-height:1.2;
	margin:0 0 8px;
}
.case-study-sidebar-desc{color:#000;font-size:16px;line-height:24px;margin:0 0 30px;}
.case-study-sidebar-form .contact-form-field{margin-bottom:20px;}
.case-study-sidebar-form textarea{resize:vertical;}
.case-study-sidebar-form .contact-form-consent input{accent-color:var(--color-primary);}

.case-study-related{padding:60px 0 100px;}
.case-study-related h2{color:#000;font-family:"Noto Sans";font-size:28px;font-weight:700;margin:0 0 30px;}

@media (max-width:991px){
	.case-study-top{grid-template-columns:1fr;gap:30px;}
	.case-study-grid{grid-template-columns:1fr;}
	.case-study-sidebar{position:static;}
}
@media (max-width:767px){
	.case-study-title{font-size:26px;}
	.case-study-content{font-size:14px;line-height:20px;}
	.case-study-content .numbered-heading{font-size:16px;}
}
@media (max-width:480px){
	.case-study-title{font-size:22px;}
	.case-study-sidebar{padding:24px;}
}

/* ==========================================================================
   Sitewide sidebar CTA ("Experience the Power of Sorim AI") — Theme
   Settings > Common Sections > Insights Sidebar. Currently used on the
   single Insight page.
   ========================================================================== */
.sidebar-cta{
	border-radius:15px;
	overflow:hidden;
	background:linear-gradient(189deg,#CCE4BD -11.65%,#F7FFF3 37.88%,#D9ECCD 86.75%);
}
.sidebar-cta-image{width:100%;display:block;}
.sidebar-cta-body{padding:32px;}
.sidebar-cta-body h2{
	color:#000;
	font-family:"Noto Sans";
	font-size:22px;
	font-weight:700;
	line-height:28px;
	margin:0 0 10px;
}
.sidebar-cta-body h2 span{color:#000;}
.sidebar-cta-body p{color:#000;font-size:14px;line-height:20px;margin:0 0 20px;}
.sidebar-cta-checklist{list-style:none;margin:0 0 24px;padding:0;}
.sidebar-cta-checklist li{
	display:flex;
	align-items:center;
	gap:10px;
	color:#000;
	font-size:14px;
	font-weight:400;
	margin-bottom:5px;
}
.sidebar-cta-checklist li svg{flex-shrink:0;}

/* ==========================================================================
   Insights listing (home.php / archive.php / index.php)
   ========================================================================== */
.insights-hero{padding:64px 0 40px;}
.insights-hero .container{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:40px;
	flex-wrap:wrap;
}
.insights-hero-text{max-width:640px;}
.insights-hero-text h1{
	margin:8px 0 12px;
	width:374px;
	color:#000;
	font-family:"Noto Sans";
	font-size:36px;
	font-style:normal;
	font-weight:700;
	line-height:46px;
}
.insights-hero-text p{
	margin:0;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-style:normal;
	font-weight:400;
	line-height:24px;
	width:473px;
}
.insights-hero--compact .insights-hero-text h1{margin-top:0;}
.insights-hero-filter select{
	appearance:none;
	-webkit-appearance:none;
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235B6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
	border:1px solid var(--color-border);
	border-radius:8px;
	padding:12px 40px 12px 16px;
	min-width:340px;
	font-family:"Noto Sans";
	font-size:15px;
	color:var(--color-text);
}

.insights-list-section{padding:40px 0 100px;}

/* ==========================================================================
   Single Insight detail page
   ========================================================================== */
.insight-detail{padding:48px 0 100px;}
.insight-title{
	color:#000;
	font-family:"Noto Sans";
	font-size:32px;
	font-weight:700;
	line-height:1.25;
	margin:0 0 10px;
	max-width:900px;
}
.insight-meta{
	display:flex;
	align-items:center;
	gap:8px;
	color:#5E5E5E;
	font-family:"Noto Sans";
	font-size:15px;
	margin-bottom:28px;
}
.insight-image{margin-bottom:32px;}
.insight-image img{
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	border-radius:15px;
	display:block;
}

.insight-detail-grid{
	display:grid;
	grid-template-columns:1fr 384px;
	gap:60px;
	align-items:start;
}
.insight-content{color:#3F4750;font-family:"Noto Sans";font-size:16px;line-height:24px;min-width:0;}
.insight-content > *:first-child{margin-top:0;}
.insight-content h2{
	color:#000;
	font-family:"Noto Sans";
	font-size:22px;
	font-weight:700;
	line-height:1.3;
	margin:32px 0 12px;
}
.insight-content h3{
	color:var(--color-primary);
	font-family:"Noto Sans";
	font-size:18px;
	font-weight:700;
	line-height:1.3;
	margin:24px 0 10px;
}
.insight-content p{margin:0 0 15px;}
.insight-content strong{color:#000;}
.insight-content ul{list-style:none;margin:0 0 20px;padding:0;}
.insight-content ul li{
	position:relative;
	padding-left:20px;
	margin-bottom:10px;
	color:#000;
	line-height:24px;
}
.insight-content ul li::before{
	content:"";
	position:absolute;
	left:0;
	top:9px;
	width:7px;height:7px;
	border-radius:50%;
	background:var(--color-primary);
}
.insight-content ol{margin:0 0 20px;padding-left:20px;}
.insight-content ol li{margin-bottom:10px;color:#000;line-height:24px;}
.insight-content a{color:var(--color-primary);text-decoration:underline;}

.insight-sidebar{position:sticky;top:24px;}

@media (max-width:991px){
	.insight-detail-grid{grid-template-columns:1fr;}
	.insight-sidebar{position:static;}
}
@media (max-width:767px){
	/* .insights-hero .container is a flex row (heading beside the filter
	   dropdown) with no mobile stacking override, and the heading/
	   paragraph both carry fixed desktop widths (374px/473px) with only
	   font-size reset on the heading — same overflow pattern found
	   repeatedly elsewhere. */
	.insights-hero .container{flex-direction:column;align-items:flex-start;gap:16px;}
	.insights-hero-text{max-width:100%;}
	.insights-hero-text h1{width:auto;font-size:26px;}
	.insights-hero-text p{width:auto;max-width:100%;font-size:14px;line-height:20px;}
	.insight-title{font-size:26px;}
	.insight-content{font-size:14px;line-height:20px;}
}
/* ==========================================================================
   Careers page — banner
   ========================================================================== */
.careers-banner{padding:64px 0 60px;}
.careers-banner-head{
	display:flex;
	align-items:flex-end;
	gap:120px;
	flex-wrap:wrap;
	margin-bottom:50px;
}
.careers-banner-head h1{
	width:467px;
	color:#000;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:1.25;
	margin:0px 0 0;
}
.careers-banner-head p{max-width:504px;color:#5B6472;font-size:16px;line-height:22px;margin:0;}
.careers-banner-image img{
	width:100%;
	aspect-ratio:21/9;
	object-fit:cover;
	border-radius:15px;
	display:block;
}

/* ==========================================================================
   Careers page — jobs list + application form
   ========================================================================== */
.careers-jobs{padding:0px 0 100px;}
.careers-jobs-head{
	display:flex;
	align-items:flex-end;
	gap:205px;
	flex-wrap:wrap;
	margin-bottom:50px;
}
.careers-jobs-head h2{
	width:375px;
	color:#000;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:1.3;
	margin:0px 0 0;
}
.careers-jobs-head p{max-width:382px;color:#5B6472;font-size:16px;line-height:22px;margin:0;}

.careers-jobs-grid{
	display:grid;
	grid-template-columns:420px 1fr;
	gap:160px;
	align-items:start;
}

.careers-jobs-list{display:flex;flex-direction:column;gap:10px;}
.careers-job-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:15px;
	border-radius:10px;
	background:#F5F7FA;
	cursor:pointer;
	transition:background var(--transition);
}
.careers-job-row:hover{background:#EAF1FB;}
.careers-job-row-title{
	display:flex;
	align-items:center;
	gap:8px;
	color:#000;
	font-family:"Noto Sans";
	font-size:16px;
	font-weight:600;
}
.careers-job-row-meta{color:#5E5E5E;font-size:14px;margin-top:0px;line-height:normal;}
.careers-job-row-arrow{flex-shrink:0;position:relative;width:36px;height:36px;}
.careers-job-row-arrow-icon{position:absolute;inset:0;transition:opacity var(--transition);}
.careers-job-row-arrow-icon--active{opacity:0;}
.careers-job-row:hover .careers-job-row-arrow-icon--default{opacity:0;}
.careers-job-row:hover .careers-job-row-arrow-icon--active{opacity:1;}

.careers-form-card{
	background:#fff;
	border:1px solid #E8E8E8;
	border-radius:15px;
	padding:40px;
	box-shadow:var(--shadow-sm);
}
.careers-form-card h3{color:#000;font-family:"Noto Sans";font-size:22px;font-weight:700;margin:0 0 8px;}
.careers-form-desc{color:#5B6472;font-size:16px;line-height:24px;margin:0 0 30px;width:556px;}
.careers-form .contact-form-field{margin-bottom:20px;}
.careers-form textarea{resize:vertical;}
.careers-form .contact-form-consent input{accent-color:var(--color-primary);}
.careers-form select{
	width:100%;
	box-sizing:border-box;
	padding:12px 40px 12px 16px;
	border:1px solid var(--color-border);
	border-radius:8px;
	font-family:"Noto Sans";
	font-size:14px;
	color:#1A1A1A;
	appearance:none;
	-webkit-appearance:none;
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235B6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.careers-form input[type="date"]{
	width:100%;
	box-sizing:border-box;
	padding:12px 16px;
	border:1px solid var(--color-border);
	border-radius:8px;
	font-family:"Noto Sans";
	font-size:14px;
	color:#1A1A1A;
}
.careers-form input[type="file"]{
	width:100%;
	box-sizing:border-box;
	padding:9px 16px;
	border:1px solid var(--color-border);
	border-radius:8px;
	font-family:"Noto Sans";
	font-size:15px;
	color:#878889;
	background:#fff;
}
.wpcf7-list-item{display:inline-block;margin:0 0 0 0em;}

/* ==========================================================================
   Careers page — employee benefits
   ========================================================================== */
.careers-benefits{padding:100px 0 120px;background:#ffffff;}
.careers-main .careers-benefits{padding:100px 0 100px;background:#F8F9FC;}
.career-detail-main .careers-benefits{padding:100px 0 120px;background:#ffffff;}
.careers-benefits-head{text-align:center;max-width:600px;margin:0 auto 50px;}
.careers-benefits-head .eyebrow{display:inline-block;}
.careers-benefits-head h2{color:#000;font-family:"Noto Sans";font-size:36px;font-weight:700;margin:0px 0 12px;}
.careers-benefits-head p{color:#5B6472;font-size:16px;line-height:24px;margin:0 auto 30px;width:438px;text-align:center;}
.careers-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.careers-benefits-slider{display:none;}
.careers-benefit-card{
	background:#F1F3FC;
	border-radius:15px;
	padding:40px;
	width:380px;
	height:291px;
}
.careers-benefit-icon{
	border-radius:10px;
	background:#f1f3fc;
	display:flex;
	align-items:start;
	margin-bottom:30px;
}
.careers-benefit-card h3{color:#000;font-family:"Noto Sans";font-size:20px;font-weight:700;margin:0 0 8px;line-height:normal;}
.careers-benefit-card p{color:#000;font-size:16px;line-height:24px;margin:0;width:300px;}

/* ==========================================================================
   Single Career (job) detail page
   ========================================================================== */
.career-detail{padding:120px 0 80px;background:linear-gradient(180deg,rgba(238,238,238,0.50) 0%,rgba(255,255,255,0.50) 89.83%);}
.career-detail .container{max-width:800px;}
.career-title{
	margin:0px 0 0px;
	color:#000;
	font-family:"Noto Sans";
	font-size:36px;
	font-weight:700;
	line-height:46px;
}
.career-meta{color:#5F6368;font-family:"Noto Sans";font-size:16px;margin-bottom:30px;line-height:24px;}

.career-content{color:#3F4750;font-family:"Noto Sans";font-size:16px;line-height:24px;max-width:800px;}
.career-content > *:first-child{margin-top:0;}
.career-content h2{
	color:#000;
	font-family:"Noto Sans";
	font-size:25px;
	font-weight:500;
	line-height:normal;
	margin:0px 0 8px;
}
.career-content p{
	margin:0 0 0px;
	color:#000;
	font-size:16px;
	line-height:24px;
	font-style:normal;
	font-weight:400;
	font-family:"Noto Sans";
	width:800px;
	margin-bottom:10px;
}
.career-content .numbered-heading{
	color:#00408E;
	font-family:"Noto Sans";
	font-size:25px;
	font-style:normal;
	font-weight:500;
	line-height:normal;
	margin:30px 0 8px;
}
.career-content .content-bullet-list{list-style:none;margin:15px 0 15px;padding:0;}
.career-content .content-bullet-list li{position:relative;padding-left:26px;margin-bottom:0px;color:#010000;margin-top:15px;}
.career-content .content-bullet-list li::before{
	content:"";
	position:absolute;
	left:0;
	top:2px;
	width:15px;height:15px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M0.626431 6.58021C-0.173569 6.98021 -0.040236 7.74688 0.126431 8.08021C0.126431 8.08021 2.02646 11.9803 3.62646 13.5803C5.22646 15.1803 6.9598 13.9137 7.62646 13.0803C9.22647 11.0803 13.6265 1.58031 13.6265 1.58031C13.6265 1.58031 14.7529 -0.419783 13.6265 0.080255C12.5 0.580293 11.4598 0.580255 11.1265 1.08026C9.62646 4.58026 6.52646 11.5803 6.12646 11.5803C5.72646 11.5803 3.75293 8.0801 3.12646 7.08021C2.5 6.08032 1.9598 5.91354 1.62646 6.08021L0.626431 6.58021Z' fill='%2362AF33'/%3E%3C/svg%3E") no-repeat center/contain;
	border-radius:0;
}

.career-apply{background:#F8F8F8;padding:100px 0 100px;}
.career-apply .container{max-width:800px;}
.career-apply h2{color:#000;font-family:"Noto Sans";font-size:25px;font-weight:500;margin:0 0 4px;line-height:normal;}
.career-apply > .container > p{color:#000;font-size:16px;line-height:24px;margin:0 0 30px;font-weight:400;font-style:normal;}
.career-apply-card{max-width:800px;}

@media (max-width:991px){
	.careers-jobs-grid{grid-template-columns:1fr;}
	.careers-benefits-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
	.career-title{font-size:28px;}
	.career-apply-card{padding:24px;}
}
@media (max-width:767px){
	/* .careers-banner-head/.careers-jobs-head are flex rows with 120-
	   205px gaps (for a desktop heading-beside-paragraph layout) and no
	   mobile override at all — plus h1/h2 both carry fixed desktop
	   widths (467px/375px) with only font-size reset, not width. Both
	   combine into a guaranteed overflow on a 375-420px phone. */
	.careers-banner{padding:40px 0;}
	.careers-banner-head{flex-direction:column;gap:12px;align-items:flex-start;margin-bottom:30px;}
	.careers-banner-head h1{width:auto;font-size:24px;}
	.careers-banner-head p{max-width:100%;font-size:14px;line-height:20px;}
	/* Desktop uses a wide 21:9 banner strip; Figma's mobile design shows
	   a taller ~315:200 (~1.575:1) image with a 20px radius instead. */
	.careers-banner-image img{aspect-ratio:315/200;border-radius:20px;}

	.careers-jobs{padding:0 0 50px;}
	.careers-jobs-head{flex-direction:column;gap:12px;align-items:flex-start;margin-bottom:30px;}
	.careers-jobs-head h2{width:auto;font-size:22px;}
	.careers-jobs-head p{max-width:100%;font-size:14px;line-height:20px;}
	/* grid-template-columns already goes 1fr at <=991px, but the 160px
	   gap (meant for the row's column-gap on desktop) was left
	   unconditioned, opening a huge blank gap between the stacked job
	   list and the form card instead. .careers-form-desc has the same
	   fixed-width overflow bug (556px) as the headings above. */
	.careers-jobs-grid{gap:30px;}
	.careers-form-card{padding:24px;}
	.careers-form-desc{width:auto;max-width:100%;font-size:14px;line-height:20px;}

	.careers-benefits{padding:50px 0 60px;}
	.careers-main .careers-benefits{padding:50px 0;}
	.career-detail-main .careers-benefits{padding:50px 0 60px;}
	/* Figma mobile spec: 28px/32 heading (not 24px — this heading is
	   bigger than the site's usual 22px section heading), left-aligned,
	   and the cards are a horizontal peek-carousel with dot pagination,
	   not the desktop 3-up grid. */
	.careers-benefits-head{text-align:left;margin:0 auto 30px;}
	.careers-benefits-head h2{font-size:28px;line-height:32px;text-align:left;}
	.careers-benefits-head p{width:auto;max-width:100%;font-size:14px;line-height:20px;text-align:left;}
	.careers-benefits-grid{display:none;}
	.careers-benefits-slider{display:block;}
	.careers-benefits-track{
		display:flex;
		gap:20px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-padding-left:15px;
		padding:4px 15px 8px;
		-ms-overflow-style:none;
		scrollbar-width:none;
	}
	.careers-benefits-track::-webkit-scrollbar{display:none;}
	.careers-benefits-slider .careers-benefit-card{flex:0 0 315px;width:315px;height:auto;min-height:219px;padding:25px;}
	.careers-benefit-card h3{font-size:20px;line-height:27px;}
	.careers-benefit-card p{width:auto;font-size:14px;line-height:20px;}

	/* .career-content p{width:800px} on the single job-detail page is a
	   severe, previously-invisible overflow bug — 800px on a 375-420px
	   phone with zero mobile override anywhere. */
	.career-detail{padding:50px 0 40px;}
	.career-title{font-size:24px;line-height:1.3;}
	.career-content,
	.career-content p{width:auto;max-width:100%;font-size:14px;line-height:20px;}
	.career-content h2,
	.career-content .numbered-heading{font-size:20px;}
}

@media (max-width:480px){
	.insight-title{font-size:22px;}
}