/* English locale typography — loaded only on /en/ pages */

html[lang="en"] body {
  --font-sans: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mincho: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html[lang="en"] .intro__tagline {
  font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Header keeps the same typography as the Japanese site */
html[lang="en"] .header {
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-mincho: 'Shippori Mincho', serif;
}

html[lang="en"] .header__logo-text {
  font-family: 'Shippori Mincho', serif;
}

html[lang="en"] .header__menu-link {
  font-family: 'Cardo', serif;
}

html[lang="en"] .header__lang-switch {
  font-family: 'Cardo', serif;
}

html[lang="en"] .header__dropdown-link {
  font-family: 'Noto Sans JP', sans-serif;
}

/* Philosophy circles — the EN site shows the title only. The Japanese caption
   is stripped from the markup by LegacyHtmlRenderer::removePhilosophyCircleText(),
   so with a single child left we drop the inter-item spacing and let the title
   sit on the optical centre of the circle. */
html[lang="en"] .phi3__circle-inner {
  gap: 0;
  padding: 20px 18px;
  justify-content: center;
}

html[lang="en"] .phi3__circle-title {
  font-size: 1.18rem;
  letter-spacing: 0.03em;
  line-height: 1.4;
  margin-bottom: 0;
  text-wrap: balance;
}

@media (max-width: 968px) {
  html[lang="en"] .phi3__circle-title {
    font-size: 1.06rem;
    white-space: normal;
  }
}

@media (max-width: 600px) {
  html[lang="en"] .phi3__circle-title {
    font-size: 1rem;
    white-space: normal;
  }
}

/* Services page — EN copy is longer than JA */
html[lang="en"] .client-profile__content {
  max-width: 100%;
}

html[lang="en"] .client-profile__text {
  white-space: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

html[lang="en"] .client-profile__subtitle {
  white-space: normal;
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 100%;
}

/* Services page — align the three client-profile columns.
   In EN the VeIS column has no message block at all, and the Startup and
   Enterprise messages differ in height, so each card centred itself
   independently and the number, title, subtitle and button rows drifted out
   of line. Give every card the same content height, anchor the content to the
   top, and push the CTA to the bottom so all four rows align across columns. */
@media (min-width: 969px) {
  html[lang="en"] .client-profile__content {
    width: 100%;
    min-height: 400px;
    justify-content: flex-start;
  }

  /* Reserve two lines so a wrapping subtitle cannot shift the rows below it. */
  html[lang="en"] .client-profile__subtitle {
    min-height: 2.6em;
  }

  html[lang="en"] .client-profile__cta {
    margin-top: auto;
  }
}

html[lang="en"] #services-hero .portfolio-hero__tagline-row {
  white-space: normal;
}

html[lang="en"] .service-features__visual-label {
  white-space: normal;
  line-height: 1.35;
}

html[lang="en"] .cover-stage-headline h2 {
  white-space: normal;
  line-height: 1.3;
}

@media (max-width: 768px) {
  html[lang="en"] .services-subnav__link {
    font-size: 0.68rem;
    padding: 12px 12px;
  }

  html[lang="en"] .page-subnav__link {
    font-size: 0.68rem;
    padding: 12px 12px;
  }
}

/* Company name meaning — EN note under logo */
html[lang="en"] .company-meaning-philosophy__logo-wrap {
  margin-bottom: 20px;
}

html[lang="en"] .company-meaning-philosophy__name-note {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-gray-dark);
  letter-spacing: 0.04em;
  margin: 0 0 36px;
  text-align: left;
}

html[lang="en"] .company-meaning-philosophy__items .company-meaning-philosophy__item:last-child {
  display: none;
}

/* Services — VeIS feature block body left-aligned on EN */
html[lang="en"] #veis-detail .enterprise-features__block-result {
  text-align: left;
}

/* Company overview — EN labels need a wider first column */
html[lang="en"] .company-overview__container {
  max-width: 780px;
}

html[lang="en"] .company-overview__row {
  grid-template-columns: minmax(168px, 200px) 1fr;
  gap: 0 28px;
  align-items: start;
}

html[lang="en"] .company-overview__row dt {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: normal;
}

html[lang="en"] .company-overview__row dd {
  line-height: 1.6;
  word-break: break-word;
}

@media (max-width: 768px) {
  html[lang="en"] .company-overview__row {
    grid-template-columns: minmax(140px, 160px) 1fr;
    gap: 0 16px;
  }

  html[lang="en"] .company-overview__row dt {
    font-size: 0.8rem;
  }
}

@media (max-width: 600px) {
  html[lang="en"] .company-overview__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}