/* =========================================================
TSU ONE — Pixel-perfect implementation
========================================================= */

@font-face {
	font-family: 'Le Monde Livre';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Std-Book-.otf') format('opentype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Livre';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Std-Book-.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Livre';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Std-Book-.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Livre';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Std-Demi-.otf') format('opentype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Livre';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Std-Demi-.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Livre';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Std-Demi-.otf') format('opentype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* italic kept separately so it only loads when explicitly requested */
@font-face {
	font-family: 'Le Monde Livre';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Std-.otf') format('opentype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Le Monde Livre Classic — alt heading family */
@font-face {
	font-family: 'Le Monde Livre Cla';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Cla-Std-Book-.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Livre Cla';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Cla-Std-Demi-.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Livre Cla';
	src: url('../fonts/fonnts.com-Le-Monde-Livre-Cla-Std-.otf') format('opentype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Le Monde Journal — alt heading family (editorial serif) */
@font-face {
	font-family: 'Le Monde Journal';
	src: url('../fonts/fonnts.com-Le-Monde-Journal-Std-Book-.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Journal';
	src: url('../fonts/fonnts.com-Le-Monde-Journal-Std-Demi-.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Journal';
	src: url('../fonts/fonnts.com-Le-Monde-Journal-Std-.otf') format('opentype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Le Monde Courrier — monospace variant */
@font-face {
	font-family: 'Le Monde Courrier';
	src: url('../fonts/fonnts.com-Le-Monde-Courrier-Std-Book-.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Courrier';
	src: url('../fonts/fonnts.com-Le-Monde-Courrier-Std-Demi-.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Le Monde Courrier';
	src: url('../fonts/fonnts.com-Le-Monde-Courrier-Std-.otf') format('opentype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Proxima Nova — body text family */
@font-face {
	font-family: 'Proxima Nova';
	src: url('../fonts/Proxima%20Nova%20Regular.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('../fonts/Proxima%20Nova%20Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('../fonts/Proxima%20Nova%20Regular.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('../fonts/Proxima%20Nova%20Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('../fonts/Proxima%20Nova%20Semibold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- VARIABLES ---------- */
:root {
	/* Colors */
	--navy: #123B7C;
	--navy-2: #07142e;
	--navy-3: #050d22;
	--partner-blue: #1e3a8a;
	--red: #CF2523;
	--red-hover: #CF2523;
	--blue: #123B7C;
	--blue-hover: #1742b0;
	--grey: #6b7280;
	--grey-2: #94a3b8;
	--grey-bg: #f3f4f6;
	--line: #e5e7eb;
	--text-dark: #000000;
	--text-light: #ffffff;

	/* Font families */
	--font-display: 'Le Monde Journal', 'Le Monde Livre Cla', Georgia, serif;
	--font-ui: 'Proxima Nova', sans-serif;
	--font-body: 'Proxima Nova', sans-serif;

	/* Common font-size scale — fluid using clamp(min, preferred, max) */
	--fs-hero: clamp(28px, 5.4vw, 64px);
	/* Hero h1 */
	--fs-h1: clamp(30px, 5vw, 64px);
	/* FAQ's, Work at TSU One */
	--fs-h2: clamp(26px, 4vw, 54px);
	/* Section titles, careers */
	--fs-h3: clamp(22px, 3vw, 38px);
	/* Footer brand, sub-headings */
	--fs-h4: clamp(18px, 1.6vw, 22px);
	/* Service / project titles */
	--fs-stat: clamp(28px, 3.6vw, 46px);
	/* Stat numbers */
	--fs-lead: clamp(16px, 1.2vw, 18px);
	/* Lead text */
	--fs-body: clamp(16px, 1vw, 16px);
	/* Default body */
	--fs-body-sm: clamp(14px, 0.9vw, 15px);
	/* Small body */
	--fs-tag: clamp(14px, 0.9vw, 14px);
	/* Section tags */
	--fs-btn: clamp(16px, 1.1vw, 18px);
	/* Buttons */
	--fs-nav: clamp(13px, 1vw, 16px);
	/* Nav links */

	/* Common font weights */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Spacing scale */
	--space-section-y: clamp(60px, 6vw, 110px);
	/* section vertical padding */
	--space-block: clamp(20px, 3vw, 40px);
	--space-gap: clamp(16px, 2vw, 28px);
	--space-card: clamp(16px, 2vw, 24px);

	/* Borders & radii */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-pill: 60px;

	/* Container width */
	--container-max: 1240px;

	--easing: cubic-bezier(.2, .7, .2, 1);
}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
	max-width: 1580px;
}


/* ---------- BASE ---------- */
* {
	box-sizing: border-box;
}

html,
body {
	overflow-x: hidden;
	max-width: 100%;
	width: 100%;
}

html {
	scroll-behavior: smooth;
}

select{
	appearance:none;
	-webkit-appearance:none!important;
	-moz-appearance:none!important;

	padding:12px 40px 12px 12px!important;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1.5 5l6 6 6-6'/%3E%3C/svg%3E")!important;
	background-repeat:no-repeat!important;
	background-position:right 12px center!important;
	background-size:12px!important;

	cursor:pointer;
}

body {
	font-family: var(--font-body);
	color: #4b5563;
	line-height: 1.65;
	font-size: var(--fs-body);
	background: #fff;
	position: relative;
}

/* Prevent any element from causing horizontal overflow */
img,
video,
svg {
	max-width: 100%;
	height: auto;
}

/* Break long words that could overflow on narrow screens */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

section,
header,
footer {
	max-width: 100%;
	overflow-x: clip;
}

/* Safety: any column-based child stays inside the viewport */
.row>[class*="col-"] {
	max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-style: normal;
	color: var(--navy);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.h-ui {
	font-family: var(--font-ui) !important;
}

a {
	color:var(--red);
	text-decoration: none;
	transition: all .3s var(--easing);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

p {
	margin: 0;
}

dl,
dt,
dd {
	margin: 0;
	padding: 0;
	font-weight: inherit;
}

.navbar .btn-red:hover,
.navbar .btn-red:active {
	background: #fff;
	color: var(--red);
}



/* Screen-reader-only — visible to assistive tech, hidden visually (WCAG) */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Skip-to-content link — hidden until keyboard-focused (WCAG 2.4.1) */
.skip-link,
.visually-hidden-focusable {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: #CF2523;
	color: #fff;
	padding: 12px 18px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 6px 0;
}

.skip-link:focus,
.skip-link:focus-visible,
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
	left: 0;
	outline: 3px solid #ffd400;
	outline-offset: 2px;
}

/* Keyboard focus visibility — global fallback (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 2px;
}

/* Services carousel — reset <ul> defaults since the track is a list */
ul.services-track {
	list-style: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Footer socials — list reset (semantic <ul> with inline appearance) */
.footer-socials-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-flex;
	gap: 12px;
	vertical-align: middle;
}

.footer-socials-list li {
	display: inline-flex;
}

/* Honor prefers-reduced-motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}



/* ---------- BUTTONS ---------- */
.btn {
	padding: clamp(12px, 1.2vw, 15px) clamp(15px, 2.2vw, 45px);
	font-weight: var(--fw-medium);
	border-radius: var(--radius-md);
	font-size: var(--fs-btn);
	transition: all .3s var(--easing);
	border: none;
	display: inline-block;
	line-height: 1.4;
	font-family: var(--font-body);
}

.btn-red {
	background: var(--red);
	color: #fff;
}

.btn:active {
	background-color: var(--blue)!important;
}

.btn-red:hover {
	background: var(--blue);
	color: #fff;
	transform: translateY(-2px);
}

.btn-blue {
	background: var(--blue);
	color: #fff;
}

.btn-blue:hover {

	background: var(--red-hover);
	color: #fff;
	transform: translateY(-2px);
}

.btn-nav {
	padding: 9px 20px;
	font-size: 18px;
}

.hero-buttons .btn {
	margin-right: 8px;
	margin-bottom: 8px;
}

/* ---------- COMMON ---------- */
.section-tag {
	display: inline-block;
	border-radius:10px;
	color: var(--red);
	font-size: var(--fs-tag);
	font-weight: var(--fw-bold);
	padding: 2px 10px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin-bottom: 10px;
	border: 1px solid #CF2523;
	font-family: var(--font-body);
}

.section-title {
	font-family: var(--font-display);
	font-style: normal;
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--navy);
	margin-bottom: 18px;
	letter-spacing: -0.3px;
	line-height: 1.1;
}

.section-sub {
	font-size: 18px;
	color: #000;
	max-width: 980px;
	line-height: 1.5;
	margin: 0 auto;
}

.section-sub-left {
	font-size: 14.5px;
	color: var(--grey);
	max-width: 900px;
	line-height: 1.5;
}

.lead-text {
	font-size: var(--fs-body);
	color: var(--text-dark);
	font-weight: 500;
	margin-bottom: 14px;
	line-height: 1.5;
}

.lead-text{
	font-weight:700;
}

.muted-text {
	color: var(--text-dark);
	font-size: var(--fs-body);
	line-height: 1.5;
	font-weight: var(--fw-medium);
}

/* =========================================================
HERO + NAVBAR (matched to screenshot)
========================================================= */
.hero-wrapper {
	position: relative;
	overflow: hidden;
}

.hero-wrapper--header-only {
	overflow: visible;
}

.site-header {
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: top .35s cubic-bezier(.22, 1, .36, 1);
	will-change: top;
}

.site-header.scrolled {
	position: fixed;
	top: 0px;
}


.custom-navbar {
	background: rgba(0, 0, 0, 1);
	backdrop-filter: blur(10px);
/* 	border-radius: 20px; */
	padding: 8px 10px 8px 18px;
	position: relative;
	overflow: hidden;


}



.custom-navbar::before{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .30);
	backdrop-filter: blur(10px);
	pointer-events: none;
}

.hero-section{
	position: relative;
	overflow: hidden;
}

.hero-bg,
.hero-video{
	width:100%;
	height:100%;
}

.hero-video{
	object-fit: cover;
}

.careers-desc a{
	color:#fff;
}

/* Subtle right-edge inner glow */
.custom-navbar::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 30%;
	background: radial-gradient(ellipse at right center,
		rgba(60, 100, 180, 0.18) 0%,
		rgba(60, 100, 180, 0.08) 40%,
		transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.custom-navbar>* {
	position: relative;
	z-index: 1;
}

.navbar-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff !important;
	margin-right: 28px;
	padding: 0;
}


.logo-mark img {
	    max-height: 85px;
    max-width: 85px;
	background-color: #fff;
	border-radius: 50%;
    margin: 5px 0;
}

.brand-text {
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.2px;
}

.navbar-nav .nav-link {
	color: #e8eaf2 !important;
	font-weight: 400;
	font-size: 18px;
	padding: 6px 30px !important;
	transition: all .25s ease;
	font-family: var(--font-body);
	border:2px solid rgba(0,0,0,0);
	
}

.navbar-nav .nav-link:hover {
	color: #fff !important;
/* 	background: var(--red) !important; */
	border-radius:5px; 
	font-weight:500;
}


.navbar-nav .nav-link.active {
		color: #fff !important;
	border-radius: 10px;
	    border: 2px solid #fff; 
	font-weight:500;
}

.navbar-nav .nav-link.active:hover {
	color: #fff !important;
	border-radius: 10px;
	    border: 2px solid #fff; 
	font-weight:500;
}

.btn-nav {
	padding: 11px 22px;
	font-size: 18px;
	border-radius: 6px;
	font-weight: 500;
	font-family: var(--font-body);
	margin-right: 10px;
	margin-left:30px;
}

.navbar-toggler {
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 4px 9px;
	box-shadow: none !important;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- HERO SECTION ---------- */
.hero-section {
	position: relative;
	height: 90vh;
	display: flex;
	align-items: center;
	color: #fff;
	padding: 0px 0 0px;
	overflow: hidden;
	background: #0a1426;
	margin-top:100px;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('../images/banner.jpg');
	background-size: cover;
	background-position: center right;
	z-index: 0;
	overflow: hidden;
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hero-video {
		display: none;
	}
}

/* Left-side darkening only — keeps excavator visible on right */
.hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.55) 30%,
			rgba(0, 0, 0, 0.15) 55%,
			rgba(0, 0, 0, 0) 75%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, transparent 40%);
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
}

/* Red tag — solid white background with red text in the screenshot */
.hero-tag {
	display: inline-block;
	background: #fff;
	color: var(--red);
	font-size: var(--fs-tag);
	font-weight: var(--fw-bold);
	padding: 5px 15px;
	letter-spacing: 1.4px;
	margin-bottom: 22px;
	border-radius:10px;
	text-transform: uppercase;
	font-family: var(--font-body);
}

/* SERIF hero title — Le Monde Livre */
.hero-title {
	font-family: var(--font-display);
	font-style: normal !important;
	font-size: var(--fs-hero);
	color: #fff;
	font-weight: var(--fw-bold);
	line-height: 1.1;
	margin-bottom: 26px;
}

.hero-description {
	font-size: var(--fs-lead);
	line-height: 1.5;
	max-width: 680px;
	margin-bottom: 32px;
	font-family: var(--font-body);
	color: #ffffff;
}

/* =========================================================
PARTNERS STRIP — using original logo images
========================================================= */
.partners-section {
	background: #1e3a8a;
	padding: 28px 0;
}

.partners-marquee {
	overflow: hidden;
	width: 100%;
	max-width: 1580px;
	margin: 0 auto;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners-wrap {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	width: max-content;
	animation: partners-scroll 50s linear infinite;
}

.partners-marquee:hover .partners-wrap {
	animation-play-state: paused;
}

@keyframes partners-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.partners-wrap { animation: none; }
}

.partner-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	flex: 0 0 auto;
	margin-right: 60px;
}

.partner-logo-img {
	max-height: 50px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.95;
	transition: opacity .4s var(--easing);
}

.partner-logo-img:hover {
	opacity: 1;
}

/* =========================================================
ABOUT SECTION
========================================================= */
.about-section {
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.about-section.about{
	border-bottom:0;
	padding: var(--space-section-y) 0;
}

.about-section.safety{
	background:var(--grey-bg)
}



.about-section .section-tag {
	margin-bottom: 18px;
}

.about-section .section-title {
	font-size: var(--fs-h2);
	margin-bottom: 15px;
	letter-spacing: -0.5px;
}

.about-image {
	overflow: hidden;
}

.about-image img,
.faq-image-wrap img{
	width: 100%;
	min-height:700px;
	height:700px;
	object-fit: cover;
	object-position: center;
	transition: transform .6s var(--easing);
}




/* ---------- STATS ---------- */
.stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 42px 0;


}

.stats-sec .container {
	max-width: 1580px;
}

.stat-item {
	text-align: center;
	padding: 0 30px;
	border-right: 1px solid var(--line);
}

.stat-item:first-child {
	padding-left: 0;
}

.stat-item:last-child {
	border-right: none;
	padding-right: 0;
}

.stat-number {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	color: var(--red);
	margin-bottom: 10px;
	line-height: 1;
	letter-spacing: -0.8px;
}

.stat-label {
	font-size: 18px;
	color: #000;
	line-height: 1.5;
	margin-top: 15px;
	font-weight: 600;
}

/* =========================================================
SERVICES SECTION
========================================================= */
.services-section {
	padding: 90px 0;
	background: var(--grey-bg);
}


.services-carousel-wrap {
	position: relative;
	padding: 0 60px;
}

.services-track {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 6px 2px;
	scrollbar-width: none;
	cursor: grab;
}

.services-track::-webkit-scrollbar {
	display: none;
}

.services-track.dragging {
	cursor: grabbing;
}

.service-card {
	position: relative;
	flex: 0 0 calc(25% - 12px);
	height: 380px;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: all .4s var(--easing);

}

.service-image {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.service-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--easing);
}

.service-card:hover .service-image img {
	transform: scale(1.06);
}

/* Default dark gradient — every card shows title only at bottom */
.service-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.30) 55%, rgba(0, 0, 0, 0.05) 100%);
	z-index: 2;
	transition: background .5s var(--easing), opacity .5s var(--easing);
}

/* Hover / active state — BLUE overlay covers the card */
.service-card:hover .service-image::after,
.service-card.active .service-image::after {
	background: linear-gradient(180deg, rgba(18, 59, 124, 0.85) 0%, rgba(18, 59, 124, 0.95) 100%);
}

.service-corner-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	z-index: 5;
	cursor: pointer;
	transition: all .3s var(--easing);
	overflow: hidden;
}

/* Hide the Bootstrap icon — replaced with custom corner-bracket SVG */
.service-corner-btn i,
.service-corner-btn svg {
	display: none;
}

/* Custom top-right corner bracket icon (───┐) */
.service-corner-btn::before {
	content: "";
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M3 3 L13 3 L13 13'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform .35s var(--easing);
}

.service-corner-btn:hover {
	background: #fff;
}

.service-corner-btn:hover::before {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23CF2523' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M3 3 L13 3 L13 13'/%3E%3C/svg%3E");
	transform: scale(1.1);
}

.service-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 22px;
	z-index: 3;
	color: #fff;
	transition: padding 1.2s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: padding;
}

/* ICON */
.service-icon {
	display: inline-block;
	font-size: 34px;
	color: #fff;
	margin-bottom: 0;
	line-height: 1;
	opacity: 0;
	transform: translate3d(0, 16px, 0) scale(0.88);
	transform-origin: left bottom;

	transition:
		opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
		margin-bottom 0.9s cubic-bezier(0.22, 1, 0.36, 1);

	will-change: transform, opacity;
}

.service-card:hover .service-icon,
.service-card.active .service-icon {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	margin-bottom: 14px;
}

/* TITLE */
.service-title {
	color: #fff;
	font-family: var(--font-display);
	font-style: normal;
	font-size: 22px;
	font-weight: 700;
	margin-top: 15px;
	letter-spacing: 0.2px;
	line-height: 1.2;
	position: relative;
	display: inline-block;

	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* underline animation */
.service-title::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	background: var(--red);
	opacity: 0;
	margin-top: 10px;
	transform-origin: left;

	transition:
		width 1s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.6s ease;
}

.service-card:hover .service-title::after,
.service-card.active .service-title::after {
	width: 100%;
	opacity: 1;
}

/* DESCRIPTION */
.service-desc {
	display: block;
	color: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	line-height: 1.65;
	margin: 0;

	opacity: 0;
	transform: translate3d(0, 14px, 0);
	max-height: 0;
	overflow: hidden;

	transition:
		opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
		max-height 1.2s cubic-bezier(0.22, 1, 0.36, 1),
		margin-top 0.9s cubic-bezier(0.22, 1, 0.36, 1);

	will-change: opacity, transform;
}

.service-card:hover .service-desc,
.service-card.active .service-desc {
	max-height: 220px;
	opacity: 1;
	margin-top: 12px;
	transform: translate3d(0, 0, 0);
}

/* Arrows */
.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid #cbd5e1;
	color: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	z-index: 10;
	cursor: pointer;
	transition: all .3s var(--easing);
}

.carousel-arrow:hover {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
}

.arrow-prev {
	left: 0;
}

.arrow-next {
	right: 0;
}

/* =========================================================
LEADERSHIP SLIDER — image-top card carousel
========================================================= */
.leadership-section {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.leadership-slider-wrap {
	position: relative;
	padding: 0 60px;
}

.leadership-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 6px 2px 10px;
	scrollbar-width: none;
	cursor: grab;
	list-style: none;
	margin: 0;
}

.leadership-track::-webkit-scrollbar {
	display: none;
}

.leadership-track.dragging {
	cursor: grabbing;
}

.leader-card {
	position: relative;
	flex: 0 0 calc(33.333% - 16px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .4s var(--easing),
		box-shadow .4s var(--easing),
		border-color .4s var(--easing);
}

.leader-card:hover {
	transform: translateY(-4px);
}

.leader-image {
	position: relative;
	aspect-ratio: 6 / 5;
	overflow: hidden;
	background: var(--grey-bg);
}

.leader-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--easing);
}



.leader-card:hover .leader-image::after {
	opacity: 1;
}

.leader-socials {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translate(-50%, 12px);
	display: flex;
	gap: 10px;
	opacity: 0;
	transition: opacity .35s var(--easing), transform .35s var(--easing);
	z-index: 2;
}

.leader-card:hover .leader-socials {
	opacity: 1;
	transform: translate(-50%, 0);
}

.leader-socials a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	color: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	transition: background .25s var(--easing), color .25s var(--easing);
}

.leader-socials a:hover {
	background: var(--red);
	color: #fff;
}

.leader-info {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.leader-role-tag {
	color: var(--red);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 1.4px;
	margin-bottom: 8px;
	line-height: 1;
}

.leader-name {
	color: var(--navy);
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	margin: 0 0 12px;
	position: relative;
	padding-bottom: 12px;
}

.leader-name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 2px;
	background: var(--red);
	transition: width .4s var(--easing);
}

.leader-card:hover .leader-name::after {
	width: 60px;
}

.leader-bio {
	color: var(--text-dark);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 1199.98px) {
	.leader-card {
		flex: 0 0 calc(50% - 12px);
	}
}

@media (max-width: 991.98px) {
	.leadership-slider-wrap {
		padding: 0 50px;
	}

	.leader-name {
		font-size: 20px;
	}
}

@media (max-width: 767.98px) {
	.leadership-slider-wrap {
		padding: 0 40px;
	}
	.hero-section,
	.page-banner{
		    margin-top: 80px;
	}
	.footer-socials-list{
		    position: relative;
            left: -15px;

	}

	.leadership-track {
		gap: 16px;
	}

	.leader-card {
		flex: 0 0 calc(85% - 8px);
	}

	.leader-info {
		padding: 18px 20px 22px;
	}

	.leader-name {
		font-size: 19px;
	}

	.leader-bio {
		font-size: 14px;
	}
}

@media (max-width: 575.98px) {
	.leadership-slider-wrap {
		padding: 0px;
	}

	.leader-card {
		flex: 0 0 calc(100% - 8px);
		border-radius: 12px;
	}

	.leader-info {
		padding: 16px 18px 20px;
	}
}

/* =========================================================
PROJECTS SECTION
========================================================= */
.projects-section {
	padding: 100px 0 110px;
	background: var(--grey-bg);
}

.projects-section .section-tag {
	margin-bottom: 18px;
}

.projects-section .section-title {
	font-size: var(--fs-h2);
	margin-bottom: 22px;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.projects-section .section-sub-left {
	font-size: var(--fs-lead);
	color: var(--text-dark);
	line-height: 1.75;
	width: 100%;
	max-width: 100%;
	margin-bottom: 0;
}

/* ---------- PROJECT CARD ---------- */
.project-card {
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: transform .45s cubic-bezier(.22, 1, .36, 1),
		box-shadow .45s cubic-bezier(.22, 1, .36, 1);
	cursor: pointer;
	height: 100%;

}

.project-card:hover {
	transform: translateY(-8px);
}

.project-image {
	height: 350px;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
	position: relative;
}

.project-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.project-card:hover .project-image img {
	transform: scale(1.08);
}

/* Subtle dark gradient on image for legibility */
.project-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 65%, rgba(0, 0, 0, 0.12) 100%);
	opacity: 0;
	transition: opacity .4s ease;
}

.project-card:hover .project-image::after {
	opacity: 1;
}

.project-info {
	background: #fff;
	padding: 22px 24px 24px;
	border-radius: 0 0 8px 8px;
	transition: background .35s var(--easing);
}

.projects-section.community .project-info,
.projects-section.home .project-info{
	background: var(--grey-bg);
}


.project-card:hover .project-info {
	background: #ecedf0;
}

.project-cat {
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--red);
	font-weight: 600;
	letter-spacing: 0.3px;
	display: block;
	margin-bottom: 6px;
}

