/* MH Group | Readable Typography & Contrast | 2026-10-27
   Public website only. No changes to Glass animation, interaction or localization. */
:root {
  --mh-readable-text: clamp(17px, 0.42vw + 12px, 20px);
  --mh-readable-detail: clamp(17px, 0.5vw + 12px, 20px);
  --mh-readable-subtle: clamp(14px, 0.22vw + 10px, 16px);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--mh-readable-text); line-height: 1.75; }
main p, main li, .footer p, .footer a { overflow-wrap: break-word; }
.section-head p,
.card p,
.portal-card p,
.company-card p,
.company-directory-copy p,
.step p,
.highlight p,
.faq p,
.service-body-copy,
.service-company-box p,
.company-scope p,
.company-about-grid > div > p,
.company-detail-copy p,
.service-detail-copy p,
.service-lead,
.service-detail-list li,
.contact-card p,
.feature-list li {
  font-size: var(--mh-readable-detail);
  line-height: 1.8;
}
.hero p, .page-hero p, .cta p {
  font-size: clamp(18px, 0.45vw + 13px, 21px);
  line-height: 1.75;
}
.card h3, .company-card h3, .company-directory-copy h3,
.portal-card h3, .service-company-box h3 {
  font-size: clamp(21px, 0.55vw + 15px, 25px);
  line-height: 1.42;
}
.step h3 { font-size: clamp(19px, 0.45vw + 14px, 23px); line-height: 1.42; }
.section-head h2, .hero h1, .page-hero h1 {
  text-wrap: balance;
}
.section-head h2 { line-height: 1.22; }
.hero h1, .page-hero h1 { line-height: 1.19; }
.eyebrow, .feature-number, .portal-tag, .signal b {
  font-size: var(--mh-readable-subtle);
  line-height: 1.55;
}
.btn, .access-btn, .card-link, .company-more, .faq summary,
.chip, .check, .main-nav a, .lang-select {
  line-height: 1.55;
}
.btn, .card-link, .company-more, .faq summary, .check {
  font-size: clamp(17px, 0.3vw + 13px, 19px);
}
.chip { font-size: clamp(16px, 0.25vw + 13px, 18px); line-height: 1.55; }
.footer { font-size: var(--mh-readable-detail); line-height: 1.8; }
.footer p, .footer a { font-size: var(--mh-readable-detail); }
.footer-note, .footer-brand small, .brand-copy small {
  font-size: clamp(14px, 0.23vw + 10px, 16px);
  line-height: 1.7;
}
.topbar { font-size: clamp(14px, 0.23vw + 11px, 17px); }
.topbar .topbar-links { flex-wrap: wrap; }
/* Public dark surfaces: readable text, with no change to backgrounds or Glass. */
.section-head p, .card p, .company-directory-copy p,
.company-card p, .step p, .faq p, .service-body-copy,
.company-about-grid > div > p { color: #51494f; }
.dark-section .section-head p, .dark-section .portal-card p,
.dark-section .card p, .dark-section .step p,
.company-scope p, .service-company-box p { color: #e4dbe0; }
.hero p, .page-hero p, .company-detail-copy p,
.service-detail-copy p, .cta p { color: #f2e8ec; }
.footer p, .footer-note, .footer-brand small { color: #d4c9cd; }
.footer a { color: #f8f3f5; }
.faq summary, .check, .card h3, .step h3 { color: #20191d; }
.dark-section .card h3, .dark-section .step h3,
.dark-section .portal-card h3 { color: #fff; }
.eyebrow, .feature-number { font-weight: 850; }
/* Explanatory FAQ is rendered by a late JS style block; stronger selector
   prevents its earlier small type from overriding the public readability scale. */
html body .mh-explain .tile,
html body .mh-explain details,
html body .mh-explain ol {
  font-size: var(--mh-readable-detail) !important;
  line-height: 1.8;
}
html body .mh-explain summary { font-size: clamp(17px, 0.35vw + 12px, 19px); }
html body .mh-explain .lead { color: #494248; }
/* Extra breathing room around dense content, responsive without fixed heights. */
.grid-3 > *, .grid-4 > * { min-width: 0; }
.card, .portal-card, .step, .company-directory-copy, .faq { min-width: 0; }
.card p, .portal-card p, .step p, .company-directory-copy p { max-width: 65ch; }
/* RTL & long translated terms: preserve directions while wrapping safely. */
.main-nav a, .lang-select, .btn, .chip { overflow-wrap: anywhere; }
@media (max-width: 1060px) {
  .section-head p, .card p, .portal-card p,
  .company-card p, .step p, .faq p { line-height: 1.75; }
}
@media (max-width: 720px) {
  :root {
    --mh-readable-text: 17px;
    --mh-readable-detail: 17px;
    --mh-readable-subtle: 14px;
  }
  .hero h1, .page-hero h1 { line-height: 1.23; }
  .section-head h2 { line-height: 1.27; }
  .card h3, .company-card h3, .portal-card h3 { font-size: 21px; }
  .step h3 { font-size: 19px; }
  .hero p, .page-hero p { font-size: 18px; }
  .btn, .card-link, .company-more, .faq summary { font-size: 17px; }
  .footer { line-height: 1.75; }
  .footer-note { font-size: 14px; }
  .card, .portal-card, .faq { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .main-nav a { white-space: normal; }
  .hero h1, .page-hero h1 { font-size: clamp(29px, 8.5vw, 36px); }
  .section-head h2 { font-size: 29px; }
}


/* HOTFIX 2026-10-27: prevent navigation labels being split into letters.
   Text enlargement must never force arbitrary word breaks in the menu. */
.main-nav a {
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: nowrap !important;
}
@media (min-width: 1061px) {
  .main-nav { gap: 2px !important; }
  .main-nav a {
    font-size: clamp(14px, 1vw, 17px) !important;
    padding: 9px 6px !important;
  }
}