/* =========================================================
   MeiYaMei Factory — main styles
   ========================================================= */

:root {
	--brand: #ee5519;
	--brand-dark: #d34610;
	--navy: #122330;
	--ink: #111111;
	--body: #555555;
	--muted: #999999;
	--light: #eef7fc;
	--line: #e4e9ee;
	--white: #ffffff;
	--font: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
	--container: 1240px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--body);
	font-family: var(--font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a {
	color: var(--brand);
	text-decoration: none;
	transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}

a:hover {
	color: var(--brand-dark);
}

h1, h2, h3, h4, h5 {
	margin: 0 0 18px;
	font-family: var(--font);
	color: var(--ink);
	line-height: 1.15;
	font-weight: 700;
	text-transform: capitalize;
	letter-spacing: -.015em;
}

h1 { font-size: 62px; }
h2 { font-size: 50px; }
h3 { font-size: 40px; }
h4 { font-size: 20px; }
h5 { font-size: 24px; }

p { margin: 0 0 20px; }

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

.fx-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
}

svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--brand);
	color: #fff;
	padding: 10px 16px;
	z-index: 200;
}

.skip-link:focus {
	left: 0;
}

.fx-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* ---------- buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 44px;
	border: 2px solid transparent;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: capitalize;
	cursor: pointer;
	line-height: 1.2;
	transition: all .3s var(--ease);
}

.btn--solid {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--white);
}

.btn--solid:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.btn--outline {
	background: transparent;
	border-color: var(--brand);
	color: var(--brand);
}

.btn--outline:hover {
	background: var(--brand);
	color: var(--white);
}

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--brand);
}

.link-more svg {
	width: 16px;
	height: 16px;
	transition: transform .3s var(--ease);
}

.link-more:hover svg {
	transform: translateX(6px);
}

/* ---------- header ---------- */

.site-header {
	position: relative;
	z-index: 60;
	background: var(--navy);
}

.site-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	min-height: 99px;
}

.site-logo img {
	width: auto;
	height: 46px;
	max-width: none;
}

.mainnav {
	display: flex;
	align-items: center;
	gap: 44px;
	margin-left: auto;
}

.mainnav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
}

.mainnav__item {
	position: relative;
}

.mainnav__item > a {
	display: block;
	padding: 10px 0;
	color: var(--white);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: capitalize;
}

.mainnav__item > a:hover,
.mainnav__item.is-current > a {
	color: var(--brand);
}

.mainnav__sub {
	position: absolute;
	top: calc(100% + 18px);
	left: -22px;
	width: 230px;
	padding: 16px 0;
	margin: 0;
	background: #0b1822;
	border-top: 2px solid var(--brand);
	box-shadow: 0 24px 40px rgba(0, 0, 0, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all .28s var(--ease);
	z-index: 5;
}

.mainnav__item.has-children:hover .mainnav__sub,
.mainnav__item.has-children:focus-within .mainnav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mainnav__sub li a {
	display: block;
	padding: 10px 22px;
	color: rgba(255, 255, 255, .78);
	font-size: 14.5px;
	font-weight: 500;
}

.mainnav__sub li a:hover {
	color: var(--brand);
	background: rgba(255, 255, 255, .04);
}

.header-cta {
	padding: 14px 28px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-radius: 3px;
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 3px;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	margin: 4px auto;
	background: #fff;
	transition: all .3s var(--ease);
}

body.nav-open .nav-toggle span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
	opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(6, 14, 20, .6);
	opacity: 0;
	visibility: hidden;
	transition: all .3s var(--ease);
	z-index: 55;
}

body.nav-open .nav-overlay {
	opacity: 1;
	visibility: visible;
}

