/* JST Standard — main stylesheet
   Colors come from the original site palette (#242a56 navy, #4d61d6 / #6878d6 blue,
   #eff2ff / #bfd1ff tints), tuned for WCAG AA contrast in both themes.
   Theme: system by default; [data-theme="light"|"dark"] on <html> overrides it. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-var.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-head: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6.5rem;
  --radius: 10px; --radius-sm: 6px;
  --container: 72rem; --narrow: 46rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* light */
  --bg: #ffffff;
  --bg-alt: #f4f6fc;
  --surface: #ffffff;
  --text: #1f2445;
  --muted: #4d5378;
  --heading: #242a56;
  --accent: #3d4fc4;
  --accent-strong: #2c3ba0;
  --accent-soft: #eaeeff;
  --border: #dde2f1;
  --border-strong: #c3cae3;
  --input-border: #848bb0;
  --input-border-hover: #4d5378;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233d4fc4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --field-error: #c62828;
  --btn-bg: #242a56;
  --btn-text: #ffffff;
  --btn-bg-hover: #333b78;
  --band-bg: #242a56;
  --band-text: #ffffff;
  --band-muted: #cdd3f2;
  --shadow: 0 1px 2px rgb(36 42 86 / .06), 0 8px 24px -12px rgb(36 42 86 / .18);
  --logo-main: #242a56;
  --logo-accent: #4d61d6;
  --img-dim: 1;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11142a;
    --bg-alt: #161a35;
    --surface: #1a1f3e;
    --text: #e3e7f5;
    --muted: #a9b0d2;
    --heading: #f4f6ff;
    --accent: #a3b3ff;
    --accent-strong: #c6d0ff;
    --accent-soft: #232a56;
    --border: #2a3160;
    --border-strong: #3a4378;
    --input-border: #6a74a8;
    --input-border-hover: #a9b0d2;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a3b3ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --field-error: #ff8a80;
    --btn-bg: #bfd1ff;
    --btn-text: #151a3a;
    --btn-bg-hover: #d9e3ff;
    --band-bg: #1d2350;
    --band-text: #ffffff;
    --band-muted: #c3caee;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .6);
    --logo-main: #ffffff;
    --logo-accent: #a3b3ff;
    --img-dim: .92;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11142a;
  --bg-alt: #161a35;
  --surface: #1a1f3e;
  --text: #e3e7f5;
  --muted: #a9b0d2;
  --heading: #f4f6ff;
  --accent: #a3b3ff;
  --accent-strong: #c6d0ff;
  --accent-soft: #232a56;
  --border: #2a3160;
  --border-strong: #3a4378;
  --input-border: #6a74a8;
  --input-border-hover: #a9b0d2;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a3b3ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --field-error: #ff8a80;
  --btn-bg: #bfd1ff;
  --btn-text: #151a3a;
  --btn-bg-hover: #d9e3ff;
  --band-bg: #1d2350;
  --band-text: #ffffff;
  --band-muted: #c3caee;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .6);
  --logo-main: #ffffff;
  --logo-accent: #a3b3ff;
  --img-dim: .92;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--font-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--heading);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-4);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.25rem); letter-spacing: -.025em; line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem); }
h3 { font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.005em; }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
strong { font-weight: 600; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 100;
  background: var(--btn-bg); color: var(--btn-text); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); color: var(--btn-text); }

.icon { width: 1.25em; height: 1.25em; flex: none; }
/* iPhone/iPad: no grey flash on tap, and no double-tap-zoom delay on controls */
a, button, select, summary, label { -webkit-tap-highlight-color: transparent; }
a, button, select, summary { touch-action: manipulation; }
/* The page behind the open mobile menu stays put. Only body: hidden on <html> too would make <body>
   the scroll container, and Safari then drops the sticky header. */
html.menu-open body { overflow: hidden; }

/* ---------- layout ---------- */
.container {
  width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
  /* viewport-fit=cover: keep content clear of the iPhone notch / Dynamic Island in landscape */
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section__head { max-width: 46rem; margin-bottom: var(--space-7); }
.section__head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.section__head--row h2 { margin-bottom: 0; }
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 40rem) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.split { display: grid; gap: var(--space-7); margin-bottom: var(--space-8); }
@media (min-width: 60rem) { .split { grid-template-columns: 1.1fr .9fr; align-items: start; } .split--even { grid-template-columns: 1fr 1fr; margin-bottom: 0; } }
.split--even { margin-bottom: 0; }
.split .section__head { margin-bottom: 0; }

/* ---------- type helpers ---------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  font: 600 .8125rem/1.3 var(--font-head); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-4);
}
/* The short bar echoes the rule in the JST Standard logo. */
.eyebrow::before { content: ""; width: 1.75rem; height: 3px; background: currentColor; flex: none; }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--muted); }
.note { color: var(--muted); font-size: .9375rem; margin-top: var(--space-5); }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.875rem; padding: .7rem 1.25rem; border-radius: var(--radius-sm);
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--primary { background: var(--btn-bg); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-text); }
.btn--secondary { background: transparent; color: var(--heading); border-color: var(--input-border); }
.btn--secondary:hover { border-color: var(--heading); color: var(--heading); }
.btn--light { background: #ffffff; color: #242a56; }
.btn--light:hover { background: #e6ebff; color: #242a56; }
.btn--sm { min-height: 2.5rem; padding: .5rem 1rem; font-size: .9375rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.actions--center { justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; text-decoration: none; color: var(--accent); }
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform .15s; }
a.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--border);
}
/* The frosted background sits on a pseudo-element: with backdrop-filter on the header itself,
   browsers render the dropdown (which hangs below the header) see-through. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 4.5rem; }
.brand { display: block; flex: none; border-radius: 4px; }
/* The logo PNG is used as a mask and painted in brand colours: "JST" in navy (white in dark mode),
   and the bottom row (rule + STANDARD, below 77.7% of the height) in the accent blue. */