.project-title {
	font-family: var(--font-body);
	font-style: normal;
	font-size: 20px;
	color: #000;
	font-weight: 700;
	margin-bottom: 16px;
	line-height: 1.35;
	transition: color .3s var(--easing);
}


.project-loc {
	font-family: var(--font-body);
	font-size: 16px;
	color: #000;
	font-weight: 400;

	margin: 0;
}

/* =========================================================
TESTIMONIALS SECTION
========================================================= */
.testimonials-section {
	padding: var(--space-section-y) 0;
	background: #f3f4f6;
	position: relative;
}

.testimonials-section .section-sub {
	margin-top: 6px;
}

.testimonial-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 36px 28px 28px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform .4s var(--easing),
		box-shadow .4s var(--easing),
		border-color .4s var(--easing);
	overflow: hidden;
}



.testimonial-card:hover {
	transform: translateY(-4px);
}

.testimonial-card:hover::before {
	transform: scaleX(1);
}

.testimonial-quote-mark {
	position: absolute;
	top: -10px;
	right: 22px;
	font-family: var(--font-display);
	font-size: 96px;
	line-height: 1;
	color: rgba(207, 37, 35, 0.10);
	pointer-events: none;
	transition: color .35s var(--easing);
	font-weight: 700;
}

.testimonial-card:hover .testimonial-quote-mark {
	color: rgba(207, 37, 35, 0.18);
}

.testimonial-stars {
	display: flex;
	gap: 4px;
	color: #f5b301;
	font-size: 14px;
	margin-bottom: 16px;
}

.testimonial-text {
	color: var(--text-dark);
	font-size: 16px;
	line-height: 1.5;
	margin-bottom:15px;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	flex: 1 1 auto;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.testimonial-avatar {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #1e3a8a;
	color: #fff;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 16px;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.testimonial-meta {
	min-width: 0;
}

.testimonial-name {
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 16px;
	line-height: 1.25;
	margin-bottom: 2px;
}

.testimonial-role {
	color: var(--grey);
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
	font-family: var(--font-body);
}

.testimonial-card--featured {
	background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
	border-color: rgba(18, 59, 124, 0.12);
	box-shadow: 0 10px 30px rgba(18, 59, 124, 0.06);
}

.testimonial-card--featured .testimonial-quote-mark {
	color: rgba(207, 37, 35, 0.16);
}

@media (max-width: 991.98px) {
	.testimonial-card {
		padding: 30px 22px 22px;
	}

	.testimonial-quote-mark {
		font-size: 80px;
		right: 18px;
	}
	.service-image{
		position: relative;
	}
}

@media (max-width: 767.98px) {
	.testimonial-card {
		padding: 28px 20px 20px;
	}

	.testimonial-text {
		font-size: 14.5px;
	}

	.testimonial-quote-mark {
		font-size: 70px;
		top: -6px;
	}

	.testimonial-stars {
		font-size: 13px;
	}
}

@media (max-width: 575.98px) {
	.testimonial-card {
		padding: 24px 18px 18px;
	}

	.testimonial-avatar {
		flex: 0 0 42px;
		width: 42px;
		height: 42px;
		font-size: 14px;
	}

	.testimonial-name {
		font-size: 15px;
	}

	.testimonial-role {
		font-size: 12.5px;
	}
}

/* =========================================================
FAQ SECTION
========================================================= */


.faq-image-wrap {
	position: sticky;
	top: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
	align-self: flex-start;
}

.faq-image-wrap img {
	width: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 2560px) and (max-width: 2999px){

	/* 	.faq-image-wrap img {
	width: 90%;
	height: 75vh;
} */
	/* 	.about-image img{
	position: relative;
	right: -10%;
	width: 90%;
} */
}

.faq-section .section-tag {
	margin-bottom: 22px;
}

.faq-section .section-title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--navy);
	margin-bottom: 22px;
	letter-spacing: -0.5px;
	line-height: 1;
}

.faq-intro {
	color: #000;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 30px;
	max-width: 580px;
}

.faq-intro strong {
	color: #000;
	font-weight: 700;
}

/* ---------- ACCORDION BORDERED GROUP ---------- */
.custom-accordion {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(12, 31, 71, 0.04);
}

.custom-accordion .accordion-item {
	background: #ffffff;
	border: none;
	border-radius: 0 !important;
	margin-bottom: 0;
	overflow: hidden;
	box-shadow: none;
}

.custom-accordion .accordion-item+.accordion-item {
	border-top: 1px solid #e5e7eb;
}

.custom-accordion .accordion-header {
	margin: 0;
}

.custom-accordion .accordion-button {
	background: #ffffff;
	color: #000;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 20px;
	padding: 20px 24px 20px 24px;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: flex;
	align-items: center;
	gap: 18px;
	transition: color .3s var(--easing);
}

.custom-accordion .accordion-button:focus {
	box-shadow: none;
	border-color: transparent;
}

.custom-accordion .accordion-button:not(.collapsed) {
	color: var(--navy);
	background: #ffffff;
}

/* Default chevron arrow on the RIGHT (Bootstrap default) — hide it */
.custom-accordion .accordion-button::after {
	display: none;
}

/* Custom chevron icon — placed on the LEFT via ::before */
.custom-accordion .accordion-button::before {
	content: "\F286";
	/* chevron-up (collapsed state shows up arrow per design) */
	font-family: "bootstrap-icons";
	font-size: 16px;
	color: var(--red);
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform .35s var(--easing);
}

.custom-accordion .accordion-button:not(.collapsed)::before {
	content: "\F282";
	/* chevron-down when open */
	transform: rotate(0deg);
}

.custom-accordion .accordion-button:hover {
	color: var(--red);
}

.custom-accordion .accordion-body {
	padding: 0 24px 22px 60px;
	color: #000;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	background: #ffffff;
}

.custom-accordion .accordion-body strong {
	color: var(--navy);
	font-weight: 600;
}

/* =========================================================
CAREERS SECTION
— full-width BACKGROUND IMAGE with navy gradient overlay on top
========================================================= */
.careers-section {
	position: relative;
	padding: 110px 0;
	color: #fff;
	overflow: hidden;
	min-height: 600px;
	background-image: url('../images/careers.png');
	background-size:  auto 100%;
	background-position: center right;
	background-repeat: no-repeat;
	background-color: var(--navy);
	display: flex;
	align-items: center;
}

.careers-section .btn-red:hover {
	background-color: #fff;
	color: #000;
}

/* Navy gradient overlay sits ON TOP of the background image
— solid navy on the left, fading to transparent on the right */
.careers-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to right,
		rgba(18, 59, 124, 1) 0%,
		rgba(18, 59, 124, 1) 50%,
		rgba(18, 59, 124, 0.98) 58%,
		rgba(18, 59, 124, 0.70) 66%,
		rgba(18, 59, 124, 0.30) 74%,
		rgba(18, 59, 124, 0.05) 82%,
		rgba(18, 59, 124, 0) 90%);
}




@media (max-width: 991.98px) {
	.careers-pattern {
		background-position: left center;
	}
}

.careers-section .container {
	position: relative;
	z-index: 3;
}

.careers-tag {
	background: #ffffff;
	color: var(--red);
	border-color: #ffffff;
	font-weight: 700;
	border: 1px solid var(--red);
}

.careers-title {
	color: #fff;
	font-size: var(--fs-h1);
	font-weight: var(--fw-bold);
	margin-bottom: 22px;
	letter-spacing: -0.5px;
	font-family: var(--font-display);
	font-style: normal;
	line-height: 1.05;
}

.careers-desc {
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.75;
	margin-bottom: 30px;
	max-width: 600px;

}

/* Hide the right-side <img> element — background image covers the section now */
.careers-section .careers-image {
	display: none;
}

/* =========================================================
FOOTER
========================================================= */
.site-footer {
	background: #000000;
	color: #ffffff;
	padding: 80px 0 24px;
}

/* ---------- BRAND COLUMN ---------- */
.footer-brand {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}

.footer-brand .logo-mark {
	width: 78px;
	height: 78px;
}

.footer-brand .logo-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: #fff;
	border-radius: 50%;
	padding: 2px;
}

.footer-brand .brand-text {
	color: #fff;
	font-family: var(--font-display);
	font-style: normal;
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1;
}

.footer-about {
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 28px;
	max-width: 420px;
	font-weight: 400;
}

.footer-cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.footer-cta .btn {
	padding: 13px 28px;
	font-size: 16px;
	border-radius: 10px;
	margin: 0;
	font-weight: 500;
}

/* ---------- COLUMN HEADINGS ---------- */
.footer-heading {
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 22px;
	letter-spacing: 0.2px;
}

/* ---------- LINK LISTS ---------- */
.footer-list li {
	margin-bottom: 12px;
}

.footer-list a {
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	transition: color .25s var(--easing);
}

.footer-list a:hover {
	color: var(--red);
	padding-left: 0;
}

/* ---------- CONTACT BLOCK ---------- */
.contact-block {
	margin-bottom: 18px;
}

