/*
 * MST shared color system — Cool Graphite
 *
 * Keep all site-wide colour decisions here. Existing stylesheet variables are
 * retained as aliases below so templates and component CSS share this palette.
 */
:root {
	--mst-black: #000000;
	--mst-bg: #14191E;
	--mst-surface: #1B2127;
	--mst-border: #38424C;
	--mst-text: #F1F3F4;
	--mst-text-muted: #C0C8CF;
	--mst-accent: #49B9E8;
	--mst-accent-hover: #2F9FCF;
	--mst-accent-hover-border: #70CBEF;
	--mst-on-accent: #071012;
	--mst-accent-soft: rgba(73, 185, 232, .08);
	--mst-accent-faint: rgba(73, 185, 232, .14);
	--mst-overlay: rgba(0, 0, 0, .58);

	/* Backward-compatible component aliases. */
	--mst-ink: var(--mst-bg);
	--mst-panel: var(--mst-surface);
	--mst-paper: var(--mst-text);
	--mst-muted: var(--mst-text-muted);
	--mst-line: var(--mst-border);
	--mst-cyan: var(--mst-accent);
}

body.mst-site,
.mst-editorial-archive,
.mst-equipment-archive--editorial,
.mst-contact,
article.mst-article.mst-article--graphic,
article.mst-article.mst-article--text {
	background-color: var(--mst-bg);
	color: var(--mst-text);
}

/*
 * Japanese typography: keep headings visually balanced and avoid leaving
 * one or two characters by themselves on the final line of body copy.
 */
.mst-main :where(h1, h2, h3, h4) {
	line-break: strict;
	text-wrap: balance;
}

.mst-main :where(p, li, dd, figcaption) {
	line-break: strict;
	text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
	.mst-main :where(h1, h2, h3, h4, p, li, dd, figcaption) {
		word-break: auto-phrase;
	}
}

/*
 * Wide-screen stability:
 * As the desktop layout approaches the shared shell ceiling, stop editorial
 * service typography from outgrowing its text columns. Otherwise authored
 * two-line headings can become three or four lines on 16:9 desktop displays.
 */
@media (min-width: 1181px) {
	/*
	 * Wide editorial rhythm: keep image-led service sections within one
	 * comfortable desktop viewport. The photograph remains a half-width
	 * atmosphere and dissolves into the copy instead of reading as a large
	 * standalone panel.
	 */
	.mst-service-page__intro {
		padding-top: 110px;
		padding-bottom: 120px;
	}

	.mst-service-page__intro h2 {
		font-size: 52px;
	}

	.mst-service-page__story {
		padding: clamp(68px, 5.6vw, 82px) 0;
	}

	.mst-service-page__story-layout {
		grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
		gap: clamp(34px, 3.5vw, 52px);
	}

	.mst-service-page__story-copy h2 {
		font-size: clamp(42px, 2.9vw, 46px);
	}

	.mst-service-page__story-copy > p:not(.mst-eyebrow) {
		max-width: 520px;
		font-size: 14px;
		line-height: 2.05;
	}

	.mst-service-page__story-figure {
		margin: 0 -5vw 0 -2vw;
	}

	.mst-service-page__story-figure img {
		height: clamp(400px, 31vw, 460px) !important;
	}

	.mst-service-page__story-figure::after {
		background:
			linear-gradient(90deg, var(--mst-service-deep) 0%, rgba(27, 33, 39, .82) 13%, transparent 39%, transparent 86%, var(--mst-service-deep) 100%),
			linear-gradient(0deg, var(--mst-service-deep) 0%, rgba(27, 33, 39, .72) 12%, transparent 31%);
	}

	.mst-service-page__listening,
	.mst-service-page__digital-craft,
	.mst-service-page__association {
		padding: clamp(64px, 5.2vw, 78px) 0;
	}

	.mst-service-page__digital-craft-layout {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
		gap: clamp(38px, 4vw, 60px);
	}

	.mst-service-page__digital-craft-figure {
		margin: 0 -2vw 0 -5vw;
	}

	.mst-service-page__digital-craft-figure img {
		height: clamp(360px, 29vw, 430px) !important;
	}

	.mst-service-page__listening-layout {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: clamp(38px, 4vw, 60px);
	}

	.mst-service-page__listening-figure {
		margin: 0 -5vw 0 -2vw;
	}

	.mst-service-page__listening-figure img {
		height: clamp(340px, 28vw, 420px) !important;
	}

	.mst-service-page__listening-copy h2,
	.mst-service-page__digital-craft-copy h2,
	.mst-service-page__association-copy h2 {
		font-size: 44px;
	}

	.mst-service-page__listening-copy > p:not(.mst-eyebrow),
	.mst-service-page__digital-craft-copy > p:not(.mst-eyebrow),
	.mst-service-page__association-copy > p:not(.mst-eyebrow) {
		font-size: 14px;
		line-height: 2.05;
	}

	.mst-service-page__section-intro h2 {
		font-size: 48px;
	}

	.mst-service-page__consultation h2 {
		font-size: 50px;
	}
}

