@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/sora-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/sora-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--ink: #111315;
	--muted: #64696d;
	--paper: #ffffff;
	--panel: #f0f2f4;
	--panel-deep: #e7eaed;
	--accent: #e44327;
	--brand-red: #dc183d;
	--lime: #c8ff45;
	--radius: 20px;
	--gutter: 40px;
	--container: 1340px;
	--heading: "Sora", Arial, Helvetica, sans-serif;
	--body: "Manrope", Arial, Helvetica, sans-serif;
	--text-body: 16px;
	--text-body-line: 30px;
	--text-small: 14px;
	--heading-section: 60px;
	--heading-section-line: 70px;
	--heading-tracking: -.05em;
}

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

html {
	scroll-behavior: smooth;
	background: var(--paper);
}

body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	font-family: var(--body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.875;
	-webkit-font-smoothing: antialiased;
}

body.menu-open {
	overflow: hidden;
}

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

button,
input {
	font: inherit;
}

button {
	color: inherit;
}

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

h1,
h2,
h3,
p,
figure,
ol,
ul {
	margin: 0;
}

ol,
ul {
	padding: 0;
	list-style: none;
}

.site-canvas {
	overflow: clip;
}

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

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

.skip-link {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 1000;
	padding: 10px 16px;
	border-radius: 30px;
	background: var(--ink);
	color: #fff;
	transform: translateY(-160%);
}

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

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

.section-label {
	color: #111;
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: normal;
	text-transform: lowercase;
}

.section-label--dark {
	color: #fff;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 10px 34px 11px 43px;
	border: 1px solid var(--ink);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	line-height: 27px;
	transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.button span {
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

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

.button--dark {
	background: var(--ink);
	color: #fff;
}

.button--outline:hover {
	background: var(--ink);
	color: #fff;
}

/* Header */
.site-header {
	position: absolute;
	top: 18px;
	left: var(--gutter);
	right: var(--gutter);
	z-index: 20;
	height: 100px;
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 100%;
	padding: 0 20px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 14px 35px rgba(20, 24, 27, .08);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 33px;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	text-transform: uppercase;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: inherit;
}

.site-nav--left {
	grid-column: 1;
	justify-self: start;
}

.site-nav--right {
	padding-right: 35px;
}

.site-header__actions {
	display: flex;
	grid-column: 3;
	align-items: center;
	justify-self: end;
}

.site-nav a,
.footer__column a {
	position: relative;
}

.site-nav a::after,
.footer__column a::after {
	position: absolute;
	right: 0;
	bottom: -2px;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .25s ease;
}

.site-nav a:hover::after,
.footer__column a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-self: center;
}

.wordmark--header {
	grid-column: 2;
	width: 112px;
}

.wordmark--header img {
	display: block;
	width: 100%;
	height: auto;
}

.wordmark__symbol {
	position: relative;
	display: block;
	width: 35px;
	height: 35px;
}

.wordmark__symbol i {
	position: absolute;
	left: 3px;
	display: block;
	width: 29px;
	height: 10px;
	border-radius: 9px 2px 9px 2px;
	background: var(--ink);
	transform: skewX(-24deg);
}

.wordmark__symbol i:nth-child(1) {
	top: 2px;
}

.wordmark__symbol i:nth-child(2) {
	top: 12px;
	left: 6px;
	width: 25px;
}

.wordmark__symbol i:nth-child(3) {
	top: 22px;
	left: 9px;
	width: 21px;
}

.wordmark__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.wordmark__text strong {
	font-family: var(--heading);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .1em;
}

.wordmark__text small {
	margin-top: 4px;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .18em;
}

.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 138px;
	height: 50px;
	border-radius: 100px;
	background: var(--ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
}

.menu-toggle,
.mobile-menu {
	display: none;
}

.mobile-menu__list {
	display: flex;
	width: 100%;
	flex-direction: column;
}

/* Hero: 991px */
.hero {
	position: relative;
	height: 991px;
	overflow: hidden;
	border-radius: 0 0 25px 25px;
	background: var(--panel);
}

.hero__lines,
.directions__lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(90deg, transparent calc(25% - .5px), rgba(17, 19, 21, .055) 25%, transparent calc(25% + .5px)), linear-gradient(90deg, transparent calc(50% - .5px), rgba(17, 19, 21, .055) 50%, transparent calc(50% + .5px)), linear-gradient(90deg, transparent calc(75% - .5px), rgba(17, 19, 21, .055) 75%, transparent calc(75% + .5px));
}

.hero__content {
	position: relative;
	display: grid;
	grid-template-columns: 871px 429px;
	gap: 40px;
	padding-top: 202px;
}

.hero__statement h1 {
	max-width: 900px;
	font-family: var(--heading);
	font-size: 80px;
	font-weight: 400;
	line-height: 1.125;
	letter-spacing: -.03em;
}

.media-pill {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 100px;
}

.media-pill img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media-pill--wide {
	display: block;
	width: 461px;
	height: 85px;
	margin-top: 40px;
}

.media-pill--wide::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .52), transparent 75%);
	content: "";
}

.media-pill--wide strong {
	position: absolute;
	top: 50%;
	left: 26px;
	z-index: 2;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 30px;
	transform: translateY(-50%);
}

.media-pill__icon {
	position: absolute;
	top: 50%;
	right: 13px;
	z-index: 2;
	display: grid;
	width: 60px;
	height: 60px;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	font-size: 22px;
	transform: translateY(-50%);
}

.hero__aside {
	padding-top: 0;
}

.media-pill--small {
	width: 210px;
	height: 78px;
	margin-left: 0;
}

.hero__aside p {
	width: 429px;
	margin-top: 50px;
	color: #333;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

.hero__aside .button {
	margin-top: 27px;
}

.client-row {
	position: absolute;
	right: 0;
	bottom: 48px;
	left: 0;
	display: grid;
	grid-template-columns: 220px 1fr;
	align-items: center;
	min-height: 80px;
	border-top: 1px solid rgba(17, 19, 21, .16);
}

.client-row > p {
	color: #333;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.client-row ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	height: 100%;
}

.client-row li {
	display: grid;
	height: 54px;
	place-items: center;
	border-left: 1px solid rgba(17, 19, 21, .13);
}

.client-row img {
	width: auto;
	max-width: 95px;
	height: 38px;
	filter: grayscale(1);
	object-fit: contain;
	opacity: .7;
}

/* Moving strip: 120px */
.image-marquee {
	position: relative;
	display: flex;
	height: 120px;
	align-items: center;
	overflow: hidden;
}

.image-marquee::before {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 74px;
	border-radius: 0;
	background: var(--ink);
	content: "";
	transform: translateY(-50%);
}

.image-marquee__track {
	position: relative;
	z-index: 1;
	display: flex;
	width: max-content;
	height: 74px;
	align-items: center;
	gap: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: var(--heading);
	font-size: 25px;
	line-height: 1;
	white-space: nowrap;
	animation: marquee 28s linear infinite;
	will-change: transform;
}

.image-marquee__group {
	display: flex;
	width: max-content;
	min-width: 100vw;
	height: 100%;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	gap: 25px;
	padding-inline: 35px;
}

.image-marquee__track i {
	color: var(--brand-red);
	font-style: normal;
}

@keyframes marquee {
	to { transform: translateX(-50%); }
}

/* Sparse image composition: 758px */
.hero-collage {
	position: relative;
	height: 758px;
}

.hero-collage__inner {
	position: relative;
	width: min(calc(100% - 100px), 1340px);
	height: 100%;
	margin-inline: auto;
}

.hero-collage__item {
	position: absolute;
	overflow: hidden;
	background: var(--panel);
}

.hero-collage__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-collage__item--one {
	top: 0;
	left: 0;
	width: 317px;
	height: 438px;
	border-radius: 25px;
}

.hero-collage__item--two {
	top: 0;
	left: 337px;
	width: 665px;
	height: 758px;
	border-radius: 25px;
}

.hero-collage__item--three {
	top: 0;
	right: 0;
	left: auto;
	width: 318px;
	height: 670px;
	border-radius: 25px;
	transform: none;
}

.hero-collage__stats {
	position: absolute;
	top: 458px;
	left: 0;
	display: grid;
	width: 317px;
	height: 200px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 24px;
	padding: 28px 34px;
	border-radius: 25px;
	background: #e7eaec;
}

.hero-collage__stats > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.hero-collage__stats strong {
	color: transparent;
	font-family: var(--heading);
	font-size: 52px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.06em;
	-webkit-text-stroke: 1px rgba(228, 67, 39, .65);
}

.hero-collage__stats span {
	font-size: 14px;
	line-height: 22px;
}

/* About: starts after a 155px pause and is 514px tall */
.about {
	height: 514px;
	margin-top: 155px;
}

.about__grid {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 60px;
	height: 100%;
}

.about__mark {
	position: relative;
	width: 400px;
	height: 366px;
	margin-top: 74px;
}

.about__mark::before {
	position: absolute;
	top: 116px;
	left: 6px;
	width: 86px;
	height: 86px;
	border-radius: 46% 54% 54% 46%;
	background: #e2e5e8;
	box-shadow: 68px -35px 0 -15px #d9dde0, 134px 7px 0 -23px #d9dde0;
	content: "";
	transform: rotate(-23deg);
}

.about__mark span {
	position: absolute;
	display: none;
}

.about__content {
	padding-top: 0;
}

.about__content h2 {
	max-width: 880px;
	margin-top: 0;
	font-family: var(--heading);
	font-size: 60px;
	font-weight: 400;
	line-height: 70px;
	letter-spacing: -.05em;
}

.about__copy {
	display: flex;
	width: 631px;
	margin-top: 24px;
	margin-left: 117px;
	flex-direction: column;
	gap: 30px;
}

.about__copy p {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

.about__content .button {
	margin-top: 32px;
	margin-left: 117px;
}

/* Company-style brand network: 358px */
.brand-network {
	height: 358px;
	margin-top: 100px;
}

.brand-network__inner {
	width: min(calc(100% - 100px), var(--container));
	height: 100%;
	margin-inline: auto;
	padding: 0;
}

.brand-network__inner > h2 {
	max-width: 563px;
	font-family: var(--heading);
	font-size: 40px;
	font-weight: 400;
	line-height: 50px;
	letter-spacing: -.05em;
}

.brand-network__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	margin-top: 60px;
}

.brand-network__list li {
	min-width: 0;
	height: 198px;
}

.brand-network__list img {
	width: 160px;
	height: 49px;
	margin-bottom: 20px;
	object-fit: contain;
	object-position: left center;
	filter: grayscale(1);
	mix-blend-mode: multiply;
}

.brand-network__list h3 {
	font-family: var(--heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
}

.brand-network__list p {
	margin-top: 9px;
	color: #333;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

/* Directions: starts at 3145px / 1168px */
.directions {
	height: 1168px;
	margin-top: 150px;
	padding-inline: var(--gutter);
}

.directions__panel {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--panel);
}

.directions__header {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 620px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 40px;
	height: 433px;
	padding: 135px 40px 55px;
}

.directions__header .section-label {
	grid-column: 1;
}

.directions__header h2 {
	grid-column: 1;
	max-width: 620px;
	margin-top: 5px;
	font-family: var(--heading);
	font-size: 60px;
	font-weight: 400;
	line-height: 70px;
	letter-spacing: -.05em;
}

.directions__header .button {
	grid-column: 2;
	grid-row: 2;
	align-self: end;
	justify-self: end;
}

.direction-list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: 117px 234px 117px 117px;
	height: 735px;
	padding: 0 40px 150px;
}

.direction-list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
}

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

