/* ==========================================================================
   KŌRO SPORTS AGENCY — v1
   Font: Noto Sans JP (JP) / Inter (EN)
   Colors: main #091e2e / bg #f4f1ec / accent #ef1111
   Base sizes: body 13.5px / heading 22px
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; border: none; background: none; }
button { cursor: pointer; }
fieldset { border: none; }

/* ---------- Tokens ---------- */
:root{
  --c-main: #091e2e;
  --c-bg: #f4f1ec;
  --c-accent: #ef1111;
  --c-white: #ffffff;
  --c-line: rgba(9, 30, 46, 0.14);
  --c-line-strong: rgba(9, 30, 46, 0.28);
  --c-muted: rgba(9, 30, 46, 0.62);

  --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-en: 'Inter', var(--font-jp), sans-serif;

  --fs-body: 13.5px;
  --fs-small: 11.5px;
  --fs-heading: 22px;

  --container-w: 1220px;
  --gutter: clamp(24px, 5vw, 64px);

  --ease: cubic-bezier(.16,.84,.32,1);
  --header-h: 112px;
}

html{
  scroll-behavior: smooth;
}

body{
  background: var(--c-bg);
  color: var(--c-main);
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Latin runs use Inter for tighter, sportier tracking */
.en, .kicker, .display, .btn span:not(.icon-arrow), .main-nav__link, .brand,
.service-card__eyebrow, .approach-card__eyebrow, .person-card__role,
.hero__note, .scroll-cue__label, .site-footer__title, .lang-toggle,
.cta-band__headline, .steps__num, input, textarea, .req, .badge-arrow + *{
  font-family: var(--font-en);
}

.wordmark{ font-family: var(--font-en); }

.container{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Icon: arrow motif ---------- */
.icon-arrow{
  width: 1em;
  height: 0.4em;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
}

/* ---------- Loader ---------- */
.loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader__mark{
  width: 64px;
  animation: loaderMove 1.1s var(--ease) infinite alternate;
}
.loader__mark img{ width: 100%; }
.loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loaderMove{
  from{ transform: translateX(-12px); opacity: .4; }
  to{ transform: translateX(12px); opacity: 1; }
}

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), height .4s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(244, 241, 236, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--c-line);
  height: 84px;
}
.site-header__inner{
  width: 100%;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand{ display: inline-flex; align-items: center; }
/* Plain <img> + filter (same technique as the footer logo) instead of a CSS
   mask-image: mask-image's url() is resolved relative to this stylesheet
   and has proven fragile across how this project's dev server serves /v1 vs
   root, so it intermittently 404'd and the logo disappeared. An <img src>
   path is resolved relative to the HTML page instead and has been reliable. */
.brand__logo{
  display: block;
  height: 53px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: height .4s var(--ease), filter .35s var(--ease);
}
.site-header.is-scrolled .brand__logo{ height: 41px; filter: none; }

/* Transparent (top-of-page) state: nav text, hamburger, and lang toggle read
   cream against the hero photo instead of navy. */
.site-header:not(.is-scrolled) .main-nav__link{ color: var(--c-bg); }
.site-header:not(.is-scrolled) .lang-toggle{ color: rgba(244,241,236,.6); }
.site-header:not(.is-scrolled) .lang-toggle .is-active{ color: var(--c-bg); }
.site-header:not(.is-scrolled) .menu-btn span{ background: var(--c-bg); }
/* The mobile dropdown panel is always opaque cream, so its own text must stay
   dark regardless of whether the header bar behind it is transparent. */
.site-header:not(.is-scrolled) .main-nav.is-open .main-nav__link,
.site-header:not(.is-scrolled) .main-nav.is-open .lang-toggle,
.site-header:not(.is-scrolled) .main-nav.is-open .lang-toggle .is-active{ color: var(--c-main); }

.main-nav{ display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.main-nav__list{ display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.main-nav__link{
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--c-main);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  transition: color .3s var(--ease);
}
.main-nav__link::after{
  content: '';
  position: absolute;
  left: 50%; bottom: -1px;
  width: 0; height: 2px;
  background: var(--c-accent);
  transition: width .35s var(--ease), left .35s var(--ease);
}
.main-nav__link:hover::after,
.main-nav__link.is-active::after{ width: 100%; left: 0; }

.lang-toggle{
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .05em;
  color: var(--c-muted);
  cursor: pointer;
}
.lang-toggle .is-active{ color: var(--c-main); font-weight: 700; }
.lang-toggle .divider{ opacity: .4; }

.menu-btn{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
}
.menu-btn span{
  display: block; height: 2px; width: 100%;
  background: var(--c-main);
  transition: transform .35s var(--ease), opacity .35s var(--ease), background-color .3s var(--ease);
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: flex-end;
  gap: 14px;
  padding: 16px 28px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--c-main);
  border-radius: 0;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.btn span:not(.btn__arrow){ line-height: 1; transform: translateY(1.75px); }
.btn__arrow{ font-size: 18px; line-height: 0; transition: transform .4s var(--ease); }
.btn--primary{ background: var(--c-main); color: var(--c-white); }
.btn--primary:hover{ background: var(--c-accent); border-color: var(--c-accent); transform: translateX(2px); }
.btn--primary:hover .btn__arrow{ transform: translateX(6px); }
.btn:disabled{ opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn--outline{ background: transparent; color: var(--c-white); border-color: rgba(255,255,255,.4); }
.btn--outline:hover{ background: var(--c-white); color: var(--c-main); transform: translateX(2px); }
.btn--outline:hover .btn__arrow{ transform: translateX(6px); }
.btn--full{ width: 100%; justify-content: center; }

/* ---------- Section shell ---------- */
main > section{ position: relative; padding-block: clamp(72px, 11vw, 148px); border-top: 1px solid var(--c-line); }
.hero{ border-top: none; padding-block: 0; }

.section-head__meta{
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--c-main);
}
.section-head__index{
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 15px;
  color: var(--c-accent);
  letter-spacing: .02em;
}
.kicker{
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.display{
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.02;
  font-size: clamp(34px, 5.2vw, 68px);
  text-transform: uppercase;
}
.accent-jp{
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, var(--fs-heading));
  color: var(--c-muted);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  display: inline-block;
}
.section-head{ max-width: 780px; margin-bottom: clamp(24px, 3.5vw, 48px); }
.section-head--split{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  max-width: none;
}
.section-head--split .section-head__meta{ width: 100%; }
.section-head__desc{ max-width: 360px; color: var(--c-muted); padding-bottom: 4px; text-align: left; }

/* ---------- Dark section variant (alternating background rhythm) ---------- */
.section--dark{
  background: var(--c-main);
  color: var(--c-white);
  border-top: none;
}
/* Process ends with the cta-band, which already supplies its own bottom
   breathing room. The section's own padding-bottom would add a SECOND
   same-navy gap right before Team's (also navy) padding-top, and because
   there's no color change between them to mark a boundary, the two gaps
   read as one oversized space. Dropping it leaves just one gap. */
.process{ padding-bottom: 0; }
.section--dark .section-head__meta{ border-bottom-color: rgba(255,255,255,.3); }
.section--dark .kicker{ color: rgba(255,255,255,.55); }
.section--dark .display{ color: var(--c-white); }
.section--dark .accent-jp{ color: rgba(255,255,255,.6); border-top-color: rgba(255,255,255,.18); }
.section--dark .section-head__desc{ color: rgba(255,255,255,.6); }

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
}
.hero__media{ position: absolute; inset: 0; z-index: 0; }
.hero__img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12);
  animation: heroZoom 16s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform: scale(1); } }
.hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,30,46,.55) 0%, rgba(9,30,46,.25) 32%, rgba(9,30,46,.55) 78%, rgba(9,30,46,.85) 100%);
}
.hero__content{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding: calc(var(--header-h) + 24px) var(--gutter) 96px;
  color: var(--c-white);
  /* The -100px horizontal pull is only safe once the container's own
     centering margin (which only exists above --container-w) is wide
     enough to absorb it — otherwise the content gets pulled past the
     header logo's left edge. Below 1220px there's no centering margin at
     all, so the shift is clamped to 0; above it, the shift ramps up with
     the margin, capping at the full -100px once the margin exceeds it. */
  transform: translate(calc(-1 * min(100px, max(0px, (100vw - var(--container-w)) / 2))), -150px);
}
.hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: -50px;
  margin-bottom: 32px;
}
.badge-arrow{ font-size: 16px; color: var(--c-accent); }

.hero__meta-strip{
  position: absolute;
  left: var(--gutter);
  bottom: 36px;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  gap: clamp(24px, 4vw, 56px);
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.28);
}
.hero__headline{
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.04;
  font-size: clamp(34px, 5.6vw, 76px);
  max-width: 18ch;
}
.hero__subhead{
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: .02em;
  color: rgba(255,255,255,.72);
  margin-bottom: 14px;
}
.hero__actions{
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.hero__note{ font-size: 12.5px; color: rgba(255,255,255,.72); max-width: 26ch; transform: translateY(2.375px); }

.scroll-cue{
  position: absolute;
  right: var(--gutter);
  bottom: 36px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--c-white);
}
/* Rotating the arrow leaves its LAYOUT box at the pre-rotation (wide, short)
   size, even though the painted shape is now tall and narrow — that slack
   was the real gap between the arrow and the label, not the flex `gap`.
   Sizing the wrapper to the true post-rotation footprint and centering the
   svg inside it removes that slack. */