.brand__logo {
  display: block; height: 2.5rem; aspect-ratio: 269 / 148;
  background: linear-gradient(var(--logo-main) 77.7%, var(--logo-accent) 77.7%);
  -webkit-mask: url("/assets/images/brand/jst-standard-logo-black.png") center / contain no-repeat;
  mask: url("/assets/images/brand/jst-standard-logo-black.png") center / contain no-repeat;
}
.brand__logo--footer { height: 2.75rem; margin-bottom: var(--space-4); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: var(--space-2); }
.site-nav a:not(.btn) {
  display: block; padding: .5rem .75rem; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-weight: 500; font-size: .96875rem;
}
.site-nav a:not(.btn) { position: relative; transition: color .2s; }
.site-nav a:not(.btn):hover { color: var(--heading); }
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .2rem; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-nav a:not(.btn):hover::after, .site-nav a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
.site-nav a[aria-current="page"]:not(.btn) { color: var(--heading); }
.site-nav .btn { transition: background-color .2s, transform .2s, box-shadow .2s; }
@media (hover: hover) { .site-nav .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgb(36 42 86 / .6); } }
.site-header { transition: box-shadow .25s, background-color .25s; }
.site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgb(0 0 0 / .35); }
.site-nav__cta { margin-left: var(--space-2); }
.site-header__tools { display: flex; align-items: center; gap: var(--space-2); }

/* Services submenu: a chevron button next to the link. Wide screens: a dropdown card (also on hover).
   Mobile menu: expands in place (see the max-width: 52rem block). */
