/* Editorial type and restrained motion: option 2 typography + option 3 index. */
:root {
	--mst-display-serif: "Cormorant Garamond", "Times New Roman", serif;
	--mst-jp-serif: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif;
	--mst-ease-editorial: cubic-bezier(.2, .7, .2, 1);
}

html {
	scroll-behavior: smooth;
}

.mst-header__inner {
	grid-template-columns: 132px 1fr auto;
}

.mst-menu {
	gap: clamp(18px, 2.35vw, 38px);
}

.mst-menu a {
	position: relative;
	font-family: var(--mst-display-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .045em;
	text-transform: none;
}

.mst-menu a::after {
	position: absolute;
	right: 0;
	bottom: -10px;
	left: 0;
	height: 1px;
	content: "";
	background: var(--mst-cyan);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 360ms var(--mst-ease-editorial);
}

.mst-menu a:hover::after,
.mst-menu .current-menu-item > a::after,
.mst-menu .current_page_item > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.mst-header__cta {
	border: 1px solid rgba(100, 202, 250, .48);
	background: rgba(8, 16, 18, .18);
	color: var(--mst-paper);
	backdrop-filter: blur(8px);
}

.mst-header__cta:hover {
	border-color: var(--mst-cyan);
	background: rgba(100, 202, 250, .13);
	color: #fff;
}

.mst-hero {
	--mst-hero-shift: 0px;
	background-position: center center, center bottom, center calc(52% + var(--mst-hero-shift));
}

.mst-hero__content {
	padding-left: clamp(54px, 8.2vw, 132px);
}

.mst-hero h1 {
	max-width: 760px;
	margin: 22px 0 20px;
	font-family: var(--mst-display-serif);
	font-size: clamp(66px, 7.7vw, 118px);
	font-weight: 400;
	line-height: .78;
	letter-spacing: -.045em;
}

.mst-hero h1 span {
	display: block;
	opacity: 0;
	transform: translateY(24px);
}

.mst-hero--integration .mst-hero__content > .mst-hero__brand-message {
	max-width: 760px;
	margin: 29px 0 0;
	color: var(--mst-paper);
	font-size: clamp(13px, 1.08vw, 17px);
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: .055em;
}

.mst-hero--integration .mst-hero__content > .mst-hero__brand-tagline {
	margin: 9px 0 0;
	color: rgba(241, 242, 237, .78);
	font: 400 clamp(11px, .94vw, 14px)/1.6 "DM Sans", sans-serif;
	letter-spacing: .08em;
}

.mst-page-ready .mst-hero h1 span {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 900ms var(--mst-ease-editorial), transform 900ms var(--mst-ease-editorial);
}

.mst-page-ready .mst-hero h1 span:nth-child(2) {
	transition-delay: 120ms;
}

.mst-page-ready .mst-hero h1 span:nth-child(3) {
	transition-delay: 210ms;
}

.mst-hero__content > .mst-eyebrow,
.mst-hero__content > p:not(.mst-eyebrow),
.mst-hero__actions {
	opacity: 0;
	transform: translateY(10px);
}

.mst-page-ready .mst-hero__content > .mst-eyebrow,
.mst-page-ready .mst-hero__content > p:not(.mst-eyebrow),
.mst-page-ready .mst-hero__actions {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 700ms var(--mst-ease-editorial), transform 700ms var(--mst-ease-editorial);
}

.mst-page-ready .mst-hero__content > .mst-eyebrow { transition-delay: 80ms; }
.mst-page-ready .mst-hero__content > p:not(.mst-eyebrow) { transition-delay: 250ms; }
.mst-page-ready .mst-hero__actions { transition-delay: 340ms; }

.mst-hero-index {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: clamp(21px, 3.1vw, 54px);
	display: grid;
	gap: 22px;
	width: 58px;
	transform: translateY(-56%);
}

.mst-hero-index::before {
	position: absolute;
	top: 25px;
	bottom: 26px;
	left: 5px;
	width: 1px;
	content: "";
	background: rgba(238, 244, 243, .24);
}

.mst-hero-index a {
	position: relative;
	display: grid;
	gap: 6px;
	padding-left: 17px;
	color: rgba(241, 242, 237, .38);
	transition: color 320ms ease;
}

.mst-hero-index a::before {
	position: absolute;
	top: 2px;
	left: 5px;
	width: 1px;
	height: 0;
	content: "";
	background: var(--mst-cyan);
	transition: height 380ms var(--mst-ease-editorial), top 380ms var(--mst-ease-editorial);
}

.mst-hero-index a:hover,
.mst-hero-index a.is-active {
	color: var(--mst-paper);
}

.mst-hero-index a.is-active::before {
	top: -6px;
	height: 36px;
}

.mst-hero-index span {
	font: 500 11px/1 "DM Sans", sans-serif;
	letter-spacing: .08em;
}

.mst-hero-index em {
	font: 500 7px/1 "DM Sans", sans-serif;
	font-style: normal;
	letter-spacing: .14em;
}

.mst-hero-scroll {
	position: absolute;
	z-index: 4;
	bottom: 84px;
	left: clamp(26px, 3.45vw, 60px);
	display: grid;
	justify-items: center;
	gap: 10px;
	color: rgba(241, 242, 237, .58);
}

.mst-hero-scroll span {
	font: 500 7px/1 "DM Sans", sans-serif;
	letter-spacing: .18em;
	writing-mode: vertical-rl;
}

.mst-hero-scroll i {
	display: block;
	width: 1px;
	height: 30px;
	overflow: hidden;
	background: rgba(241, 242, 237, .24);
}

.mst-hero-scroll i::after {
	display: block;
	width: 1px;
	height: 13px;
	content: "";
	background: var(--mst-cyan);
	animation: mst-scroll-pulse 2.2s var(--mst-ease-editorial) infinite;
}

.mst-nowline {
	background: rgba(5, 9, 10, .46);
	backdrop-filter: blur(7px);
}

.mst-nowline a {
	transition: background 280ms ease, color 280ms ease;
}

.mst-section-heading h2,
.mst-consultation h2,
.mst-page-hero h1 {
	font-weight: 300;
	letter-spacing: -.045em;
}

/* Sound Design carries the same editorial typography and restrained motion. */
.mst-sound-design__hero {
	--mst-hero-shift: 0px;
	background-position: 56% calc(50% + var(--mst-hero-shift));
}

.mst-sound-design__hero::before {
	background: linear-gradient(90deg, rgba(4, 7, 8, .88) 0%, rgba(4, 7, 8, .62) 43%, rgba(4, 7, 8, .10) 100%), linear-gradient(0deg, rgba(4, 7, 8, .56), transparent 52%);
}

.mst-sound-design__hero-copy {
	padding-left: clamp(54px, 8.2vw, 132px);
}

.mst-sound-design__hero h1,
.mst-sound-design__intro h2,
.mst-sound-design .mst-section-heading h2,
.mst-sound-design__consultation h2 {
	font-family: var(--mst-jp-serif);
	font-weight: 300;
	letter-spacing: -.045em;
}

.mst-sound-design__hero h1 {
	max-width: 820px;
	font-size: clamp(55px, 6.75vw, 100px);
	line-height: 1.02;
}

.mst-sound-design__hero h1 span {
	display: block;
	opacity: 0;
	transform: translateY(22px);
}

.mst-page-ready .mst-sound-design__hero h1 span {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 900ms var(--mst-ease-editorial), transform 900ms var(--mst-ease-editorial);
}

.mst-page-ready .mst-sound-design__hero h1 span:nth-child(2) {
	transition-delay: 120ms;
}

.mst-sound-design__hero-copy > .mst-eyebrow,
.mst-sound-design__hero-copy > p:not(.mst-eyebrow),
.mst-sound-design__hero-copy > .mst-underline-link {
	opacity: 0;
	transform: translateY(10px);
}

.mst-page-ready .mst-sound-design__hero-copy > .mst-eyebrow,
.mst-page-ready .mst-sound-design__hero-copy > p:not(.mst-eyebrow),
.mst-page-ready .mst-sound-design__hero-copy > .mst-underline-link {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 700ms var(--mst-ease-editorial), transform 700ms var(--mst-ease-editorial);
}

.mst-page-ready .mst-sound-design__hero-copy > .mst-eyebrow { transition-delay: 70ms; }
.mst-page-ready .mst-sound-design__hero-copy > p:not(.mst-eyebrow) { transition-delay: 250ms; }
.mst-page-ready .mst-sound-design__hero-copy > .mst-underline-link { transition-delay: 340ms; }

.mst-sound-design__hero-index {
	position: absolute;
	z-index: 4;
	top: 50%;
	right: auto;
	bottom: auto;
	left: clamp(21px, 3.1vw, 54px);
	display: grid;
	gap: 22px;
	width: 68px;
	transform: translateY(-52%);
}

.mst-sound-design__hero-index::before {
	position: absolute;
	top: 25px;
	bottom: 26px;
	left: 5px;
	width: 1px;
	content: "";
	background: rgba(238, 244, 243, .24);
}

.mst-sound-design__hero-index a {
	position: relative;
	display: grid;
	gap: 6px;
	padding-left: 17px;
	color: rgba(241, 242, 237, .38);
	transition: color 320ms ease;
}

.mst-sound-design__hero-index a::before {
	position: absolute;
	top: 2px;
	left: 5px;
	width: 1px;
	height: 0;
	content: "";
	background: var(--mst-cyan);
	transition: height 380ms var(--mst-ease-editorial), top 380ms var(--mst-ease-editorial);
}

.mst-sound-design__hero-index a:hover,
.mst-sound-design__hero-index a.is-active {
	color: var(--mst-paper);
}

.mst-sound-design__hero-index a.is-active::before {
	top: -6px;
	height: 36px;
}

.mst-sound-design__hero-index span {
	font: 500 11px/1 "DM Sans", sans-serif;
	letter-spacing: .08em;
}

.mst-sound-design__hero-index em {
	font: 500 7px/1 "DM Sans", sans-serif;
	font-style: normal;
	letter-spacing: .14em;
}

.mst-sound-design__intro h2,
.mst-sound-design__consultation h2 {
	line-height: 1.35;
}

.mst-sound-design__principle-grid h3 {
	font-family: var(--mst-display-serif);
	font-size: clamp(28px, 2.8vw, 42px);
	font-weight: 500;
	letter-spacing: -.025em;
}

.mst-sound-design__equipment-grid h3 {
	font-family: var(--mst-display-serif);
	font-size: clamp(28px, 2.7vw, 38px);
	font-weight: 500;
	letter-spacing: -.03em;
}

.mst-now-feature h3,
.mst-product-grid h3,
.mst-service-rail h3,
.mst-company__brand h2,
.mst-product-single h1 {
	font-family: var(--mst-display-serif);
	font-weight: 500;
	letter-spacing: -.025em;
}

.mst-motion-ready .mst-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 720ms var(--mst-ease-editorial) var(--mst-reveal-delay, 0ms), transform 720ms var(--mst-ease-editorial) var(--mst-reveal-delay, 0ms);
}

