@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin-var.woff2') format('woff2')
}

:root {
	--ink: #071a24;
	--muted: #60727a;
	--line: #d8e2e5;
	--paper: #f6f9f9;
	--white: #fff;
	--teal: #00a594;
	--teal-dark: #0F7182;
	--lime: #009688;
	--navy: #071f2d;
	--orange: #EE592F;
	--radius: 22px
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Inter, Arial, sans-serif
}

html {
	scroll-behavior: smooth
}

body {
	color: var(--ink);
	background: var(--paper);
	font-size: 16px;
	line-height: 1.6
}

a {
	color: inherit;
	text-decoration: none
}

img, video {
	display: block;
	width: 100%
}

button, input {
	font: inherit
}

.shell {
	width: min(1380px, calc(100% - 48px));
	margin-inline: auto;
}

.dark-bg
{
	
	background: var(--teal-dark);
}

.grey-bg
{
	
	background: var(--paper);
}

.dark-grey-bg
{
	
	background: var(--muted);
}

.white-bg
{
	
	background: var(--white);
}

.eyebrow {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--teal-dark)
}

.eyebrow1 {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--white)
}

.topline {
	background: var(--ink);
	color: #dce9ea
}

.topline-inner {
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: .78rem;
	letter-spacing: .04em
}

.signal {
	display: flex;
	align-items: center;
	gap: 9px
}

.signal-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lime);
	box-shadow: 0 0 0 5px rgba(201, 243, 91, .12)
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid rgba(216, 226, 229, .9);
	background: rgba(246, 249, 249, .88);
	backdrop-filter: blur(18px)
}

.nav {
	min-height: 82px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: max-content;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color:#003B74;
	
}

.brand img {
	width: 54px;
	height: 54px
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 34px;
	font-size: .9rem;
	font-weight: 600;
	color: #324951
}

.nav-action {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	font-size: .86rem;
	font-weight: 700;
	transition: .2s
}

.nav-action:hover {
	color: #fff;
	background: var(--ink)
}

.hero {
	padding: 40px 0 40px
}

.hero-grid {
	min-height: 680px;
	display: grid;
	grid-template-columns: .88fr 1.12fr;
	border: 1px solid var(--line);
	border-radius: 30px;
	overflow: hidden;
	background: var(--white);
	box-shadow: 0 30px 80px rgba(7, 31, 45, .09)
}

.hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(38px, 5vw, 76px);
}

.hero-title {
	max-width: 650px;
	margin-top: 28px;
	font-size: clamp(3.6rem, 5vw, 7rem);
	font-weight: 600;
	line-height: .9;
	letter-spacing: -.075em;

}

.hero-title span {
	color: var(--teal-dark)
}

.hero-bottom {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;
	align-items: end
}

.hero-text {
	max-width: 480px;
	color: var(--muted);
	font-size: 1.08rem;
}

.round-link {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: var(--ink);
	font-size: 1.5rem;
	transition: .25s
}

.round-link:hover {
	transform: rotate(45deg);
	background: var(--teal-dark)
}

.hero-media {
	position: relative;
	min-height: 640px;
	background: #082231;
	overflow: hidden;
}

.hero-media>img {
	height: 100%;
	object-fit: cover;
	filter: saturate(.82) contrast(1.08)
}

.hero-media:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 26, 36, .05),
		rgba(7, 26, 36, .6))
}

.media-note {
	position: absolute;
	z-index: 2;
	left: 30px;
	right: 30px;
	bottom: 28px;
	display: flex;
	justify-content: space-between;
	align-items: end;
	color: #fff
}

.media-note strong {
	max-width: 300px;
	font-size: 1.35rem;
	line-height: 1.25
}

.media-index {
	font-size: .78rem;
	letter-spacing: .15em;
	text-transform: uppercase
}

.proof {
	padding: 28px 0 100px
}

.proof-grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line)
}

.proof-intro, .stat {
	padding: 28px 26px
}

.stat {
	border-left: 1px solid var(--line)
}

.stat strong {
	display: block;
	font-size: 5.25rem;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -.05em;
	color:#009688;
}

.stat span {
	display: block;
	margin-top: 9px;
	color: var(--muted);
	font-size: 1.02rem
}

.section {
	padding: 105px 0
}

.section-head {
	display: grid;
	grid-template-columns: 1fr 1.8fr;
	gap: 40px;
	align-items: start;
	margin-bottom: 54px
}

.section-title {
	max-width: 850px;
	font-size: clamp(3rem, 4.5vw, 5rem);
	font-weight: 600;
	line-height: .98;
	letter-spacing: -.055em
}


