body {
  font-size: 17px;
}

.cta-phone {
  font-size: clamp(20px, 1.5vw, 24px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  white-space: nowrap;
}

.desktop-nav {
  gap: 10px;
}

.desktop-nav .nav-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border: 1px solid color-mix(in srgb, var(--olive) 24%, var(--line));
  border-radius: 999px;
  background: var(--paper);
  color: var(--green);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgb(38 62 46 / 4%);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.desktop-nav .nav-link::before,
.desktop-nav .nav-link::after {
  display: none;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link:focus-visible,
.desktop-nav .nav-link.active {
  border-color: var(--green);
  background: var(--green);
  color: var(--paper);
}

.desktop-nav .nav-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgb(38 62 46 / 14%);
}

.desktop-nav .nav-link.active {
  box-shadow: 0 5px 13px rgb(38 62 46 / 18%);
}

.desktop-nav .nav-link:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

.eyebrow,
.breadcrumb,
.hero-intro > .eyebrow,
.contact-section .eyebrow,
.about-image-card .eyebrow,
.journey-visual .eyebrow,
.hero-photo-tag,
.hero-image-info > span,
.hero-image-note > span,
.project-meta,
.project-number,
.service-card-top > span,
.form-field > span:first-child small,
.summary-preview > span,
.project-info-card dt,
.privacy-number,
.language-heading {
  font-size: 11px;
}

.button,
.text-link,
.text-button,
.nav-link,
.language-trigger,
.language-options > a,
.header-cta,
.mobile-nav > a:not(.button),
.footer-nav,
.footer-back-top,
.footer-phone,
.plan-phone,
.plan-whatsapp,
.project-pagination > .text-link,
.project-info-card .button,
.contact-direct > .button {
  font-size: 15px;
}

.hero-description,
.page-intro-description,
.section-description,
.about-description,
.approach-list p,
.process-step > p,
.faq-list details > p,
.contact-copy > p:not(.eyebrow),
.project-story-grid > div > p:not(.eyebrow):not(.portfolio-note),
.principle-grid p,
.journey-steps p,
.faq-help-card p,
.contact-help-grid p,
.privacy-copy article > p,
.privacy-contact-card > p,
.service-image-panel > div > p:not(.eyebrow),
.detail-lead,
.detail-note p,
.project-plan-card > p:not(.eyebrow),
.scope-list > li,
.privacy-legal-note,
.footer-top > div > p {
  font-size: 16px;
}

@media (min-width: 961px) and (max-width: 1150px) {
  .desktop-nav {
    gap: 5px;
  }

  .desktop-nav .nav-link {
    min-height: 44px;
    padding-inline: 10px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-nav .nav-link {
    transition: none;
  }
}

.hero-note p,
.value-item h2,
.value-item p,
.service-card > p,
.service-card-link,
.project-heading-right > p,
.filter-button,
.project-subtitle,
.project-section-bottom > p,
.project-section-bottom .text-link,
.about-side-note,
.approach-list strong,
.step-line > span,
.faq-list summary,
.contact-location,
.contact-small-print,
.form-field > span:first-child,
.consent > span,
.form-privacy,
.demo-note,
.summary-preview > strong,
.summary-preview > p,
.summary-text-details summary,
.summary-text-details > p,
.form-feedback,
.light-link,
.footer-bottom,
.footer-bottom > button,
.detail-image > span,
.project-listing-bar > p,
.portfolio-note,
.project-detail-cover > span,
.project-info-card dd,
.project-pagination small,
.project-plan-card .eyebrow,
.contact-direct > span,
.form-heading > span,
.contact-form .form-field > span:first-child,
.footer-phone small,
.dock-caption strong,
.dock-caption > span,
.concept-disclaimer,
.modal-description,
.modal-checklist li {
  font-size: 14px;
}

.form-field input,
.form-field select,
.form-field textarea,
.summary-text-details textarea,
.contact-form .form-field input,
.contact-form .form-field select,
.contact-form .form-field textarea {
  font-size: 17px;
}

@media (max-width: 600px) {
  .hero-description,
  .page-intro-description,
  .section-description,
  .about-description,
  .approach-list p,
  .process-step > p,
  .faq-list details > p,
  .contact-copy > p:not(.eyebrow),
  .project-story-grid > div > p:not(.eyebrow):not(.portfolio-note),
  .principle-grid p,
  .journey-steps p,
  .faq-help-card p,
  .contact-help-grid p,
  .privacy-copy article > p,
  .privacy-contact-card > p,
  .service-image-panel > div > p:not(.eyebrow),
  .detail-lead,
  .detail-note p,
  .project-plan-card > p:not(.eyebrow),
  .scope-list > li,
  .service-card > p,
  .section-description {
    font-size: 16px;
  }

  .eyebrow,
  .breadcrumb,
  .hero-intro > .eyebrow,
  .contact-section .eyebrow,
  .about-image-card .eyebrow,
  .journey-visual .eyebrow,
  .project-meta,
  .hero-photo-tag,
  .hero-image-info > span,
  .hero-image-note > span,
  .form-field > span:first-child small {
    font-size: 12px;
  }
}

.footer-phone {
  font-size: clamp(20px, 1.5vw, 24px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
}

.footer-phone small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
}