.mst-motion-ready .mst-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes mst-scroll-pulse {
	0% { opacity: 0; transform: translateY(-14px); }
	22% { opacity: 1; }
	72% { opacity: 1; }
	100% { opacity: 0; transform: translateY(31px); }
}

@media (max-width: 1100px) {
	.mst-hero__content { padding-left: clamp(48px, 8vw, 78px); }
	.mst-hero-index { left: 20px; }
	.mst-hero-scroll { left: 26px; }
	.mst-sound-design__hero-copy { padding-left: clamp(48px, 8vw, 78px); }
	.mst-sound-design__hero-index { left: 20px; }
}

@media (max-width: 980px) {
	.mst-header__inner { grid-template-columns: 1fr auto; }
	.mst-mobile-menu .mst-menu a {
		font-family: var(--mst-display-serif);
		font-size: clamp(34px, 8.5vw, 48px);
	}
	.mst-mobile-menu .mst-menu a::after { display: none; }
	.mst-hero-index,
	.mst-hero-scroll { display: none; }
	.mst-hero__content { padding-left: 0; }
	.mst-sound-design__hero-copy { padding-left: 0; }
	.mst-sound-design__hero-index {
		top: auto;
		bottom: 34px;
		left: 20px;
		display: flex;
		gap: 18px;
		width: auto;
		transform: none;
	}
	.mst-sound-design__hero-index::before,
	.mst-sound-design__hero-index a::before { display: none; }
	.mst-sound-design__hero-index a {
		display: block;
		padding-left: 0;
	}
	.mst-sound-design__hero-index span { display: none; }
	.mst-sound-design__hero-index em { font-size: 8px; }
}