.direction-list li > span {
	padding-right: 20px;
	color: #c0c5cb;
	font-family: var(--heading);
	font-size: 50px;
	font-weight: 400;
	line-height: 50px;
	letter-spacing: -.06em;
}

.direction-list h3 {
	color: #c0c5cb;
	font-family: var(--heading);
	font-size: 100px;
	font-weight: 400;
	line-height: 117px;
	letter-spacing: -.03em;
}

.direction-list li:nth-child(2) h3 {
	font-size: 100px;
}

/* Image banner: 545px */
.panorama {
	height: 545px;
	margin-top: 30px;
	padding-inline: var(--gutter);
}

.panorama__frame {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
}

.panorama__frame::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(132, 19, 9, .7), rgba(218, 47, 21, .45) 60%, rgba(219, 57, 31, .12));
	content: "";
}

.panorama__frame > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.55) contrast(1.08);
	mix-blend-mode: multiply;
}

.panorama h2 {
	position: absolute;
	top: 69px;
	left: 365px;
	z-index: 2;
	width: 955px;
	font-family: var(--heading);
	font-size: 100px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.03em;
}

.panorama p {
	position: absolute;
	bottom: 45px;
	left: 50px;
	z-index: 2;
	width: 260px;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

/* Projects: 1102px */
.projects {
	height: 1102px;
	margin-top: 150px;
	padding-inline: var(--gutter);
}

.projects__panel {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
}

.projects__header {
	display: grid;
	grid-template-columns: 846.66px minmax(0, 1fr);
	height: 413px;
	padding: 160px 40px 33px;
}

.projects__header h2 {
	max-width: 846.66px;
	margin-top: 2px;
	font-family: var(--heading);
	font-size: 60px;
	font-weight: 400;
	line-height: 70px;
	letter-spacing: -.05em;
}

.projects__count {
	display: block;
	align-self: start;
	padding: 31px 0 0 20px;
}

.projects__count strong {
	display: block;
	width: max-content;
	color: var(--accent);
	font-family: var(--heading);
	font-size: 150px;
	font-weight: 600;
	line-height: 150px;
	letter-spacing: -.05em;
}

.projects__count span {
	display: block;
	margin-top: 8px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	letter-spacing: -.03em;
	text-transform: none;
}

.projects__controls {
	position: absolute;
	top: 363px;
	left: 40px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.projects__controls button {
	display: grid;
	width: 50px;
	height: 50px;
	padding: 0;
	place-items: center;
	border: 1px solid #5b6063;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.button--project {
	margin-left: 7px;
	border-color: #fff;
	color: #fff;
}

.projects__controls button:hover {
	border-color: #fff;
	background: #fff;
	color: var(--ink);
}

.project-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	height: 689px;
	padding: 75px 40px 50px;
}

.project-list > li,
.project-list article {
	height: 100%;
}

.project-list article {
	position: relative;
	overflow: hidden;
	border: 1px solid #4a4a4a;
	border-radius: 20px;
	background: #1b1e20;
}

.project-list article > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .72;
	transition: transform .6s ease;
}

.project-list article::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 19, 21, .04) 24%, rgba(17, 19, 21, .92) 100%);
	content: "";
}

.project-list article:hover > img {
	transform: scale(1.025);
}

.project-list article > div {
	position: absolute;
	right: 31px;
	bottom: 64px;
	left: 40px;
	z-index: 1;
	padding: 0;
}

.project-list article span,
.project-list article small,
.project-list article p {
	display: none;
}

.project-list article h3 {
	font-family: var(--heading);
	font-size: 25px;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: -.03em;
}

/* Asymmetric history: 1107px */
.history {
	height: 1107px;
	margin-top: 150px;
}

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

.history__intro {
	position: absolute;
	top: 0;
	left: 0;
	width: 585px;
}

.history__intro h2 {
	margin-top: 4px;
	font-family: var(--heading);
	font-size: 60px;
	font-weight: 400;
	line-height: 70px;
	letter-spacing: -.05em;
}

.history__intro .button {
	margin-top: 48px;
}

.history-cards {
	position: relative;
	height: 100%;
}

.history-card {
	position: absolute;
	overflow: hidden;
	width: 345px;
	height: 476px;
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	background: #fff;
}

.history-card img {
	width: 100%;
	height: 309px;
	object-fit: cover;
}

@media (min-width: 1181px) {
	.history-card--three img {
		height: 270px;
	}
}

.history-card > div {
	padding: 22px 56px;
}

.history-card time {
	color: #777c80;
	font-size: 14px;
	font-weight: 500;
	line-height: 26px;
}

.history-card h3 {
	margin-top: 2px;
	font-family: var(--heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: -.03em;
}

.history-card p {
	margin-top: 8px;
	color: #333;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

.history-card--one {
	top: 52px;
	left: 670px;
}

.history-card--two {
	top: 116px;
	left: 1015px;
}

.history-card--three {
	top: 564px;
	left: 670px;
}

.history-card--four {
	top: 628px;
	left: 1015px;
}

.history-card--five {
	top: 630px;
	left: 325px;
	display: flex;
	align-items: flex-end;
	background: var(--accent);
	color: #fff;
}

.history-card--five > div {
	padding: 34px;
}

.history-card--five time,
.history-card--five p {
	color: rgba(255, 255, 255, .75);
}

.history-card--five a {
	display: inline-flex;
	gap: 10px;
	margin-top: 25px;
	font-size: 14px;
	font-weight: 500;
	line-height: 27px;
}

/* TRUE / blog-style rules: 1233px */
.rules {
	height: 1233px;
	margin-top: 150px;
	padding-inline: var(--gutter);
}

.rules__panel {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--panel);
}

.rules__top {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 45px;
	height: 530px;
	padding: 160px 27px 60px 150px;
}

.rules__rings {
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid #bcc1c4;
	border-radius: 50%;
	transform: translateY(-90px);
}

.rules__rings::before,
.rules__rings::after {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid #bcc1c4;
	border-radius: 50%;
	content: "";
	transform: translate(-50%, -50%);
}

.rules__rings::before {
	width: 220px;
	height: 220px;
}

.rules__rings::after {
	width: 135px;
	height: 135px;
	background: var(--ink);
}

.rules__rings span {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	color: #fff;
	font-family: var(--heading);
	font-size: 22px;
	letter-spacing: .09em;
	transform: translate(-50%, -50%);
}

.rules__heading {
	padding-top: 0;
}

.rules__heading h2 {
	max-width: 858px;
	margin-top: 18px;
	font-family: var(--heading);
	font-size: 60px;
	font-weight: 400;
	line-height: 70px;
	letter-spacing: -.05em;
}

.rule-list {
	height: 703px;
	margin: 0 150px;
	border-top: 1px solid #cbd0d3;
}

.rule-list li {
	display: grid;
	grid-template-columns: 328.64px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: start;
	min-height: 175px;
	padding-top: 15px;
	border-bottom: 1px solid #cbd0d3;
}

.rule-list li > span {
	grid-row: 1 / 3;
	height: 60px;
	color: #333;
	font-size: 60px;
	font-weight: 600;
	line-height: 60px;
	letter-spacing: -.03em;
}

.rule-list h3 {
	font-family: var(--heading);
	font-size: 25px;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: -.03em;
}

.rule-list p {
	max-width: 731px;
	margin-top: 10px;
	color: #333;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

/* Footer: 988px */
.footer {
	height: 988px;
	margin-top: 30px;
	padding-inline: var(--gutter);
}

.footer__panel {
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--ink);
	color: #fff;
}

.footer__cta {
	display: grid;
	grid-template-columns: 630px 563px;
	align-items: start;
	justify-content: space-between;
	height: 454px;
	padding: 128px 40px 45px;
}

.footer__cta h2 {
	max-width: 630px;
	font-family: var(--heading);
	font-size: 60px;
	font-weight: 400;
	line-height: 70px;
	letter-spacing: -.03em;
}

.contact-shortcut label {
	display: block;
	margin-bottom: 14px;
	color: #686d70;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
}

.contact-shortcut > div {
	display: flex;
	height: 62px;
	overflow: hidden;
	border: 1px solid #d4d8da;
	border-radius: 100px;
}

.contact-shortcut input {
	min-width: 0;
	flex: 1;
	padding: 0 22px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--ink);
}

.contact-shortcut input::placeholder {
	color: #898e91;
}

.contact-shortcut button {
	margin: 5px;
	padding: 0 24px;
	border: 0;
	border-radius: 100px;
	background: var(--ink);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 27px;
	cursor: pointer;
}

.contact-shortcut__status {
	min-height: 20px;
	margin-top: 10px;
	color: #83888b;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.contact-shortcut {
	width: 563px;
	height: 225px;
	padding: 37px 37px 28px;
	border-radius: 25px;
	background: #fff;
	color: var(--ink);
}

.footer__divider {
	height: 1px;
	margin: 0 40px;
	background: #3d4143;
}

.footer__grid {
	display: grid;
	grid-template-columns: 34% 34% 17% 15%;
	gap: 0;
	height: 417px;
	padding: 117px 40px 50px;
}

.wordmark--footer {
	justify-self: start;
}

.wordmark--footer .wordmark__symbol i {
	background: #fff;
}

