/* =========================================================================
   MAVKA — Mavi Ka concept
   Tokens first, then components, in that order.

   Translated from the design reference, which carried every rule as an inline
   style attribute. The values below are that design's values; what changed in
   the move to a stylesheet is noted where it changed.
   ========================================================================= */

/* --------------------------------------------------------------- Tokens */

:root {
	/* Surfaces */
	--mv-paper: #f2f2ef;
	--mv-paper-alt: #eaeae6;
	--mv-ink: #17191c;

	/* Type colour, lightest-used to darkest */
	--mv-ghost: #c6ccd2;   /* hero wordmark */
	--mv-numeral: #a9b0b8; /* 01 / 02 / 03 */
	--mv-faint: #868c94;   /* footer, romaji */
	--mv-label: #7e848c;   /* section eyebrows */
	--mv-muted: #6b7078;   /* gloss, brand latin */
	--mv-body-2: #5a6068;  /* card body */
	--mv-body: #4c525a;    /* lead paragraphs, nav */

	/* Accent */
	--mv-slate: #4a5c74;   /* link hover */
	--mv-mist: #dde3ea;    /* selection, light button hover */
	--mv-ink-hover: #3a4250;

	/* Hairlines. The design used four alpha steps of the ink; kept as-is
	   because the weight difference between them is visible on the grid. */
	--mv-rule-08: rgba(23, 25, 28, 0.08);
	--mv-rule-10: rgba(23, 25, 28, 0.1);
	--mv-rule-12: rgba(23, 25, 28, 0.12);
	--mv-rule-14: rgba(23, 25, 28, 0.14);

	--mv-serif: 'Shippori Mincho', Georgia, 'Times New Roman', serif;
	--mv-sans: 'Zen Kaku Gothic New', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--mv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--mv-header-h: 74px;
	--mv-wrap: 1280px;
	--mv-gutter: clamp(20px, 6vw, 88px);
}

/* ---------------------------------------------------------------- Reset */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--mv-paper);
	color: var(--mv-ink);
	font-family: var(--mv-sans);
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--mv-ink);
	text-decoration: none;
}

a:hover {
	color: var(--mv-slate);
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--mv-mist);
	color: var(--mv-ink);
}

/* The design specified hover states only. Keyboard users get the same affordance
   here, drawn in the accent so it reads as part of the palette. */
:focus-visible {
	outline: 2px solid var(--mv-slate);
	outline-offset: 3px;
}

.mv-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 20px;
	background: var(--mv-ink);
	color: var(--mv-paper);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.mv-skip:focus {
	left: 0;
	color: var(--mv-paper);
}

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

/* ------------------------------------------------------------ Primitives */

.mv-wrap {
	max-width: var(--mv-wrap);
	margin: 0 auto;
	padding-inline: var(--mv-gutter);
}

.mv-eyebrow {
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--mv-label);
	margin: 0 0 22px;
}

.mv-numeral {
	font-family: var(--mv-serif);
	font-size: 19px;
	color: var(--mv-numeral);
}

/* Buttons. One transition, three skins. */
.mv-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 0;
	border-radius: 2px;
	font-family: inherit;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.35s var(--mv-ease), color 0.35s var(--mv-ease),
		transform 0.35s var(--mv-ease), box-shadow 0.35s var(--mv-ease);
}

.mv-btn--dark {
	background: var(--mv-ink);
	color: var(--mv-paper);
}

.mv-btn--dark:hover {
	background: var(--mv-ink-hover);
	color: var(--mv-paper);
}

.mv-btn--light {
	background: var(--mv-paper);
	color: var(--mv-ink);
}

.mv-btn--light:hover {
	background: var(--mv-mist);
	color: var(--mv-ink);
}

.mv-btn--nav {
	padding: 12px 24px;
	font-size: 11px;
	letter-spacing: 0.18em;
}

.mv-btn--nav:hover {
	transform: translateY(-2px);
}

.mv-btn--lg {
	padding: 18px 40px;
	font-size: 12px;
	letter-spacing: 0.2em;
}

.mv-btn--lg:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(23, 25, 28, 0.18);
}

.mv-btn--light.mv-btn--lg {
	padding: 19px 44px;
}

.mv-btn--light.mv-btn--lg:hover {
	box-shadow: none;
}

/* --------------------------------------------------------------- Header */

.mv-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	background: rgba(242, 242, 239, 0.88);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--mv-rule-08);
}