/* ---------- hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--navy);
	color: var(--white);
	padding: 0 0 0;
}

.hero-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 1.4s ease, transform 6s linear;
}

.hero-slide.is-active {
	opacity: .55;
	transform: scale(1);
}

.hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 35, 48, .97) 0%, rgba(18, 35, 48, .86) 48%, rgba(18, 35, 48, .5) 100%);
	z-index: 1;
}

.hero-in {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 70px;
	align-items: end;
	padding-top: 80px;
	padding-bottom: 78px;
}

.hero-main h1 {
	color: var(--white);
	font-size: 68px;
	line-height: 1.12;
	margin: 0 0 48px;
	letter-spacing: -.02em;
}

.hero-btn {
	padding: 24px 46px;
}

.hero-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
	padding-top: 20px;
}

.hero-card {
	margin: 0;
}

.hero-card__img {
	display: block;
	width: 100%;
	height: 360px;
	background-size: cover;
	background-position: center;
	border-radius: 3px;
	overflow: hidden;
	transition: transform .5s var(--ease);
}

.hero-card:nth-child(2) .hero-card__img {
	margin-top: 56px;
}

.hero-card:hover .hero-card__img {
	transform: translateY(-10px);
}

.hero-card p {
	margin: 14px 0 0;
	font-size: 14px;
	color: rgba(255, 255, 255, .66);
}

.hero-card p b {
	color: var(--brand);
	font-weight: 700;
}

.hero-bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 40px;
	min-height: 78px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.hero-bar__item {
	color: var(--white);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
}

.hero-bar__item:hover {
	color: var(--brand);
}

/* ---------- features ---------- */

.features {
	background: var(--navy);
	color: var(--white);
	padding: 10px 0 78px;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 46px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 52px;
}

.feature__num {
	margin: 0 0 10px;
	color: var(--brand);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.feature__title {
	margin: 0 0 12px;
	color: var(--white);
	font-size: 19px;
	font-weight: 700;
	text-transform: capitalize;
}

.feature__text {
	margin: 0;
	color: rgba(255, 255, 255, .62);
	font-size: 15px;
	line-height: 1.7;
}

/* ---------- sustainability ---------- */

.sustain {
	padding: 110px 0;
	background: var(--white);
}

.sustain--alt {
	padding-top: 90px;
	background: #f7fafc;
}

.sustain-in {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 60px;
	align-items: start;
}

.sustain-text h2 {
	margin: 0 0 16px;
	font-size: 50px;
}

.h-light,
.sustain-text > p.h-light {
	color: var(--ink);
	font-size: 40px;
	font-weight: 200;
	line-height: 1.25;
	text-transform: capitalize;
	margin: 0 0 26px;
}

.sustain-text > p {
	max-width: 700px;
}

.sustain-line {
	display: block;
	width: 220px;
	height: 8px;
	margin: 34px 0 30px;
	background: var(--brand);
}

.sustain-iso {
	color: #3f4d58;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.45;
	max-width: 560px;
	margin-bottom: 34px;
}

.sustain-num {
	margin: 0;
	color: var(--brand);
	font-size: 90px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
}

.sustain-cap {
	font-size: 17px;
	color: var(--body);
}

.sustain-imgs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	align-items: start;
}

.sustain-imgs img {
	width: 100%;
	height: 358px;
	object-fit: cover;
	border-radius: 2px;
}

.sustain-imgs img:nth-child(2) {
	margin-top: 74px;
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 17px;
	color: #3d4a54;
}

.checklist svg {
	margin-top: 5px;
	color: var(--brand);
	width: 18px;
	height: 18px;
}

/* ---------- marquee ---------- */

.marquee {
	overflow: hidden;
	padding: 40px 0 60px;
	background: var(--white);
}

.marquee-track {
	display: flex;
	gap: 60px;
	width: max-content;
	animation: slide 34s linear infinite;
	white-space: nowrap;
}

.marquee-track--rev {
	animation-direction: reverse;
	margin-top: 8px;
}

.marquee-track span {
	font-size: 100px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: capitalize;
	color: transparent;
	-webkit-text-stroke: 1px #1a2b36;
	letter-spacing: -.02em;
}

.marquee-track--rev span {
	-webkit-text-stroke: 0;
	color: #eef1f4;
}

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

/* ---------- industries ---------- */

.industries {
	background: var(--navy);
	color: var(--white);
	padding: 96px 0 100px;
}

.sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 52px;
}

.sec-head h2 {
	margin: 0 0 10px;
	font-size: 50px;
}

.sec-head .h-light {
	margin: 0;
	font-size: 40px;
	font-weight: 200;
	line-height: 1.25;
	text-transform: capitalize;
}

.sec-head--dark h2,
.sec-head--dark .h-light {
	color: var(--white);
}

.sec-head--dark .sec-head h2 {
	color: var(--white);
}

.sec-head--pad {
	padding-top: 8px;
}

.industries .sec-head .link-more,
.vision .link-more {
	color: #fff;
}

