:root {
	--ink: #231815;
	--muted: #657078;
	--line: #d9e0e3;
	--blue: #003650;
	--cyan: #4f8397;
	--lime: #9fb6bf;
	--paper: #fff;
	--wash: #f4f7f8;
	--content: 1360px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--ink);
	background: #fff;
	font-family: Inter, "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

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

button {
	font: inherit;
}

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

.sp-only {
	display: none;
}

.site-header {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 92px;
	padding: 0 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: 0.35s ease;
}

.site-header.is-scrolled {
	height: 72px;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(210, 220, 233, 0.7);
}

.brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.brand-mark {
	position: relative;
	width: 42px;
	height: 42px;
}

.brand-mark i,
.brand-mark b {
	position: absolute;
	display: block;
	background: #111;
}

.brand-mark i {
	left: 0;
	top: 19px;
	width: 19px;
	height: 4px;
}

.brand-mark b {
	right: 2px;
	top: 4px;
	width: 5px;
	height: 34px;
	transform: rotate(35deg);
}

.brand-copy {
	display: flex;
	flex-direction: column;
}

.brand-name {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.brand-sub {
	margin-top: 4px;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.global-nav {
	display: flex;
	gap: 52px;
}

.global-nav a {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.menu-button {
	display: none;
}

.hero {
	position: relative;
	min-height: 760px;
	height: 100svh;
	max-height: 980px;
	overflow: hidden;
	background: radial-gradient(circle at 78% 30%, rgba(102, 153, 255, 0.16), transparent 31%), linear-gradient(180deg, #fff 0%, #f8fbff 67%, #eaf2ff 100%);
}

.hero__content {
	height: 100%;
	position: relative;
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	align-items: center;
}

.hero__copy {
	position: relative;
	z-index: 5;
	padding-top: 16px;
}

.hero__copy h1 {
	margin: 0;
	font-size: clamp(42px, 4.15vw, 68px);
	line-height: 1.42;
	letter-spacing: 0.08em;
	font-weight: 400;
}

.hero__lead {
	margin: 30px 0 0;
	font-size: 18px;
	letter-spacing: 0.04em;
}

.hero__description {
	margin: 24px 0 0;
	font-size: 13px;
	line-height: 2;
	color: #333a45;
}

.scroll-guide {
	position: absolute;
	left: 48px;
	bottom: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	font-size: 8px;
	letter-spacing: 0.18em;
}

.scroll-guide span {
	writing-mode: vertical-rl;
}

.scroll-guide i {
	width: 1px;
	height: 54px;
	background: #20242c;
	position: relative;
}

.scroll-guide i:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--blue);
}

.section {
	padding: 120px 0;
}

.section-kicker {
	margin: 0 0 54px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: #2856cc;
}

.concept {
	background: #fff;
}

.concept__grid {
	display: grid;
	grid-template-columns: 150px 1fr 1.1fr;
	gap: 54px;
	align-items: center;
}

.concept__grid > .section-kicker {
	align-self: start;
}

.concept__copy h2 {
	margin: 0 0 42px;
	font-size: 40px;
	line-height: 1.55;
	letter-spacing: 0.08em;
	font-weight: 500;
}

.concept__copy p {
	margin: 0 0 24px;
	font-size: 13px;
	line-height: 2.1;
	color: #3f4650;
}

.concept-visual {
	position: relative;
	min-height: 420px;
	background-image: linear-gradient(rgba(60, 106, 207, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 106, 207, 0.06) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(circle, #000 35%, transparent 74%);
}

.plane {
	position: absolute;
	top: 60px;
	width: 130px;
	height: 270px;
	background: linear-gradient(180deg, rgba(102, 126, 255, 0.13), rgba(102, 126, 255, 0.02));
	transform: skewY(-34deg);
}

.plane--1 {
	left: 36%;
}

.plane--2 {
	left: 52%;
	opacity: 0.55;
}

.line {
	position: absolute;
}

.line--h {
	left: 8%;
	top: 51%;
	width: 84%;
	height: 2px;
	background: linear-gradient(90deg, #176fff, #15d3df, #ccec3c);
}

.line--d {
	left: 46%;
	top: 5%;
	width: 2px;
	height: 90%;
	transform: rotate(40deg);
	background: linear-gradient(#664cff, #347bff, #14d8d4);
}

.line--frame {
	left: 30%;
	top: 32%;
	width: 200px;
	height: 120px;
	border: 1px solid rgba(62, 107, 255, 0.6);
	transform: skew(-34deg);
}

.works {
	background: #f7f9fc;
}

.works__layout {
	display: grid;
	grid-template-columns: 350px minmax(0, 1fr);
	gap: 56px;
}

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

.work-item {
	width: 100%;
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 8px;
	padding: 22px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	text-align: left;
	color: #7b828e;
	cursor: pointer;
	transition: 0.25s;
}

.work-item:hover,
.work-item.is-active {
	color: var(--ink);
}

.work-item.is-active {
	transform: translateX(8px);
}

.work-item__number {
	font-size: 11px;
	color: #2d58ce;
}

.work-item small,
.work-item strong,
.work-item em {
	display: block;
}

.work-item small {
	font-size: 9px;
	letter-spacing: 0.1em;
}

.work-item strong {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 500;
}

.work-item em {
	margin-top: 7px;
	font-size: 10px;
	line-height: 1.6;
	font-style: normal;
}

.tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.tags i {
	padding: 4px 7px;
	background: #ebeff4;
	font-size: 9px;
	font-style: normal;
	color: #58606b;
}

.work-detail {
	background: #fff;
	box-shadow: 0 18px 48px rgba(25, 39, 65, 0.07);
	transition:
		opacity 0.2s,
		transform 0.2s;
}

.work-detail.is-changing {
	opacity: 0.2;
	transform: translateY(8px);
}

.company {
	background: #fff;
}

.company-info {
	margin: 0;
}

.company-info div {
	display: grid;
	grid-template-columns: 110px 1fr;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
}

.company-info dt {
	font-size: 11px;
	color: #68707b;
}

.company-info dd {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
}

.contact-button {
	position: relative;
	min-height: 72px;
	padding: 0 28px;
	display: grid;
	grid-template-columns: 28px 1fr 24px;
	align-items: center;
	gap: 18px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(90deg, var(--blue), var(--cyan), var(--lime)) border-box;
	border: 1px solid transparent;
	transition: 0.25s;
}

.contact-button:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(39, 92, 255, 0.06), rgba(18, 200, 232, 0.05), rgba(185, 239, 72, 0.06));
	opacity: 0;
	transition: 0.25s;
}

.contact-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(38, 78, 156, 0.1);
}

.contact-button:hover:before {
	opacity: 1;
}

.contact-button > * {
	position: relative;
}

.contact-button strong {
	text-align: center;
	font-size: 16px;
	letter-spacing: 0.08em;
	font-weight: 500;
}

.contact-button > i {
	text-align: right;
	font-style: normal;
}

.mail-icon {
	position: relative;
	width: 24px;
	height: 17px;
	border: 1px solid #111;
}

.mail-icon:before,
.mail-icon:after {
	content: "";
	position: absolute;
	top: 3px;
	width: 13px;
	height: 1px;
	background: #111;
}

.mail-icon:before {
	left: 1px;
	transform: rotate(31deg);
}

.mail-icon:after {
	right: 1px;
	transform: rotate(-31deg);
}

.site-footer {
	padding: 10px 0 44px;
}

.site-footer__inner {
	padding-top: 20px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brand--footer .brand-name {
	font-size: 17px;
}

.brand--footer .brand-sub {
	font-size: 7px;
}

.site-footer p {
	margin: 0;
	font-size: 10px;
	color: #7d8490;
	letter-spacing: 0.04em;
}

.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.8s ease,
		transform 0.8s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@keyframes (max-width: 1100px) {
	.content-width {
		width: min(calc(100% - 64px), var(--content));
	}
	.site-header {
		padding: 0 32px;
	}
	.hero__content {
		grid-template-columns: 0.9fr 1.1fr;
	}
	.hero-machine {
		right: -8%;
		width: 68vw;
	}
	.concept__grid {
		grid-template-columns: 110px 1fr 1fr;
		gap: 36px;
	}
	.works__layout {
		grid-template-columns: 300px 1fr;
		gap: 34px;
	}
}

@media (max-width: 820px) {
	.content-width {
		width: calc(100% - 48px);
	}
	.site-header {
		height: 72px;
		padding: 0 24px;
	}
	.brand-name {
		font-size: 17px;
	}
	.brand-mark {
		width: 36px;
		height: 36px;
	}
	.brand-mark i {
		top: 17px;
	}
	.brand-mark b {
		height: 30px;
	}
	.menu-button {
		display: flex;
		position: relative;
		z-index: 102;
		width: 42px;
		height: 42px;
		border: 0;
		background: transparent;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 7px;
	}
	.menu-button span {
		width: 24px;
		height: 1px;
		background: #111;
		transition: 0.25s;
	}
	.menu-button[aria-expanded="true"] span:first-child {
		transform: translateY(4px) rotate(45deg);
	}
	.menu-button[aria-expanded="true"] span:last-child {
		transform: translateY(-4px) rotate(-45deg);
	}
	.global-nav {
		position: fixed;
		inset: 0;
		z-index: 101;
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(16px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
		opacity: 0;
		visibility: hidden;
		transition: 0.3s;
	}
	.global-nav.is-open {
		opacity: 1;
		visibility: visible;
	}
	.global-nav a {
		font-size: 15px;
	}
	.hero {
		height: auto;
		min-height: 880px;
		max-height: none;
		padding-top: 100px;
	}
	.hero__content {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.hero__copy {
		padding-top: 30px;
	}
	.hero__copy h1 {
		font-size: clamp(38px, 7.3vw, 54px);
	}
	.hero__lead {
		font-size: 16px;
	}
	.hero-machine {
		position: relative;
		right: auto;
		top: auto;
		width: 100%;
		margin: 26px auto 0;
		aspect-ratio: 1.22;
		transform: none;
	}
	.hero-machine__label {
		right: 2%;
		font-size: 7px;
		padding-left: 30px;
	}
	.hero-machine__label:before {
		width: 22px;
	}
	.hero-machine__core {
		transform: scale(0.82);
		left: 40%;
		top: 34%;
	}
	.hero__floor {
		bottom: -2%;
		height: 26%;
	}
	.system-status {
		right: 24px;
		bottom: 26px;
	}
	.scroll-guide {
		display: none;
	}
	.section {
		padding: 90px 0;
	}
	.section-kicker {
		margin-bottom: 38px;
	}
	.concept__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.concept__grid > .section-kicker {
		grid-column: 1;
	}
	.concept__copy h2 {
		font-size: 34px;
	}
	.concept-visual {
		min-height: 360px;
		margin-top: 24px;
	}
	.works__layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.works-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		border-top: 0;
		gap: 1px;
		background: var(--line);
	}
	.work-item {
		background: #f7f9fc;
		padding: 18px 16px;
		grid-template-columns: 34px 1fr;
		border: 0;
		min-height: 170px;
	}
	.work-item.is-active {
		transform: none;
		background: #fff;
		box-shadow: inset 3px 0 0 var(--blue);
	}
	.work-item em {
		display: none;
	}
	.site-footer__inner {
		align-items: center;
	}
	.site-footer p {
		text-align: right;
		max-width: 210px;
		line-height: 1.6;
	}
}

@media (max-width: 560px) {
	.content-width {
		width: calc(100% - 32px);
	}
	.sp-only {
		display: block;
	}
	.site-header {
		padding: 0 16px;
	}
	.brand {
		gap: 10px;
	}
	.brand-name {
		font-size: 15px;
	}
	.brand-sub {
		font-size: 6px;
	}
	.brand-mark {
		width: 32px;
		height: 32px;
	}
	.brand-mark i {
		top: 15px;
		width: 16px;
		height: 3px;
	}
	.brand-mark b {
		height: 27px;
		width: 4px;
	}
	.hero {
		min-height: 760px;
		padding-top: 84px;
	}
	.hero__copy {
		padding-top: 22px;
	}
	.hero__copy h1 {
		font-size: 36px;
		line-height: 1.48;
		letter-spacing: 0.05em;
	}
	.hero__lead {
		margin-top: 22px;
		font-size: 14px;
	}
	.hero__description {
		margin-top: 17px;
		font-size: 12px;
	}
	.hero-machine {
		width: 112%;
		margin-left: -6%;
		margin-top: 18px;
	}
	.hero-machine__core {
		left: 37%;
		top: 30%;
		transform: scale(0.66);
	}
	.hero-machine__label {
		display: none;
	}
	.hero-machine__node {
		width: 6px;
		height: 6px;
	}
	.system-status {
		font-size: 7px;
	}
	.section {
		padding: 72px 0;
	}
	.section-kicker {
		margin-bottom: 28px;
	}
	.concept__copy h2 {
		margin-bottom: 30px;
		font-size: 29px;
	}
	.concept__copy p {
		font-size: 12px;
	}
	.concept__copy p br {
		display: none;
	}
	.concept-visual {
		min-height: 280px;
	}
	.plane {
		top: 45px;
		width: 95px;
		height: 200px;
	}
	.line--frame {
		width: 150px;
		height: 90px;
	}
	.works-list {
		grid-template-columns: 1fr;
	}
	.work-item {
		min-height: 0;
	}
	.company-info div {
		grid-template-columns: 82px 1fr;
	}
	.company-info dt,
	.company-info dd {
		font-size: 11px;
	}
	.contact-button {
		min-height: 64px;
		padding: 0 18px;
		grid-template-columns: 24px 1fr 18px;
		gap: 8px;
	}
	.contact-button strong {
		font-size: 14px;
	}
	.site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}
	.site-footer p {
		text-align: left;
	}
	.brand--footer .brand-name {
		font-size: 15px;
	}
}

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

.company {
	position: relative;
	background: #fff;
	border-top: 1px solid var(--line);
}

.company .content-width {
	position: relative;
}

.company-info {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	border-top: 1px solid var(--line);
}

.company-info div {
	display: block;
	padding: 26px 28px 30px 0;
	border-bottom: 1px solid var(--line);
}

.company-info div:not(:nth-child(4)) {
	border-right: 1px solid var(--line);
	padding-left: 28px;
}

.company-info div:first-child {
	padding-left: 0;
}

.company-info dt {
	margin-bottom: 15px;
	font-size: 10px;
	letter-spacing: 0.14em;
	color: #7b8490;
}

.company-info dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
}

.contact {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #f5f8ff 0%, #eef5ff 54%, #f8fbff 100%);
	border-top: 1px solid #dce6f5;
	border-bottom: 1px solid #dce6f5;
}

.contact:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(83, 113, 181, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 113, 181, 0.055) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}

.contact__inner {
	position: relative;
	z-index: 2;
}

.contact__inner > .section-kicker {
	margin-bottom: 54px;
}

.contact .contact-button {
	min-height: 96px;
	padding: 0 34px;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(12px);
	box-shadow: 0 18px 42px rgba(55, 83, 138, 0.08);
}

.contact .contact-button strong {
	font-size: 17px;
}

@media (max-width: 1100px) {
	.company-info {
		grid-template-columns: repeat(2, 1fr);
	}
	.company-info div {
		border-right: 1px solid var(--line) !important;
		padding-left: 24px !important;
	}
	.company-info div:nth-child(2n) {
		border-right: 0 !important;
	}
	.company-info div:first-child {
		padding-left: 0 !important;
	}
}

@media (max-width: 820px) {
	.company-info {
		grid-template-columns: 1fr 1fr;
	}
	.contact__inner > .section-kicker {
		margin-bottom: 38px;
	}
	.contact .contact-button {
		width: 100%;
		max-width: 560px;
		min-height: 82px;
	}
}

@media (max-width: 560px) {
	.company-info {
		grid-template-columns: 1fr;
	}
	.company-info div,
	.company-info div:not(:nth-child(4)) {
		border-right: 0 !important;
		padding: 22px 0 !important;
	}
	.contact .contact-button {
		min-height: 70px;
		padding: 0 18px;
	}
}

.section-head--works {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: 54px;
}

.section-head--works .section-kicker {
	margin: 0;
}

.section-note {
	max-width: 460px;
	margin: 0;
	font-size: 12px;
	line-height: 1.9;
	color: #69717d;
	text-align: right;
}

.works__layout {
	gap: 64px;
}

.works-list {
	border-top-color: #d7dee8;
}

.work-item {
	padding: 25px 0;
	transition:
		color 0.25s ease,
		transform 0.25s ease,
		background 0.25s ease;
}

.work-item.is-active {
	transform: translateX(10px);
}

.work-detail {
	border: 1px solid #e7ebf1;
	border-radius: 2px;
	box-shadow: 0 24px 70px rgba(24, 37, 61, 0.07);
	overflow: hidden;
}

.company {
	background: #fff;
	border-top: 1px solid var(--line);
}

.company > .content-width > .section-kicker {
	margin-bottom: 54px;
}

.company-info {
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line);
}

.company-info div {
	padding: 25px 28px 28px 0;
	border-bottom: 1px solid var(--line);
}

.company-info div:not(:nth-child(4)) {
	border-right: 1px solid var(--line);
	padding-left: 28px;
}

.company-info div:first-child {
	padding-left: 0;
}

.company-info dt {
	margin-bottom: 13px;
	font-size: 10px;
	letter-spacing: 0.14em;
	color: #7b8490;
}

.company-info dd {
	font-size: 14px;
	line-height: 1.9;
}

.contact {
	background: #f7f9fc;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	text-align: center;
}

.contact:before {
	display: none !important;
}

.contact__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact__inner > .section-kicker {
	margin-bottom: 34px;
}

.contact__text {
	margin: 0;
	font-size: 14px;
	line-height: 2;
	color: #4d5662;
}

.contact .contact-button {
	width: min(100%, 440px);
	min-height: 72px;
	margin-top: 38px;
	padding: 0 26px;
	background: #fff;
	border: 1px solid #dbe1e9;
	box-shadow: none;
	backdrop-filter: none;
}

.contact .contact-button:hover {
	border-color: #aeb9c8;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(28, 43, 67, 0.07);
}

.contact .contact-button strong {
	font-size: 14px;
}

.contact__address {
	margin-top: 18px;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: #747d89;
}

@media (max-width: 1100px) {
	.works__layout {
		gap: 40px;
	}
	.company-info {
		grid-template-columns: repeat(2, 1fr);
	}
	.company-info div {
		border-right: 1px solid var(--line) !important;
		padding-left: 24px !important;
	}
	.company-info div:nth-child(2n) {
		border-right: 0 !important;
	}
	.company-info div:first-child {
		padding-left: 0 !important;
	}
}

@media (max-width: 820px) {
	.section-head--works {
		display: block;
		margin-bottom: 38px;
	}
	.section-head--works .section-kicker {
		margin-bottom: 18px;
	}
	.section-note {
		text-align: left;
	}
	.company > .content-width > .section-kicker {
		margin-bottom: 38px;
	}
	.company-info {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.section-note {
		font-size: 11px;
	}
	.company-info {
		grid-template-columns: 1fr;
	}
	.company-info div,
	.company-info div:not(:nth-child(4)) {
		border-right: 0 !important;
		padding: 22px 0 !important;
	}
	.contact__text {
		font-size: 12px;
	}
	.contact__text br {
		display: none;
	}
	.contact .contact-button {
		min-height: 66px;
		margin-top: 30px;
	}
}

.company {
	padding-top: clamp(96px, 9vw, 144px);
	padding-bottom: clamp(96px, 9vw, 144px);
}

.company > .content-width > .section-kicker {
	margin: 0 0 clamp(42px, 5vw, 64px);
}

.company-info {
	display: block;
	margin: 0;
	border-top: 1px solid var(--line);
}

.company-info div,
.company-info div:not(:nth-child(4)),
.company-info div:first-child {
	display: grid !important;
	grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) !important;
	column-gap: clamp(32px, 6vw, 96px);
	align-items: start;
	padding: clamp(25px, 2.5vw, 34px) 0 !important;
	border-right: 0 !important;
	border-bottom: 1px solid var(--line);
}

.company-info dt {
	margin: 2px 0 0;
	padding: 0;
	font-size: 10px;
	line-height: 1.7;
	letter-spacing: 0.14em;
	color: #7b8490;
}

.company-info dd {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.9;
}

@media (max-width: 560px) {
	.company {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.company > .content-width > .section-kicker {
		margin-bottom: 34px;
	}
	.company-info div,
	.company-info div:not(:nth-child(4)),
	.company-info div:first-child {
		grid-template-columns: 1fr !important;
		row-gap: 10px;
		padding: 23px 0 !important;
	}
	.company-info dt {
		margin: 0;
	}
	.company-info dd {
		font-size: 13px;
		line-height: 1.85;
	}
}

.site-footer__inner {
	border-top: 0;
	padding-top: 24px;
}

.company-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	border-top: 1px solid var(--line);
}

.company-contact .company,
.company-contact .contact {
	min-width: 0;
	border-top: 0;
	border-bottom: 0;
	padding-top: clamp(88px, 7vw, 118px);
	padding-bottom: clamp(88px, 7vw, 118px);
}

.company-contact .company {
	border-right: 1px solid var(--line);
}

.company-contact .company .content-width,
.company-contact .contact .content-width {
	width: min(calc(100% - 80px), 620px);
}

.company-contact .company > .content-width > .section-kicker,
.company-contact .contact__inner > .section-kicker {
	margin-bottom: 38px;
}

.company-contact .company-info div,
.company-contact .company-info div:not(:nth-child(4)),
.company-contact .company-info div:first-child {
	grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) !important;
	column-gap: 28px;
	padding: 22px 0 !important;
}