.scroll-cue__arrow{
  position: relative;
  display: inline-block;
  font-size: 58px;
  width: 0.4em;
  height: 1em;
  animation: cueBounce 1.6s var(--ease) infinite;
}
.scroll-cue__arrow svg{
  position: absolute;
  top: 50%; left: 50%;
  width: 1em; height: 0.4em;
  transform: translate(-50%, -50%) rotate(90deg);
}
@keyframes cueBounce{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}
.scroll-cue__label{
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

/* ---------- Marquee divider ---------- */
.marquee{
  overflow: hidden;
  background: var(--c-main);
  padding-block: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.marquee__track{
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marqueeScroll 22s linear infinite;
  color: var(--c-accent);
  font-size: 15px;
}
.marquee__track .icon-arrow{ opacity: .85; }
.marquee__track span.gap{ width: 4px; }
@keyframes marqueeScroll{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

/* ---------- Philosophy ---------- */
.philosophy__grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  /* Bottom-align the two columns as whole boxes so their last lines —
     才能に、航路を引く。 on the left and 10年先のキャリアを前提に。 on the
     right — land on the same baseline. */
  align-items: end;
}
.philosophy__grid > .section-head{ margin-bottom: 0; }
.philosophy__body{ text-align: left; }
.philosophy__body p{ color: var(--c-muted); }
.philosophy__body p + p{ margin-top: 18px; }
.philosophy__emph{
  font-weight: 700;
  color: var(--c-main) !important;
  font-size: 15px;
}

/* ---------- Meaning of KŌRO (EN only) ---------- */
.kanji{
  background: var(--c-main);
  color: var(--c-white);
  padding-block: clamp(48px, 6vw, 72px);
}
.kanji__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
  text-align: center;
}
.kanji__item{
  padding-inline: 16px;
  border-left: 1px solid rgba(255,255,255,.16);
}
.kanji__item:first-child{ border-left: none; }
.kanji__glyph{
  display: block;
  font-family: var(--font-jp);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
}
.kanji__item--combined .kanji__glyph{ font-size: clamp(30px, 3.6vw, 44px); }
.kanji__reading{
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 10px;
}
.kanji__desc{
  font-size: 13px;
  color: rgba(255,255,255,.68);
  max-width: 22ch;
  margin-inline: auto;
}

/* ---------- Services ---------- */
.card-grid{
  border-top: 1px solid var(--c-main);
}
.service-card{
  position: relative;
  display: grid;
  grid-template-columns: clamp(56px, 8vw, 96px) 1fr;
  column-gap: clamp(16px, 3vw, 32px);
  align-items: start;
  padding-block: clamp(24px, 3.6vw, 36px);
  border-bottom: 1px solid var(--c-line);
  transition: background-color .4s var(--ease);
}
.service-card:hover{ background: rgba(9,30,46,.03); }
.service-card__num{
  font-family: var(--font-en);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  line-height: .8;
  color: var(--c-line-strong);
  transition: color .4s var(--ease);
}
.service-card:hover .service-card__num{ color: var(--c-accent); }

.service-card__content{
  display: grid;
  /* auto-sized flanking columns (not minmax ranges) so the middle 1fr track
     is exactly the true whitespace between the two text blocks — that's what
     makes the arrow land centered in the gap instead of centered in the
     column's reserved-but-partly-empty width. */
  grid-template-columns: auto 1fr auto;
  align-items: start;
  column-gap: 20px;
}
.service-card__title-en{
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.15;
  letter-spacing: 0;
}

/* Connector arrow: fixed-size head (koro_symbol_arrow) + a tail bar that
   flex-grows to fill the gap. Height stays constant row-to-row; only the
   tail's length changes with the available width. Revealed with a
   left-to-right clip wipe on the whole tail+head unit. */
.service-card__arrow{
  display: flex;
  align-items: flex-end;
  font-size: 46px;
  color: var(--c-accent);
  margin-top: 6.3px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s var(--ease);
}
.service-card:hover .service-card__arrow{ clip-path: inset(0 0% 0 0); }
.icon-arrow-dyn{
  display: block;
  width: 100%;
  height: 0.4em;
  fill: currentColor;
}
.icon-arrow-middle{
  width: 100%;
  height: auto;
  fill: currentColor;
  display: block;
}

/* EN mode: the Japanese title is a same-meaning restatement of
   .service-card__title-en shown to its left, and the connector arrow
   exists to link the two — neither is needed once the row reads in
   English only. */
body.lang-en .service-card__title-jp{ display: none; }

/* Japanese-only accent lines that just restate the adjacent English
   headline — kept for the Japanese version, hidden in English. */
body.lang-en .jp-only{ display: none; }

/* English-only content: sections with no JP equivalent by design
   (e.g. the kanji breakdown — JP readers already know the characters).
   Hidden by default (default language is JP), shown once body.lang-en
   is set. */
.en-only{ display: none; }
body.lang-en .en-only{ display: block; }

/* The 8px margin-left on this span exists to space it from the
   preceding Japanese text ("行動規範 ") — with that text hidden in
   English mode, the span is the label's only content and the margin
   just reads as a stray left indent. */
body.lang-en .credentials__conduct-label span{ margin-left: 0; }

/* With the kanji name hidden in English mode, the romaji name becomes
   the primary name and should read at the same size/weight as the
   Japanese heading it replaces. */
body.lang-en .person-card__name-en{
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  color: inherit;
  margin-top: 0;
}

.service-card__jp{ text-align: left; max-width: 360px; margin-left: auto; }
.service-card__title-jp{
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  transform: translateY(-2.7px);
  margin-bottom: 8px;
}
.service-card__desc{ color: var(--c-muted); margin-left: auto; }

.section--dark .card-grid{ border-top-color: rgba(255,255,255,.35); }
.section--dark .service-card{ border-bottom-color: rgba(255,255,255,.14); }
.section--dark .service-card:hover{ background: rgba(255,255,255,.04); }
.section--dark .service-card__num{ color: rgba(255,255,255,.2); }
.section--dark .service-card:hover .service-card__num{ color: var(--c-accent); }
.section--dark .service-card__title-en{ color: var(--c-white); }
.section--dark .service-card__title-jp{ color: var(--c-white); }
.section--dark .service-card__desc{ color: rgba(255,255,255,.6); }

/* ---------- Approach ---------- */
.approach-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 80px);
}
.approach-card{
  padding-top: 20px;
  border-top: 1px solid var(--c-main);
  transition: border-color .35s var(--ease);
}
.approach-card:hover{ border-top-color: var(--c-accent); }
.approach-card__num{
  display: block;
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--c-line-strong);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  margin-bottom: 18px;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.approach-card:hover .approach-card__num{ color: var(--c-accent); transform: translateX(8px); }
.approach-card__eyebrow{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-muted);
  margin-bottom: 10px;
}
.approach-card__title{
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 700;
  margin-bottom: 12px;
  transition: color .3s var(--ease);
}
.approach-card:hover .approach-card__title{ color: var(--c-accent); }
.approach-card__desc{ color: var(--c-muted); max-width: 46ch; }

