/* ==========================================================================
   STANDARDIZED WEBSITE TYPOGRAPHY SYSTEM
   Reference: Approved Homepage (index.html)
   Font Family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
   ========================================================================== */

:root {
  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --title-gradient: linear-gradient(135deg, #55ddff 0%, #3b82f6 32%, #8467ff 68%, #ec4899 100%);
  --grad: linear-gradient(135deg, #55ddff 0%, #3b82f6 32%, #8467ff 68%, #ec4899 100%);
}

/* ==========================================================================
   1. PAGE HERO TITLES (H1)
   Matching homepage hero typography:
   Desktop: clamp(44px, 4.5vw, 64px), Weight 700, Line-height 1.15, Letter-spacing -0.025em
   Mobile: clamp(32px, 8.5vw, 42px), Weight 700, Line-height 1.16, Letter-spacing -0.02em
   ========================================================================== */
.hero h1,
.about-page-hero h1,
.services-hero h1,
.packages-hero h1,
.tools-hero h1,
.contact-page-hero h1,
.portfolio-hero h1,
.category-hero h1,
.services-page-copy h1,
.service-detail-layout h1,
main > section:first-of-type h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(44px, 4.5vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin-top: 16px;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .hero h1,
  .about-page-hero h1,
  .services-hero h1,
  .packages-hero h1,
  .tools-hero h1,
  .contact-page-hero h1,
  .portfolio-hero h1,
  .category-hero h1,
  .services-page-copy h1,
  .service-detail-layout h1,
  main > section:first-of-type h1 {
    font-size: clamp(32px, 8.5vw, 42px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.02em !important;
    margin-top: 14px;
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   2. SECTION TITLES (H2)
   Matching homepage section headers:
   Desktop: clamp(40px, 4.2vw, 58px), Weight 700, Line-height 1.15, Letter-spacing -0.025em
   Mobile: clamp(30px, 7.8vw, 38px), Weight 700, Line-height 1.16, Letter-spacing -0.02em
   ========================================================================== */
.homepage-section-title,
.capabilities-header h2,
.testimonials-header h2,
.process-header h2,
.footer-contact h2,
.section-title h2,
.section-heading h2,
.story-content h2,
.skills-copy h2,
.journey h2,
.about-skills h2,
.cta-section h2,
.about-contact h2,
.offer-copy h2,
.pricing-transparency h2,
.pricing-process h2,
.services-cta h2,
.packages-cta h2,
.tools-cta h2,
.portfolio-cta h2,
.category-cta h2,
.service-detail-cta h2,
.work-gallery-header h2,
.contact-info-panel h2,
.contact-form-panel h2,
.contact h2,
.cta-card h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(40px, 4.2vw, 58px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (max-width: 640px) {
  .homepage-section-title,
  .capabilities-header h2,
  .testimonials-header h2,
  .process-header h2,
  .footer-contact h2,
  .section-title h2,
  .section-heading h2,
  .story-content h2,
  .skills-copy h2,
  .journey h2,
  .about-skills h2,
  .cta-section h2,
  .about-contact h2,
  .offer-copy h2,
  .pricing-transparency h2,
  .pricing-process h2,
  .services-cta h2,
  .packages-cta h2,
  .tools-cta h2,
  .portfolio-cta h2,
  .category-cta h2,
  .service-detail-cta h2,
  .work-gallery-header h2,
  .contact-info-panel h2,
  .contact-form-panel h2,
  .contact h2,
  .cta-card h2 {
    font-size: clamp(30px, 7.8vw, 38px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.02em !important;
  }
}

/* Modal Title Dialogs */
.quote-panel > h2,
.contact-panel > h2,
.lightbox-panel h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(26px, 3.4vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

/* ==========================================================================
   3. CARD & SUB-HEADINGS (H3, H4, Card-Specific Titles)
   Proportionally smaller, maintaining font family, crisp geometry, and clean spacing
   ========================================================================== */
.portfolio-card-copy h2,
.tool-headings h2,
.journey-card h3,
.package-card h3,
.project-body h3,
.glass-card h3,
.offer-rules h3,
.about-achievements article h3,
.service-category-panel h1,
.capability-card h3,
.capability-back-title,
.service-link strong,
.quick-copy strong,
.project-card h3,
.service-card h3,
.portfolio-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.015em !important;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 640px) {
  .portfolio-card-copy h2,
  .tool-headings h2,
  .journey-card h3,
  .package-card h3,
  .project-body h3,
  .glass-card h3,
  .offer-rules h3,
  .about-achievements article h3,
  .service-category-panel h1,
  .project-card h3,
  .service-card h3,
  .portfolio-card h3 {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   4. HIGHLIGHTED TITLE PHRASES
   Cyan–Blue–Purple–Pink gradient treatment matching homepage
   ========================================================================== */
.hero h1 span,
.about-page-hero h1 span,
.services-hero h1 span,
.packages-hero h1 span,
.tools-hero h1 span,
.contact-page-hero h1 span,
.portfolio-hero h1 span,
.category-hero h1 span,
.services-page-copy h1 span,
.service-detail-layout h1 span,
main > section:first-of-type h1 span,
.homepage-section-title span,
.capabilities-header h2 span,
.testimonials-header h2 span,
.process-header h2 span,
.footer-contact h2 span,
.section-title h2 span,
.section-heading h2 span,
.story-content h2 span,
.skills-copy h2 span,
.journey h2 span,
.about-skills h2 span,
.cta-section h2 span,
.about-contact h2 span,
.offer-copy h2 span,
.pricing-transparency h2 span,
.pricing-process h2 span,
.services-cta h2 span,
.packages-cta h2 span,
.tools-cta h2 span,
.portfolio-cta h2 span,
.category-cta h2 span,
.contact h2 span,
.cta-card h2 span,
.gradient-text,
.heading-line-gradient {
  background: var(--title-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline !important;
}

/* Graceful Fallback for browsers lacking background-clip: text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 span,
  .about-page-hero h1 span,
  .services-hero h1 span,
  .packages-hero h1 span,
  .tools-hero h1 span,
  .contact-page-hero h1 span,
  .portfolio-hero h1 span,
  .category-hero h1 span,
  .section-title h2 span,
  .section-heading h2 span,
  .story-content h2 span,
  .skills-copy h2 span,
  .journey h2 span,
  .about-skills h2 span,
  .cta-section h2 span,
  .offer-copy h2 span,
  .pricing-transparency h2 span,
  .pricing-process h2 span,
  .services-cta h2 span,
  .packages-cta h2 span,
  .tools-cta h2 span,
  .portfolio-cta h2 span,
  .category-cta h2 span,
  .gradient-text {
    color: #55ddff !important;
    background: none !important;
    -webkit-text-fill-color: #55ddff !important;
  }
}