.footer__brand > p {
	max-width: 280px;
	margin-top: 30px;
	color: #9fa4a7;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

.footer__column {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
}

.footer__column h3 {
	margin-bottom: 8px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
}

.footer__column p {
	margin-top: 8px;
	color: #94999c;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

.footer__column:nth-child(2) h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
}

.footer__column:nth-child(2) a:first-of-type {
	font-size: 25px;
	font-weight: 600;
	line-height: 35px;
}

.footer__column:nth-child(2) a:nth-of-type(2) {
	font-weight: 500;
}

.footer__legal {
	display: flex;
	height: 116px;
	align-items: center;
	justify-content: space-between;
	margin: 0 40px;
	border-top: 1px solid #3d4143;
	color: #84898c;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

@media (max-width: 1180px) and (min-width: 992px) {
	.site-nav { gap: 17px; }
	.site-nav--right { padding-right: 15px; }
	.wordmark--header { width: 88px; }
	.hero__content { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 30px; }
	.hero__statement h1 { font-size: 66px; }
	.about__grid { grid-template-columns: 30% minmax(0, 1fr); gap: 40px; }
	.about__mark { width: 100%; }
	.about__content h2 { font-size: 48px; line-height: 58px; }
	.about__copy { width: calc(100% - 50px); margin-left: 50px; }
	.about__content .button { margin-left: 50px; }
	.brand-network__list { gap: 25px; }
	.directions__header { grid-template-columns: 58% 1fr; }
	.directions__header,
	.direction-list { padding-inline: 40px; }
	.direction-list h3,
	.direction-list li:nth-child(2) h3 { font-size: 80px; line-height: 94px; }
	.direction-list li > span { font-size: 40px; line-height: 40px; }
	.panorama h2 { left: 260px; width: calc(100% - 300px); font-size: 82px; }
	.projects__header { grid-template-columns: 2fr 1fr; padding-inline: 40px; }
	.projects__header h2 { font-size: 52px; }
	.projects__count strong { font-size: 120px; line-height: 120px; }
	.project-list { gap: 24px; }
	.project-list article > div { right: 24px; left: 24px; }
	.history__intro { width: 320px; }
	.history__intro h2 { font-size: 46px; line-height: 56px; }
	.history-card { width: 272px; height: 330px; }
	.history-card img { height: 185px; }
	.history-card > div { padding: 14px 20px; }
	.history-card p { font-size: 13px; line-height: 22px; }
	.history-card--one { top: 0; left: 360px; }
	.history-card--two { top: 40px; left: 652px; }
	.history-card--three { top: 360px; left: 360px; }
	.history-card--four { top: 400px; left: 652px; }
	.history-card--five { top: 760px; left: 506px; }
	.rules__top { grid-template-columns: 250px 1fr; gap: 35px; padding-inline: 90px; }
	.rule-list { margin-inline: 90px; }
	.rule-list li { grid-template-columns: 260px 1fr; }
	.footer__cta,
	.footer__grid { padding-inline: 40px; }
}

@media (max-width: 991px) {
	:root { --gutter: 30px; }
	.container { width: calc(100% - 60px); }
	.site-header { top: 0; left: 20px; right: 20px; height: 58px; }
	.site-header__inner { grid-template-columns: 1fr auto 1fr; height: 58px; padding: 0 7px; }
	.site-nav,
	.site-header__actions { display: none; }
	.wordmark--header { grid-column: 2; width: 68px; justify-self: center; }
	.wordmark__text { display: none; }
	.wordmark__symbol { transform: scale(.78); transform-origin: left center; }
	.menu-toggle {
		display: flex;
		grid-column: 3;
		width: 42px;
		height: 42px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 4px;
		padding: 0;
		border: 1px solid rgba(17, 19, 21, .35);
		border-radius: 50%;
		background: transparent;
		justify-self: end;
	}
	.menu-toggle i { display: block; width: 16px; height: 1px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
	.menu-toggle[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(5px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
	.menu-toggle[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(-5px) rotate(-45deg); }
	.mobile-menu {
		position: fixed;
		top: 68px;
		right: 20px;
		left: 20px;
		display: flex;
		max-height: 0;
		overflow: hidden;
		border-radius: 16px;
		background: var(--ink);
		color: #fff;
		flex-direction: column;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px);
		transition: max-height .3s ease, opacity .2s ease, transform .2s ease;
	}
	.mobile-menu.is-open { max-height: 480px; padding: 24px; opacity: 1; pointer-events: auto; transform: translateY(0); }
	.mobile-menu a { padding: 9px 0; border-bottom: 1px solid #3b3f41; font-family: var(--heading); font-size: 18px; }
	.hero__content { grid-template-columns: 1fr; }
	.hero__aside { display: block; }
	.hero__statement h1 { max-width: 720px; font-size: 60px; }
	.about__grid { grid-template-columns: 30% 1fr; gap: 40px; }
	.about__mark { width: 240px; height: 240px; }
	.about__content h2 { font-size: 43px; }
	.brand-network__inner { grid-template-columns: 1fr; gap: 25px; }
	.brand-network__list { grid-template-columns: repeat(4, 1fr); }
	.directions__header,
	.direction-list { padding-inline: 35px; }
	.directions__header { grid-template-columns: 1fr; }
	.directions__header .button { display: none; }
	.direction-list h3,
	.direction-list li:nth-child(2) h3 { font-size: 60px; }
	.panorama h2 { left: 40px; width: calc(100% - 80px); font-size: 70px; }
	.projects__header { padding-inline: 40px; }
	.project-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
	.project-list > li { flex: 0 0 330px; scroll-snap-align: start; }
	.history__inner { width: calc(100% - 60px); }
	.history__intro { width: 280px; }
	.history__intro h2 { font-size: 42px; }
	.history-card { width: 30%; height: 340px; }
	.history-card img { height: 190px; }
	.history-card--one { top: 0; left: 35%; }
	.history-card--two { top: 40px; left: 70%; }
	.history-card--three { top: 370px; left: 35%; }
	.history-card--four { top: 410px; left: 70%; }
	.history-card--five { top: 750px; left: 52%; }
	.rules__top { grid-template-columns: 220px 1fr; gap: 35px; padding-inline: 60px; }
	.rules__rings { width: 220px; height: 220px; }
	.rules__rings::before { width: 165px; height: 165px; }
	.rules__rings::after { width: 100px; height: 100px; }
	.rule-list { margin-inline: 60px; }
	.rule-list li { grid-template-columns: 220px 1fr; }
	.footer__cta { grid-template-columns: 1fr 380px; gap: 35px; padding-inline: 45px; }
	.footer__cta h2 { font-size: 46px; line-height: 56px; }
	.footer__grid { gap: 25px; padding-inline: 45px; }
	.footer__divider,
	.footer__legal { margin-inline: 45px; }
}

@media (min-width: 621px) and (max-width: 1180px) {
	.hero__aside p {
		width: 100%;
	}

	.hero-collage__item--one {
		width: calc(25% - 12px);
	}

	.hero-collage__item--two {
		left: 25%;
		width: 50%;
	}

	.hero-collage__item--three {
		width: calc(25% - 12px);
	}

	.hero-collage__stats {
		width: calc(25% - 12px);
		gap: 8px;
		padding: 22px 12px;
	}

	.hero-collage__stats strong { font-size: 28px; }
	.hero-collage__stats span { font-size: 10px; line-height: 16px; }

	.about__content,
	.projects__header > div {
		min-width: 0;
	}

	.about__content h2 {
		max-width: 100%;
		font-size: clamp(40px, 5vw, 52px);
		line-height: 1.17;
	}

	.about__copy {
		width: 100%;
		margin-left: 0;
	}

	.about__content .button {
		margin-left: 0;
	}

	.brand-network__list {
		gap: 25px;
	}

	.projects__header {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		padding: 120px 40px 33px;
	}

	.projects__header h2 {
		max-width: 100%;
		font-size: clamp(42px, 5vw, 52px);
		line-height: 1.17;
	}

	.projects__count {
		padding-top: 20px;
	}

	.projects__count strong {
		font-size: clamp(90px, 11vw, 120px);
		line-height: 1;
	}

	.projects__count span {
		font-size: 18px;
		line-height: 28px;
	}

	.rules {
		height: auto;
	}

	.rules__panel {
		height: auto;
		overflow: hidden;
	}

	.rules__top {
		display: block;
		height: auto;
		padding: 100px 40px 60px;
	}

	.rules__rings {
		display: none;
	}

	.rules__heading h2 {
		max-width: 100%;
		font-size: clamp(40px, 4.7vw, 48px);
		line-height: 1.2;
	}

	.rule-list {
		height: auto;
		margin: 0 40px 80px;
	}

	.rule-list li {
		grid-template-columns: 160px minmax(0, 1fr);
		min-height: 220px;
		padding: 20px 0;
	}

	.footer {
		height: auto;
		min-height: 988px;
	}

	.footer__panel {
		height: auto;
		min-height: 988px;
	}

	.footer__cta {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
		gap: 30px;
		padding: 100px 40px 45px;
	}

	.footer__cta h2 {
		font-size: clamp(40px, 4.7vw, 48px);
		line-height: 1.2;
	}

	.contact-shortcut {
		width: 100%;
	}
}

@media (min-width: 621px) and (max-width: 850px) {
	.about {
		height: 650px;
	}

	.brand-network {
		height: 650px;
	}

	.brand-network__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	.directions__header {
		padding: 100px 40px 55px;
	}

	.directions__header h2 {
		font-size: 48px;
		line-height: 58px;
	}

	.projects__header {
		padding-top: 100px;
	}

	.footer__grid {
		grid-template-columns: 32% 32% 18% 18%;
		gap: 0;
	}
}

/* Exact Neuros rhythm at 390px */
@media (max-width: 620px) {
	:root { --gutter: 20px; }
	body { font-size: 16px; font-weight: 500; line-height: 30px; }
	.container { width: calc(100% - 40px); }
	.section-label { font-size: 14px; line-height: 24.5px; }
	.button { min-height: 50px; padding: 10px 34px 11px 43px; font-size: 14px; line-height: 27px; }

	.site-header { height: 49px; }
	.site-header__inner { height: 49px; border-radius: 18px; }
	.wordmark--header { width: 52px; }
	.menu-toggle { width: 35px; height: 35px; }
	.mobile-menu { top: 58px; }

	.hero { height: 1076px; border-radius: 0 0 18px 18px; }
	.hero__lines { background-image: linear-gradient(90deg, transparent calc(50% - .5px), rgba(17, 19, 21, .06) 50%, transparent calc(50% + .5px)); }
	.hero__content { display: block; padding-top: 78px; }
	.hero__statement h1 { width: 100%; font-size: 40px; line-height: 1.125; letter-spacing: -.03em; }
	.media-pill--wide { display: block; width: 231px; height: 85px; margin-top: 85px; }
	.media-pill--wide strong { left: 20px; font-size: 16px; line-height: 30px; }
	.media-pill--wide .media-pill__icon { right: 10px; width: 56px; height: 56px; }
	.hero__aside { position: absolute; top: 513px; left: 0; width: 100%; padding-top: 0; }
	.media-pill--small { width: 211px; height: 78px; margin-left: 0; }
	.hero__aside p { width: 100%; height: 90px; margin-top: 50px; font-size: 16px; line-height: 30px; }
	.hero__aside .button { margin-top: 27px; }
	.client-row { bottom: 43px; display: block; min-height: 190px; padding-top: 18px; }
	.client-row > p { margin-bottom: 22px; }
	.client-row ul { grid-template-columns: repeat(2, 1fr); height: 126px; border-top: 1px solid rgba(17, 19, 21, .12); }
	.client-row li { height: 63px; border-bottom: 1px solid rgba(17, 19, 21, .12); }
	.client-row li:nth-child(odd) { border-left: 0; }
	.client-row img { max-width: 75px; height: 31px; }

	.image-marquee { height: 120px; }
	.image-marquee__track { height: 74px; font-size: 18px; }
	.image-marquee__group { gap: 18px; padding-inline: 22px; }

	.hero-collage { height: 1625px; }
	.hero-collage__inner { width: calc(100% - 40px); }
	.hero-collage__item--one { top: 0; left: 0; width: 350px; height: 778px; border-radius: 25px; }
	.hero-collage__stats { top: 798px; left: 0; width: 350px; height: 200px; gap: 20px; padding: 28px 26px; border-radius: 25px; }
	.hero-collage__stats strong { font-size: 46px; }
	.hero-collage__stats span { font-size: 13px; line-height: 20px; }
	.hero-collage__item--two { top: 1018px; left: 0; right: auto; width: 350px; height: 343px; border-radius: 25px; }
	.hero-collage__item--three { top: 1381px; left: 0; right: auto; width: 350px; height: 244px; border-radius: 25px; transform: none; }

	.about { height: 835px; margin-top: 0; }
	.about__grid { display: block; width: calc(100% - 40px); }
	.about__mark { width: 190px; height: 190px; margin: 0 auto; }
	.about__mark::before { top: 58px; left: 1px; transform: rotate(-23deg) scale(.72); transform-origin: left top; }
	.about__content { padding-top: 35px; }
	.about__content h2 { margin-top: 0; font-size: 32px; line-height: 40px; letter-spacing: -.05em; }
	.about__copy { width: 100%; gap: 30px; margin-top: 24px; margin-left: 0; }
	.about__copy p { font-size: 16px; font-weight: 500; line-height: 30px; }
	.about__content .button { margin-top: 32px; margin-left: 0; }

	.brand-network { height: 1100px; margin-top: 80px; }
	.brand-network__inner { display: block; width: calc(100% - 40px); padding: 0; }
	.brand-network__inner > h2 { max-width: 350px; font-size: 40px; line-height: 50px; letter-spacing: -.05em; }
	.brand-network__list { display: grid; grid-template-columns: 1fr; gap: 40px; height: auto; margin-top: 60px; }
	.brand-network__list li { min-height: 170px; padding: 0; border: 0; }
	.brand-network__list li:nth-child(1) { height: 202px; }
	.brand-network__list li:nth-child(2) { height: 174px; }
	.brand-network__list li:nth-child(3),
	.brand-network__list li:nth-child(4) { height: 172px; }
	.brand-network__list img { width: 160px; height: 49px; margin-bottom: 20px; }
	.brand-network__list h3 { font-size: 20px; line-height: 30px; }
	.brand-network__list p { margin-top: 9px; font-size: 16px; line-height: 30px; }

	.directions { height: 706px; margin-top: 80px; padding-inline: 20px; }
	.directions__panel { border-radius: 20px; }
	.directions__header { position: static; display: block; height: 250px; padding: 50px 20px; }
	.directions__header h2 { margin-top: 5px; font-size: 32px; line-height: 40px; letter-spacing: -.05em; }
	.directions__header .button { position: absolute; bottom: 80px; left: 20px; z-index: 3; display: inline-flex; }
	.direction-list { grid-template-rows: 41px 82px 82px 82px; height: 456px; padding: 0 20px; }
	.direction-list li { grid-template-columns: auto 1fr; }
	.direction-list li > span { padding: 0 7px 0 0; font-size: 17.5px; line-height: 17.5px; letter-spacing: -.06em; }
	.direction-list h3,
	.direction-list li:nth-child(2) h3 { font-size: 35px; line-height: 40.95px; letter-spacing: -.03em; }

	.panorama { height: 388px; margin-top: 30px; padding-inline: 20px; }
	.panorama__frame { border-radius: 20px; }
	.panorama h2 { top: 40px; left: 20px; width: 310px; font-size: 45px; line-height: 49.5px; }
	.panorama p { bottom: 28px; left: 20px; width: 310px; font-size: 16px; line-height: 30px; }

	.projects { height: 1023px; margin-top: 80px; padding-inline: 20px; }
	.projects__panel { border-radius: 20px; }
	.projects__header { display: block; height: 427.5px; padding: 80px 20px 33px; }
	.projects__header h2 { margin-top: 2px; font-size: 32px; line-height: 40px; letter-spacing: -.05em; }
	.projects__count { position: absolute; top: 276.5px; left: 20px; padding: 0; }
	.projects__count strong { font-size: 80px; line-height: 80px; }
	.projects__count span { margin-top: 8px; font-size: 20px; line-height: 30px; }
	.projects__controls { top: 427.5px; right: auto; left: 20px; }
	.projects__controls button { width: 50px; height: 50px; }
	.button--project { padding-inline: 25px; }
	.project-list { display: flex; height: 595.5px; gap: 40px; padding: 95px 20px 50px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.project-list::-webkit-scrollbar { display: none; }
	.project-list > li { flex: 0 0 310px; height: 450px; scroll-snap-align: start; }
	.project-list article > div { right: 31px; bottom: 64px; left: 40px; padding: 0; }
	.project-list article h3 { font-size: 25px; line-height: 35px; letter-spacing: -.03em; }

	.history { height: 3224px; margin-top: 80px; }
	.history__inner { display: block; width: calc(100% - 40px); }
	.history__intro { position: relative; width: 100%; height: 468px; padding-top: 0; }
	.history__intro h2 { margin-top: 4px; font-size: 32px; line-height: 40px; letter-spacing: -.05em; }
	.history__intro .button { margin-top: 48px; }
	.history-cards { display: flex; height: 2756px; flex-direction: column; gap: 36px; }
	.history-card { position: relative; inset: auto; width: 100%; flex: none; }
	.history-card--one,
	.history-card--two,
	.history-card--three,
	.history-card--four,
	.history-card--five { height: 522.4px; }
	.history-card img { height: 318px; }
	.history-card > div { padding: 22px 36px; }
	.history-card h3 { font-size: 20px; line-height: 30px; }
	.history-card p { font-size: 16px; line-height: 30px; }
	.history-card--five > div { padding: 34px; }

	.rules { height: auto; min-height: 1765px; margin-top: 80px; padding-inline: 20px; }
	.rules__panel { height: auto; min-height: 1765px; padding-bottom: 80px; border-radius: 20px; }
	.rules__top { display: block; height: 485px; padding: 40px 20px 25px; }
	.rules__rings { display: none; }
	.rules__heading { padding-top: 40px; }
	.rules__heading h2 { margin-top: 16px; font-size: 32px; line-height: 40px; letter-spacing: -.05em; }
	.rule-list { height: auto; margin: 0 20px; }
	.rule-list li { display: block; min-height: 300px; padding: 15px 0 30px; }
	.rule-list li > span { display: block; padding: 0; font-size: 60px; line-height: 60px; letter-spacing: -.03em; }
	.rule-list h3 { margin-top: 35px; font-size: 20px; line-height: 29.5px; letter-spacing: -.03em; }
	.rule-list p { margin-top: 10px; font-size: 16px; line-height: 30px; }

	.footer { height: auto; min-height: 1714px; margin-top: 30px; padding-inline: 20px; }
	.footer__panel { height: auto; min-height: 1714px; border-radius: 20px 20px 0 0; }
	.footer__cta { display: block; height: 590px; padding: 80px 20px 35px; }
	.footer__cta h2 { margin-top: 0; font-size: 32px; line-height: 40px; letter-spacing: -.03em; }
	.contact-shortcut { width: 310px; height: 255px; margin-top: 50px; padding: 24px 20px 20px; border-radius: 18px; }
	.contact-shortcut > div { display: block; height: auto; overflow: visible; border: 0; }
	.contact-shortcut input { width: 100%; height: 58px; padding: 0 18px; border: 1px solid #d4d8da; border-radius: 100px; }
	.contact-shortcut button { width: 100%; height: 54px; margin: 12px 0 0; }
	.footer__divider { margin: 0 20px; }
	.footer__grid { display: grid; grid-template-columns: 1fr; gap: 42px; height: auto; min-height: 960px; padding: 80px 20px 60px; }
	.footer__brand { grid-column: auto; }
	.wordmark--footer .wordmark__text { display: flex; }
	.footer__brand > p { margin-top: 23px; }
	.footer__column { gap: 0; font-size: 16px; line-height: 30px; overflow-wrap: anywhere; }
	.footer__column:nth-child(2) { grid-column: auto; }
	.footer__column h3 { margin-bottom: 8px; }
	.footer__legal { display: flex; height: 163px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 13px; margin: 0 20px; font-size: 14px; line-height: 24px; }
}

/* Selected direction: TRUE C / Manifest + footer D / Statement */
.rules {
	height: 860px;
	min-height: 0;
	margin-top: 150px;
	padding-inline: var(--gutter);
}

.rules__panel {
	position: relative;
	height: 100%;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: #f0f2f4;
	color: var(--ink);
}

.rules__manifest-header {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 70px;
	align-items: end;
	height: 350px;
	padding: 88px 70px 60px;
}

.rules__manifest-header h2 {
	max-width: 760px;
	margin-top: 17px;
	font-family: var(--heading);
	font-size: 60px;
	font-weight: 400;
	line-height: 70px;
	letter-spacing: -.05em;
}

.rules__manifest-header > p {
	max-width: 320px;
	color: #a9aeb1;
}

.rule-manifest {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	height: 510px;
	border-top: 1px solid #cbd0d4;
}

.rule-manifest li {
	position: relative;
	display: flex;
	min-width: 0;
	justify-content: flex-end;
	flex-direction: column;
	padding: 34px 28px 46px;
	border-right: 1px solid #cbd0d4;
	overflow: hidden;
}

.rule-manifest li:last-child {
	border-right: 0;
}

.rule-manifest li > span {
	position: absolute;
	top: 20px;
	left: 18px;
	color: transparent;
	font-family: var(--heading);
	font-size: 235px;
	font-weight: 500;
	line-height: 1;
	-webkit-text-stroke: 1px #c5cbd0;
}

.rule-manifest small {
	position: absolute;
	top: 28px;
	right: 28px;
	color: #777f85;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}

.rule-manifest h3 {
	position: relative;
	font-family: var(--heading);
	font-size: 25px;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: -.03em;
}

.rule-manifest p {
	position: relative;
	max-width: 230px;
	margin-top: 10px;
	color: #64696d;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

.footer {
	height: 900px;
	min-height: 0;
	margin-top: 30px;
	padding-inline: var(--gutter);
}

.footer__panel {
	height: 100%;
	min-height: 0;
	padding: 70px 54px 0;
	overflow: hidden;
	border-radius: var(--radius) var(--radius) 0 0;
	background: #0e1011;
	color: #fff;
}

.footer__statement {
	position: relative;
	min-height: 445px;
}

.footer__statement > p {
	color: #858a8d;
	font-size: 13px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.footer__statement h2 {
	margin-top: 20px;
	font-family: var(--heading);
	font-size: 102px;
	font-weight: 400;
	line-height: 108px;
	letter-spacing: -.06em;
}

.footer__statement h2 span {
	color: var(--accent);
}

.footer__statement > a {
	position: absolute;
	right: 0;
	bottom: 65px;
	padding-bottom: 5px;
	border-bottom: 1px solid #5e6366;
	font-family: var(--heading);
	font-size: 22px;
	font-weight: 400;
	line-height: 32px;
}

.footer__meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	min-height: 260px;
	border-top: 1px solid #3a3e40;
	border-bottom: 1px solid #3a3e40;
}

.footer__meta > div {
	display: flex;
	min-width: 0;
	align-items: flex-start;
	flex-direction: column;
	padding: 40px 32px;
	border-right: 1px solid #3a3e40;
}

.footer__meta > div:first-child {
	padding-left: 0;
}

.footer__meta > div:last-child {
	border-right: 0;
}

.footer__meta > div > span {
	margin-bottom: 22px;
	color: #777d80;
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.footer__meta a,
.footer__meta p {
	font-family: var(--heading);
	font-size: 19px;
	font-weight: 400;
	line-height: 31px;
}

.footer__meta p small {
	display: block;
	margin-top: 13px;
	color: #777d80;
	font-family: var(--body);
	font-size: 12px;
	font-weight: 500;
	line-height: 21px;
}

.footer__meta nav {
	display: block;
}

.footer__menu {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 3px 35px;
}

.footer__statement a,
.footer__meta a,
.footer__base a {
	transition: color .2s ease;
}

.footer__statement a:hover,
.footer__meta a:hover,
.footer__base a:hover {
	color: var(--lime);
}

.footer__base > a:last-child:hover,
.footer__base > a:last-child:focus-visible {
	color: var(--brand-red);
}

.footer__base {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	height: 125px;
	align-items: center;
	color: #7f8588;
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
}

.footer__base .wordmark {
	justify-self: start;
	color: #fff;
}

.footer__base .wordmark__text {
	display: flex;
}

.footer__base > a:last-child {
	justify-self: end;
}

@media (max-width: 1180px) {
	.rules__manifest-header h2 {
		font-size: 50px;
		line-height: 60px;
	}

	.rule-manifest li > span {
		font-size: 185px;
	}

	.footer__statement h2 {
		font-size: 84px;
		line-height: 92px;
	}
}

@media (max-width: 860px) {
	.rules {
		height: auto;
	}

	.rules__panel {
		height: auto;
	}

	.rules__manifest-header {
		grid-template-columns: 1fr;
		align-content: center;
		height: auto;
		min-height: 470px;
		padding: 70px 40px 60px;
	}

	.rules__manifest-header > p {
		max-width: 520px;
		margin-top: 30px;
	}

	.rule-manifest {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(255px, auto);
		height: auto;
		min-height: 510px;
	}

	.rule-manifest li:nth-child(2) {
		border-right: 0;
	}

	.rule-manifest li:nth-child(-n + 2) {
		border-bottom: 1px solid #cbd0d4;
	}

	.footer {
		height: auto;
	}

	.footer__panel {
		height: auto;
	}

	.footer__statement > a {
		position: static;
		display: inline-block;
		margin-top: 35px;
	}

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

	.footer__meta > div,
	.footer__meta > div:first-child {
		min-height: 180px;
		padding: 40px 0;
		border-right: 0;
		border-bottom: 1px solid #3a3e40;
	}

	.footer__meta > div:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 620px) {
	.rules {
		height: auto;
		min-height: 0;
		margin-top: 80px;
		padding-inline: 20px;
	}

	.rules__panel {
		height: auto;
		min-height: 0;
		padding: 0;
		border-radius: 20px;
	}

	.rules__manifest-header {
		min-height: 560px;
		padding: 60px 20px;
	}

	.rules__manifest-header h2 {
		font-size: 40px;
		line-height: 50px;
	}

	.rule-manifest {
		display: block;
		min-height: 0;
	}

	.rule-manifest li {
		min-height: 350px;
		border-right: 0;
		border-bottom: 1px solid #3a3e40;
	}

	.rule-manifest li:last-child {
		border-bottom: 0;
	}

	.rule-manifest li > span {
		font-size: 210px;
	}

	.footer {
		height: auto;
		min-height: 0;
		margin-top: 30px;
		padding-inline: 20px;
	}

	.footer__panel {
		height: auto;
		min-height: 0;
		padding: 60px 20px 0;
		border-radius: 20px 20px 0 0;
	}

	.footer__statement {
		min-height: 450px;
	}

	.footer__statement h2 {
		font-size: 56px;
		line-height: 62px;
	}

	.footer__statement > a {
		max-width: 100%;
		overflow-wrap: anywhere;
		font-size: 17px;
		line-height: 29px;
	}

	.footer__meta > div,
	.footer__meta > div:first-child {
		min-height: 230px;
		padding: 38px 0;
	}

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

	.footer__base {
		display: flex;
		height: auto;
		min-height: 240px;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		gap: 30px;
	}

	.footer__base > a:last-child {
		justify-self: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* Selected modules: directions / system, projects / index, history / axis. */

/* Directions — jasny system kompetencji z równą typografią. */
.directions {
	height: auto;
	min-height: 1168px;
}

.directions__panel {
	background: #f5f6f7;
}

.directions__system {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 44% 56%;
	min-height: 735px;
	padding: 0 40px 75px;
}

.direction-system__core {
	position: relative;
	display: grid;
	place-items: center;
	border-right: 1px solid #d4d9dc;
}

.direction-system__core::before,
.direction-system__core::after {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid #c8ced2;
	border-radius: 50%;
	content: "";
	transform: translate(-50%, -50%);
}

.direction-system__core::before {
	width: 430px;
	height: 430px;
}

.direction-system__core::after {
	width: 300px;
	height: 300px;
}

.direction-system__core span {
	position: relative;
	z-index: 1;
	display: grid;
	width: 112px;
	height: 112px;
	place-items: center;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-family: var(--heading);
	font-size: 18px;
	letter-spacing: .12em;
}

.direction-system__core span::after {
	position: absolute;
	top: -7px;
	right: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent);
	content: "";
}

.direction-system__core small {
	position: absolute;
	bottom: calc(50% - 108px);
	left: 50%;
	color: #6b7276;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	transform: translateX(-50%);
}

.direction-system__list {
	border-top: 1px solid #cbd1d4;
}

.direction-system__list > li {
	display: grid;
	min-height: 174px;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	border-bottom: 1px solid #cbd1d4;
}

.direction-system__list > li > span {
	align-self: start;
	padding-top: 28px;
	color: #7b8388;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
}

.direction-system__list h3 {
	font-family: var(--heading);
	font-size: 26px;
	font-weight: 400;
	line-height: 34px;
	letter-spacing: -.04em;
}

.direction-system__list ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	margin-top: 10px;
}

.direction-system__list ul li {
	position: relative;
	padding-left: 13px;
	color: #5e666b;
	font-size: 13px;
	line-height: 23px;
}

.direction-system__list ul li::before {
	position: absolute;
	top: 10px;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--accent);
	content: "";
}

/* Wdrożenia — wybrany indeks wierszowy. */
.projects {
	height: 1000px;
}

.projects__panel--index {
	padding: 58px 50px 48px;
	background: #101214;
}

.projects-index__header {
	display: flex;
	min-height: 248px;
	align-items: end;
	justify-content: space-between;
	gap: 60px;
	padding-bottom: 44px;
}

.projects-index__header h2 {
	max-width: 820px;
	margin-top: 12px;
	font-family: var(--heading);
	font-size: 52px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.05em;
}

.projects-index__count {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 18px;
}

.projects-index__count strong {
	color: var(--accent);
	font-family: var(--heading);
	font-size: 150px;
	font-weight: 500;
	line-height: .9;
	letter-spacing: -.08em;
}

.projects-index__count span {
	max-width: 86px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.projects-index__list {
	border-top: 1px solid rgba(255, 255, 255, .25);
}

.projects-index__list > li {
	display: grid;
	min-height: 154px;
	grid-template-columns: 52px 125px minmax(0, 1fr) 210px 30px;
	align-items: center;
	gap: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, .17);
}

.projects-index__no,
.projects-index__type {
	color: rgba(255, 255, 255, .55);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1.4;
	text-transform: uppercase;
}

.projects-index__title h3 {
	font-family: var(--heading);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -.04em;
}

.projects-index__title p {
	margin-top: 6px;
	color: rgba(255, 255, 255, .54);
	font-size: 11px;
	line-height: 1.6;
}

.projects-index__title small {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, .42);
	font-size: 9px;
}

.projects-index__list img {
	width: 210px;
	height: 112px;
	border-radius: 10px;
	object-fit: cover;
	filter: saturate(.55) brightness(.84);
	transition: filter .25s ease, transform .25s ease;
}

.projects-index__list > li:hover img {
	filter: saturate(1) brightness(1);
	transform: translateX(-5px);
}

.projects-index__list i {
	font-size: 20px;
	font-style: normal;
	transition: transform .2s ease;
}

.projects-index__list > li:hover i {
	transform: translate(3px, -3px);
}

/* Historia — wybrana oś czasu. */
.history {
	height: auto;
	min-height: 0;
	margin-top: 150px;
	padding-inline: var(--gutter);
}

.history__inner {
	width: 100%;
	height: auto;
	margin-inline: auto;
}

.history-axis__header {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
	gap: 90px;
	align-items: end;
	padding: 84px 70px 64px;
	border: 1px solid #e0e3e5;
	border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0;
	background: #fff;
}

.history-axis__header h2 {
	max-width: 800px;
	margin-top: 17px;
	font-family: var(--heading);
	font-size: 58px;
	font-weight: 400;
	line-height: 68px;
	letter-spacing: -.05em;
}

.history-axis__header > p {
	color: #565c60;
}

.history-axis__media {
	position: relative;
	height: 470px;
	margin: 0;
	overflow: hidden;
	border: 1px solid #e0e3e5;
	border-top: 0;
	border-bottom: 0;
	background: #fff;
}

.history-axis__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .62));
	content: "";
}

.history-axis__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.history-axis__media figcaption {
	position: absolute;
	right: 28px;
	bottom: 24px;
	left: 28px;
	z-index: 1;
	display: flex;
	align-items: end;
	justify-content: space-between;
	color: #fff;
	font-size: 13px;
}

.history-axis__media figcaption span {
	font-family: var(--heading);
	font-size: 38px;
	line-height: 46px;
	letter-spacing: -.04em;
}

.history-axis__timeline {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	border: 1px solid #e0e3e5;
	border-top: 1px solid #cfd4d7;
	background: #fff;
}

.history-axis__timeline li {
	min-height: 240px;
	padding: 28px 27px 34px;
	border-right: 1px solid #cfd4d7;
}

.history-axis__timeline li:not(:first-child) {
	padding-left: 27px;
}

.history-axis__timeline li:last-child {
	border-right: 0;
}

.history-axis__timeline time,
.history-axis__timeline li > span {
	display: block;
	color: #6b7175;
	font-size: 13px;
	line-height: 24px;
}

.history-axis__timeline h3 {
	margin-top: 38px;
	font-family: var(--heading);
	font-size: 21px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: -.03em;
}

.history-axis__timeline p {
	margin-top: 11px;
	color: #5d6367;
	font-size: 14px;
	line-height: 24px;
}

.history-axis__career {
	display: grid;
	min-height: 136px;
	align-items: center;
	grid-template-columns: 230px minmax(0, 1fr) auto;
	padding: 0 70px;
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--ink);
	color: #fff;
}

.history-axis__career span {
	color: #9da2a5;
	font-size: 12px;
	text-transform: uppercase;
}

.history-axis__career strong {
	font-family: var(--heading);
	font-size: 27px;
	font-weight: 400;
	line-height: 36px;
}

.history-axis__career i {
	font-size: 24px;
	font-style: normal;
}

/* TRUE — jasny panel: etykieta i opis muszą mieć kontrast. */
.rules__manifest-header .section-label--dark,
.rules__manifest-header .section-label {
	color: var(--ink);
}

.rules__manifest-header > p {
	color: #64696d;
}

@media (max-width: 1180px) {
	.direction-system__core::before { width: 360px; height: 360px; }
	.direction-system__core::after { width: 250px; height: 250px; }
	.projects-index__header h2 { font-size: 46px; line-height: 56px; }
	.projects-index__list > li { grid-template-columns: 42px 102px minmax(0, 1fr) 180px 24px; gap: 16px; }
	.projects-index__list img { width: 180px; }
	.history-axis__header h2 { font-size: 48px; line-height: 58px; }
}

@media (max-width: 991px) {
	.directions {
		min-height: 0;
	}

	.directions__system {
		display: block;
		min-height: 0;
		padding-bottom: 55px;
	}

	.direction-system__core {
		min-height: 350px;
		border-right: 0;
		border-bottom: 1px solid #d4d9dc;
	}

	.direction-system__list > li {
		min-height: 190px;
	}

	.projects {
		height: auto;
	}

	.projects__panel--index {
		padding: 58px 40px 48px;
	}

	.projects-index__header {
		align-items: start;
		flex-direction: column;
		gap: 34px;
		padding-bottom: 44px;
	}

	.projects-index__list > li {
		grid-template-columns: 42px 110px minmax(0, 1fr) 160px;
	}

	.projects-index__list img {
		width: 160px;
	}

	.projects-index__list i {
		display: none;
	}

	.history {
		padding-inline: var(--gutter);
	}

	.history-axis__header {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 70px 40px 50px;
	}

	.history-axis__media {
		height: 420px;
	}

	.history-axis__timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.history-axis__timeline li:nth-child(2) {
		border-right: 0;
	}

	.history-axis__timeline li:nth-child(-n + 2) {
		border-bottom: 1px solid #cfd4d7;
	}

	.history-axis__career {
		grid-template-columns: 150px minmax(0, 1fr) auto;
		padding-inline: 40px;
	}
}

@media (max-width: 620px) {
	.directions {
		padding-inline: 20px;
	}

	.directions__header {
		height: auto;
		min-height: 250px;
		padding: 50px 20px 42px;
	}

	.directions__header h2 {
		font-size: 32px;
		line-height: 40px;
	}

	.directions__header .button {
		position: static;
		display: inline-flex;
		margin-top: 30px;
	}

	.directions__system {
		padding: 0 20px 40px;
	}

	.direction-system__core {
		min-height: 360px;
	}

	.direction-system__core::before { width: 290px; height: 290px; }
	.direction-system__core::after { width: 205px; height: 205px; }
	.direction-system__core small { bottom: calc(50% - 100px); }

	.direction-system__list > li,
	.direction-system__list > li:not(:first-child) {
		display: block;
		min-height: 0;
		padding: 25px 0 29px;
		border-right: 0;
	}

	.direction-system__list > li > span {
		padding: 0;
	}

	.direction-system__list h3 {
		margin-top: 24px;
		font-size: 25px;
		line-height: 33px;
	}

	.direction-system__list ul {
		display: block;
		margin-top: 10px;
	}

	.direction-system__list ul li {
		margin-top: 5px;
		font-size: 13px;
		line-height: 22px;
	}

	.projects {
		padding-inline: 20px;
	}

	.projects__panel--index {
		padding: 31px 20px 24px;
		border-radius: 20px;
	}

	.projects-index__header {
		gap: 31px;
		padding-bottom: 32px;
	}

	.projects-index__header h2 {
		font-size: 30px;
		line-height: 1.28;
	}

	.projects-index__count strong {
		font-size: 82px;
	}

	.projects-index__list > li {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 6px 10px;
		padding: 23px 0 25px;
	}

	.projects-index__type {
		grid-column: 2;
	}

	.projects-index__title {
		grid-column: 1 / -1;
		margin-top: 7px;
	}

	.projects-index__title h3 {
		font-size: 22px;
	}

	.projects-index__list img {
		width: 100%;
		height: 185px;
		grid-column: 1 / -1;
		margin-top: 9px;
	}

	.history {
		margin-top: 80px;
		padding-inline: 20px;
	}

	.history-axis__header {
		gap: 28px;
		padding: 58px 20px 42px;
		border-radius: 20px 20px 0 0;
	}

	.history-axis__header h2 {
		font-size: 36px;
		line-height: 45px;
	}

	.history-axis__header > p {
		font-size: 14px;
		line-height: 25px;
	}

	.history-axis__media {
		height: 330px;
	}

	.history-axis__media figcaption {
		display: block;
		right: 18px;
		bottom: 16px;
		left: 18px;
	}

	.history-axis__media figcaption span {
		display: block;
		margin-bottom: 3px;
		font-size: 28px;
		line-height: 36px;
	}

	.history-axis__timeline {
		display: block;
	}

	.history-axis__timeline li,
	.history-axis__timeline li:not(:first-child) {
		min-height: 215px;
		padding: 24px 20px;
		border-right: 0;
		border-bottom: 1px solid #cfd4d7;
	}

	.history-axis__timeline h3 {
		margin-top: 25px;
	}

	.history-axis__career {
		display: flex;
		min-height: 230px;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		gap: 14px;
		padding: 30px 20px;
		border-radius: 0 0 20px 20px;
	}

	.history-axis__career strong {
		font-size: 23px;
		line-height: 32px;
	}

	.history-axis__career i {
		position: absolute;
		right: 20px;
	}
}

/* Kierunki D / System — centralny diagram zamiast listy wierszowej. */
.directions__system { display: block; min-height: 715px; padding: 0; }
.direction-system__map { position: relative; min-height: 715px; padding: 58px 72px 72px; overflow: hidden; }
.direction-system__map::before,
.direction-system__map::after { position: absolute; background: rgba(17, 19, 21, .16); content: ""; }
.direction-system__map::before { top: 50%; right: 72px; left: 72px; height: 1px; }
.direction-system__map::after { top: 58px; bottom: 72px; left: 50%; width: 1px; }
.direction-system__map > ol { position: relative; z-index: 2; display: grid; min-height: 585px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); column-gap: 360px; row-gap: 85px; margin: 0; padding: 0; list-style: none; }
.direction-system__map > ol > li { display: flex; min-width: 0; justify-content: center; flex-direction: column; }
.direction-system__map > ol > li:nth-child(even) { align-items: flex-end; text-align: right; }
.direction-system__map > ol > li > span { margin-bottom: 10px; padding: 0; color: #5c6265; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.direction-system__map h3 { max-width: 390px; margin: 0; font-family: var(--heading); font-size: clamp(34px, 3.15vw, 46px); font-weight: 400; line-height: 1.12; letter-spacing: -.055em; overflow-wrap: anywhere; }
.direction-system__map > ol > li:nth-child(2) h3 { font-size: clamp(34px, 3.15vw, 46px); }
.direction-system__map ul { display: flex; max-width: 430px; align-items: flex-start; flex-direction: column; flex-wrap: nowrap; gap: 5px 0; margin: 15px 0 0; padding: 0; list-style: none; }
.direction-system__map > ol > li:nth-child(even) ul { align-items: flex-end; justify-content: flex-start; }
.direction-system__map ul li { position: relative; padding-left: 11px; color: #5e666b; font-size: 12px; line-height: 21px; }
.direction-system__map ul li::before { position: absolute; top: 9px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); content: ""; }
.direction-system__core { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; width: 112px; height: 112px; min-height: 0; place-items: center; border: 0; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.direction-system__core::before,
.direction-system__core::after { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.direction-system__core small { top: calc(100% + 34px); bottom: auto; left: 50%; transform: translateX(-50%); }

@media (max-width: 1180px) and (min-width: 992px) {
	.direction-system__map { padding-inline: 52px; }
	.direction-system__map::before { right: 52px; left: 52px; }
	.direction-system__map > ol { column-gap: 300px; }
}

@media (max-width: 991px) and (min-width: 621px) {
	.direction-system__map { min-height: 720px; padding: 54px 40px 64px; }
	.direction-system__map::before { right: 40px; left: 40px; }
	.direction-system__map::after { top: 54px; bottom: 64px; }
	.direction-system__map > ol { min-height: 600px; column-gap: 230px; row-gap: 110px; }
	.direction-system__core { width: 175px; height: 175px; }
	.direction-system__core span { font-size: 38px; }
	.direction-system__map h3,
	.direction-system__map > ol > li:nth-child(2) h3 { font-size: clamp(26px, 4vw, 33px); }
}

@media (max-width: 620px) {
	.direction-system__map { min-height: 960px; padding: 260px 20px 50px; }
	.direction-system__map::before,
	.direction-system__map::after { display: none; }
	.direction-system__core { top: 137px; width: 180px; height: 180px; }
	.direction-system__map > ol { display: block; min-height: 0; }
	.direction-system__map > ol > li,
	.direction-system__map > ol > li:nth-child(even) { display: flex; min-height: 190px; align-items: flex-start; justify-content: center; border-top: 1px solid rgba(17, 19, 21, .17); text-align: left; }
	.direction-system__map > ol > li > span { margin-bottom: 10px; }
	.direction-system__map h3,
	.direction-system__map > ol > li:nth-child(2) h3 { max-width: 290px; font-size: 31px; line-height: 38px; overflow-wrap: normal; }
	.direction-system__map ul,
	.direction-system__map > ol > li:nth-child(even) ul { display: block; margin-top: 10px; text-align: left; }
	.direction-system__map ul li { margin-top: 5px; font-size: 13px; line-height: 22px; }
}

/* Kierunki D / System — cztery punkty kompetencji na nieregularnych orbitach. */
.direction-system__orbit-dots {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}

.direction-system__orbit-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .45);
	will-change: transform;
}

.direction-system__orbit-dot--druk {
	background: var(--accent);
	animation: direction-orbit-druk 18s linear infinite;
}

.direction-system__orbit-dot--bhp {
	background: #30363a;
	animation: direction-orbit-bhp 22s linear infinite -5s;
}

.direction-system__orbit-dot--ident {
	background: #899196;
	animation: direction-orbit-ident 20s linear infinite -10s;
}

.direction-system__orbit-dot--digital {
	background: #c0c6c9;
	animation: direction-orbit-digital 24s linear infinite -16s;
}

@keyframes direction-orbit-druk {
	0% { transform: translate(-50%, -50%) translate(0, -238px); }
	25% { transform: translate(-50%, -50%) translate(168px, -92px); }
	50% { transform: translate(-50%, -50%) translate(82px, 187px); }
	75% { transform: translate(-50%, -50%) translate(-194px, 96px); }
	100% { transform: translate(-50%, -50%) translate(0, -238px); }
}

@keyframes direction-orbit-bhp {
	0% { transform: translate(-50%, -50%) translate(210px, 34px); }
	25% { transform: translate(-50%, -50%) translate(56px, -200px); }
	50% { transform: translate(-50%, -50%) translate(-170px, -128px); }
	75% { transform: translate(-50%, -50%) translate(-98px, 178px); }
	100% { transform: translate(-50%, -50%) translate(210px, 34px); }
}

@keyframes direction-orbit-ident {
	0% { transform: translate(-50%, -50%) translate(-218px, -30px); }
	25% { transform: translate(-50%, -50%) translate(-88px, 192px); }
	50% { transform: translate(-50%, -50%) translate(184px, 136px); }
	75% { transform: translate(-50%, -50%) translate(128px, -184px); }
	100% { transform: translate(-50%, -50%) translate(-218px, -30px); }
}

@keyframes direction-orbit-digital {
	0% { transform: translate(-50%, -50%) translate(118px, 204px); }
	25% { transform: translate(-50%, -50%) translate(-208px, 76px); }
	50% { transform: translate(-50%, -50%) translate(-132px, -176px); }
	75% { transform: translate(-50%, -50%) translate(196px, -108px); }
	100% { transform: translate(-50%, -50%) translate(118px, 204px); }
}

@media (max-width: 620px) {
	.direction-system__orbit-dot { width: 8px; height: 8px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5); }
	.direction-system__orbit-dot--druk { animation-name: direction-orbit-mobile-druk; }
	.direction-system__orbit-dot--bhp { animation-name: direction-orbit-mobile-bhp; }
	.direction-system__orbit-dot--ident { animation-name: direction-orbit-mobile-ident; }
	.direction-system__orbit-dot--digital { animation-name: direction-orbit-mobile-digital; }
}

@keyframes direction-orbit-mobile-druk {
	0% { transform: translate(-50%, -50%) translate(0, -132px); }
	25% { transform: translate(-50%, -50%) translate(94px, -55px); }
	50% { transform: translate(-50%, -50%) translate(48px, 112px); }
	75% { transform: translate(-50%, -50%) translate(-108px, 58px); }
	100% { transform: translate(-50%, -50%) translate(0, -132px); }
}

@keyframes direction-orbit-mobile-bhp {
	0% { transform: translate(-50%, -50%) translate(116px, 21px); }
	25% { transform: translate(-50%, -50%) translate(32px, -114px); }
	50% { transform: translate(-50%, -50%) translate(-98px, -70px); }
	75% { transform: translate(-50%, -50%) translate(-56px, 102px); }
	100% { transform: translate(-50%, -50%) translate(116px, 21px); }
}

@keyframes direction-orbit-mobile-ident {
	0% { transform: translate(-50%, -50%) translate(-120px, -18px); }
	25% { transform: translate(-50%, -50%) translate(-50px, 108px); }
	50% { transform: translate(-50%, -50%) translate(104px, 76px); }
	75% { transform: translate(-50%, -50%) translate(72px, -106px); }
	100% { transform: translate(-50%, -50%) translate(-120px, -18px); }
}

@keyframes direction-orbit-mobile-digital {
	0% { transform: translate(-50%, -50%) translate(66px, 116px); }
	25% { transform: translate(-50%, -50%) translate(-114px, 42px); }
	50% { transform: translate(-50%, -50%) translate(-72px, -100px); }
	75% { transform: translate(-50%, -50%) translate(108px, -60px); }
	100% { transform: translate(-50%, -50%) translate(66px, 116px); }
}

@media (prefers-reduced-motion: reduce) {
	.direction-system__orbit-dot { animation: none; }
	.direction-system__orbit-dot--druk { transform: translate(-50%, -50%) translate(0, -238px); }
	.direction-system__orbit-dot--bhp { transform: translate(-50%, -50%) translate(210px, 34px); }
	.direction-system__orbit-dot--ident { transform: translate(-50%, -50%) translate(-218px, -30px); }
	.direction-system__orbit-dot--digital { transform: translate(-50%, -50%) translate(118px, 204px); }
}

/* Wspólny rytm sekcji i czyste zaokrąglenie bannera. */
:root { --section-gap: 100px; }

.panorama,
.projects,
.history,
.rules,
.footer {
	margin-top: var(--section-gap);
}

.panorama__frame {
	isolation: isolate;
	border-radius: 20px;
}

.panorama__frame::after {
	z-index: 1;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(112, 10, 5, .84), rgba(203, 34, 16, .65) 60%, rgba(112, 10, 5, .24));
}

.panorama__frame > img {
	position: relative;
	z-index: 0;
	filter: grayscale(.25) contrast(1.05) saturate(.9);
	mix-blend-mode: normal;
}

@media (max-width: 620px) {
	.panorama,
	.projects,
	.history,
	.rules,
	.footer {
		margin-top: 80px;
	}
}

/* Header / partner strip — więcej oddechu i miejsce przygotowane pod slider. */
.site-header__inner { padding-inline: 100px; }
.client-row { grid-template-columns: 1fr; min-height: 68px; border-top: 0; }
.client-row ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.client-row li { height: 54px; border-left: 0; }

@media (max-width: 1180px) and (min-width: 992px) {
	.site-header__inner { padding-inline: 50px; }
}

@media (max-width: 991px) {
	.site-header__inner { padding-inline: 7px; }
	.client-row { bottom: 43px; min-height: 80px; padding-top: 0; }
	.client-row ul { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 80px; border-top: 0; }
	.client-row li { height: 80px; border: 0; }
	.client-row img { max-width: 75px; height: 31px; }
}

/* Orbitujące punkty — zsynchronizowane zbliżenie do SGM zamiast chaotycznego ruchu. */
.direction-system__core span::after { display: none; }
.direction-system__orbit-dot--druk,
.direction-system__orbit-dot--bhp,
.direction-system__orbit-dot--ident,
.direction-system__orbit-dot--digital {
	animation-duration: 7s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-delay: 0s;
}
.direction-system__orbit-dot--druk { animation-name: direction-converge-druk; }
.direction-system__orbit-dot--bhp { animation-name: direction-converge-bhp; }
.direction-system__orbit-dot--ident { animation-name: direction-converge-ident; }
.direction-system__orbit-dot--digital { animation-name: direction-converge-digital; }

@keyframes direction-converge-druk {
	0%, 100% { opacity: .76; transform: translate(-50%, -50%) translate(0, -238px) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -50%) translate(0, -145px) scale(1.28); }
}
@keyframes direction-converge-bhp {
	0%, 100% { opacity: .76; transform: translate(-50%, -50%) translate(210px, 34px) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -50%) translate(128px, 20px) scale(1.28); }
}
@keyframes direction-converge-ident {
	0%, 100% { opacity: .76; transform: translate(-50%, -50%) translate(-218px, -30px) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -50%) translate(-132px, -18px) scale(1.28); }
}
@keyframes direction-converge-digital {
	0%, 100% { opacity: .76; transform: translate(-50%, -50%) translate(118px, 204px) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -50%) translate(72px, 122px) scale(1.28); }
}