.section-title-white {
	max-width: 850px;
	font-size: clamp(3rem, 5vw, 6rem);
	font-weight: 600;
	line-height: .98;
	letter-spacing: -.055em;
	color:#fff;
}



.section-copy {
	max-width: 700px;
	margin-top: 20px;
	color: var(--muted);
	font-size: 1.25rem
}


.section-copy-white {
	max-width: 700px;
	margin-top: 20px;
	color: var(--white);
	font-size: 1.25rem
}

.expertise {
	background: var(--white);
	border-block: 1px solid var(--line)
}

.bento {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	grid-template-rows: 310px 310px;
	gap: 16px
}

.expert-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: #e8eff1
}

.expert-card:first-child {
	grid-row: 1/3
}

.expert-card img {
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease
}

.expert-card:hover img {
	transform: scale(1.035)
}

.expert-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 35%, rgba(5, 24, 34, .88))
}

.expert-content {
	position: absolute;
	z-index: 2;
	left: 28px;
	right: 28px;
	bottom: 26px;
	color: #fff
}

.expert-number {
	display: block;
	margin-bottom: 8px;
	font-size: .72rem;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.expert-content h3 {
	font-size: clamp(2rem, 2.5vw, 2.5rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.04em
}

.expert-content p {
	max-width: 510px;
	margin-top: 10px;
	color: #d5e2e5;
	font-size: .92rem
}

.people-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 18px
}

.person {
	grid-column: span 4;
	border-top: 1px solid var(--ink);
	padding-top: 14px
}

.person:nth-child(1), .person:nth-child(4) {
	grid-column: span 5
}

.person:nth-child(2), .person:nth-child(5) {
	grid-column: span 3
}

.person:nth-child(3), .person:nth-child(6) {
	grid-column: span 4
}

.person img {
	height: 360px;
	object-fit: cover;
	border-radius: 2px;
	filter: grayscale(100%);
	transition: .35s
}

.person:hover img {
	filter: grayscale(0)
}

.person h3 {
	margin-top: 18px;
	font-size: 1.25rem;
	line-height: 1.2
}

.person p {
	margin-top: 4px;
	color: var(--muted);
	font-size: .84rem
}

.quote-band {
	padding: 100px 0 100px 0px;
	
	 
}

.quote-box {
	display: grid;
	grid-template-columns: .65fr 1.35fr;
	gap: 60px;
	padding: clamp(45px, 6vw, 75px);
	color: #f5fbfb;
	background: rgba(0, 110, 99, 0.4);
	border-radius: 30px;
	padding-top:100px;
	padding-bottom:100px;	
}

.quote-mark {
	font-size: 12rem;
	line-height: .7;
	color: var(--lime)
}

blockquote {
	font-size: clamp(2rem, 4vw,2rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.05em;
}

.quote-meta {
	margin-top: 30px;
	color: #adc2c8;
	font-size: .9rem
}

.video-section {
	padding: 40px 0 40px;
	background: rgba(0, 0, 2, .5);

}

.video-frame {
	position: relative;
	height: min(70vh, 720px);
	min-height: 500px;
	overflow: hidden;
	border-radius: 30px;
	background: #02121c
}

.video-frame video {
	height: 100%;
	object-fit: cover
}

.video-frame:after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(3, 18, 28, .5)
}

.video-copy {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 30px;
	text-align: center;
	color: #fff;
}

.video-copy h2 {
	max-width: 11ch;
	font-size: clamp(3rem, 6vw, 6rem);
	font-weight: 600;
	line-height: .9;
	letter-spacing: -.065em;
	text-shadow: 0 8px 30px rgba(0, 0, 0, .3);
	margin-top:75px;
	text-transform: capitalize !important;
	
}

.video-copy p {
	max-width: 50ch;
	font-size: clamp(1rem, 8vw, 1.5rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.025em;
	text-shadow: 0 8px 30px rgba(0, 0, 0, .3);
	bottom:40px;
	position:relative;
}


.video-copy a {
	font-size: 1.2rem;
	font-weight: 400;
	text-shadow: 0 8px 30px rgba(0, 0, 0, .3);
	text-transform:underline;
	padding:10px 25px;
	border:2px solid #fff;
	color:#fff;
	border-radius:40px;
	bottom:80px;
	position:relative;
}


.video-copy a:hover {
	font-size: 1.2rem;
	font-weight: 400;
	text-shadow: 0 8px 30px rgba(0, 0, 0, .3);
	padding:10px 25px;
	border:2px solid #00A393;
	color:#fff;
	border-radius:40px;
	bottom:80px;
	position:relative;
	background-color:#00A393;
	
	
}

.faq-wrap {
	display: grid;
	grid-template-columns: .78fr 1.22fr;
	gap: 80px
}

.faq-side {
	position: sticky;
	top: 130px;
	align-self: start
}

.faq-side h2 {
	margin-top: 14px;
	font-size: clamp(2.8rem, 5vw, 5.5rem);
	font-weight: 600;
	line-height: .95;
	letter-spacing: -.055em
}

.faq-list {
	border-top: 1px solid var(--line)
}

details {
	border-bottom: 1px solid var(--line)
}

summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 22px;
	padding: 27px 0;
	cursor: pointer;
	font-size: 1.08rem;
	font-weight: 650
}

summary::-webkit-details-marker {
	display: none
}

summary:after {
	content: "+";
	font-size: 1.35rem;
	color: var(--teal-dark)
}

details[open] summary:after {
	content: "−"
}

.answer {
	max-width: 690px;
	padding: 0 45px 28px 0;
	color: var(--muted)
}

.contact {
	padding: 40px 0 64px
}

.contact-panel {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 70px;
	padding: clamp(42px, 6vw, 88px);
	border-radius: 30px;
	background: var(--lime);
	color:#fff;
}

.contact-panel h2 {
	max-width: 780px;
	font-size: clamp(3rem, 4.6vw, 5rem);
	font-weight: 650;
	line-height: .9;
	letter-spacing: -.065em
}

.contact-panel p {
	margin-top: 24px;
	max-width: 560px
}

.contact-form {
	align-self: end;
	display: grid;
	gap: 12px
}

.contact-form input {
	width: 100%;
	min-height: 60px;
	padding: 0 18px;
	border: 1px solid rgba(7, 26, 36, .25);
	border-radius: 8px;
	background: rgba(255, 255, 255, .72);
	outline: none
}

.contact-form button {
	min-height: 60px;
	border: 0;
	border-radius: 8px;
	color: #fff;
	background: var(--ink);
	font-weight: 750;
	cursor: pointer
}

.contact-form small {
	font-size: .75rem
}

.footer {
	padding: 30px 0 46px;
	background-color:#002;
}

.footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 28px;
	color: var(--muted);
	font-size: .82rem;
	
}