/* ---------- Process ---------- */
/* .steps is the real grid; the numeral row and body row are subgrids of it,
   so they share the exact same column tracks (computed once, from the
   widest content in each column across BOTH rows) instead of each row
   sizing its "auto" 4th column independently — that independent sizing was
   what let 04's numeral and its title/desc drift out of alignment.
   Columns 1-3 flex (1fr) so their connector arrows get generous, roomy
   space; column 4 has no connector after it, so it's sized to its own
   content (auto) instead of an equal 1fr share — an equal share would leave
   a big dead gap after "04" with nothing to fill it, which is what made the
   row look like it stopped short of the other sections' width. */
.steps{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  row-gap: 22px;
}
.steps__numbers,
.steps__bodies{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
.steps__num-cell{ display: flex; align-items: center; }
.steps__num{
  display: block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: .8;
  color: var(--c-white);
  flex: 0 0 auto;
  transition: color .3s var(--ease);
}
.steps__num-cell:hover .steps__num{ color: var(--c-accent); }
.steps__connector-wrap{
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  height: clamp(32px, 4vw, 51.2px);
  padding-inline: 15px;
}
.steps__connector{
  display: block;
  width: 100%;
  margin-bottom: 1.6px;
  color: rgba(255,255,255,.35);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s var(--ease);
}
.steps.is-visible .steps__connector{ opacity: 1; transform: translateX(0); }
.steps__num-cell:nth-child(1) .steps__connector{ transition-delay: .15s; }
.steps__num-cell:nth-child(2) .steps__connector{ transition-delay: .3s; }
.steps__num-cell:nth-child(3) .steps__connector{ transition-delay: .45s; }

@keyframes connectorShoot{
  0%{ transform: translateX(-14px); }
  55%{ transform: translateX(6px); }
  100%{ transform: translateX(0); }
}
.steps__numbers:has(.steps__num-cell:nth-child(2):hover) .steps__num-cell:nth-child(1) .steps__connector{ color: var(--c-accent); animation: connectorShoot .55s var(--ease); }
.steps__numbers:has(.steps__num-cell:nth-child(3):hover) .steps__num-cell:nth-child(2) .steps__connector{ color: var(--c-accent); animation: connectorShoot .55s var(--ease); }
.steps__numbers:has(.steps__num-cell:nth-child(4):hover) .steps__num-cell:nth-child(3) .steps__connector{ color: var(--c-accent); animation: connectorShoot .55s var(--ease); }
.steps__title{ font-size: var(--fs-heading); font-weight: 700; margin-bottom: 10px; color: var(--c-white); }
.steps__desc{ color: rgba(255,255,255,.6); max-width: 26ch; }

.cta-band{
  position: relative;
  margin-top: clamp(64px, 9vw, 120px);
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--c-bg);
  overflow: hidden;
}
.cta-band__inner{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}
/* The symbol flex-grows to fill whatever room is left between the text
   block and the button (like the process-section connectors), and the svg
   inside scales to the largest size that fits that space — width OR height,
   whichever is the tighter constraint — without distorting its aspect
   ratio or overflowing the row. */
