/* ==========================================================================
   MC Employment Service — Layer 3: sections and components
   Part of a three-layer stylesheet. Load order matters:
     1-tokens.css  ->  2-base.css  ->  3-components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t), border-color var(--t);
}
.site-header.is-stuck { box-shadow: var(--e2); }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 76px;
}

.brand { display: flex; align-items: center; gap: .75rem; flex: none; }
.brand__mark { width: 42px; height: 42px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand__name {
  font-family: var(--f-display);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--navy-800);
  line-height: 1.25;
  white-space: nowrap;
}
.brand__sub {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.nav { margin-inline-start: auto; }
/* Seven items in five scripts. Lao is the widest set, and the whole bar
   (brand + nav + language + CTA) must still fit at the breakpoint below —
   measured, not guessed. */
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, 1.1vw, 1.125rem); }
.nav__link {
  display: block;
  padding: .5rem .1875rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  white-space: nowrap;          /* JP/KR/Lao labels must never break mid-word */
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: .25rem; right: .25rem; bottom: 0;
  height: 2px;
  background: var(--red-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav__link:hover { color: var(--navy-800); }
.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { color: var(--navy-800); font-weight: 600; }

.header__actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.header__cta { min-height: 42px; padding: .625rem 1.125rem; font-size: .875rem; }

/* language switcher */
.lang { position: relative; }
.lang__toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 42px; padding: .5rem .8125rem;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  font-size: .875rem; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.lang__toggle:hover { border-color: var(--navy-800); background: var(--paper-2); }
/* Flags, not letters: a Japanese employer finds the language by its flag
   faster than by a two-letter code. The native name stays beside it so the
   flag never has to carry the meaning alone. */
.flag {
  width: 100%; height: 100%;
  display: block;
  border-radius: 2px;
}
.lang__flag {
  width: 24px; height: 16px;
  flex: none;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11, 31, 58, .18);
}
.lang__item .lang__flag { width: 26px; height: 17px; }
.lang__chev { width: 12px; height: 12px; flex: none; transition: transform var(--t); }
.lang__toggle[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: var(--z-menu);
  min-width: 208px;
  padding: .375rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  box-shadow: var(--e3);
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.lang__menu.is-open { opacity: 1; transform: none; pointer-events: auto; }

.lang__item {
  display: flex; align-items: center; gap: .75rem;
  width: 100%;
  padding: .625rem .75rem;
  min-height: 44px;
  background: transparent; border: 0;
  border-radius: var(--r2);
  font-size: .9375rem; text-align: start;
  cursor: pointer;
  transition: background var(--t-fast);
}
.lang__item:hover { background: var(--paper-3); }
.lang__item[aria-selected="true"] { font-weight: 600; color: var(--navy-800); }
.lang__native { flex: 1; }
.lang__check { width: 16px; height: 16px; flex: none; color: var(--red-600); opacity: 0; }
.lang__item[aria-selected="true"] .lang__check { opacity: 1; }

/* mobile menu button */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--r2); cursor: pointer;
}
.burger__bars { width: 20px; height: 14px; position: relative; }
.burger__bars span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--navy-800); border-radius: 2px;
  transition: transform var(--t), opacity var(--t-fast);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 6px; }
.burger__bars span:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero — the layered-depth moment
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}
/* Layer 2: directional scrim. Text sits on the dense side. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(76deg,
      rgba(5, 16, 30, .975) 0%,
      rgba(5, 16, 30, .94)  38%,
      rgba(5, 16, 30, .78)  58%,
      rgba(5, 16, 30, .52)  78%,
      rgba(5, 16, 30, .42)  100%),
    linear-gradient(to top, rgba(5, 16, 30, .55) 0%, transparent 26%),
    radial-gradient(120% 90% at 8% 8%, rgba(27, 66, 105, .50) 0%, transparent 62%);
}

.hero__inner {
  display: grid;
  gap: var(--s4);
  padding-block: clamp(4.5rem, 11vw, 9rem) clamp(6.5rem, 12vw, 10rem);
  max-width: 54rem;
}

.hero__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sand-300);
  line-height: 1.6;
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
}
html:not([lang="en"]) .hero__eyebrow { letter-spacing: .06em; text-transform: none; }
.hero__eyebrow b { color: #fff; font-weight: 700; }

.hero__title {
  font-size: clamp(2.35rem, 6.2vw, 5rem);
  font-weight: 600;
  color: #fff;
  /* Depth comes from a shadow on the rendered glyphs, not from text-shadow on
     body copy. drop-shadow also survives the background-clip fill below. */
  filter: drop-shadow(0 3px 22px rgba(4, 13, 26, .62));
}
/* Metallic sheen — display type only, never body copy.
   The darkest stop stays light enough to hold 4.5:1 on the navy scrim. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sheen {
    background-image: linear-gradient(174deg,
      #FFFFFF 4%, #F1F6FB 30%, #CBDAE8 66%, #EDF3F9 92%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero__lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: #D5E2EE;
  max-width: 46ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Floating credential card — overlaps the hero/section seam (depth cue) */