.footer-links {
	display: flex;
	gap: 24px
}

.article-hero {
	padding: 90px 0 55px
}

.article-title {
	max-width: 1100px;
	margin-top: 20px;
	font-size: clamp(3.4rem, 8vw, 8rem);
	font-weight: 600;
	line-height: .91;
	letter-spacing: -.065em
}

.article-cover {
	height: min(70vh, 760px);
	object-fit: cover;
	border-radius: 30px
}

.article-layout {
	display: grid;
	grid-template-columns: .55fr 1.45fr;
	gap: 80px;
	padding: 70px 0 120px
}

.article-meta {
	color: var(--muted);
	font-size: .86rem
}

.article-meta strong {
	display: block;
	margin-bottom: 8px;
	color: var(--ink)
}

.article-body {
	max-width: 780px;
	font-size: 1.08rem
}

.article-body>p:first-child {
	font-size: 1.45rem;
	line-height: 1.45;
	color: #29424c
}

.article-body p {
	margin-bottom: 22px
}

.article-body h2 {
	margin: 62px 0 18px;
	font-size: 2.5rem;
	line-height: 1.05;
	letter-spacing: -.045em
}

.article-quote {
	margin: 48px 0;
	padding: 34px;
	border-left: 5px solid var(--teal);
	background: #e9f3f3;
	font-size: 1.35rem;
	font-weight: 600
}

.not-found {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	background: var(--navy);
	color: #fff
}

.not-found-inner {
	text-align: center
}

.not-found strong {
	display: block;
	font-size: clamp(7rem, 24vw, 20rem);
	line-height: .8;
	letter-spacing: -.09em;
	color: var(--lime)
}

.not-found h1 {
	margin-top: 30px;
	font-size: 2rem
}

.not-found p {
	margin: 12px auto 28px;
	max-width: 480px;
	color: #b8cbd0
}

.not-found a {
	display: inline-block;
	padding: 13px 20px;
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-weight: 700
}

@media ( max-width :960px) {
	.nav {
		grid-template-columns: 1fr auto
	}
	.nav-links {
		display: none
	}
	.hero-grid {
		grid-template-columns: 1fr
	}
	.hero-copy {
		min-height: 620px
	}
	.hero-media {
		min-height: 540px
	}
	.proof-grid {
		grid-template-columns: 1fr 1fr
	}
	.proof-intro {
		grid-column: 1/-1
	}
	.stat:nth-of-type(1) {
		border-left: 0
	}
	.bento {
		grid-template-columns: 1fr;
		grid-template-rows: 520px 330px 330px
	}
	.expert-card:first-child {
		grid-row: auto
	}
	.section-head, .quote-box, .faq-wrap, .contact-panel, .article-layout {
		grid-template-columns: 1fr
	}
	.faq-side {
		position: static
	}
	.person, .person:nth-child(n) {
		grid-column: span 6
	}
	.article-layout {
		gap: 30px
	}
}