.cta-band__symbol{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(60px, 12vw, 180px);
  padding-inline: 30px;
  color: rgba(9,30,46,.12);
}
.cta-band__symbol .icon-arrow{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform: translateX(-15px);
}
.cta-band__eyebrow{
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 14px;
}
/* Narrowed to hug the actual longest rendered line (~390px) instead of the
   old 640px cap. Block children (h3/p) fill 100% of whatever width this box
   is given regardless of how the text itself wraps, so a wider cap than the
   text needs leaves invisible box padding after the last line — the symbol
   was measuring its 30px gap from THAT phantom edge, not the visible text,
   which read as a much bigger gap than 30px. */
.cta-band__text{ max-width: 410px; }
.cta-band__headline{
  color: var(--c-main);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.15;
  font-size: clamp(26px, 3.6vw, 46px);
  text-transform: uppercase;
}
.cta-band__jp{
  color: var(--c-muted);
  font-size: 14px;
  margin-top: 18px;
}
.cta-band .btn{ flex: 0 0 auto; }
.cta-band__jp-break{ display: none; }
.hero__note-break{ display: inline; }

/* ---------- People ---------- */
.people-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 5vw, 72px);
}
.person-card{
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 28px;
}
.person-card__photo{
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-main);
}
.person-card__photo img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(65%);
  transform: scale(1.02);
  transition: filter .5s var(--ease), transform .6s var(--ease);
}
.person-card:hover .person-card__photo img{ filter: grayscale(0%); transform: scale(1.06); }
.person-card__role{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-accent);
  margin-bottom: 10px;
}
.person-card__name{
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  margin-bottom: 14px;
}
.person-card__name-en{
  display: block;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 13px;
  color: var(--c-muted);
  margin-top: 4px;
}
.person-card__desc{ color: var(--c-muted); margin-bottom: 16px; }
.person-card__meta{ margin-bottom: 16px; }
.person-card__meta li{
  font-family: var(--font-en);
  font-size: 11.5px;
  color: var(--c-muted);
  padding-left: 14px;
  position: relative;
}
.person-card__meta li::before{
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 5px; height: 1px;
  background: var(--c-accent);
}
.person-card__mail{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 12.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 2px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.person-card__mail .icon-arrow{ font-size: 13px; transition: transform .35s var(--ease); }
.person-card__mail:hover{ color: var(--c-accent); border-color: var(--c-accent); }
.person-card__mail:hover .icon-arrow{ transform: translateX(4px); }

/* ---------- Credentials (License & Code of Conduct) ---------- */
.credentials{
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--c-main);
}
.credentials__title{
  font-size: 15px;
  font-weight: 700;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.credentials__licenses{
  display: grid;
  grid-template-columns: 110px 1fr auto 1fr;
  column-gap: clamp(16px, 2.5vw, 32px);
  border-top: 1px solid var(--c-line);
  margin-bottom: 20px;
}
/* Each row is a subgrid spanning all four parent columns — it inherits the
   exact column tracks from .credentials__licenses (keeping the number/issuer
   columns aligned across rows) while still being a real box, so its own
   border-bottom draws one unbroken line instead of stopping at each cell. */
.credentials__row{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--c-line);
}
.credentials__cell{
  font-size: 12.5px;
  align-self: baseline;
  padding-block: 11px;
  text-align: left;
}
.credentials__cell--label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.credentials__row .credentials__cell:nth-child(2){ font-weight: 700; }
.credentials__row .credentials__cell:nth-child(3){
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--c-accent);
}
.credentials__row .credentials__cell:nth-child(4){ color: var(--c-muted); }
.credentials__conduct-label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 10px;
}
.credentials__conduct-label span{
  font-family: var(--font-en);
  font-weight: 600;
  color: var(--c-line-strong);
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}
.credentials__conduct-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(24px, 4vw, 48px);
}
.credentials__conduct-list li{
  font-size: 12.5px;
  font-weight: 600;
  padding-block: 9px;
  border-bottom: 1px solid var(--c-line);
}