/* The brand frame is intentionally solid black, independent of page imagery. */
.mst-header,
.mst-footer {
	background-color: var(--mst-black);
}

.mst-mobile-menu {
	background-color: var(--mst-black);
}

.mst-service-page {
	--mst-service-bg: var(--mst-bg);
	--mst-service-deep: var(--mst-surface);
	background-color: var(--mst-bg);
}

.mst-service-page__story,
.mst-service-page__equipment {
	background: var(--mst-surface);
}

.mst-service-page__works {
	background: var(--mst-bg);
}

.mst-service-page__equipment-image,
.mst-service-page__works-feature figure,
.mst-instagram-feed .sbi_item,
.mst-instagram-feed .sbi_photo_wrap,
.mst-instagram-feed .sbi_photo {
	background-color: var(--mst-surface) !important;
}

body.mst-site .mst-header__cta,
body.mst-site .mst-consultation > a,
.mst-contact__form .fplant-submit-button,
.mst-contact__form .fplant-confirm-submit-button,
.mst-contact__form .fplant-back-button {
	background-color: var(--mst-accent);
	border-color: var(--mst-accent);
	color: var(--mst-on-accent);
	transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

body.mst-site .mst-header__cta:hover,
body.mst-site .mst-consultation > a:hover,
.mst-contact__form .fplant-submit-button:hover,
.mst-contact__form .fplant-confirm-submit-button:hover {
	background-color: var(--mst-accent-hover);
	border-color: var(--mst-accent-hover-border);
	color: var(--mst-on-accent);
	box-shadow: 0 10px 26px rgba(73, 185, 232, .22);
}

.mst-contact__form .fplant-back-button {
	background-color: transparent;
	border-color: var(--mst-border);
	color: var(--mst-text);
}

/* Shared raised surfaces, image fallbacks, and product presentation areas. */
.mst-image-block,
.mst-product-grid__image,
.mst-work-grid > a,
.mst-post-card__image,
.mst-editorial-feature__media,
.mst-editorial-card__media,
.mst-related-work__image,
.mst-story .feature-img,
.mst-story .full-width-img,
.mst-story--collection :is(.feature-img, .grid-img, .grid-img-1, .grid-img-2, .gallery-img, .process-img, .comp-img, .intro-thumb, .philo-thumb, .diagram-img, .ctrl-img, .cad-img, .print-img, .finish-img, .final-img, .gal-img, .column-img),
.mst-sound-design__works-grid a,
.mst-equipment__works-grid a,
.mst-sound-design__equipment-image,
.mst-equipment-archive__image,
.mst-equipment__visual,
.mst-product-single__image,
.mst-now-feature--product .mst-image-block img {
	background-color: var(--mst-surface);
}

.mst-vehicle,
.mst-consultation,
.mst-sound-design__works,
.mst-sound-design__consultation,
.mst-equipment__consultation,
.mst-contact__form .fplant-confirmation {
	background-color: var(--mst-surface);
}

.mst-article--feature .mst-article__content--editorial,
.mst-related-works {
	background-color: var(--mst-bg);
}

.mst-editorial-hero,
.mst-hero {
	background-color: var(--mst-bg);
}

.mst-editorial-hero__shade {
	background-color: var(--mst-overlay);
}

.mst-contact {
	--mst-contact-soft: var(--mst-text-muted);
	--mst-contact-field: rgba(27, 33, 39, .88);
	--mst-contact-field-focus: rgba(73, 185, 232, .12);
}

.mst-contact__hero {
	background:
		radial-gradient(circle at 78% 38%, var(--mst-accent-faint), transparent 27%),
		linear-gradient(125deg, var(--mst-bg) 0%, var(--mst-bg) 48%, var(--mst-surface) 100%);
}

.mst-contact__form input[type="text"],
.mst-contact__form input[type="email"],
.mst-contact__form input[type="tel"],
.mst-contact__form input[type="number"],
.mst-contact__form input[type="url"],
.mst-contact__form select,
.mst-contact__form textarea,
.mst-contact__form select option {
	background-color: var(--mst-surface);
	border-color: var(--mst-border);
	color: var(--mst-text);
}

.mst-contact__form input:focus,
.mst-contact__form select:focus,
.mst-contact__form textarea:focus {
	background-color: var(--mst-surface);
	border-color: var(--mst-accent);
	box-shadow: 0 0 0 1px var(--mst-accent-faint);
}

.mst-contact__form .fplant-field-file,
.mst-contact__form .fplant-errors,
.mst-contact-complete,
.mst-contact__form .fplant-success {
	background-color: var(--mst-surface);
}

/* Direct legacy values resolve to the same two text tones without touching copy. */
.mst-main :is(
	.mst-now-feature > p:not(.mst-eyebrow),
	.mst-product-grid p:not(.mst-eyebrow),
	.mst-vehicle__layout > div:first-child > p:not(.mst-eyebrow),
	.mst-consultation p:not(.mst-eyebrow),
	.mst-page-hero > p:not(.mst-eyebrow),
	.mst-product-single p:not(.mst-eyebrow),
	.mst-archive-hero__copy > p:not(.mst-eyebrow),
	.mst-editorial-card__copy > p,
	.mst-story p,
	.mst-story .caption,
	.mst-related-work__meta,
	.mst-contact__details dd,
	.mst-contact__form .fplant-field-group > label,
	.mst-contact__form .fplant-radio-label,
	.mst-contact__form .fplant-checkbox-label,
	.mst-contact-complete__status,
	.mst-contact-complete__direct p
) {
	color: var(--mst-text-muted);
}

.mst-main :is(
	.mst-story strong,
	.mst-story .intro-section .section-title,
	.mst-story .sub-title,
	.mst-story .summary-section .section-title,
	.mst-editorial-hero h1,
	.mst-editorial-hero__subtitle,
	.mst-related-work__meta b
) {
	color: var(--mst-text);
}

.mst-main :is(.mst-nowline a:hover, .mst-vehicle__links a:hover, .mst-related-work:hover, .mst-related-work:focus-visible, .mst-contact__form .fplant-postal-code-search:hover) {
	background-color: var(--mst-accent-soft);
}

.mst-main :is(.mst-editorial-hero__subtitle, .mst-contact__form .mst-form-section-title) {
	border-color: var(--mst-accent);
}

.mst-main :is(.mst-article__graphic-hero img, .mst-article__text-hero) {
	background-color: var(--mst-surface);
}

/* Product photography uses the same warm-white canvas as the prepared assets. */
.mst-main :is(
	.mst-product-grid__image,
	.mst-sound-design__equipment-image,
	.mst-equipment-archive__image,
	.mst-equipment-feature__media,
	.mst-equipment__visual,
	.mst-product-single__image
) {
	background-color: #fff;
}

.mst-main :is(.mst-article__text-hero, .mst-service-rail > a, .mst-sound-design__consultation, .mst-equipment__consultation) {
	background-image: none;
}

/*
 * Readability baseline
 *
 * Headings and compact editorial labels keep their existing scale. Navigation,
 * explanatory copy, card descriptions, and practical notes use a larger floor
 * so the desktop experience remains readable on high-density displays.
 */
.mst-footer__company {
	font-size: 12px;
	line-height: 1.75;
}

.mst-footer__name {
	font-size: 13px;
	letter-spacing: .08em;
}

.mst-footer__link-group {
	gap: 11px;
	font-size: 12px;
	line-height: 1.65;
}

.mst-footer__link-group p {
	font-size: 9.5px;
	line-height: 1.4;
}

.mst-footer__copyright {
	font-size: 11px;
	line-height: 1.6;
}

@media (min-width: 1181px) {
	.mst-header .mst-nav--desktop .mst-menu a {
		font-size: clamp(14px, 1.04vw, 15px);
		font-weight: 600;
		letter-spacing: .025em;
		opacity: 1;
	}

	.mst-header__access {
		font-size: 12px;
		letter-spacing: .055em;
	}

	.mst-header__access span {
		font-size: 9px;
		letter-spacing: .14em;
	}

	.mst-header__cta {
		font-size: 12px;
		letter-spacing: .035em;
	}
}

@media (min-width: 981px) {
	/* Home: keep the small English eyebrows, but enlarge copy users read. */
	.home .mst-main :is(
		.mst-now-feature > p:not(.mst-eyebrow),
		.mst-service-rail p,
		.mst-product-grid p:not(.mst-eyebrow),
		.mst-vehicle__layout > div:first-child > p:not(.mst-eyebrow),
		.mst-vehicle__links span,
		.mst-journal-grid > a,
		.mst-journal-grid > div > a:not(.mst-arrow-link),
		.mst-consultation p:not(.mst-eyebrow)
	) {
		font-size: 14px;
		line-height: 1.95;
	}

	/* Service pages: editorial prose is 15px; dense cards use a 13px floor. */
	.mst-service-page :is(
		.mst-service-page__hero-copy,
		.mst-service-page__intro,
		.mst-service-page__story-copy,
		.mst-service-page__digital-craft-copy,
		.mst-service-page__listening-copy,
		.mst-service-page__association-copy
	) > p:not(.mst-eyebrow) {
		font-size: 15px;
		line-height: 2.1;
	}

	.mst-service-page :is(
		.mst-service-page__principle-list,
		.mst-service-page__section-intro,
		.mst-service-page__capability-list,
		.mst-service-page__consultation
	) p:not(.mst-eyebrow) {
		font-size: 14px;
		line-height: 2;
	}

	.mst-service-page__equipment-list div > p:not(.mst-eyebrow),
	.mst-service-page__works-list h3 {
		font-size: 13px;
		line-height: 1.8;
	}

	/* Company and access pages carry practical information, so notes stay legible. */
	.mst-company :is(
		.mst-company__hero,
		.mst-company__intro,
		.mst-company__brand,
		.mst-company__achievements,
		.mst-company__profile,
		.mst-company__trust,
		.mst-company__equipment,
		.mst-company__environment,
		.mst-company__facility,
		.mst-company__access
	) p:not(.mst-eyebrow):not(.mst-company__environment-statement) {
		font-size: 14px;
		line-height: 2;
	}

	.mst-company .mst-company__note {
		font-size: 12px;
		line-height: 1.85;
	}

	.mst-access-page :is(
		.mst-page-hero__inner,
		.mst-access-page__intro-copy,
		.mst-access-page__map-details,
		.mst-access-page__route-grid,
		.mst-access-page__regional-heading,
		.mst-access-page__regional-grid,
		.mst-access-page__arrival,
		.mst-access-page__contact
	) p:not(.mst-eyebrow) {
		font-size: 14px;
		line-height: 1.95;
	}

	.mst-access-page__map-details dd {
		font-size: 14px;
		line-height: 1.85;
	}

	.mst-access-page .mst-access-page__regional-note,
	.mst-access-page .mst-access-page__arrival-note {
		font-size: 12px !important;
		line-height: 1.9;
	}

	/* Archive and brand introductions need a calmer, book-like reading size. */
	.mst-equipment-archive :is(
		.mst-archive-hero__copy,
		.mst-equipment-feature__copy,
		.mst-equipment-method .mst-section-heading
	) > p:not(.mst-eyebrow),
	.mst-brand-page :is(
		.mst-brand-page__prose,
		.mst-brand-page__selection,
		.mst-brand-page__perspective,
		.mst-brand-page__technology,
		.mst-brand-page__ecosystem,
		.mst-brand-page__advice,
		.mst-brand-page__featured-card
	) p:not(.mst-eyebrow) {
		font-size: 14px;
		line-height: 2;
	}

	.mst-equipment-archive :is(
		.mst-equipment-archive__grid,
		.mst-equipment-method__grid
	) p:not(.mst-eyebrow),
	.mst-brand-index .mst-brand-card__copy > p:not(.mst-eyebrow),
	.mst-archive-routes__grid p:not(.mst-eyebrow),
	.mst-brand-page :is(
		.mst-brand-card__copy,
		.mst-brand-page__series-card,
		.mst-brand-page__product-line-components,
		.mst-brand-page__selected-equipment-card,
		.mst-brand-page__product-grid,
		.mst-brand-page__technology-detail-grid,
		.mst-brand-page__choice-guide-grid,
		.mst-brand-page__player-guide-grid,
		.mst-brand-page__notes
	) p:not(.mst-eyebrow) {
		font-size: 13px;
		line-height: 1.9;
	}

	/* Contact: guidance and form copy should not be smaller than field values. */
	.mst-contact :is(
		.mst-contact__hero-inner,
		.mst-contact__intro-copy,
		.mst-contact__aside,
		.mst-contact__sales-note
	) p:not(.mst-eyebrow) {
		font-size: 13px;
		line-height: 1.9;
	}

	.mst-contact__details dd,
	.mst-contact__privacy,
	.mst-contact__flow li p {
		font-size: 13px;
		line-height: 1.8;
	}

	.mst-contact__form :is(
		.fplant-field-group > label,
		.fplant-radio-label,
		.fplant-checkbox-label,
		.fplant-file-info
	) {
		font-size: 12px;
		line-height: 1.7;
	}
}

@media (max-width: 760px) {
	.mst-editorial-hero__shade {
		background-color: rgba(0, 0, 0, .66);
	}
}