.company-contact .company-info dd {
	font-size: 13px;
}

.company-contact .contact__inner {
	min-height: 100%;
	justify-content: center;
}

.company-contact .contact {
	background: #f7f9fc;
}

@media (max-width: 900px) {
	.company-contact {
		grid-template-columns: 1fr;
	}
	.company-contact .company {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.company-contact .company .content-width,
	.company-contact .contact .content-width {
		width: min(calc(100% - 64px), 760px);
	}
}

@media (max-width: 820px) {
	.works__layout {
		display: block;
	}
	.works-list {
		display: block;
	}
	.work-item {
		min-height: 0;
		transform: none !important;
		padding: 22px 0;
	}
	.work-item.is-active {
		background: transparent;
		box-shadow: none;
	}
	.work-item em {
		display: block;
	}
	.work-detail {
		margin: 0 0 18px;
		border-radius: 0;
		box-shadow: 0 18px 44px rgba(24, 37, 61, 0.08);
	}
}

@media (max-width: 560px) {
	.company-contact .company,
	.company-contact .contact {
		padding-top: 72px;
		padding-bottom: 72px;
	}
	.company-contact .company .content-width,
	.company-contact .contact .content-width {
		width: calc(100% - 32px);
	}
	.company-contact .company-info div,
	.company-contact .company-info div:not(:nth-child(4)),
	.company-contact .company-info div:first-child {
		grid-template-columns: 1fr !important;
		row-gap: 8px;
		padding: 20px 0 !important;
	}
	.work-item strong {
		font-size: 15px;
	}
	.work-item em {
		font-size: 10px;
	}
}

:root {
	--violet: #7657ff;
	--violet-soft: #f2efff;
}

.site-footer {
	border-top: 1px solid var(--line);
}

.company-contact .contact {
	background: linear-gradient(135deg, #f8f9ff 0%, var(--violet-soft) 100%);
}

.company-contact .contact .section-kicker,
.work-item.is-active .work-item__number {
	color: var(--violet);
}

.work-item.is-active {
	box-shadow: inset 3px 0 0 var(--violet);
}

.work-item.is-active .tags i {
	background: var(--violet-soft);
	color: #4f3bb6;
}

body.menu-open {
	overflow: hidden;
	overscroll-behavior: none;
}

@media (max-width: 820px) {
	.site-header {
		isolation: isolate;
	}
	.global-nav {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100dvh;
		min-height: 100%;
		padding: max(88px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: none;
	}
	.site-header.is-scrolled .global-nav {
		top: 0;
		height: 100dvh;
	}
	.menu-button {
		flex: 0 0 42px;
	}
}

@media (max-width: 560px) {
	.content-width,
	.company-contact .company .content-width,
	.company-contact .contact .content-width {
		width: calc(100% - 48px);
	}
	.site-header {
		padding-left: 20px;
		padding-right: 20px;
	}
	.site-footer__inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 24px;
		text-align: center;
	}
	.site-footer p {
		max-width: none;
		margin: 0;
		text-align: center;
	}
	.brand--footer {
		justify-content: center;
	}
	.global-nav {
		padding-left: 24px;
		padding-right: 24px;
	}
}

.site-header {
	background: rgba(255, 255, 255, 0.58);
	border-bottom: 1px solid rgba(214, 222, 235, 0.38);
	-webkit-backdrop-filter: blur(22px) saturate(145%);
	backdrop-filter: blur(22px) saturate(145%);
	box-shadow: 0 8px 28px rgba(34, 49, 76, 0.035);
}

.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.74);
	border-bottom-color: rgba(205, 215, 230, 0.72);
	-webkit-backdrop-filter: blur(26px) saturate(155%);
	backdrop-filter: blur(26px) saturate(155%);
	box-shadow: 0 12px 38px rgba(26, 40, 68, 0.07);
}