.section--dark .person-card__photo{ background: rgba(255,255,255,.08); }
.section--dark .person-card__name{ color: var(--c-white); }
.section--dark .person-card__name-en{ color: rgba(255,255,255,.6); }
.section--dark .person-card__desc{ color: rgba(255,255,255,.6); }
.section--dark .person-card__meta li{ color: rgba(255,255,255,.6); }
.section--dark .person-card__mail{ color: var(--c-white); border-bottom-color: rgba(255,255,255,.4); }
.section--dark .credentials{ border-top-color: rgba(255,255,255,.3); }
.section--dark .credentials__title{ color: rgba(255,255,255,.6); }
.section--dark .credentials__licenses{ border-top-color: rgba(255,255,255,.14); }
.section--dark .credentials__row{ border-bottom-color: rgba(255,255,255,.14); }
.section--dark .credentials__cell{ color: var(--c-white); }
.section--dark .credentials__cell--label{ color: rgba(255,255,255,.6); }
.section--dark .credentials__row .credentials__cell:nth-child(4){ color: rgba(255,255,255,.6); }
.section--dark .credentials__conduct-label{ color: rgba(255,255,255,.6); }
.section--dark .credentials__conduct-label span{ color: rgba(255,255,255,.8); }
.section--dark .credentials__conduct-list li{ color: var(--c-white); border-bottom-color: rgba(255,255,255,.14); }

