/* ==========================================================================
   Nonbox V LLC — nonbox-v.com
   Design system. No build step, no dependencies.
   Restrained, typographic, generous with space: hierarchy is carried by type
   size and whitespace rather than by borders, icons and colour.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --ink:        #1d1d1f;
  --ink-soft:   #2f2f31;
  --body:       #55555a;
  --muted:      #6e6e73;
  --line:       #d2d2d7;
  --line-soft:  #e8e8ed;
  --surface:    #ffffff;
  --surface-2:  #f5f5f7;
  --surface-3:  #ebebef;

  --accent:      #1d1d1f;
  --accent-ink:  #000000;
  --accent-soft: #ebebef;
  --galaxy:      #6d28d9;   /* the one accent colour, used only by the hero route */

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Segoe UI", "Helvetica Neue",
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic",
               Meiryo, "Noto Sans JP", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius:    18px;
  --radius-lg: 28px;
  --maxw:      1120px;
  --maxw-text: 720px;
  --nav-h:     52px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, .06);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, .10);
}

[data-theme="dark"] {
  --ink:        #f5f5f7;
  --ink-soft:   #e3e3e6;
  --body:       #a1a1a6;
  --muted:      #86868b;
  --line:       #38383d;
  --line-soft:  #2a2a2e;
  --surface:    #000000;
  --surface-2:  #1a1a1c;
  --surface-3:  #262629;

  --accent:      #f5f5f7;
  --accent-ink:  #ffffff;
  --accent-soft: #262629;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, .6);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* The header is sticky, so anchored sections must stop clear of it or their
   first 53px land underneath. */
[id] { scroll-margin-top: calc(var(--nav-h) + 28px); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .45em; font-weight: 600; }
h1 { font-size: clamp(2.75rem, 6.4vw, 5rem);   line-height: 1.05; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem);   line-height: 1.08; letter-spacing: -.028em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; letter-spacing: -.02em; }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }
p { margin: 0 0 1.2em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .45em; }
strong { color: var(--ink); font-weight: 600; }
::selection { background: var(--ink); color: var(--surface); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

/* Links inside running text: the palette has no hue, so they are underlined. */
p a, dd a, address a, main li a:not(.chip):not(.btn), .faq a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
p a:hover, dd a:hover, address a:hover,
main li a:not(.chip):not(.btn):hover, .faq a:hover { text-decoration-color: currentColor; }

/* ---------- Japanese typography ----------
   The tracking above is tuned for Latin; applied to Japanese it squeezes the
   glyphs together. CJK also reads better with more leading, and should not
   break a line before closing punctuation. */
html[lang="ja"] body,
html[lang="ja"] .lead,
html[lang="ja"] .statement,
html[lang="ja"] h3,
html[lang="ja"] h4 { letter-spacing: 0; }
html[lang="ja"] h1 { letter-spacing: -.01em; line-height: 1.28; }
html[lang="ja"] h2 { letter-spacing: -.01em; line-height: 1.38; }
html[lang="ja"] h3 { line-height: 1.5; }
html[lang="ja"] body { line-height: 1.85; }
html[lang="ja"] .lead { line-height: 1.75; }
html[lang="ja"] .statement { line-height: 1.7; }
html[lang="ja"] p,
html[lang="ja"] li,
html[lang="ja"] .card p { line-break: strict; }
/* Japanese breaks between any two characters, which can split a word across
   lines. Wrapping a phrase in .nb makes it an inline-block, so a line can only
   break between phrases — never inside one. */
.nb { display: inline-block; }

/* Cyrillic sits better without the negative tracking too. */
html[lang="mn"] body { letter-spacing: 0; line-height: 1.65; }
html[lang="mn"] h1 { letter-spacing: -.02em; }
html[lang="mn"] h2 { letter-spacing: -.015em; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(72px, 11vw, 150px); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.section--alt { background: var(--surface-2); }
.center { text-align: center; }
.lead {
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  line-height: 1.4; letter-spacing: -.018em; color: var(--body); font-weight: 400;
}
.measure { max-width: var(--maxw-text); }
.measure-center { max-width: var(--maxw-text); margin-inline: auto; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* Section openers: a small label, a large statement, one supporting line. */
.eyebrow {
  display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); margin-bottom: .9rem; text-transform: none;
}
.eyebrow--center { text-align: center; }
.section-head { max-width: 780px; margin-bottom: clamp(40px, 5.5vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-bottom: 0; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-size: 1.0625rem; font-weight: 400; line-height: 1.2;
  padding: 12px 23px; border-radius: 980px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, opacity .22s ease;
}
.btn--primary { background: var(--accent); color: var(--surface); }
.btn--primary:hover { background: var(--accent-ink); color: var(--surface); }
.btn--ghost { color: var(--ink); border-color: var(--line); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: var(--ink); color: var(--surface); }
.btn--light:hover { background: var(--accent-ink); color: var(--surface); }
.btn--outline-light { color: var(--ink); border-color: var(--line); }
.btn--outline-light:hover { border-color: var(--ink); }
.btn--sm { padding: 8px 17px; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.btn-row--center { justify-content: center; }

/* Text link with a chevron. */
.link-arrow { display: inline-flex; align-items: center; gap: .25rem; font-size: 1.0625rem; color: var(--ink); }
.link-arrow::after { content: "\203A"; font-size: 1.35em; line-height: 0; transition: transform .2s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow svg { display: none; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.header.is-stuck { border-bottom-color: var(--line-soft); }
.header__inner { display: flex; align-items: center; gap: 18px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
/* One element, not two images: a hidden <img> is still downloaded, whereas a
   background image only fetches the file the current theme actually asks for.
   `contain` means a replacement logo of different proportions is letterboxed
   rather than stretched. */
.brand__mark {
  width: 58px; height: 20px; flex: none;
  background: url(../img/nbv-logo.png?v=2) left center / contain no-repeat;
}
[data-theme="dark"] .brand__mark { background-image: url(../img/nbv-logo-white.png?v=2); }
.brand__name { padding-left: 10px; border-left: 1px solid var(--line); }
.brand__sub { display: block; font-size: .625rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
  color: var(--ink); font-size: .8125rem; font-weight: 400; opacity: .82;
  padding: 6px 11px; border-radius: 8px; transition: opacity .2s ease;
}
.nav a:hover { opacity: 1; }
.nav a.is-active { opacity: 1; font-weight: 500; }
.nav a.btn--primary,
.nav a.btn--primary:hover,
.nav a.btn--primary.is-active { color: var(--surface); background: var(--accent); opacity: 1; }
.nav a.btn--primary:hover { background: var(--accent-ink); }
.header__actions { display: flex; align-items: center; gap: 6px; }

/* Language switcher. It lives inside .nav so there is one instance: a row in
   the header bar on a desktop, and a row of chips inside the menu on a phone. */
.lang {
  display: flex; align-items: center; gap: 2px;
  margin-inline: 8px; padding-inline: 10px;
  border-inline: 1px solid var(--line);
}
/* The inactive labels are dimmed to keep the current one legible at a glance,
   but not below .72 — at .5 they measured 3.3:1 on white, under AA for text. */
.nav .lang a { font-size: .8125rem; padding: 6px 7px; opacity: .72; }
.nav .lang a:hover { opacity: .92; }
.nav .lang a[aria-current] { opacity: 1; font-weight: 500; }


.theme-toggle {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink); opacity: .8;
  border-radius: 8px; cursor: pointer; transition: opacity .2s ease;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.nav-toggle { display: none; width: 30px; height: 30px; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; }

/* Touch targets. On a phone the footer links were only 15px tall — below the
   24px WCAG asks for, let alone the 44px Apple recommends — so they take a
   minimum height here without changing how they look on a desktop. */
@media (max-width: 900px) {
  .footer li a,
  .footer address a,
  .footer__legal a,
  .footer .brand,
  .header .brand,
  .chip,
  .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
  .footer li { margin-bottom: 0; }
  .footer address { line-height: 1.5; }
  .brand__sub { font-size: .6875rem; }
}

@media (max-width: 360px) {
  .brand__sub { display: none; }
}
@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  /* The nav is taken out of the flow below this width, so its margin-left:auto
     no longer pushes anything right: the actions need their own. */
  .header__actions { margin-left: auto; gap: 2px; }
  /* Touch targets: 44px minimum, without changing the icon size. */
  .theme-toggle, .nav-toggle { width: 44px; height: 44px; }
  .header__inner { gap: 12px; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line-soft);
    padding: 8px 24px 26px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { padding: 15px 2px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  /* .nav a above out-ranks .btn, so the call to action needs its shape restated
     or it renders as a square block with no horizontal padding. */
  .nav a.btn { border-bottom: 0; border-radius: 980px; padding: 13px 26px; font-size: 1.0625rem; font-weight: 400; }
  /* In the dropdown the switcher reads better as chips than as more menu rows. */
  .lang { border: 0; margin: 18px 0 0; padding: 0; gap: 8px; }
  .nav .lang a {
    font-size: 1rem; font-weight: 400; opacity: 1;
    padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center;
    border: 1px solid var(--line); border-radius: 980px;
  }
  .nav .lang a[aria-current] { border-color: var(--ink); font-weight: 500; }
  .nav .btn { margin-top: 18px; align-self: flex-start; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(72px, 13vw, 168px) clamp(56px, 9vw, 120px); text-align: center; }
.hero h1 { margin-bottom: .3em; }
.hero .lead { max-width: 680px; margin-inline: auto; margin-bottom: 2.2rem; }
.hero .btn-row { justify-content: center; }
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px;
  margin-top: 3.5rem; font-size: .9375rem; color: var(--muted);
}

/* ---------- Hero route ----------
   The one piece of colour and motion on the site: the arc between the two
   countries the company works across. The arc itself is drawn in the page's own
   ink so it belongs to the monochrome design; the only colour is the star that
   travels it, and the short stretch of arc it lights as it passes.
   Decorative, so it is hidden from assistive tech, and it holds still for
   anyone who asks for reduced motion. */
.route {
  display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.6vw, 18px);
  margin-top: clamp(40px, 5vw, 64px); font-size: .9375rem; color: var(--muted);
}
.route__city { white-space: nowrap; letter-spacing: -.005em; }
.route__svg { width: clamp(150px, 46vw, 240px); height: auto; overflow: visible; }

.route__line {
  fill: none; stroke: var(--ink); opacity: .55;
  stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: route-draw 1.9s cubic-bezier(.35, .8, .3, 1) .35s forwards;
}
.route__pin { fill: var(--ink); opacity: 0; animation: route-pin .5s ease .3s forwards; }
.route__pin--end { animation-delay: 2.05s; }

/* A short, blurred segment of arc that rides with the star in the same colour,
   so the line lights up around it and falls back to ink behind. pathLength="100"
   makes the dash units read as percentages, so it can follow exactly the same
   keyframe positions as the star. */
.route__glow {
  fill: none; stroke: currentColor; color: var(--galaxy);
  stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 12 188; stroke-dashoffset: 6; opacity: 0;
  filter: blur(1.5px);
  animation:
    route-glow   9s cubic-bezier(.45, 0, .55, 1) 2.3s infinite,
    route-galaxy 7s linear 2.3s infinite;
}

/* The star: a white-hot core inside a coloured halo, with a long horizontal
   streak and a short vertical spike — the shape a lens makes of a point of
   light. Ellipses taper at their ends on their own, so the streak needs no
   gradient; a little blur does the rest. */
.route__star {
  color: var(--galaxy);
  offset-path: path("M6 20 C 62 -8, 178 -8, 234 20");
  offset-rotate: 0deg;
  opacity: 0;
  animation:
    route-travel  9s cubic-bezier(.45, 0, .55, 1) 2.3s infinite,
    route-galaxy  7s linear 2.3s infinite;
}
/* Every layer of the flare breathes on its own period — 1.7s to 4.3s, none a
   multiple of another — so the combination never visibly repeats and the star
   reads as a light source rather than a shape being moved along the path.
   Peak opacity is held in --op per layer so each theme can tune it without
   losing the animation. */
.star__cast {
  fill: currentColor; filter: blur(26px); --op: .3;
  mix-blend-mode: screen;
  animation: cast-breathe 4.3s ease-in-out 2.3s infinite;
}
.star__streak {
  fill: currentColor; filter: blur(.7px); --op: 1;
  animation: streak-breathe 2.3s ease-in-out 2.3s infinite;
}
.star__streak--wide {
  filter: blur(4px); --op: .4;
  animation: streak-wide 3.1s ease-in-out 2.3s infinite;
}
.star__spike {
  fill: currentColor; filter: blur(.8px); --op: .9;
  animation: spike-breathe 2.9s ease-in-out 2.3s infinite;
}
/* Diagonals, so the light reaches every direction rather than only sideways. */
.star__ray {
  fill: currentColor; filter: blur(.8px); --op: .8;
  animation: ray-breathe 2.6s ease-in-out 2.3s infinite;
}
.star__ray--minor { --op: .5; filter: blur(1px);
  animation: ray-breathe 3.4s ease-in-out 2.3s infinite; }
.star__halo {
  fill: currentColor; filter: blur(9px); --op: .5;
  animation: halo-breathe 3.7s ease-in-out 2.3s infinite;
}
.star__bloom {
  fill: #fff; filter: blur(3.5px); --op: .55;
  animation: bloom-breathe 1.9s ease-in-out 2.3s infinite;
}
.star__core {
  fill: #fff; filter: blur(.6px);
  animation: core-pulse 1.7s ease-in-out 2.3s infinite;
}

@keyframes cast-breathe {
  0%, 100% { r: 52; opacity: calc(var(--op) * .6); }
  50%      { r: 76; opacity: var(--op); }
}
@keyframes streak-breathe {
  0%, 100% { rx: 29; opacity: calc(var(--op) * .7); }
  50%      { rx: 44; opacity: var(--op); }
}
@keyframes streak-wide {
  0%, 100% { rx: 48; opacity: calc(var(--op) * .55); }
  50%      { rx: 72; opacity: var(--op); }
}
@keyframes spike-breathe {
  0%, 100% { ry: 8;  opacity: calc(var(--op) * .6); }
  50%      { ry: 14; opacity: var(--op); }
}
@keyframes ray-breathe {
  0%, 100% { rx: 13; opacity: calc(var(--op) * .45); }
  50%      { rx: 23; opacity: var(--op); }
}
@keyframes halo-breathe {
  0%, 100% { r: 8.5; opacity: calc(var(--op) * .7); }
  50%      { r: 13;  opacity: var(--op); }
}
@keyframes bloom-breathe {
  0%, 100% { r: 3.8; opacity: calc(var(--op) * .7); }
  50%      { r: 5.6; opacity: var(--op); }
}
@keyframes core-pulse {
  0%, 100% { r: 2.1; }
  50%      { r: 3;   }
}

/* A white page cannot show light, only ink: a soft halo there reads as a smudge
   rather than a glow. So on the light theme the star is drawn crisp — hue in the
   core, most of the bloom taken away — and the cast light tints the page by
   multiplying rather than by adding, which on white is the only way light reads. */
:root:not([data-theme="dark"]) .star__core        { fill: currentColor; filter: blur(.3px); }
:root:not([data-theme="dark"]) .star__bloom       { fill: currentColor; --op: .16; filter: blur(4px); }
:root:not([data-theme="dark"]) .star__halo        { --op: .2;  filter: blur(8px); }
:root:not([data-theme="dark"]) .star__streak      { --op: .9;  filter: blur(.6px); }
:root:not([data-theme="dark"]) .star__streak--wide{ --op: .16; filter: blur(4px); }
:root:not([data-theme="dark"]) .star__spike       { --op: .5;  filter: blur(.7px); }
:root:not([data-theme="dark"]) .star__ray         { --op: .38; filter: blur(.9px); }
:root:not([data-theme="dark"]) .star__ray--minor  { --op: .2; }
:root:not([data-theme="dark"]) .star__cast        { --op: .16; mix-blend-mode: multiply; filter: blur(30px); }
:root:not([data-theme="dark"]) .route__glow       { filter: blur(1.1px); }

@keyframes route-draw { to { stroke-dashoffset: 0; } }
@keyframes route-pin  { to { opacity: .55; } }

/* Out to Japan and back again, pausing briefly at each end. */
@keyframes route-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  44%  { offset-distance: 100%; opacity: 1; }
  52%  { offset-distance: 100%; opacity: 1; }
  92%  { offset-distance: 0%;   opacity: 1; }
  100% { offset-distance: 0%;   opacity: 1; }
}
/* Centre of the dash = 6 - stroke-dashoffset, so these track route-travel one for one. */
@keyframes route-glow {
  0%   { stroke-dashoffset:   6; opacity: 0; }
  4%   { opacity: .9; }
  44%  { stroke-dashoffset: -94; opacity: .9; }
  52%  { stroke-dashoffset: -94; opacity: .9; }
  92%  { stroke-dashoffset:   6; opacity: .9; }
  100% { stroke-dashoffset:   6; opacity: .9; }
}
/* Nebula hues: violet, magenta, blue, cyan. Deeper on the light theme, where
   bright ones wash out against white. */
@keyframes route-galaxy {
  0%   { color: #6d28d9; }
  25%  { color: #a21caf; }
  50%  { color: #1d4ed8; }
  75%  { color: #0e7490; }
  100% { color: #6d28d9; }
}
@keyframes route-galaxy-bright {
  0%   { color: #a855f7; }
  25%  { color: #f472d0; }
  50%  { color: #60a5fa; }
  75%  { color: #22d3ee; }
  100% { color: #a855f7; }
}
[data-theme="dark"] .route__star { animation-name: route-travel, route-galaxy-bright; }
[data-theme="dark"] .route__glow { animation-name: route-glow,   route-galaxy-bright; }

@media (prefers-reduced-motion: reduce) {
  .route__line { stroke-dashoffset: 0; animation: none; }
  .route__pin { opacity: .55; animation: none; }
  .route__star, .route__glow { display: none; }
}

.hero__langs { margin-top: 1.1rem; font-size: .9375rem; color: var(--muted); }

/* Oversized statement used to open or close a page. */
.statement {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.2; letter-spacing: -.025em;
  font-weight: 600; color: var(--ink); max-width: 900px;
}
.statement em,
.statement__sub { font-style: normal; color: var(--muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-2); border: 0; border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 44px);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.section--alt .card { background: var(--surface); }
.card--link:hover { transform: translateY(-3px); }
.card h3 { margin-bottom: .35em; }
.card p { color: var(--body); margin-bottom: 0; font-size: 1.0625rem; }
.card p + .link-arrow { margin-top: 1.3rem; }
.card__icon { display: none; }
.card__num { font-size: .8125rem; color: var(--muted); margin-bottom: 1rem; letter-spacing: .01em; }
.card__list { margin: 1.4rem 0 0; padding: 0; list-style: none; }
.card__list li {
  font-size: 1.0625rem; color: var(--body); margin: 0;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.card__list li:last-child { padding-bottom: 0; }
.card--feature { background: var(--surface-3); }
.grid-3 > .card, .grid-4 > .card { padding: clamp(24px, 2.5vw, 32px); }
.grid-4 > .card p { font-size: 1rem; }

/* ---------- Stats ---------- */
.stat { padding: 4px 0; border: 0; background: none; }
.stat b {
  display: block; font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 600;
  color: var(--ink); letter-spacing: -.035em; line-height: 1; margin-bottom: .35rem;
}
/* Direct child only: a <span lang="ja"> nested inside the <b> would otherwise
   be caught by this rule and rendered small and grey inside the big number. */
.stat > span { font-size: 1rem; color: var(--muted); }
.stat--text b { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.split--reverse .split__media { order: -1; }
/* Cards sitting inside one half of a split have little room, so they stack
   rather than sitting side by side in a column that is already narrow. */
.split__media .grid-2:has(.card) { grid-template-columns: minmax(0, 1fr); }
.split--top { align-items: start; }
@media (max-width: 900px) { .split--reverse .split__media { order: 0; } }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 0; }
.step { padding: clamp(26px, 3vw, 38px) 0; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 8px 24px; }
.step:first-child { border-top: 0; }
@media (max-width: 640px) { .step { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.step::before { content: counter(step, decimal-leading-zero); counter-increment: step; font-size: .9375rem; color: var(--muted); padding-top: .3em; }
.steps { counter-reset: step; }
.step h3 { margin-bottom: .25em; }
.step p { margin-bottom: 0; }
.step > * { grid-column: 2; }
@media (max-width: 640px) { .step > * { grid-column: 1; } }

/* ---------- Chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 7px 15px; border-radius: 980px; background: var(--surface-2);
  font-size: .9375rem; color: var(--ink-soft); border: 0;
}
.section--alt .chip { background: var(--surface); }
.chip--accent { background: var(--surface-3); }

/* ---------- Offices ---------- */
.office { background: var(--surface-2); border: 0; border-radius: var(--radius-lg); padding: clamp(28px, 3.4vw, 44px); container-type: inline-size; }
.section--alt .office { background: var(--surface); }
.office__flag { font-size: 1.75rem; line-height: 1; margin-bottom: 14px; }
.office h3 { margin-bottom: .15em; }
.office__jp { font-size: 1rem; color: var(--muted); margin: 0 0 1.6rem; }
.office dl { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 20px; margin: 0; font-size: 1rem; }
.office dt { color: var(--muted); padding: 10px 0; border-top: 1px solid var(--line-soft); }
.office dd { margin: 0; color: var(--ink-soft); padding: 10px 0; border-top: 1px solid var(--line-soft); }
@container (max-width: 360px) {
  .office dl { grid-template-columns: minmax(0, 1fr); }
  .office dt { padding-bottom: 0; font-size: .875rem; }
  .office dd { border-top: 0; padding-top: 2px; }
}

/* ---------- Panel (feature list) ---------- */
.panel { background: var(--surface-2); border: 0; border-radius: var(--radius-lg); overflow: hidden; }
.section--alt .panel { background: var(--surface); }
.panel__bar { display: none; }
.panel__body { padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 0; }
.panel-row { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.panel-row:first-child { border-top: 0; padding-top: 0; }
.panel-row:last-child { padding-bottom: 0; }
.panel-row__icon { display: none; }
.panel-row b { display: block; color: var(--ink); font-size: 1.0625rem; font-weight: 600; }
.panel-row small { color: var(--muted); font-size: 1rem; }
.panel-row__tag { margin-left: auto; font-size: .8125rem; color: var(--muted); }

/* ---------- Closing band ---------- */
.cta { background: var(--surface-2); border-radius: var(--radius-lg); padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 64px); text-align: center; }
.cta h2 { color: var(--ink); }
.cta p { color: var(--body); max-width: 620px; margin-inline: auto; font-size: clamp(1.1rem, 1.7vw, 1.3rem); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .9375rem; color: var(--muted); }
.field label span { color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1.0625rem; color: var(--ink);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent);
}
.field__hint, .form__note { font-size: .9375rem; color: var(--muted); }
.form__note { margin: 0; }
.form-status { font-size: .9375rem; color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: 26px 44px 26px 0; position: relative;
  color: var(--ink); font-size: 1.1875rem; font-weight: 500; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding-right: 44px; margin-bottom: 26px; }

/* ---------- Page header ---------- */
.page-head { padding-block: clamp(60px, 9vw, 128px) clamp(28px, 4vw, 56px); text-align: center; }
.page-head h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
.page-head .lead { max-width: 680px; margin-inline: auto; margin-bottom: 0; }
.page-head .chip-row { justify-content: center; }
.page-head .btn-row { justify-content: center; }
.breadcrumb { display: none; }

/* ---------- Footer ---------- */
.footer { background: var(--surface-2); padding-block: clamp(44px, 5vw, 64px) 28px; font-size: .8125rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
@media (max-width: 880px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.footer__about p { max-width: 34ch; margin-top: 1rem; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.footer__heading { font-size: .8125rem; color: var(--ink); margin: 0 0 .9rem; font-weight: 600; letter-spacing: -.005em; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55em; }
.footer li a, .footer address a { color: var(--muted); font-size: .8125rem; }
.footer li a:hover, .footer address a:hover { color: var(--ink); text-decoration: underline; }
.footer address { font-style: normal; line-height: 1.6; color: var(--muted); }
.footer address strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .1em; }
.footer address + address { margin-top: 1rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted);
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { color: var(--muted); }
.footer__legal a:hover { color: var(--ink); }
.footer .brand { font-size: .875rem; }
.footer .brand__mark { height: 18px; }

/* ---------- Utility ---------- */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: var(--surface); padding: 12px 20px; border-radius: 10px; }
.skip-link:focus { left: 24px; color: var(--surface); }

/* Text for screen readers only — a new-tab warning, for instance, which sighted
   users get from the icon next to the link. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The mobile menu is a panel, not a full-screen overlay, so the page behind it
   has to be held still or it scrolls into the gap below the panel. */
html.is-menu-open, html.is-menu-open body { overflow: hidden; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-3 { margin-top: 2rem; }
.badge { display: inline-block; font-size: .9375rem; color: var(--muted); margin-bottom: 1.4rem; }
.badge__dot { display: none; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- 404 ---------- */
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 100px; }
.error-page .code { font-size: 1rem; color: var(--muted); margin-bottom: 1.2rem; }
.error-page h1 { font-size: clamp(2rem, 4vw, 3rem); }