.creds {
  position: relative;
  z-index: 2;
  margin-top: clamp(-5.5rem, -7vw, -3.5rem);
}
.creds__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r4);
  box-shadow: var(--e4);
  overflow: hidden;
}
.creds__head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.125rem clamp(1.25rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.creds__head svg { width: 18px; height: 18px; color: var(--red-600); flex: none; }
.creds__head span {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-800);
}
html:not([lang="en"]) .creds__head span { letter-spacing: .06em; text-transform: none; font-size: .8125rem; }

.creds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* flex column with the reference block pushed down: the licence numbers and
   PDF links line up across all three cards however long the titles run */
.cred {
  padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  border-inline-start: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cred__ref { margin-top: auto; }
.cred:first-child { border-inline-start: 0; }
.cred__no {
  font-family: var(--f-mono);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.cred__name {
  font-family: var(--f-display);
  font-size: 1.0625rem; font-weight: 600;
  color: var(--navy-800);
  line-height: 1.4;
}
.cred__by { font-size: .875rem; color: var(--ink-3); line-height: 1.6; }
.cred__meta {
  font-size: .75rem;
  color: var(--ink-3);
  line-height: 1.6;
  font-variant-numeric: tabular-nums lining-nums;
}
.cred__doc {
  margin-top: .125rem;
  display: inline-flex; align-items: center; gap: .4375rem;
  align-self: start;
  min-height: 44px; padding: .5rem 0;
  font-size: .8125rem; font-weight: 600;
  color: var(--navy-600);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.cred__doc svg { width: 15px; height: 15px; flex: none; }
.cred__doc:hover { color: var(--red-600); border-bottom-color: var(--red-600); }
.cred__ref {
  display: inline-flex; align-items: center;
  align-self: start;
  padding: .375rem .6875rem;
  background: var(--navy-800); color: #fff;
  border-radius: var(--r1);
  /* body font, not mono: the reference numbers carry Lao ministry suffixes */
  font-family: var(--f-body);
  font-size: .8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   7. Laos section (map)
   -------------------------------------------------------------------------- */
.laos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.map-panel {
  position: relative;
  background:
    radial-gradient(130% 100% at 15% 0%, #16375A 0%, #0B1F3A 58%, #071527 100%);
  border: 1px solid var(--navy-600);
  border-radius: var(--r4);
  padding: clamp(1rem, 2.5vw, 2rem);
  box-shadow: var(--e4);
  overflow: hidden;
}
.map-panel__legend {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  padding-top: 1rem;
  margin-top: .5rem;
  border-top: 1px solid var(--line-on-navy);
}
.legend-item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; color: var(--on-navy-2);
}
.legend-item i {
  width: 20px; height: 3px; border-radius: 2px; flex: none;
}
.legend-item i.is-th { background: #7FB2D9; }
.legend-item i.is-jp { background: #F2C98A; }
.legend-item i.is-kr { background: #9FD9C0; }
.legend-item i.is-cn {
  background: repeating-linear-gradient(90deg, #7C8CA3 0 6px, transparent 6px 11px);
  height: 2px;
}

/* the SVG itself */
.mc-map { width: 100%; height: auto; }
.mc-map__grid line { stroke: #1F4467; stroke-width: 1; opacity: .5; }
.mc-map__land path { fill: #16324F; stroke: #23517A; stroke-width: 1.1; }
.mc-map__lao { fill: var(--red-600); stroke: #FF8A8A; stroke-width: 1.8; }
.mc-map__routes .r { stroke-width: 2.4; stroke-linecap: round; }
.mc-map__routes .r--th { stroke: #7FB2D9; }
.mc-map__routes .r--jp { stroke: #F2C98A; }
.mc-map__routes .r--kr { stroke: #9FD9C0; }
.mc-map__routes .r--cn { stroke: #7C8CA3; stroke-width: 1.8; stroke-dasharray: 6 10; }
.pin__halo { fill: rgba(214, 40, 40, .20); }
.pin__ring { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1.4; }
.pin__dot { fill: #fff; stroke: var(--red-600); stroke-width: 3.5; }
.pin__dot--sm { fill: #0B1F3A; stroke: #E8EFF6; stroke-width: 3; }
.pin__dot--ghost { fill: #0B1F3A; stroke: #7C8CA3; stroke-width: 2.4; }
.pin__label {
  fill: #fff; font-family: var(--f-body);
  font-size: 21px; font-weight: 700; letter-spacing: .14em;
}
.pin__label--sm { fill: #C3D2E1; font-size: 17px; font-weight: 600; letter-spacing: .12em; }
.pin__label--ghost { fill: #8A9AB0; font-size: 16px; font-weight: 600; letter-spacing: .12em; }

/* animated route draw-in */
@media (prefers-reduced-motion: no-preference) {
  .mc-map__routes .r {
    stroke-dasharray: var(--len, 1200);
    stroke-dashoffset: var(--len, 1200);
  }
  .mc-map__routes .r--cn { stroke-dasharray: 6 10; stroke-dashoffset: 0; opacity: 0; }
  .is-in .mc-map__routes .r { animation: draw 1500ms cubic-bezier(.3,.7,.3,1) forwards; }
  .is-in .mc-map__routes .r--jp { animation-delay: 180ms; }
  .is-in .mc-map__routes .r--kr { animation-delay: 340ms; }
  .is-in .mc-map__routes .r--cn { animation: fadeIn 800ms 900ms ease-out forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fadeIn { to { opacity: 1; } }
  .pin__halo { transform-box: fill-box; transform-origin: center; }
  .is-in .pin--home .pin__halo { animation: pulse 3.2s 1.2s ease-out infinite; }
  @keyframes pulse {
    0%   { transform: scale(.7); opacity: .55; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
  }
}

/* fact list */
.facts { display: grid; gap: 0; margin-top: var(--s4); }
.fact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .9375rem 0;
  border-bottom: 1px solid var(--line);
}
.fact:first-child { border-top: 1px solid var(--line); }
.fact__k { font-size: .9375rem; color: var(--ink-2); }
.fact__v {
  font-family: var(--f-display);
  font-size: 1.0625rem; font-weight: 600;
  color: var(--navy-800);
  text-align: end;
}
.fact__v { font-variant-numeric: tabular-nums lining-nums; }

.routes { display: grid; gap: .75rem; margin-top: var(--s4); }
.route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .875rem;
  align-items: center;
  padding: .875rem 1.125rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--e1);
}
.route__flag {
  width: 26px; height: 18px; flex: none;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11,31,58,.12);
}
.route__flag svg { width: 100%; height: 100%; }
.route__to { font-size: .9375rem; font-weight: 500; }
.route__time {
  font-family: var(--f-mono);
  font-size: .8125rem; font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.source-note {
  margin-top: var(--s3);
  font-size: .8125rem; color: var(--ink-3);
  line-height: 1.7;
}
/* The wage figure carries a caveat that matters more than the number: it is a
   domestic rate and not a basis for pay abroad. Marked so it is read, not
   skimmed past like a general footnote. */
.wage-note {
  margin-top: var(--s3);
  padding: .875rem 1rem;
  border-inline-start: 3px solid var(--red-600);
  background: var(--paper-2);
  border-radius: 0 var(--r2) var(--r2) 0;
  font-size: .875rem; color: var(--ink-1);
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   8. Workers section
   -------------------------------------------------------------------------- */
.workers__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.workers__figure {
  position: relative;
  border-radius: var(--r4);
  /* stays alongside the long right-hand column instead of leaving dead space */
  position: sticky;
  top: 104px;
  overflow: hidden;
  box-shadow: var(--e3);
  background: var(--navy-800);
}
.workers__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.workers__figure figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.75rem 1.25rem 1.125rem;
  background: linear-gradient(to top, rgba(6,19,35,.92), transparent);
  color: #E4EDF5;
  font-size: .8125rem; line-height: 1.6;
}

.sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  margin-bottom: var(--s5);
}
.sector {
  background: #fff;
  padding: 1.25rem;
  display: grid;
  gap: .625rem;
  align-content: start;
  transition: background var(--t-fast);
}
.sector:hover { background: var(--paper-2); }
.sector__icon {
  width: 26px; height: 26px;
  color: var(--navy-700);
  stroke-width: 1.6;
}
.sector__name { font-size: .9375rem; font-weight: 600; line-height: 1.5; }

/* Real-role photo strip. 4 items divide evenly at 1 / 2 / 4 columns. */
.jobs { margin-top: clamp(3rem, 6vw, 5rem); }
.jobs__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1.25rem;
  padding-bottom: 1rem; margin-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 2px solid var(--navy-800);
}
.jobs__note { font-size: .875rem; color: var(--ink-3); line-height: 1.65; }
.jobs__grid { display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 1.5vw, 1.125rem); }
@media (min-width: 620px)  { .jobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .jobs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jobs__grid figure {
  position: relative; margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r3);
  background: var(--navy-700);
  box-shadow: var(--e2);
}
.jobs__grid picture { width: 100%; height: 100%; }
.jobs__grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow);
}
.jobs__grid figure:hover img { transform: scale(1.05); }
.jobs__grid figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 3rem .875rem .875rem;
  background: linear-gradient(to top, rgba(6,19,35,.95) 14%, transparent);
  color: #DDE8F2;
  font-size: .8125rem; line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Licensed photographs of Laos. Four, so the row divides evenly at 1, 2 and 4.
   The caption sits below the image rather than over it, because the credit line
   underneath is a licence condition and must stay legible — an overlay on a
   bright sky would not be.
   -------------------------------------------------------------------------- */
.laos-photos {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 620px)  { .laos-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .laos-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.laos-photo { margin: 0; }
.laos-photo picture { display: block; }
.laos-photo img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r3);
  box-shadow: var(--e2);
}
.laos-photo figcaption { display: block; padding-top: .625rem; }
.laos-photo__cap {
  display: block;
  font-size: .875rem; color: var(--ink-2); line-height: 1.6;
}
.laos-photo__credit {
  display: block; margin-top: .1875rem;
  font-size: .75rem; color: var(--ink-3); line-height: 1.6;
}
.laos-photo__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.laos-photo__credit a:hover { color: var(--navy-800); }

/* --------------------------------------------------------------------------
   8a. Cultural brief — six short cards under the Laos map.
   Six, not five: it divides evenly at 1, 2 and 3 columns, so no row is ever
   left holding a single orphan card.
   -------------------------------------------------------------------------- */
.culture { margin-top: clamp(3rem, 6vw, 4.5rem); }
.culture__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1.25rem;
  padding-bottom: 1rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 2px solid var(--navy-800);
}
.culture__note { font-size: .875rem; color: var(--ink-3); line-height: 1.65; max-width: 62ch; }
.culture__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 3.5vw, 3rem);
}
@media (min-width: 700px)  { .culture__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .culture__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.culture__item { border-top: 2px solid var(--line); padding-top: 1rem; }
.culture__t { font-weight: 600; margin-bottom: .5rem; }
.culture__d { font-size: .9375rem; color: var(--ink-2); }
/* The "what this means for you" line. Marked, not merely italicised — it is
   the part an employer can act on. */
.culture__tip {
  margin-top: .75rem; padding-inline-start: .875rem;
  border-inline-start: 2px solid var(--red-600);
  font-size: .875rem; color: var(--ink-1); line-height: 1.7;
}

.traits { display: grid; gap: 1.5rem; }
.trait {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}
.trait__mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: .75rem; font-weight: 700;
  flex: none;
  margin-top: 2px;
}
.trait__t { font-weight: 600; margin-bottom: .25rem; }
.trait__d { font-size: .9375rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   8b. Training — one wide establishing shot, then a 2x2 of evidence.
   All source photographs are landscape, so the cells stay landscape too;
   a portrait crop here would cut the classroom in half.
   -------------------------------------------------------------------------- */
.train__lead {
  position: relative; margin: 0 0 clamp(.75rem, 1.5vw, 1.125rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r3);
  background: var(--navy-700);
  box-shadow: var(--e3);
}
.train__lead picture { width: 100%; height: 100%; }
.train__lead img { width: 100%; height: 100%; object-fit: cover; }
.train__lead figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 3.5rem clamp(.875rem, 2vw, 1.5rem) clamp(.875rem, 1.6vw, 1.25rem);
  background: linear-gradient(to top, rgba(6,19,35,.95) 16%, transparent);
  color: #DDE8F2;
  font-size: .875rem; line-height: 1.6;
}
/* --------------------------------------------------------------------------
   8c. Horizontal rail
   Eight photographs stacked two-up ran to four rows and made the page very
   long, which is what the client objected to. One scrolling row instead.
   The card width deliberately leaves a partial card visible at the right edge:
   that peek is the only honest affordance that the row scrolls.
   -------------------------------------------------------------------------- */
.rail { --card: clamp(240px, 78vw, 400px); }
.rail__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.25rem;
  margin-bottom: clamp(.75rem, 1.5vw, 1.125rem);
}
.rail__hint { font-size: .875rem; color: var(--ink-3); line-height: 1.6; }
.rail__nav { display: flex; gap: .5rem; }
.rail__btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-1);
  color: var(--navy-800);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.rail__btn svg { width: 20px; height: 20px; }
.rail__btn:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.rail__btn[disabled] { opacity: .32; cursor: default; }
.rail__btn[disabled]:hover { background: var(--paper-1); border-color: var(--line); color: var(--navy-800); }

.rail__track {
  display: flex;
  gap: clamp(.75rem, 1.5vw, 1.125rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* the shadow on each card would otherwise be clipped by the scroll box */
  padding-block: 4px;
  scrollbar-width: thin;
}
.rail__track:focus-visible { outline: 3px solid var(--red-600); outline-offset: 4px; }
.rail__track::-webkit-scrollbar { height: 8px; }
.rail__track::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--navy-800) 34%, transparent);
  border-radius: 99px;
}
.rail__track > figure {
  position: relative; margin: 0;
  flex: 0 0 var(--card);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--r3);
  background: var(--navy-700);
  box-shadow: var(--e2);
}
.rail__track picture { display: block; width: 100%; height: 100%; }
.rail__track img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow);
}
.rail__track figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 3rem .875rem .875rem;
  background: linear-gradient(to top, rgba(6,19,35,.95) 16%, transparent);
  color: #DDE8F2;
  font-size: .8125rem; line-height: 1.55;
  pointer-events: none;
}

/* ui.js wraps each <picture> in a button; give it the zoom affordance. */
.shot {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.05); }
.shot:focus-visible { outline: 3px solid var(--red-600); outline-offset: -3px; }
.gal .shot { cursor: zoom-in; }

.train__what { margin-top: clamp(2.5rem, 5vw, 4rem); }
.train__what .h-card {
  padding-bottom: 1rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 2px solid var(--navy-800);
}
@media (min-width: 760px) {
  .traits--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
}

/* --------------------------------------------------------------------------
   9. Destinations
   -------------------------------------------------------------------------- */
/* 4 items: explicit 1 / 2 / 4 columns so a row is never left half-empty */
.dest__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 620px)  { .dest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .dest__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dest-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  box-shadow: var(--e1);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.dest-card:hover {
  box-shadow: var(--e3);
  transform: translateY(-3px);
  border-color: var(--line-2);
}
/* Domestic placement runs the full width of the grid: a different kind of
   service, and it keeps the 4-card row above it complete. */
.dest-card--wide { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .dest-card--wide {
    grid-template-columns: minmax(0, .44fr) minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .dest-card--wide .dest-card__media { aspect-ratio: auto; height: 100%; min-height: 260px; }
  .dest-card--wide .dest-card__body { padding: clamp(1.5rem, 2.8vw, 2.5rem); }
  .dest-card--wide .dest-card__d { max-width: 68ch; }
  .dest-card--wide .dest-card__name { font-size: clamp(1.375rem, 2.1vw, 1.75rem); }
}

.dest-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-800); }
.dest-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.dest-card:hover .dest-card__media img { transform: scale(1.045); }
.dest-card__flag {
  position: absolute; top: .875rem; left: .875rem;
  width: 34px; height: 23px;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.5);
}
.dest-card__flag svg { width: 100%; height: 100%; }
.dest-card__tag {
  position: absolute; top: .875rem; right: .875rem;
  padding: .3125rem .5625rem;
  background: rgba(6,19,35,.86);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: var(--r1);
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
}
/* flex column + margin-top:auto pins every card's figure to the same baseline,
   however long the description above it runs */