/* ---------- Contact ---------- */
.contact{ background: var(--c-bg); }
.contact__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
}
.contact__lead{ color: var(--c-muted); margin-top: 22px; max-width: 42ch; }
.contact__direct{ margin-top: 40px; }
.contact__direct-label{
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.contact__direct a{
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px solid var(--c-main);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact__direct a:hover{ color: var(--c-accent); border-color: var(--c-accent); }
.contact__address{ margin-top: 28px; }
.contact__address p{ font-size: 13px; color: var(--c-muted); line-height: 1.7; }
.contact__address p + p{ margin-top: 2px; }

.contact-form{ display: flex; flex-direction: column; gap: 22px; }
.field label, .field legend{
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: .01em;
}
.req{ color: var(--c-accent); }
.field input[type="text"],
.field input[type="email"],
.field textarea{
  width: 100%;
  padding: 13px 4px;
  border-bottom: 1px solid var(--c-line-strong);
  font-size: 14px;
  background: transparent;
  transition: border-color .3s var(--ease);
  resize: vertical;
}
.field input:focus,
.field textarea:focus{ outline: none; border-color: var(--c-accent); }
.radio-group{ display: flex; flex-wrap: wrap; gap: 10px 22px; }
.radio-group label{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--c-muted);
  cursor: pointer;
}
.radio-group input{ accent-color: var(--c-accent); width: 14px; height: 14px; }
.contact-form__note{ font-size: 12px; color: var(--c-muted); min-height: 1em; }
.contact-form__note.is-success{ color: var(--c-accent); font-weight: 600; }
.contact-form__note.is-error{ color: #b91c1c; font-weight: 600; }
.field--honeypot{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  left: -9999px;
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--c-main);
  color: rgba(255,255,255,.72);
  padding-block: clamp(56px, 7vw, 88px) 28px;
  font-size: 12.5px;
}
.site-footer__inner{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.site-footer__brand{ display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.site-footer__logo{ height: 78px; filter: brightness(0) invert(1); margin-bottom: 20px; }
.site-footer__brand p{ white-space: nowrap; color: rgba(255,255,255,.5); margin-top: auto; }
.site-footer__social{ display: flex; gap: 16px; margin-top: 16px; }
.site-footer__social a{
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
  transition: color .3s var(--ease);
}
.site-footer__social a:hover{ color: var(--c-accent); }
.site-footer__title{
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-white);
  margin-bottom: 14px;
}
.site-footer__col p{ margin-bottom: 8px; }
.site-footer__col a{ transition: color .3s var(--ease); }
.site-footer__col a:hover{ color: var(--c-accent); }
.site-footer__bottom{
  padding-top: 24px;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.45);
}

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 400;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  color: var(--c-accent);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.back-to-top.is-visible{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top__arrow{
  position: relative;
  display: inline-block;
  font-size: 58px;
  width: 0.4em;
  height: 1em;
  animation: cueBounceUp 1.6s var(--ease) infinite;
}
.back-to-top__arrow svg{
  position: absolute;
  top: 50%; left: 50%;
  width: 1em; height: 0.4em;
  transform: translate(-50%, -50%) rotate(-90deg);
}
@keyframes cueBounceUp{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.back-to-top__label{
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .philosophy__grid{ grid-template-columns: 1fr; align-items: start; }
  .philosophy__body{ text-align: left; }
  .section-head__desc{ text-align: left; }
  .approach-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: repeat(2, 1fr); row-gap: 40px; column-gap: 24px; }
  .steps__bodies{ margin-top: 16px; }
  .steps__connector-wrap{ display: none; }
  .people-grid{ grid-template-columns: 1fr; }
  .credentials__licenses{ grid-template-columns: 100px 1fr; row-gap: 4px; }
  .credentials__row .credentials__cell:nth-child(3),
  .credentials__row .credentials__cell:nth-child(4){ grid-column: 2; }
  .credentials__cell{ padding-block: 4px; }
  .credentials__conduct-list{ grid-template-columns: 1fr; }
  .contact__grid{ grid-template-columns: 1fr; }
  .site-footer__inner{ grid-template-columns: 1fr 1fr; row-gap: 32px; }
}

@media (max-width: 760px){
  :root{ --header-h: 76px; --fs-body: 12px; }
  .steps__title-break{ display: none; }
  .kanji__grid{ grid-template-columns: 1fr; gap: 32px; }
  .kanji__item{ border-left: none; border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px; }
  .kanji__item:first-child{ border-top: none; padding-top: 0; }
  .main-nav{
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 24px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .main-nav.is-open{ opacity: 1; transform: translateY(0); visibility: visible; }
  .main-nav__list{ flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .main-nav__list li{ width: 100%; }
  .main-nav__link{ flex-direction: row; gap: 8px; padding-block: 14px; width: 100%; align-items: baseline; border-bottom: 1px solid var(--c-line); }
  .main-nav__link::after{ display: none; }
  .lang-toggle{ margin-top: 16px; }
  .menu-btn{ display: flex; }

  .hero{ min-height: calc(100svh - 50px); }
  .hero__content{ transform: none; padding-bottom: 140px; }
  .hero__badge{ width: auto; font-size: 8px; align-items: flex-end; line-height: 1; padding-block: 14.5px; }
  .hero__badge .badge-arrow{ line-height: 0; }
  .hero__headline{ max-width: none; }
  .hero__subhead{ margin-bottom: 10px; }
  .hero__actions{ gap: 6px; margin-top: 44px; }
  .hero__actions .btn{ padding: 11px 20px; font-size: 12px; gap: 10px; }
  .hero__actions .btn__arrow{ font-size: 12.6px; }
  .hero__note{ font-size: 12px; line-height: 1.2; transform: translateY(.325px); }
  .hero__meta-strip{ font-size: 7.5px; gap: 14px; width: 70%; bottom: 66px; }
  .scroll-cue{ bottom: 66px; }
  .hero__img{ object-position: 68% center; }
  .brand__logo{ height: 42.4px; }
  .site-header.is-scrolled .brand__logo{ height: 32.8px; }

  .service-card{ grid-template-columns: 1fr; align-items: start; row-gap: 10px; }
  .service-card__num{ margin-bottom: 2px; }
  .service-card__content{ display: block; }
  .service-card__jp{ text-align: left; margin-top: 8px; max-width: none; }
  .service-card__desc{ margin-left: 0; }
  .service-card__arrow{ display: none; }
  .steps{ grid-template-columns: 1fr; row-gap: 0; }
  .steps__numbers, .steps__bodies{ display: contents; }
  .steps__num-cell:nth-of-type(1){ order: 1; }
  .steps__body:nth-of-type(1){ order: 2; }
  .steps__num-cell:nth-of-type(2){ order: 3; }
  .steps__body:nth-of-type(2){ order: 4; }
  .steps__num-cell:nth-of-type(3){ order: 5; }
  .steps__body:nth-of-type(3){ order: 6; }
  .steps__num-cell:nth-of-type(4){ order: 7; }
  .steps__body:nth-of-type(4){ order: 8; }
  .steps__num-cell{ margin-bottom: 8px; }
  .steps__body{ margin-bottom: 28px; }
  .steps__body:nth-of-type(4){ margin-bottom: 0; }
  .steps__desc{ max-width: none; }
  .person-card{ grid-template-columns: 120px 1fr; row-gap: 16px; column-gap: 16px; }
  .person-card__body{ display: contents; }
  .person-card__photo{ grid-column: 1; }
  .person-card__heading{ grid-column: 2; align-self: start; }
  .person-card__role{ line-height: 1.4; margin-bottom: 2px; }
  .person-card__name{ line-height: 1.4; letter-spacing: .04em; }
  .person-card__desc{ grid-column: 1 / -1; margin-top: 0; }
  .person-card__meta{ grid-column: 1 / -1; }
  .person-card__mail{ grid-column: 1 / -1; }
  .section-head--split{ align-items: flex-start; }
  .section--dark .card-grid{ border-top-color: rgba(255,255,255,.45); }
  .site-footer__inner{ grid-template-columns: 1fr; }
  .site-footer__bottom{ flex-direction: column; gap: 8px; }
  .cta-band__symbol{ flex: 1 1 auto; width: auto; height: clamp(48px, 30vw, 160px); padding-inline: 0; margin-block: 0; align-items: flex-end; }
  .cta-band__symbol .icon-arrow{ width: auto; height: auto; max-width: 100%; max-height: 100%; transform: none; }
  .cta-band__inner{ flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; row-gap: 0; column-gap: 15px; }
  .cta-band__text{ flex: 1 1 100%; }
  .cta-band__jp{ font-size: 12px; }
  .cta-band__jp-break{ display: inline; }
  .cta-band .btn{ padding: 11px 20px; font-size: 8.75px; gap: 10px; }
  .cta-band .btn__arrow{ font-size: 12.6px; }
}

@media (max-width: 440px){
  .hero__note{ flex: 0 0 100%; max-width: none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}