@media (max-width: 620px) {
	.direction-system__orbit-dot--druk { animation-name: direction-converge-mobile-druk; }
	.direction-system__orbit-dot--bhp { animation-name: direction-converge-mobile-bhp; }
	.direction-system__orbit-dot--ident { animation-name: direction-converge-mobile-ident; }
	.direction-system__orbit-dot--digital { animation-name: direction-converge-mobile-digital; }
}
@keyframes direction-converge-mobile-druk {
	0%, 100% { opacity: .76; transform: translate(-50%, -50%) translate(0, -132px) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -50%) translate(0, -82px) scale(1.25); }
}
@keyframes direction-converge-mobile-bhp {
	0%, 100% { opacity: .76; transform: translate(-50%, -50%) translate(116px, 21px) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -50%) translate(70px, 13px) scale(1.25); }
}
@keyframes direction-converge-mobile-ident {
	0%, 100% { opacity: .76; transform: translate(-50%, -50%) translate(-120px, -18px) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -50%) translate(-72px, -11px) scale(1.25); }
}
@keyframes direction-converge-mobile-digital {
	0%, 100% { opacity: .76; transform: translate(-50%, -50%) translate(66px, 116px) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -50%) translate(39px, 70px) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
	.direction-system__orbit-dot { animation: none; opacity: 1; }
}