@media ( max-width :640px) {
	.shell {
		width: min(100% - 24px, 1380px)
	}
	.topline-inner span:last-child {
		display: none
	}
	.site-header .nav {
		min-height: 70px
	}
	.brand {
		font-size: .9rem; 
	}
	.brand img {
		width: 32px;
		height: 32px
	}
	.hero {
		padding-top: 14px
	}
	.hero-grid {
		border-radius: 20px
	}
	.hero-copy {
		min-height: 540px;
		padding: 30px 24px
	}
	.hero-title {
		font-size: 3.8rem
	}
	.hero-media {
		min-height: 420px
	}
	.hero-bottom {
		grid-template-columns: 1fr
	}
	.round-link {
		display: none
	}
	.proof {
		padding-bottom: 65px
	}
	.proof-grid {
		grid-template-columns: 1fr
	}
	.proof-intro, .stat {
		grid-column: auto;
		border-left: 0;
		border-bottom: 1px solid var(--line)
	}
	.section {
		padding: 72px 0
	}
	.section-head {
		margin-bottom: 34px
	}
	.bento {
		grid-template-rows: 430px 310px 310px
	}
	.expert-content {
		left: 20px;
		right: 20px;
		bottom: 20px
	}
	.people-grid {
		gap: 34px
	}
	.person, .person:nth-child(n) {
		grid-column: 1/-1
	}
	.person img {
		height: 420px
	}
	.quote-band, .video-section {
		padding-bottom: 72px;
	
	}
	.quote-box {
		padding: 42px 24px;
		border-radius: 20px;
	}
	.quote-mark {
		font-size: 5rem;
	}
	

	.video-frame {
		height: 68vh;
		min-height: 480px;
		border-radius: 20px
	}
	.contact {
		padding-top: 72px
	}
	.contact-panel {
		padding: 42px 24px;
		border-radius: 20px
	}
	.footer-row {
		align-items: flex-start;
		gap: 20px;
		flex-direction: column
	}
}

@media ( prefers-reduced-motion :reduce) {
	html {
		scroll-behavior: auto
	}
	* {
		transition: none !important
	}
}

.round-link:hover {
	transform: none
}

.aurora-flow {
	position: absolute;
	z-index: 1;
	inset: -18%;
	pointer-events: none;
	overflow: hidden;
	mix-blend-mode: screen;
	filter: blur(18px) saturate(1.25)
}

.aurora-flow i {
	position: absolute;
	display: block;
	width: 78%;
	height: 58%;
	border-radius: 50%;
	opacity: .48;
	transform-origin: 50% 100%;
	will-change: transform, opacity;
	background: radial-gradient(ellipse at 50% 80%, rgba(79, 255, 189, .92)
		0%, rgba(48, 214, 190, .5) 24%, rgba(105, 79, 255, .2) 48%,
		transparent 72%);
	animation: aurora-drift 12s ease-in-out infinite alternate
}

.aurora-flow i:first-child {
	top: -8%;
	left: -24%;
	transform: rotate(-18deg) skewX(-12deg)
}

.aurora-flow i:last-child {
	right: -25%;
	bottom: -2%;
	opacity: .32;
	transform: rotate(24deg) scale(1.15);
	animation-name: aurora-drift-reverse;
	animation-duration: 16s;
	animation-delay: -6s;
	background: radial-gradient(ellipse at 50% 70%, rgba(82, 255, 155, .78)
		0%, rgba(40, 198, 207, .44) 30%, rgba(123, 75, 255, .2) 52%,
		transparent 74%)
}

@
keyframes aurora-drift { 0%{
	transform: translate3d(-5%, -2%, 0) rotate(-18deg) skewX(-12deg)
		scale(.95);
	opacity: .28
}

45
%
{
transform
:
translate3d(
13%
,
12%
,
0
)
rotate(
-7deg
)
skewX(
8deg
)
scale(
1.14
);
opacity
:
.58
}
100
%
{
transform
:
translate3d(
30%
,
2%
,
0
)
rotate(
6deg
)
skewX(
-5deg
)
scale(
1.03
);
opacity
:
.38
}
}
@
keyframes aurora-drift-reverse { 0%{
	transform: translate3d(6%, 10%, 0) rotate(24deg) scale(1.06);
	opacity: .24
}

50
%
{
transform
:
translate3d(
-16%
,
-8%
,
0
)
rotate(
10deg
)
scale(
1.25
);
opacity
:
.5
}
100
%
{
transform
:
translate3d(
-29%
,
8%
,
0
)
rotate(
-3deg
)
scale(
1.12
);
opacity
:
.3
}
}
@media ( prefers-reduced-motion :reduce) {
	.aurora-flow i {
		animation: none
	}
}

.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	font-size: 1.25rem;
	cursor: pointer
}

.nav-links a[aria-current="page"] {
	color: var(--teal-dark)
}

.page-hero {
	padding: 150px 0 50px
}

.page-hero-grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 70px;
	align-items: end
}

.page-title {
	font-size: clamp(3rem, 5vw, 5rem);
	font-weight: 600;
	line-height: .92;
	letter-spacing: -.075em
}


.page-title h1 {
	font-size: clamp(2rem, 9vw, 8rem);
	font-weight: 600;
	line-height: .82;
	letter-spacing: -.075em
}

.page-lead {
	max-width: 620px;
	color: var(--muted);
	font-size: 1.25rem;
	line-height: 1.55
}

.page-cover {
	height: min(66vh, 720px);
	object-fit: cover;
	border-radius: 30px;
	margin-bottom:140px;
	
}

.split-copy {
	display: grid;
	grid-template-columns: .7fr 1.3fr;
	gap: 70px
}

.split-copy h2 {
	font-size: clamp(2.7rem, 5vw, 6rem);
	font-weight: 600;
	line-height: .96;
	letter-spacing: -.055em
}

.split-copy-text {
	max-width: 740px;
	color: var(--muted);
	font-size: 1.2rem;
	margin-top:25px;
	margin-bottom:50px;
}

.split-copy-text p+p {
	margin-top: 22px
}

.value-grid, .service-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px}

.value-card, .service-card, .product-card {
	min-height: 330px;
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.value-card span, .service-card span, .product-card span {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--teal-dark)
}

.value-card h3, .service-card h3, .product-card h3 {
	margin-top: 2%;
	font-size: 1.8rem;
	line-height: 1.05;
	letter-spacing: -.04em;
	color: var(--grey)
}

.value-card p, .service-card p, .product-card p {
	margin-top: 16px;
	color: var(--muted)
}


.product-card ul {
	margin-left: 20px;
}


.service-card:nth-child(2), .product-card:nth-child(2) {
	background: var(--navy);
	color: #fff
}

.service-card:nth-child(2) p, .product-card:nth-child(2) p {
	color: #b9cbd0
}



.service-band {
	padding: 75px;
	border-radius: 30px;
	background: var(--lime)
}

.service-band h2 {
	max-width: 930px;
	font-size: clamp(3rem, 6vw, 6.5rem);
	font-weight: 650;
	line-height: .92;
	letter-spacing: -.06em
}

.product-card img {

	height: 360px;
	margin: -8px -8px 16px;
	width: calc(100% + 16px);
	object-fit: cover;
	border-radius: 14px
}


.service-card img {
	height: 360px;
	margin: -8px -8px 16px;
	width: calc(100% + 16px);
	object-fit: cover;
	border-radius: 14px
}

.contact-page {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px
}

.contact-details {
	display: grid;
	gap: 34px;
	margin-top: 50px
}

.contact-detail {
	padding-top: 18px;
	border-top: 1px solid var(--line)
}

.contact-detail span {
	display: block;
	color: var(--muted);
	font-size: .85rem
}

.contact-detail strong {
	display: block;
	margin-top: 8px;
	font-size: 1.15rem
}

.full-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	padding: 38px;
	border-radius: 24px;
	background: #fff;
	border: 1px solid var(--line)
}

.field {
	display: grid;
	gap: 8px
}

.field.full {
	grid-column: 1/-1
}

.field label {
	font-size: .84rem;
	font-weight: 700
}

.field input, .field textarea, .field select {
	width: 100%;
	padding: 15px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: #f8fbfb;
	font: inherit
}

.field textarea {
	min-height: 150px;
	resize: vertical
}

.full-form button {
	grid-column: 1/-1;
	min-height: 58px;
	border: 0;
	border-radius: 9px;
	background: var(--ink);
	color: #fff;
	font-weight: 750;
	cursor: pointer
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px
}

.news-card {
	grid-column: span 4;
	border-top: 1px solid var(--ink);
	padding-top: 14px
}

.news-card.featured {
	grid-column: span 8
}

.news-card img {
	height: 340px;
	object-fit: cover
}