.dest-card__body {
  padding: clamp(1.125rem, 2vw, 1.5rem);
  display: flex; flex-direction: column; gap: .75rem;
}
.dest-card__name { font-size: 1.25rem; font-weight: 600; color: var(--navy-800); }
.dest-card__prog {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red-600);
}
html:not([lang="en"]) .dest-card__prog { letter-spacing: .04em; text-transform: none; font-size: .8125rem; }
.dest-card__d { font-size: .9375rem; color: var(--ink-2); }
.dest-card__stat {
  margin-top: auto;
  padding-top: .875rem;
  border-top: 1px solid var(--line);
  display: grid; gap: .125rem;
}
.dest-card__num {
  font-family: var(--f-display);
  font-size: 1.75rem; font-weight: 700;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.2;
}
.dest-card__lbl { font-size: .8125rem; color: var(--ink-3); line-height: 1.5; }

/* --------------------------------------------------------------------------
   10. Services
   -------------------------------------------------------------------------- */
/* 8 items: 1 / 2 / 4 columns all divide evenly, so the hairline grid never
   shows an empty cell. */
.svc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-on-navy);
  border: 1px solid var(--line-on-navy);
  border-radius: var(--r3);
  overflow: hidden;
}
@media (min-width: 620px)  { .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .svc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc {
  background: var(--navy-800);
  padding: clamp(1.25rem, 1.9vw, 1.625rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  transition: background var(--t-fast);
}
.svc:hover { background: var(--navy-700); }
.svc__no {
  font-family: var(--f-mono);
  font-size: .75rem; font-weight: 700;
  color: var(--sand-300);
  padding-top: .1875rem;
  font-variant-numeric: tabular-nums;
}
.svc__t { font-size: .9375rem; font-weight: 600; color: #fff; margin-bottom: .375rem; line-height: 1.55; }
.svc__d { font-size: .875rem; color: var(--on-navy-3); line-height: 1.7; }

/* --------------------------------------------------------------------------
   11. Process
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 0; counter-reset: step; position: relative; }
.step {
  display: grid;
  grid-template-columns: clamp(56px, 8vw, 96px) 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  position: relative;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 600;
  color: var(--line-2);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  transition: color var(--t);
}
.step:hover .step__num { color: var(--red-600); }
.step__body { display: grid; gap: .625rem; max-width: 64ch; }
.step__t { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 600; }
.step__d { font-size: .9375rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   12. Gallery
   -------------------------------------------------------------------------- */
.gal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.5rem, 1.2vw, 1rem);
}
.gal figure {
  position: relative;
  margin: 0;
  height: 100%;                 /* partner in each row stretches to match */
  overflow: hidden;
  border-radius: var(--r2);
  background: var(--navy-700);
  box-shadow: var(--e2);
}
.gal img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.gal figure:hover img { transform: scale(1.05); }
.gal figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.5rem .9375rem .875rem;
  background: linear-gradient(to top, rgba(6,19,35,.94) 12%, transparent);
  color: #DDE8F2;
  font-size: .8125rem; line-height: 1.55;
}
/* One item per row carries the aspect ratio and sets the row height;
   its partner stretches into it, so every row bottom aligns. */