/* Finalny rytm: wejście do rdzenia, zanik i ponowne pojawienie na orbicie. */
.direction-system__orbit-dot--druk,
.direction-system__orbit-dot--bhp,
.direction-system__orbit-dot--ident,
.direction-system__orbit-dot--digital { animation-duration: 8s; }

@keyframes direction-converge-druk {
	0% { opacity: .82; transform: translate(-50%, -50%) translate(0, -238px) scale(1); }
	38% { opacity: .95; transform: translate(-50%, -50%) translate(0, -58px) scale(1.12); }
	48% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	56% { opacity: .82; transform: translate(-50%, -50%) translate(0, -238px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-converge-bhp {
	0% { opacity: .82; transform: translate(-50%, -50%) translate(210px, 34px) scale(1); }
	38% { opacity: .95; transform: translate(-50%, -50%) translate(58px, 10px) scale(1.12); }
	48% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	56% { opacity: .82; transform: translate(-50%, -50%) translate(210px, 34px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-converge-ident {
	0% { opacity: .82; transform: translate(-50%, -50%) translate(-218px, -30px) scale(1); }
	38% { opacity: .95; transform: translate(-50%, -50%) translate(-60px, -8px) scale(1.12); }
	48% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	56% { opacity: .82; transform: translate(-50%, -50%) translate(-218px, -30px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-converge-digital {
	0% { opacity: .82; transform: translate(-50%, -50%) translate(118px, 204px) scale(1); }
	38% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 55px) scale(1.12); }
	48% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	56% { opacity: .82; transform: translate(-50%, -50%) translate(118px, 204px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}

@media (max-width: 620px) {
	@keyframes direction-converge-mobile-druk {
		0% { opacity: .82; transform: translate(-50%, -50%) translate(0, -132px) scale(1); }
		38% { opacity: .95; transform: translate(-50%, -50%) translate(0, -34px) scale(1.1); }
		48% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
		56% { opacity: .82; transform: translate(-50%, -50%) translate(0, -132px) scale(1); }
		100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-converge-mobile-bhp {
		0% { opacity: .82; transform: translate(-50%, -50%) translate(116px, 21px) scale(1); }
		38% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 6px) scale(1.1); }
		48% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
		56% { opacity: .82; transform: translate(-50%, -50%) translate(116px, 21px) scale(1); }
		100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-converge-mobile-ident {
		0% { opacity: .82; transform: translate(-50%, -50%) translate(-120px, -18px) scale(1); }
		38% { opacity: .95; transform: translate(-50%, -50%) translate(-34px, -5px) scale(1.1); }
		48% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
		56% { opacity: .82; transform: translate(-50%, -50%) translate(-120px, -18px) scale(1); }
		100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-converge-mobile-digital {
		0% { opacity: .82; transform: translate(-50%, -50%) translate(66px, 116px) scale(1); }
		38% { opacity: .95; transform: translate(-50%, -50%) translate(18px, 32px) scale(1.1); }
		48% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
		56% { opacity: .82; transform: translate(-50%, -50%) translate(66px, 116px) scale(1); }
		100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
}

/* Ostatni override kolejności arkusza: Split dziedziczy tę samą oś 40/20 px. */
.panorama__copy { padding: var(--panel-inset); }

@media (max-width: 620px) {
	.panorama__copy { padding: 32px var(--panel-inset); }
}

/* Header pozostaje czytelny również po dodaniu wejścia do Aktualności i Kariery. */
@media (min-width: 921px) {
	.site-nav { gap: 24px; font-size: 13px; }
	.site-nav--right { padding-right: 15px; }
}

/* Pełne menu zachowuje typografię 13 px, ale zacieśnia geometrię na laptopach. */
@media (min-width: 1081px) and (max-width: 1380px) {
	.site-header__inner { padding-inline: 20px; }
	.site-nav { gap: 10px; }
	.site-nav--right { padding-right: 5px; }
	.wordmark--header { width: 80px; }
	.header-cta { min-width: 120px; }
}

/* Przy najwęższym desktopie pełna nawigacja ustępuje czytelnemu menu zwijanemu. */
@media (min-width: 992px) and (max-width: 1080px) {
	.site-header__inner {
		grid-template-columns: 1fr auto 1fr;
		padding-inline: 20px;
	}

	.site-nav,
	.site-header__actions {
		display: none;
	}

	.wordmark--header {
		grid-column: 2;
		width: 88px;
		justify-self: center;
	}

	.menu-toggle {
		display: flex;
		grid-column: 3;
		width: 42px;
		height: 42px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 4px;
		padding: 0;
		border: 1px solid rgba(17, 19, 21, .35);
		border-radius: 50%;
		background: transparent;
		justify-self: end;
	}

	.menu-toggle i {
		display: block;
		width: 16px;
		height: 1px;
		background: var(--ink);
		transition: transform .2s ease, opacity .2s ease;
	}

	.menu-toggle[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(5px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
	.menu-toggle[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(-5px) rotate(-45deg); }

	.mobile-menu {
		position: fixed;
		top: 128px;
		right: 40px;
		left: 40px;
		display: flex;
		max-height: 0;
		overflow: hidden;
		border-radius: 16px;
		background: var(--ink);
		color: #fff;
		flex-direction: column;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px);
		transition: max-height .3s ease, opacity .2s ease, transform .2s ease;
	}

	.mobile-menu.is-open {
		max-height: 480px;
		padding: 24px;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	.mobile-menu a {
		padding: 9px 0;
		border-bottom: 1px solid #3b3f41;
		font-family: var(--heading);
		font-size: 18px;
	}
}

/* Wspólna geometria paneli — jedna oś wewnętrzna dla wszystkich dużych sekcji. */
:root { --panel-inset: 40px; }

.header-cta,
.directions__header .button {
	text-transform: uppercase;
	letter-spacing: .025em;
}

@media (min-width: 621px) {
	.direction-system__map {
		padding: var(--panel-inset);
	}

	.direction-system__map::before {
		right: var(--panel-inset);
		left: var(--panel-inset);
	}

	.direction-system__map::after {
		top: var(--panel-inset);
		bottom: var(--panel-inset);
	}

	.panorama__copy {
		padding: var(--panel-inset);
	}

	.projects__panel--index {
		padding: var(--panel-inset);
	}

	.history-axis__header {
		padding: var(--panel-inset);
	}

	.history-axis__timeline li {
		padding: var(--panel-inset);
	}

	.history-axis__career {
		padding-inline: var(--panel-inset);
	}

	.rules__manifest-header {
		padding: var(--panel-inset);
	}

	.rule-manifest li {
		padding: var(--panel-inset);
	}

	.footer__panel {
		padding: var(--panel-inset) var(--panel-inset) 0;
	}

	.footer__meta > div,
	.footer__meta > div:first-child {
		padding: var(--panel-inset) 0;
	}
}

@media (min-width: 992px) {
	.footer__meta > div:not(:first-child) {
		padding-left: var(--panel-inset);
	}
}

@media (min-width: 992px) and (max-width: 1180px) {
	.footer__menu {
		column-gap: 20px;
	}
}

@media (max-width: 620px) {
	:root { --panel-inset: 20px; }

	.direction-system__map {
		padding-right: var(--panel-inset);
		padding-left: var(--panel-inset);
	}

	.panorama__copy {
		padding: 32px var(--panel-inset);
	}

	.projects__panel--index {
		padding-right: var(--panel-inset);
		padding-left: var(--panel-inset);
	}

	.history-axis__header {
		padding-right: var(--panel-inset);
		padding-left: var(--panel-inset);
	}

	.history-axis__timeline li,
	.history-axis__timeline li:not(:first-child) {
		padding-right: var(--panel-inset);
		padding-left: var(--panel-inset);
	}

	.history-axis__career {
		padding-right: var(--panel-inset);
		padding-left: var(--panel-inset);
	}

	.rules__manifest-header {
		padding: 40px var(--panel-inset);
	}

	.rule-manifest li {
		padding: var(--panel-inset);
	}

	.footer__panel {
		padding: 40px var(--panel-inset) 0;
	}

	.footer__meta > div,
	.footer__meta > div:first-child {
		padding: var(--panel-inset) 0;
	}
}

/* Izolowana animacja końcowa — bez dziedziczenia poprzednich keyframes. */
.direction-system__orbit-dot--druk { animation-name: direction-single-druk; }
.direction-system__orbit-dot--bhp { animation-name: direction-single-bhp; }
.direction-system__orbit-dot--ident { animation-name: direction-single-ident; }
.direction-system__orbit-dot--digital { animation-name: direction-single-digital; }

@keyframes direction-single-druk {
	0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(0, -238px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(0, -58px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-single-bhp {
	0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(210px, 34px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(58px, 10px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-single-ident {
	0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(-218px, -30px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(-60px, -8px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-single-digital {
	0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(118px, 204px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 55px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}

@media (max-width: 620px) {
	.direction-system__orbit-dot--druk { animation-name: direction-single-mobile-druk; }
	.direction-system__orbit-dot--bhp { animation-name: direction-single-mobile-bhp; }
	.direction-system__orbit-dot--ident { animation-name: direction-single-mobile-ident; }
	.direction-system__orbit-dot--digital { animation-name: direction-single-mobile-digital; }
	@keyframes direction-single-mobile-druk {
		0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(0, -132px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(0, -34px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-single-mobile-bhp {
		0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(116px, 21px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 6px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-single-mobile-ident {
		0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(-120px, -18px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(-34px, -5px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-single-mobile-digital {
		0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(66px, 116px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(18px, 32px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.direction-system__orbit-dot { animation: none; opacity: 1; transform: none; }
}

/* Ostateczne dopracowanie kropek: czysta kropka bez halo i ruch od pierwszej klatki. */
.direction-system__orbit-dot {
	box-shadow: none;
	animation-delay: 0s;
	animation-play-state: running;
}

@keyframes direction-single-druk {
	0% { opacity: 0; transform: translate(-50%, -50%) translate(0, -238px) scale(.85); }
	8% { opacity: .82; transform: translate(-50%, -50%) translate(0, -238px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(0, -58px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-single-bhp {
	0% { opacity: 0; transform: translate(-50%, -50%) translate(210px, 34px) scale(.85); }
	8% { opacity: .82; transform: translate(-50%, -50%) translate(210px, 34px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(58px, 10px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-single-ident {
	0% { opacity: 0; transform: translate(-50%, -50%) translate(-218px, -30px) scale(.85); }
	8% { opacity: .82; transform: translate(-50%, -50%) translate(-218px, -30px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(-60px, -8px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-single-digital {
	0% { opacity: 0; transform: translate(-50%, -50%) translate(118px, 204px) scale(.85); }
	8% { opacity: .82; transform: translate(-50%, -50%) translate(118px, 204px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 55px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}

@media (max-width: 620px) {
	.direction-system__orbit-dot { box-shadow: none; }
	@keyframes direction-single-mobile-druk {
		0% { opacity: 0; transform: translate(-50%, -50%) translate(0, -132px) scale(.85); }
		8% { opacity: .82; transform: translate(-50%, -50%) translate(0, -132px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(0, -34px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-single-mobile-bhp {
		0% { opacity: 0; transform: translate(-50%, -50%) translate(116px, 21px) scale(.85); }
		8% { opacity: .82; transform: translate(-50%, -50%) translate(116px, 21px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 6px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-single-mobile-ident {
		0% { opacity: 0; transform: translate(-50%, -50%) translate(-120px, -18px) scale(.85); }
		8% { opacity: .82; transform: translate(-50%, -50%) translate(-120px, -18px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(-34px, -5px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-single-mobile-digital {
		0% { opacity: 0; transform: translate(-50%, -50%) translate(66px, 116px) scale(.85); }
		8% { opacity: .82; transform: translate(-50%, -50%) translate(66px, 116px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(18px, 32px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
}

/* Panorama B / Split — kompetencje grupy po lewej, realizacja po prawej. */
.panorama__frame {
	display: grid;
	grid-template-columns: 43% 57%;
	background: #111315;
	color: #fff;
}

.panorama__frame::after { display: none; }

.panorama__copy {
	display: flex;
	justify-content: center;
	flex-direction: column;
	min-width: 0;
	padding: 58px 58px 58px 72px;
}

.panorama__copy .panorama__eyebrow {
	position: static;
	width: auto;
	margin: 0;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.panorama__copy h2 {
	position: static;
	top: auto;
	left: auto;
	width: auto;
	margin: 22px 0 0;
	font-size: 74px;
	line-height: 1.05;
	letter-spacing: -.06em;
}

.panorama__copy > span {
	display: block;
	max-width: 330px;
	margin-top: 30px;
	color: #aeb3b6;
	font-size: 16px;
	line-height: 1.875;
}

.panorama__frame figure {
	position: relative;
	min-width: 0;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.panorama__frame figure::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17, 19, 21, .16), transparent 50%);
	content: "";
}

.panorama__frame figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.1) contrast(1.03) saturate(.95);
}

.panorama__frame figcaption {
	position: absolute;
	right: 28px;
	bottom: 24px;
	z-index: 1;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .07em;
	text-transform: uppercase;
}

@media (max-width: 991px) and (min-width: 621px) {
	.panorama__copy { padding-inline: 38px; }
	.panorama__copy h2 { font-size: 54px; }
}

@media (max-width: 620px) {
	.panorama { height: auto; }
	.panorama__frame { display: block; min-height: 600px; height: auto; }
	.panorama__copy { min-height: 285px; padding: 32px 24px; }
	.panorama__copy h2 { margin-top: 22px; font-size: 45px; }
	.panorama__copy > span { margin-top: 24px; font-size: 15px; line-height: 1.7; }
	.panorama__frame figure { height: 315px; }
	.panorama__frame figcaption { right: 20px; bottom: 20px; font-size: 11px; }
}

/* Widoczniejszy timing: krótki start na orbicie, szybkie wejście do SGM i zanik. */
.direction-system__orbit-dot--druk,
.direction-system__orbit-dot--bhp,
.direction-system__orbit-dot--ident,
.direction-system__orbit-dot--digital { animation-duration: 6s; }
@keyframes direction-converge-druk {
	0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(0, -238px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(0, -58px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-converge-bhp {
	0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(210px, 34px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(58px, 10px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-converge-ident {
	0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(-218px, -30px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(-60px, -8px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-converge-digital {
	0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(118px, 204px) scale(1); }
	72% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 55px) scale(1.12); }
	86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}

@media (max-width: 620px) {
	@keyframes direction-converge-mobile-druk {
		0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(0, -132px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(0, -34px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-converge-mobile-bhp {
		0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(116px, 21px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 6px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-converge-mobile-ident {
		0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(-120px, -18px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(-34px, -5px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-converge-mobile-digital {
		0%, 18% { opacity: .82; transform: translate(-50%, -50%) translate(66px, 116px) scale(1); }
		72% { opacity: .95; transform: translate(-50%, -50%) translate(18px, 32px) scale(1.1); }
		86%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.direction-system__orbit-dot { animation: none; opacity: 1; transform: none; }
}

/* Jedno przejście na cykl: orbita → SGM → zanik. */
@keyframes direction-converge-druk {
	0%, 55% { opacity: .82; transform: translate(-50%, -50%) translate(0, -238px) scale(1); }
	78% { opacity: .95; transform: translate(-50%, -50%) translate(0, -58px) scale(1.12); }
	92%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-converge-bhp {
	0%, 55% { opacity: .82; transform: translate(-50%, -50%) translate(210px, 34px) scale(1); }
	78% { opacity: .95; transform: translate(-50%, -50%) translate(58px, 10px) scale(1.12); }
	92%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-converge-ident {
	0%, 55% { opacity: .82; transform: translate(-50%, -50%) translate(-218px, -30px) scale(1); }
	78% { opacity: .95; transform: translate(-50%, -50%) translate(-60px, -8px) scale(1.12); }
	92%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}
@keyframes direction-converge-digital {
	0%, 55% { opacity: .82; transform: translate(-50%, -50%) translate(118px, 204px) scale(1); }
	78% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 55px) scale(1.12); }
	92%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
}

@media (max-width: 620px) {
	@keyframes direction-converge-mobile-druk {
		0%, 55% { opacity: .82; transform: translate(-50%, -50%) translate(0, -132px) scale(1); }
		78% { opacity: .95; transform: translate(-50%, -50%) translate(0, -34px) scale(1.1); }
		92%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-converge-mobile-bhp {
		0%, 55% { opacity: .82; transform: translate(-50%, -50%) translate(116px, 21px) scale(1); }
		78% { opacity: .95; transform: translate(-50%, -50%) translate(32px, 6px) scale(1.1); }
		92%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-converge-mobile-ident {
		0%, 55% { opacity: .82; transform: translate(-50%, -50%) translate(-120px, -18px) scale(1); }
		78% { opacity: .95; transform: translate(-50%, -50%) translate(-34px, -5px) scale(1.1); }
		92%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
	@keyframes direction-converge-mobile-digital {
		0%, 55% { opacity: .82; transform: translate(-50%, -50%) translate(66px, 116px) scale(1); }
		78% { opacity: .95; transform: translate(-50%, -50%) translate(18px, 32px) scale(1.1); }
		92%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.2); }
	}
}

/* Ostateczna kolejność arkusza: Split dziedziczy tę samą oś 40/20 px. */
.panorama__copy { padding: var(--panel-inset); }

@media (max-width: 620px) {
	.panorama__copy { padding: 32px var(--panel-inset); }
}