.site-nav__item--sub { position: relative; }
.site-nav__row { display: flex; align-items: center; }
.site-nav__sub-toggle {
  display: grid; place-items: center; width: 1.75rem; height: 2.25rem; padding: 0; margin-left: -.25rem;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; transition: color .15s;
}
.site-nav__sub-toggle:hover, .site-nav__sub-toggle[aria-expanded="true"] { color: var(--heading); }
.site-nav__sub-toggle .icon { width: 1rem; height: 1rem; transition: transform .2s ease; }
.site-nav__sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__sub ul { display: grid; gap: 2px; }
.site-nav .site-nav__sub a {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  padding: .65rem .75rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
}
.site-nav .site-nav__sub a::after { display: none; }
.site-nav__sub a .icon { width: 1.25rem; height: 1.25rem; color: var(--accent); margin-top: .1rem; }
.site-nav__sub strong { display: block; font-weight: 600; font-size: .9375rem; color: var(--heading); line-height: 1.35; }
.site-nav__sub small {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: .15rem; font-size: .8125rem; line-height: 1.45; color: var(--muted);
}
html:not(.js) .site-nav__sub-toggle, html:not(.js) .site-nav__sub { display: none; }
@media (min-width: 52.01rem) {
  .site-nav__row > a:not(.btn) { padding-right: .4rem; }
  .site-nav__row > a:not(.btn)::after { right: .4rem; }
  /* padding-top bridges the gap, so the pointer can travel from the link into the card */
  .site-nav__sub {
    position: absolute; top: 100%; left: 50%; width: 24rem; padding-top: .6rem;
    opacity: 0; visibility: hidden; transform: translate(-50%, .25rem);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  }
  .site-nav__sub ul {
    padding: var(--space-2); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .site-nav .site-nav__sub a:hover { background: var(--accent-soft); }
  .site-nav__item--sub.is-sub-open .site-nav__sub {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s ease, transform .15s ease, visibility 0s;
  }
  @media (hover: hover) {
    .js .site-nav__item--sub:hover .site-nav__sub {
      opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s ease .05s, transform .15s ease .05s, visibility 0s .05s;
    }
    .js .site-nav__item--sub:hover .site-nav__sub-toggle { color: var(--heading); }
  }
}

/* Light/dark toggle. Follows the OS until the visitor picks a theme; the icon shows the current theme. */
.theme-toggle {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; transition: color .15s;
}
.theme-toggle:hover { color: var(--heading); }
.theme-toggle .icon { width: 1.25rem; height: 1.25rem; }
.theme-toggle__icon { display: none; }
.theme-toggle[data-mode="light"] [data-for="light"],
.theme-toggle[data-mode="dark"] [data-for="dark"] { display: block; }
html:not(.js) .theme-toggle, html:not(.js) .menu-toggle { display: none; }

.menu-toggle {
  display: none; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--heading); cursor: pointer;
}
.menu-toggle .icon { width: 1.35rem; height: 1.35rem; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

@media (max-width: 52rem) {
  /* Opaque on phones: iPhone Safari tints its top bar with this colour, so a translucent header
     would leave a visible band above it. */
  .site-header::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header__inner { flex-wrap: wrap; min-height: 4rem; }
  .brand__logo { height: 2.25rem; }
  .site-header__tools { margin-left: auto; order: 2; }
  .js .menu-toggle { display: grid; }
  .site-nav { order: 3; width: 100%; margin: 0; }
  /* With JS the menu is a panel that drops over the page, so opening it never pushes content down. */
  .js .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; width: auto;
    padding: var(--space-2) max(var(--gutter), env(safe-area-inset-right)) var(--space-5) max(var(--gutter), env(safe-area-inset-left));
    background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 16px 32px -20px rgb(0 0 0 / .45);
    /* long menus (landscape phones, open submenu) scroll inside the panel */
    max-height: calc(100dvh - 4rem - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .js .site-nav.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; }
  .site-nav a:not(.btn) { padding: .8rem .25rem; border-bottom: 1px solid var(--border); border-radius: 0; font-size: 1.0625rem; }
  .site-nav a[aria-current="page"]:not(.btn) { box-shadow: inset 3px 0 0 var(--accent); padding-left: .75rem; }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav__cta { margin: var(--space-4) 0 0; }
  .site-nav__cta .btn { width: 100%; }
  /* Services submenu as an accordion: the link goes to the page, the chevron button opens the list. */
  .site-nav__row { border-bottom: 1px solid var(--border); }
  .site-nav__row > a:not(.btn) { flex: 1; border-bottom: 0; }
  .site-nav__sub-toggle { width: 2.75rem; height: 2.75rem; margin: 0; color: var(--heading); }
  .site-nav__sub-toggle .icon { width: 1.25rem; height: 1.25rem; }
  .site-nav__sub { display: none; }
  .site-nav__item--sub.is-sub-open .site-nav__sub { display: block; }
  .site-nav__sub ul { gap: 0; padding: var(--space-1) 0 var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
  .site-nav .site-nav__sub a { padding: .7rem .25rem; align-items: center; border-bottom: 0; }
  .site-nav__sub strong { font-weight: 500; font-size: 1rem; color: var(--text); }
  .site-nav__sub small { display: none; }
}

/* ---------- proof strip ---------- */
.proof { border-block: 1px solid var(--border); background: var(--bg-alt); }
.proof__list { display: grid; gap: 0; }
@media (min-width: 40rem) { .proof__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .proof__list { grid-template-columns: repeat(4, 1fr); } }
.proof__list li { padding: var(--space-5) var(--space-5) var(--space-5) 0; }
@media (min-width: 64rem) {
  .proof__list li { padding: var(--space-6) var(--space-5); border-left: 1px solid var(--border); }
  .proof__list li:first-child { border-left: 0; padding-left: 0; }
}
.proof__list strong { display: block; font: 600 1.375rem/1.25 var(--font-head); color: var(--heading); margin-bottom: var(--space-1); letter-spacing: -.01em; }
.proof__list span { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.5; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-6); box-shadow: var(--shadow);
}
.icon-badge {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent); margin-bottom: var(--space-4);
}
.icon-badge .icon { width: 1.4rem; height: 1.4rem; }
.icon-badge--lg { width: 3.25rem; height: 3.25rem; }
.icon-badge--lg .icon { width: 1.65rem; height: 1.65rem; }