.news-card.featured img {
	height: 520px
}

.news-card h2 {
	margin-top: 18px;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -.03em
}

.news-card.featured h2 {
	font-size: clamp(2rem, 4vw, 4rem)
}

.news-card p {
	margin-top: 8px;
	color: var(--muted);
	font-size: .85rem
}

@media ( max-width :960px) {
	.menu-toggle {
		display: grid;
		place-items: center;
		justify-self: end
	}
	.nav-action {
		display: none
	}
	.nav {
		grid-template-columns: 1fr auto
	}
	.nav-links {
		display: none;
		position: absolute;
		top: 70px;
		left: 24px;
		right: 24px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px;
		border: 1px solid var(--line);
		border-radius: 16px;
		background: #fff;
		box-shadow: 0 20px 50px rgba(7, 31, 45, .14)
	}
	.nav-links.is-open {
		display: flex
	}
	.nav-links a {
		padding: 13px 14px;
		border-radius: 9px
	}
	.nav-links a:hover {
		background: var(--paper)
	}
	.page-hero-grid, .split-copy, .contact-page {
		grid-template-columns: 1fr
	}
	.value-grid, .service-grid, .product-grid {
		grid-template-columns: 1fr 1fr
	}
	.news-card, .news-card.featured {
		grid-column: span 6
	}
	.news-card.featured img {
		height: 420px
	}
}

@media ( max-width :640px) {
	.page-hero {
		padding: 55px 0 45px
	}
	.page-title {
		font-size: 4.3rem
	}
	.page-cover {
		height: 480px;
		border-radius: 20px
	}
	.value-grid, .service-grid, .product-grid {
		grid-template-columns: 1fr
	}
	.service-band {
		padding: 42px 24px;
		border-radius: 20px
	}
	.full-form {
		grid-template-columns: 1fr;
		padding: 24px
	}
	.field.full {
		grid-column: auto
	}
	.news-card, .news-card.featured {
		grid-column: 1/-1
	}
	.news-card img, .news-card.featured img {
		height: 360px
	}
}

.team-group {
	width: 100%;
	overflow: hidden;
	border-radius: 30px;
	background: #dfe8eb;
	box-shadow: 0 24px 60px rgba(7, 31, 45, .1)
}

.team-group img {
	width: 100%;
	height: clamp(480px, 62vw, 780px);
	object-fit: cover;
	object-position: center
}

@media ( max-width :640px) {
	.team-group {
		border-radius: 20px
	}
	.team-group img {
		height: 430px
	}
}

.page-hero-grid {
	grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
	align-items: stretch
}

.page-visual {
	display: grid;
	grid-template-rows: minmax(250px, 1fr) auto;
	gap: 22px;
	align-self: stretch
}

.page-visual img {
	width: 100%;
	height: 100%;
	min-height: 280px;
	max-height: 360px;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 18px 44px rgba(7, 31, 45, .1)
}

.page-visual .page-lead {
	padding: 0 4px
}

.team-group {
	height: min(78vh, 820px);
	min-height: 500px
}

.team-group img {
	height: 100%;
	min-height: 0
}

.expert-card-more {
	display: none
}

.bento.show-all {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, 360px)
}

.bento.show-all .expert-card:first-child {
	grid-row: auto
}

.bento.show-all .expert-card-more {
	display: block
}

.expertise-more {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 28px auto 0;
	padding: 13px 22px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	font-weight: 750;
	cursor: pointer;
	transition: background .2s, color .2s
}

.expertise-more:hover {
	background: var(--ink);
	color: #fff
}

.expertise-more span {
	font-size: 1.25rem;
	line-height: 1
}

@media ( max-width :960px) {
	.page-hero-grid {
		grid-template-columns: 1fr
	}
	.page-visual {
		grid-template-columns: 1.1fr .9fr;
		grid-template-rows: auto;
		align-items: end
	}
	.page-visual img {
		max-height: 340px
	}
	.bento.show-all {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 360px)
	}
}

@media ( max-width :640px) {
	.page-visual {
		grid-template-columns: 1fr
	}
	.page-visual img {
		height: 300px;
		min-height: 300px
	}
	.team-group {
		height: 68vh;
		min-height: 480px
	}
	.bento.show-all {
		grid-template-rows: repeat(4, 310px)
	}
}

/* Unified card system: every card in a group shares one base treatment. */
.value-card, .service-card, .product-card {
	position: relative;
	overflow: hidden;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 8px 24px rgba(7, 31, 45, .04);
	transition: transform .32s cubic-bezier(.2, .75, .25, 1),
		background-color .32s ease, color .32s ease, border-color .32s ease,
		box-shadow .32s ease;
}

.service-card:nth-child(2), .product-card:nth-child(2) {
	background: #fff;
	color: var(--ink)
}

.service-card:nth-child(2) p, .product-card:nth-child(2) p {
	color: var(--muted)
}

.value-card:hover, .service-card:hover, .product-card:hover {
	transform: translateY(-8px);
	border-color: var(--teal-dark);
	background: var(--teal-dark);
	color: #fff;
	box-shadow: 0 22px 46px rgba(7, 76, 78, .18);
}

.value-card:hover span, .service-card:hover span, .product-card:hover span
	{
	color: var(--lime)
}

.value-card:hover p, .service-card:hover p, .product-card:hover p,
	.service-card:nth-child(2):hover p, .product-card:nth-child(2):hover p
	{
	color: #d7e8e8
}

.product-card img {
	transition: transform .55s cubic-bezier(.2, .75, .25, 1), filter .35s
		ease
}

.product-card:hover img {
	transform: scale(1.045);
	filter: saturate(1.12)
}

.product-card .dna
{
	
	height:140px;
	width:140px;
	position:relative;
	left:0%;

	/* fill: #ff4500; 
	stroke: #333333; 
	transition: fill 0.3s ease; */
}

.product-card .dna-text
{
	position:relative;
	left:5%;
}


.bento {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: 430px
}

.expert-card:first-child {
	grid-row: auto
}

.expert-card {
	isolation: isolate;
	box-shadow: 0 8px 24px rgba(7, 31, 45, .06);
	transition: transform .35s cubic-bezier(.2, .75, .25, 1), box-shadow
		.35s ease;
}

.expert-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px rgba(7, 31, 45, .2)
}

.expert-card .expert-shade {
	transition: background .35s ease
}

.expert-card:hover .expert-shade {
	background: linear-gradient(180deg, rgba(5, 112, 112, .18) 5%,
		rgba(5, 76, 78, .94) 100%)
}

.bento.show-all {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: 430px
}

.people-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px
}

.person, .person:nth-child(n) {
	grid-column: auto;
	overflow: hidden;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	transition: transform .32s cubic-bezier(.2, .75, .25, 1),
		background-color .32s ease, color .32s ease, border-color .32s ease,
		box-shadow .32s ease;
}

.person:hover {
	transform: translateY(-8px);
	border-color: var(--teal-dark);
	background: var(--teal-dark);
	color: #fff;
	box-shadow: 0 22px 46px rgba(7, 76, 78, .18)
}

.person img {
	width: 100%;
	border-radius: 12px;
	transition: transform .55s cubic-bezier(.2, .75, .25, 1), filter .35s
		ease
}

.person:hover img {
	transform: scale(1.025);
	filter: grayscale(0)
}

.person p
{
font-size:18px;	
line-height:1.2em;
padding:0.8em	
}


.person h3
{
font-size:1.4em;
padding:0.8em		
}

.person:hover p {
	color: #d7e8e8
}

.news-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px
}

.news-card, .news-card.featured {
	grid-column: auto;
	overflow: hidden;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	transition: transform .32s cubic-bezier(.2, .75, .25, 1),
		background-color .32s ease, color .32s ease, border-color .32s ease,
		box-shadow .32s ease;
}

.news-card:hover {
	transform: translateY(-8px);
	border-color: var(--teal-dark);
	background: var(--teal-dark);
	color: #fff;
	box-shadow: 0 22px 46px rgba(7, 76, 78, .18)
}

.news-card img, .news-card.featured img {
	width: 100%;
	height: 340px;
	border-radius: 12px;
	transition: transform .55s cubic-bezier(.2, .75, .25, 1), filter .35s
		ease
}

.news-card:hover img {
	transform: scale(1.025);
	filter: saturate(1.12)
}

.news-card h2, .news-card.featured h2 {
	font-size: 1.5rem
}

.news-card:hover p {
	color: #d7e8e8
}

@media ( max-width :960px) {
	.bento, .bento.show-all {
	/* 	grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, 360px) */
		grid-template-rows: repeat(2, 390px)
	}
	.people-grid, .news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
}

@media ( max-width :640px) {
	.bento, .bento.show-all {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 310px)
	}
	.bento:not(.show-all) {
		grid-template-rows: repeat(3, 310px)
	}
	.people-grid, .news-grid {
		grid-template-columns: 1fr
	}
	.person, .person:nth-child(n), .news-card, .news-card.featured {
		grid-column: auto
	}
}