.industry-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}

.industry-card {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 462px;
	border-radius: 2px;
	color: #fff;
}

.industry-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .8s var(--ease);
}

.industry-card__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 22, 30, .18) 0%, rgba(12, 22, 30, .92) 100%);
}

.industry-card:hover .industry-card__bg {
	transform: scale(1.06);
}

.industry-card__in {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	min-height: 462px;
	padding: 44px;
	transition: transform .4s var(--ease);
}

.industry-card:hover .industry-card__in {
	transform: translateY(-20px);
}

.industry-card h3 {
	margin: 0;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	text-transform: capitalize;
}

.industry-card p {
	margin: 0;
	color: rgba(255, 255, 255, .74);
	font-size: 15px;
}

.industry-card__sep {
	width: 80px;
	height: 5px;
	background: var(--brand);
	margin: 6px 0 4px;
}

/* ---------- counters ---------- */

.counters {
	padding: 96px 0;
	background: var(--white);
}

.counter-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	text-align: center;
}

.counter__icon {
	width: 85px;
	height: 85px;
	margin: 0 auto 26px;
	color: var(--brand);
	stroke-width: 1.1;
}

.counter__num {
	margin: 0 0 6px;
	color: #274b68;
	font-size: 65px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
}

.counter__label {
	margin: 0;
	font-size: 19px;
	color: var(--body);
}

/* ---------- quote band ---------- */

.quote-band {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: #fff;
	padding: 120px 0;
}

.quote-band__veil {
	position: absolute;
	inset: 0;
	background: rgba(18, 35, 48, .88);
}

.quote-band__in {
	position: relative;
	z-index: 1;
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.eyebrow {
	margin: 0 0 18px;
	color: var(--brand);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.quote-band h3 {
	margin: 0 0 24px;
	color: #fff;
	font-size: 40px;
	line-height: 1.25;
}

.quote-band__text {
	color: rgba(255, 255, 255, .72);
	max-width: 620px;
	margin: 0 auto 36px;
}

/* ---------- projects ---------- */

.projects {
	background: var(--light);
	padding: 100px 0 110px;
}

.project-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px;
}

.project-card {
	background: #fff;
	padding: 38px 40px 40px;
	border-radius: 2px;
}

.project-card__head {
	display: flex;
	justify-content: space-between;
	min-height: 118px;
}

.project-card__head h3 {
	margin: 0 0 8px;
	font-size: 24px;
	color: #35668d;
	text-transform: capitalize;
}

.project-card__head h3:hover {
	color: var(--brand);
}

.project-card__head p {
	margin: 0;
	color: var(--body);
	font-size: 16px;
}

.project-card__media {
	position: relative;
}

.project-card__media img {
	width: 100%;
	height: 324px;
	object-fit: cover;
}

.round-btn {
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	background: var(--brand);
	color: #fff;
}

.round-btn:hover {
	background: var(--navy);
	color: #fff;
}

.round-btn svg {
	width: 22px;
	height: 22px;
}

.projects--page {
	padding-top: 90px;
}

/* ---------- partners ---------- */

.partners {
	padding: 78px 0;
	background: #fff;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.partner-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	align-items: center;
	justify-items: center;
}

.partner-row img {
	height: 84px;
	width: auto;
	opacity: .82;
	transition: opacity .3s var(--ease);
}

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

/* ---------- team ---------- */

.team {
	padding: 100px 0 110px;
}

.team-lead {
	max-width: 700px;
	margin-bottom: 44px;
}

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

.team-grid--four {
	grid-template-columns: repeat(4, 1fr);
}

.team-card {
	position: relative;
	overflow: hidden;
}

.team-card img {
	width: 100%;
	height: 472px;
	object-fit: cover;
	transition: transform .6s var(--ease);
}

.team-card:hover img {
	transform: scale(1.04);
}

.team-card__in {
	padding: 22px 0 0;
}

.team-card__in h3 {
	margin: 0 0 4px;
	font-size: 24px;
	text-transform: capitalize;
}

.team-card__in p {
	margin: 0;
	color: var(--body);
	font-size: 15px;
}

.team--page {
	padding-top: 90px;
}

/* ---------- vision / accordion ---------- */

.vision {
	background: var(--navy);
	color: #fff;
	padding: 110px 0;
}

.vision-in {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 70px;
	align-items: center;
}

.vision h3 {
	color: #fff;
	font-size: 40px;
	margin: 0 0 24px;
}

.vision-lead {
	color: rgba(255, 255, 255, .72);
	font-size: 17px;
	max-width: 560px;
	margin-bottom: 34px;
}

.vision-media img {
	width: 100%;
	height: 560px;
	object-fit: cover;
}

.acc {
	border-top: 1px solid rgba(255, 255, 255, .18);
	margin-bottom: 36px;
}

.acc__item {
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.acc__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 0;
	background: transparent;
	border: 0;
	color: #fff;
	font-family: var(--font);
	font-size: 20px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.acc__sign svg {
	width: 18px;
	height: 18px;
	transition: transform .3s var(--ease);
}

.acc__item.is-open .acc__sign svg {
	transform: rotate(45deg);
}

.acc__panel {
	display: none;
	padding-bottom: 22px;
}

.acc__item.is-open .acc__panel {
	display: block;
}

.acc__panel p {
	margin: 0;
	color: rgba(255, 255, 255, .68);
	font-size: 16px;
}

.acc--light {
	border-top-color: var(--line);
}

.acc--light .acc__item {
	border-bottom-color: var(--line);
}

.acc--light .acc__btn {
	color: var(--ink);
	font-size: 19px;
}

.acc--light .acc__panel p {
	color: var(--body);
}

/* ---------- news ---------- */

.news {
	padding: 96px 0 110px;
	background: #fff;
}

.news--page {
	padding-top: 90px;
}

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

.news-card {
	background: transparent;
}

.news-card__media img {
	width: 100%;
	height: 260px;
	object-fit: cover;
}

.news-card__cat {
	margin: 20px 0 10px;
	color: var(--brand);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.news-card h3 {
	margin: 0;
	font-size: 24px;
	line-height: 1.35;
}

.news-card h3 a {
	color: var(--ink);
}

.news-card h3 a:hover {
	color: var(--brand);
}

.news-card > p {
	margin-top: 12px;
	color: var(--body);
	font-size: 16px;
}

/* ---------- page hero / body ---------- */

.page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 460px;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 80px 0;
	overflow: hidden;
}

.page-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 35, 48, .55) 0%, rgba(18, 35, 48, .9) 100%);
}