.mv-header__inner {
	max-width: var(--mv-wrap);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 44px);
	height: var(--mv-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mv-brand {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.mv-brand__kanji {
	font-family: var(--mv-serif);
	font-size: 23px;
	letter-spacing: 0.08em;
	color: var(--mv-ink);
}

.mv-brand__latin {
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--mv-muted);
}

.mv-nav {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 34px);
}

.mv-nav__link {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mv-body);
	transition: color 0.35s var(--mv-ease);
}

.mv-nav__link:hover {
	color: var(--mv-slate);
}

/* ----------------------------------------------------------------- Main */

.mv-main {
	padding-top: var(--mv-header-h);
}

/* Without this the fixed header sits over the top of whatever section an anchor
   jumps to. The design had smooth scrolling but no offset. */
[id] {
	scroll-margin-top: calc(var(--mv-header-h) + 16px);
}

.mv-section {
	padding: clamp(72px, 9vw, 128px) var(--mv-gutter);
}

.mv-section--alt {
	background: var(--mv-paper-alt);
}

.mv-section__head {
	max-width: 640px;
	margin-bottom: clamp(44px, 6vw, 72px);
}

.mv-section__title {
	font-family: var(--mv-serif);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 54px);
	line-height: 1.18;
	color: var(--mv-ink);
	margin: 0 0 20px;
	text-wrap: balance;
}

.mv-section__lead {
	font-size: 17px;
	line-height: 1.8;
	color: var(--mv-body);
	margin: 0;
	text-wrap: pretty;
}

/* ----------------------------------------------------------------- Hero */

.mv-hero {
	position: relative;
	padding: clamp(72px, 10vw, 150px) var(--mv-gutter) clamp(64px, 8vw, 110px);
	overflow: hidden;
}

.mv-hero__glow {
	position: absolute;
	top: -160px;
	left: 50%;
	width: 720px;
	height: 720px;
	margin-left: -360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(74, 92, 116, 0.09), rgba(74, 92, 116, 0) 66%);
	pointer-events: none;
}

.mv-hero__inner {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.mv-hero__kanji {
	font-family: var(--mv-serif);
	font-size: clamp(50px, 8vw, 96px);
	line-height: 1;
	letter-spacing: 0.1em;
	color: var(--mv-ghost);
	margin-bottom: clamp(24px, 4vw, 40px);
	animation: mv-drift 9s ease-in-out infinite;
}

.mv-hero__title {
	font-family: var(--mv-serif);
	font-weight: 400;
	font-size: clamp(38px, 5.6vw, 74px);
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--mv-ink);
	margin: 0 0 24px;
	text-wrap: balance;
}

.mv-hero__lead {
	font-size: 18px;
	line-height: 1.85;
	color: var(--mv-body);
	max-width: 560px;
	margin: 0 auto 44px;
	text-wrap: pretty;
}

@keyframes mv-drift {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* ---------------------------------------------------------------- About */

.mv-about {
	padding: clamp(66px, 8vw, 116px) var(--mv-gutter);
}

.mv-about__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
}

.mv-about__title {
	font-family: var(--mv-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.8vw, 48px);
	line-height: 1.22;
	color: var(--mv-ink);
	margin: 0 0 26px;
	text-wrap: balance;
}

.mv-about__body {
	font-size: 16.5px;
	line-height: 1.9;
	color: var(--mv-body);
	margin: 0 0 18px;
	text-wrap: pretty;
}

.mv-about__body:last-child {
	margin-bottom: 0;
}

.mv-card-name {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(30px, 5vw, 60px);
	background: var(--mv-paper);
	border: 1px solid var(--mv-rule-08);
	text-align: center;
}

.mv-card-name__kanji {
	font-family: var(--mv-serif);
	font-size: clamp(52px, 7vw, 88px);
	line-height: 1.1;
	letter-spacing: 0.08em;
	color: var(--mv-ink);
}

.mv-card-name__romaji {
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--mv-faint);
	margin-top: 20px;
}

.mv-card-name__gloss {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--mv-muted);
	margin-top: 14px;
}

/* ----------------------------------------------------------- Treatments */

.mv-inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* The 1px gap over a tinted background is what draws the dividers between
   cards — there are no per-card borders to double up at the seams. */
.mv-treatments {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1px;
	background: var(--mv-rule-10);
	border: 1px solid var(--mv-rule-10);
}

.mv-treatment {
	background: var(--mv-paper);
	padding: clamp(30px, 3.4vw, 44px);
}

.mv-treatment .mv-numeral {
	display: block;
	margin-bottom: 20px;
}

.mv-treatment__title {
	font-family: var(--mv-serif);
	font-weight: 500;
	font-size: 25px;
	color: var(--mv-ink);
	margin: 0 0 14px;
}

.mv-treatment__body {
	font-size: 15px;
	line-height: 1.8;
	color: var(--mv-body-2);
	margin: 0;
}

/* ----------------------------------------------------------------- Care */

.mv-care {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(30px, 3.6vw, 56px);
}

.mv-care__item {
	border-top: 1px solid var(--mv-rule-14);
	padding-top: 26px;
}

.mv-care__item .mv-numeral {
	display: block;
	margin-bottom: 16px;
}

.mv-care__title {
	font-family: var(--mv-serif);
	font-weight: 500;
	font-size: 22px;
	color: var(--mv-ink);
	margin: 0 0 12px;
}

.mv-care__body {
	font-size: 15px;
	line-height: 1.8;
	color: var(--mv-body-2);
	margin: 0;
}

/* ------------------------------------------------------------------ FAQ */

.mv-faq {
	max-width: 820px;
	margin: 0 auto;
}

.mv-faq__head {
	text-align: center;
	margin-bottom: clamp(44px, 6vw, 64px);
}

.mv-faq__heading {
	font-family: var(--mv-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.2;
	color: var(--mv-ink);
	margin: 0;
	text-wrap: balance;
}

.mv-faq__item {
	border-top: 1px solid var(--mv-rule-12);
	padding: 22px 0;
}

.mv-faq__item:last-child {
	border-bottom: 1px solid var(--mv-rule-12);
}

.mv-faq__q {
	font-family: var(--mv-serif);
	font-weight: 500;
	font-size: 19px;
	color: var(--mv-ink);
	margin: 0 0 8px;
}

.mv-faq__a {
	font-size: 15px;
	line-height: 1.75;
	color: var(--mv-body-2);
	margin: 0;
}

/* ------------------------------------------------------------- CTA band */

.mv-cta {
	padding: clamp(76px, 10vw, 140px) var(--mv-gutter);
	background: var(--mv-ink);
	color: var(--mv-paper);
	text-align: center;
}

.mv-cta__inner {
	max-width: 640px;
	margin: 0 auto;
}

.mv-cta__title {
	font-family: var(--mv-serif);
	font-weight: 400;
	font-size: clamp(30px, 4.2vw, 52px);
	line-height: 1.18;
	color: var(--mv-paper);
	margin: 0 0 24px;
	text-wrap: balance;
}

.mv-cta :focus-visible {
	outline-color: var(--mv-mist);
}

/* --------------------------------------------------------------- Footer */

.mv-footer {
	background: var(--mv-paper-alt);
	border-top: 1px solid var(--mv-rule-08);
	padding: clamp(36px, 5vw, 52px) var(--mv-gutter);
	text-align: center;
}

.mv-footer__line {
	font-size: 12.5px;
	color: var(--mv-faint);
	margin: 0;
}

/* --------------------------------------------------------------- Reveal */

/* Hidden only once JS is confirmed, so with scripting off the page is simply
   visible rather than blank. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s var(--mv-ease), transform 0.8s var(--mv-ease);
}

.js [data-reveal]:nth-child(2) {
	transition-delay: 0.07s;
}

.js [data-reveal]:nth-child(3) {
	transition-delay: 0.14s;
}

.js [data-reveal]:nth-child(4) {
	transition-delay: 0.21s;
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Already on screen at load: show it without playing the transition, so the
   first screen is never briefly empty while the deferred script boots. */
.js [data-reveal].is-instant {
	transition: none;
}

/* ------------------------------------------------------------ Responsive */

/* The concept was drawn wide and lets the header items shrink on tracking alone,
   which overflows on a phone. Below 680px the section anchors step aside and the
   Book button — the only action that matters on this page — keeps the space. */
@media (max-width: 880px) {
	.mv-nav__link {
		font-size: 11px;
		letter-spacing: 0.1em;
	}
}

@media (max-width: 680px) {
	.mv-nav__link {
		display: none;
	}

	.mv-btn--nav {
		padding: 11px 18px;
		letter-spacing: 0.14em;
	}

	.mv-brand__kanji {
		font-size: 21px;
	}

	.mv-brand__latin {
		font-size: 10px;
		letter-spacing: 0.24em;
	}
}

@media (max-width: 400px) {
	.mv-brand__latin {
		display: none;
	}
}

/* ------------------------------------------------------- Reduced motion */

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

	.mv-hero__kanji {
		animation: none;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.mv-btn:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------ Print */

@media print {
	.mv-header,
	.mv-hero__glow {
		display: none;
	}

	.mv-main {
		padding-top: 0;
	}

	body {
		background: #fff;
	}
}