.contact-label {
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 8px;
}

.contact-text {
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 15px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.contact-text.service-title a,
.contact-text a {
	color: #fff;
}

.contact-text i {
	color: #ffffff;
	font-size: 14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 0;
	margin-left:-7px; 
	flex-shrink: 0;
	
}

.contact-link {
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	border-bottom: 1px solid #ffffff;
	padding-bottom: 2px;
	display: inline-block;
}

.contact-link:hover {
	color: var(--red);
	border-color: var(--red);
}

/* ---------- DIVIDER ---------- */
.footer-divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: 50px 0 24px;
	opacity: 1;
}

/* ---------- BOTTOM ROW ---------- */
.footer-bottom {
	font-size: 14px;
}

.copyright {
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 14px;
	margin: 0;
	line-height: 1.7;
}

.copyright a {
	color: #ffffff;
	transition: color .25s var(--easing);
}

.copyright a:hover {
	color: var(--red);
}

.copyright strong {
	font-weight: 700;
	color: #ffffff;
}

.follow-text {
	color: #ffffff;
	margin-right: 14px;
	font-size: 14px;
	font-weight: 500;
}

.social-link {
	color: #ffffff;
	font-size: 14px;
	margin-left: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color .25s var(--easing);
}

.social-link:hover {
	color: var(--red);
}

.social-link i {
	margin-right: 0;
	width: 22px;
	height: 22px;
	background: #ffffff;
	color: #000000;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	transition: all .25s var(--easing);
}

.social-link:hover i {
	background: var(--red);
	color: #ffffff;
}

/* =========================================================
RESPONSIVE
========================================================= */
/* =========================================================
COMPREHENSIVE RESPONSIVE — all standard breakpoints
Most typography auto-scales via clamp() in :root variables.
These media queries handle LAYOUT changes only.
========================================================= */

/* ---------- LARGE DESKTOP (≤1399px) ---------- */
@media (max-width: 1399.98px) {


	.service-card {
		flex: 0 0 calc(25% - 12px);
	}


	.careers-image {
		height: 420px;
	}
}

/* ---------- DESKTOP (≤1199px) ---------- */
@media (max-width: 1199.98px) {
	.container {
		max-width: 100%;
		padding-left: 24px;
		padding-right: 24px;
	}

	.stat-item {
		padding: 0 18px;
	}

	.service-card {
		flex: 0 0 calc(33.333% - 11px);
	}

	/* 

	.faq-image-wrap {
	height: 550px;
	min-height: 0;
} */
	/* 
	.faq-image-wrap img {
	min-height: 0;
} */

	.careers-section {
		min-height: 440px;
	}
}

/* ---------- TABLET LANDSCAPE (≤991px) ---------- */
@media (max-width: 991.98px) {

	/* Navbar collapse */
	.custom-navbar {
		
		padding: 12px 18px;
	}

	.navbar-collapse {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.navbar-nav {
		width: 100%;
	}

	.navbar-nav .nav-link {
		padding: 10px 8px !important;
		font-size: 15px;
	}

	.custom-navbar>a.btn-nav,
	.custom-navbar .btn-nav {
		margin-top: 10px;
		display: inline-block;
	}

	/* Hero — overlay covers the FULL banner so text stays readable */
	.hero-section {
		min-height: 600px;
		padding: 140px 0 70px;
	}

	.hero-content {
		padding: 0 8px;
	}

	.hero-overlay {
		background:
			linear-gradient(90deg,
				rgba(0, 0, 0, 0.85) 0%,
				rgba(0, 0, 0, 0.55) 30%,
				rgba(0, 0, 0, 0.15) 55%,
				rgba(0, 0, 0, 0) 75%),
			linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, transparent 40%);
	}

	/* About — stack columns */
	.about-section .row {
		gap: 40px 0;
	}

	.about-image {
		height: auto;
		min-height: 360px;
	}



	/* Stats — 3 columns */
	.stats-row {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px 0;
		padding: 32px 0;
	}

	.stat-item {
		padding: 0 16px;
		border-right: 1px solid var(--line);
	}

	.stat-item:nth-child(3n) {
		border-right: none;
	}

	.stat-item:nth-child(3n+1) {
		padding-left: 0;
	}

	.stat-item:nth-child(n+4) {
		margin-top: 20px;
	}

	/* Services — 2 cards visible */
	.service-card {
		flex: 0 0 calc(50% - 8px);
		height: 360px;
	}

	.services-carousel-wrap {
		padding: 0 50px;
	}

	/* FAQ — stack image on top */
	.faq-section .row {
		flex-direction: column;
	}

	.faq-image-wrap {
		position: relative;
	}

	/* 	.faq-image-wrap img {
	min-height: 0;
} */


	/* Careers — solid navy, hide background-image side; or shorten */
	.careers-section {
		min-height: auto;
		padding: 50px 0;
	}
	.project-image{
		height:250px;
	}
	.project-info{
		padding: 15px;
	}

	.careers-section::before {
		background: linear-gradient(to right,
			rgba(18, 59, 124, 1) 0%,
			rgba(18, 59, 124, 0.95) 60%,
			rgba(18, 59, 124, 0.55) 80%,
			rgba(18, 59, 124, 0.20) 95%);
	}

	.careers-image {
		height: 260px;
	}

	/* Partners — marquee */
	.partners-wrap {
		gap: 48px;
	}

	.partner-logo-img {
		max-height: 48px;
	}

	/* Footer */
	.site-footer {
		padding: 60px 0 20px;
	}

	.footer-brand .logo-mark {
		width: 68px;
		height: 68px;
	}

	.footer-brand .brand-text {
		font-size: 32px;
	}
}

/* ---------- TABLET PORTRAIT (≤767px) ---------- */
@media (max-width: 767.98px) {
	
	/* Hero */
	.hero-section {
		min-height: 560px;
		padding: 130px 0 60px;
	}

	.hero-title br {
		display: none;
	}

	.hero-description {
		max-width: 100%;
	}

	.hero-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	/* About */
	.about-section {
		padding: 60px 0;
	}

	.about-image {
		min-height: 280px;
	}

	.about-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Stats — 2 columns */
	.stats-row {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 40px;
		padding: 28px 0;
		gap: 26px 0;
	}

	.stat-item {
		border-right: 1px solid var(--line) !important;
		padding: 0 14px;
	}

	.stat-item:nth-child(3),
	.stat-item:nth-child(3n) {
		border-right: 1px solid var(--line) !important;
	}

	.stat-item:nth-child(2n) {
		border-right: none !important;
	}

	.stat-item:nth-child(odd) {
		padding-left: 0;
	}

	.stat-item:nth-child(n+3) {
		margin-top: 0;
		padding-top: 0;
	}

	/* Services — single card visible */
	.services-section {
		padding: 60px 0;
	}

	.services-carousel-wrap {
		padding: 0;
		padding-bottom: 70px;
	}

	.service-card {
		flex: 0 0 100%;
		height: 340px;
	}

	.carousel-arrow {
		top: auto;
		bottom: 0;
		transform: none;
		background: #fff;
		width: 40px;
		height: 40px;
	}

	.arrow-prev {
		left: calc(50% - 48px);
	}

	.arrow-next {
		left: calc(50% + 8px);
		right: auto;
	}

	/* Projects */
	.projects-section {
		padding: 60px 0;
	}

	.project-image {
		height: 220px;
	}


	/* 	.faq-image-wrap img {
	min-height: 0;
} */


	.custom-accordion .accordion-button {
		font-size: 15px;
		padding: 16px 18px;
	}

	.custom-accordion .accordion-body {
		padding: 0 18px 18px 50px;
		font-size: 14px;
	}

	/* Careers */
	.careers-section {
		padding: 60px 0;
	}

	.careers-section::before {
		background: rgba(18, 59, 124, 0.92);
	}

	.careers-desc {
		max-width: 100%;
	}

	/* Footer */
	.site-footer {
		padding: 50px 0 24px;
	}

	.footer-brand {
		gap: 12px;
		margin-bottom: 22px;
	}

	.footer-brand .logo-mark {
		width: 60px;
		height: 60px;
	}

	.footer-brand .brand-text {
		font-size: 28px;
	}

	.footer-about {
		max-width: 100%;
	}

	.footer-cta {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.footer-bottom {
		text-align: center;
	}

	.footer-bottom .col-md-4,
	.footer-bottom .col-md-8 {
		text-align: center !important;
		margin-top: 10px;
	}

	.social-link {
		margin: 0 8px;
	}

	/* Partners — marquee */
	.partners-wrap {
		gap: 40px;
	}

	.partner-item {
		flex: 0 0 auto;
		justify-content: center;
	}

	.partner-logo-img {
		max-height: 42px;
	}
}

/* ---------- MOBILE (≤575px) ---------- */
@media (max-width: 575.98px) {
	.container {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Hero */
	.hero-section {
		min-height: 520px;
		padding: 120px 0 50px;
	}

	.hero-title {
		line-height: 1.15;
	}

	.hero-buttons .btn,
	.footer-cta .btn,
	.hero-content .btn {
		width: 100%;
		margin-right: 0 !important;
		margin-bottom: 0px;
	}

	/* About */
	.about-section {
		padding: 50px 0;
	}

	.about-image {
		min-height: 240px;
	}

	/* Stats — 1 column on small mobile */
	.stats-row {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 22px 0;
	}

	.stat-item {
		border-right: none !important;
		padding: 20px 0 !important;
		border-bottom: 1px solid var(--line);
	}

	.stat-item:last-child {
		border-bottom: none;
	}

	.stat-item:nth-child(odd),
	.stat-item:nth-child(even) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Services */
	.service-card {
		height: 320px;
	}

	.service-corner-btn {
		width: 32px;
		height: 32px;
		top: 12px;
		right: 12px;
	}

	/* Projects */
	.project-image {
		height: 200px;
	}

	.project-info {
		padding: 18px 18px;
	}


	.custom-accordion .accordion-button {
		font-size: 16px;
		padding: 14px 14px;
		gap: 12px;
	}

	.custom-accordion .accordion-button::before {
		font-size: 14px;
		width: 16px;
		height: 16px;
	}

	.custom-accordion .accordion-body {
		padding: 0 14px 16px 42px;
		font-size: 14px;
		text-align:left;

	}

	/* Careers */
	.careers-section {
		padding: 50px 0;
	}

	/* Footer */
	.site-footer {
		padding: 40px 0 20px;
	}

	.footer-cta .btn {
		width: 100%;
	}

	.footer-heading {
		margin-bottom: 16px;
		font-size: 17px;
	}

	.footer-list li {
		margin-bottom: 10px;
	}

	.copyright {
		font-size: 12.5px;
	}

	/* Partners */
	.partners-section {
		padding: 20px 0;
	}

	.partners-wrap {
		gap: 32px;
	}

	.partner-item {
		flex: 0 0 auto;
	}

	.partner-logo-img {
		max-height: 36px;
	}
}

/* ---------- SMALL MOBILE (≤380px) ---------- */
@media (max-width: 380px) {
	.hero-section {
		min-height: 480px;
		padding: 110px 0 40px;
	}

	.hero-title {
		line-height: 1.2;
	}

	.about-image {
		min-height: 200px;
	}

	.service-card {
		height: 300px;
	}

	.partner-item {
		flex: 0 0 auto;
	}

	.partner-logo-img {
		max-height: 36px;
	}

	.footer-brand .logo-mark {
		width: 52px;
		height: 52px;
	}

	.footer-brand .brand-text {
		font-size: 24px;
	}

	.footer-cta {
		gap: 8px;
	}
}

/* =========================================================
MOBILE SIDEMENU — unique slide-in drawer
========================================================= */

/* Custom morphing burger (replaces bootstrap icon) */
.menu-burger {
	width: 44px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	padding: 0 10px;
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	box-shadow: none !important;
	transition: background .25s ease, border-color .25s ease;
	position: relative;
	z-index: 1100;
}

.menu-burger:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.28);
}

.menu-burger .burger-bar {
	display: block;
	height: 2px;
	width: 22px;
	margin: 0 auto;
	background: #fff;
	border-radius: 2px;
	transition: transform .35s var(--easing), opacity .25s ease, width .25s ease;
	transform-origin: center;
}

.menu-burger .burger-bar:nth-child(1) {
	width: 22px;
}

.menu-burger .burger-bar:nth-child(2) {
	width: 16px;
}

.menu-burger .burger-bar:nth-child(3) {
	width: 22px;
}

/* Morph to X when open */
.menu-burger.is-open .burger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
	width: 22px;
}

.menu-burger.is-open .burger-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.menu-burger.is-open .burger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
	width: 22px;
}

/* Backdrop with blur */
.sidemenu-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(2, 8, 18, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
	z-index: 1090;
}

.sidemenu-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

/* The drawer itself */
.sidemenu {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	height: 100dvh;
	width: 320px;
	max-width: 88vw;
	background:
		linear-gradient(165deg,
			#000000 0%,
			#050a14 30%,
			#061626 65%,
			#0c2438 100%);
	color: #fff;
	z-index: 1100;
	transform: translateX(110%);
	transition: transform .55s cubic-bezier(.7, .05, .15, 1),
		box-shadow .35s ease;
	display: flex;
	flex-direction: column;
	padding: 20px 22px 18px;
	overflow: hidden;
	box-shadow: none;
	border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.sidemenu.is-open {
	transform: translateX(0);
	box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
}


.sidemenu::before {
	content: "";
	position: absolute;
	bottom: -120px;
	left: -80px;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, rgba(40, 80, 160, 0.20) 0%, rgba(40, 80, 160, 0) 70%);
	pointer-events: none;
	z-index: 0;
}

.sidemenu>* {
	position: relative;
	z-index: 1;
}

.sidemenu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	flex-shrink: 0;
}

.sidemenu-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	text-decoration: none;
}

.sidemenu-brand .logo-mark img {
	width: 38px;
	height: 38px;
	background: #fff;
	border-radius: 50%;
	padding: 2px;
}

.sidemenu-brand .brand-text {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: .2px;
}

.sidemenu-close {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	transition: transform .35s var(--easing), background .25s ease, color .25s ease;
}

.sidemenu-close:hover {
	background: var(--red, #e7403c);
	color: #fff;
	transform: rotate(90deg);
}

.sidemenu-tag {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 2.5px;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 8px;
	text-transform: uppercase;
	flex-shrink: 0;
}

/* Navigation list */
.sidemenu-nav {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
	flex-shrink: 0;
}

.sidemenu-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 6px 9px 4px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	    font-family: var(--font-body)!important;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .2px;
	transition: color .3s ease, padding-left .3s ease;
	opacity: 0;
	transform: translateX(20px);
}

.sidemenu-link .num {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.35);
	min-width: 22px;
	transition: color .3s ease;
}

.sidemenu-link .label {
	flex: 1;
	position: relative;
}

.sidemenu-link .label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 1px;
	background: var(--red, #e7403c);
	transition: width .35s var(--easing);
}

.sidemenu-link .arrow {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.35);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .3s ease, transform .3s ease, color .3s ease;
}

.sidemenu-link:hover,
.sidemenu-link.active {
	color: #fff;
	padding-left: 10px;
}

.sidemenu-link:hover .num,
.sidemenu-link.active .num {
	color: var(--red, #e7403c);
}

.sidemenu-link:hover .label::after,
.sidemenu-link.active .label::after {
	width: 36px;
}

.sidemenu-link:hover .arrow,
.sidemenu-link.active .arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--red, #e7403c);
}

/* Staggered reveal when drawer opens */
.sidemenu.is-open .sidemenu-link {
	animation: smItemIn .55s cubic-bezier(.2, .7, .25, 1) forwards;
}

.sidemenu.is-open .sidemenu-link:nth-child(1) {
	animation-delay: .15s;
}

.sidemenu.is-open .sidemenu-link:nth-child(2) {
	animation-delay: .22s;
}

.sidemenu.is-open .sidemenu-link:nth-child(3) {
	animation-delay: .29s;
}

.sidemenu.is-open .sidemenu-link:nth-child(4) {
	animation-delay: .36s;
}

.sidemenu.is-open .sidemenu-link:nth-child(5) {
	animation-delay: .43s;
}

.sidemenu.is-open .sidemenu-link:nth-child(6) {
	animation-delay: .50s;
}

@keyframes smItemIn {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Contact block */
.sidemenu-contact {
	margin-bottom: 12px;
	flex-shrink: 0;
}

.sidemenu-contact-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	color: #fff;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	transition: transform .3s ease, color .3s ease;
}

