/* LegalAgent EN top (/en/) — English overrides layered on styles-top-ja.css (loaded after it by en/index.html only).
   The EN top renders the same components (components/top-ja/) with copy-en.js; this file only adjusts what the longer
   English copy needs (labels, units, quote marks, wrapping). Layout, tokens and chrome stay in styles-top-ja.css. */

/* Masthead: the row labels (Standard turnaround / Initial Consultation) keep one line */
@media (min-width: 721px) { .bl__row { grid-template-columns: 160px 1fr; } }

/* "150+" / "¥500,000+": the plus sign sits close to the figure, a little smaller than it */
.claim__unit { margin-left: 1px; font-size: 32px; }
.kpi__plus { margin-left: 1px; font-size: 32px; }
@media (max-width: 720px) {
  .claim__unit { font-size: 28px; }
  .kpi__plus { font-size: 26px; }
}

/* Plan fee tables: greedy wrapping (balanced wrapping split "day-to-day" at a hyphen) */
.pt dt, .pt__tag { text-wrap: wrap; }

/* What We Deliver: "3–5 business days → 1 business day" does not fit one line at any width;
   the replaced figure takes the first line and the arrow leads the red figure on the second */
.vrow--speed .vwas { flex-basis: 100%; padding-bottom: 0; }

/* Pull quote: hang the opening curly quote (“ is narrower than 「) */
.pq__q p { text-indent: -.42em; }
.pq__q .pq__sub { text-indent: -.36em; }
.pq__stop { margin-right: 0; }

/* Before/after table: the English row labels and values are longer; they wrap inside the side column */
.ba tbody th { width: 34%; white-space: normal; }
.ba .b { white-space: normal; font-size: 16px; }
.ba .a { white-space: normal; font-size: 19px; }
@media (max-width: 720px) {
  .ba tbody th { width: 31%; padding-right: 12px; }
  .ba .b { width: 27%; }
  .ba .b { font-size: 14px; }
  .ba .a { font-size: 17px; }
}

/* LegalAgent for Word mock: the English comment card is a line taller, so the page body leaves more room above it */
@media (min-width: 721px) and (max-width: 899px), (min-width: 1100px) { .wordmock__body { padding-bottom: 108px; } }

/* Attorneys (hover layout, see styles-top-ja.css): English roles and specialties wrap differently at every card width,
   so instead of the Japanese width copies (.pf__alt) each caption is laid out once at the narrowest width its card
   takes in any state. No line is ever clipped by the narrowed card or re-wrapped while cards move. */
@supports (width: 1cqw) and selector(:has(a)) {
  @media (min-width: 900px) and (hover: hover) {
    .team__photos .pf--lead .pf__cap { width: calc(var(--pf-a) / (var(--pf-h2) + 2)); }
    .team__photos .pf--sugai .pf__cap, .team__photos .pf--hirukawa .pf__cap { width: calc(var(--pf-a) / (var(--pf-h1) + 2)); }
  }
}
/* the names stay on one line in the narrowest caption ("Kosuke Hirukawa" needs about 200px at 22px) */
@media (min-width: 900px) and (max-width: 1199px) {
  .team__photos .pf .row__t { font-size: 18px; }
}

/* Contact form: "How did you hear about us?" takes two lines beside the one-line "Topic". The labels of a row stay on
   one top line and the inputs on one bottom line (the fields of a row are equally tall), and the Required badge
   sits beside the first line of a wrapped label */
.cf__field { justify-content: space-between; }
.cf__label { align-items: flex-start; text-wrap: balance; }

/* LegalAgent for Word mock: the English file name breaks after its underscores (<wbr> in copy-en.js) instead of being cut */
.wordmock__name { white-space: normal; }

/* Section headings: balanced lines, so a heading never ends on one short word ("Frequently / Asked Questions") */
.h2 { text-wrap: balance; }
.pq__q > p:first-child { text-wrap: balance; }
.pq__q br.d { display: none; }
/* Initial Consultation heading: where its column is narrow, the Japanese sizes would split "Initial / Consultation / is Free" */
@media (min-width: 1100px) and (max-width: 1199px) { .contact .h2 { font-size: 48px; } }
@media (min-width: 721px) and (max-width: 1099px) { .contact .h2 { font-size: 38px; } }
@media (min-width: 721px) and (max-width: 979px) { .contact .h2 { font-size: 34px; } }