:root {
	--navy: #05052b;
	--blue: #091b5b;
	--accent: #ffc011;
	--white: #fff;
	--paper: #f6f6f9;
	--line: #e4e4f0;
	--muted: #888894;
	--text: #091b5b;
	--container: 1200px;
	--gutter: 24px;
	--header-height: 92px;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: clip;
	color: var(--text);
	background: var(--white);
	font: 400 16px/1.55 Inter, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.menu-open {
	overflow: hidden;
}

img,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

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

button,
input,
textarea {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 4px;
}

::selection {
	color: var(--blue);
	background: var(--accent);
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	font-family: "Sofia Sans", Inter, sans-serif;
	font-weight: 500;
	letter-spacing: -0.035em;
}

h1 {
	font-size: clamp(52px, 6.25vw, 90px);
	line-height: 0.98;
}

h2 {
	margin-bottom: 32px;
	font-size: clamp(40px, 4.45vw, 64px);
	line-height: 1.02;
}

h3 {
	font-size: 28px;
	line-height: 1.1;
}

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

.container--article {
	width: min(calc(100% - 48px), 792px);
}

.section {
	position: relative;
	padding: 128px 0;
}

.section--tight {
	padding: 80px 0;
}

.section--muted,
.section--news {
	background: var(--paper);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	z-index: 1000;
	top: 12px;
	left: 12px;
	padding: 12px 18px;
	transform: translateY(-180%);
	color: var(--blue);
	background: var(--accent);
}

.skip-link:focus {
	transform: translateY(0);
}

.eyebrow {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 30px;
	color: var(--blue);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eyebrow::before {
	width: 32px;
	height: 1px;
	content: "";
	background: currentcolor;
}

.eyebrow--light {
	color: rgba(255, 255, 255, 0.72);
}

.lead {
	color: #454552;
	font-size: 20px;
	line-height: 1.65;
}

.button {
	display: inline-flex;
	min-height: 56px;
	padding: 0 26px;
	gap: 38px;
	align-items: center;
	justify-content: space-between;
	border: 1px solid transparent;
	border-radius: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button span {
	font-size: 19px;
}

.button:hover {
	transform: translateY(-2px);
}

.button--small {
	min-height: 44px;
	padding: 0 19px;
	gap: 12px;
}

.button--accent {
	color: var(--blue);
	background: var(--accent);
}

.button--accent:hover {
	background: #ffd04d;
}

.button--dark {
	color: var(--white);
	background: var(--navy);
}

.button--dark:hover {
	background: var(--blue);
}

.button--outline {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.4);
}

.button--outline:hover {
	border-color: var(--accent);
	color: var(--blue);
	background: var(--accent);
}

.button--outline-dark {
	border-color: var(--navy);
	color: var(--blue);
}

.button--outline-dark:hover {
	color: var(--white);
	background: var(--navy);
}

/* Header */
.site-header {
	position: relative;
	z-index: 100;
	height: var(--header-height);
	border-bottom: 1px solid var(--line);
	background: var(--white);
}

.site-header--dark {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	color: var(--white);
	border-bottom-color: rgba(255, 255, 255, 0.18);
	background: transparent;
}

.site-header__inner {
	display: flex;
	height: 100%;
	gap: 34px;
	align-items: center;
}

.site-logo {
	display: inline-flex;
	flex: 0 0 123px;
	align-items: center;
}

.site-logo__image {
	width: 123px;
	height: 56px;
	object-fit: contain;
}

.site-logo__fallback {
	display: inline-grid;
	color: var(--blue);
	line-height: 1;
}

.site-logo__fallback strong {
	font: 600 30px/.8 "Sofia Sans", sans-serif;
	letter-spacing: -0.08em;
}

.site-logo__fallback small {
	margin-top: 7px;
	font-size: 7px;
	font-weight: 600;
	letter-spacing: 0.14em;
}

.site-logo__fallback--light {
	color: var(--white);
}

.desktop-nav {
	display: flex;
	margin-left: auto;
	gap: 28px;
	align-items: center;
}

.desktop-nav a,
.header-phone {
	position: relative;
	padding: 35px 0 32px;
	font-size: 14px;
	font-weight: 500;
}

.desktop-nav a::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	content: "";
	transform: scaleX(0);
	transform-origin: left;
	background: var(--accent);
	transition: transform 180ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
	transform: scaleX(1);
}

.header-phone {
	white-space: nowrap;
}

.header-social {
	display: flex;
	gap: 7px;
}

.header-social span {
	display: grid;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
}

.header-language {
	font-size: 13px;
	white-space: nowrap;
}

.site-header--light .header-contact {
	color: var(--blue);
	border-color: var(--navy);
}

.menu-toggle {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.menu-toggle > span:not(.screen-reader-text) {
	display: block;
	width: 100%;
	height: 2px;
	margin: 7px 0;
	background: currentcolor;
	transition: transform 180ms ease;
}

.menu-toggle[aria-expanded="true"] > span:first-child {
	transform: translateY(4.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] > span:nth-child(2) {
	transform: translateY(-4.5px) rotate(-45deg);
}

.mobile-menu {
	position: fixed;
	z-index: 98;
	inset: 0;
	padding: 120px 24px 36px;
	color: var(--white);
	background: var(--navy);
}

.mobile-menu__nav {
	display: grid;
}

.mobile-menu__nav a {
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font: 500 28px/1.1 "Sofia Sans", sans-serif;
}

.mobile-menu__footer {
	position: absolute;
	right: 24px;
	bottom: 36px;
	left: 24px;
	display: grid;
	gap: 10px;
	color: rgba(255, 255, 255, 0.65);
}

/* Home hero */
.hero {
	position: relative;
	min-height: 820px;
	overflow: hidden;
	color: var(--white);
	background: var(--navy);
}

.hero__media {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 5, 43, 0.94) 0%, rgba(5, 5, 43, 0.72) 44%, rgba(5, 5, 43, 0.24) 100%),
		url("../images/product-natural-gas.png") center/cover no-repeat;
	transform: scale(1.01);
}

.hero::after {
	position: absolute;
	z-index: 1;
	right: -7vw;
	bottom: -230px;
	width: min(70vw, 1050px);
	height: 700px;
	content: "";
	opacity: 0.24;
	background: url("../images/wave.png") center/contain no-repeat;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	padding-top: 208px;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.hero h1 {
	max-width: 590px;
	margin-bottom: 32px;
	font-size: clamp(52px, 4.5vw, 66px);
	text-transform: uppercase;
}

.hero__copy {
	padding-top: 12px;
}

.hero__lead {
	max-width: 570px;
	margin-bottom: 28px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 18px;
}

.button--outline-accent {
	color: var(--accent);
	border-color: var(--accent);
}

.button--outline-accent:hover {
	color: var(--blue);
	background: var(--accent);
}

.hero-scroll {
	position: absolute;
	z-index: 3;
	right: max(24px, calc((100vw - var(--container)) / 2));
	bottom: 46px;
	display: flex;
	gap: 14px;
	align-items: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.hero-scroll img {
	width: 48px;
}

.split-heading {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.split-heading > .eyebrow {
	align-self: start;
}

.split-heading > div > h2,
.split-heading > div > .lead {
	max-width: 580px;
}

.split-heading .button {
	margin-top: 12px;
}

/* Stats */
.stats {
	color: var(--white);
	background: var(--blue);
}

.stats--home {
	padding: 10px 0 96px;
	color: var(--blue);
	background: var(--white);
}

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

.stats__grid > div {
	display: grid;
	min-height: 160px;
	padding: 20px 30px;
	align-content: center;
	border-left: 1px solid rgba(255, 255, 255, 0.17);
}

.stats__grid > div:last-child {
	border-right: 1px solid rgba(255, 255, 255, 0.17);
}

.stats strong,
.inline-stats strong {
	display: block;
	margin-bottom: 12px;
	color: var(--accent);
	font: 500 52px/1 "Sofia Sans", sans-serif;
	letter-spacing: -0.04em;
}

.stats span {
	color: rgba(255, 255, 255, 0.68);
	font-size: 14px;
}

.stats--home .stats__grid > div {
	border-color: var(--line);
	text-align: center;
}

.stats--home .stats strong {
	color: var(--blue);
}

.stats--home .stats span {
	color: var(--blue);
}

.section-heading {
	margin-bottom: 56px;
}

.section-heading h2 {
	max-width: 790px;
	margin-bottom: 0;
}

.section-heading--row {
	display: flex;
	gap: 24px;
	align-items: end;
	justify-content: space-between;
}

.section-heading--row .eyebrow {
	margin-bottom: 30px;
}

.section-heading--light {
	color: var(--white);
}

.section-heading--center {
	text-align: center;
}

.section-heading--center h2 {
	margin-inline: auto;
}

.section-heading--center h2::after,
.section--advantages > .container > .section-heading h2::after {
	display: block;
	width: 52px;
	height: 2px;
	margin: 22px auto 0;
	content: "";
	background: var(--accent);
}

/* Products */
.section--products {
	padding: 72px 0 0;
}

.section--products > .container {
	width: 100%;
	max-width: none;
}

.section--products .section-heading {
	width: min(calc(100% - 48px), var(--container));
	margin-inline: auto;
}

.product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.product-card {
	position: relative;
	height: 500px;
	overflow: hidden;
	color: var(--white);
}

.product-card > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.product-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 35%, rgba(5, 5, 43, 0.88));
}

.product-card__content {
	position: absolute;
	right: auto;
	bottom: 50%;
	left: max(24px, calc((100vw - var(--container)) / 2));
	display: grid;
	width: 330px;
	padding: 0 0 0 20px;
	grid-template-columns: 1fr;
	gap: 10px 18px;
	align-items: end;
	transform: translateY(50%);
}

.product-card__content small {
	display: none;
	grid-column: 1 / -1;
	color: var(--accent);
	font-size: 13px;
}

.product-card__content strong {
	font: 500 38px/1.05 "Sofia Sans", sans-serif;
	letter-spacing: -0.035em;
}

.product-card__content i {
	display: inline-grid;
	width: 142px;
	height: 48px;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	border: 1px solid var(--accent);
	font-size: 18px;
	font-style: normal;
}

.product-card__content i::before {
	content: "Детальніше";
	font: 500 13px/1 Inter, sans-serif;
}

.product-card:hover > img {
	transform: scale(1.045);
}

.product-card:hover i {
	color: var(--blue);
	border-color: var(--accent);
	background: var(--accent);
}

/* Advantages and tabs */
.section--advantages {
	overflow: hidden;
	padding-top: 106px;
	color: var(--blue);
	background: var(--white);
}

.section--advantages .section-heading--light {
	color: var(--blue);
	text-align: center;
}

.section--advantages .section-heading--light h2 {
	margin-inline: auto;
	text-transform: uppercase;
}

.section--advantages::before {
	position: absolute;
	right: -180px;
	bottom: -260px;
	width: 850px;
	height: 680px;
	content: "";
	opacity: 0.06;
	background: url("../images/wave.png") center/contain no-repeat;
}

.tabs-shell {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}

.tabs-list {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	align-content: start;
}

.tabs-list button {
	display: flex;
	min-height: 34px;
	padding: 7px 13px;
	align-items: center;
	color: var(--blue);
	border: 0;
	border-radius: 5px;
	background: #f2f3f8;
	text-align: left;
	cursor: pointer;
}

.tabs-list button span {
	font: 500 13px/1.25 Inter, sans-serif;
}

.tabs-list button[aria-selected="true"] {
	color: var(--blue);
	background: var(--accent);
}

.tabs-list button[aria-selected="true"]::before {
	position: absolute;
}

.tabs-list button[aria-selected="true"] {
	border-bottom-color: transparent;
}

.tabs-panels article {
	position: relative;
	display: grid;
	min-height: 480px;
	overflow: hidden;
	grid-template-columns: 1fr 1fr;
	background: var(--paper);
}

.tabs-panels article > img {
	grid-column: 2;
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
	opacity: 0.78;
}

.tabs-panels article > div {
	position: static;
	display: flex;
	width: auto;
	padding: 74px 54px;
	grid-row: 1;
	flex-direction: column;
	justify-content: center;
	color: var(--blue);
	background: var(--paper);
}

.tabs-panels h3 {
	margin-bottom: 15px;
	font-size: 32px;
}

.tabs-panels p {
	margin: 0;
	color: var(--blue);
}

[hidden] {
	display: none !important;
}

/* Benefits */
.benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.benefit-card {
	min-height: 310px;
	padding: 34px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.benefit-card img {
	width: 48px;
	height: 48px;
	margin-bottom: 70px;
}

.benefit-card h3 {
	margin-bottom: 14px;
	font-size: 25px;
}

.benefit-card p {
	margin: 0;
	color: #666671;
}

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

.news-card {
	min-width: 0;
	background: var(--white);
}

.news-card__image {
	display: block;
	aspect-ratio: 1.72;
	overflow: hidden;
	background: #d9d9df;
}

.news-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

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

.news-card__body {
	display: flex;
	min-height: 264px;
	padding: 28px;
	flex-direction: column;
}

.news-card time {
	margin-bottom: 20px;
	color: var(--muted);
	font-size: 13px;
	text-transform: uppercase;
}

.news-card h3 {
	margin-bottom: 28px;
	font-size: 23px;
}

.news-card h3 a {
	display: block;
}

.text-link {
	display: inline-flex;
	margin-top: auto;
	gap: 14px;
	align-items: center;
	color: var(--blue);
	font-size: 14px;
	font-weight: 600;
}

/* Offices */
.section--offices {
	color: var(--white);
	background: var(--blue);
}

.section--offices .eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

.office-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.office-card {
	position: relative;
	height: 520px;
	overflow: hidden;
	background: var(--navy);
}

.office-card::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(180deg, transparent 35%, rgba(5, 5, 43, 0.88));
}

.office-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.office-card:hover .office-card__photo {
	transform: scale(1.04);
}

.office-card > div {
	position: absolute;
	z-index: 1;
	right: 36px;
	bottom: 32px;
	left: 36px;
}

.office-card > div > img {
	width: 30px;
	max-height: 22px;
	margin-bottom: 14px;
	object-fit: contain;
	object-position: left center;
}

.office-card p {
	margin-bottom: 6px;
	color: var(--accent);
	font-size: 13px;
	letter-spacing: 0.1em;
}

.office-card h3 {
	margin-bottom: 0;
}

.section--group-home {
	padding: 0;
	color: var(--blue);
	background: var(--paper);
}

.group-layout {
	display: grid;
	width: min(100%, 1440px);
	grid-template-columns: 1fr 1fr;
}

.group-layout > .section-heading {
	display: flex;
	margin: 0;
	padding: 86px max(40px, calc((100vw - var(--container)) / 2));
	flex-direction: column;
	justify-content: center;
}

.group-label {
	align-self: flex-start;
	margin-bottom: 12px;
	padding: 3px 7px;
	color: var(--white);
	background: var(--blue);
	font-size: 13px;
}

.group-layout .section-heading h2 {
	max-width: 420px;
	font-size: 44px;
	text-transform: uppercase;
}

.group-description {
	max-width: 460px;
	color: #58586d;
}

.group-layout .office-grid {
	gap: 0;
}

.group-layout .office-card {
	height: 500px;
}

/* Footer */
.site-footer {
	padding: 72px 0 26px;
	color: var(--white);
	background: var(--navy);
}

.site-footer__top {
	display: flex;
	padding-bottom: 64px;
	align-items: start;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__contacts {
	display: grid;
	grid-template-columns: repeat(2, minmax(220px, 1fr));
	gap: 44px;
}

.site-footer__contacts div {
	display: grid;
	gap: 8px;
}

.site-footer__contacts span {
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
}

.site-footer__contacts a {
	font: 500 20px/1.2 "Sofia Sans", sans-serif;
}

.site-footer__middle {
	display: flex;
	padding: 34px 0 64px;
	gap: 30px;
	justify-content: space-between;
}

.footer-nav,
.social-links {
	display: flex;
	gap: 28px;
	font-size: 14px;
}

.footer-nav a:hover,
.social-links a:hover,
.site-footer__contacts a:hover {
	color: var(--accent);
}

.site-footer__bottom {
	display: flex;
	padding-top: 22px;
	justify-content: space-between;
	color: rgba(255, 255, 255, 0.42);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 12px;
}

.site-footer__bottom p {
	margin: 0;
}

/* Internal headings */
.inner-hero,
.product-hero {
	position: relative;
	overflow: hidden;
	padding: 214px 0 112px;
	color: var(--white);
	background: var(--navy);
}

.inner-hero::after,
.product-hero::after {
	position: absolute;
	right: -80px;
	bottom: -310px;
	width: 740px;
	height: 660px;
	content: "";
	opacity: 0.21;
	background: url("../images/wave.png") center/contain no-repeat;
}

.inner-hero .container,
.product-hero .container {
	position: relative;
	z-index: 1;
}

.inner-hero h1 {
	max-width: 1040px;
	margin-bottom: 36px;
}

.about-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.about-hero h1 {
	font-size: 48px;
	text-transform: uppercase;
}

.about-hero h1::after {
	display: block;
	width: 52px;
	height: 2px;
	margin-top: 22px;
	content: "";
	background: var(--accent);
}

.about-hero__grid > div {
	color: rgba(255, 255, 255, 0.72);
}

.about-hero__grid > div p:last-child {
	margin-bottom: 0;
}

.mission-statement {
	max-width: 760px;
	text-align: center;
}

.mission-statement > p {
	margin-bottom: 16px;
	color: var(--blue);
	font-size: 13px;
	text-transform: uppercase;
}

.mission-statement h2 {
	font-size: 34px;
	text-transform: uppercase;
}

.mission-statement h2::after {
	display: block;
	width: 52px;
	height: 2px;
	margin: 22px auto 0;
	content: "";
	background: var(--accent);
}

.inner-hero > .container > p:last-child {
	max-width: 590px;
	margin: 0 0 0 auto;
	color: rgba(255, 255, 255, 0.7);
	font-size: 18px;
}

.page-title {
	padding: 110px 0 76px;
	background: var(--white);
}

.page-title h1 {
	margin-bottom: 0;
	color: var(--blue);
}

.principles-grid,
.classification-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.principles-grid article,
.classification-grid article {
	min-height: 260px;
	padding: 34px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.principles-grid span,
.classification-grid span {
	display: block;
	margin-bottom: 68px;
	color: var(--blue);
	font-size: 13px;
}

.principles-grid h3,
.classification-grid h3 {
	font-size: 25px;
}

.principles-grid p,
.classification-grid p {
	margin: 0;
	color: #666671;
}

.section--workflow {
	color: var(--white);
	background: var(--blue);
}

.section--workflow .eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

.workflow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.workflow__tabs {
	display: grid;
}

.workflow__tabs button {
	display: grid;
	min-height: 88px;
	padding: 20px 0;
	grid-template-columns: 48px 1fr;
	align-items: center;
	color: rgba(255, 255, 255, 0.55);
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.workflow__tabs button[aria-selected="true"] {
	color: var(--white);
	border-color: var(--accent);
}

.workflow__tabs span {
	font: 500 20px/1.2 "Sofia Sans", sans-serif;
}

.workflow__panels {
	min-height: 410px;
	padding: 50px;
	color: var(--blue);
	background: var(--accent);
}

.workflow__panels h3 {
	font-size: 38px;
}

.workflow__panels p {
	max-width: 430px;
	font-size: 18px;
}

.section--legal {
	overflow: hidden;
	background: var(--paper);
}

.section--legal::after {
	position: absolute;
	right: -140px;
	bottom: -280px;
	width: 700px;
	height: 600px;
	content: "";
	opacity: 0.08;
	background: url("../images/wave.png") center/contain no-repeat;
}

.team-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.team-card {
	background: var(--white);
}

.team-card > img,
.team-card--placeholder > div {
	width: 100%;
	aspect-ratio: 1.1;
	object-fit: cover;
	background: linear-gradient(135deg, #dcdce6, #b9bac8);
}

.team-card > div,
.team-card > section {
	padding: 26px 30px;
}

.team-card h3 {
	margin-bottom: 8px;
	font-size: 25px;
}

.team-card p {
	margin: 0;
	color: var(--muted);
}

/* Product pages */
.product-switch {
	display: flex;
	margin-bottom: 0;
	gap: 34px;
	align-items: flex-start;
}

.product-switch a {
	padding-bottom: 12px;
	color: rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid transparent;
	font-size: 14px;
}

.product-switch a.is-active {
	color: var(--white);
	border-color: var(--accent);
}

.product-hero h1 {
	margin-bottom: 30px;
}

.product-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

.product-hero__grid > p {
	max-width: 590px;
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 18px;
}

.product-visual {
	width: 100%;
	height: 570px;
	overflow: hidden;
	background: #ddd;
}

.product-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.product-details > div:first-child h2 {
	font-size: 52px;
	text-transform: uppercase;
}

.product-details > div:first-child h2::after {
	display: block;
	width: 52px;
	height: 2px;
	margin-top: 24px;
	content: "";
	background: var(--accent);
}

.inline-stats {
	display: grid;
	margin: 44px 0;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.inline-stats > div {
	padding: 27px 0;
}

.inline-stats > div + div {
	padding-left: 32px;
	border-left: 1px solid var(--line);
}

.inline-stats strong {
	color: var(--blue);
	font-size: 42px;
}

.inline-stats span {
	color: var(--muted);
	font-size: 13px;
}

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

.classification-grid article {
	min-height: 300px;
	padding: 28px;
}

.catalog-tabs {
	display: flex;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--line);
}

.catalog-tabs button {
	min-width: 180px;
	min-height: 54px;
	padding: 0 24px;
	color: var(--muted);
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	cursor: pointer;
}

.catalog-tabs button[aria-selected="true"] {
	color: var(--blue);
	border-color: var(--accent);
}

.catalog-panels article {
	display: grid;
	min-height: 470px;
	grid-template-columns: 1fr 1fr;
	color: var(--white);
	background: var(--blue);
}

.catalog-panels article > div {
	padding: 64px 54px;
}

.catalog-panels article h3 {
	font-size: 48px;
}

.catalog-panels article p:not(.eyebrow) {
	max-width: 440px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 18px;
}

.catalog-panels article > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* News archive and article */
.filter-nav {
	display: flex;
	margin-bottom: 48px;
	gap: 6px;
	flex-wrap: wrap;
}

.filter-nav a {
	display: inline-flex;
	min-height: 46px;
	padding: 0 20px;
	align-items: center;
	color: var(--muted);
	border: 1px solid var(--line);
	font-size: 14px;
}

.filter-nav a.is-active,
.filter-nav a:hover {
	color: var(--white);
	border-color: var(--blue);
	background: var(--blue);
}

.news-grid--archive {
	row-gap: 32px;
}

.pagination {
	margin-top: 62px;
}

.nav-links {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.page-numbers {
	display: grid;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
}

.page-numbers.current,
.page-numbers:hover {
	color: var(--white);
	border-color: var(--blue);
	background: var(--blue);
}

.article {
	padding: 90px 0 120px;
}

.article__header .back-link {
	display: inline-block;
	margin-bottom: 72px;
	color: var(--blue);
	font-size: 14px;
	font-weight: 600;
}

.article__header time {
	display: block;
	margin-bottom: 24px;
	color: var(--muted);
	font-size: 13px;
	text-transform: uppercase;
}

.article__header h1 {
	margin-bottom: 64px;
	color: var(--blue);
	font-size: clamp(44px, 5.1vw, 72px);
	line-height: 1.05;
}

.article__hero {
	margin-bottom: 72px;
}

.article__hero img {
	width: 100%;
	max-height: 650px;
	object-fit: cover;
}

.article__content {
	font-size: 18px;
	line-height: 1.75;
}

.article__content h2 {
	margin-top: 64px;
	font-size: 38px;
}

.article__content h3 {
	margin-top: 42px;
}

.article__content a,
.entry-content a {
	color: var(--blue);
	text-decoration: underline;
}

.article__content blockquote {
	margin: 48px 0;
	padding: 28px 34px;
	border-left: 3px solid var(--accent);
	background: var(--paper);
}

.article__content > * {
	max-width: 100%;
}

.empty-state {
	padding: 80px 20px;
	color: var(--muted);
	border: 1px solid var(--line);
	text-align: center;
}

/* Contacts */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.contact-grid article {
	min-height: 190px;
	padding: 0;
}

.contact-grid h2 {
	margin-bottom: 30px;
	font-size: 22px;
	text-transform: uppercase;
}

.contact-grid a,
.contact-grid address {
	display: block;
	margin-bottom: 15px;
	font: normal 400 16px/1.5 Inter, sans-serif;
}

.map-placeholder {
	display: grid;
	width: min(calc(100% - 48px), var(--container));
	height: 520px;
	margin-inline: auto;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(rgba(9, 27, 91, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(9, 27, 91, 0.1) 1px, transparent 1px),
		#e8e9ef;
	background-size: 42px 42px;
}

.map-placeholder > div {
	display: grid;
	padding: 20px 30px;
	gap: 5px;
	color: var(--white);
	background: var(--blue);
	text-align: center;
}

.map-placeholder strong {
	color: var(--accent);
	font-size: 20px;
}

.contact-map iframe {
	width: 100%;
	height: 520px;
	border: 0;
}

.section--contact-form {
	color: var(--blue);
	background: var(--paper);
}

.section--contact-form .eyebrow {
	color: var(--blue);
}

.section--contact-form .contact-form__eyebrow::before {
	background: var(--accent);
}

.section--contact-form .lead {
	max-width: 470px;
	color: var(--blue);
}

.contact-form-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.contact-form {
	display: grid;
	gap: 24px;
}

.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.contact-form label:not(.consent) {
	display: grid;
	gap: 8px;
}

.contact-form label > span {
	color: var(--blue);
	font-size: 13px;
}

.contact-form input:not([type="checkbox"]),
.contact-form textarea {
	width: 100%;
	min-height: 54px;
	padding: 14px 16px;
	color: var(--blue);
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--white);
}

.contact-form textarea {
	min-height: 130px;
	resize: vertical;
}

.contact-form input:hover,
.contact-form textarea:hover {
	border-color: var(--blue);
}

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 2px rgba(255, 192, 17, 0.25);
}

.contact-form .is-invalid {
	border-color: #ff6b6b !important;
}

.consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.consent input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--accent);
}

.contact-form .button {
	justify-self: start;
}

.form-honeypot {
	position: absolute;
	left: -9999px;
}

.form-message {
	padding: 16px 18px;
	border: 1px solid;
}

.form-message--success {
	color: #176b2f;
	border-color: #71db8a;
}

.form-message--error {
	color: #a51818;
	border-color: #ff6b6b;
}

.not-found {
	display: grid;
	min-height: 70vh;
	padding: 120px 0;
	align-items: center;
	text-align: center;
}

.not-found .eyebrow {
	justify-content: center;
}

.not-found p:not(.eyebrow) {
	margin-bottom: 34px;
	color: var(--muted);
}

/* Tablet */
@media (max-width: 1100px) {
	:root {
		--header-height: 78px;
	}

	.desktop-nav,
	.header-phone,
	.header-contact,
	.header-social,
	.header-language {
		display: none;
	}

	.menu-toggle {
		display: block;
		margin-left: auto;
	}

	.site-header.menu-active {
		position: fixed;
		color: var(--white);
		border-bottom-color: rgba(255, 255, 255, 0.14);
		background: var(--navy);
	}

	.site-header.menu-active .site-logo__fallback {
		color: var(--white);
	}

	.hero {
		min-height: 760px;
	}

	.hero__inner {
		padding-top: 200px;
	}

	.product-card {
		height: 460px;
	}

	.tabs-shell {
		grid-template-columns: 310px 1fr;
	}

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

	.news-card__body {
		padding: 22px;
	}

	.news-card h3 {
		font-size: 20px;
	}
}

/* Mobile and small tablet */
@media (max-width: 767px) {
	:root {
		--gutter: 16px;
		--header-height: 72px;
	}

	.container,
	.container--article {
		width: calc(100% - 32px);
	}

	h1 {
		font-size: clamp(44px, 13.8vw, 58px);
	}

	h2 {
		margin-bottom: 24px;
		font-size: 40px;
	}

	h3 {
		font-size: 24px;
	}

	.section {
		padding: 80px 0;
	}

	.section--tight {
		padding: 0;
	}

	.eyebrow {
		margin-bottom: 22px;
		font-size: 11px;
	}

	.lead {
		font-size: 17px;
		line-height: 1.6;
	}

	.site-logo {
		flex-basis: 105px;
	}

	.site-logo__fallback strong {
		font-size: 27px;
	}

	.hero {
		min-height: 812px;
	}

	.hero__media {
		background:
			linear-gradient(180deg, rgba(5, 5, 43, 0.55), rgba(5, 5, 43, 0.92)),
			url("../images/product-natural-gas.png") 62% center/cover no-repeat;
	}

	.hero::after {
		right: -240px;
		bottom: -180px;
		width: 660px;
		height: 520px;
	}

	.hero__inner {
		display: block;
		padding-top: 164px;
	}

	.hero h1 {
		margin-bottom: 24px;
		font-size: 46px;
	}

	.hero__copy {
		padding-top: 0;
	}

	.hero__lead {
		margin-bottom: 34px;
		font-size: 16px;
	}

	.hero-scroll {
		right: 16px;
		bottom: 28px;
	}

	.hero-scroll span {
		display: none;
	}

	.split-heading,
	.product-details,
	.contact-form-layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.split-heading > .eyebrow {
		margin-bottom: 14px;
	}

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

	.stats__grid > div {
		min-height: 156px;
		padding: 22px 18px;
		border-right: 1px solid rgba(255, 255, 255, 0.17);
		border-bottom: 1px solid rgba(255, 255, 255, 0.17);
	}

	.stats strong,
	.inline-stats strong {
		font-size: 40px;
	}

	.section-heading {
		margin-bottom: 38px;
	}

	.section-heading--row {
		display: block;
	}

	.section-heading--row .button {
		margin-top: 24px;
	}

	.product-grid,
	.news-grid,
	.office-grid,
	.team-grid {
		grid-template-columns: 1fr;
	}

	.product-grid,
	.office-grid {
		gap: 16px;
	}

	.product-card {
		height: 440px;
	}

	.product-card__content {
		right: 22px;
		bottom: 22px;
		left: 22px;
		width: auto;
		padding: 0;
		transform: none;
	}

	.product-card__content strong {
		font-size: 32px;
	}

	.tabs-shell {
		grid-template-columns: 1fr;
	}

	.tabs-list {
		display: flex;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.tabs-list button {
		min-width: 250px;
		padding-right: 18px;
	}

	.tabs-panels article,
	.tabs-panels article > img {
		min-height: 480px;
	}

	.tabs-panels article {
		grid-template-columns: 1fr;
	}

	.tabs-panels article > img {
		grid-row: 1;
		grid-column: 1;
		min-height: 340px;
	}

	.tabs-panels article > div {
		width: 100%;
		padding: 24px;
		grid-row: 2;
	}

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

	.benefit-card {
		min-height: 250px;
		padding: 26px;
	}

	.benefit-card img {
		margin-bottom: 48px;
	}

	.news-grid {
		gap: 18px;
	}

	.news-card__body {
		min-height: 230px;
	}

	.office-card {
		height: 440px;
	}

	.group-layout {
		grid-template-columns: 1fr;
	}

	.group-layout > .section-heading {
		padding: 70px 16px;
	}

	.group-layout .section-heading h2 {
		font-size: 38px;
	}

	.group-layout .office-card {
		height: 430px;
	}

	.office-card > div {
		right: 24px;
		bottom: 24px;
		left: 24px;
	}

	.site-footer {
		padding-top: 56px;
	}

	.site-footer__top,
	.site-footer__middle,
	.site-footer__bottom {
		display: grid;
		gap: 34px;
	}

	.site-footer__contacts {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.site-footer__middle {
		padding-bottom: 44px;
	}

	.footer-nav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.site-footer__bottom {
		gap: 12px;
	}

	.inner-hero,
	.product-hero {
		padding: 150px 0 72px;
	}

	.inner-hero h1 {
		margin-bottom: 34px;
	}

	.about-hero__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.about-hero h1 {
		font-size: 42px;
	}

	.inner-hero > .container > p:last-child,
	.product-hero p {
		margin-left: 0;
		font-size: 16px;
	}

	.page-title {
		padding: 72px 0 50px;
	}

	.principles-grid,
	.classification-grid {
		grid-template-columns: 1fr;
	}

	.principles-grid article,
	.classification-grid article {
		min-height: 230px;
		padding: 26px;
	}

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

	.workflow__tabs {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.workflow__tabs button {
		min-width: 245px;
	}

	.workflow__panels {
		min-height: 340px;
		padding: 34px 26px;
	}

	.workflow__panels h3 {
		font-size: 32px;
	}

	.product-switch {
		margin-bottom: 54px;
		gap: 20px;
	}

	.product-hero__grid {
		grid-template-columns: 1fr;
	}

	.product-switch a {
		font-size: 12px;
	}

	.product-visual {
		height: 380px;
	}

	.inline-stats {
		margin: 34px 0;
	}

	.inline-stats > div + div {
		padding-left: 18px;
	}

	.catalog-tabs {
		overflow-x: auto;
	}

	.catalog-tabs button {
		min-width: 145px;
		padding: 0 14px;
	}

	.catalog-panels article {
		grid-template-columns: 1fr;
	}

	.catalog-panels article > div {
		padding: 36px 26px;
	}

	.catalog-panels article > img {
		height: 310px;
	}

	.filter-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.filter-nav a {
		flex: 0 0 auto;
	}

	.article {
		padding: 58px 0 80px;
	}

	.article__header .back-link {
		margin-bottom: 46px;
	}

	.article__header h1 {
		margin-bottom: 40px;
		font-size: 42px;
	}

	.article__hero {
		width: 100%;
		margin-bottom: 48px;
	}

	.article__content {
		font-size: 16px;
	}

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

	.contact-grid article {
		min-height: auto;
		padding: 0 0 28px;
		border-bottom: 1px solid var(--line);
	}

	.contact-grid h2 {
		margin-bottom: 22px;
	}

	.map-placeholder,
	.contact-map iframe {
		height: 390px;
	}

	.map-placeholder {
		width: calc(100% - 32px);
	}

	.contact-form-layout {
		gap: 44px;
	}

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

@media (max-width: 390px) {
	.button {
		width: 100%;
	}

	.product-card {
		height: 400px;
	}

	.product-card__content strong {
		font-size: 29px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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