.sidemenu-contact-row small {
	display: block;
	color: rgba(255, 255, 255, 0.45);
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 2px;
}

.sidemenu-contact-row .ico {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--red, #e7403c);
	font-size: 14px;
	flex: 0 0 38px;
	transition: background .3s ease, border-color .3s ease;
}

.sidemenu-contact-row:hover {
	transform: translateX(4px);
}

.sidemenu-contact-row:hover .ico {
	background: rgba(231, 64, 60, 0.12);
	border-color: rgba(231, 64, 60, 0.35);
}

.sidemenu-cta {
	display: block;
	text-align: center;
	width: 100%;
	margin-bottom: 12px;
	flex-shrink: 0;
}

.sidemenu-socials {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.sidemenu-socials a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.75);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 14px;
	transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}

.sidemenu-socials a:hover {
	background: var(--red, #e7403c);
	color: #fff;
	border-color: var(--red, #e7403c);
	transform: translateY(-2px);
}

/* Lock body scroll when drawer open */
body.menu-open {
	overflow: hidden;
}

/* Show burger + drawer only on mobile/tablet; hide bootstrap collapse there */
@media (max-width: 991.98px) {
	.menu-burger {
		display: flex;
	}

	/* hide the original desktop nav inside the navbar on mobile */
	#mainNav.navbar-collapse {
		display: none !important;
	}
}

@media (min-width: 992px) {

	.sidemenu,
	.sidemenu-backdrop {
		display: none !important;
	}
}

@media (max-width: 380px) {
	.sidemenu {
		padding: 22px 18px 22px;
		width: 300px;
	}

	.sidemenu-link {
		font-size: 17px;
		padding: 12px 4px;
	}
}


.page-banner {
	position: relative;
	min-height: clamp(320px, 44vh, 460px);
	color: #fff;
    margin-top: 100px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.page-banner .hero-bg,
.page-banner .hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.page-banner .hero-overlay {
	background: linear-gradient(180deg, rgba(5, 13, 34, .55) 0%, rgba(5, 13, 34, .78) 100%);
	z-index: 1;
}

.page-banner-content {
	position: relative;
	z-index: 2;
}

.page-banner .hero-tag {
	display: inline-block;
	color: #fff;
	font-size: var(--fs-tag);
	font-weight: var(--fw-bold);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	padding: 4px 12px;
	border: 1px solid rgba(255, 255, 255, .35);
	margin-bottom: 16px;
	font-family: var(--font-body);
	background: rgba(255, 255, 255, .05);
}

.page-banner-title {
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: var(--fw-bold);
	color: #fff;
	line-height: 1.1;
	letter-spacing: -0.3px;
	margin: 0 0 18px;
}

.page-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-body-sm);
	color: rgba(255, 255, 255, .85);
	font-family: var(--font-body);
}

.page-breadcrumb a {
	color: #fff;
	font-weight: var(--fw-semibold);
}

.page-breadcrumb a:hover {
	color: var(--red);
}

.page-breadcrumb span[aria-current="page"] {
	color: rgba(255, 255, 255, .75);
}

/* =========================================================
ABOUT — extra blocks (mission, values, team, pillars)
========================================================= */
.mission-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

.mission-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 14px 50px rgba(7, 20, 46, .10);
}

.mission-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	display: block;
	transition: transform .6s var(--easing);
}

.mission-image:hover img {
	transform: scale(1.03);
}

.values-section {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.value-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 36px);
	height: 100%;
	transition: all .3s var(--easing);
	overflow: hidden;
}

.value-card:hover {
	transform: translateY(-6px);
	border-color: var(--red);
	box-shadow: 0 14px 40px rgba(7, 20, 46, .10);
}

.value-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--red) 0%, #a01b1a 100%);
	color: #fff;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 28px;
	margin-bottom: 18px;
}

.value-title {
	font-size: var(--fs-h4);
	color: var(--navy);
	margin-bottom: 8px;
}

.value-desc {
	color: var(--grey);
	font-size: var(--fs-body-sm);
	line-height: 1.55;
}

.team-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

.team-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 36px);
	height: 100%;
	border: 1px solid var(--line);
	transition: all .3s var(--easing);
}

.team-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(7, 20, 46, .08);
	border-color: transparent;
}

.team-card-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px;
}

.team-initials {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.team-name {
	font-size: var(--fs-h4);
	color: var(--navy);
	margin: 0 0 4px;
}

.team-role {
	color: var(--red);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.team-bio {
	color: var(--grey);
	font-size: var(--fs-body-sm);
	line-height: 1.65;
}

.pillars-section {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.pillar-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3vw, 40px);
	height: 100%;
	transition: all .3s var(--easing);
}

.pillar-card:hover {
	border-color: var(--navy);
	box-shadow: 0 12px 36px rgba(7, 20, 46, .08);
	transform: translateY(-4px);
}

.pillar-icon {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--navy) 0%, var(--partner-blue) 100%);
	color: #fff;
	font-size: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.pillar-title {
	font-size: var(--fs-h4);
	color: var(--navy);
	margin-bottom: 10px;
}

.pillar-desc {
	color: var(--grey);
	font-size: var(--fs-body-sm);
	line-height: 1.65;
}

.services-grids {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(18px, 2vw, 28px);
	padding: 0;
	margin: 0;
	list-style: none;
}

/* First 3 cards */
/* .services-grids .service-card:nth-child(1),
.services-grids .service-card:nth-child(2),
.services-grids .service-card:nth-child(3) {
grid-column: span 2;
} */

/* 4th & 5th cards = 50% width each */
/* .services-grids .service-card:nth-child(4),
.services-grids .service-card:nth-child(5) {
grid-column: span 3;
} */

.services-grids .service-card {
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
	height: 420px;
}

/* Magazine number watermark — top-left of each card */
.services-grids .service-num {
	position: absolute;
	top: 18px;
	left: 22px;
	z-index: 4;
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1.5px;
	opacity: 0.85;
	line-height: 1;
	pointer-events: none;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}

.services-grids .service-num::after {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	background: var(--red);
	margin-top: 8px;
	transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.services-grids .service-card:hover .service-num {
	opacity: 1;
	transform: translateX(2px);
}

.services-grids .service-card:hover .service-num::after {
	width: 44px;
}


.services-grids .service-card:hover::after {
	width: 100%;
}

@media (max-width: 991.98px) {
	.services-grids {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-grids .service-card {
		grid-column: auto !important;
		padding: 0px;
	}
}

@media (max-width: 575.98px) {
	.services-grids {
		grid-template-columns: 1fr;
	}

	.services-grids .service-card {
		grid-column: auto !important;
		padding: 0px;
	}
}
/* =========================================================
SERVICES — page-specific overrides + capabilities + PM
========================================================= */
.services-intro {
	padding: var(--space-section-y) 0 calc(var(--space-section-y) / 1.4);
	background: #fff;
}

.services-intro-quote {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.6vw, 26px);
	color: var(--navy);
	line-height: 1.45;
	margin-top: 18px;
	font-weight: var(--fw-medium);
}

.services-intro-quote a {
	color: var(--red);
	font-weight: var(--fw-semibold);
	font-style: normal;
}

.services-intro-quote a:hover {
	color: var(--navy);
}

.services-grid-page {
	padding-bottom: 0;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	padding: 0;
	margin: 0;
	list-style: none;
}



.capabilities-section {
	padding: var(--space-section-y) 0;

}

.capability-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(22px, 2.4vw, 30px);
	height: 100%;
	border: 1px solid var(--line);
	transition: all .3s var(--easing);
}

.capability-card:hover {
	transform: translateY(-4px);

}

.capability-icon {
	font-size: 32px;
	color: var(--red);
	margin-bottom: 14px;
	display: inline-block;
}

.capability-title {
	font-size: 20px;
	color: var(--navy);
	margin-bottom: 8px;
	line-height: 1.3;
}

.capability-desc {
	color: var(--text-dark);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
	font-size: 16px;
}

.pm-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}


.pm-list {
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
}

.pm-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: var(--text-dark);
	font-weight: var(--fw-medium);
	border-bottom: 1px solid var(--line);
}

.pm-list li:last-child {
	border-bottom: 0;
}

.pm-list i {
	color: var(--red);
	font-size: 20px;
	flex-shrink: 0;
}

/* =========================================================
PROJECTS — list rows
========================================================= */
.project-list-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

.project-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.project-row {
	display: grid;
	grid-template-columns: 70px 1fr auto;
	align-items: center;
	gap: clamp(18px, 2vw, 28px);
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--line);
	transition: all .3s var(--easing);
}

.project-row:hover {
	transform: translateY(-4px);

}

.project-row-num {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	color: var(--red);
	font-weight: var(--fw-bold);
	line-height: 1;
}

.project-row-cat {
	font-size: 12px;
	color: var(--red);
	font-weight: var(--fw-bold);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.project-row-title {
	font-size: var(--fs-h4);
	color: var(--navy);
	margin: 0 0 6px;
}

.project-row-desc {
	color: var(--grey);
	font-size: var(--fs-body-sm);
	line-height: 1.55;
	margin: 0;
}

.project-row-tag {
	display: inline-block;
	padding: 6px 14px;
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.project-row {
		grid-template-columns: 1fr;
	}

	.project-row-num {
		font-size: 28px;
	}
}

/* =========================================================
NEWS — featured + card grid + newsletter
========================================================= */
.news-intro {
	padding: var(--space-section-y) 0 calc(var(--space-section-y) / 2);
	background: #fff;
}

.news-featured-section {
	padding: 0 0 var(--space-section-y);
	background: #fff;
}

.news-featured {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(7, 20, 46, .08);
	border: 1px solid var(--line);
}

.news-featured-image {
	position: relative;
	min-height: 360px;
	overflow: hidden;
}

.news-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-featured-body {
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.news-featured-body a,
.news-card-body a{
	background:transparent;
	color:var(--red);
	text-align:left;
	font-weight:500;
	padding:0;
	font-size:18px;
}

.news-featured-body a:hover,
.news-card-body a:hover{
	color:var(--navy)
}

/* Slot-reel counter animation */
.stat-number.is-reels {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
}
.stat-number.is-reels .stat-digit {
	display: inline-block;
	height: 1em;
	overflow: hidden;
	line-height: 1;
	vertical-align: bottom;
}
.stat-number.is-reels .stat-digit-inner {
	display: block;
	transform: translateY(0);
	will-change: transform;
}
.stat-number.is-reels .stat-digit-inner > span {
	display: block;
	height: 1em;
	line-height: 1;
}
.stat-number.is-reels .stat-static,
.stat-number.is-reels .stat-suffix {
	display: inline-block;
	line-height: 1;
}


.news-cat {
	display: inline-block;
	padding: 4px 14px;
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin-bottom: 16px;
	align-self: flex-start;
}

.news-featured-title {
	font-size: var(--fs-h3);
	color: var(--navy);
	margin-bottom: 14px;
	line-height: 1.2;
}

.news-featured-desc {
	color: var(--grey);
	font-size: var(--fs-lead);
	line-height: 1.6;
	margin-bottom: 18px;
}

.news-meta {
	color: var(--grey);
	font-size: 13px;
	margin-bottom: 22px;
}

.news-meta i {
	color: var(--red);
	margin-right: 4px;
}

.news-meta-divider {
	margin: 0 8px;
	opacity: 0.5;
}

@media (max-width: 767.98px) {
	.news-featured {
		grid-template-columns: 1fr;
	}

	.news-featured-image {
		min-height: 240px;
	}
}

.news-grid-section {
	padding: 0 0 var(--space-section-y);
	background: #fff;
}

.news-card {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--line);
	height: 100%;
	transition: all .3s var(--easing);
	display: flex;
	flex-direction: column;
}

.news-card:hover {
	transform: translateY(-6px);
}

.news-card-image {
	position: relative;
	aspect-ratio: 13/10;
	overflow: hidden;
}

.news-card-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position:center;

}


.news-card-cat {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 5px 12px;
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.news-card-body {
	padding: clamp(18px, 2vw, 24px);
	flex: 1;
	display: flex;
	flex-direction: column;

}
.faq-intro strong {
	color: #000;
	font-weight: 700;
}


/* ---------- CORPORATE VALUES LIST ---------- */
.values-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.values-item {
	margin: 0;
	display: grid;
	grid-template-columns: 200px 1fr;
	column-gap: 24px;
	align-items: baseline;
}

.values-title {
	color: var(--navy, #0c2456);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0;
	letter-spacing: 0.1px;
}

.values-desc {
	color: #000;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 575.98px) {
	.values-item {
		grid-template-columns: 1fr;
		row-gap: 4px;
	}
}
/* ---------- ACCORDION BORDERED GROUP ---------- */

.news-card-body .news {
	margin-top: auto !important;
	align-self: flex-start;
	width:100%;
}

.news-card-title {
	font-size: 19px;
	margin: 0 0 10px;
	line-height: 1.3;
}

.news-card-title a {
	color: var(--navy);
}

.news-card-title a:hover {
	color: var(--red);
}

.news-card-excerpt {
	color: var(--grey);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
	margin-bottom: 14px;
	flex: 1;
}

.news-card-meta {
	color: var(--red);
	font-size: 14px;
	margin: 0;
}

.news-card-meta i {
	color: var(--red);
	margin-right: 4px;
}

.newsletter-section {
	padding: 0 0 var(--space-section-y);
	background: #fff;
}

.newsletter-card {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
	border-radius: 10px;
	padding: clamp(32px, 5vw, 60px);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.newsletter-card .careers-title,
.newsletter-card .careers-desc {
	color: #fff;
}

.newsletter-card .careers-desc {
	opacity: 0.85;
}

.newsletter-socials {
	display: inline-flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}

.newsletter-social-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	transition: all .3s var(--easing);
	justify-content: center;
}

.newsletter-social-btn:hover {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
	transform: translateY(-2px);
}

/* =========================================================
CONTACT — tiles, form, regional, locations
========================================================= */
.contact-tiles-section {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.contact-tile {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3vw, 40px);
	text-align: center;
	border: 1px solid var(--line);
	height: 100%;
	transition: all .3s var(--easing);
}

.contact-tile:hover {
	transform: translateY(-4px);

}

.contact-tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--red) 0%, #a01b1a 100%);
	color: #fff;
	font-size: 26px;
	margin-bottom: 18px;
}

.contact-tile-title {
	font-size: var(--fs-h4);
	color: var(--navy);
	margin-bottom: 10px;
}

.contact-tile-line {
	font-size: 18px;
	color: var(--text-dark);
	font-weight: var(--fw-semibold);
	margin-bottom: 6px;
	line-height: 1.4;
}

.contact-tile-line a {
	color: var(--text-dark);
}

.contact-tile-line a:hover {
	color: var(--red);
}

.contact-tile-sub {
	color: var(--grey);
	font-size: var(--fs-body-sm);
	margin: 0;
}

.contact-form-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

.contact-form {
	margin-top: 28px;
}

.contact-form .form-label {
	font-weight: var(--fw-semibold);
	color: var(--navy);
	font-size: var(--fs-body-sm);
	margin-bottom: 6px;
}

.contact-form .form-control {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 12px 16px;
	font-size: 15px;
	font-family: var(--font-body);
	background: #fff;
	color: var(--text-dark);
	transition: all .3s var(--easing);
}

.contact-form .form-control:focus {
	border-color: var(--red);
	box-shadow: 0 0 0 3px rgba(207, 37, 35, .12);
	outline: none;
}

.contact-form button[type="submit"] {
	margin-top: 8px;
}

.contact-info-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3vw, 36px);
	border: 1px solid var(--line);
	box-shadow: 0 8px 30px rgba(7, 20, 46, .05);
}

.contact-info-title {
	font-size: var(--fs-h4);
	color: var(--navy);
	margin-bottom: 4px;
}

.contact-info-sub {
	color: var(--red);
	font-weight: var(--fw-bold);
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.contact-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.contact-info-list li {
	display: flex;
	flex-direction: column;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.contact-info-list.compact li {
	padding: 8px 0;
}

.contact-info-list li:last-child {
	border-bottom: 0;
}

.ci-name {
	color: var(--navy);
	font-weight: var(--fw-semibold);
	font-size: 15px;
}

.ci-role {
	color: var(--grey);
	font-size: 13px;
	margin-top: 2px;
}

.contact-info-divider {
	margin: 22px 0;
	border-color: var(--line);
	opacity: 0.6;
}

.regional-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

.region-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 2.4vw, 28px);
	height: 100%;
	transition: all .3s var(--easing);
}