@media (max-width: 680px) {
	.mst-hero {
		background-position: center center, center bottom, 62% calc(50% + var(--mst-hero-shift));
	}
	.mst-hero h1 {
		max-width: 350px;
		font-size: clamp(58px, 18vw, 76px);
		line-height: .84;
	}
	.mst-hero--integration h1 {
		font-size: clamp(50px, 14vw, 56px);
		line-height: .86;
	}
	.mst-hero--integration .mst-hero__content > .mst-hero__brand-message {
		max-width: 330px;
		margin-top: 24px;
		font-size: 12px;
		line-height: 1.8;
		letter-spacing: .035em;
	}
	.mst-hero--integration .mst-hero__content > .mst-hero__brand-tagline {
		margin-top: 8px;
		font-size: 11px;
		letter-spacing: .05em;
	}
	.mst-sound-design__hero {
		background-position: 61% calc(50% + var(--mst-hero-shift));
	}
	.mst-sound-design__hero h1 {
		font-size: clamp(43px, 12.5vw, 54px);
		line-height: 1.08;
	}
	.mst-sound-design__intro h2,
	.mst-sound-design .mst-section-heading h2,
	.mst-sound-design__consultation h2 {
		font-size: 26px;
		line-height: 1.45;
		letter-spacing: -.055em;
	}
	.mst-sound-design__intro h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mst-hero h1 span,
	.mst-hero__content > .mst-eyebrow,
	.mst-hero__content > p:not(.mst-eyebrow),
	.mst-hero__actions,
	.mst-sound-design__hero h1 span,
	.mst-sound-design__hero-copy > .mst-eyebrow,
	.mst-sound-design__hero-copy > p:not(.mst-eyebrow),
	.mst-sound-design__hero-copy > .mst-underline-link,
	.mst-motion-ready .mst-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.mst-hero-scroll i::after { animation: none; }
}