.works__layout {
	align-items: start;
}

.work-detail {
	min-width: 0;
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

@media (min-width: 821px) {
	.work-detail {
		position: sticky;
		top: 104px;
	}
}

.work-media {
	position: relative;
	overflow: hidden;
	background: #111827;
	aspect-ratio: 16/10;
	border-radius: 3px;
}

.work-media__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #111827;
}

.work-media__video,
.work-media__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-media__topline {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 18px 20px;
	color: #fff;
	font-size: 9px;
	letter-spacing: 0.18em;
	pointer-events: none;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.work-media__type {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.work-media__type:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lime);
	box-shadow: 0 0 12px rgba(185, 239, 72, 0.7);
}

.work-media__play {
	position: absolute;
	z-index: 4;
	inset: 0;
	margin: auto;
	width: 126px;
	height: 126px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(13, 18, 30, 0.22);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: 0.25s;
}

.work-media__play:hover {
	transform: scale(1.04);
	background: rgba(13, 18, 30, 0.38);
}

.work-media__play span {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #fff;
	margin-left: 4px;
}

.work-media__play small {
	font-size: 8px;
	letter-spacing: 0.16em;
}

.work-media__play.is-playing {
	opacity: 0;
}

.work-media:hover .work-media__play.is-playing {
	opacity: 1;
}

.work-media__play.is-playing span {
	width: 12px;
	height: 15px;
	border: 0;
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
	margin: 0;
}

.work-media__play.is-missing {
	width: 174px;
	height: 64px;
	border-radius: 999px;
}

.work-media__play.is-missing span {
	display: none;
}

.work-detail__heading {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
	gap: 38px;
	padding: 30px 0 28px;
	border-bottom: 1px solid var(--line);
}

.work-detail__heading small {
	font-size: 9px;
	letter-spacing: 0.14em;
	color: var(--blue);
}