.region-card:hover {
	transform: translateY(-4px);
}

.region-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	color: var(--navy);
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--red);
}

.region-title i {
	color: var(--red);
}

.region-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.region-list li {
	padding: 7px 0;
	color: var(--text-dark);
	font-size: var(--fs-body-sm);
	border-bottom: 1px dashed var(--line);
}

.region-list li:last-child {
	border-bottom: 0;
}

.locations-section {
	padding: var(--space-section-y) 0;

}

.location-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #fff;
	border-radius: var(--radius-md);
	padding: 18px 20px;
	border: 1px solid var(--line);
	transition: all .3s var(--easing);
	height: 100%;
}

.location-card:hover {
	transform: translateY(-4px);
}

.location-card i {
	color: var(--red);
	font-size: 22px;
	flex-shrink: 0;
	margin-top: 2px;
}

.location-card strong {
	display: block;
	color: var(--navy);
	font-size: 15px;
	margin-bottom: 4px;
	font-weight: var(--fw-bold);
}

.location-card span {
	color: var(--grey);
	font-size: 13px;
	line-height: 1.5;
}

/* =========================================================
CAREERS — benefits, positions, apply
========================================================= */
.careers-intro {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.benefits-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

.benefit-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(22px, 2.4vw, 30px);
	text-align: center;
	height: 100%;
	border: 1px solid var(--line);
	transition: all .3s var(--easing);
}

.benefit-card:hover {
	transform: translateY(-4px);
}

.benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--navy) 0%, var(--partner-blue) 100%);
	color: #fff;
	font-size: 26px;
	margin-bottom: 16px;
}

.benefit-title {
	font-size: 19px;
	color: var(--navy);
	margin-bottom: 8px;
}

.benefit-desc {
	color: var(--grey);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
}

.positions-section {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.position-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 34px);
	height: 100%;
	transition: all .3s var(--easing);
}

.position-card:hover {
	transform: translateY(-4px);
}

.position-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.position-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--red);
	color: #fff;
	font-size: 22px;
	flex-shrink: 0;
}

.position-title {
	font-size: var(--fs-h4);
	color: var(--navy);
	margin: 0 0 4px;
}

.position-loc {
	color: var(--grey);
	font-size: 14px;
	margin: 0;
	font-weight: var(--fw-medium);
}

.position-desc {
	color: var(--text-dark);
	font-size: var(--fs-body-sm);
	line-height: 1.5;
	margin-bottom: 18px;
	font-size: 16px;
}

.btn-sm {
	padding: 8px 18px;
	font-size: 16px;
}

.apply-section {
	padding: var(--space-section-y) 0;
}

.apply-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3vw, 40px);
	height: 100%;
	border: 1px solid var(--line);
	position: relative;
	transition: all .3s var(--easing);
}

.apply-card:hover {
	transform: translateY(-4px);
}

.apply-num {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(38px, 4vw, 56px);
	color: var(--red);
	line-height: 1;
	display: block;
	margin-bottom: 12px;
	opacity: 0.85;
}

.apply-step-title {
	font-size: var(--fs-h4);
	color: var(--navy);
	margin-bottom: 12px;
}

.apply-step-desc {
	color: var(--grey);
	font-size: var(--fs-body-sm);
	line-height: 1.5;
	font-size: 16px;
	margin-bottom: 16px;
}

.apply-step-desc a {
	color: var(--red);
	font-weight: var(--fw-semibold);
}

.apply-step-desc a:hover {
	color: var(--navy);
}

.apply-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--red);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body-sm);
}

.apply-link:hover {
	color: var(--navy);
	gap: 12px;
}

/* =========================================================
Responsive tweaks for inner-page banner
========================================================= */
@media (max-width: 767.98px) {
	.page-banner {
		min-height: 280px;
		padding-top: 130px;
		padding-bottom: 50px;
	}

	.page-banner-title {
		font-size: clamp(28px, 8vw, 38px);
	}
}

/* =========================================================
ALIGNMENT POLISH for inner pages
========================================================= */

.newsletter-socials {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 240px;
	margin-left: auto;
}

@media (max-width: 991.98px) {
	.newsletter-socials {
		margin-left: 0;

		max-width: 100%;
	}
}

/* Team card head — wrap on tiny screens */
@media (max-width: 380px) {
	.team-card-head {
		flex-wrap: wrap;
		gap: 12px;
	}

	.team-initials {
		width: 52px;
		height: 52px;
		font-size: 18px;
	}
}

/* Region/Location cards — better small-screen wrap */
@media (max-width: 575.98px) {
	.project-row {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 20px 18px;
	}

	.news-featured-body {
		padding: 28px 20px;
	}

	.contact-tile {
		padding: 26px 20px;
	}
}

/* Make sure inherited body color doesn't leak into page-banner copy */

.page-banner {
	color: #fff;
}

.page-banner a:not(.btn) {
	color: inherit;
}

/* Section title default centering not assumed — let parent decide */
.values-section .section-title,
.team-section .section-title,
.pillars-section .section-title,
.benefits-section .section-title,
.positions-section .section-title,
.apply-section .section-title,
.locations-section .section-title,
.regional-section .section-title,
.contact-tiles-section .section-title,
.capabilities-section .section-title,
.services-grid-page .section-title {
	letter-spacing: -0.4px;
}

.page-banner-wrapper~main .about-section .about-content {
	padding: 60px 60px 60px 60px;
}

@media (min-width: 1200px) {
	.page-banner-wrapper~main .about-section .about-content {
		padding: 0 100px 0 100px;
	}
}

@media (max-width: 991.98px) {
	.page-banner-wrapper~main .about-section .about-content {
		padding: 40px 20px;
	}
}

html,
body {
	overflow-x: clip !important;
}

.detail-sidebar {
	position: sticky !important;
	top: 110px !important;
}

.detail-sidebar.is-fixed {
	position: sticky !important;
	top: 110px !important;
}

.detail-intro-section .row > aside.col-lg-4,
.detail-intro-section .row > .col-lg-4 {
	align-self: stretch;
}

/* =========================================================
DETAIL PAGE STYLES — Service / News / Job
========================================================= */
.detail-intro-section {
	padding: var(--space-section-y) 0 calc(var(--space-section-y) / 1.6);
	background: #fff;
}

.detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
	margin-bottom: 20px;
}

.detail-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--grey);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
}

.detail-meta-item i {
	color: var(--red);
}

.detail-meta-cat {
	display: inline-block;
	padding: 4px 12px;
	background: var(--red);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.detail-lead {
	font-family: var(--font-display);
	font-size: clamp(18px, 1.6vw, 22px);
	color: var(--navy);
	line-height: 1.55;
	margin: 22px 0 28px;
	font-weight: var(--fw-medium);
}

.detail-hero-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: 30px 0;
	box-shadow: 0 20px 60px rgba(7, 20, 46, .12);
}

.detail-hero-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Article video (responsive iframe wrapper) */
.article-video {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: 30px 0;
	box-shadow: 0 20px 60px rgba(7, 20, 46, .12);
	background: #000;
}

.article-video iframe,
.article-video video {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* Article gallery */
.article-gallery {
	margin: 36px 0 18px;
}

.article-gallery-figure {
	margin: 0;
}

.article-gallery-item {
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
	aspect-ratio: 4 / 3;
	background: #f1f3f8;
	transition: transform .35s var(--easing), box-shadow .35s var(--easing);
}

.article-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--easing);
}

.article-gallery-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(7, 20, 46, .18);
}

.article-gallery-item:hover img {
	transform: scale(1.04);
}

.gallery-figure-caption {
	margin: 10px 2px 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: var(--fw-semibold, 600);
	color: var(--navy);
}

@media (max-width: 575.98px) {
	.gallery-figure-caption {
		font-size: 13px;
	}
}

/* Caption under gallery */
.article-gallery-caption {
	margin: 18px 0 30px;
	padding: 18px 22px;
	border-left: 3px solid var(--red, #e02424);
	background: #f7f9fc;
	border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
}

.gallery-caption-title {
	font-size: clamp(16px, 1.6vw, 19px);
	font-weight: var(--fw-bold, 700);
	color: var(--navy);
	margin: 0 0 6px;
	line-height: 1.3;
}

.gallery-caption-text {
	font-size: 15px;
	line-height: 1.7;
	color: #54596a;
	margin: 0;
}

/* Article prose (rich text body) */
.article-prose {
	font-size: 16px;
	line-height: 1.8;
	color: #3a3f4b;
}

.article-prose h2 {
	font-size: clamp(22px, 2.4vw, 32px);
	color: var(--navy);
	margin: 40px 0 16px;
	line-height: 1.25;
}

.article-prose h3 {
	font-size: clamp(19px, 1.8vw, 24px);
	color: var(--navy);
	margin: 30px 0 12px;
}

.article-prose p {
	margin: 0 0 18px;
}

.article-prose ul,
.article-prose ol {
	padding-left: 24px;
	margin: 0 0 22px;
	list-style: disc;
}

.article-prose ol {
	list-style: decimal;
}

.article-prose li {
	margin-bottom: 8px;
	color: #3a3f4b;
}

.article-prose li::marker,
.feature-block ul li::marker {
	color: var(--red);
}

.article-prose strong {
	color: var(--navy);
	font-weight: var(--fw-bold);
}

.article-prose blockquote {
	margin: 30px 0;
	padding: 30px 32px 26px;
	background: var(--grey-bg);
	font-family: var(--font-display);
	font-size: clamp(17px, 1.6vw, 20px);
	color: var(--navy);
	line-height: 1.55;
	border-radius: var(--radius-md);
	font-weight: var(--fw-medium);
	position: relative;
}

.article-prose blockquote::before {
	content: "\201C";
	font-family: var(--font-display);
	font-size: 70px;
	color: var(--red);
	position: absolute;
	top: 0;
	left: 16px;
	line-height: 1;
	opacity: 0.35;
}

.article-prose a {
	color: var(--red);
	text-decoration: underline;
	font-weight: var(--fw-semibold);
}

.article-prose a:hover {
	color: var(--navy);
}

.article-prose img {
	border-radius: var(--radius-md);
	margin: 24px 0;
}

.detail-sidebar {
	position:sticky;
	top: 110px;
	background: var(--grey-bg);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 2.6vw, 32px);
	border: 1px solid var(--line);
}

.detail-sidebar-title {
	font-size: 20px;
	color: var(--navy);
	margin-bottom: 4px;
}

.detail-sidebar-sub {
	color: var(--red);
	font-size: 14px;
	font-weight: var(--fw-bold);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.detail-fact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
}

.detail-fact-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-body-sm);
}

.detail-fact-list li:last-child {
	border-bottom: 0;
}

.detail-fact-list .fact-key {
	color: var(--grey);
	font-weight: var(--fw-medium);
}

.detail-fact-list .fact-val {
	color: var(--navy);
	font-weight: var(--fw-bold);
	text-align: right;
}

.detail-sidebar .btn {
	width: 100%;
	text-align: center;
}

@media (max-width: 991.98px) {
	.detail-sidebar {
		position: static;
		margin-top: 30px;
	}
}

/* Service detail — feature blocks */
.detail-features-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

.feature-block {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 22px;
	background: #fff;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	height: 100%;
	transition: all .3s var(--easing);
}


.feature-block ul li{
	color: var(--text-dark);
}

.feature-block:hover {
	transform: translateY(-4px);


}

.feature-block-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--red) 0%, #a01b1a 100%);
	color: #fff;
	font-size: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.feature-block-title {
	font-size: 20px;
	color: var(--navy);
	margin: 0 0 6px;
}

.feature-block-desc {
	color: var(--text-dark);
	font-size: var(--fs-body-sm);
	line-height: 1.5;
	margin: 0;
	font-size: 16px;
}

/* Process / steps */
.process-section {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.process-step {
	text-align: center;
	padding: clamp(22px, 2.4vw, 30px) 18px;
	border-radius: var(--radius-lg);
	background: #fff;
	border: 1px solid var(--line);
	height: 100%;
	position: relative;
}

.process-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 22px;
	margin: 0 auto 16px;
}

.process-step-title {
	font-size: 17px;
	color: var(--navy);
	margin-bottom: 8px;
}

.process-step-desc {
	color: var(--grey);
	font-size: var(--fs-body-sm);
	line-height: 1.5;
	font-size: 16px;
}

/* Related cards grid */
.related-section {
	padding: var(--space-section-y) 0;
}

.related-section.blog{
	background:var(--grey-bg);
}

/* News detail — author / share strip */
.author-strip {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 0;
	margin: 36px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.author-avatar {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.author-name {
	font-weight: var(--fw-bold);
	color: var(--navy);
	font-size: 15px;
	display: block;
}

.author-role {
	color: var(--grey);
	font-size: 13px;
}

.share-row {
	margin-left: auto;
	display: inline-flex;
	gap: 8px;
}

.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--grey-bg);
	color: var(--navy);
	transition: all .3s var(--easing);
}

.share-btn:hover {
	background: var(--red);
	color: #fff;
	transform: translateY(-2px);
}

/* Job detail — header card */
.job-header-card {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 4vw, 48px);
	color: #fff;
	margin-bottom: 40px;
}

.job-header-card .detail-meta-item {
	color: rgba(255, 255, 255, .85);
}

.job-header-card .detail-meta-item i {
	color: #fff;
}

.job-header-title {
	font-size: clamp(28px, 3.5vw, 44px);
	color: #fff;
	margin-bottom: 12px;
	line-height: 1.15;
}

.job-header-sub {
	color: rgba(255, 255, 255, .85);
	font-size: var(--fs-lead);
	margin-bottom: 22px;
	max-width: 720px;
}

.job-header-card .btn-red:hover {
	background: #fff;
	color: var(--navy);
}

/* Job summary boxes */
.job-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-top: 22px;
}

.job-summary-box {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--radius-md);
	padding: 14px 18px;
}

.job-summary-box small {
	display: block;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	font-size: 11px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 4px;
	font-weight: var(--fw-bold);
}

.job-summary-box strong {
	color: #fff;
	font-size: 15px;
	font-weight: var(--fw-bold);
}

/* Apply form (job detail) */
.apply-form-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

.apply-form-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(28px, 4vw, 48px);
	border: 1px solid var(--line);

}

/* =========================================================
SERVICE DETAIL — product-page layout (distinct from news-detail)
No sticky sidebar, no article-prose. Image+content overview,
stats bar, info-card grid, spec list, projects strip.
========================================================= */
.service-detail-overview {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.service-detail-image {

	overflow: hidden;
	position: relative;
}

.service-detail-image img {
	width: 100%;
	height: 100%;
	display: block;
}

.careers-image img{
	border-radius:10px;
}

.service-detail-image .badge-overlay {
	position: absolute;
	top: 20px;
	left: 20px;
	background: var(--red);
	color: #fff;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.service-detail-overview .section-title {
	margin-bottom: 16px;
}

.service-checklist {
	list-style: none;
	padding: 0;
	margin: 22px 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px 22px;
}

.service-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--text-dark);
	font-size: 15px;
	font-weight: var(--fw-medium);
	line-height: 1.45;
}

.service-checklist li i {
	color: var(--red);
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* Stats bar — slim and full-width band */
.service-stats-bar {
	background: linear-gradient(-45deg, var(--navy) 0%, var(--navy-2) 100%);
	padding: clamp(40px, 5vw, 70px) 0;
	color: #fff;
}

.service-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	margin: 0;
	padding: 0;
}

.service-stat {
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, .12);
	padding: 6px 12px;
}

.service-stat:last-child {
	border-right: 0;
}

@media (max-width: 767.98px) {
	.service-stat {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		padding-bottom: 18px;
	}

	.service-stat:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

.service-stat-num {
	font-family: var(--font-display);
	font-size: var(--fs-stat);
	font-weight: var(--fw-bold);
	color: #fff;
	line-height: 1.1;
	display: block;
	margin-bottom: 6px;
}

.service-stat-label {
	color: rgba(255, 255, 255, .78);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	margin: 0;
	line-height: 1.4;
}

/* Info cards: two-up split (description + safety/compliance) */
.service-info-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

.service-info-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3.5vw, 44px);
	height: 100%;
	border: 1px solid var(--line);
	transition: all .3s var(--easing);
}