@media ( prefers-reduced-motion :reduce) {
	.value-card, .service-card, .product-card, .expert-card, .person,
		.news-card, .product-card img, .expert-card img, .person img,
		.news-card img {
		transition: none
	}
	.value-card:hover, .service-card:hover, .product-card:hover,
		.expert-card:hover, .person:hover, .news-card:hover {
		transform: none
	}
}

/* Client logos */
.clients {
	padding: 92px 0;
	border-top: 1px solid var(--line);
	background: #fff
}

.clients-head {
	display: grid;
	grid-template-columns: 1fr 1.8fr;
	gap: 40px;
	align-items: top;
	margin-bottom: 38px
}

.clients-head h2 {
	max-width: 740px;
	font-size: clamp(2.4rem, 4.5vw, 4.8rem);
	font-weight: 600;
	line-height: .98;
	letter-spacing: -.055em
}

.client-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px
}

.client-logo {
	position: relative;
	height: 155px;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--paper);
	transition: transform .3s cubic-bezier(.2, .75, .25, 1),
		background-color .3s ease, border-color .3s ease, box-shadow .3s ease
}

.client-logo img {
	position: absolute;
	inset: 22px;
	width: calc(100% - 44px);
	height: calc(100% - 44px);
	max-width: calc(100% - 44px);
	max-height: calc(100% - 44px);
	object-fit: contain;
	object-position: center;
	filter: grayscale(1) contrast(1.15);
	mix-blend-mode: multiply;
	opacity: .76;
	transition: transform .35s ease, opacity .3s ease
}

.client-logo img:hover {
	transform: translateY(-5px);
	border-color: #aabcc0;
	background: #fff;
    filter: none;
}

.client-logo:hover img {
	transform: scale(1.04);
	opacity: 1
}

@media ( max-width :960px) {
	.client-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr))
	}
	.clients-head {
		grid-template-columns: 1fr
	}
}

@media ( max-width :640px) {
	.clients {
		padding: 68px 0
	}
	.client-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
	.client-logo {
		height: 125px
	}
	.client-logo img {
		inset: 16px;
		width: calc(100% - 32px);
		height: calc(100% - 32px);
		max-width: calc(100% - 32px);
		max-height: calc(100% - 32px)
	}
}

@media ( prefers-reduced-motion :reduce) {
	.client-logo, .client-logo img {
		transition: none
	}
	.client-logo:hover, .client-logo:hover img {
		transform: none
	}
}


/* Four expertise cards are always visible in an even grid. */
.bento, .bento.show-all {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, 390px)
}

.bento .expert-card {
	display: block;
	grid-row: auto
}
/* Reference layout: four equally sized cards across on wide screens. */
.bento, .bento.show-all {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: clamp(440px, 32vw, 400px)
}



/* Field quote carousel */
.quote-carousel {
	grid-template-columns: .65fr 1.35fr;
	align-items: start
}

.quote-carousel-main {
	min-width: 0;
	position: relative;
	z-index: 1
}

.quote-viewport {
	overflow: hidden
}

.quote-track {
	display: flex;
	transition: transform .6s cubic-bezier(.22, .7, .2, 1)
}

.quote-slide {
	flex: 0 0 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 360px;
}

.quote-slide blockquote {
	max-width: 55ch;
	font-size: clamp(1.25rem, 1.5vw, 1.75rem);
	letter-spacing:-.01em;
	
}

.quote-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 18px
}

.quote-dots, .quote-arrows {
	display: flex;
	align-items: center;
	gap: 10px
}

.quote-dot {
	width: 30px;
	height: 8px;
	border: 0;
	border-radius: 50px;
	background: #68818b;
	cursor: pointer;
	transition: width .25s ease, background .25s ease
}

.quote-dot.is-active {
	width: 52px;
	background: var(--lime)
}

.quote-arrow {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 1.25rem;
	cursor: pointer;
	transition: background .2s ease, color .2s ease
}

.quote-arrow:hover, .quote-arrow:focus-visible {
	background: var(--lime);
	color: var(--navy)
}

.quote-dot:focus-visible, .quote-arrow:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px
}

@media ( max-width :960px) {
	.quote-carousel {
		grid-template-columns: 1fr;
		gap: 12px
	}
	.quote-slide {
		min-height: 310px
	}
}

@media ( max-width :640px) {
	.quote-carousel {
		padding: 40px 24px
	}
	.quote-mark {
		font-size: 5rem
	}
	.quote-slide {
		min-height: 340px
	}
	.quote-slide blockquote {
		font-size: clamp(2rem, 7vw, 3rem)
	}
	.quote-controls {
		margin-top: 24px
	}
}

@media ( prefers-reduced-motion :reduce) {
	.quote-track, .quote-dot, .quote-arrow {
		transition: none
	}
}