.gal .g-a { grid-column: span 7; aspect-ratio: 16 / 11; }
.gal .g-b { grid-column: span 5; }
.gal .g-c { grid-column: span 4; aspect-ratio: 1 / 1; }
.gal .g-d { grid-column: span 4; }
.gal .g-e { grid-column: span 4; }
.gal .g-f { grid-column: span 5; }
.gal .g-g { grid-column: span 7; aspect-ratio: 16 / 11; }
.gal .g-h { grid-column: span 6; aspect-ratio: 16 / 10; }
.gal .g-i { grid-column: span 6; }

/* --------------------------------------------------------------------------
   13. Company
   -------------------------------------------------------------------------- */
.co__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Representative — the 会社概要 field a Japanese or Korean employer looks for */
.co__rep {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .375rem 1.25rem;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  padding: 1.125rem 0;
  border-top: 2px solid var(--navy-800);
  border-bottom: 1px solid var(--line);
}
.co__rep-k {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
}
html:not([lang="en"]) .co__rep-k { letter-spacing: .05em; text-transform: none; font-size: .8125rem; }
.co__rep-v {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 600;
  color: var(--navy-800);
  line-height: 1.5;
}

/* auto + 1fr: the photo keeps its aspect ratio and any extra card height goes
   to the text block, never the other way round */