.service-info-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(7, 20, 46, .08);
}

.service-info-card--dark {
	background: linear-gradient(-45deg, var(--navy) 0%, var(--navy-2) 100%);
	color: rgba(255, 255, 255, .85);
	border-color: transparent;
}

.service-info-card--dark .service-info-title,
.service-info-card--dark .service-info-eyebrow {
	color: #fff;
}

.service-info-card--dark .service-info-eyebrow {
	color: rgba(255, 255, 255, .6);
}

.service-info-eyebrow {
	color: var(--red);
	font-size: 12px;
	font-weight: var(--fw-bold);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.service-info-title {
	font-size: clamp(22px, 2.2vw, 28px);
	color: var(--navy);
	margin-bottom: 14px;
	line-height: 1.2;
}

.service-info-card p {
	line-height: 1.7;
	font-size: 15.5px;
	margin: 0 0 14px;
	color: inherit;
}

.service-info-card p:last-child {
	margin-bottom: 0;
}

.service-info-card strong {
	color: inherit;
}

.service-info-card--dark strong {
	color: #fff;
}

/* Spec list — two-column key/value */
.service-specs-section {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.service-specs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 30px;
}

.service-spec {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	transition: all .3s var(--easing);
}

.service-spec:hover {
	border-color: var(--red);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(7, 20, 46, .05);
}

.service-spec-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--grey-bg);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.service-spec dt {
	font-size: 14px;
	color: var(--text-dark);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: var(--fw-bold);
	margin-bottom: 3px;
}

.service-spec dd {
	color: var(--navy);
	font-weight: var(--fw-bold);
	font-size: 16px;
	margin: 0;
	line-height: 1.35;
}

/* Service highlight projects — small grid */
.service-projects-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

/* =========================================================
CONTACT PAGE — redesigned form + leadership + staff
========================================================= */

/* Contact form section — full-bleed 2-col with image aside */
.contact-form-section {
	background: var(--grey-bg);
}

.contact-form-section>.container-fluid {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 60px);
	padding-right: clamp(16px, 4vw, 60px);
	padding-top: var(--space-section-y);
	padding-bottom: var(--space-section-y);
}

.contact-form-section .row.g-0 {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 18px 60px rgba(7, 20, 46, .10);
	background: #fff;
}

/* Left aside (image + overlay + contact info) */
.contact-form-aside {
	position: relative;
	min-height: 100%;
	height: 100%;
	color: #fff;
	overflow: hidden;
}

/* Google Map embed wrapper (replaces the aside on contact page) */
.contact-form-map {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 500px;
	overflow: hidden;
	background: #eef1f7;
}

.contact-form-map iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	min-height: 500px;
}


.contact-form-aside-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.contact-form-aside-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(7, 20, 46, .92) 0%, rgba(18, 59, 124, .82) 100%);
	z-index: 1;
}

.contact-form-aside-body {
	position: relative;
	z-index: 2;
	padding: clamp(0px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: clamp(520px, 60vh, 680px);
}

.contact-form-aside-body .section-tag {
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
	background: transparent;
	align-self: flex-start;
}

.contact-form-aside-title {
	font-size: clamp(26px, 3vw, 38px);
	color: #fff;
	margin: 12px 0 16px;
	line-height: 1.15;
	letter-spacing: -0.3px;
}

.contact-form-aside-desc {
	color: rgba(255, 255, 255, .82);
	font-size: var(--fs-lead);
	line-height: 1.6;
	margin-bottom: 32px;
}

.contact-form-aside-list {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.contact-form-aside-list li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0;
}

.cf-aside-ico {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.cf-aside-text {
	display: flex;
	flex-direction: column;
	color: #fff;
	font-size: 15px;
	font-weight: var(--fw-semibold);
	line-height: 1.4;
}

.cf-aside-text small {
	display: block;
	color: rgba(255, 255, 255, .6);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-weight: var(--fw-bold);
	margin-bottom: 2px;
}

.cf-aside-text a {
	color: #fff;
	transition: color .25s ease;
}

.cf-aside-text a:hover {
	color: var(--red);
}

.contact-form-aside-socials {
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	display: flex;
	gap: 10px;
}

.contact-form-aside-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 16px;
	transition: all .3s var(--easing);
}

.contact-form-aside-socials a:hover {
	background: var(--red);
	border-color: var(--red);
	transform: translateY(-2px);
}

/* Right form panel */
.contact-form-panel {
	background: #fff;
	padding: clamp(32px, 4vw, 56px);
	height: 100%;
}

.contact-form-panel .section-title {
	margin-bottom: 12px;
}

.contact-form-panel .muted-text {
	margin-bottom: 24px;
}

@media (max-width: 991.98px) {
	.contact-form-aside-body {
		min-height: 420px;
	}
}

/* =========================================================
LEADERSHIP SECTION — uses .team-card pattern from about page
========================================================= */
.leadership-section {
	padding: var(--space-section-y) 0;
	background: var(--grey-bg);
}

/* =========================================================
FORT WORTH OFFICE STAFF — staff-card grid
========================================================= */
.staff-section {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.staff-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 20px 24px;
	height: 100%;
	transition: all .3s var(--easing);
}

.staff-card:hover {
	transform: translateY(-4px);
}

.staff-card-body {
	min-width: 0;
	flex: 1;
}

.staff-name {
	font-size: 17px;
	color: var(--navy);
	margin: 0 0 4px;
	line-height: 1.25;
}

.staff-role {
	color: var(--grey);
	font-size: 13px;
	margin: 0;
	line-height: 1.4;
	font-weight: var(--fw-medium);
}

.staff-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--grey-bg);
	color: var(--navy);
	border-radius: var(--radius-pill);
	font-weight: var(--fw-bold);
	font-size: 14px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: all .3s var(--easing);
}

.staff-phone i {
	color: var(--red);
}

.staff-phone:hover {
	background: var(--red);
	color: #fff;
}

.staff-phone:hover i {
	color: #fff;
}

@media (max-width: 575.98px) {
	.staff-card {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.staff-phone {
		align-self: stretch;
		justify-content: center;
	}
}

/* =========================================================
ABOUT PAGE — Leadership 2x2 grid: equal-height cards & images
========================================================= */

/* Stretch the column so the card fills the row height */
.leadership-grid>.container>.row>[class*="col-"] {
	display: flex;
}

/* Each card fills its column and lays out as a vertical flex */
.leadership-grid .project-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Force a fixed image height so all 4 leader photos are identical */
.leadership-grid .project-card .project-image {
	flex-shrink: 0;
	aspect-ratio: 18 / 10;
	height: auto;
	overflow: hidden;
}

.leadership-grid .project-card .project-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Info area takes remaining height so cards align */
.leadership-grid .project-card .project-info {
	flex: 1 1 auto;
	padding: clamp(22px, 2.4vw, 30px);
	display: flex;
	flex-direction: column;
}

.leadership-grid .project-card .project-loc {
	color: var(--text-dark);
	font-size: 16px;
	line-height: 1.65;
	white-space: normal;
	margin-top: 4px;
	flex: 1;
}

.leadership-grid .project-card .project-loc em {
	color: var(--navy);
	font-weight: var(--fw-semibold);
	display: inline-block;
	margin-top: 4px;
}

.thank-you-contact{
	display: flex;
    justify-content: center;
    gap: 15px;
}


/* =========================================================
ABOUT PAGE — Contact Us office tiles (partners-section style)
========================================================= */
.offices-strip {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.offices-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

.office-tile {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 2px;
	align-items: center;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	transition: all .3s var(--easing);
	font-style: normal;
}

.office-tile:hover {

	transform: translateY(-4px);

}

.office-tile i {
	grid-row: 1 / span 2;
	color: var(--red);
	font-size: 22px;
	align-self: center;
}

.office-tile strong {
	color: var(--navy);
	font-size: 18px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
}

.office-tile span {
	color: var(--text-dark);
	font-size: 16px;
	line-height: 1.45;
}

/* =========================================================
ABOUT PAGE — safety bullet list (used in Safe Workplace section)
========================================================= */
.safety-list {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.safety-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--text-dark);
	font-size: 16px;
	line-height: 1.5;
	font-weight: var(--fw-medium);
}

.safety-list li i {
	color: var(--red);
	font-size: 16px;
	flex-shrink: 0;
	margin-top: 3px;
}


/* =========================================================
ABOUT PAGE — legacy components (kept for backward compat,
no longer referenced from about.html)
========================================================= */

.about-intro-section {
	padding: var(--space-section-y) 0;
	background: #fff;
}

.about-highlight-list {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px 22px;
}

.about-highlight-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text-dark);
	font-size: 15px;
	font-weight: var(--fw-medium);
}

.about-highlight-list li i {
	color: var(--red);
	font-size: 18px;
	flex-shrink: 0;
}

.about-intro-visual {
	position: relative;
	padding: 0 0 60px 60px;
}

.about-intro-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 18px 60px rgba(7, 20, 46, .14);
	position: relative;
	z-index: 1;
}

.about-intro-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	display: block;
	transition: transform .6s var(--easing);
}

.about-intro-image:hover img {
	transform: scale(1.04);
}

.intro-stat-badge {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	background: linear-gradient(135deg, var(--red) 0%, #a01b1a 100%);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 24px 28px;
	box-shadow: 0 16px 40px rgba(207, 37, 35, .28);
	max-width: 260px;
}

.intro-stat-num {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 64px;
	line-height: 1;
	color: #fff;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.intro-stat-num small {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: var(--fw-bold);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	opacity: 0.85;
}

.intro-stat-label {
	color: rgba(255, 255, 255, .9);
	font-size: 13px;
	line-height: 1.45;
	margin: 8px 0 0;
}

.intro-mini-badge {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--navy);
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	box-shadow: 0 10px 30px rgba(7, 20, 46, .12);
	font-size: 13px;
	font-weight: var(--fw-bold);
}

.intro-mini-badge i {
	color: var(--red);
	font-size: 16px;
}

@media (max-width: 991.98px) {
	.about-intro-visual {
		padding: 0 0 40px 30px;
	}

	.intro-stat-badge {
		padding: 20px 22px;
		max-width: 220px;
	}

	.intro-stat-num {
		font-size: 52px;
	}
}

@media (max-width: 575.98px) {
	.about-intro-visual {
		padding: 0;
	}

	.intro-stat-badge {
		position: relative;
		left: auto;
		bottom: auto;
		margin: -32px 16px 0;
		max-width: none;
	}

	.intro-mini-badge {
		top: 16px;
		right: 16px;
	}
}

/* OUR APPROACH — dark 3-col section */
.approach-section {
	position: relative;
	padding: var(--space-section-y) 0;
	color: #fff;
	overflow: hidden;
	background: var(--navy-3);
}

.approach-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 600px at 80% 0%, rgba(207, 37, 35, .18) 0%, transparent 60%),
		radial-gradient(900px 600px at 0% 100%, rgba(18, 59, 124, .30) 0%, transparent 60%),
		linear-gradient(135deg, var(--navy-3) 0%, var(--navy-2) 100%);
	z-index: 0;
}

.approach-section .container {
	position: relative;
	z-index: 1;
}

.section-tag--light {
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
}

.section-title--light {
	color: #fff;
}

.section-sub--light {
	color: rgba(255, 255, 255, .78);
}

.approach-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3vw, 40px);
	height: 100%;
	position: relative;
	transition: all .3s var(--easing);
	overflow: hidden;
}

.approach-card:hover {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(207, 37, 35, .5);
	transform: translateY(-6px);
}

.approach-num {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(48px, 5vw, 72px);
	color: rgba(255, 255, 255, .10);
	line-height: 1;
	position: absolute;
	top: 18px;
	right: 22px;
	pointer-events: none;
}

.approach-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--red) 0%, #a01b1a 100%);
	color: #fff;
	font-size: 26px;
	margin-bottom: 22px;
	position: relative;
	z-index: 1;
}

.approach-title {
	font-size: clamp(20px, 1.9vw, 26px);
	color: #fff;
	margin-bottom: 12px;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}

.approach-desc {
	color: rgba(255, 255, 255, .78);
	font-size: var(--fs-body-sm);
	line-height: 1.65;
	margin: 0;
	position: relative;
	z-index: 1;
}

/* CORE VALUES — redesigned header + numbered prefix */
.values-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.values-head .section-title {
	margin: 0;
}

.values-head-desc {
	color: var(--grey);
	font-size: var(--fs-lead);
	line-height: 1.6;
	max-width: 460px;
	margin: 0;
}

.values-head-desc strong {
	color: var(--red);
}

@media (max-width: 767.98px) {
	.values-head {
		align-items: flex-start;
	}
}

.value-card {
	position: relative;
	overflow: hidden;
}

.value-card::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 3px;
	background: var(--red);
	transition: width .35s var(--easing);
}

.value-card:hover::after {
	width: 100%;
}

.value-num {
	position: absolute;
	top: 18px;
	right: 22px;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 38px;
	color: var(--line);
	line-height: 1;
	pointer-events: none;
	transition: color .3s var(--easing);
}

.value-card:hover .value-num {
	color: rgba(207, 37, 35, .25);
}

/* THREE PILLARS — translucent stat numbers */
.pillar-card {
	position: relative;
	overflow: hidden;
}

.pillar-stat {
	position: absolute;
	top: 10px;
	right: 18px;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(48px, 5vw, 72px);
	color: rgba(18, 59, 124, .06);
	line-height: 1;
	pointer-events: none;
	transition: color .3s var(--easing);
}

.pillar-card:hover .pillar-stat {
	color: rgba(207, 37, 35, .10);
}

/* About page Partners section variant */
.about-partners {
	padding: var(--space-section-y) 0 calc(var(--space-section-y) / 1.4);
	background: var(--grey-bg);
}

.about-partners .container-fluid {
	margin-top: 20px;
}

/* TEAM CARDS — red accent top bar on hover */
.team-card {
	position: relative;
	overflow: hidden;
}

.team-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--red) 0%, transparent 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--easing);
}

.team-card:hover::before {
	transform: scaleX(1);
}



/* ---- Global responsive safety nets ---- */
html,
body {
	-webkit-text-size-adjust: 100%;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	padding-left: clamp(15px, 3vw, 15px);
	padding-right: clamp(15px, 3vw, 15px);
}

img,
iframe,
video,
embed,
object {
	max-width: 100%;
}

/* Prevent any flex/grid child from pushing parent wider than viewport */
.row > * { min-width: 0; }

/* Prevent iOS zoom-on-focus by ensuring inputs are >= 16px */
input,
select,
textarea,
.form-control {
	font-size: 16px;
}


/* Dots variant (homepage) — no side gutters needed without arrows */
.services-carousel-wrap.has-dots {
	padding: 0;
}

/* Services pagination dots */
.services-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
}

.services-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #cbd5e1;
	cursor: pointer;
	transition: all .3s var(--easing);
}

.services-dot:hover {
	background: #94a3b8;
}

.services-dot.active {
	background: var(--red);
	width: 28px;
	border-radius: 6px;
}

/* ====================================================================
≤ 1399.98px — Large desktops / smaller laptops
==================================================================== */
@media (min-width: 1501px) and (max-width: 1750px) {
	/* 	.offset-lg-7 {
	margin-left: 53.333333%;
}

	.faq-content{
	max-width: 680px;
} */
}

@media (min-width: 1400px) and (max-width: 1500px) {
	/* 	.offset-lg-7 {
	margin-left: 53.333333%;
}

	.faq-content{
	max-width: 620px;
} */

	.container{
		padding:0 80px;
	}
	.values-title{
		font-size: 16px;
	}
	.values-desc{
		font-size: 15px;
	}
		.service-detail-overview .section-title{
		font-size:44px;
		    word-break: keep-all;
    overflow-wrap: normal;
	}
	.service-detail-image img{
		    min-height: 700px;
	}
}
@media (max-width: 1366px) and (min-width: 1280px) {

	.container{
		padding:0 80px;
	}
		.service-detail-overview .section-title{
		font-size:44px;
		    word-break: keep-all;
    overflow-wrap: normal;
	}
	.service-detail-image img{
		    min-height: 700px;
	}
	.stat-label {
		font-size: 16px;
	}
	.about-section{
		padding: 90px 0;
	}
	.values-item {
		margin: 0;
		display: grid;
		grid-template-columns: 160px 1fr;
	}
	.values-title{
		font-size: 16px;
	}
	.values-desc{
			font-size: 15px;
	}
	.page-banner-wrapper~main .about-section .about-content {
		padding: 0 30px 0 30px;
	}
	.careers-pattern{
		background-size: auto 85%;   
	}
	.careers-section{
		background-size: 90% auto;
	}
	.careers-section{
		min-height: 500px;
	}
}