.page-hero .fx-container {
	position: relative;
	z-index: 1;
}

.page-hero h1 {
	color: #fff;
	font-size: 62px;
	margin: 0;
	max-width: 900px;
}

.page-body {
	padding: 90px 0 100px;
}

.page-body__in {
	max-width: 1100px;
}

.page-body--narrow {
	max-width: 860px;
}

.page-body h2 {
	margin-bottom: 20px;
}

.page-body h3 {
	font-size: 32px;
}

.h3-line {
	font-size: 32px;
	margin: 40px 0 26px;
}

.post-meta {
	margin-top: 50px;
	color: var(--muted);
	font-size: 14px;
}

.sec-white {
	padding: 100px 0;
	background: #fff;
}

/* ---------- services page ---------- */

.service-row {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 60px;
	align-items: center;
	padding: 44px 0;
	border-top: 1px solid var(--line);
}

.service-row--alt .service-row__media {
	order: 2;
}

.service-row__media img {
	width: 100%;
	height: 380px;
	object-fit: cover;
}

.service-row__text h3 {
	font-size: 34px;
	margin-bottom: 12px;
}

.service-row__body {
	color: var(--body);
}

.service-row .btn {
	margin-top: 12px;
	padding: 18px 34px;
}

/* ---------- testimonials ---------- */

.testimonials {
	padding: 100px 0 110px;
	background: var(--light);
}

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

.t-card {
	background: #fff;
	padding: 38px;
}

.t-card__text {
	font-size: 18px;
	color: #33414c;
	line-height: 1.6;
	margin-bottom: 24px;
}

.t-card__who {
	margin: 0;
	color: var(--brand);
	font-size: 14px;
	font-weight: 600;
}

/* ---------- systems / pillars ---------- */

.pillars {
	padding: 90px 0;
	background: var(--light);
}

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

.pillar {
	background: #fff;
	padding: 40px;
}

.pillar h4 {
	color: var(--ink);
	font-size: 24px;
	margin-bottom: 12px;
}

.pillar p {
	margin: 0;
	color: var(--body);
	font-size: 16px;
}

