/* Mirai Japan – main stylesheet
   Japanese corporate layout from the 日本語 artboards: 1080px content column,
   navy #0F2D5C, centred EN/JA section headings, info tables, 3-step contact form. */

:root {
	--navy: #0F2D5C;
	--navy-deep: #0A1F40;
	--navy-line: #2A4A7F;
	--footer-line: #2A3F63;
	--ink: #222428;
	--muted: #5C6168;
	--line: #DDE1E6;
	--bg-2: #F4F6F8;
	--bg-3: #E9EEF5;
	--soft: #AFC0DA;
	--soft-2: #D5DEEC;
	--red: #C8102E;
	--disabled: #AEB6C2;

	--font: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
	--font-en: 'Montserrat', 'Noto Sans JP', sans-serif;

	--gutter: clamp(20px, 4.2vw, 60px);
	--content: 1080px;
	--section: clamp(64px, 6.95vw, 100px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0; background: #fff; color: var(--ink); font-family: var(--font);
	font-size: 15px; line-height: 1.9; letter-spacing: 0.03em; -webkit-font-smoothing: antialiased;
	line-break: strict; overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; transition: color .15s ease, background-color .15s ease, opacity .15s ease; }
a:hover { color: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--navy); outline-offset: 3px;
}
input, textarea, select, button { font: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-feature-settings: "palt"; word-break: auto-phrase; text-wrap: balance; }
p, dl, dd, figure, ul, ol, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
[hidden] { display: none !important; }
.screen-reader-text, .form-hp {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 12px 18px; }
.skip-link:focus { top: 12px; color: #fff; }

.container { width: 100%; max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(1080px + var(--gutter) * 2); }
.center { text-align: center; }
.muted { color: var(--muted); }
.muted-small { font-size: 14px; color: var(--muted); }
.font-en { font-family: var(--font-en); letter-spacing: 0.04em; }
.text-lead { font-size: 16px; line-height: 2.1; letter-spacing: 0.04em; }

/* Section heading: EN label / JA title / rule */
.sec-head { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; margin-bottom: 48px; }
.sec-head--center { align-items: center; text-align: center; }
.sec-head--left { align-items: flex-start; margin-bottom: 32px; }
.sec-head__en { font-family: var(--font-en); font-weight: 600; font-size: 14px; letter-spacing: 0.22em; color: var(--navy); line-height: 1.4; }
.sec-head__ja { font-size: clamp(26px, 2.36vw, 34px); font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; }

/* Icon above the label */
.sec-emblem { display: block; width: 48px; height: 48px; margin-bottom: 6px; }
.sec-emblem__disc { fill: var(--bg-3); }
.section--grey .sec-emblem__disc, .contact-band .sec-emblem__disc, .recruit-banner .sec-emblem__disc { fill: #fff; }
.sec-emblem__icon { stroke: var(--navy); }
.sec-head--left .sec-emblem { width: 44px; height: 44px; }

/* Rule: two strokes and the red dot */
.sec-head__rule { display: block; width: 88px; height: 8px; margin-top: 8px; overflow: visible; }
.sec-head__rule path { stroke: var(--navy); stroke-width: 2; stroke-dasharray: 34; stroke-dashoffset: 0; }
.sec-head__rule circle { fill: var(--red); }

/* On navy */
.sec-head--light .sec-head__en { color: var(--soft); }
.sec-head--light .sec-head__ja { color: #fff; }
.sec-head--light .sec-emblem__disc { fill: rgba(255, 255, 255, 0.1); }
.sec-head--light .sec-emblem__icon { stroke: #fff; }
.sec-head--light .sec-head__rule path { stroke: #fff; }

/* Scroll-in: gentle fade and rise */
@media (prefers-reduced-motion: no-preference) {
	.mj-js .sec-head { transition: opacity .7s ease, transform .7s ease; }
	.mj-js .sec-head:not(.is-inview) { opacity: 0; transform: translateY(12px); }
}
.label-en { font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--navy); line-height: 1.4; }
.label-en--sm { font-size: 11px; letter-spacing: 0.08em; }
.badge { display: inline-block; align-self: flex-start; font-size: 12px; padding: 3px 10px; background: var(--navy); color: #fff; line-height: 1.6; }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
	min-height: 60px; padding: 0 36px; font-size: 16px; font-weight: 700; letter-spacing: 0.06em;
	border: 1.5px solid var(--navy); line-height: 1.4;
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: #1A4280; border-color: #1A4280; color: #fff; }
.btn--outline { background: #fff; color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--wide { min-width: 280px; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--submit { width: 360px; max-width: 100%; min-height: 68px; justify-content: center; font-size: 17px; letter-spacing: 0.08em; border: 0; }
.btn--submit:disabled { background: var(--disabled); cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.link-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--navy); }
.link-more:hover { opacity: .75; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.site-header__inner { height: 96px; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1600px; margin: 0 auto; }
/* Logo: the MIRAi letters fill the lower 82% of the image (the red dot rises above them),
   so the text block is centred on the letters, not on the whole image. */
.brand { --logo-h: 42px; display: flex; align-items: center; gap: 18px; flex-shrink: 0; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__logo { display: block; height: var(--logo-h); width: auto; }
.brand__text {
	position: relative; top: calc(var(--logo-h) * 0.077);
	display: flex; flex-direction: column; justify-content: center; gap: 3px;
	height: calc(var(--logo-h) * 0.82); padding-left: 18px; border-left: 1px solid #C9CFD8;
	white-space: nowrap;
}
.brand__name { font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; color: var(--navy); }
.brand__tagline { font-family: var(--font-en); font-size: 9.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0.22em; color: var(--muted); }
.site-header__right { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 40px); }
.main-nav { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); }
.main-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-bottom: 2px solid transparent; line-height: 1.4; }
.main-nav__ja { font-size: 15px; font-weight: 500; }
.main-nav__en { font-family: var(--font-en); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); }
.main-nav a:hover .main-nav__ja, .main-nav a.is-current .main-nav__ja { color: var(--navy); }
.main-nav a.is-current, .main-nav a:hover { border-bottom-color: var(--navy); }
.lang-switch { display: flex; gap: 10px; font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--muted); }
.lang-switch a { color: var(--muted); }
.lang-switch a.is-current, .lang-switch a:hover { color: var(--navy); }
.header-contact { height: 56px; padding: 0 26px; display: flex; align-items: center; gap: 10px; background: var(--navy); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
.header-contact:hover { background: #1A4280; color: #fff; }
.menu-toggle { display: none; width: 56px; height: 56px; border: 0; background: var(--navy); color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.menu-toggle__bars { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.menu-toggle__bars span { display: block; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle__label { font-family: var(--font-en); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; line-height: 1; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto; background: #fff; padding: 8px 20px 32px; border-top: 1px solid var(--line); box-shadow: 0 12px 24px rgba(15, 45, 92, .12); display: flex; flex-direction: column; gap: 0; }
.mobile-menu__link { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 4px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 700; }
.mobile-menu__en { font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); }
.mobile-menu__langs { display: flex; gap: 20px; padding: 20px 4px; font-family: var(--font-en); font-weight: 600; }
.mobile-menu__langs a { color: var(--muted); }
.mobile-menu__langs a.is-current { color: var(--navy); border-bottom: 2px solid var(--navy); }
.mobile-menu__tel { margin-top: 16px; text-align: center; font-family: var(--font-en); font-weight: 700; color: var(--navy); }

/* Footer */
.site-footer { position: relative; background: var(--navy-deep); color: var(--soft-2); padding: 72px 0 32px; }
.site-footer a { color: var(--soft-2); }
.site-footer a:hover { color: #fff; }
.site-footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.site-footer__company { display: flex; flex-direction: column; gap: 18px; }
.site-footer__logo img { display: block; height: 56px; width: auto; }
.site-footer__name { font-size: 15px; font-weight: 700; color: #fff; }
.site-footer__address { font-size: 14px; line-height: 1.9; }
.site-footer__sitemap { display: grid; grid-template-columns: repeat(3, 160px); gap: 24px; font-size: 14px; }
.site-footer__col { display: flex; flex-direction: column; gap: 14px; line-height: 1.5; }
.site-footer__col .is-head { color: #fff; font-weight: 700; }
.site-footer__menu { display: contents; }
.site-footer__menu > li { display: flex; flex-direction: column; gap: 14px; }
.site-footer__menu > li > a { color: #fff; font-weight: 700; }
.site-footer__menu .sub-menu { display: flex; flex-direction: column; gap: 14px; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 12px; }
.site-footer__links { display: flex; gap: 28px; }
.site-footer__copy { font-family: var(--font-en); letter-spacing: 0.06em; font-size: 12px; }
.site-footer__bottom.container { margin-top: 56px; position: relative; }
.site-footer__bottom.container::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--footer-line); }
.page-top { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; background: var(--navy); color: #fff !important; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 40; }
.page-top.is-visible { opacity: 1; pointer-events: auto; }

/* Sections */
.section { padding-block: var(--section); }
.section--sm { padding-block: 64px; }
.section--flush { padding-top: 0; }
.section--grey { background: var(--bg-2); }

/* Home hero */
.hero { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 1fr); min-height: 640px; }
.hero__text { padding: 64px 60px 64px clamp(20px, 12.5vw, 180px); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.hero__en { font-family: var(--font-en); font-weight: 600; font-size: 14px; letter-spacing: 0.24em; color: var(--navy); }
.hero__title { font-size: clamp(28px, 2.9vw, 42px); font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; }
.hero__lead { font-size: 16px; line-height: 2.1; letter-spacing: 0.04em; color: var(--muted); }
.hero .btn-row { padding-top: 8px; }
.hero__photo { position: relative; }
.hero__photo img { width: 100%; height: 100%; min-height: 640px; object-fit: cover; object-position: center 60%; }
.hero__photo figcaption { position: absolute; left: 0; bottom: 0; background: var(--navy); color: #fff; padding: 14px 22px; font-size: 13px; letter-spacing: 0.06em; }

/* News */
.news-top__inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 60px; }
.news-top__head { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.news-list { border-top: 1px solid var(--line); }
.news-list__item { border-bottom: 1px solid var(--line); }
.news-row { display: grid; grid-template-columns: 100px 170px minmax(0, 1fr) 20px; gap: 20px; align-items: center; padding: 22px 8px; }
.news-row:hover { background: var(--bg-2); color: var(--ink); }
.news-row__date { font-family: var(--font-en); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.news-row__cat { justify-self: start; font-size: 12px; padding: 3px 10px; border: 1px solid var(--navy); color: var(--navy); line-height: 1.6; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.news-row__title { font-size: 15px; line-height: 1.7; }
.news-row__arrow { color: var(--navy); }

/* Services (home) */
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 56px; }
.service-card { background: #fff; padding: 44px 44px 40px; display: flex; flex-direction: column; gap: 18px; }
.service-card__head { display: flex; align-items: center; gap: 20px; }
.service-card__illust { flex-shrink: 0; width: 88px; height: 88px; }
.icon-box { width: 60px; height: 60px; flex-shrink: 0; background: var(--bg-3); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.service-card__titles { display: flex; flex-direction: column; gap: 4px; }
.service-card__title { font-size: clamp(20px, 1.67vw, 24px); font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; }
.service-card__body { font-size: 15px; line-height: 2; flex-grow: 1; }
.service-card__more { align-self: flex-end; }

/* Strength points */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; border-bottom: 1px solid var(--line); }
.point { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 28px; padding: 36px 0; border-top: 1px solid var(--line); }
.point__badge { position: relative; width: 104px; height: 104px; }
.point__badge .il { width: 104px; height: 104px; }
.point__num {
	position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
	padding: 3px 10px; background: var(--navy); color: #fff; white-space: nowrap;
	font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.4;
}
.point__text { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.point__text h3 { font-size: 22px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.5; }
.point__text p { font-size: 15px; line-height: 2; color: var(--muted); }

/* Flow */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; counter-reset: flow; }
.flow__step { position: relative; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.flow__step:not(:last-child)::after {
	content: ""; position: absolute; top: 50%; right: -20px; width: 10px; height: 10px;
	border-top: 2px solid var(--navy); border-right: 2px solid var(--navy); transform: translateY(-50%) rotate(45deg);
}
.flow__n { font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--navy); line-height: 1.4; }
.flow__name { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; }
.flow__body { font-size: 14px; line-height: 1.85; color: var(--muted); }
.flow__note { margin-top: 48px; text-align: center; font-size: 14px; color: var(--muted); }

/* Numbers */
.numbers { background: var(--navy); padding-block: 80px; }
.numbers .sec-head { margin-bottom: 44px; }
.numbers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numbers__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.numbers__item + .numbers__item { border-left: 1px solid var(--navy-line); }
.numbers__item dt { font-size: 14px; letter-spacing: 0.1em; color: var(--soft); }
.numbers__item dd { display: flex; align-items: baseline; gap: 6px; color: #fff; line-height: 1.2; white-space: nowrap; }
.numbers__item strong { font-family: var(--font-en); font-weight: 700; font-size: clamp(30px, 3.1vw, 46px); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.numbers__item span { font-size: 16px; font-weight: 700; }

/* Partners */
.logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.logo-grid__item { height: 120px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 8px; }
.logo-grid__name { font-family: var(--font-en); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: 0.01em; }
.logo-grid__item.is-long .logo-grid__name { font-size: 20px; }
.logo-grid__kind { font-size: 11px; color: var(--muted); line-height: 1.4; }
.logo-grid__kind.is-partner { color: var(--navy); }
.logo-grid__note { margin-top: 14px; text-align: right; font-size: 12px; color: var(--muted); }

/* Recruit banner */
.recruit-banner { display: grid; grid-template-columns: 560px minmax(0, 1fr); background: var(--bg-2); }
.recruit-banner img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.recruit-banner__text { padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; gap: 22px; align-items: flex-start; }
.recruit-banner__text .sec-head { margin-bottom: 0; }
.recruit-banner__text p { font-size: 15px; line-height: 2; }

/* Contact band */
.contact-band { background: var(--bg-3); padding-block: 90px; }
.contact-band .sec-head { margin-bottom: 40px; }
.contact-band__lead { text-align: center; font-size: 16px; line-height: 2; letter-spacing: 0.04em; margin-bottom: 40px; }
.contact-band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.contact-card { background: #fff; padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.contact-card__label { font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--navy); }
.contact-card__main { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 700; }
.contact-card__tel { font-family: var(--font-en); font-size: 24px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.contact-card__mail { font-family: var(--font-en); font-size: 20px; font-weight: 600; letter-spacing: 0.01em; word-break: break-all; }
.contact-card__note { font-size: 13px; color: var(--muted); }
.contact-card--primary { background: var(--navy); color: #fff; }
.contact-card--primary:hover { background: #1A4280; color: #fff; }
.contact-card--primary .contact-card__label { color: var(--soft); }
.contact-card--primary .contact-card__note { color: var(--soft-2); }

/* Sub-page hero + breadcrumb */
.page-hero { background: var(--bg-2); min-height: 260px; display: flex; align-items: center; padding-block: 48px; }
.page-hero .container { display: flex; flex-direction: column; gap: 10px; }
.page-hero__en { font-family: var(--font-en); font-weight: 700; font-size: clamp(36px, 3.9vw, 56px); letter-spacing: 0.08em; color: var(--navy); line-height: 1.2; }
.page-hero__ja { font-size: 20px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; }
.breadcrumb { border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 56px; padding-block: 12px; line-height: 1.5; }
.breadcrumb li + li::before { content: "＞"; margin-right: 12px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); }

/* Services page */
.anchor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.anchor-card { background: #fff; border: 1px solid var(--line); padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.anchor-card:hover { border-color: var(--navy); }
.anchor-card .label-en { font-size: 11px; letter-spacing: 0.14em; }
.anchor-card__title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.anchor-card__icon { color: var(--navy); transform: rotate(90deg); display: flex; }
.service-detail { padding-block: 90px; }
.service-detail__inner { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 60px; }
.service-detail .sec-head { margin-bottom: 0; }
.service-detail .sec-head__en { font-size: 13px; letter-spacing: 0.2em; }
.service-detail .sec-head__ja { font-size: clamp(24px, 2.1vw, 30px); letter-spacing: 0.05em; }
.service-detail__body { display: flex; flex-direction: column; gap: 32px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.topline-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.topline-card h3 { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; }
.topline-card p { font-size: 14px; line-height: 1.9; color: var(--muted); flex-grow: 1; }
.def-list { border-top: 1px solid var(--line); }
.def-list > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); padding: 20px 0; border-bottom: 1px solid var(--line); gap: 16px; }
.def-list dt { font-weight: 700; color: var(--navy); }
.list-card { background: #fff; border: 1px solid var(--line); padding: 26px; }
.list-card h3 { margin-bottom: 14px; font-size: 18px; font-weight: 700; color: var(--navy); }
.list-card ul { list-style: disc; padding-left: 20px; font-size: 15px; line-height: 2.1; }
.info-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.info-table th { width: 240px; text-align: left; vertical-align: top; padding: 20px 24px; background: var(--bg-3); font-weight: 700; border-bottom: 1px solid #fff; letter-spacing: 0.06em; }
.info-table td { padding: 20px 24px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.9; }
.info-table--white { background: #fff; }
.info-table--white th, .info-table--white td { padding: 24px 28px; }
.info-table--white td { font-size: 16px; }
.info-table--compact th { width: 200px; }
.contract-card { border: 1.5px solid var(--navy); padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.contract-card h3 { font-size: 22px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.5; }
.contract-card p { font-size: 14px; line-height: 1.9; color: var(--muted); }

/* Company page */
.split-media { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: start; }
.split-media--center { align-items: center; grid-template-columns: minmax(0, 1fr) 520px; }
.split-media__text { display: flex; flex-direction: column; gap: 28px; }
.split-media__text .sec-head { margin-bottom: 4px; }
.split-media__figure { display: flex; flex-direction: column; gap: 10px; }
.split-media__figure img { width: 100%; height: 340px; object-fit: cover; }
.split-media__figure figcaption { font-size: 13px; color: var(--muted); }
.split-media__img { width: 100%; height: 340px; object-fit: cover; }
.motto { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; color: var(--navy); display: flex; flex-direction: column; gap: 4px; }
.motto__en { font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; color: var(--muted); }
.goal-list { border-top: 1px solid var(--line); }
.goal-list li { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.6; }
.goal-list__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--bg-3); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.officers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; gap: 24px; margin-bottom: 48px; }
.officer { border: 1px solid var(--line); display: flex; flex-direction: column; }
.officer__photo { position: relative; height: 220px; overflow: hidden; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 700; font-size: 44px; letter-spacing: 0.06em; color: var(--navy); }
.officer__art { position: absolute; inset: 10px 0; width: 100%; height: calc(100% - 20px); }
.officer__ring { fill: none; stroke: var(--navy); stroke-width: 1; stroke-dasharray: 3 6; opacity: .5; }
.officer__orbit { transform-box: view-box; transform-origin: 100px 100px; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.officer:hover .officer__orbit { transform: rotate(120deg); }
.officer__initials { position: relative; }
.officer__portrait { position: relative; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(15, 45, 92, .15); background: #fff; }
.officer__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--focus-y, 35%); transition: transform .5s ease; }
.officer:hover .officer__portrait img { transform: scale(1.06); }
.officer { transition: transform .25s ease, box-shadow .25s ease; }
.officer:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 45, 92, .08); }
.officer__text { padding: 24px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.officer__role { font-size: 13px; color: var(--navy); font-weight: 700; }
.officer__role span { font-family: var(--font-en); font-weight: 600; margin-left: 8px; letter-spacing: 0.1em; }
.officer__name { font-size: 22px; font-weight: 700; }
.related-box { border: 1.5px solid var(--navy); padding: 44px 48px; display: grid; grid-template-columns: 300px minmax(0, 1fr) 140px; gap: 48px; align-items: center; }
.related-box__illust { line-height: 0; }
.related-box__head { display: flex; flex-direction: column; gap: 10px; }
.related-box__head .label-en { letter-spacing: 0.18em; }
.related-box h2 { font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; }
.related-box a { font-family: var(--font-en); font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: underline; }
.related-box p { font-size: 15px; line-height: 2.1; }
.access { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
.access__map { min-height: 360px; background: #fff; border: 1px solid var(--line); }
.access__map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
.access__info { display: flex; flex-direction: column; gap: 22px; font-size: 15px; line-height: 1.9; }
.access__info dt { font-weight: 700; color: var(--navy); }
.access__info .font-en { font-size: 14px; }

/* Recruit page */
.positions { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
.positions__list { display: flex; flex-direction: column; gap: 8px; }
.position-btn { width: 100%; text-align: left; border: 1px solid var(--line); padding: 16px 20px; background: #fff; color: var(--ink); display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.position-btn:hover { border-color: var(--navy); }
.position-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.position-btn__name { font-size: 16px; font-weight: 700; }
.position-btn__sub { font-size: 12px; color: var(--muted); }
.position-btn[aria-pressed="true"] .position-btn__sub { color: var(--soft); }
.positions__detail { position: sticky; top: 120px; }
.position { background: #fff; padding: 40px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.position__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.position__head h3 { font-size: 26px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; }
.position .info-table a { color: var(--navy); text-decoration: underline; }
.culture figure { display: flex; flex-direction: column; gap: 14px; }
.culture img { width: 100%; height: 220px; object-fit: cover; }
.culture figcaption { display: flex; flex-direction: column; gap: 6px; }
.culture strong { font-size: 18px; }
.culture figcaption span { font-size: 14px; line-height: 1.8; color: var(--muted); }
.activity-box { margin-top: 48px; background: var(--bg-2); padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; }
.activity-box h3 { font-size: 15px; font-weight: 700; color: var(--navy); }
.activity-box__list { display: flex; flex-wrap: wrap; gap: 10px; }
.activity-box__list li { padding: 12px 20px; background: #fff; border: 1px solid var(--line); font-size: 15px; font-weight: 500; line-height: 1.5; }

/* Contact page */
.contact-page .text-lead { margin-bottom: 40px; }
.contact-direct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 56px; }
.contact-direct > div { border: 1px solid var(--line); padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; line-height: 1.5; }
.contact-direct span { font-weight: 700; }
.contact-direct a { font-size: 20px; font-weight: 700; color: var(--navy); }
.stepper { display: flex; gap: 4px; margin-bottom: 40px; }
.stepper li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; background: var(--bg-2); color: var(--muted); font-weight: 700; line-height: 1.3; }
.stepper li .font-en { font-size: 13px; }
.stepper li span:last-child { font-size: 16px; }
.stepper li.is-current { background: var(--navy); color: #fff; }
.notice { padding: 16px 20px; margin-bottom: 32px; border: 1px solid; line-height: 1.8; }
.notice--error { border-color: var(--red); color: var(--red); background: #FDF3F4; }
.form-table { border-top: 2px solid var(--navy); }
.form-row { display: grid; grid-template-columns: 280px minmax(0, 1fr); border-bottom: 1px solid var(--line); margin: 0; padding: 0; border-inline: 0; min-width: 0; }
fieldset.form-row { border-top: 0; }
.form-row__label { background: var(--bg-3); padding: 24px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 700; line-height: 1.6; float: left; width: 100%; height: 100%; }
.form-row__label label, .form-row__label > span:first-child { padding-top: 10px; }
.req, .opt { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 2px 8px; line-height: 1.6; margin-top: 12px; }
.req { background: var(--red); color: #fff; }
.opt { background: #fff; color: var(--muted); border: 1px solid var(--line); }
.form-row__field { padding: 16px 28px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.form-row__field--radios { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 28px; row-gap: 0; }
.form-row__field input[type="text"], .form-row__field input[type="email"], .form-row__field input[type="tel"], .form-row__field textarea {
	width: 100%; height: 52px; padding: 0 16px; border: 1px solid #C3CAD3; background: #fff; font-size: 16px; color: var(--ink); border-radius: 0;
}
.form-row__field textarea { height: auto; padding: 14px 16px; line-height: 1.8; resize: vertical; }
.form-row__field ::placeholder { color: #9AA1AA; }
.has-error input, .has-error textarea { border-color: var(--red); background: #FDF3F4; }
.radio { display: flex; align-items: center; gap: 8px; font-size: 15px; min-height: 44px; line-height: 1.5; }
.radio input, .agree input { width: 18px; height: 18px; accent-color: var(--navy); margin: 0; }
.field-note { font-size: 13px; color: var(--muted); }
.field-error { font-size: 13px; color: var(--red); font-weight: 700; flex-basis: 100%; }
.privacy { margin: 40px 0; display: flex; flex-direction: column; gap: 16px; }
.privacy h2 { font-size: 18px; font-weight: 700; }
.privacy__body { height: 150px; overflow-y: auto; padding: 20px 24px; border: 1px solid var(--line); background: var(--bg-2); font-size: 14px; line-height: 1.9; color: var(--muted); }
.privacy__body p + p { margin-top: 0.8em; }
.agree { align-self: center; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; min-height: 44px; }
.agree input { width: 22px; height: 22px; }
.agree .req { margin-top: 0; }
.form-table--confirm { width: 100%; border-collapse: collapse; margin-block: 32px 48px; }
.form-table--confirm th { width: 280px; text-align: left; vertical-align: top; background: var(--bg-3); padding: 20px 24px; border-bottom: 1px solid #fff; }
.form-table--confirm td { padding: 20px 28px; border-bottom: 1px solid var(--line); line-height: 1.9; }
.confirm-actions { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.confirm-actions form { display: contents; }
.confirm-actions .btn { min-height: 68px; }
.complete { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-block: 40px; }
.complete h2 { font-size: 26px; font-weight: 700; letter-spacing: 0.06em; color: var(--navy); }
.complete a:not(.btn) { color: var(--navy); text-decoration: underline; }

/* Entry content */
.entry { font-size: 16px; line-height: 2; }
.entry > * + * { margin-top: 1.2em; }
.entry h2 { font-size: 24px; padding: 12px 0 12px 18px; border-left: 4px solid var(--navy); background: var(--bg-2); margin-top: 2em; }
.entry h3 { font-size: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--line); margin-top: 1.8em; }
.entry a { color: var(--navy); text-decoration: underline; }
.entry ul { list-style: disc; padding-left: 1.4em; }
.entry ol { list-style: decimal; padding-left: 1.4em; }
.entry table { width: 100%; border-collapse: collapse; }
.entry th, .entry td { border: 1px solid var(--line); padding: 12px 16px; }
.entry th { background: var(--bg-3); }
.entry p:has(> img:only-child) { display: inline-block; margin-right: 12px; }
.entry .alignleft { float: left; margin: 0 24px 16px 0; }
.entry .alignright { float: right; margin: 0 0 16px 24px; }
.entry .aligncenter { margin-inline: auto; }
.entry-meta { display: flex; gap: 16px; align-items: center; margin-bottom: 32px; color: var(--muted); }
.entry-thumb { margin-bottom: 32px; }
.post-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.post-nav__next { text-align: right; }
.post-nav a:not(.btn) { color: var(--navy); font-weight: 700; }
.post-nav .btn { justify-content: center; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); font-family: var(--font-en); }
.pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Responsive */
@media (max-width: 1240px) {
	.lang-switch { display: none; }
	.main-nav { gap: 20px; }
	.recruit-banner { grid-template-columns: 45% minmax(0, 1fr); }
	.flow { gap: 20px; }
	.flow__step:not(:last-child)::after { right: -15px; }
}

@media (max-width: 1024px) {
	.main-nav, .header-contact { display: none; }
	.menu-toggle { display: inline-flex; }
	.site-header__inner { height: 72px; padding-right: 0; }
	.brand { --logo-h: 36px; gap: 14px; }
	.brand__text { padding-left: 14px; }
	.hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.hero__text { padding: 56px var(--gutter); order: 2; }
	.hero__photo img { min-height: 0; height: 52vw; max-height: 480px; }
	.news-top__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.news-top__head { flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
	.news-top__head .sec-head { margin-bottom: 0; }
	.points { grid-template-columns: minmax(0, 1fr); }
	.flow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.flow__step:not(:last-child)::after { top: auto; bottom: -19px; right: 50%; transform: translateX(50%) rotate(135deg); }
	.anchor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.service-detail__inner, .split-media, .split-media--center, .related-box, .access, .positions { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.positions__detail { position: static; }
	.recruit-banner { grid-template-columns: minmax(0, 1fr); }
	.recruit-banner img { min-height: 0; height: 280px; }
	.site-footer__top { flex-direction: column; }
}

@media (max-width: 767px) {
	body { font-size: 15px; }
	.site-header__inner { height: 64px; }
	.brand { --logo-h: 30px; }
	.brand__text { display: none; }
	.menu-toggle { width: 64px; height: 64px; }
	.sec-head { margin-bottom: 32px; }
	.sec-emblem, .sec-head--left .sec-emblem { width: 40px; height: 40px; }
	.hero__title { font-size: 26px; }
	.hero__title br { display: none; }
	.btn-row { flex-direction: column; }
	.btn-row .btn, .btn--wide { width: 100%; min-width: 0; }
	.news-row { grid-template-columns: auto 1fr 16px; gap: 6px 12px; padding: 18px 4px; }
	.news-row__date { grid-column: 1; }
	.news-row__cat { grid-column: 2; }
	.news-row__title { grid-column: 1 / 3; grid-row: 2; }
	.news-row__arrow { grid-column: 3; grid-row: 1 / 3; }
	.service-grid, .card-grid-3, .card-grid-2, .officers, .contact-band__grid, .contact-direct, .logo-grid { grid-template-columns: minmax(0, 1fr); }
	.logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.logo-grid__item { height: 96px; }
	.logo-grid__name { font-size: 20px; }
	.logo-grid__item.is-long .logo-grid__name { font-size: 15px; }
	.service-card { padding: 28px 24px; }
	.point { grid-template-columns: 80px minmax(0, 1fr); gap: 18px; padding: 28px 0; }
	.point__badge, .point__badge .il { width: 80px; height: 80px; }
	.point__num { font-size: 9.5px; padding: 2px 7px; }
	.service-card__illust, .service-card__illust .il { width: 72px; height: 72px; }
	.point__text h3 { font-size: 19px; }
	.numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.numbers__item:nth-child(3) { border-left: 0; }
	.recruit-banner__text { padding: 32px 24px; }
	.contact-band { padding-block: 64px; }
	.contact-band__lead { text-align: left; }
	.anchor-grid { grid-template-columns: minmax(0, 1fr); }
	.service-detail { padding-block: 64px; }
	.def-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.info-table th, .info-table td, .form-table--confirm th, .form-table--confirm td { display: block; width: 100%; }
	.info-table th, .form-table--confirm th { padding: 12px 16px; }
	.info-table td, .form-table--confirm td { padding: 14px 16px 18px; border-bottom: 0; }
	.info-table--white th, .info-table--white td { padding-inline: 16px; }
	.split-media__figure img, .split-media__img { height: 240px; }
	.officer__photo { height: 160px; }
	.related-box { padding: 28px 24px; }
	.position { padding: 24px 20px; }
	.form-row { grid-template-columns: minmax(0, 1fr); }
	.form-row__label { padding: 12px 16px; justify-content: flex-start; }
	.form-row__label label, .form-row__label > span:first-child { padding-top: 0; }
	.req, .opt { margin-top: 2px; }
	.form-row__field { padding: 14px 0 20px; }
	.stepper li { flex-direction: column; gap: 0; height: 60px; }
	.site-footer__sitemap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.site-footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
	.post-nav { grid-template-columns: 1fr 1fr; }
	.post-nav .btn { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Media Library & posts ---------- */
.hero__photo img { max-width: none; }
.logo-grid__item { gap: 8px; }
.logo-grid__logo { height: 64px; display: flex; align-items: center; justify-content: center; }
.logo-grid__logo img { max-width: 180px; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.recruit-banner__img, .recruit-banner__img img { width: 100%; height: 100%; }
.recruit-banner__img img { min-height: 380px; object-fit: cover; }
.split-media__img img { width: 100%; height: 340px; object-fit: cover; }
.btn--pdf { margin-top: 12px; align-self: flex-start; min-height: 52px; font-size: 14px; padding: 0 24px; }
.related-box__logo { width: 180px; margin-bottom: 8px; }
.related-box__logo img { width: 100%; height: auto; }
.access__photo img { width: 100%; height: 200px; object-fit: cover; }
.position__media { margin: -40px -40px 0; width: calc(100% + 80px); }
.position__media img { width: 100%; height: 220px; object-fit: cover; }
.position .btn-row { width: 100%; }
.news-row--thumb { grid-template-columns: 150px 100px 170px minmax(0, 1fr) 20px; }
.news-row__thumb { width: 150px; aspect-ratio: 4 / 3; background: var(--bg-2); overflow: hidden; }
.news-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); height: 100%; }
.post-card:hover { border-color: var(--navy); color: var(--ink); }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.post-card__meta { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); }
.post-card__title { font-weight: 700; line-height: 1.6; }
.apply-box { margin-top: 48px; padding: 28px 32px; background: var(--bg-3); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.apply-box a:not(.btn) { color: var(--navy); text-decoration: underline; }
.entry p:has(> img:only-child), .entry p:has(> a:only-child > img) { display: inline-block; width: calc(50% - 8px); margin: 16px 0 0; vertical-align: top; }
.entry p:has(> img:only-child):nth-of-type(odd), .entry p:has(> a:only-child > img):nth-of-type(odd) { margin-right: 12px; }
.entry p:has(> img:only-child) img, .entry p:has(> a:only-child > img) img { width: 100%; height: clamp(180px, 24vw, 340px); object-fit: cover; }
.entry-thumb img { width: 100%; max-height: 620px; object-fit: cover; }

@media (max-width: 1024px) {
	.recruit-banner__img img { min-height: 0; height: 280px; }
	.position__media { margin: -40px -40px 0; }
}
@media (max-width: 767px) {
	.news-row--thumb { grid-template-columns: 96px auto 1fr 16px; }
	.news-row--thumb .news-row__thumb { width: 96px; grid-row: 1 / 3; grid-column: 1; }
	.news-row--thumb .news-row__date { grid-column: 2; }
	.news-row--thumb .news-row__cat { grid-column: 3; }
	.news-row--thumb .news-row__title { grid-column: 2 / 4; }
	.news-row--thumb .news-row__arrow { grid-column: 4; }
	.split-media__img img { height: 240px; }
	.position__media { margin: -24px -20px 0; width: calc(100% + 40px); }
	.entry p:has(> img:only-child), .entry p:has(> a:only-child > img) { width: 100%; margin-right: 0 !important; }
	.logo-grid__logo img { max-width: 120px; max-height: 44px; }
}

/* ---------- Latin languages (EN / VI) ---------- */
body.lang-en, body.lang-vi {
	--font: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	letter-spacing: 0;
	line-height: 1.75;
	line-break: auto;
	overflow-wrap: break-word;
}
.lang-en h1, .lang-en h2, .lang-en h3, .lang-vi h1, .lang-vi h2, .lang-vi h3 { word-break: normal; }
.lang-en .sec-head__ja, .lang-vi .sec-head__ja,
.lang-en .page-hero__ja, .lang-vi .page-hero__ja,
.lang-en .service-card__title, .lang-vi .service-card__title,
.lang-en .point__text h3, .lang-vi .point__text h3,
.lang-en .flow__name, .lang-vi .flow__name,
.lang-en .goal-list li, .lang-vi .goal-list li,
.lang-en .motto, .lang-vi .motto { letter-spacing: 0; }
.lang-en .hero__title, .lang-vi .hero__title { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.3; letter-spacing: -0.01em; }
.lang-en .hero__lead, .lang-vi .hero__lead,
.lang-en .text-lead, .lang-vi .text-lead,
.lang-en .contact-band__lead, .lang-vi .contact-band__lead { letter-spacing: 0; line-height: 1.8; }
.lang-en .btn, .lang-vi .btn { letter-spacing: 0.02em; }
.lang-en .main-nav__ja, .lang-vi .main-nav__ja { white-space: nowrap; }
.lang-en .main-nav__en, .lang-en .mobile-menu__en { display: none; }
.lang-en .point__text p, .lang-en .service-card__body, .lang-vi .point__text p, .lang-vi .service-card__body { line-height: 1.75; }
.lang-en .motto__en { display: none; }

/* ---------- Duotone illustrations (service cards, STRENGTH points) ---------- */
.il { display: block; overflow: visible; }
.il-bg { fill: var(--bg-3); }
.il-card { fill: #fff; }
.il-line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.il-card.il-line { fill: #fff; }
.il-soft { fill: none; stroke: #AFC0DA; stroke-width: 1.4; stroke-linecap: round; }
.il-navy { fill: var(--navy); }
.il-red { fill: var(--red); }
.il-red-line { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.il-thick { stroke-width: 3.2; }
.il-dash { stroke-dasharray: 4 4; }
.il-dash-soft { stroke-dasharray: 3 3; }
.il-ring { stroke: #fff; stroke-width: 2; }
.il-ring-white { stroke: #fff; stroke-width: 2.5; }
.il-label { font-family: var(--font-en); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; fill: var(--navy); }
.il-medal { font-family: var(--font-en); font-size: 10px; font-weight: 800; fill: #fff; text-anchor: middle; }
.il--point .il-bg { fill: var(--bg-3); }
.service-card:hover .il--service, .point:hover .il--point { transform: translateY(-3px); }
.il--service, .il--point { transition: transform .3s ease; }
@media (prefers-reduced-motion: no-preference) {
	.il-dash { animation: mj-dash 1.6s linear infinite; }
}
@keyframes mj-dash { to { stroke-dashoffset: -16; } }

/* ---------- Services page: art, icons, scroll-in ---------- */
.page-hero .container { position: relative; }
.page-hero__art { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(540px, 46%); pointer-events: none; }
.hero-art { width: 100%; height: auto; }
.hero-art__link { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: .55; }
.hero-art__packet { fill: var(--red); offset-rotate: 0deg; offset-distance: 0%; }
.anchor-card { align-items: flex-start; gap: 8px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.anchor-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 45, 92, .08); }
.anchor-card__illust .il { width: 64px; height: 64px; margin-bottom: 6px; }
.service-detail__side { display: flex; flex-direction: column; gap: 28px; }
/* The large illustration already represents the service: no small icon above the label. */
.service-detail .sec-emblem { display: none; }
.service-detail__illust .il { width: 168px; height: 168px; }
.topline-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-3); color: var(--navy); margin-bottom: 4px; }
.section--grey .topline-card__icon { background: var(--bg-2); }
.def-list dt { display: flex; align-items: center; gap: 10px; }
.def-list__icon { flex-shrink: 0; color: var(--navy); }
.list-card h3 { display: flex; align-items: center; gap: 10px; }
.list-card__icon { flex-shrink: 0; }
.tech-th { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.tech-th .line-icon { color: var(--navy); flex-shrink: 0; }
.contract-card__icon { color: var(--navy); line-height: 0; margin-bottom: 4px; }
.contract-card { transition: transform .25s ease, box-shadow .25s ease; }
.contract-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 45, 92, .08); }

@media (prefers-reduced-motion: no-preference) {
	/* Hero: nodes appear one after another, links flow, a packet travels along them */
	.hero-art__node { opacity: 0; transform: translateY(8px); transform-box: fill-box; animation: mj-node .7s ease forwards; animation-delay: calc(var(--d, 0) * .18s + .2s); }
	.hero-art__link { animation: mj-dash-flow 1.8s linear infinite; }
	.hero-art__packet { animation: mj-packet 5.5s cubic-bezier(.45, .05, .55, .95) 1s infinite; }

	/* Scroll-in */
	.mj-js .mj-reveal { transition: opacity .6s ease calc(var(--d, 0) * .1s), transform .6s ease calc(var(--d, 0) * .1s); }
	.mj-js .mj-reveal:not(.is-inview) { opacity: 0; transform: translateY(16px); }

	/* Illustrations draw their outlines when they scroll in */
	.mj-js .mj-draw .il-drawable { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.45, .05, .25, 1) .15s; }
	.mj-js .mj-draw.is-inview .il-drawable { stroke-dashoffset: 0; }
	.service-detail__illust .il { animation: mj-float 6s ease-in-out infinite; }
}
@keyframes mj-node { to { opacity: 1; transform: none; } }
@keyframes mj-dash-flow { to { stroke-dashoffset: -22; } }
@keyframes mj-packet { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes mj-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 1024px) {
	.page-hero__art { display: none; }
	.service-detail__side { flex-direction: row; align-items: center; justify-content: space-between; }
	.service-detail__illust .il { width: 120px; height: 120px; }
}
@media (max-width: 767px) {
	.service-detail__illust .il { width: 88px; height: 88px; }
	.anchor-card__illust .il { width: 52px; height: 52px; }
}

/* ---------- Company page ---------- */
.il-label--mid { text-anchor: middle; }
/* Philosophy: the sunrise is the section's picture, so the heading icon is dropped there. */
#philosophy .sec-emblem { display: none; }
.motto-wrap { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: var(--bg-2); border-left: 3px solid var(--navy); }
.sunrise { display: block; flex-shrink: 0; width: 72px; height: 27px; overflow: visible; }
.sunrise__sun { fill: var(--red); }
.sunrise__rays { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; opacity: .8; }
.sunrise__line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.sunrise__line--soft { display: none; }
.access__info dt { display: flex; align-items: center; gap: 8px; }
.access__info dt .line-icon { color: var(--navy); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
	.mj-js .motto-wrap:not(.is-inview) .sunrise__sun { transform: translateY(18px); }
	.mj-js .motto-wrap:not(.is-inview) .sunrise__rays { opacity: 0; }
	.sunrise__sun { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) .2s; }
	.sunrise__rays { transition: opacity .8s ease 1.1s; }
	.officer__ring { animation: mj-dash-flow 6s linear infinite; }
}
@media (max-width: 1024px) {
	.related-box { grid-template-columns: minmax(0, 1fr); }
	.related-box__illust { justify-self: start; }
}