@media (max-width: 1399.98px) {



	.hero-section {
		padding-top: 120px;
	}

	.hero-description {
		max-width: 620px;
	}



	.news-card,
	.team-card,
	.position-card,
	.benefit-card,
	.capability-card,
	.location-card {
		padding: clamp(18px, 1.6vw, 24px);
	}

	/* 	.offset-lg-7 {
	margin-left: 53.333333%;
}

	.faq-content{
	max-width: 600px;
} */

	.faq-section,
	.about-section{
		min-height: 650px!important;
	}

	.about-section.about{
		min-height:0!important;
	}


	.partners-wrap {
		margin-right: 50px;
	}

	.footer-brand {
		max-width: 320px;
	}
}

/* ====================================================================
≤ 1199.98px — Small desktops / large tablets landscape
==================================================================== */
@media (max-width: 1199.98px) {


	.careers-section{
		background-size: 100% auto;
	}
	.service-detail-overview .section-title{
		font-size:30px;
		    word-break: keep-all;
    overflow-wrap: normal;
	}

	.careers-pattern{
		background-size: auto 70%;
	}
	/* Header / Navbar */
	.navbar-brand {
		margin-right: 14px;
	}

	.brand-text {
		font-size: 18px;
	}

	.navbar-nav .nav-link {
		font-size: 15px;
		padding: 8px 12px !important;
	}

	.btn-nav {
		padding: 9px 16px;
		font-size: 16px;
		margin-right: 6px;
	}

	/* Hero */
	.hero-section {
		height: auto;
		min-height: 86vh;
		padding: 170px 0 80px;
	}

	.hero-description {
		max-width: 560px;
	}

	/* Stats */
	.stats-row {
		gap: 24px;
	}

	/* About / FAQ / Two-column */
	.about-image,
	.faq-image-wrap {
		max-width: 100%;
	}

	/* Service detail */
	.service-detail-image img,
	.detail-hero-image img {
		width: 100%;
		height: auto;
	}

	/* Contact form aside */
	.contact-form-aside,
	.contact-form-panel {
		padding: 50px 15px;
	}

	/* Page banner */
	.page-banner {
		min-height: 360px;
	}

	/* Footer */
	.site-footer .footer-heading {
		font-size: 14px;
	}

	.site-footer .footer-list a {
		font-size: 14px;
	}
}

/* ====================================================================
≤ 991.98px — Tablets (portrait) / collapses navbar
==================================================================== */
@media (max-width: 991.98px) {

	:root {
		--container-max: 720px;
		--space-section-y: clamp(48px, 6vw, 72px);
	}
	
	.detail-meta{
		    justify-content: center;
	}

	/* Mobile nav opens via the burger / sidemenu — keep pill compact */
	.custom-navbar {
		padding: 6px 8px 6px 14px;
	
	}
	.services-track .service-card .service-image img{
		height: 350px;
	}
	.offset-lg-7 {
		margin-left: 0;
	}

	.services-grids .service-card .service-image img {
		height: 450px;
	}

	.navbar-brand {
		margin-right: 8px;
	}

	.brand-text {
		font-size: 17px;
	}

	

	/* Hero */
	.hero-section {
		min-height: auto;
		height: auto;
		padding: 170px 0 70px;
		text-align: center;
	}

	.hero-content {
		margin: 0 auto;
	}

	.hero-description {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.hero-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.hero-buttons .btn {
		margin: 0;
	}

	/* Page banner */
	.page-banner-wrapper .site-header {
		top: 14px;
	}

	.page-banner {
		min-height: 300px;
		text-align: center;
	}

	.page-banner-content {
		margin: 0 auto;
	}

	.about-section,
	.faq-section{
		background-image: none!important;
		padding-top: 60px;
		height:auto!important;
	}

	.page-breadcrumb {
		justify-content: center;
	}

	/* Section headers */
	.section-title {
		margin-bottom: 14px;
	}

	.section-sub {
		font-size: 16px;
	}

	/* Partners */
	.partners-wrap {
		gap: 14px 22px;
		justify-content: center;
	}

	.partner-item {
		flex: 0 1 auto;
		min-height: 44px;
	}

	.partner-logo-img {
		max-height: 38px;
	}

	/* About / FAQ — stack two columns */
	.about-section .row,
	.faq-section .row,
	.pm-section .row,
	.service-detail-overview .row {
		row-gap: 28px;
	}
	.about-content{
		text-align: center;
	}


	.faq-content {
		text-align: center;
		max-width: 100%;

	}

	.about-image,
	.faq-image-wrap {
		margin-top: 8px;
	}

	.about-image img,
	.faq-image-wrap img {
		width: 100%;
	}

	/* Stats row — wrap to 2 columns */
	.stats-row {
		flex-wrap: wrap;
		gap: 22px 18px;
	}

	.stats-row .stat-item {
		flex: 0 0 calc(50% - 12px);
		text-align: left;
	}

	.service-stats-row {
		flex-wrap: wrap;
		gap: 18px;
	}

	.service-stat {
		flex: 0 0 calc(50% - 10px);
	}

	/* Service / project / news / team / position / benefit / capability cards
	→ handled by Bootstrap col-md-* but enforce min height equalization */
	.service-card,
	.project-card,
	.news-card,
	.team-card,
	.position-card,
	.benefit-card,
	.capability-card,
	.location-card,
	.staff-card,
	.region-card,
	.contact-tile,
	.feature-block,
	.apply-card,
	.service-info-card {
		height: 100%;
	}

	/* Services carousel — show fewer cards */
	.services-track {
		gap: 14px;
	}

	/* Project rows — tighter */
	.project-row {
		flex-wrap: wrap;
		gap: 14px;
	}

	.project-row-num {
		font-size: 28px;
	}

	.project-row-title {
		font-size: 20px;
	}

	/* News featured */
	.news-featured-title {
		font-size: clamp(22px, 3vw, 28px);
	}

	/* Contact form section — stack panels */
	.contact-form-section .row.g-0 {
		flex-direction: column;
	}

	.contact-form-aside,
	.contact-form-panel {
		width: 100%;
	}

	.contact-form-aside {
		min-height: 320px;
	}

	/* Service detail layout */
	.detail-sidebar {
		margin-top: 32px;
	}

	/* Process steps */
	.process-step {
		margin-bottom: 22px;
	}

	/* Newsletter card */
	.newsletter-card {
		text-align: center;
	}

	.newsletter-socials {
		justify-content: center;
	}

	/* Careers section */
	.careers-section .container .row {
		row-gap: 24px;
	}

	.careers-image img {
		width: 100%;
		height: auto;
	}

	/* Offices strip */
	.offices-wrap {
		flex-wrap: wrap;
		gap: 16px;
		justify-content: center;
	}

	.office-tile {
		flex: 0 0 calc(50% - 8px);

	}

	.safety-list{
		text-align: left;
	}

	/* Footer */
	.site-footer .row > [class*="col-"] {
		margin-bottom: 28px;
	}

	.footer-cta {
		flex-wrap: wrap;
		gap: 10px;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 14px;
		align-items: center;
		text-align: center;
	}

	.footer-socials-list {
		justify-content: center;
	}

	/* Sidemenu adjustments */
	.sidemenu {
		width: min(420px, 92vw);
	}

	/* Job summary */
	.job-summary-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ====================================================================
≤ 767.98px — Tablets portrait / large phones
==================================================================== */
@media (max-width: 767.98px) {

	.careers-section {
	background-size: cover;

}

	:root {
		--container-max: 540px;
		--space-section-y: clamp(40px, 8vw, 60px);
		--space-card: clamp(14px, 4vw, 20px);
	}
	#projects .row .col-lg-4,
	.projects-section .row .col-lg-4,
	{
		margin-top:0!important;
	}
	
	.about-section p{
		text-align:left;
	}

	.pm-list li,
	.service-checklist{
		text-align:left;
	}
	.newsletter-section{
		padding-top:0!important;
	}
	.about-image img, .faq-image-wrap img{
		min-height:auto;
		height:auto;
	}

	.values-item .values-title .row{
		display:flex;
		justify-content:start;
	}
	.values-desc{
		text-align: left;
	}


	.services-track .service-card .service-image img,
	.services-grids .service-card .service-image img {
		height: 450px;
	}

	.projects-section.community .project-info{
		height:auto!important;
	}

	/* 
	.about-image img{
	right: 0%;
} */

	.about-section.about{
		padding-right:15px;
		padding-left:15px;
	}

	.logo-mark img{
		width: 80px;
	}


	.custom-navbar {
		padding: 6px 8px 6px 12px;

	}

	.social-link i{
		padding: 10px;

	}
	.head-area{
		text-align:center;
	}
	
	.faq-image-wrap img,
	.about-image img,
	.service-detail-image img{
		border-radius:10px;
	}

	.footer-socials-list{
		gap: 50px;
	}

	.navbar-brand {
		gap: 8px;
		margin-right: 6px;
	}


	.brand-text {
		font-size: 15px;
	}

	.btn-nav {
		padding: 7px 12px;
		font-size: 16px;
	}

	/* Hero */
	.hero-section {
		padding: 150px 0 60px;
	}

	.hero-tag {
		font-size: 12px;
		padding: 4px 12px;
		margin-bottom: 16px;
	}

	.hero-title {
		margin-bottom: 18px;
	}

	.hero-description {
		margin-bottom: 24px;
	}

	.hero-buttons .btn {
		width: 100%;
		text-align: center;
	}

	/* Page banner */
	.page-banner {
		min-height: 240px;
		padding: 130px 0 40px;
	}

	/* Sections — vertical rhythm */
	section,
	.about-section,
	.faq-section,
	.careers-section,
	.contact-form-section,
	.newsletter-section,
	.partners-section,

	.related-section,
	.process-section,
	.service-specs-section,
	.service-detail-overview,
	.detail-intro-section,
	.pm-section,
	.about-partners {
		padding-top: var(--space-section-y);
		padding-bottom: var(--space-section-y);
	}

	.partners-section {
		padding: 22px 0;
	}

	/* Section headers center on mobile for visual balance */
	.section-tag {
		font-size: 12px;
		letter-spacing: 1.2px;
	}

	.section-title {
		margin-bottom: 12px;
	}

	.section-sub {
		font-size: 15px;
		line-height: 1.55;
	}

	.section-sub-left {
		font-size: 14px;
	}

	/* Grids → single column for most cards (Bootstrap col-md/sm classes do this,
	but enforce gap reduction & full width) */
	.services-grid,
	.services-grid-page,
	.leadership-grid {
		gap: 16px;
	}

	/* Stats — already 2-col on 991; keep 2-col here but tighter */
	.stats-row {
		gap: 18px 14px;
	}

	.stat-number {
		font-size: clamp(28px, 9vw, 40px);
	}

	.stat-label {
		font-size: 13px;
	}

	.service-stat {
		flex: 0 0 calc(50% - 8px);
	}

	.service-stat-num {
		font-size: clamp(24px, 8vw, 34px);
	}

	/* Cards */
	.service-card,
	
	.news-card,
	.team-card,
	.position-card,
	.benefit-card,
	.capability-card,
	.location-card,
	.staff-card,
	.region-card,
	.contact-tile,
	.feature-block,
	.apply-card,
	.service-info-card {
		padding: 18px;
	}

	.service-title,
	.project-title,
	.news-card-title,
	.team-name,
	.position-title,
	.benefit-title,
	.capability-title,
	.feature-block-title {
		font-size: 18px;
	}

	.service-desc,
	.project-loc,
	.news-card-excerpt,
	.team-bio,
	.position-desc,
	.benefit-desc,
	.capability-desc,
	.feature-block-desc {
		font-size: 14px;
	}

	/* Services carousel — let one card take ~85vw */
	.services-carousel-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
	}

	.services-track {
		gap: 12px;
	}

	.services-track .service-card {
		scroll-snap-align: start;
		flex: 0 0 85%;
		padding: 0;
	}



	.project-row-num {
		font-size: 24px;
	}

	.project-row-title {
		font-size: 18px;
	}

	.project-row-desc {
		font-size: 14px;
	}

	.project-row-meta {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* News featured */
	.news-featured .row {
		row-gap: 18px;
	}

	.news-featured-image img {
		width: 100%;
		height: auto;
	}

	.news-featured-title {
		font-size: 22px;
	}

	.news-featured-desc {
		font-size: 14px;
	}

	/* News card meta — wrap */
	.news-card-meta {
		flex-wrap: wrap;
		gap: 6px 12px;
		font-size: 14px;
	}

	/* Forms */
	.contact-form .row {
		row-gap: 14px;
	}

	.form-label {
		font-size: 14px;
		margin-bottom: 6px;
	}

	.form-control {
		padding: 12px 14px;
	}


	.contact-form-aside {
		min-height: 260px;
	}

	/* Article / news / job detail prose */
	.detail-prose,
	.article-prose {
		font-size: 15.5px;
	}

	.detail-prose h2,
	.article-prose h2 {
		font-size: 22px;
	}

	.detail-prose h3,
	.article-prose h3 {
		font-size: 18px;
	}

	/* Author strip */
	.author-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.share-row {
		flex-wrap: wrap;
		margin-left: inherit;
	}

	/* Job header card */
	.job-header-card {
		padding: 20px 18px;
	}

	.detail-meta {
		flex-wrap: wrap;
		gap: 8px 14px;
		justify-content: center;
	}

	.job-summary-grid {
		grid-template-columns: 1fr !important;
	}

	/* Process steps */
	.process-step {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.process-step-num {
		font-size: 26px;
	}

	.process-step-title {
		font-size: 18px;
	}

	/* Specs */
	.service-specs-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px;
	}

	.service-spec {
		padding: 16px;
	}

	/* Stats bar within service detail */
	.service-stats-bar {
		padding: 22px 18px;
	}

	/* Detail sidebar */
	.detail-sidebar {
		padding: 18px;
	}

	.detail-sidebar-title {
		font-size: 16px;
	}

	.detail-fact-list .fact-key {
		font-size: 12px;
	}

	.detail-fact-list .fact-val {
		font-size: 14px;
	}

	/* Service info cards */
	.service-info-card {
		padding: 22px 18px;
	}

	.service-info-eyebrow {
		font-size: 12px;
	}

	.service-info-title {
		font-size: 19px;
	}

	/* Careers section */
	.careers-section .container {
		text-align: center;
	}

	.careers-tag,
	.careers-title,
	.careers-desc {
		text-align: center;
	}

	.careers-title {
		font-size: clamp(24px, 8vw, 34px);
	}

	.careers-desc {
		font-size: 15px;
	}

	/* Newsletter */
	.newsletter-card {
		padding: 26px 20px;
	}

	.newsletter-card .careers-title {
		font-size: clamp(22px, 7vw, 30px);
	}

	.newsletter-socials {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* Offices */
	.office-tile {
		flex: 0 0 100%;
	}

	/* Sidemenu */
	.sidemenu {
		width: min(360px, 88vw);
	}

	.sidemenu-head {
		padding: 18px;
	}

	.sidemenu-nav {
		padding: 18px;
	}

	.sidemenu-link {
		font-size: 18px;
		padding: 10px 0;
	}

	/* Footer */
	.site-footer {
		padding-top: 50px;
		padding-bottom: 22px;
	}

	.footer-brand {
		max-width: 100%;
	}

	.site-footer .row > [class*="col-"] {
		margin-bottom: 24px;
	}

	.footer-heading {
		font-size: 13px;
		margin-bottom: 10px;
	}

	.footer-list a {
		font-size: 13.5px;
	}

	.footer-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.footer-cta .btn {
		width: 100%;
		text-align: center;
	}

	.footer-bottom {
		font-size: 12.5px;
	}

	.contact-block {
		margin-bottom: 12px;
	}
}

/* ====================================================================
≤ 575.98px — Phones
==================================================================== */
@media (max-width: 575.98px) {

	:root {
		--container-max: 100%;
		--space-section-y: clamp(36px, 9vw, 56px);
	}


	.site-header .container,
	.site-header .container-fluid {
		padding-left: 10px;
		padding-right: 10px;
	}

	.custom-navbar {
		padding: 5px 6px 5px 10px;
		
	}



	.brand-text {
		font-size: 14px;
		letter-spacing: 0;
	}

	.btn-nav {
		padding: 6px 10px;
		font-size: 14px;
		margin-right: 4px;
		border-radius: 5px;
	}

	.menu-burger {
		padding: 6px 8px;
	}

	.burger-bar {
		width: 18px;
	}

	/* Hero */
	.hero-section {
		padding: 150px 0 48px;
	}

	.hero-tag {
		font-size: 11px;
		letter-spacing: 1px;
		padding: 4px 10px;
	}

	.hero-title {
		font-size: clamp(26px, 9vw, 34px);
		line-height: 1.15;
	}

	.hero-description {
		font-size: 14.5px;
		line-height: 1.55;
		margin-bottom: 20px;
	}

	/* Page banner */
	.page-banner {
		min-height: 200px;
		padding: 130px 0 30px;
	}

	.page-banner .hero-title,
	.page-banner-content .hero-title {
		font-size: clamp(24px, 8vw, 32px);
	}

	.page-breadcrumb {
		font-size: 12px;
		flex-wrap: wrap;
		gap: 4px 8px;
	}

	/* Sections */
	.section-title {
		font-size: clamp(22px, 7.5vw, 30px);
		line-height: 1.18;
	}

	.section-sub {
		font-size: 14.5px;
	}

	/* Partners */
	.partners-section {
		padding: 18px 0;
	}

	.partners-wrap {
		gap: 12px 18px;
	}

	.partner-logo-img {
		max-height: 30px;
	}

	/* Stats — single column on small mobile */
	.stats-row {
		gap: 18px;
		margin-top:0!important;
	}

	.stats-row .stat-item {
		flex: 0 0 100%;
	}

	.stat-number {
		font-size: 32px;
		display: block!important;
	}

	.service-stat {
		flex: 0 0 100%;
	}

	/* Cards — full width, generous breathing */
	.service-card,

	.news-card,
	.team-card,
	.position-card,
	.benefit-card,
	.capability-card,
	.location-card,
	.staff-card,
	.region-card,
	.contact-tile,
	.feature-block,
	.apply-card,
	.service-info-card,
	.job-header-card {
		padding: 16px;
		border-radius: 12px;
	}

	.service-image,
	.project-image,
	.news-card-image {
		position: relative;
	}

	.service-image img,
	.project-image img,
	.news-card-image img {
		width: 100%;

	}

	.leadership-grid .project-card .project-info{
		height:auto!important;
	}

	.service-corner-btn {
		width: 36px;
		height: 36px;
	}


	/* Project rows */
	.project-row {

		flex-direction: column;
		align-items: flex-start;
	}

	.project-row-num {
		font-size: 22px;
	}

	.project-row-body {
		width: 100%;
	}

	.project-row-tag {
		font-size: 11px;
		padding: 2px 8px;
	}

	/* News */
	.news-featured-title {
		font-size: 20px;
	}

	.news-card-cat {
		font-size: 11px;
	}

	/* Forms */
	.contact-form-aside {
		min-height: 220px;
		padding: 22px 18px;
	}



	.form-control {
		padding: 11px 12px;
		border-radius: 8px;
	}

	/* Detail / article */
	.detail-prose,
	.article-prose {
		font-size: 15px;
		line-height: 1.65;
	}

	.detail-prose h2,
	.article-prose h2 {
		font-size: 20px;
	}

	.detail-prose h3,
	.article-prose h3 {
		font-size: 17px;
	}

	.detail-prose img,
	.article-prose img {
		width: 100%;
		height: auto;
		margin: 14px 0;
	}

	/* Author / share */
	.author-avatar {
		width: 40px;
		height: 40px;
	}

	.author-name {
		font-size: 14px;
	}

	.author-role {
		font-size: 12px;
	}

	.share-btn {
		width: 34px;
		height: 34px;
	}

	/* Specs */
	.service-specs-grid {
		grid-template-columns: 1fr !important;
	}

	.service-spec-icon {
		width: 40px;
		height: 40px;
	}

	/* Process */
	.process-step-num {
		font-size: 22px;
	}

	.process-step-title {
		font-size: 17px;
	}

	.process-step-desc {
		font-size: 14px;
	}

	/* Newsletter */
	.newsletter-card {
		padding: 22px 16px;
		border-radius: 14px;
	}

	.newsletter-card .careers-title {
		font-size: clamp(20px, 7vw, 26px);
	}

	.newsletter-card .careers-desc {
		font-size: 14px;
	}


	/* Careers */
	.careers-tag {
		font-size: 11px;
	}

	.careers-desc {
		font-size: 14px;
	}

	.careers-pattern {
		opacity: 0.4;
	}

	/* Offices */
	.office-tile {
		padding: 14px;
	}

	/* Sidemenu */
	.sidemenu {
		width: min(320px, 92vw);
	}

	.sidemenu-link {
		font-size: 16px;
	}

	.sidemenu-contact-row {
		        flex-direction: row;
        align-items: center;
        gap: 10px;
	}
	
	.footer-divider {
    	margin: 0px 0 24px;
	}

	/* Footer */
	.site-footer {
		padding-top: 40px;
		padding-bottom: 18px;
		text-align: left;
	}

	.footer-brand {
		margin-bottom: 14px;
	}

	.footer-about {
		font-size: 13.5px;
	}

	.footer-list a {
		font-size: 13px;
		padding: 4px 0;
		display: inline-block;
	}

	.footer-bottom {
		font-size: 11.5px;
		line-height: 1.5;
	}

	.copyright {
		text-align: center;
	}

	.social-link {
		width: 32px;
		height: 32px;
	}

	/* Buttons */
	.btn {
		padding: 12px 18px;
		font-size: 15px;
	}
}

/* ====================================================================
≤ 380px — Very small phones (Galaxy Fold outer, old iPhone SE)
==================================================================== */
@media (max-width: 380px) {

	.container,
	.container-fluid {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Header */
	.brand-text {
		display: none;
	}

	.btn-nav {
		padding: 5px 8px;
		font-size: 14px;
	}

	/* Hero */
	.hero-section {
		padding: 150px 0 40px;
	}

	.hero-title {
		font-size: clamp(22px, 9vw, 28px);
	}

	.hero-description {
		font-size: 14px;
	}

	.hero-tag {
		font-size: 10.5px;
		padding: 3px 9px;
	}

	/* Page banner */
	.page-banner {
		min-height: 180px;
	}

	/* Sections */
	.section-title {
		font-size: clamp(20px, 8vw, 26px);
	}

	.section-sub,
	.section-sub-left {
		font-size: 13.5px;
	}

	/* Cards */
	.service-card,

	.news-card,
	.team-card,
	.position-card,
	.benefit-card,
	.capability-card,
	.location-card,
	.staff-card,
	.region-card,
	.contact-tile,
	.feature-block,
	.apply-card,
	.service-info-card {
		padding: 14px;
		border-radius: 10px;
	}

	.service-title,
	.project-title,
	.news-card-title,
	.team-name,
	.position-title,
	.benefit-title,
	.capability-title {
		font-size: 16.5px;
	}

	/* Stats */
	.stat-number {
		font-size: 28px;
	}

	.stat-label {
		font-size: 12px;
	}

	/* Project rows */
	.project-row-title {
		font-size: 16px;
	}

	.project-row-desc {
		font-size: 13px;
	}

	.project-row-meta {
		font-size: 11.5px;
	}

	/* Forms */
	.form-control {
		padding: 10px 12px;
	}

	.contact-form-panel,
	.apply-form-card {
		padding: 18px 14px;
	}

	/* Detail */
	.detail-prose,
	.article-prose {
		font-size: 14.5px;
	}

	.detail-prose h2,
	.article-prose h2 {
		font-size: 18px;
	}

	/* Buttons */
	.btn {
		padding: 11px 16px;
		font-size: 14px;
	}

	.hero-buttons .btn {
		font-size: 14px;
	}

	/* Newsletter */
	.newsletter-card {
		padding: 20px 14px;
	}

	/* Sidemenu */
	.sidemenu {
		width: 92vw;
	}

	/* Footer */
	.footer-list a {
		font-size: 12.5px;
	}

	.footer-bottom {
		font-size: 11px;
	}
}

/* ====================================================================
Landscape phones — short viewports
==================================================================== */
@media (max-height: 480px) and (orientation: landscape) {

	.hero-section {
		min-height: auto;
		height: auto;
		padding: 150px 0 50px;
	}

	.page-banner {
		min-height: 220px;
		padding: 100px 0 30px;
	}
}

/* ====================================================================
Touch-only refinements (no hover on mobile)
==================================================================== */
@media (hover: none) and (pointer: coarse) {

	.btn-red:hover,
	.btn-blue:hover,
	.service-card:hover,
	.project-card:hover,
	.news-card:hover,
	.team-card:hover {
		transform: none;
	}
}


/* =========================================================
FLOATING SHARE PANEL + SHARE-ON-SOCIAL MODAL (news-detail)
========================================================= */
.share-panel {
	position: sticky !important;
	top: 110px !important;
	width:100px;
	margin:0 auto;
	z-index: 950;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 18px 14px;
	background: #fff;
	border-radius: 60px;

}

.share-panel-label {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--navy);
	font-size: 13px;
	letter-spacing: 1px;
	margin-bottom: 2px;
}

.share-panel-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(18, 59, 124, .12);
	color: var(--navy);
	font-size: 18px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
	padding: 0;
}

.share-panel-btn:hover,
.share-panel-btn:focus-visible {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
	transform: translateY(-2px);
	outline: none;
}

/* =========================================================
Careers — Culture Bento Gallery (unique editorial layout)
========================================================= */
.culture-head {
	text-align: center;
	margin-bottom: clamp(40px, 4vw, 60px);
}

.culture-bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(4, clamp(120px, 12vw, 170px));
	grid-template-areas:
		"a a a b b c"
		"a a a b b c"
		"a a a d e e"
		"f f g d e e";
	gap: 14px;
}

.bento-tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--navy);
	background-size: cover;
	background-position: center;
	cursor: pointer;
	isolation: isolate;
	transition: transform .45s var(--easing), box-shadow .45s var(--easing);
}