/* ---------- CTA / downloads ---------- */

.cta-simple {
	padding: 80px 0;
	background: var(--navy);
	color: #fff;
}

.cta-simple__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.cta-simple h3 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 34px;
}

.cta-simple p {
	margin: 0;
	color: rgba(255, 255, 255, .68);
}

.downloads {
	padding: 90px 0;
	background: #f7fafc;
}

.download-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.download {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 30px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
}

.download span {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	background: var(--brand);
	color: #fff;
}

.download:hover {
	border-color: var(--brand);
	color: var(--brand);
}

/* ---------- contact ---------- */

.contact {
	padding: 90px 0 100px;
}

.contact-in {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 70px;
	align-items: start;
}

.contact-item {
	padding: 22px 0;
	border-top: 1px solid var(--line);
}

.contact-item h4 {
	margin: 0 0 6px;
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brand);
}

.contact-item p {
	margin: 0;
	font-size: 16px;
}

.contact-form-wrap {
	background: #f7fafc;
	padding: 44px;
	border-top: 3px solid var(--brand);
}

.cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.cf-field {
	margin-bottom: 20px;
}

.cf-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.cf-field input,
.cf-field textarea {
	width: 100%;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #d5dee5;
	border-radius: 2px;
	font-family: var(--font);
	font-size: 16px;
	color: var(--ink);
}

.cf-field input:focus,
.cf-field textarea:focus {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
}

.contact-form .btn {
	padding: 18px 38px;
}

.flash {
	display: block;
	margin-bottom: 24px;
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 600;
}

.flash--ok {
	background: #e9f7ef;
	color: #1d6b3c;
	border-left: 3px solid #2e9e5b;
}

.flash--err {
	background: #fdecea;
	color: #a12c22;
	border-left: 3px solid #d1443a;
}

/* ---------- footer ---------- */

.site-footer {
	background: var(--ink);
	color: #fff;
	padding-top: 84px;
}

.footer-top {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 70px;
	align-items: start;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer-claim h4 {
	margin: 0;
	color: #fff;
	font-size: 30px;
	line-height: 1.3;
	text-transform: capitalize;
	max-width: 420px;
}

.footer-news__label {
	margin: 0 0 14px;
	font-size: 19px;
	color: #fff;
}

.subscribe-form {
	display: flex;
	gap: 12px;
	max-width: 620px;
}

.subscribe-form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 20px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	font-family: var(--font);
	font-size: 16px;
}

.subscribe-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .5);
}

.subscribe-form .btn {
	padding: 16px 34px;
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	padding: 56px 0;
	max-width: 900px;
}

.footer-col__title {
	margin: 0 0 10px !important;
	color: #fff;
	font-size: 19px;
}

.footer-col p {
	color: #999;
	font-size: 17px;
	line-height: 1.7;
	margin: 0;
}

.footer-bar {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 26px 0;
}

.footer-bar p {
	margin: 0;
	color: #7f8c96;
	font-size: 14px;
}

.scroll-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--brand);
	color: #fff;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	z-index: 40;
}

.scroll-top svg {
	transform: rotate(180deg);
}

.scroll-top.is-visible {
	display: inline-flex;
}

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
	h1, .page-hero h1, .hero-main h1 { font-size: 54px; }
	h2, .sec-head h2, .sustain-text h2 { font-size: 42px; }
	h3, .vision h3, .quote-band h3 { font-size: 34px; }
	.h-light, .sec-head .h-light { font-size: 32px; }
	.marquee-track span { font-size: 78px; }
	.industry-grid { gap: 18px; }
	.industry-card__in { padding: 32px; }
	.sustain-in, .vision-in, .contact-in { gap: 44px; }
	.footer-top { gap: 44px; }
}