.work-detail__heading h3 {
	margin: 10px 0 0;
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.work-detail__heading > p {
	margin: 0;
	align-self: end;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.8;
}

@media (max-width: 820px) {
	.site-header,
	.site-header.is-scrolled {
		background: rgba(255, 255, 255, 0.72);
		-webkit-backdrop-filter: blur(22px) saturate(150%);
		backdrop-filter: blur(22px) saturate(150%);
	}
	.global-nav {
		background: rgba(247, 249, 255, 0.86);
		-webkit-backdrop-filter: blur(28px) saturate(145%);
		backdrop-filter: blur(28px) saturate(145%);
	}
	.works-list {
		display: flex;
		flex-direction: column;
		gap: 14px;
		background: transparent;
	}
	.work-item {
		border: 1px solid var(--line);
		border-radius: 3px;
		background: #fff;
		min-height: 0;
		padding: 20px 18px;
		box-shadow: 0 8px 24px rgba(34, 49, 76, 0.035);
	}
	.work-item.is-active {
		box-shadow:
			inset 3px 0 0 var(--blue),
			0 10px 28px rgba(34, 49, 76, 0.06);
		border-color: #cfd8e8;
	}
	.work-detail {
		width: 100%;
		margin: 0 0 6px;
		border: 0;
		background: transparent;
	}
	.work-media {
		aspect-ratio: 16/10;
		border-radius: 3px;
	}
	.work-detail__heading {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 22px 2px 20px;
	}
	.work-detail__heading > p {
		font-size: 11px;
	}
	.work-media__play {
		width: 94px;
		height: 94px;
	}
}

@media (max-width: 560px) {
	.work-item {
		padding: 18px 16px;
	}
	.work-item__number {
		font-size: 10px;
	}
	.work-item strong {
		font-size: 14px;
	}
	.work-media {
		aspect-ratio: 4/3;
	}
	.work-media__topline {
		padding: 14px 14px;
		font-size: 8px;
	}
	.work-media__play {
		width: 84px;
		height: 84px;
		gap: 6px;
	}
	.work-media__play small {
		font-size: 7px;
	}
	.work-detail__heading h3 {
		font-size: 22px;
	}
}

.works .content-width {
	overflow: visible;
}

.works__layout {
	grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
	gap: clamp(36px, 4.5vw, 68px);
}

.work-detail {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 22px 64px rgba(25, 39, 65, 0.075);
}

.work-media {
	border-radius: 0;
}

.work-detail__heading {
	grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
	gap: 32px;
	padding: 30px 34px 28px;
	border-bottom: 1px solid #e7ebf1;
}

.work-detail__heading h3 {
	margin: 8px 0 0;
	font-size: clamp(18px, 1.55vw, 24px);
	line-height: 1.45;
	letter-spacing: 0.035em;
}

.work-detail__heading > p {
	margin: 0;
	align-self: end;
	font-size: 12px;
	line-height: 1.85;
}

.work-item {
	padding-left: 14px;
	padding-right: 14px;
	border-radius: 8px;
}

.work-item.is-active {
	background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1100px) {
	.works__layout {
		grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
		gap: 34px;
	}
	.work-detail__heading {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.work-detail__heading > p {
		max-width: 680px;
	}
}

@media (max-width: 820px) {
	.works__layout {
		display: block;
	}
	.works-list {
		gap: 16px;
	}
	.work-item {
		width: 100%;
		padding: 20px 20px;
		border-radius: 10px;
	}
	.work-item.is-active {
		box-shadow:
			inset 3px 0 0 var(--blue),
			0 12px 30px rgba(34, 49, 76, 0.07);
	}
	.work-detail {
		margin: 10px 0 6px;
		border: 1px solid #e2e8f0;
		border-radius: 12px;
		background: #fff;
		overflow: hidden;
	}
	.work-media {
		border-radius: 0;
		aspect-ratio: 16/10;
	}
	.work-detail__heading {
		display: block;
		padding: 24px 24px 22px;
	}
	.work-detail__heading h3 {
		margin-top: 8px;
		font-size: 20px;
	}
	.work-detail__heading > p {
		margin-top: 14px;
		font-size: 11px;
		line-height: 1.85;
	}
}

@media (max-width: 560px) {
	.works .content-width {
		width: calc(100% - 48px);
	}
	.section-head--works {
		margin-bottom: 30px;
	}
	.work-item {
		grid-template-columns: 30px minmax(0, 1fr);
		gap: 10px;
		padding: 18px 18px;
	}
	.work-item strong {
		font-size: 13px;
		line-height: 1.55;
	}
	.work-item small {
		font-size: 8px;
	}
	.tags {
		margin-top: 9px;
	}
	.tags i {
		padding: 4px 6px;
		font-size: 8px;
	}
	.work-media {
		aspect-ratio: 4/3;
	}
	.work-detail__heading {
		padding: 22px 20px 20px;
	}
	.work-detail__heading h3 {
		font-size: 18px;
		line-height: 1.5;
	}
	.work-detail__heading > p {
		margin-top: 12px;
	}
	.work-media__topline {
		padding: 14px 16px;
	}
}

.work-detail__heading {
	align-items: start;
}

.work-detail__overview {
	min-width: 0;
	align-self: end;
}

.work-detail__overview small {
	display: block;
	margin-bottom: 10px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--ink);
}

.work-detail__overview p {
	margin: 0;
	font-size: 12px;
	line-height: 1.85;
	color: var(--muted);
	overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
	.work-detail__overview {
		max-width: 680px;
	}
}

@media (max-width: 820px) {
	.work-detail__heading {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.work-detail__overview {
		margin-top: 0;
	}
}

@media (max-width: 560px) {
	.work-detail__overview p {
		font-size: 10.5px;
		line-height: 1.85;
	}
}

/* v4: Creative Studio copy */
.company__lead {
	max-width: 760px;
	margin: 0 0 clamp(36px, 5vw, 64px);
	font-size: clamp(16px, 1.45vw, 21px);
	line-height: 1.9;
	letter-spacing: 0.04em;
}

.work-detail__overview > p {
	margin-top: 0;
}

@media (max-width: 820px) {
	.company__lead br {
		display: none;
	}
}

/* Official brand identity */
.brand {
	display: inline-flex;
	align-items: center;
	width: auto;
}

.brand-logo {
	display: block;
	width: 78px;
	height: auto;
}

.brand--footer .brand-logo {
	width: 48px;
}

@media (max-width: 820px) {
	.brand-logo {
		width: 64px;
	}

	.brand--footer .brand-logo {
		width: 54px;
	}
}

/* Footer fix */

@media (min-width: 768px) {
	footer .footer__inner,
	footer .footer-inner,
	.footer__inner,
	.footer-inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	footer .copyright,
	footer .footer__copyright,
	.footer__copyright,
	.footer-copy,
	.footer__copy {
		display: flex !important;
		align-items: center !important;
		height: 60px !important;
	}
}


/* Client roster in the right-side work detail panel */
.work-detail__client {
	position: relative;
	width: 100%;
	padding: 22px 34px 26px;
}

.work-detail__heading {
	border-bottom: 0;
}

.work-detail__client::before {
	content: "";
	position: absolute;
	top: 0;
	right: 34px;
	left: 34px;
	height: 1px;
	background: #e7ebf1;
}

.work-detail__client small {
	display: block;
	margin: 0 0 12px;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--muted);
}

.work-detail__client-list {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	width: 100%;
}

.work-detail__client-tag {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-height: 26px;
	padding: 5px 9px;
	border: 1px solid rgba(39, 92, 255, 0.18);
	border-radius: 3px;
	background: transparent;
	color: #263753;
	font-size: 10.5px;
	line-height: 1.4;
	letter-spacing: 0.025em;
	white-space: nowrap;
}

@media (max-width: 820px) {
	.work-detail__client {
		padding: 20px 24px 22px;
	}

	.work-detail__client::before {
		right: 24px;
		left: 24px;
	}
}

@media (max-width: 560px) {
	.work-detail__client {
		padding: 18px 20px 20px;
	}

	.work-detail__client::before {
		right: 20px;
		left: 20px;
	}

	.work-detail__client small {
		margin-bottom: 10px;
	}

	.work-detail__client-list {
		gap: 5px;
	}

	.work-detail__client-tag {
		min-height: 24px;
		padding: 4px 7px;
		font-size: 9.5px;
	}
}

/* v10: concept logo motion — exact six cut-ins derived from the finished logo */
.concept-motion {
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.concept-motion__svg {
	color: var(--blue);
	display: block;
	width: min(78%, 420px);
	height: auto;
	overflow: visible;
}
.concept-motion__base {
	fill: currentColor;
	fill-opacity: 0.3;
	stroke: none;
}
.concept-motion__shape {
	fill: url(#conceptDiagonalHatch);
	stroke: none;
}
.concept-motion__hatch-line {
	stroke: currentColor;
	stroke-width: 0.38;
	vector-effect: non-scaling-stroke;
}
@media (max-width: 820px) {
	.concept-motion {
		min-height: 340px;
		margin-top: 28px;
	}
}
@media (max-width: 560px) {
	.concept-motion {
		min-height: 260px;
	}
	.concept-motion__svg {
		width: min(86%, 360px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.concept-motion animate { display: none; }
}


/* v9: enlarged compact horizontal header logo lockup */
.site-header > .brand {
	display: inline-flex;
	align-items: center;
	width: auto;
}

.brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 0;
}

.brand-mark-image {
	display: block;
	width: 60.2px;
	height: auto;
	flex: 0 0 auto;
}

.brand-type-image {
	display: block;
	width: 121.2px;
	height: auto;
	flex: 0 0 auto;
}

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

@media (max-width: 820px) {
	.brand-lockup { gap: 5px; }
	.brand-mark-image { width: 51.8px; }
	.brand-type-image { width: 104.4px; }
}

/* v12: Invisible Structure
   Disconnected fragments imply a frame without drawing its outline. */
.hero {
	background:
		radial-gradient(ellipse at 79% 46%, rgba(0, 54, 80, 0.052), transparent 38%),
		linear-gradient(180deg, var(--paper) 0%, #f8fafb 100%);
}

.hero__content {
	grid-template-columns: 0.88fr 1.12fr;
	column-gap: clamp(28px, 4vw, 72px);
}

.hero__copy {
	max-width: 570px;
	padding: 0 0 1.5vh clamp(0px, 1vw, 14px);
}

.hero__copy h1 {
	font-size: clamp(34px, 3.32vw, 54px);
	line-height: 1.5;
	letter-spacing: 0.095em;
}

.hero__lead {
	margin-top: 25px;
	font-size: clamp(13px, 1.16vw, 15px);
	line-height: 1.8;
	letter-spacing: 0.075em;
	color: rgba(35, 24, 21, 0.72);
}

.invisible-structure {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 0;
	width: min(53vw, 760px);
	aspect-ratio: 1.56 / 1;
	transform: translate3d(0, -49%, 0);
	contain: layout paint style;
	pointer-events: none;
}

.invisible-structure__plane {
	position: absolute;
	inset: 13% 4% 12%;
	transform: translateZ(0);
}

.structure-fragment,
.structure-slit {
	position: absolute;
	display: block;
	background: var(--blue);
	opacity: 0;
	will-change: transform, opacity;
}

.structure-fragment {
	--move-x: 0px;
	--move-y: 0px;
	--exit-x: 0px;
	--exit-y: 0px;
	animation: structureFragmentHorizontal 12s linear infinite both;
}

.fragment--top-left,
.fragment--top-right,
.fragment--bottom-left,
.fragment--bottom-right {
	height: 1px;
	transform-origin: center;
}

.fragment--top-left {
	--move-x: -9px;
	--move-y: 2px;
	--exit-x: -15px;
	left: 13%;
	top: 20%;
	width: 24%;
	animation-delay: 0.06s;
}

.fragment--top-right {
	--move-x: 7px;
	--move-y: -2px;
	--exit-x: 17px;
	right: 12%;
	top: 20%;
	width: 21%;
	animation-delay: 0.18s;
}

.fragment--bottom-right {
	--move-x: 10px;
	--move-y: 2px;
	--exit-x: 15px;
	right: 13%;
	bottom: 20%;
	width: 25%;
	animation-delay: 0.29s;
}

.fragment--bottom-left {
	--move-x: -6px;
	--move-y: -2px;
	--exit-x: -18px;
	left: 12%;
	bottom: 20%;
	width: 20%;
	animation-delay: 0.13s;
}

.fragment--right-upper,
.fragment--right-lower,
.fragment--left-upper,
.fragment--left-lower {
	width: 1px;
	animation-name: structureFragmentVertical;
}

.fragment--right-upper {
	--move-x: -2px;
	--move-y: -8px;
	--exit-y: -15px;
	right: 12%;
	top: 27%;
	height: 18%;
	animation-delay: 0.23s;
}

.fragment--right-lower {
	--move-x: 2px;
	--move-y: 7px;
	--exit-y: 14px;
	right: 12%;
	bottom: 28%;
	height: 15%;
	animation-delay: 0.1s;
}

.fragment--left-lower {
	--move-x: -2px;
	--move-y: 9px;
	--exit-y: 16px;
	left: 12%;
	bottom: 27%;
	height: 17%;
	animation-delay: 0.34s;
}

.fragment--left-upper {
	--move-x: 2px;
	--move-y: -6px;
	--exit-y: -13px;
	left: 12%;
	top: 28%;
	height: 14%;
	animation-delay: 0.16s;
}

.structure-slit {
	--rotation: 0deg;
	width: clamp(18px, 3.1vw, 43px);
	height: 1px;
	transform-origin: center;
	animation: structureSlit 12s linear infinite both;
}

.slit--north-west {
	--rotation: 35deg;
	left: 9%;
	top: 19%;
	animation-delay: 0.08s;
}

.slit--north-east {
	--rotation: -35deg;
	right: 8%;
	top: 19%;
	animation-delay: 0.21s;
}

.slit--middle-west {
	left: 8%;
	top: 50%;
	animation-delay: 0.31s;
}

.slit--middle-east {
	right: 7%;
	top: 50%;
	animation-delay: 0.15s;
}

.slit--south-west {
	--rotation: -35deg;
	left: 9%;
	bottom: 19%;
	animation-delay: 0.27s;
}

.slit--south-east {
	--rotation: 35deg;
	right: 8%;
	bottom: 19%;
	animation-delay: 0.37s;
}

@keyframes structureFragmentHorizontal {
	0%,
	9% {
		opacity: 0;
		transform: translate3d(var(--move-x), var(--move-y), 0) scaleX(0.08);
	}
	18% {
		opacity: 0.42;
	}
	29% {
		opacity: 0.78;
		transform: translate3d(0, 0, 0) scaleX(0.74);
	}
	40% {
		opacity: 0.86;
		transform: translate3d(0, 0, 0) scaleX(1);
	}
	54% {
		opacity: 0.66;
		transform: translate3d(-2px, -1px, 0) scaleX(0.9);
	}
	64% {
		opacity: 0.76;
		transform: translate3d(2px, 1px, 0) scaleX(1.06);
	}
	71% {
		opacity: 0.28;
		transform: translate3d(0, 0, 0) scaleX(0.82);
	}
	77% {
		opacity: 0.18;
		transform: translate3d(3px, 1px, 0) scaleX(0.66);
	}
	89%,
	100% {
		opacity: 0;
		transform: translate3d(var(--exit-x), var(--exit-y), 0) scaleX(0.12);
	}
}

@keyframes structureFragmentVertical {
	0%,
	11% {
		opacity: 0;
		transform: translate3d(var(--move-x), var(--move-y), 0) scaleY(0.08);
	}
	21% {
		opacity: 0.36;
	}
	32% {
		opacity: 0.76;
		transform: translate3d(0, 0, 0) scaleY(0.72);
	}
	42% {
		opacity: 0.84;
		transform: translate3d(0, 0, 0) scaleY(1);
	}
	56% {
		opacity: 0.58;
		transform: translate3d(-1px, -2px, 0) scaleY(0.88);
	}
	65% {
		opacity: 0.7;
		transform: translate3d(1px, 2px, 0) scaleY(1.08);
	}
	72% {
		opacity: 0.24;
		transform: translate3d(0, 0, 0) scaleY(0.7);
	}
	79% {
		opacity: 0.12;
	}
	90%,
	100% {
		opacity: 0;
		transform: translate3d(var(--exit-x), var(--exit-y), 0) scaleY(0.1);
	}
}

@keyframes structureSlit {
	0%,
	16% {
		opacity: 0;
		transform: translate3d(0, 5px, 0) rotate(var(--rotation)) scaleX(0.08);
	}
	25% {
		opacity: 0.18;
	}
	39% {
		opacity: 0.34;
		transform: translate3d(0, 0, 0) rotate(var(--rotation)) scaleX(0.48);
	}
	55% {
		opacity: 0.26;
		transform: translate3d(2px, -1px, 0) rotate(var(--rotation)) scaleX(0.7);
	}
	65% {
		opacity: 0.16;
		transform: translate3d(-1px, 1px, 0) rotate(var(--rotation)) scaleX(0.62);
	}
	71% {
		opacity: 0.92;
		transform: translate3d(0, 0, 0) rotate(var(--rotation)) scaleX(1);
	}
	76% {
		opacity: 0.58;
		transform: translate3d(1px, 0, 0) rotate(var(--rotation)) scaleX(0.9);
	}
	84% {
		opacity: 0.12;
		transform: translate3d(7px, -3px, 0) rotate(var(--rotation)) scaleX(0.38);
	}
	92%,
	100% {
		opacity: 0;
		transform: translate3d(13px, -5px, 0) rotate(var(--rotation)) scaleX(0.06);
	}
}

.concept__copy {
	padding: clamp(4px, 1vw, 14px) 0;
}

.concept__copy h2 {
	margin-bottom: 36px;
	font-size: 30px;
	line-height: 1.65;
	letter-spacing: 0.105em;
}

.concept__copy p:first-of-type {
	margin-bottom: 27px;
}

@media (max-width: 1100px) {
	.hero__content {
		grid-template-columns: 0.9fr 1.1fr;
		column-gap: 24px;
	}

	.invisible-structure {
		right: -2%;
		width: 57vw;
	}

	.hero__copy h1 {
		font-size: clamp(32px, 3.7vw, 46px);
	}
}

@media (max-width: 820px) {
	.hero {
		min-height: 790px;
		padding-top: 92px;
	}

	.hero__content {
		display: flex;
		gap: 0;
	}

	.hero__copy {
		width: min(100%, 620px);
		padding: 32px 4vw 0;
	}

	.hero__copy h1 {
		font-size: clamp(30px, 5.8vw, 43px);
		line-height: 1.52;
		letter-spacing: 0.085em;
	}

	.hero__lead {
		margin-top: 22px;
		font-size: clamp(12px, 2vw, 14px);
	}

	.invisible-structure {
		position: relative;
		top: auto;
		right: auto;
		width: min(100%, 680px);
		margin: 34px auto 8px;
		transform: none;
		flex: 0 0 auto;
	}

	.concept__copy {
		padding: 0 2vw;
	}

	.concept__copy h2 {
		margin-bottom: 34px;
		font-size: 25.5px;
		line-height: 1.68;
		letter-spacing: 0.1em;
	}
}

@media (max-width: 560px) {
	.hero {
		min-height: 650px;
		padding-top: 78px;
	}

	.hero__copy {
		padding: 27px 2px 0;
	}

	.hero__copy h1 {
		font-size: 29px;
		line-height: 1.54;
		letter-spacing: 0.075em;
	}

	.hero__lead {
		max-width: 290px;
		margin-top: 20px;
		font-size: 11px;
		line-height: 1.75;
		letter-spacing: 0.055em;
	}

	.invisible-structure {
		width: 104%;
		margin: 38px -2% 4px;
	}

	.invisible-structure__plane {
		inset: 10% 3%;
	}

	.structure-fragment,
	.structure-slit {
		min-height: 1px;
	}

	.fragment--right-lower,
	.fragment--left-upper {
		display: none;
	}

	.structure-slit {
		width: clamp(20px, 8vw, 32px);
	}

	.concept__copy {
		padding: 0 1px;
	}

	.concept__copy h2 {
		margin-bottom: 27px;
		font-size: 22px;
		line-height: 1.72;
		letter-spacing: 0.09em;
	}

	.concept__copy p:first-of-type {
		margin-bottom: 23px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.structure-fragment,
	.structure-slit {
		animation: none !important;
	}

	.structure-fragment {
		opacity: 0.64;
		transform: none;
	}

	.structure-slit {
		opacity: 0.48;
		transform: rotate(var(--rotation)) scaleX(0.72);
	}
}

/* Cultural Field: layers are cut, shifted and expanded without reproducing the logo. */
.hero {
	background:
		radial-gradient(ellipse at 80% 47%, rgba(0, 54, 80, 0.065), transparent 40%),
		linear-gradient(180deg, var(--paper) 0%, #f7f9fa 100%);
}

.cultural-field {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 0;
	width: min(54vw, 780px);
	aspect-ratio: 1.48 / 1;
	transform: translate3d(0, -48%, 0);
	contain: layout paint style;
	pointer-events: none;
}

.cultural-field__stage {
	position: absolute;
	inset: 7% 2% 8%;
	isolation: isolate;
	overflow: hidden;
}

.cultural-field__stage::before {
	content: "";
	position: absolute;
	inset: 11% 6%;
	background:
		linear-gradient(90deg, transparent 0 49.9%, rgba(0, 54, 80, 0.09) 50%, transparent 50.1%),
		linear-gradient(180deg, transparent 0 49.9%, rgba(0, 54, 80, 0.07) 50%, transparent 50.1%);
	opacity: 0.72;
	animation: culturalFieldBreath 14s ease-in-out infinite;
}

.cultural-field__sheets,
.cultural-field__strata,
.cultural-field__aperture,
.cultural-field__markers {
	position: absolute;
	inset: 0;
}

.field-sheet {
	position: absolute;
	inset: 20% 15%;
	display: block;
	border: 1px solid rgba(0, 54, 80, 0.18);
	background: linear-gradient(118deg, rgba(79, 131, 151, 0.018), rgba(0, 54, 80, 0.055));
	transform-origin: center;
	opacity: 0;
	will-change: transform, opacity;
	animation: culturalFieldSheet 14s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
}

.field-sheet--back {
	--sheet-in: -3%;
	--sheet-out: -14%;
	--sheet-rest: -8%;
	--sheet-rotate: -5deg;
}

.field-sheet--middle {
	--sheet-in: 1%;
	--sheet-out: 0%;
	--sheet-rest: 3%;
	--sheet-rotate: 1.5deg;
	animation-delay: 0.12s;
}

.field-sheet--front {
	--sheet-in: 4%;
	--sheet-out: 15%;
	--sheet-rest: 9%;
	--sheet-rotate: 6deg;
	animation-delay: 0.24s;
}

.cultural-field__strata {
	z-index: 2;
}

.cultural-field__strata > i {
	--row-shift: 0%;
	position: absolute;
	left: 14%;
	width: 72%;
	height: 1px;
	display: block;
	background: linear-gradient(90deg, transparent, rgba(0, 54, 80, 0.72) 9%, rgba(0, 54, 80, 0.72) 91%, transparent);
	transform-origin: center;
	opacity: 0;
	will-change: transform, opacity;
	animation: culturalFieldStratum 14s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.cultural-field__strata > i::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 48%;
	width: 3px;
	height: 3px;
	background: var(--blue);
	opacity: 0.8;
}

.cultural-field__strata > i:nth-child(1) { top: 18%; --row-shift: -7%; animation-delay: 0s; }
.cultural-field__strata > i:nth-child(2) { top: 26%; --row-shift: 6%; animation-delay: 0.07s; }
.cultural-field__strata > i:nth-child(3) { top: 34%; --row-shift: -4%; animation-delay: 0.14s; }
.cultural-field__strata > i:nth-child(4) { top: 42%; --row-shift: 9%; animation-delay: 0.21s; }
.cultural-field__strata > i:nth-child(5) { top: 50%; --row-shift: -2%; animation-delay: 0.28s; }
.cultural-field__strata > i:nth-child(6) { top: 58%; --row-shift: 5%; animation-delay: 0.35s; }
.cultural-field__strata > i:nth-child(7) { top: 66%; --row-shift: -8%; animation-delay: 0.42s; }
.cultural-field__strata > i:nth-child(8) { top: 74%; --row-shift: 3%; animation-delay: 0.49s; }
.cultural-field__strata > i:nth-child(9) { top: 82%; --row-shift: -5%; animation-delay: 0.56s; }

.cultural-field__cut {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 7%;
	width: 86%;
	height: 1px;
	display: block;
	background: var(--blue);
	transform: rotate(-18deg) scaleX(0);
	transform-origin: center;
	opacity: 0;
	will-change: transform, opacity;
	animation: culturalFieldCut 14s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
}

.cultural-field__cut::after {
	content: "";
	position: absolute;
	top: -4px;
	left: 62%;
	width: 9px;
	height: 9px;
	border: 1px solid var(--blue);
	background: var(--paper);
	transform: rotate(18deg);
}

.cultural-field__aperture {
	z-index: 3;
	inset: 12% 7%;
	opacity: 0;
	transform: scaleX(0.52) scaleY(0.82);
	will-change: transform, opacity;
	animation: culturalFieldAperture 14s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
}

.aperture-corner {
	position: absolute;
	width: 34px;
	height: 34px;
	display: block;
	border-color: rgba(0, 54, 80, 0.58);
	border-style: solid;
	border-width: 0;
}

.aperture-corner--nw { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.aperture-corner--ne { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.aperture-corner--se { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.aperture-corner--sw { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }

.cultural-field__markers {
	z-index: 5;
}

.cultural-field__markers i {
	position: absolute;
	width: 4px;
	height: 4px;
	display: block;
	background: var(--blue);
	opacity: 0;
	animation: culturalFieldMarker 14s ease-in-out infinite both;
}

.cultural-field__markers i:nth-child(1) { top: 25%; left: 22%; animation-delay: 0.18s; }
.cultural-field__markers i:nth-child(2) { top: 33%; right: 20%; animation-delay: 0.34s; }
.cultural-field__markers i:nth-child(3) { right: 28%; bottom: 23%; animation-delay: 0.5s; }
.cultural-field__markers i:nth-child(4) { bottom: 31%; left: 18%; animation-delay: 0.66s; }

@keyframes culturalFieldSheet {
	0%,
	8% {
		opacity: 0;
		transform: translate3d(0, 3%, 0) rotate(0) scaleX(0.24) scaleY(0.84);
	}
	20% {
		opacity: 0.24;
		transform: translate3d(var(--sheet-in), 0, 0) rotate(0) scaleX(0.48) scaleY(0.9);
	}
	34% {
		opacity: 0.48;
		transform: translate3d(var(--sheet-in), 0, 0) rotate(0) scaleX(0.68) scaleY(0.94);
	}
	47%,
	61% {
		opacity: 0.78;
		transform: translate3d(var(--sheet-out), 0, 0) rotate(var(--sheet-rotate)) scaleX(1) scaleY(1);
	}
	72% {
		opacity: 0.38;
		transform: translate3d(var(--sheet-rest), -2%, 0) rotate(var(--sheet-rotate)) scaleX(0.88) scaleY(0.96);
	}
	86%,
	100% {
		opacity: 0;
		transform: translate3d(var(--sheet-rest), -4%, 0) rotate(var(--sheet-rotate)) scaleX(0.38) scaleY(0.9);
	}
}

@keyframes culturalFieldStratum {
	0%,
	10% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scaleX(0.04);
	}
	22% {
		opacity: 0.26;
		transform: translate3d(0, 0, 0) scaleX(0.32);
	}
	35% {
		opacity: 0.62;
		transform: translate3d(0, 0, 0) scaleX(0.7);
	}
	46% {
		opacity: 0.88;
		transform: translate3d(var(--row-shift), 0, 0) scaleX(1);
	}
	61% {
		opacity: 0.66;
		transform: translate3d(var(--row-shift), 0, 0) scaleX(0.9);
	}
	74% {
		opacity: 0.26;
		transform: translate3d(0, 0, 0) scaleX(0.64);
	}
	86%,
	100% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scaleX(0.08);
	}
}

@keyframes culturalFieldCut {
	0%,
	30% {
		opacity: 0;
		transform: rotate(-18deg) scaleX(0);
	}
	39% {
		opacity: 0.18;
		transform: rotate(-18deg) scaleX(0.18);
	}
	46% {
		opacity: 0.92;
		transform: rotate(-18deg) scaleX(1);
	}
	54% {
		opacity: 0.54;
		transform: translate3d(3%, -2%, 0) rotate(-18deg) scaleX(0.96);
	}
	64%,
	100% {
		opacity: 0;
		transform: translate3d(8%, -5%, 0) rotate(-18deg) scaleX(0.2);
	}
}

@keyframes culturalFieldAperture {
	0%,
	16% {
		opacity: 0;
		transform: scaleX(0.42) scaleY(0.72);
	}
	32% {
		opacity: 0.28;
		transform: scaleX(0.62) scaleY(0.84);
	}
	47%,
	62% {
		opacity: 0.78;
		transform: scaleX(1) scaleY(1);
	}
	74% {
		opacity: 0.32;
		transform: scaleX(1.08) scaleY(0.94);
	}
	86%,
	100% {
		opacity: 0;
		transform: scaleX(1.18) scaleY(0.82);
	}
}

@keyframes culturalFieldMarker {
	0%,
	28% {
		opacity: 0;
		transform: scale(0);
	}
	40% {
		opacity: 0.28;
		transform: scale(0.65);
	}
	48%,
	60% {
		opacity: 0.92;
		transform: scale(1);
	}
	73% {
		opacity: 0.2;
		transform: scale(0.7);
	}
	84%,
	100% {
		opacity: 0;
		transform: scale(0);
	}
}

@keyframes culturalFieldBreath {
	0%,
	12%,
	88%,
	100% {
		opacity: 0;
		transform: scale(0.84);
	}
	42%,
	64% {
		opacity: 0.72;
		transform: scale(1);
	}
}

@media (max-width: 1100px) {
	.cultural-field {
		right: -2%;
		width: 57vw;
	}
}

@media (max-width: 820px) {
	.cultural-field {
		position: relative;
		top: auto;
		right: auto;
		width: min(100%, 680px);
		margin: 28px auto 4px;
		transform: none;
		flex: 0 0 auto;
	}
}

@media (max-width: 560px) {
	.cultural-field {
		width: 106%;
		margin: 34px -3% 2px;
	}

	.cultural-field__stage {
		inset: 6% 1% 7%;
	}

	.field-sheet {
		inset: 21% 13%;
	}

	.cultural-field__strata > i:nth-child(2),
	.cultural-field__strata > i:nth-child(8) {
		display: none;
	}

	.cultural-field__aperture {
		inset: 13% 5%;
	}

	.aperture-corner {
		width: 24px;
		height: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cultural-field *,
	.cultural-field *::before,
	.cultural-field *::after {
		animation: none !important;
	}

	.cultural-field__stage::before {
		opacity: 0.55;
		transform: none;
	}

	.field-sheet {
		opacity: 0.42;
		transform: translate3d(var(--sheet-out), 0, 0) rotate(var(--sheet-rotate));
	}

	.cultural-field__strata > i {
		opacity: 0.58;
		transform: translate3d(var(--row-shift), 0, 0) scaleX(0.92);
	}

	.cultural-field__cut {
		opacity: 0.62;
		transform: rotate(-18deg) scaleX(0.92);
	}

	.cultural-field__aperture {
		opacity: 0.6;
		transform: none;
	}

	.cultural-field__markers i {
		opacity: 0.72;
		transform: none;
	}
}

/* Possibility Morph: a soft, outline-free object that moves from one origin to many forms. */
.hero {
	background:
		radial-gradient(ellipse at 80% 43%, rgba(124, 176, 190, 0.14), transparent 37%),
		radial-gradient(ellipse at 88% 72%, rgba(218, 220, 236, 0.2), transparent 32%),
		linear-gradient(180deg, var(--paper) 0%, #f6f9fa 100%);
}

.possibility-morph {
	--morph-base: #003650;
	--morph-deep: #174b60;
	--morph-mid: #5f8796;
	--morph-light: #afc7ce;
	--morph-pale: #dce8eb;
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 2%;
	width: min(52vw, 760px);
	aspect-ratio: 1.48 / 1;
	transform: translate3d(0, -48%, 0);
	contain: layout style;
	overflow: visible;
	pointer-events: none;
}

.possibility-morph__stage {
	position: absolute;
	inset: 3% 1% 5%;
	perspective: 1000px;
	transform-style: preserve-3d;
	overflow: visible;
}

.possibility-morph__ambient {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 76%;
	height: 66%;
	display: block;
	border-radius: 50%;
	background:
		radial-gradient(circle at 38% 38%, rgba(220, 232, 235, 0.76), rgba(95, 135, 150, 0.24) 45%, rgba(0, 54, 80, 0) 72%);
	filter: blur(34px);
	opacity: 0.52;
	transform: translate3d(-50%, -50%, -80px);
	will-change: transform, opacity;
	animation: possibilityAmbient 20s ease-in-out infinite both;
}

.possibility-morph__shadow {
	position: absolute;
	z-index: 0;
	top: 72%;
	left: 50%;
	width: 48%;
	height: 12%;
	display: block;
	border-radius: 50%;
	background: rgba(0, 54, 80, 0.13);
	filter: blur(24px);
	opacity: 0.42;
	transform: translate3d(-50%, -50%, -60px) scaleX(1);
	will-change: transform, opacity;
	animation: possibilityShadow 20s ease-in-out infinite both;
}

.possibility-morph__core {
	position: absolute;
	z-index: 3;
	top: 49%;
	left: 50%;
	width: 64%;
	aspect-ratio: 188.37 / 116.5;
	overflow: hidden;
	border-radius: 4% / 6%;
	background:
		radial-gradient(circle at 24% 18%, rgba(175, 199, 206, 0.3), rgba(175, 199, 206, 0) 38%),
		radial-gradient(circle at 84% 18%, rgba(175, 199, 206, 0.3), rgba(175, 199, 206, 0) 42%),
		radial-gradient(circle at 70% 78%, rgba(95, 135, 150, 0.3), rgba(95, 135, 150, 0) 58%),
		linear-gradient(142deg, var(--morph-pale) 2%, var(--morph-light) 34%, var(--morph-mid) 72%, var(--morph-base) 100%);
	box-shadow:
		inset 28px 24px 54px rgba(220, 232, 235, 0.1),
		inset -34px -28px 62px rgba(0, 54, 80, 0.1),
		0 34px 72px rgba(0, 54, 80, 0.09);
	transform: translate3d(-50%, -50%, 0);
	transform-origin: center;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform, border-radius, opacity;
	animation: possibilityCoreRefined 20s cubic-bezier(0.42, 0, 0.18, 1) infinite both;
}

.possibility-morph__core::after,
.morph-lobe::before,
.morph-cube__face::after,
.morph-poly__facet::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: radial-gradient(circle, rgba(0, 54, 80, 0.16) 0.45px, transparent 0.72px);
	background-size: 3px 3px;
	mix-blend-mode: multiply;
	opacity: 0.11;
	pointer-events: none;
}

.morph-facet {
	position: absolute;
	display: block;
	border-radius: 42% 58% 48% 52% / 57% 43% 53% 47%;
	filter: blur(1px);
	mix-blend-mode: soft-light;
	will-change: transform, opacity, border-radius;
	animation: possibilityFacetRefined 20s ease-in-out infinite both;
}

.morph-facet--light {
	top: -14%;
	left: -8%;
	width: 72%;
	height: 88%;
	background: radial-gradient(circle at 58% 54%, rgba(175, 199, 206, 0.34), rgba(95, 135, 150, 0.02) 60%, transparent 76%);
	opacity: 0.32;
}

.morph-facet--cyan {
	right: -16%;
	bottom: -24%;
	width: 78%;
	height: 92%;
	background: radial-gradient(circle at 34% 28%, rgba(175, 199, 206, 0.5), rgba(95, 135, 150, 0.12) 60%, transparent 78%);
	opacity: 0.52;
	animation-delay: -0.35s;
}

.morph-facet--depth {
	top: 20%;
	right: 10%;
	width: 45%;
	height: 66%;
	background: radial-gradient(circle at 42% 42%, rgba(95, 135, 150, 0.38), rgba(23, 75, 96, 0.04) 66%, transparent 80%);
	opacity: 0.4;
	animation-delay: -0.7s;
}

.possibility-morph__lobes {
	position: absolute;
	z-index: 2;
	inset: 0;
	transform-style: preserve-3d;
}

.morph-lobe {
	position: absolute;
	top: 49%;
	left: 50%;
	display: block;
	aspect-ratio: var(--lobe-ratio, 1);
	border-radius: 50%;
	opacity: 0;
	transform: translate3d(-50%, -50%, 0) scale(0.2);
	transform-origin: center;
	backface-visibility: hidden;
	will-change: transform, opacity, border-radius;
	animation: possibilityLobeRefined 20s cubic-bezier(0.42, 0, 0.18, 1) infinite both;
}

.morph-lobe::after {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: inherit;
	background: radial-gradient(circle at 34% 24%, rgba(175, 199, 206, 0.28), transparent 50%);
	mix-blend-mode: screen;
	opacity: 0.38;
}

.morph-lobe--a {
	--lobe-ratio: 1.18;
	--shape-emerge: 38% 62% 46% 54% / 58% 36% 64% 42%;
	--shape-open: 63% 37% 58% 42% / 46% 62% 38% 54%;
	--shape-fold: 42% 58% 36% 64% / 62% 44% 56% 38%;
	--split-x: -98%;
	--split-y: -52%;
	--assemble-x: -42%;
	--assemble-y: -18%;
	--depth: 70px;
	--turn: -24deg;
	width: 29%;
	background:
		radial-gradient(circle at 66% 76%, rgba(0, 54, 80, 0.28), transparent 60%),
		linear-gradient(145deg, #dce8eb, #9db8c1 56%, #3f7183);
	box-shadow: 0 26px 54px rgba(0, 54, 80, 0.09);
}

.morph-lobe--b {
	--lobe-ratio: 0.82;
	--shape-emerge: 56% 44% 62% 38% / 36% 58% 42% 64%;
	--shape-open: 41% 59% 34% 66% / 64% 38% 62% 36%;
	--shape-fold: 60% 40% 54% 46% / 38% 66% 34% 62%;
	--split-x: 92%;
	--split-y: -46%;
	--assemble-x: 36%;
	--assemble-y: -22%;
	--depth: -18px;
	--turn: 32deg;
	width: 31%;
	background:
		radial-gradient(circle at 28% 30%, rgba(175, 199, 206, 0.26), transparent 46%),
		linear-gradient(132deg, #d5e2e6, #91adb7 52%, #285c70);
	box-shadow: 0 30px 62px rgba(0, 54, 80, 0.09);
	animation-delay: 0.12s;
}

.morph-lobe--c {
	--lobe-ratio: 1.35;
	--shape-emerge: 34% 66% 58% 42% / 62% 42% 58% 38%;
	--shape-open: 68% 32% 44% 56% / 40% 58% 42% 60%;
	--shape-fold: 46% 54% 64% 36% / 58% 34% 66% 42%;
	--split-x: -60%;
	--split-y: 86%;
	--assemble-x: -18%;
	--assemble-y: 36%;
	--depth: 96px;
	--turn: 18deg;
	width: 24%;
	background:
		radial-gradient(circle at 24% 18%, rgba(175, 199, 206, 0.28), transparent 42%),
		linear-gradient(155deg, #e1ebee, #abc1c9 48%, #547e8e);
	box-shadow: 0 22px 46px rgba(0, 54, 80, 0.08);
	animation-delay: 0.24s;
}

.morph-lobe--d {
	--lobe-ratio: 0.76;
	--shape-emerge: 62% 38% 48% 52% / 42% 64% 36% 58%;
	--shape-open: 36% 64% 58% 42% / 66% 40% 60% 34%;
	--shape-fold: 58% 42% 32% 68% / 44% 62% 38% 56%;
	--split-x: 108%;
	--split-y: 82%;
	--assemble-x: 44%;
	--assemble-y: 30%;
	--depth: 28px;
	--turn: -38deg;
	width: 20%;
	background:
		radial-gradient(circle at 32% 24%, rgba(175, 199, 206, 0.24), transparent 46%),
		linear-gradient(145deg, #cedde2, #87a7b2 52%, #174b60);
	box-shadow: 0 20px 42px rgba(0, 54, 80, 0.08);
	animation-delay: 0.36s;
}

.possibility-morph__poly {
	position: absolute;
	z-index: 3;
	top: 49%;
	left: 50%;
	width: 29%;
	aspect-ratio: 1.12;
	opacity: 0;
	transform: translate3d(-50%, -50%, 28px) rotateX(10deg) rotateY(-8deg) rotateZ(-6deg) scale(0.3);
	transform-style: preserve-3d;
	will-change: transform, opacity;
	animation: possibilityPoly 20s cubic-bezier(0.42, 0, 0.18, 1) infinite both;
}

.morph-poly__facet {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.morph-poly__facet--a {
	background: #dce8eb;
	clip-path: polygon(6% 19%, 44% 4%, 50% 48%, 18% 68%);
}

.morph-poly__facet--b {
	background: #afc7ce;
	clip-path: polygon(44% 4%, 91% 21%, 72% 54%, 50% 48%);
}

.morph-poly__facet--c {
	background: #819fac;
	clip-path: polygon(6% 19%, 18% 68%, 10% 84%, 0 52%);
}

.morph-poly__facet--d {
	background: #4d7889;
	clip-path: polygon(72% 54%, 91% 21%, 100% 66%, 90% 87%, 58% 94%);
}

.morph-poly__facet--e {
	background: #174b60;
	clip-path: polygon(18% 68%, 50% 48%, 72% 54%, 58% 94%, 10% 84%);
}

.possibility-morph__cube {
	--cube-size: clamp(108px, 14vw, 190px);
	--cube-half: clamp(54px, 7vw, 95px);
	position: absolute;
	z-index: 4;
	top: 49%;
	left: 50%;
	width: var(--cube-size);
	height: var(--cube-size);
	opacity: 0;
	transform: translate3d(-50%, -50%, 0) rotateX(-18deg) rotateY(30deg) scale(0.4);
	transform-style: preserve-3d;
	will-change: transform, opacity;
	animation: possibilityCube 20s cubic-bezier(0.42, 0, 0.18, 1) infinite both;
}

.morph-cube__face {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: 7px;
	backface-visibility: hidden;
	box-shadow: inset -18px -16px 34px rgba(95, 159, 178, 0.08);
}

.morph-cube__face--front {
	background: linear-gradient(145deg, #dce8eb 0%, #9bb6c0 58%, #3f7183 100%);
	transform: translateZ(var(--cube-half));
}

.morph-cube__face--right {
	background: linear-gradient(125deg, #c6d6db 0%, #7d9da9 55%, #174b60 100%);
	transform: rotateY(90deg) translateZ(var(--cube-half));
}

.morph-cube__face--top {
	background: linear-gradient(150deg, #e3ecef 0%, #afc7ce 62%, #5f8796 100%);
	transform: rotateX(90deg) translateZ(var(--cube-half));
}

@keyframes possibilityCoreRefined {
	0%,
	8% {
		opacity: 1;
		border-radius: 4% / 6%;
		transform: translate3d(-50%, -50%, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
	}
	18%,
	24% {
		opacity: 1;
		border-radius: 41% 59% 34% 66% / 63% 37% 56% 44%;
		transform: translate3d(-50%, -50%, 28px) rotateX(3deg) rotateY(-4deg) rotateZ(-3deg) scale(0.63, 1.06);
	}
	30% {
		opacity: 0.5;
		border-radius: 34% 66% 58% 42% / 64% 38% 62% 36%;
		transform: translate3d(-50%, -50%, 16px) rotateX(6deg) rotateY(8deg) rotateZ(2deg) scale(0.48, 0.78);
	}
	35%,
	84% {
		opacity: 0;
		border-radius: 4% / 6%;
		transform: translate3d(-50%, -50%, 0) rotateX(0) rotateY(0) rotateZ(0) scale(0.62);
	}
	88% {
		opacity: 0.35;
		border-radius: 4% / 6%;
		transform: translate3d(-50%, -50%, 0) rotateX(0) rotateY(0) rotateZ(0) scale(0.86);
	}
	94%,
	100% {
		opacity: 1;
		border-radius: 4% / 6%;
		transform: translate3d(-50%, -50%, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
	}
}

@keyframes possibilityLobeRefined {
	0%,
	24% {
		opacity: 0;
		border-radius: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(0) scale(0.16);
	}
	28% {
		opacity: 0.52;
		border-radius: var(--shape-emerge);
		transform: translate3d(-50%, -50%, 0) rotate(0) scale(0.48);
	}
	34%,
	42% {
		opacity: 0.96;
		border-radius: var(--shape-open);
		transform: translate3d(calc(-50% + var(--split-x)), calc(-50% + var(--split-y)), var(--depth)) rotate(var(--turn)) scale(1);
	}
	47% {
		opacity: 0.72;
		border-radius: var(--shape-fold);
		transform: translate3d(calc(-50% + var(--assemble-x)), calc(-50% + var(--assemble-y)), var(--depth)) rotate(var(--turn)) scale(0.76);
	}
	50% {
		opacity: 0.6;
		transform: translate3d(-50%, -50%, 0) rotate(0) scale(0.28);
	}
	55%,
	100% {
		opacity: 0;
		border-radius: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(0) scale(0.1);
	}
}

@keyframes possibilityCube {
	0%,
	66% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) rotateX(-18deg) rotateY(24deg) rotateZ(-2deg) scale(0.36);
	}
	69% {
		opacity: 0.4;
		transform: translate3d(-50%, -50%, 54px) rotateX(-20deg) rotateY(30deg) rotateZ(-2deg) scale(0.64);
	}
	73%,
	81% {
		opacity: 1;
		transform: translate3d(-50%, -50%, 72px) rotateX(-16deg) rotateY(42deg) rotateZ(-2deg) scale(0.92);
	}
	86% {
		opacity: 0.55;
		transform: translate3d(-50%, -50%, 44px) rotateX(-8deg) rotateY(78deg) rotateZ(2deg) scale(0.76);
	}
	90%,
	100% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) rotateX(0) rotateY(96deg) rotateZ(0) scale(0.42);
	}
}

@keyframes possibilityPoly {
	0%,
	49% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 28px) rotateX(10deg) rotateY(-8deg) rotateZ(-6deg) scale(0.26);
	}
	52% {
		opacity: 0.6;
		transform: translate3d(-50%, -50%, 38px) rotateX(12deg) rotateY(-12deg) rotateZ(-9deg) scale(0.58);
	}
	56%,
	63% {
		opacity: 0.92;
		transform: translate3d(-50%, -50%, 62px) rotateX(18deg) rotateY(-18deg) rotateZ(-12deg) scale(0.9);
	}
	68% {
		opacity: 0.55;
		transform: translate3d(-50%, -50%, 34px) rotateX(22deg) rotateY(-26deg) rotateZ(-5deg) scale(0.68);
	}
	72%,
	100% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) rotateX(24deg) rotateY(-30deg) rotateZ(0) scale(0.34);
	}
}

@keyframes possibilityFacetRefined {
	0%,
	100% {
		border-radius: 42% 58% 48% 52% / 57% 43% 53% 47%;
		transform: translate3d(-2%, -2%, 20px) rotate(-3deg) scale(0.96);
	}
	20% {
		border-radius: 46% 54% 43% 57% / 55% 45% 58% 42%;
		transform: translate3d(6%, 3%, 36px) rotate(6deg) scale(1.05);
	}
	43% {
		opacity: 0.4;
		transform: translate3d(-4%, 6%, 18px) rotate(-7deg) scale(0.92);
	}
	82% {
		border-radius: 39% 61% 53% 47% / 58% 42% 54% 46%;
		transform: translate3d(4%, -4%, 42px) rotate(5deg) scale(1.06);
	}
}

@keyframes possibilityCore {
	0%,
	10% {
		opacity: 1;
		border-radius: 4% / 6%;
		transform: translate3d(-50%, -50%, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
	}
	22% {
		opacity: 1;
		border-radius: 18% 32% 20% 36% / 24% 38% 20% 34%;
		transform: translate3d(-50%, -50%, 14px) rotateX(2deg) rotateY(-3deg) rotateZ(-1deg) scale(0.94, 1.02);
	}
	35%,
	44% {
		opacity: 1;
		border-radius: 50%;
		transform: translate3d(-50%, -50%, 28px) rotateX(4deg) rotateY(-5deg) rotateZ(-4deg) scale(0.63, 1.06);
	}
	52% {
		opacity: 0.24;
		border-radius: 44% 56% 58% 42% / 52% 42% 58% 48%;
		transform: translate3d(-50%, -50%, 18px) rotateX(8deg) rotateY(10deg) rotateZ(4deg) scale(0.48, 0.78);
	}
	60%,
	66% {
		opacity: 0;
		border-radius: 42% 58% 54% 46% / 58% 44% 56% 42%;
		transform: translate3d(-50%, -50%, -30px) rotateX(18deg) rotateY(20deg) rotateZ(8deg) scale(0.34, 0.56);
	}
	73% {
		opacity: 0.9;
		border-radius: 34% 66% 48% 52% / 54% 38% 62% 46%;
		transform: translate3d(-50%, -50%, 72px) rotateX(56deg) rotateY(-16deg) rotateZ(-11deg) scale(0.84, 0.92);
	}
	83% {
		opacity: 1;
		border-radius: 46% 54% 36% 64% / 58% 42% 55% 45%;
		transform: translate3d(-50%, -50%, 48px) rotateX(28deg) rotateY(22deg) rotateZ(7deg) scale(0.9, 0.96);
	}
	93% {
		opacity: 1;
		border-radius: 15% 22% 16% 24% / 20% 26% 18% 22%;
		transform: translate3d(-50%, -50%, 10px) rotateX(4deg) rotateY(2deg) rotateZ(0) scale(0.98);
	}
	100% {
		opacity: 1;
		border-radius: 4% / 6%;
		transform: translate3d(-50%, -50%, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
	}
}

@keyframes possibilityLobe {
	0%,
	43% {
		opacity: 0;
		border-radius: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(0) scale(0.16);
	}
	50% {
		opacity: 0.66;
		border-radius: 46% 54% 56% 44% / 58% 42% 58% 42%;
		transform: translate3d(-50%, -50%, 0) rotate(0) scale(0.48);
	}
	61%,
	66% {
		opacity: 0.96;
		border-radius: 58% 42% 48% 52% / 44% 58% 42% 56%;
		transform: translate3d(calc(-50% + var(--split-x)), calc(-50% + var(--split-y)), var(--depth)) rotate(var(--turn)) scale(1);
	}
	76% {
		opacity: 0.72;
		border-radius: 42% 58% 62% 38% / 58% 46% 54% 42%;
		transform: translate3d(calc(-50% + var(--assemble-x)), calc(-50% + var(--assemble-y)), var(--depth)) rotate(var(--turn)) scale(0.82);
	}
	84% {
		opacity: 0.2;
		transform: translate3d(-50%, -50%, 0) rotate(0) scale(0.36);
	}
	91%,
	100% {
		opacity: 0;
		border-radius: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(0) scale(0.12);
	}
}

@keyframes possibilityFacet {
	0%,
	100% {
		border-radius: 45% 55% 52% 48% / 58% 43% 57% 42%;
		transform: translate3d(-2%, -2%, 20px) rotate(-5deg) scale(0.96);
	}
	35% {
		border-radius: 58% 42% 46% 54% / 44% 60% 40% 56%;
		transform: translate3d(8%, 4%, 42px) rotate(9deg) scale(1.08);
	}
	58% {
		opacity: 0.42;
		transform: translate3d(-6%, 8%, 18px) rotate(-12deg) scale(0.9);
	}
	78% {
		border-radius: 38% 62% 58% 42% / 62% 38% 56% 44%;
		transform: translate3d(5%, -5%, 54px) rotate(7deg) scale(1.12);
	}
}

@keyframes possibilityAmbient {
	0%,
	100% {
		opacity: 0.42;
		transform: translate3d(-50%, -50%, -80px) scale(0.82, 0.9);
	}
	38% {
		opacity: 0.68;
		transform: translate3d(-48%, -52%, -80px) scale(0.96, 1.04);
	}
	64% {
		opacity: 0.78;
		transform: translate3d(-52%, -48%, -80px) scale(1.16, 0.96);
	}
	82% {
		opacity: 0.5;
		transform: translate3d(-50%, -50%, -80px) scale(0.9, 1.06);
	}
}

@keyframes possibilityShadow {
	0%,
	12%,
	100% {
		opacity: 0.34;
		transform: translate3d(-50%, -50%, -60px) scaleX(1);
	}
	38% {
		opacity: 0.28;
		transform: translate3d(-50%, -26%, -60px) scaleX(0.62);
	}
	62% {
		opacity: 0.22;
		transform: translate3d(-50%, -20%, -60px) scaleX(1.42);
	}
	78% {
		opacity: 0.4;
		transform: translate3d(-46%, -38%, -60px) scaleX(0.9);
	}
}

@media (max-width: 1100px) {
	.possibility-morph {
		right: 0;
		width: 55vw;
	}
}

@media (max-width: 820px) {
	.possibility-morph {
		position: relative;
		top: auto;
		right: auto;
		width: min(100%, 680px);
		margin: 26px auto 2px;
		transform: none;
		flex: 0 0 auto;
	}
}

@media (max-width: 560px) {
	.possibility-morph {
		width: 100%;
		margin: 31px 0 0;
	}

	.possibility-morph__stage {
		inset: 3% 0 5%;
	}

	.possibility-morph__core {
		width: 66%;
		box-shadow:
			inset 16px 14px 32px rgba(220, 232, 235, 0.08),
			inset -18px -16px 36px rgba(72, 164, 179, 0.08),
			0 22px 42px rgba(73, 150, 168, 0.08);
	}

	.possibility-morph__ambient {
		filter: blur(22px);
	}

	.morph-lobe--d {
		width: 18%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.possibility-morph *,
	.possibility-morph *::before,
	.possibility-morph *::after {
		animation: none !important;
	}

	.possibility-morph__ambient {
		opacity: 0.56;
		transform: translate3d(-50%, -50%, -80px);
	}

	.possibility-morph__shadow {
		opacity: 0.34;
		transform: translate3d(-50%, -50%, -60px);
	}

	.possibility-morph__core {
		opacity: 1;
		border-radius: 34% 66% 58% 42% / 64% 38% 62% 36%;
		transform: translate3d(-50%, -50%, 16px) rotateX(4deg) rotateY(-5deg);
	}

	.morph-lobe,
	.possibility-morph__cube {
		display: none;
	}
}

/* Opening loader */
html.is-loading,
html.is-loading body {
	overflow: hidden;
}

.site-loader {
	--loader-mark-width: clamp(76px, 8vw, 104px);
	position: fixed;
	z-index: 10000;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--blue);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.52s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-loader.is-leaving {
	opacity: 0;
	pointer-events: none;
}

.site-loader__mark {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--loader-mark-width);
	max-width: none;
	height: auto;
	opacity: 1;
	filter: brightness(0) invert(1);
	transform-origin: center;
	will-change: transform;
	animation: siteLoaderPulse 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes siteLoaderPulse {
	0%,
	100% {
		transform: scale(0.97);
	}
	50% {
		transform: scale(1.045);
	}
}

@media (max-width: 560px) {
	.site-loader {
		--loader-mark-width: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-loader {
		transition-duration: 0.2s;
	}

	.site-loader__mark {
		animation: none;
	}
}