.bento-tile:hover {
	transform: translateY(-6px);

}

.bento-tile:hover::before {
	transform: scale(1.08);
}

.bento-tile:hover::after {
	transform: translate3d(0, 0, 0);
}


.bento-tile--hero { grid-area: a; }
.bento-tile--b    { grid-area: b; }
.bento-tile--c    { grid-area: c; }
.bento-tile--d    { grid-area: d; }
.bento-tile--e    { grid-area: e; }
.bento-tile--f    { grid-area: f; }
.bento-tile--g    { grid-area: g; }

/* Permanent red corner accent on the hero tile so the brand always shows */
.bento-tile--hero::before {
	background-position: left center;
}

a.bento-tile {
	display: block;
	text-decoration: none;
	color: inherit;
}

a.bento-tile:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
}

@media (max-width: 991.98px) {

	.share-panel-btn {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
}

@media (max-width: 575.98px) {
	.share-panel {
		width:300px;
		justify-content:center;
		flex-direction: row;
		padding: 10px 18px;
		gap: 10px;
		border-radius: var(--radius-pill);
	}
	.share-panel-label {
		margin: 0 4px 0 0;
	}
}

/* ============= Share Modal ============= */
.share-modal .modal-content {
	border: none;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #fff;
}

.share-modal .modal-header {
	border-bottom: 1px solid rgba(18, 59, 124, .08);
	padding: 20px 28px;
	align-items: center;
}

.share-modal .modal-title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--navy);
	font-size: 22px;
	margin: 0;
	line-height: 1.2;
}

.share-modal .btn-close {
	box-shadow: none;
	opacity: .6;
	transition: opacity .25s ease;
}

.share-modal .btn-close:hover {
	opacity: 1;
}

.share-modal .modal-body {
	padding: 28px;
}

/* Crop frame — shows the full image (object-fit: contain) with a draggable crop rect on top */
.share-crop-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
	user-select: none;
	touch-action: none;
}

.share-crop-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	display: block;
}

/* The crop rectangle floats on top of the image */
.share-crop-rect {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border: 2px solid #2b8cff;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
	cursor: move;
	box-sizing: border-box;
	z-index: 2;
}

/* Rule-of-thirds grid lines inside the crop rect */
.share-crop-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.share-crop-grid-v,
.share-crop-grid-h {
	position: absolute;
	background: rgba(255, 255, 255, .55);
}

.share-crop-grid-v {
	top: 0;
	bottom: 0;
	width: 1px;
}

.share-crop-grid-h {
	left: 0;
	right: 0;
	height: 1px;
}

.share-crop-grid-v:nth-child(1) { left: 33.333%; }
.share-crop-grid-v:nth-child(2) { left: 66.666%; }
.share-crop-grid-h:nth-child(3) { top: 33.333%; }
.share-crop-grid-h:nth-child(4) { top: 66.666%; }

/* 8 resize handles — small squares on edges and corners */
.share-crop-handle {
	position: absolute;
	width: 12px;
	height: 12px;
	background: #fff;
	border: 1px solid #2b8cff;
	box-sizing: border-box;
	z-index: 3;
}

.share-crop-handle--nw { top: -6px;   left: -6px;   cursor: nwse-resize; }
.share-crop-handle--ne { top: -6px;   right: -6px;  cursor: nesw-resize; }
.share-crop-handle--se { bottom: -6px;right: -6px;  cursor: nwse-resize; }
.share-crop-handle--sw { bottom: -6px;left: -6px;   cursor: nesw-resize; }
.share-crop-handle--n  { top: -6px;   left: 50%;    transform: translateX(-50%); cursor: ns-resize; }
.share-crop-handle--s  { bottom: -6px;left: 50%;    transform: translateX(-50%); cursor: ns-resize; }
.share-crop-handle--w  { left: -6px;  top: 50%;     transform: translateY(-50%); cursor: ew-resize; }
.share-crop-handle--e  { right: -6px; top: 50%;     transform: translateY(-50%); cursor: ew-resize; }

.share-crop-hint {
	margin: 12px 0 0;
	font-size: 13px;
	color: #6b7280;
	line-height: 1.45;
}

/* Right column */
.share-label {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--navy);
	font-size: 16px;
	margin-bottom: 10px;
}

.share-textarea {
	width: 100%;
	border: 1px solid rgba(18, 59, 124, .15);
	border-radius: 6px;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.65;
	color: var(--navy);
	resize: vertical;
	min-height: 200px;
	background: #fcfcfd;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.share-textarea:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(18, 59, 124, .08);
	background: #fff;
}

.share-counter {
	text-align: right;
	font-size: 12px;
	color: #6b7280;
	margin: 6px 0 22px;
}

.share-section-title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--navy);
	font-size: 20px;
	margin: 0 0 14px;
	letter-spacing: -.2px;
}

.share-assets {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.share-asset-btn {
	padding: 12px 22px;
	border-radius: 8px;
	background: #0b0b0b;
	color: #fff;
	border: none;
	font-weight: var(--fw-semibold);
	font-size: 14px;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
	line-height: 1.2;
}

.share-asset-btn:hover,
.share-asset-btn:focus-visible {
	background: var(--red);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(207, 37, 35, .55);
	outline: none;
}

/* Toast */
.share-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translate(-50%, 24px);
	background: var(--navy);
	color: #fff;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	font-size: 14px;
	font-weight: var(--fw-semibold);
	box-shadow: 0 14px 32px -12px rgba(7, 20, 46, .4);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
	z-index: 1100;
	pointer-events: none;
}

.share-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.share-toast.is-error {
	background: var(--red);
}

@media (max-width: 767.98px) {
	.share-modal .modal-body {
		padding: 20px;
	}
	.share-modal .modal-header {
		padding: 16px 20px;
	}
	.values-section.py-0.faq-section,
	.about-section.py-0.safety,
	.pm-section.about-section.py-0{
		padding-top:50px!important;
		padding-bottom:50px!important;
	}
	.project-info{
		height:auto;
	}
	.share-textarea {
		min-height: 150px;
	}
	.share-asset-btn {
		flex: 1 1 auto;
		text-align: center;
	}
	.culture-bento {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(8, 180px);
		grid-template-areas:         "a"        "a"        "b"        "c"        "d"        "e"        "f"        "g";
		gap: 10px;
	}
}