/* ==========================================================
   APPETENZA — TYPOGRAPHY & READABILITY
   Loaded AFTER appetenza.css — override-only, no layout changes.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ----------------------------------------------------------
   1. TOKENS — darker text, Inter body font
   ---------------------------------------------------------- */
:root {
  --fb:    'Inter', 'Source Sans 3', sans-serif;
  --text:  #111827;
  --text2: #374151;
  --text3: #64748b;
}

/* ----------------------------------------------------------
   2. BODY — base size + antialiasing
   ---------------------------------------------------------- */
body {
  font-size:        17px;
  line-height:      1.7;
  font-weight:      400;
  color:            var(--text);
  text-rendering:   optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------
   3. PARAGRAPHS — breathing room everywhere
   ---------------------------------------------------------- */
p {
  line-height:   1.78;
  margin-bottom: 18px;
}

/* Override font-weight:300 on all body-text selectors.
   300 is too light on most screens; 400 is the sweet spot. */
.card-body p,
.ins-card p,
.blog-card-body p,
.blog-featured-body p,
.step p,
.cta-body p,
.val-box p,
.port-body p,
.job-card p,
.benefit-item p,
.sec-desc,
.hero-sub,
.hero-quote,
.page-hero p,
.f-desc,
.footer-col ul a,
.timeline-content p,
.approach-center p,
.legal-content p,
.legal-content li,
.faq-a-inner p,
.form-card > p,
.contact-method p,
.contact-method a,
.svc-content p,
.article-body p,
.article-body li {
  font-weight: 400;
}

/* ----------------------------------------------------------
   4. HEADING HIERARCHY — slightly tighter, bolder
   ---------------------------------------------------------- */
.sec-h2 {
  font-size:   clamp(28px, 5.5vw, 44px);
  line-height: 1.15;
  letter-spacing: 0;
}

.sec-desc {
  font-size:   16px;
  line-height: 1.82;
  max-width:   580px;
}

.sec-tag {
  font-size: 11.5px;
  letter-spacing: 0.15em;
}

/* ----------------------------------------------------------
   5. HERO — sub-text & page hero legibility
   ---------------------------------------------------------- */
.hero-sub {
  font-size:   clamp(15px, 2.2vw, 18px);
  line-height: 1.78;
  color:       rgba(255,255,255,0.75);
}

.hero-quote {
  font-size:   14px;
  line-height: 1.7;
  color:       rgba(255,255,255,0.6);
}

.page-hero p {
  font-size:   clamp(15px, 2vw, 17px);
  line-height: 1.82;
  color:       rgba(255,255,255,0.7);
}

/* ----------------------------------------------------------
   6. SECTION SPACING — more vertical rhythm
   ---------------------------------------------------------- */
.sec {
  padding-top:    72px;
  padding-bottom: 72px;
}

@media (min-width: 960px) {
  .sec {
    padding-top:    96px;
    padding-bottom: 96px;
  }
}

@media (min-width: 1200px) {
  .sec {
    padding-top:    112px;
    padding-bottom: 112px;
  }
}

/* ----------------------------------------------------------
   7. CARDS — bump small text for readability
   ---------------------------------------------------------- */
.card-body p {
  font-size:   14.5px;
  line-height: 1.78;
}

.card-body h3 {
  font-size:   20px;
  margin-bottom: 10px;
}

/* ----------------------------------------------------------
   8. INSIGHT CARDS (dark bg)
   ---------------------------------------------------------- */
.ins-card p {
  font-size:   13.5px;
  line-height: 1.78;
  color:       rgba(255,255,255,0.55);
}

.ins-card h3 {
  font-size:   20px;
  line-height: 1.28;
}

/* ----------------------------------------------------------
   9. BLOG CARDS
   ---------------------------------------------------------- */
.blog-card-body h3 {
  font-size:   18px;
  line-height: 1.32;
}

.blog-card-body p {
  font-size:   14px;
  line-height: 1.78;
}

.blog-featured-body p {
  font-size:   15px;
  line-height: 1.82;
}

/* ----------------------------------------------------------
  10. ARTICLE / BLOG CONTENT — premium reading experience
   ---------------------------------------------------------- */
.article-body {
  max-width: 760px;
}

.article-body p {
  font-size:     17px;
  line-height:   1.88;
  color:         var(--text);
  margin-bottom: 22px;
}

.article-body h2 {
  font-size:     26px;
  margin-top:    44px;
  margin-bottom: 18px;
}

.article-body h3 {
  font-size:     21px;
  margin-top:    34px;
  margin-bottom: 12px;
}

.article-body li {
  font-size:     16px;
  line-height:   1.82;
  color:         var(--text2);
  margin-bottom: 8px;
}

.article-body blockquote {
  font-size:   17px;
  line-height: 1.78;
  font-style:  italic;
  color:       var(--navy);
  padding:     16px 22px;
  margin:      28px 0;
  border-left: 3px solid var(--orange);
}

/* ----------------------------------------------------------
  11. STEPS / APPROACH
   ---------------------------------------------------------- */
.step p {
  font-size:   14.5px;
  line-height: 1.8;
  color:       rgba(255,255,255,0.58);
}

.step h3 {
  font-size: 22px;
}

.approach-center p {
  font-size:   15.5px;
  color:       rgba(255,255,255,0.58);
}

/* ----------------------------------------------------------
  12. CTA
   ---------------------------------------------------------- */
.cta-body p {
  font-size:   16px;
  line-height: 1.78;
  color:       rgba(255,255,255,0.68);
}

/* ----------------------------------------------------------
  13. ABOUT — values boxes, timeline
   ---------------------------------------------------------- */
.val-box p {
  font-size:   13px;
  line-height: 1.72;
}

.timeline-content p {
  font-size:   14px;
  line-height: 1.75;
}

/* ----------------------------------------------------------
  14. FOOTER — slight legibility bump
   ---------------------------------------------------------- */
.f-desc {
  font-size:   13.5px;
  line-height: 1.85;
  color:       rgba(255,255,255,0.48);
}

.footer-col ul a {
  font-size: 14px;
  color:     rgba(255,255,255,0.58);
}

.footer-col h4 {
  font-size: 12px;
  color:     rgba(255,255,255,0.38);
}

/* ----------------------------------------------------------
  15. NAVIGATION — slight bump
   ---------------------------------------------------------- */
.nav-links a {
  font-size: 14.5px;
}

.nav-drawer a {
  font-size: 15.5px;
}

/* ----------------------------------------------------------
  16. FAQ
   ---------------------------------------------------------- */
.faq-q h3 {
  font-size:   16px;
  line-height: 1.45;
}

.faq-a-inner p {
  font-size:   15px;
  line-height: 1.85;
}

/* ----------------------------------------------------------
  17. LEGAL / PRIVACY
   ---------------------------------------------------------- */
.legal-content p {
  font-size:   15.5px;
  line-height: 1.88;
}

.legal-content li {
  font-size:   15px;
  line-height: 1.82;
}

.legal-content h2 {
  font-size:     24px;
  margin-top:    38px;
  margin-bottom: 14px;
}

.legal-content h3 {
  font-size:     19px;
  margin-top:    28px;
  margin-bottom: 10px;
}

/* ----------------------------------------------------------
  18. CONTACT PAGE
   ---------------------------------------------------------- */
.contact-method p,
.contact-method a {
  font-size:   14.5px;
  line-height: 1.72;
}

.hours-row {
  font-size: 14px;
}

.form-group label {
  font-size:      13.5px;
  letter-spacing: 0.01em;
}

.form-group input,
.form-group select,
.form-group textarea {
  font-size: 15px;
}

.form-card > p {
  font-size:   14.5px;
  line-height: 1.75;
}

/* ----------------------------------------------------------
  19. SERVICE DETAIL PAGES
   ---------------------------------------------------------- */
.svc-content p {
  font-size:   15.5px;
  line-height: 1.85;
}

.svc-list li {
  font-size:   15px;
  line-height: 1.72;
}

/* ----------------------------------------------------------
  20. PORTFOLIO / CAREERS
   ---------------------------------------------------------- */
.port-body p {
  font-size:   13.5px;
  line-height: 1.75;
}

.job-card p {
  font-size:   14px;
  line-height: 1.75;
}

.benefit-item p {
  font-size:   13.5px;
  line-height: 1.68;
}

/* ----------------------------------------------------------
  21. SERVICE CARDS (city pages)
   ---------------------------------------------------------- */
.service-card p {
  font-size:   15px;
  line-height: 1.7;
}

.service-card h3 {
  font-size:   1.25rem;
  margin-bottom: 10px;
}

/* ----------------------------------------------------------
  22. SECTION-PAD — match updated .sec rhythm
   ---------------------------------------------------------- */
.section-pad {
  padding-top:    72px;
  padding-bottom: 72px;
}

@media (min-width: 960px) {
  .section-pad {
    padding-top:    96px;
    padding-bottom: 96px;
  }
}