.service-card { position: relative; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.service-card h3 { margin-bottom: var(--space-3); }
.service-card h3 a { color: var(--heading); text-decoration: none; }
.service-card p { color: var(--muted); flex: 1; }
.service-card .link-arrow { margin-top: auto; }
.stretched::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.service-card:hover { border-color: var(--accent); }
.service-card:hover .link-arrow .icon { transform: translateX(3px); }
.service-card:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.service-card .stretched:focus-visible { outline: none; }

.points { gap: var(--space-6) var(--space-7); }
.point { border-top: 2px solid var(--heading); padding-top: var(--space-5); }
.point h3 { margin-bottom: var(--space-3); }
.point p { color: var(--muted); margin: 0; }
.point a { display: inline-block; margin-top: var(--space-2); font-weight: 500; }

/* ---------- audiences & stages ---------- */
.audiences { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); }
.audiences h3 { font-size: 1rem; font-family: var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.audience-list li { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.audience-list li:first-child { border-top: 0; padding-top: 0; }
.audience-list .icon { color: var(--accent); margin-top: .2rem; }
.audience-list strong { display: block; color: var(--heading); }
.audience-list span { color: var(--muted); font-size: .96875rem; }

.stages__title { font-size: 1rem; font-family: var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-5); }
.stages { display: grid; gap: var(--space-4); counter-reset: none; }
@media (min-width: 40rem) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .stages { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.stage { position: relative; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
@media (min-width: 64rem) {
  .stage { border-radius: 0; border-left-width: 0; }
  .stage:first-child { border-left-width: 1px; border-radius: var(--radius) 0 0 var(--radius); }
  .stage:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
}
.stage__num { display: block; font: 600 .875rem/1 var(--font-head); color: var(--accent); margin-bottom: var(--space-3); letter-spacing: .06em; }
.stage h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); }
.stage p { font-size: .9375rem; color: var(--muted); margin: 0; }

/* ---------- founder / profile ---------- */
.founder, .profile { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 48rem) {
  .founder { grid-template-columns: 15rem 1fr; gap: var(--space-8); }
  .profile { grid-template-columns: 18rem 1fr; gap: var(--space-8); }
}
.founder__photo img, .profile__photo img {
  width: 100%; max-width: 15rem; aspect-ratio: 1; object-fit: cover; filter: brightness(var(--img-dim));
  /* Softer corners, plus a hairline border and shadow: the photo's pale sky would otherwise
     blend into the light background and the corners would disappear. */
  border-radius: 1.5rem; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.profile__photo img { max-width: 18rem; }
@media (max-width: 47.99rem) { .founder__photo img { max-width: 10rem; border-radius: 1.25rem; } .profile__photo img { max-width: 12rem; border-radius: 1.25rem; } }
/* [role=list] resets list margins with higher specificity, so match it here. */
.highlights[role="list"] { margin: var(--space-5) 0 var(--space-6); }
.highlights li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.highlights li:last-child { border-bottom: 1px solid var(--border); }
.highlights .icon { color: var(--accent); margin-top: .2rem; }

.experience .card { box-shadow: none; }
.experience h3 { margin-bottom: var(--space-2); }
.experience__org { font-size: .9063rem; font-weight: 600; color: var(--accent); margin-bottom: var(--space-3); }
.experience p:last-child { margin: 0; color: var(--muted); }
.plain-list li { padding: var(--space-4) 0; border-top: 1px solid var(--border); color: var(--muted); }
.plain-list li:last-child { border-bottom: 1px solid var(--border); }
.plain-list strong { display: block; color: var(--heading); }

/* ---------- page head & breadcrumb ---------- */
.page-head { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.page-head h1 { max-width: 22ch; }
.page-head .lead { max-width: 44rem; margin-bottom: 0; }
.page-head--center { text-align: center; border: 0; background: none; padding-block: var(--space-9); }
.page-head--center h1, .page-head--center .lead { margin-inline: auto; }
.page-head--center .eyebrow { justify-content: center; }
.breadcrumb { margin-bottom: var(--space-5); font-size: .875rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumb a { color: var(--muted); display: inline-block; padding-block: .2rem; }
.breadcrumb a:hover { color: var(--accent); }

/* Page header with a night banner image (Services, About): always dark, like the homepage hero.
   Text sits on the left over a gradient; the image detail is on the right. */
.page-head--image { position: relative; overflow: hidden; background: #06112f; border-bottom: 0; padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); }
.page-head__media { position: absolute; inset: 0; z-index: 0; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }
.page-head--image::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(6 17 47 / .95) 0%, rgb(6 17 47 / .88) 38%, rgb(6 17 47 / .45) 62%, rgb(6 17 47 / .1) 100%),
    linear-gradient(transparent 70%, rgb(6 17 47 / .6));
}
.page-head--image .container { position: relative; z-index: 2; }
.page-head--image h1 { color: #ffffff; }
.page-head--image .lead { color: #c9d2f3; max-width: 36rem; text-shadow: 0 1px 12px rgb(6 17 47 / .9); }
.page-head--image h1 { text-shadow: 0 2px 20px rgb(6 17 47 / .8); }
.page-head--image .breadcrumb li, .page-head--image .breadcrumb a { color: #b4bde3; }
.page-head--image .breadcrumb a:hover { color: #ffffff; }
.page-head--image .breadcrumb li + li::before { color: rgb(255 255 255 / .35); }
.page-head--image .toc a { background: rgb(8 18 44 / .6); border-color: rgb(255 255 255 / .25); color: #ffffff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.page-head--image .toc a .icon { color: #ffc58a; }
.page-head--image .toc a:hover { border-color: rgb(255 180 100 / .7); }
.page-head--image :focus-visible { outline-color: #bfd1ff; }
@media (max-width: 47.99rem) {
  /* On phones the text sits on solid navy and the image becomes a strip below it, so nothing busy is behind the text. */
  .page-head--image { padding-bottom: 14rem; }
  .page-head__media { top: auto; height: 15rem; }
  .page-head__media img { object-position: 70% 60% !important; }
  .page-head--image::before { background: linear-gradient(#06112f calc(100% - 15rem), rgb(6 17 47 / .2) calc(100% - 8.5rem), rgb(6 17 47 / .1)); }
}

/* ---------- services page ---------- */
.toc { margin-top: var(--space-6); }
.toc ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.toc a {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: .5rem .9rem;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  color: var(--heading); text-decoration: none; font-weight: 500; font-size: .9375rem;
}
.toc a .icon { color: var(--accent); width: 1.05rem; height: 1.05rem; }
.toc a:hover { border-color: var(--accent); }
.service { padding-block: clamp(3rem, 2.5rem + 3vw, 5rem); border-bottom: 1px solid var(--border); }
.service:last-child { border-bottom: 0; }
.service__head { max-width: 46rem; margin-bottom: var(--space-6); }
.service__body { display: grid; gap: var(--space-6); }
@media (min-width: 60rem) { .service__body { grid-template-columns: 1.2fr .8fr; gap: var(--space-8); align-items: start; } }
.service__text h3 { font-size: 1rem; font-family: var(--font-body); font-weight: 700; margin: var(--space-5) 0 var(--space-2); color: var(--heading); }
.service__text h3:first-child { margin-top: 0; }
.service__text p { color: var(--text); }
@media (min-width: 60rem) { .service__aside { position: sticky; top: 6rem; } }
.service__aside h3 { margin-bottom: var(--space-4); }
.service__aside .btn { margin-top: var(--space-5); width: 100%; }
.checklist li { display: flex; gap: var(--space-3); padding: var(--space-2) 0; line-height: 1.5; }
.checklist .icon { color: var(--accent); width: 1.15rem; height: 1.15rem; margin-top: .2rem; }

.faq__item { border-top: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 1px solid var(--border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-size: 1.0625rem; }
.faq__item summary::after {
  content: ""; flex: none; width: .6rem; height: .6rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .2s; margin-right: .25rem;
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item p { color: var(--muted); padding-bottom: var(--space-5); margin: 0; max-width: 42rem; }

/* ---------- articles ---------- */
.tag {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: .8125rem; font-weight: 600; text-decoration: none; line-height: 1.5;
}
a.tag:hover { color: var(--accent-strong); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: .875rem; color: var(--muted); margin-bottom: var(--space-3); }
.article-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.article-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--img-dim)); transition: transform .3s; }
.article-card:hover .article-card__media img { transform: scale(1.02); }
.article-card__body { padding: var(--space-5); }
.article-card__title { font-size: 1.1875rem; margin-bottom: var(--space-3); }
.article-card__title a { color: var(--heading); text-decoration: none; }
.article-card__title a:hover { color: var(--accent); text-decoration: underline; }
.article-card__body p:last-child { color: var(--muted); font-size: .96875rem; margin: 0; }
.category-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); color: var(--muted); font-size: .9375rem; }
.article-group { margin-bottom: var(--space-8); }
.article-group:last-child { margin-bottom: 0; }

.article__head { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--space-6); }
.article__head h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); }
.article__dek { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); color: var(--muted); line-height: 1.5; }
.article__dek:empty { display: none; }
.byline { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); font-size: .9375rem; color: var(--muted); line-height: 1.45; }
.byline__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.byline a { color: var(--heading); font-weight: 600; text-decoration: none; }
.byline a:hover { text-decoration: underline; }
.article__figure { margin: 0 auto var(--space-7); max-width: calc(58rem + 2 * var(--gutter)); }
.article__figure img { border-radius: var(--radius); width: 100%; border: 1px solid var(--border); filter: brightness(var(--img-dim)); }
.prose { font-size: 1.125rem; line-height: 1.75; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.25em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--accent); }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose hr { margin: 2.5em 0; }
.prose blockquote { margin: 1.5em 0; padding-left: 1.25em; border-left: 3px solid var(--accent); color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.article__foot { padding-block: var(--space-7) var(--space-8); }
.author-box { display: flex; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.author-box img { width: 4.5rem; height: 4.5rem; border-radius: 50%; flex: none; }
.author-box p { color: var(--muted); font-size: .96875rem; margin-bottom: var(--space-2); }
.author-box p:last-child { margin: 0; }
.author-box .author-box__name { font: 600 1.0625rem/1.3 var(--font-head); color: var(--heading); }
@media (max-width: 30rem) { .author-box { flex-direction: column; } }
.related { padding-block: var(--space-8); background: var(--bg-alt); border-top: 1px solid var(--border); }

/* ---------- contact ---------- */
.contact { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 60rem) { .contact { grid-template-columns: 1.4fr .9fr; gap: var(--space-8); } }
.contact h2 { font-size: 1.375rem; }
.contact-list li { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.contact-list li:last-child { border-bottom: 1px solid var(--border); }
.contact-list .icon { color: var(--accent); margin-top: .2rem; }
.contact-list strong { display: block; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.contact__next { margin-top: var(--space-6); }
.contact__next h3 { font-size: 1.0625rem; }
.contact__next ol { counter-reset: step; }
.contact__next li { counter-increment: step; position: relative; padding: 0 0 var(--space-3) 2.25rem; color: var(--muted); font-size: .96875rem; }
.contact__next li::before {
  content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 .75rem/1 var(--font-head);
}

.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 40rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: var(--space-2); color: var(--heading); }
.field label [aria-hidden="true"] { color: var(--accent); }
/* Inputs, selects and textareas share one look: same height, border, radius and focus ring. */
.field input, .field select, .field textarea {
  display: block; width: 100%; margin: 0; padding: .75rem .9rem;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--text);
  background-color: var(--bg); border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  outline: 2px solid transparent; /* stays visible in forced-colors mode */
  transition: border-color .15s, box-shadow .15s;
}
.field input, .field select { height: 3rem; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: var(--select-arrow); background-repeat: no-repeat;
  background-position: right .9rem center; background-size: 1rem;
}
/* The empty "Select one (optional)" choice reads like a placeholder. */
.field select:has(> option[value=""]:checked) { color: var(--muted); }
.field select option { color: var(--text); }
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--input-border-hover); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.field [aria-invalid="true"], .field [aria-invalid="true"]:hover { border-color: var(--field-error); }
.field [aria-invalid="true"]:focus { border-color: var(--field-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-error) 25%, transparent); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .6; cursor: not-allowed; border-color: var(--input-border); }
/* Browser autofill keeps the theme instead of a yellow or blue fill. */
.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 100px var(--bg) inset; }
.field input:-webkit-autofill:focus { box-shadow: 0 0 0 100px var(--bg) inset, 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.field__error { display: block; color: var(--field-error); font-size: .875rem; margin-top: var(--space-1); }
.form__hint { font-size: .875rem; color: var(--muted); margin: 0; }
.form__status { margin: 0; font-weight: 600; }
.form__status:empty { display: none; }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice {
  display: flex; gap: var(--space-3); padding: var(--space-4); margin: 0;
  border: 1px solid var(--border-strong); border-left: 4px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--text); font-size: .96875rem;
}
.notice .icon { color: var(--accent); margin-top: .15rem; }
/* mailto mode: counter under the message, and fallbacks shown after the email app is opened */
.field__count { display: block; font-size: .875rem; color: var(--muted); margin-top: var(--space-1); }
.field__count[data-low] { color: var(--heading); font-weight: 600; }
.mail-fallback {
  display: grid; gap: var(--space-3); padding: var(--space-4);
  border: 1px solid var(--border-strong); border-left: 4px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent-soft); font-size: .96875rem;
}
.mail-fallback[hidden] { display: none; }
.mail-fallback p { margin: 0; }
.mail-fallback__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mail-fallback .btn { min-height: 2.5rem; padding: .5rem .9rem; font-size: .9375rem; background: var(--surface); }
.mail-fallback__note { color: var(--muted); font-size: .875rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--band-bg); color: var(--band-text); padding-block: clamp(3rem, 2.5rem + 3vw, 5rem); }
.cta-band__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 60rem) { .cta-band__inner { grid-template-columns: 1fr auto; gap: var(--space-8); } }
.cta-band h2 { color: var(--band-text); }
.cta-band p { color: var(--band-muted); max-width: 42rem; margin: 0; font-size: 1.0625rem; }
.cta-band .btn--light:focus-visible { outline-color: #ffffff; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding-top: var(--space-8); font-size: .9375rem; }
.site-footer__grid { display: grid; gap: var(--space-6); padding-bottom: var(--space-7); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; gap: var(--space-7); } }
.site-footer__brand p { color: var(--muted); max-width: 26rem; }
.site-footer__title { font: 600 .8125rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: var(--space-4); }
.site-footer ul li { margin-bottom: var(--space-2); }
.site-footer li > a { display: inline-block; padding-block: .3rem; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__contact li { display: flex; gap: var(--space-3); color: var(--muted); }
.site-footer__contact .icon { color: var(--accent); width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--border); color: var(--muted); font-size: .875rem; }
.site-footer__base p { margin: 0; }