@media (max-width: 1100px) {
	.site-header__in { min-height: 82px; }
	.nav-toggle { display: block; }
	.mainnav {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 70;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		width: 360px;
		max-width: 88vw;
		height: 100vh;
		padding: 90px 32px 32px;
		background: #0b1822;
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .35s var(--ease), visibility .35s;
		box-shadow: none;
	}

	body.nav-open .mainnav {
		transform: translateX(0);
		visibility: visible;
		box-shadow: -20px 0 50px rgba(0, 0, 0, .4);
	}

	body.nav-open .site-header { z-index: 80; }

	.mainnav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.mainnav__item {
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

	.mainnav__item > a {
		padding: 16px 0;
		font-size: 18px;
	}

	.mainnav__sub {
		position: static;
		width: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-top: 0;
		background: transparent;
		padding: 0 0 12px 16px;
		display: none;
	}

	.mainnav__item.is-open .mainnav__sub {
		display: block;
	}

	.mainnav__sub li a {
		padding: 8px 0;
		font-size: 15px;
	}

	.header-cta {
		margin-top: 26px;
		align-self: flex-start;
	}

	.nav-toggle {
		margin-left: auto;
	}

	.hero-in {
		grid-template-columns: 1fr;
		gap: 50px;
		padding-top: 66px;
	}

	.hero-main h1 { font-size: 52px; }

	.hero-col { max-width: 560px; }

	.hero-bar { justify-content: flex-start; flex-wrap: wrap; gap: 26px; }

	.features-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

	.sustain-in,
	.vision-in,
	.contact-in { grid-template-columns: 1fr; }

	.sustain-imgs { max-width: 620px; }

	.industry-grid { grid-template-columns: 1fr 1fr; }

	.counter-grid { grid-template-columns: 1fr 1fr; gap: 50px; }

	.project-grid { grid-template-columns: 1fr; }

	.team-grid, .team-grid--four { grid-template-columns: 1fr 1fr; }

	.news-grid { grid-template-columns: 1fr 1fr; }

	.partner-row { grid-template-columns: 1fr 1fr; }

	.sec-head { flex-direction: column; align-items: flex-start; gap: 20px; }

	.service-row { grid-template-columns: 1fr; gap: 30px; }

	.service-row--alt .service-row__media { order: 0; }

	.t-grid { grid-template-columns: 1fr; }

	.pillar-grid { grid-template-columns: 1fr; }

	.download-row { grid-template-columns: 1fr; }

	.footer-top { grid-template-columns: 1fr; gap: 36px; }

	.footer-cols { grid-template-columns: 1fr 1fr; }

	.cta-simple__in { flex-direction: column; align-items: flex-start; }

	.vision-media { order: -1; }

	.vision-media img { height: 420px; }
}

@media (max-width: 720px) {
	h1, .page-hero h1 { font-size: 40px; }
	h2, .sec-head h2, .sustain-text h2 { font-size: 32px; }
	h3, .vision h3, .quote-band h3 { font-size: 27px; }
	.h-light, .sec-head .h-light { font-size: 25px; }
	.sustain-iso { font-size: 20px; }
	.sustain-num { font-size: 66px; }
	.marquee-track span { font-size: 46px; }
	.hero-main h1 { font-size: 36px; }
	.hero-card__img { height: 260px; }
	.hero-card:nth-child(2) .hero-card__img { margin-top: 32px; }
	.features-grid, .industry-grid, .counter-grid { grid-template-columns: 1fr; }
	.counter__num { font-size: 52px; }
	.team-grid, .team-grid--four { grid-template-columns: 1fr; }
	.news-grid { grid-template-columns: 1fr; }
	.footer-cols { grid-template-columns: 1fr; }
	.contact-form-wrap { padding: 28px 22px; }
	.cf-row { grid-template-columns: 1fr; }
	.subscribe-form { flex-direction: column; }
	.subscribe-form .btn { width: 100%; }
	.quote-band { background-attachment: scroll; padding: 80px 0; }
	.page-hero { min-height: 380px; padding: 60px 0; }
	.hero-card__img { height: auto; aspect-ratio: 3 / 4; }
	.sustain-imgs img { height: 260px; }
	.sustain-imgs { gap: 14px; }
	.sustain-imgs img:nth-child(2) { margin-top: 40px; }
	.sustain, .vision, .counters, .industries, .news, .team, .projects { padding: 70px 0; }
	.project-card { padding: 26px 22px; }
	.project-card__media img { height: 220px; }
	.projects--page { padding-top: 70px; }
	.team-card img { height: 360px; }
	.footer-top { padding-bottom: 40px; }
	.footer-claim h4 { font-size: 24px; }
	.page-body { padding: 60px 0 70px; }
	.page-body h2 { font-size: 30px; }
	.h3-line { font-size: 25px; }
	.vision-media img { height: 320px; }
	.service-row__media img { height: 260px; }
}