.office {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  box-shadow: var(--e1);
}
.office__media { aspect-ratio: 16 / 10; background: var(--paper-3); overflow: hidden; }
.office__media img { width: 100%; height: 100%; object-fit: cover; }
.office__body {
  padding: clamp(1.125rem, 2vw, 1.75rem);
  display: grid; gap: .5rem; align-content: start;
}
.office__tag {
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red-600);
}
html:not([lang="en"]) .office__tag { letter-spacing: .05em; text-transform: none; font-size: .8125rem; }
.office__name { font-size: 1.125rem; font-weight: 600; color: var(--navy-800); }
.office__addr { font-size: .9375rem; color: var(--ink-2); }
/* Link out rather than embedding a Google map iframe: an embed loads Google
   tracking on every page view, costs ~500KB, and this is a two-office page. */
.office__map {
  margin-top: .375rem;
  display: inline-flex; align-items: center; gap: .4375rem;
  align-self: start;
  min-height: 44px; padding: .5rem 0;
  font-size: .875rem; font-weight: 600;
  color: var(--navy-600);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.office__map svg { width: 16px; height: 16px; flex: none; }
.office__map:hover { color: var(--red-600); border-bottom-color: var(--red-600); }

/* 4 items: 2 or 4 columns only — never 3, which would orphan the last cell */
.co__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 860px) { .co__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.co-stat { background: #fff; padding: clamp(1.125rem, 2.2vw, 1.75rem); display: grid; gap: .25rem; }
.co-stat__v {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700; color: var(--navy-800);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.2;
}
.co-stat__k { font-size: .8125rem; color: var(--ink-3); line-height: 1.55; }

/* --------------------------------------------------------------------------
   14. Contact
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.form { display: grid; gap: 1.125rem; }
.field { display: grid; gap: .4375rem; }
.field--pair { grid-template-columns: 1fr 1fr; gap: 1.125rem; display: grid; }
.label {
  font-size: .8125rem; font-weight: 600;
  color: #E4EDF5;
  display: flex; align-items: baseline; gap: .375rem;
}
.label .req { color: #FF9B9B; }
.label .opt { color: var(--on-navy-3); font-weight: 400; font-size: .75rem; }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .875rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--r2);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.7; }
.input::placeholder, .textarea::placeholder { color: #7C93AC; }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(255,255,255,.34); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: #8FC3EC;
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 3px rgba(143,195,236,.24);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3D2E1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 18px;
  padding-right: 2.5rem;
}
.select option { color: #0A1420; }

.help { font-size: .8125rem; color: var(--on-navy-3); line-height: 1.6; }
.err {
  font-size: .8125rem; color: #FFB3B3;
  display: flex; align-items: flex-start; gap: .375rem;
  line-height: 1.6;
}
.err svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: #FF8A8A; }

.form__foot { display: grid; gap: 1rem; margin-top: .5rem; }
.form__submit { justify-self: start; min-width: 220px; }
.form__submit[aria-busy="true"] { pointer-events: none; opacity: .8; }
.spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
  display: none;
  gap: .75rem;
  padding: 1rem 1.125rem;
  border-radius: var(--r2);
  font-size: .9375rem;
  line-height: 1.65;
  align-items: flex-start;
}
.form__status.is-shown { display: flex; }
.form__status svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.form__status--ok { background: rgba(90,200,150,.14); border: 1px solid rgba(90,200,150,.4); color: #BFEBD6; }
.form__status--bad { background: rgba(255,120,120,.12); border: 1px solid rgba(255,120,120,.4); color: #FFC9C9; }

.channels { display: grid; gap: 1px; background: var(--line-on-navy); border: 1px solid var(--line-on-navy); border-radius: var(--r3); overflow: hidden; }
.channel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.125rem 1.25rem;
  min-height: 64px;
  background: rgba(255,255,255,.03);
  transition: background var(--t-fast);
}
a.channel:hover { background: rgba(255,255,255,.09); }
.channel__ico { width: 20px; height: 20px; color: var(--sand-300); flex: none; }
.channel__k { font-size: .75rem; color: var(--on-navy-3); letter-spacing: .06em; margin-bottom: .1875rem; }
.channel__v { font-size: .9375rem; font-weight: 500; color: #fff; word-break: break-word; }
.channel__v .num { font-variant-numeric: tabular-nums; font-family: var(--f-mono); font-size: .875rem; }
.channel__go { width: 16px; height: 16px; color: var(--on-navy-3); flex: none; }

.pending-note {
  margin-top: 1rem;
  padding: .875rem 1rem;
  border: 1px dashed rgba(242,201,138,.45);
  border-radius: var(--r2);
  font-size: .8125rem;
  color: var(--sand-300);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: var(--on-navy-3);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-size: .875rem;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-on-navy);
}
.footer__brand { display: flex; gap: 1rem; align-items: flex-start; }
.footer__mark { width: 52px; height: 52px; object-fit: contain; flex: none; }
.footer__legal { display: grid; gap: .375rem; }
.footer__name { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; color: #fff; line-height: 1.45; }
.footer__name-en { font-size: .875rem; color: var(--on-navy-2); }
.footer__refs { display: grid; gap: .375rem; margin-top: .75rem; }
.footer__ref { font-size: .8125rem; line-height: 1.6; }
.footer__ref b { color: var(--on-navy-2); font-weight: 600; }
.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1.5rem; }
.footer__col-t {
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; margin-bottom: .875rem;
}
html:not([lang="en"]) .footer__col-t { letter-spacing: .05em; text-transform: none; font-size: .8125rem; }
.footer__col a { display: block; padding: .3125rem 0; transition: color var(--t-fast); line-height: 1.6; }
.footer__col a:hover { color: #fff; }
.footer__bottom {
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   16. Scroll reveal
   -------------------------------------------------------------------------- */
/* Content is visible by default. The hidden state is opted into only when JS
   has confirmed it can reveal it again — otherwise a script failure or an
   unsupported IntersectionObserver would leave the whole page blank. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms cubic-bezier(.16,.84,.28,1),
                transform 620ms cubic-bezier(.16,.84,.28,1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
  }
  .js-reveal .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .laos__grid,
  .workers__grid,
  .contact__grid,
  .footer__top { grid-template-columns: 1fr; }
  .laos__grid > .map-panel { order: -1; }
  .workers__figure { max-width: 460px; position: relative; top: auto; }
  .workers__figure img { aspect-ratio: 16 / 11; }
}

/* Burger below 1280px. Measured on Windows, the widest bar is Lao at ~1220px;
   the desktop nav is only offered where all five scripts fit, with ~60px spare
   for platforms whose font metrics run wider. The previous 1040px let the
   header overflow in Lao, Japanese, Thai and English. */
@media (max-width: 1279px) {
  .nav {
    position: fixed;
    inset: 76px 0 auto;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--e3);
    padding: .5rem var(--gutter) 1.25rem;
    display: grid;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: .9375rem .25rem;
    min-height: 48px;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="true"] { color: var(--red-600); }
  .burger { display: flex; }
  .header__actions { margin-inline-start: auto; }
  .header__cta { display: none; }
  .creds__grid { grid-template-columns: 1fr; }
  .cred { border-inline-start: 0; border-top: 1px solid var(--line); }
  .cred:first-child { border-top: 0; }
  /* every photograph stays on the page — nothing is silently dropped */
  .gal .g-a, .gal .g-b, .gal .g-e, .gal .g-f, .gal .g-g { grid-column: span 12; }
  .gal .g-b, .gal .g-e, .gal .g-f { aspect-ratio: 16 / 11; }
  .gal .g-c { grid-column: span 6; }
  .gal .g-d { grid-column: span 6; aspect-ratio: 1 / 1; }
  .gal .g-h, .gal .g-i { grid-column: span 6; }
  .gal .g-i { aspect-ratio: 16 / 10; }
}

@media (max-width: 620px) {
  .brand__sub { display: none; }
  .brand__name { font-size: .875rem; white-space: normal; }
  /* `flex: none` on .brand refuses to shrink, so the long Lao and Japanese
     company names pushed the whole bar past the viewport on a 375px phone.
     Let the brand give way — it is the only item here that can reflow. */
  .brand { flex: 0 1 auto; min-width: 0; gap: .5rem; }
  .brand__mark { width: 34px; height: 34px; }

  /* Overlaid captions are fine on a wide photo; on a phone a four-line Lao
     caption covered half the classroom. Below the image instead, and the
     photographs keep their own proportions with no crop at all.
     The rail cards get the same treatment — a card is only ~292px wide here, so
     an overlay would take a third of the picture. The card grows instead; the
     fixed width is what the horizontal scroll needs, not a fixed height. */
  .train__lead,
  .rail__track > figure {
    aspect-ratio: auto;
    background: none; box-shadow: none; border-radius: 0;
    overflow: visible;
  }
  .train__lead picture,
  .rail__track picture { display: block; width: 100%; height: auto; }
  .train__lead img,
  .rail__track img {
    height: auto;
    aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--r3);
    box-shadow: var(--e2);
  }
  .train__lead img { aspect-ratio: auto; }
  /* The zoom button is height:100% for the overlay layout. Left that way here it
     fills the whole stretched card and pushes the caption out past the figure's
     bottom edge, where the scroll box clips it away entirely. Stack instead. */
  .rail__track > figure { display: flex; flex-direction: column; }
  .rail__track .shot { height: auto; flex: none; }
  .train__lead figcaption,
  .rail__track figcaption {
    position: static;
    padding: .625rem .125rem 0;
    background: none;
    color: var(--ink-2);
    font-size: .8125rem; line-height: 1.6;
  }
  .rail__track > figure:hover img,
  .rail__track .shot:hover img { transform: none; }
  .field--pair { grid-template-columns: 1fr; }
  .fact { grid-template-columns: 1fr; gap: .25rem; }
  .fact__v { text-align: start; }
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .hero__actions .btn { width: 100%; }
  .form__submit { width: 100%; }
  .gal .g-c, .gal .g-d, .gal .g-h, .gal .g-i {
    grid-column: span 12; aspect-ratio: 16 / 11 !important;
  }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Narrow phones. The flag alone identifies the language — which is the whole
   reason the switcher uses flags rather than letters — so the written name can
   go, buying back roughly 40px for the company name beside it. */
@media (max-width: 480px) {
  #langCurrent { display: none; }
  .lang__toggle { padding-inline: .5rem; gap: .375rem; }
}

/* --------------------------------------------------------------------------
   Lightbox
   The image is never scaled up: max-width/max-height only shrink it, so a photo
   whose original is 882px wide is shown at 882px and stays sharp rather than
   being stretched to fill a 1400px screen and going soft.
   -------------------------------------------------------------------------- */
.lb {
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: rgba(4, 12, 24, .975);
  color: #EAF1F8;
}
.lb::backdrop { background: rgba(4, 12, 24, .85); }
.lb:not([open]) { display: none; }
.lb__bar {
  position: absolute; inset-inline: 0; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(.75rem, 2vw, 1.25rem);
}
.lb__count {
  font-family: var(--f-mono);
  font-size: .8125rem; letter-spacing: .04em;
  color: rgba(234, 241, 248, .72);
}
.lb__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(234, 241, 248, .26);
  border-radius: 50%;
  background: rgba(4, 12, 24, .55);
  color: #EAF1F8;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.lb__btn svg { width: 22px; height: 22px; }
.lb__btn:hover { background: rgba(234, 241, 248, .16); border-color: rgba(234, 241, 248, .5); }
.lb__btn:focus-visible { outline: 3px solid var(--red-600); outline-offset: 3px; }
.lb__btn[disabled] { opacity: .28; cursor: default; }
.lb__arrow {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
}
.lb__arrow--prev { inset-inline-start: clamp(.5rem, 2vw, 1.5rem); }
.lb__arrow--next { inset-inline-end: clamp(.5rem, 2vw, 1.5rem); }
.lb__fig {
  margin: 0;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  padding: clamp(4rem, 9vh, 5.5rem) clamp(3.75rem, 9vw, 6rem);
}
.lb__fig img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;          /* never upscale */
  border-radius: var(--r3);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.lb__fig figcaption {
  max-width: 62ch;
  text-align: center;
  font-size: .9375rem; line-height: 1.65;
  color: rgba(234, 241, 248, .84);
}
@media (max-width: 620px) {
  .lb__fig { padding: 4.25rem .75rem 1.25rem; }
  .lb__arrow { top: auto; bottom: 1rem; transform: none; }
}

@media print {
  .site-header, .nav, .lang, .burger, .hero__media, .hero__scrim { display: none !important; }
  body { color: #000; background: #fff; }
  .section--navy, .hero { background: #fff !important; color: #000 !important; }
}