/* Final visual polish
 * Loaded after styles.css to refine typography, wrapping, spacing,
 * intermediate-width responsive behavior, and accessibility details
 * without disturbing the base layout.
 */

/* Typography */
.section-head h2,
.why h2,
.capability-heading h2,
.founders-head h2,
.contact h2 {
  font-weight: 600;
  line-height: 1.24;
  text-wrap: balance;
}

.section-head h2 br,
.why h2 br,
.capability-heading h2 br,
.founders-head h2 br,
.contact h2 br {
  display: none;
}

.hero h1 {
  font-weight: 600;
  text-wrap: balance;
}

.statement-copy,
.intro,
.why-lead > p,
.why-points p,
.capability-heading > p,
.capability-list p,
.founder-body p,
.process-steps p,
.contact-inner > div:first-child > p {
  text-wrap: pretty;
}

.metric,
.word-metric,
.founder-index {
  font-weight: 700;
}

.founder-statement {
  font-weight: 600;
  text-wrap: balance;
}

/* Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ink);
}

.site-header nav > a:not(.button) {
  padding: 10px 2px;
}

.contact .label {
  color: rgba(255, 255, 255, .8);
}

.contact-note {
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
}

.dialog textarea {
  border-color: #767f8b;
}

.dialog .close {
  min-width: 44px;
  min-height: 44px;
}

.field-label {
  display: block;
  margin: 20px 0 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

/* English language spans are inserted by script.js inside mixed Japanese labels.
   Neutralize the generic .label span styling so only the section number keeps
   its accent treatment. */
.label .lang-en {
  margin-right: 0;
  color: inherit;
}

/* Contact form */
.contact-actions {
  width: 100%;
}

.contact-form {
  position: relative;
  display: grid;
  gap: 18px;
  width: 100%;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .07);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-field {
  display: grid;
  gap: 8px;
}

.contact-field label {
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-weight: 700;
}

.form-required,
.form-optional {
  margin-left: 7px;
  font-size: 9px;
  font-weight: 600;
}

.form-required {
  color: #fff;
}

.form-optional {
  color: rgba(255, 255, 255, .7);
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid #aeb8c7;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.contact-field input {
  min-height: 50px;
  padding: 12px 14px;
}

.contact-field textarea {
  min-height: 178px;
  padding: 13px 14px;
  resize: vertical;
  line-height: 1.75;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #737d8b;
}

.contact-submit {
  width: 100%;
  justify-content: center;
}

.contact-submit:disabled {
  cursor: wait;
  opacity: .62;
  transform: none;
}

.turnstile-shell {
  min-height: 0;
}

.contact-form-status {
  min-height: 22px;
  margin: -4px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  line-height: 1.7;
}

.contact-form-status[data-state="success"] {
  color: #fff;
  font-weight: 700;
}

.contact-form-status[data-state="error"] {
  color: #fff;
  font-weight: 700;
}

.contact-form .contact-note {
  margin-top: -4px;
}

.contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Spacing and editorial rhythm */
.capability-heading {
  position: sticky;
  top: 112px;
  align-self: start;
}

.experience-disclaimer {
  max-width: 720px;
  margin: 18px 0 0;
}

.process-steps li {
  min-height: 210px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.process-steps span {
  margin-bottom: 36px;
}

/* Move the tablet breakpoint earlier so large headings and multi-column
   sections do not enter awkward narrow-column states. */
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 88px;
  }

  .site-header {
    position: sticky;
  }

  .menu {
    display: block;
  }

  .site-header nav {
    position: absolute;
    top: 71px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px var(--gutter) 26px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    white-space: normal;
  }

  .site-header nav.open {
    display: flex;
  }

  .site-header nav > a:not(.button) {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .site-header nav .button {
    margin-top: 18px;
  }

  .section-head,
  .why,
  .capability-layout,
  .founders-head,
  .contact-inner {
    grid-template-columns: 1fr;
  }

  .section-head {
    gap: 28px;
  }

  .intro {
    max-width: 620px;
    margin-left: 0;
  }

  .experience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .experience-primary,
  .experience-impact,
  .experience-architecture,
  .experience-patent {
    grid-column: span 1;
  }

  .why {
    gap: 54px;
  }

  .why-lead,
  .capability-heading {
    position: static;
  }

  .capability-layout {
    gap: 46px;
  }

  .capability-heading > p {
    max-width: 620px;
  }

  .founders-head {
    gap: 16px;
  }

  .founders-head .label {
    margin-top: 0;
  }

  .founders {
    grid-template-columns: 1fr;
  }

  .founder,
  .founder + .founder {
    padding: 42px 0;
    border-left: 0;
  }

  .founder + .founder {
    border-top: 1px solid var(--line);
  }

  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-steps li:nth-child(3) {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .process-steps li:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .contact-inner {
    gap: 40px;
    align-items: start;
  }

  .contact-actions {
    max-width: 560px;
  }

  footer {
    grid-template-columns: 1fr auto;
  }

  footer small:first-of-type {
    display: none;
  }
}

@media (max-width: 600px) {
  html {
    scroll-padding-top: 84px;
  }

  .site-header nav {
    top: 69px;
  }

  .section-head h2,
  .why h2,
  .capability-heading h2,
  .founders-head h2,
  .contact h2 {
    line-height: 1.32;
  }

  .experience-grid,
  .process-steps,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .process-steps li,
  .process-steps li + li,
  .process-steps li:nth-child(3),
  .process-steps li:nth-child(4) {
    min-height: 0;
  }

  .contact-form {
    padding: 22px 18px;
  }
}

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid CanvasText;
    box-shadow: none;
  }
}