/* Readable scale based on Meccanica Zani: body/nav 16px, labels 14px, buttons 16px. */
:root {
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;
}

body { font-size: var(--text-body); line-height: 1.6; }

.company-copy > p:not(.eyebrow):not(.lead),
.section-heading > p,
.service-body > div > p,
.sector-description > p,
.quality-copy > p:not(.eyebrow),
.quality-points p,
.process p,
.contact-copy > p:not(.eyebrow),
.footer-top > p,
dialog p {
  font-size: var(--text-body);
  line-height: 1.8;
}

.company-copy > p:not(.eyebrow):not(.lead) { max-width: none; }
.company-copy .lead { font-size: 20px; line-height: 1.6; }
.section-heading > p { max-width: 400px; }
.hero-description { font-size: 18px; line-height: 1.8; }
.header nav,
.button,
.hero .button,
.hero-link,
.text-link,
.service-body .text-link,
.sector-contact,
.form-bottom .button {
  font-size: var(--text-body);
}

.eyebrow,
.hero .eyebrow,
.contact .eyebrow,
dialog .eyebrow { font-size: var(--text-caption); letter-spacing: 1.5px; }
.hero-bottom,
.hero-coordinate { font-size: var(--text-caption); letter-spacing: 1px; }
.hero-bottom a { font-size: inherit; }
.hero-bottom > span { max-width: none; }
.expertise-inner > span { font-size: var(--text-small); letter-spacing: .7px; }
.service-number,
.sector-index,
.sector-description > span,
.quality-points li > span,
.process li > span { font-size: var(--text-small); }
.service-hint { font-size: var(--text-body); }
.tags span { font-size: var(--text-small); padding: 4px 10px; }
.company-visual figcaption > span:last-child { font-size: var(--text-small); }
.quality-stamp > span { font-size: var(--text-caption); letter-spacing: .6px; }
.quality-stamp strong { font-size: 18px; }
.quality-stamp { padding: 20px; }
.service summary h3 { font-size: 24px; }
.sector h3,
.process h3 { font-size: 22px; }
.quality-points h3,
dialog h3 { font-size: 18px; }
.quality-points li { gap: 20px; }
.contact-detail > span { font-size: var(--text-caption); }
.contact-detail > p { font-size: 20px; }
.contact-note,
.demo-label,
.form-bottom > span { font-size: var(--text-caption); }
.form-intro { font-size: 24px; }
.field label,
.consent,
.footer-bottom { font-size: var(--text-small); }
.field input,
.field select,
.field textarea { font-size: var(--text-body); min-height: 46px; }
.field input::placeholder,
.field textarea::placeholder { font-size: inherit; }
.field label { margin-bottom: 8px; }
.consent { gap: 12px; }
.consent input { width: 16px; height: 16px; margin-top: 4px; }
.form-status { font-size: var(--text-small); }
.brand small { font-size: 8px; letter-spacing: 1px; }
.footer .brand small { font-size: 8px; letter-spacing: .6px; }
.footer-bottom { flex-wrap: wrap; }
.nav-contact { margin-left: 0; }

/* Larger menu labels need the compact navigation earlier on tablets. */
@media (max-width: 1100px) {
  .menu-toggle {
    width: 44px; height: 44px; display: flex; flex-direction: column;
    justify-content: center; gap: 7px; background: none;
    border: 1px solid var(--line); padding: 10px; position: relative; z-index: 22;
  }
  .menu-toggle span { width: 22px; height: 1px; background: var(--ink); transition: transform .2s; }
  .menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .header nav {
    display: none; position: fixed; inset: 94px 0 0; background: #fff;
    flex-direction: column; align-items: stretch; padding: 35px 25px;
    gap: 0; overflow: auto;
  }
  .header nav.open { display: flex; }
  .header nav > a { padding: 19px 0; font-size: 24px; border-bottom: 1px solid var(--line); }
  .header nav > a:not(.nav-contact)::after { display: none; }
  .header .nav-contact {
    font-size: var(--text-body); background: var(--blue); color: #fff;
    display: flex; width: 100%; height: auto; padding: 17px 20px;
    justify-content: space-between; border: 0; margin-top: 30px;
  }
  .header .nav-contact span { color: #fff; font-size: 20px; margin: 0; }
  .expertise-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .sector { padding-inline: 18px; }
  .sector h3 { font-size: 19px; }
  .sector-arrow { position: static; display: inline-block; margin-top: 5px; }
  .contact-grid { gap: 40px; }
  .contact-form { padding-inline: 28px; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .header nav { top: 78px; }
  .service-hint { display: none; }
  .service summary { grid-template-columns: 35px 1fr 34px; }
  .company-grid,
  .quality-grid { gap: 35px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-copy > p:not(.eyebrow) { max-width: 540px; }
}

@media (max-width: 700px) {
  .header nav { top: 76px; }
  .hero { height: auto; min-height: 700px; }
  .hero-content { padding-top: 72px; padding-bottom: 155px; }
  .hero-description { font-size: var(--text-body); max-width: 340px; }
  .hero-actions { gap: 24px; }
  .hero .button { padding-inline: 18px; }
  .hero-bottom { align-items: flex-end; gap: 16px; }
  .hero-bottom > span { max-width: 55%; }
  .hero-bottom a { gap: 10px; flex-shrink: 0; }
  .hero-bottom a span { font-size: 18px; }
  .expertise-inner { gap: 16px 20px; }
  .expertise-inner > span { font-size: var(--text-caption); line-height: 1.6; }
  .company-visual figcaption { right: 10px; gap: 15px; padding: 20px; }
  .company-visual figcaption > span:last-child { font-size: 13px; }
  .section-heading > p { max-width: none; }
  .service summary h3 { font-size: 21px; }
  .service-body { padding-left: 0; }
  .service-body .text-link { gap: 18px; }
  .sector { min-height: 205px; }
  .sector h3 { font-size: 20px; }
  .sector-description { gap: 16px; }
  .quality-stamp { padding: 18px; }
  .quality-stamp > span { font-size: 11px; }
  .quality-stamp strong { font-size: 18px; }
  .process { gap: 35px 20px; }
  .process h3 { font-size: 21px; }
  .process p { line-height: 1.7; }
  .contact-form { padding-inline: 23px; }
  .form-bottom { flex-wrap: wrap; }
  .footer-top > p { font-size: var(--text-body); }
  .footer-bottom { gap: 12px; }
  html:not(.js) .header nav > a,
  html:not(.js) .header .nav-contact { font-size: var(--text-body); }
}

@media (max-width: 420px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .company-visual figcaption { left: -10px; right: 0; padding-inline: 15px; gap: 12px; }
  .company-visual figcaption > span:last-child { font-size: var(--text-caption); }
  .contact-copy h2 { font-size: 35px; }
}