/* =========================================================
   typography.css – Writer Worldwide Relocations
   Pure typography upgrade — no layout, color or spacing changes
   Load AFTER style.css and responsive.css
   ========================================================= */

/* ---- 1. FONT IMPORTS ----------------------------------------
   Swapping to:
   – Display: Playfair Display (kept, weight tuning added)
   – Body:    Inter (cleaner, better screen rendering than DM Sans)
   ------------------------------------------------------------- */

/* ---- 2. ROOT FONT TOKENS ---- */
:root {
  --font-display : 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body    : 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale (clamp: min | preferred | max) */
  --text-xs   : clamp(0.70rem, 1.2vw, 0.78rem);   /* labels, captions */
  --text-sm   : clamp(0.82rem, 1.4vw, 0.875rem);  /* secondary UI text */
  --text-base : clamp(0.95rem, 1.6vw, 1.0rem);    /* body default */
  --text-md   : clamp(1.0rem,  1.8vw, 1.075rem);  /* sub-copy, card body */
  --text-lg   : clamp(1.05rem, 2vw,   1.15rem);   /* hero sub, section sub */
  --text-xl   : clamp(1.2rem,  2.4vw, 1.35rem);   /* form titles, testimonials */
  --text-2xl  : clamp(1.55rem, 3vw,   2.0rem);    /* card headings, why-item h4 */
  --text-3xl  : clamp(1.9rem,  3.8vw, 2.6rem);    /* section headings */
  --text-4xl  : clamp(2.4rem,  5vw,   3.6rem);    /* hero headline */
  --text-5xl  : clamp(2.8rem,  6vw,   4.2rem);    /* hero headline max */

  /* Tracking */
  --tracking-tight  : -0.02em;
  --tracking-normal :  0;
  --tracking-wide   :  0.04em;
  --tracking-wider  :  0.1em;
  --tracking-widest :  0.15em;

  /* Leading */
  --leading-tight  : 1.15;
  --leading-snug   : 1.3;
  --leading-normal : 1.6;
  --leading-relaxed: 1.75;
  --leading-loose  : 1.9;
}

/* ---- 3. BASE BODY TYPE ---- */
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ---- 4. SECTION LABELS ---- */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* ---- 5. SECTION HEADINGS ---- */
.section-heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 18px;
}

/* ---- 6. SECTION SUB-COPY ---- */
.section-sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

/* ---- 7. HEADER TOP BAR ---- */
.header-top {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.015em;
}
.header-top-inner a { font-weight: 700; letter-spacing: 0.02em; }

/* ---- 8. NAV LINKS ---- */
.nav-links li a {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav-links .nav-btn {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- 9. LOGO ---- */
.logo-text {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo-text span { font-weight: 800; letter-spacing: -0.015em; }
.logo-text small {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.logo-mark {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 900;
}

/* ---- 10. BUTTONS ---- */
.btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.025em;
}

/* ---- 11. HERO ---- */
.hero-badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1.0rem, 1.8vw, 1.125rem);
  font-weight: 400;
  line-height: var(--leading-loose);
  letter-spacing: 0.005em;
  margin-bottom: 34px;
}

.hero-trust-row {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- 12. HERO FORM ---- */
.form-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.55rem);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.form-sub {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.form-group label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
}

/* ---- 13. STATS ---- */
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.0rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-plus {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 900;
}
.stat-item p {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ---- 14. ABOUT ---- */
.about-content p {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  font-weight: 400;
  margin-bottom: 16px;
}
.about-point {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.about-badge-card strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.about-badge-card span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- 15. SERVICE CARDS ---- */
.service-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.0rem, 1.8vw, 1.1rem);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  padding: 18px 18px 6px;
  margin-bottom: 0;
}
.service-card p {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-body);
  padding: 0 18px 10px;
}
.card-link {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 18px 18px;
}
.featured-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- 16. WHY SECTION ---- */
.why-content > p {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}
.why-item h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 5px;
}
.why-item p {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.7;
}
.why-cta-block p {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---- 17. INTERNATIONAL SECTION ---- */
.intl-card h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.intl-card p {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.75;
}
.intl-destinations p {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.destinations-row span {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---- 18. PROCESS ---- */
.step-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.0rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.process-step h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.process-step p {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.7;
}

/* ---- 19. BRANCH STRIP ---- */
.branch-city {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- 20. FAQ ---- */
.faq-sidebar p {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  font-weight: 400;
}
.faq-question {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: var(--leading-snug);
  padding: 20px 22px;
}
.faq-answer p {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-loose);
  padding: 16px 22px 20px;
}

/* ---- 21. TESTIMONIALS ---- */
.testimonial-card > p {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-loose);
  font-style: italic;
  letter-spacing: 0.005em;
}
.reviewer strong {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.reviewer span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.reviewer-avatar {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.stars { font-size: 0.82rem; letter-spacing: 0.04em; }

/* ---- 22. BLOG CARDS ---- */
.blog-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-content h3 {
  font-family: var(--font-display);
  font-size: clamp(1.0rem, 1.8vw, 1.1rem);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.blog-content p {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.72;
  margin-bottom: 14px;
}
.blog-link {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- 23. CTA STRIP ---- */
.cta-strip h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.0rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
}
.cta-strip p {
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-relaxed);
}

/* ---- 24. FOOTER ---- */
.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.footer-col ul li a {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.footer-brand p {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-loose);
}
.footer-contact-info a {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.footer-bottom p {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ---- 25. FORM SUCCESS / ERROR MESSAGES ---- */
.form-success, .form-error {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* =========================================================
   RESPONSIVE TYPOGRAPHY OVERRIDES
   ========================================================= */

/* ---- Tablet: ≤900px ---- */
@media (max-width: 900px) {
  body { font-size: 16px; line-height: var(--leading-relaxed); }

  .hero-headline { letter-spacing: -0.025em; }
  .section-heading { letter-spacing: -0.02em; }

  .about-content p,
  .why-content > p,
  .faq-sidebar p { font-size: 1.0rem; line-height: var(--leading-relaxed); }

  .testimonial-card > p { font-size: 0.88rem; }
}

/* ---- Mobile: ≤600px ---- */
@media (max-width: 600px) {
  body { font-size: 15.5px; }

  .hero-headline {
    font-size: clamp(2.0rem, 8vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .hero-sub {
    font-size: 1.0rem;
    line-height: 1.8;
  }

  .section-heading {
    font-size: clamp(1.55rem, 6.5vw, 2.0rem);
    line-height: 1.2;
  }

  .form-title {
    font-size: 1.25rem;
  }

  .stat-number { font-size: 2.1rem; }

  .service-card h3 { font-size: 1.0rem; }
  .service-card p  { font-size: 0.85rem; }

  .faq-question {
    font-size: 0.9rem;
    padding: 16px 18px;
  }
  .faq-answer p {
    font-size: 0.85rem;
    padding: 12px 18px 18px;
  }

  .testimonial-card > p { font-size: 0.86rem; line-height: 1.72; }
  .reviewer strong       { font-size: 0.88rem; }

  .blog-content h3 { font-size: 1.0rem; }
  .blog-content p  { font-size: 0.85rem; }

  .cta-strip h3   { font-size: 1.5rem; }
  .footer-col h4  { font-size: 0.7rem; }
  .footer-col ul li a { font-size: 0.86rem; }
}

/* ---- Small mobile: ≤400px ---- */
@media (max-width: 400px) {
  .hero-headline { font-size: 1.85rem; line-height: 1.12; }
  .section-heading { font-size: 1.45rem; }
  .hero-sub { font-size: 0.95rem; }
  .stat-number { font-size: 1.85rem; }
}