/* ---------- floating page navigation (back to top / back to where you were) ---------- */
.scroll-nav {
  position: fixed; z-index: 40; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--space-2); pointer-events: none;
}
.scroll-nav__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.75rem; min-width: 2.75rem; padding: 0 .8rem;
  border: 1px solid color-mix(in srgb, var(--btn-text) 18%, transparent); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-text); font: 600 .875rem/1 var(--font-body); cursor: pointer;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / .45);
  opacity: 0; transform: translateY(.75rem); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .2s;
}
.scroll-nav__btn[data-to-top] { padding: 0; }
.scroll-nav__btn .icon { width: 1.15rem; height: 1.15rem; }
.scroll-nav__btn.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.scroll-nav__btn:hover { background: var(--btn-bg-hover); }
@media (max-width: 30rem) { .scroll-nav__label { display: none; } .scroll-nav__btn { padding: 0; } }
html:not(.js) .scroll-nav { display: none; }
@media print { .scroll-nav { display: none; } }

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print {
  .site-header, .site-footer, .cta-band, .related { display: none; }
  body { background: #fff; color: #000; }
}

/* Comfortable tap targets for standalone links on touch screens */
.contact-list a, .site-footer__base a { display: inline-block; padding-block: .3rem; }

/* ---------- homepage hero with the Japan–U.S. globe (always dark: the image is a night view) ----------
   Layout: headline above the globe, the arc directly beneath it, then the lead and buttons.
   From 64rem the lead and buttons sit inside the arc, over the Pacific, and the step cards
   overlay the bottom of the image. The arc apex is 18.23% of the image width below its top
   (0.324 × 941/1672), which is what the negative margins below are derived from. */
.hero-globe {
  --globe-bg: #06112f;
  /* Night navy matched to the generated banner and article images (sampled ~#06112f to #0b1a45),
     with a faint horizon glow at the top. */
  background: radial-gradient(ellipse 90% 55% at 50% 0%, rgb(16 34 88 / .55), transparent 70%), var(--globe-bg);
  color: #ffffff; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-globe__head { position: relative; z-index: 2; padding-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
/* Soft dark halo behind the headline so it stays readable over the bright rim of the globe. */
.hero-globe__head::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 45%; width: min(64rem, 120%); height: 150%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgb(6 17 47 / .78), rgb(6 17 47 / .45) 55%, transparent);
}
.hero-globe h1 { color: #ffffff; max-width: 22ch; margin: 0; text-shadow: 0 2px 24px rgb(6 17 47 / .7); }
.hero-globe .eyebrow { color: #a9bbff; }
.hero-globe .lead { color: #c9d2f3; max-width: 40rem; text-shadow: 0 1px 12px rgb(6 17 47 / .85); }
.btn--hero { background: #bfd1ff; color: #0d1333; }
.btn--hero:hover { background: #dbe5ff; color: #0d1333; }
.btn--hero-ghost { background: rgb(6 17 47 / .35); color: #ffffff; border-color: rgb(255 255 255 / .45); }
.btn--hero-ghost:hover { color: #ffffff; border-color: #ffffff; background: rgb(255 255 255 / .08); }
.hero-globe :focus-visible { outline-color: #bfd1ff; }

.hero-globe__visual { position: relative; margin-top: -4.5rem; }
.hero-globe__media { position: relative; container-type: inline-size; }
.hero-globe__media img, .hero-globe__video {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0;
}
.hero-globe__video { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.hero-globe__video.is-playing { opacity: 1; }
/* Fade the image into the background at the top and bottom. */
.hero-globe__media::before, .hero-globe__media::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero-globe__media::before { top: 0; height: 22%; background: linear-gradient(var(--globe-bg), transparent); }
.hero-globe__media::after { bottom: 0; height: 30%; background: linear-gradient(transparent, var(--globe-bg)); }
/* Readability: dim the whole image/video slightly, more toward the top and the centre where text sits. */
.hero-globe__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 38% at 50% 52%, rgb(6 17 47 / .55), transparent 100%),
    linear-gradient(rgb(6 17 47 / .35), rgb(6 17 47 / .12) 45%, rgb(6 17 47 / .25));
}

.hero-globe__intro { position: relative; z-index: 2; margin-top: calc(-1 * var(--space-5)); }
.hero-globe__intro .lead { margin-bottom: 0; }
.hero-globe__intro .actions { margin-top: var(--space-5); }
.hero-globe__chain { position: relative; z-index: 2; padding-block: var(--space-7); }
.chain-row { display: grid; gap: var(--space-2); counter-reset: chain; }
.chain-row li { counter-increment: chain; position: relative; display: flex; }
.chain-row a {
  position: relative; display: block; width: 100%; overflow: hidden; isolation: isolate;
  padding: var(--space-3) var(--space-4) var(--space-3) 3rem; text-decoration: none; cursor: pointer;
  background: rgb(8 18 44 / .72); border: 1px solid rgb(255 255 255 / .12); border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
/* Hover: a warm glow rises from the bottom (same orange as the arc), the number fills, an arrow slides in. */
.chain-row a::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transform: translateY(35%);
  background: radial-gradient(120% 90% at 50% 110%, rgb(255 150 60 / .32), rgb(255 150 60 / .08) 55%, transparent 75%);
  transition: opacity .35s ease, transform .35s ease;
}
/* Hover is detected on the <li>, which never moves, and only the card inside lifts. Hovering the card
   itself made it jitter: lifting it moved its edge out from under the cursor, which ended the hover. */
.chain-row li:hover a, .chain-row a:focus-visible { border-color: rgb(255 180 100 / .55); transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgb(255 140 50 / .45); }
.chain-row li:hover a::after, .chain-row a:focus-visible::after { opacity: 1; transform: none; }
.chain-row a span::after {
  content: "→"; display: inline-block; margin-left: .35rem; color: #ffc58a; opacity: 0; transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
}
.chain-row li:hover span::after, .chain-row a:focus-visible span::after { opacity: 1; transform: none; }
.chain-row li:hover a::before, .chain-row a:focus-visible::before { background: #ffb266; color: #1a1030; }
/* The number badge lives inside the card so it moves with it. */
.chain-row a::before {
  content: counter(chain); position: absolute; z-index: 1; left: var(--space-4); top: .8rem; width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; border-radius: 50%; background: rgb(255 170 80 / .18); color: #ffc58a;
  font: 700 .75rem/1 var(--font-head); pointer-events: none; transition: background-color .25s, color .25s;
}
.chain-row span { display: block; font-weight: 600; color: #ffffff; line-height: 1.35; }
.chain-row small { display: block; color: #aeb9e0; font-size: .875rem; }

@media (max-width: 39.99rem) {
  /* One compact, ordered column on phones; the short descriptions return from 40rem up. */
  .chain-row { grid-template-columns: 1fr; gap: .375rem; }
  .chain-row a { padding: .55rem .75rem .55rem 2.4rem; display: flex; align-items: center; min-height: 2.75rem; }
  .chain-row a::before { left: .75rem; top: 50%; transform: translateY(-50%); }
  .chain-row span { font-size: .9375rem; }
  .chain-row small { display: none; }
}
@media (min-width: 40rem) { .chain-row { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 47.99rem) {
  /* Phones: the same composition as wider screens, scaled down. Eyebrow and headline centred at the
     top, overlapping the dark space above the globe; the 4:3 crop keeps Japan and the U.S. in view
     (a taller crop would cut them off); lead and buttons centred under the image. */
  .hero-globe__head { text-align: center; padding-top: var(--space-7); }
  .hero-globe__head .eyebrow { display: block; max-width: 22rem; margin-inline: auto; text-wrap: balance; letter-spacing: .1em; }
  .hero-globe__head .eyebrow::before { display: none; }
  .hero-globe h1 { max-width: 20ch; margin-inline: auto; font-size: clamp(1.75rem, 1.1rem + 3.4vw, 2.25rem); text-wrap: balance; }
  .hero-globe__head::before { top: 50%; height: 170%; width: 140%; }
  .hero-globe__visual { margin-top: -2rem; }
  .hero-globe__media::before { height: 28%; }
  .hero-globe__intro { text-align: center; margin-top: -2.5rem; }
  .hero-globe__intro .lead { margin-inline: auto; max-width: 34rem; font-size: 1.0625rem; text-wrap: pretty; }
  .hero-globe__intro .actions { justify-content: center; }
  .hero-globe__chain { padding-top: var(--space-6); }
}
@media (min-width: 48rem) {
  /* Headline centred over the globe; the arc apex lands 1.75rem under it. */
  .hero-globe__head { text-align: center; }
  .hero-globe__head .eyebrow { justify-content: center; }
  .hero-globe__head .eyebrow::after { content: ""; width: 1.75rem; height: 3px; background: currentColor; flex: none; }
  .hero-globe h1 { max-width: none; font-size: clamp(2.25rem, 1rem + 2.6vw, 3.5rem); letter-spacing: -.03em; }
  .hero-globe h1 span { display: block; }
  .hero-globe__visual { margin-top: calc(-18.23vw + 1.75rem); }
  .hero-globe__media img, .hero-globe__video { aspect-ratio: 16 / 7.5; }
  .hero-globe__media::before { height: 14%; }
  .hero-globe__intro { text-align: center; margin-top: -6rem; }
  .hero-globe__intro .lead { margin-inline: auto; max-width: 36rem; text-wrap: balance; }
  .hero-globe__intro .actions { justify-content: center; }
}
@media (min-width: 75rem) {
  /* Lead and buttons inside the arc, over the Pacific; step cards over the bottom of the image. */
  .hero-globe__intro { position: absolute; left: 0; right: 0; top: calc(18.23vw + 2rem); margin: 0 auto; }
  .hero-globe__intro .lead { max-width: 36rem; font-size: 1.0625rem; }
  .hero-globe__media img, .hero-globe__video { aspect-ratio: auto; height: calc(30cqw + 20rem); }
  .hero-globe__media::after { height: 40%; }
  .hero-globe__chain { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; padding-block: 0 var(--space-4); }
  .chain-row { grid-template-columns: repeat(5, 1fr); }
  .chain-row a { padding: var(--space-3) var(--space-3) var(--space-3) 2.75rem; }
  .chain-row a::before { left: var(--space-3); top: .85rem; }
  .chain-row small { font-size: .8125rem; line-height: 1.4; }
}

/* ---------- hero pins (Japan and U.S. endpoints) and motion ----------
   Pin positions are the endpoints' coordinates in the source image, converted to container
   units: from 48rem up the image is scaled by width (object-position top); below that it is
   a 4:3 crop scaled by height and centred horizontally. */
.hero-globe__pin { position: absolute; z-index: 1; width: 0; height: 0; pointer-events: none; }
.hero-globe__pin--jp { left: 16.2cqw; top: 37.05cqw; }
.hero-globe__pin--us { left: 83cqw; top: 39.8cqw; } /* 4:3 crop, scaled by height, centred */
@media (min-width: 48rem) {
  .hero-globe__pin--jp { left: 24.64cqw; top: 27.8cqw; }
  .hero-globe__pin--us { left: 74.76cqw; top: 29.9cqw; }
}
.hero-globe__pin { transition: opacity .6s; }
.hero-globe__media:has(.is-playing) .hero-globe__pin { opacity: 0; } /* pins match the still image only */

@media (prefers-reduced-motion: no-preference) {
  .hero-globe__pin::before, .hero-globe__pin::after {
    content: ""; position: absolute; left: -.6rem; top: -.6rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
    border: 1.5px solid rgb(255 190 110 / .9); animation: pin-pulse 2.8s ease-out infinite;
  }
  .hero-globe__pin::after { animation-delay: 1.4s; }
  .hero-globe__pin--us::before { animation-delay: .7s; }
  .hero-globe__pin--us::after { animation-delay: 2.1s; }

  /* Short entrance: the text is readable almost immediately (keeps LCP fast). */
  .hero-globe__head > *, .hero-globe__intro > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-globe__head > :nth-child(2) { animation-delay: .06s; }
  .hero-globe__intro > :nth-child(1) { animation-delay: .18s; }
  .hero-globe__intro > :nth-child(2) { animation-delay: .24s; }
  .hero-globe__media img { animation: globe-in 1.8s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 40%; }
  .chain-row li { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .chain-row li:nth-child(1) { animation-delay: .35s; }
  .chain-row li:nth-child(2) { animation-delay: .42s; }
  .chain-row li:nth-child(3) { animation-delay: .49s; }
  .chain-row li:nth-child(4) { animation-delay: .56s; }
  .chain-row li:nth-child(5) { animation-delay: .63s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes globe-in { from { opacity: .4; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes pin-pulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }