/* ==========================================================
   Yumanity theme — main stylesheet
   ========================================================== */

:root {
	--bg: #f4f6f3;
	--surface: #ffffff;
	--ink: #16212c;
	--muted: #5b6770;
	--line: #d8ded8;
	--accent: #d2334c;      /* bunga raya red */
	--accent-ink: #ffffff;
	--teal: #0e6b66;        /* straits teal */
	--teal-soft: #e3efec;
	--band-bg: #0e3f3d;
	--band-ink: #eef5f3;
	--band-muted: #a9c7c2;

	--f-display: "Bricolage Grotesque", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
	--f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
	--f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--step--1: 0.8125rem;
	--step-0: 1rem;
	--step-1: 1.25rem;
	--step-2: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
	--step-3: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);

	--gutter: clamp(16px, 4vw, 40px);
	--radius: 14px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #0f151b;
		--surface: #16202a;
		--ink: #e7ecee;
		--muted: #9aa7ae;
		--line: #26323c;
		--accent: #ff6a7e;
		--accent-ink: #16060a;
		--teal: #52c4b9;
		--teal-soft: #17302f;
		--band-bg: #0b2a29;
		--band-ink: #e7f2f0;
		--band-muted: #8fb5af;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0f151b;
	--surface: #16202a;
	--ink: #e7ecee;
	--muted: #9aa7ae;
	--line: #26323c;
	--accent: #ff6a7e;
	--accent-ink: #16060a;
	--teal: #52c4b9;
	--teal-soft: #17302f;
	--band-bg: #0b2a29;
	--band-ink: #e7f2f0;
	--band-muted: #8fb5af;
}

/* ---------- Language switching ---------- */
[data-site-lang="ja"] [data-lang="en"],
[data-site-lang="en"] [data-lang="ja"] {
	display: none !important;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: var(--step-0);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}
[data-site-lang="en"] body { line-height: 1.65; }

img { max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3 {
	font-family: var(--f-display);
	line-height: 1.3;
	text-wrap: balance;
	margin: 0;
}
p { margin: 0; }

.wrap {
	width: 100%;
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.narrow { max-width: 760px; }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	color: var(--teal);
	text-transform: uppercase;
}

.section { padding-block: clamp(64px, 9vw, 112px); }
.section-head { display: grid; gap: 10px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-title { font-size: var(--step-2); font-weight: 800; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--accent);
	transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-small { min-height: 38px; padding: 0 16px; font-size: var(--step--1); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 68px;
}
.brand {
	font-family: "Bricolage Grotesque", sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	line-height: 1;
}
.brand-yu { color: var(--accent); }
.site-nav { display: flex; gap: 24px; margin-left: 12px; }
.site-nav a {
	text-decoration: none;
	font-size: 0.9375rem;
	color: var(--muted);
}
.site-nav a:hover { color: var(--ink); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.lang-switch {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
}
.lang-btn {
	font-family: var(--f-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	min-width: 44px;
	min-height: 32px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}
.lang-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

@media (max-width: 820px) {
	.site-nav { display: none; }
}
@media (max-width: 420px) {
	.header-actions .btn-small { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 8vw, 96px) clamp(56px, 8vw, 96px); }
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.hero-copy { display: grid; gap: 22px; }
.hero-title { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.01em; }
[data-site-lang="en"] .hero-title { letter-spacing: -0.025em; line-height: 1.12; }
.hero-title em { font-style: normal; color: var(--accent); }
.hero-title .nw { white-space: nowrap; }
[data-site-lang="ja"] .hero-title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.1rem); }
.hero-lead { color: var(--muted); max-width: 34em; font-size: 1.0625rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.route-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"map map"
		"my jp"
		"facts facts";
	gap: 16px 20px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.route-map { grid-area: map; width: 100%; height: auto; display: block; }
.route-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.route-path {
	fill: none;
	stroke: var(--teal);
	stroke-width: 2;
	stroke-dasharray: 5 7;
	stroke-linecap: round;
	animation: dash 18s linear infinite;
}
.route-dot { fill: var(--accent); }
.route-dot-alt { fill: var(--teal); }
.route-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.45; }
.route-ring-alt { stroke: var(--teal); }
.route-spokes path { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0.55; }
.route-nodes circle { fill: var(--surface); stroke: var(--teal); stroke-width: 1.5; }
.map-label text { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.06em; fill: var(--muted); }
.map-label .map-label-main { font-size: 10px; font-weight: 500; fill: var(--ink); }
@keyframes dash { to { stroke-dashoffset: -240; } }
@media (prefers-reduced-motion: reduce) { .route-path { animation: none; } }

.city { display: grid; gap: 2px; }
.city-jp { grid-area: jp; text-align: right; }
.city-my { grid-area: my; }
.city-code { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; }
.city-code .coord { opacity: 0.7; }
.city-name { font-weight: 700; font-size: 1.0625rem; }
.city-time { font-size: 1.75rem; font-weight: 500; line-height: 1.2; }
.city-jp .city-time { color: var(--accent); }
.city-my .city-time { color: var(--teal); }

.route-facts {
	grid-area: facts;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 4px 0 0;
	padding-top: 16px;
	border-top: 1px dashed var(--line);
}
.route-facts dt { font-size: 0.75rem; color: var(--muted); }
.route-facts dd { margin: 0; font-weight: 500; }

@media (max-width: 860px) {
	.hero-grid { grid-template-columns: 1fr; }
	.route-card { max-width: 520px; }
}
@media (max-width: 420px) {
	.city-code .coord { display: none; }
	.city-time { font-size: 1.4rem; }
}

/* ---------- About ---------- */
.about { border-top: 1px solid var(--line); }
.about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: start;
}
.about .section-title {
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
	letter-spacing: -0.03em;
	line-height: 1;
}
.about .name-formula { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1.12; }
.about .name-formula .nw { white-space: nowrap; }
.about-body { display: grid; gap: 18px; max-width: 38em; font-size: 1.0625rem; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
.services { background: var(--surface); border-block: 1px solid var(--line); }
.service-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(36px, 5vw, 56px) clamp(32px, 5vw, 72px);
}
.service {
	display: grid;
	gap: 12px;
	align-content: start;
	padding-top: 20px;
	border-top: 2px solid var(--ink);
}
.service-tag { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--teal); }
.service h3 { font-size: var(--step-1); font-weight: 700; }
.service > p:not(.service-tag):not(.service-note) { color: var(--muted); }
.service ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.service li { position: relative; padding-left: 20px; font-size: 0.9375rem; }
.service li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 10px;
	height: 2px;
	background: var(--accent);
}
.service-note { font-size: var(--step--1); color: var(--muted); }
@media (max-width: 760px) { .service-list { grid-template-columns: 1fr; } }

/* ---------- Company ---------- */
.company-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: clamp(24px, 5vw, 72px);
}
.company .section-head { margin-bottom: 0; align-content: start; }
.profile { margin: 0; border-top: 1px solid var(--line); }
.profile > div {
	display: grid;
	grid-template-columns: 9em minmax(0, 1fr);
	gap: 16px;
	padding-block: 16px;
	border-bottom: 1px solid var(--line);
}
[data-site-lang="en"] .profile > div { grid-template-columns: 10em minmax(0, 1fr); }
.profile dt { color: var(--muted); font-size: 0.9375rem; }
.profile dd { margin: 0; }
@media (max-width: 760px) {
	.company-grid { grid-template-columns: 1fr; }
	.profile > div,
	[data-site-lang="en"] .profile > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Contact ---------- */
.contact { background: var(--band-bg); color: var(--band-ink); }
.contact .eyebrow { color: var(--band-muted); }
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: end;
}
.contact .section-title { margin-top: 10px; }
.contact-lead { margin-top: 18px; color: var(--band-muted); max-width: 32em; }
.contact-box {
	display: grid;
	gap: 6px;
	padding: 28px;
	border: 1px solid color-mix(in srgb, var(--band-ink) 22%, transparent);
	border-radius: var(--radius);
}
.contact-label { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--band-muted); }
.contact-email { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: 600; overflow-wrap: anywhere; }
.contact-email a { text-decoration-color: var(--accent); text-underline-offset: 6px; }
.contact-hours { font-size: var(--step--1); color: var(--band-muted); }
.contact-box .wpcf7 { margin-bottom: 20px; }
.contact-box input[type="text"],
.contact-box input[type="email"],
.contact-box input[type="tel"],
.contact-box textarea {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--band-ink) 30%, transparent);
	background: color-mix(in srgb, var(--band-ink) 8%, transparent);
	color: var(--band-ink);
	font: inherit;
}
.contact-box input[type="submit"] {
	min-height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { padding-block: 40px; border-top: 1px solid var(--line); }
.footer-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 20px 40px;
	align-items: center;
}
.footer-brand { display: grid; gap: 6px; }
.footer-tag { font-size: var(--step--1); color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.875rem; }
.footer-nav a { text-decoration: none; color: var(--muted); }
.footer-nav a:hover { color: var(--ink); }
.copyright { grid-column: 1 / -1; font-size: 0.75rem; color: var(--muted); font-family: var(--f-mono); }
@media (max-width: 640px) { .footer-inner { grid-template-columns: 1fr; } }

/* ---------- Generic pages ---------- */
.page-main .entry { display: grid; gap: 20px; }
.entry-date { color: var(--muted); font-size: var(--step--1); }
.entry-content > * + * { margin-top: 1em; }
.entry-content a { color: var(--teal); }