/* Responsive type and spacing; retain the approved Mincho proportions. */
:root {
  --serif: 'Shippori Mincho', 'Yu Mincho', serif;
  --ui: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --mincho-heading: clamp(2.53rem, 4.11125vw, 3.953125rem);
}
.hero #hero-heading,
.koi-heading #service-title,
#works .works-proof #proof-title,
#kusabi .kusabi-copy h3,
#about .about-copy h3,
#contact .contact-bottom h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--mincho-heading);
  letter-spacing: .015em;
}
.hero #hero-heading { font-size: clamp(3.25rem, 4.5vw, 5rem); line-height: 1.4; }
/* Match the visible gap above the heading with the gap before its action. */
.hero-link.spatial-button { margin-top: 14px; scale: .75; transform-origin: left top; }
.koi-heading #service-title { line-height: 1.45; }
#works .works-proof #proof-title, #kusabi .kusabi-copy h3 { line-height: 1.5; }
#about .about-copy h3, #contact .contact-bottom h3 { line-height: 1.55; }
.mincho-lines { transform: scaleX(.78); transform-origin: center top; }
.hero .mincho-lines { transform-origin: left top; }
#about .about-copy .heading-phrase { display: block; }

/* Keep service names and descriptions together, including narrow tablets. */
.koi-field-jp > span { display: inline-block; }
.proof-capabilities > span { text-wrap: pretty; }
.proof-impact-letters { display: inline-block; white-space: nowrap; transform-origin: left top; }
.proof-grid { text-align: center; }
.proof-number > p:first-child { justify-content: center; }

/* Center both proof columns around the divider and keep their lower edges aligned. */
@media (min-width:768px) {
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
  .proof-grid > div { padding-inline: clamp(12px, 2vw, 32px); }
  .proof-capabilities { display: flex; flex-direction: column; justify-content: space-between; }
  .proof-impact-letters { transform: translateY(var(--proof-shift-y, 0px)) scaleY(var(--proof-scale-y, 1)); }
}

@media (min-width:768px) and (max-width:1023px) {
  .hero #hero-heading { font-size: clamp(2.5rem, 5.05vw, 3.25rem); }
  .hero-content { padding-top: clamp(142px, 16svh, 158px); }
  .proof-number strong { font-size: clamp(5rem, 11.2vw, 7rem); }
  .proof-number > p:first-child { flex-wrap: nowrap; gap: 12px; }
  .proof-number > p > span { white-space: nowrap; }
  .proof-capabilities > span { font-size: .9375rem; letter-spacing: 0; }
  .koi-links { gap: 12px; }
  .koi-service-link .koi-field-jp { font-size: .75rem; line-height: 1.65; }
  #about { gap: 36px; }
  #contact .contact-bottom { margin-top: 36px; }
}
@media (max-width:767px) {
  :root { --mincho-heading: clamp(1.625rem, 7.1vw, 2.5rem); }
  .hero-frame { min-height: 600px; }
  .hero #hero-heading { font-size: clamp(1.8rem, 8.1vw, 3.25rem); line-height: 1.5; }
  .hero-english { font-size: .8125rem; letter-spacing: .075em; }
  .koi-heading-copy { max-width: 30em; }
  .koi-heading-copy .copy-line + .copy-line { margin-top: .4em; }
  .copy-line { line-break: strict; }
  #about { padding-block: 72px; gap: 32px; }
  #contact { min-height: 0; padding-block: 72px 108px; }
  #contact .contact-top { margin-bottom: 18px; }
  #contact .contact-bottom { margin-top: 32px; gap: 26px; }
  #contact .contact-bottom p { margin-top: 20px; }
  #contact .solid-button.spatial-button { width: auto; max-width: 100%; }
  .news-row { grid-template-columns: 88px 1fr 24px; column-gap: 12px; }
  .news-headline { line-height: 1.85; text-wrap: balance; }
}
/* A low phone viewport keeps the introduction above the artwork. */
@media (max-width:767px) and (max-height:740px) {
  .hero-content { padding-top: 110px; }
  .hero-english { margin-top: 18px; }
  #contact { padding-top: 56px; }
  #contact .contact-bottom p { font-size: .9375rem; line-height: 1.85; }
  #contact .copy-line + .copy-line { margin-top: .3em; }
}