/* ==========================================================================
   HOMEPAGE-CALIBRATED WEBSITE SPACING SYSTEM (NON-HOMEPAGE SUBPAGES ONLY)
   Directly derived from the current approved Homepage (index.html):
   - Navbar to Hero clearance: 54px top, 48px bottom (desktop), 64px/42px (tablet), 54px/40px (mobile)
   - Hero text groups: eyebrow (20px mb), h1 (22px mb), p (26px mb), CTA (24px mt)
   - Major content sections visible padding: 84px top, 92px bottom (desktop), 72px/78px (tablet), 56px/62px (mobile)
   - Section heading clearance: 44px mb (desktop), 34px mb (tablet), 28px mb (mobile)
   - Card grids: 32px 24px gap (desktop), 28px 20px (tablet), 22px 16px (mobile)
   - Card internal padding: 28px (desktop), 24px (tablet), 20px (mobile)
   - Final section to footer clearance: 78px top, 32px bottom, 54px footer-bottom margin
   ========================================================================== */

/* 1. NAVBAR TO HERO CONTENT CLEARANCE
   Matches homepage .hero desktop (52px top, 28px bottom) + subpage vertical balance */
.about-page-hero,
.services-hero,
.tools-hero,
.contact-page-hero,
.portfolio-hero,
.category-hero {
  min-height: auto !important;
  padding-top: 54px !important;
  padding-bottom: 48px !important;
}

@media (max-width: 900px) {
  .about-page-hero,
  .services-hero,
  .tools-hero,
  .contact-page-hero,
  .portfolio-hero,
  .category-hero {
    min-height: auto !important;
    padding-top: 64px !important;
    padding-bottom: 42px !important;
  }
}

@media (max-width: 640px) {
  .about-page-hero,
  .services-hero,
  .tools-hero,
  .contact-page-hero,
  .portfolio-hero,
  .category-hero {
    min-height: auto !important;
    padding-top: 54px !important;
    padding-bottom: 40px !important;
  }
}

/* Hero Content Internal Rhythm (derived from homepage hero elements) */
.about-page-hero .eyebrow,
.services-hero .eyebrow,
.tools-hero .eyebrow,
.contact-page-hero .eyebrow,
.portfolio-hero .eyebrow,
.category-hero .eyebrow {
  margin-bottom: 20px !important;
}

.about-page-hero h1,
.services-hero h1,
.tools-hero h1,
.contact-page-hero h1,
.portfolio-hero h1,
.category-hero h1 {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}

.about-page-hero > p:last-of-type,
.services-hero > p:last-of-type,
.tools-hero > p:last-child,
.contact-page-hero > p:last-child,
.portfolio-hero > p:last-child,
.category-hero > p:last-of-type {
  margin-top: 0 !important;
  margin-bottom: 26px !important;
  max-width: 720px;
}

.category-hero .back-link {
  display: inline-block;
  margin-bottom: 18px !important;
}

@media (max-width: 640px) {
  .about-page-hero .eyebrow,
  .services-hero .eyebrow,
  .tools-hero .eyebrow,
  .contact-page-hero .eyebrow,
  .portfolio-hero .eyebrow,
  .category-hero .eyebrow {
    margin-bottom: 16px !important;
  }

  .about-page-hero h1,
  .services-hero h1,
  .tools-hero h1,
  .contact-page-hero h1,
  .portfolio-hero h1,
  .category-hero h1 {
    margin-bottom: 18px !important;
  }

  .about-page-hero > p:last-of-type,
  .services-hero > p:last-of-type,
  .tools-hero > p:last-child,
  .contact-page-hero > p:last-child,
  .portfolio-hero > p:last-child,
  .category-hero > p:last-of-type {
    margin-bottom: 20px !important;
  }
}

/* 2. MAJOR CONTENT SECTIONS RHYTHM
   Matches homepage .capabilities-section (96px/104px), .testimonials-section (112px/126px),
   and .process-section (90px/80px). Generous breathing room without artificial clamping. */
.about-story,
.journey,
.about-skills,
.cta-section,
.about-contact,
.client-offer,
.pricing-section,
.pricing-transparency,
.services-cta,
.packages-browser,
.packages-cta,
.tools-browser,
.tools-cta,
.contact-layout,
section.category-cta,
.portfolio-browser,
.portfolio-cta {
  padding-top: 84px !important;
  padding-bottom: 92px !important;
}

@media (max-width: 900px) {
  .about-story,
  .journey,
  .about-skills,
  .cta-section,
  .about-contact,
  .client-offer,
  .pricing-section,
  .pricing-transparency,
  .services-cta,
  .packages-browser,
  .packages-cta,
  .tools-browser,
  .tools-cta,
  .contact-layout,
  section.category-cta,
  .portfolio-browser,
  .portfolio-cta {
    padding-top: 72px !important;
    padding-bottom: 78px !important;
  }
}

@media (max-width: 640px) {
  .about-story,
  .journey,
  .about-skills,
  .cta-section,
  .about-contact,
  .client-offer,
  .pricing-section,
  .pricing-transparency,
  .services-cta,
  .packages-browser,
  .packages-cta,
  .tools-browser,
  .tools-cta,
  .contact-layout,
  section.category-cta,
  .portfolio-browser,
  .portfolio-cta {
    padding-top: 56px !important;
    padding-bottom: 62px !important;
  }
}

/* Section Header Text Groups (derived from homepage section titles & subtitles) */
.section-kicker,
.section-heading > div > p,
.section-title > p {
  margin-bottom: 12px !important;
}

.section-heading,
.section-title {
  margin-bottom: 44px !important;
}

.story-content h2,
.skills-copy h2,
.offer-copy h2,
.pricing-transparency h2,
.section-heading h2,
.section-title h2 {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.story-paragraphs {
  display: grid;
  gap: 20px !important;
}


@media (max-width: 900px) {
  .section-heading,
  .section-title {
    margin-bottom: 36px !important;
  }
}

@media (max-width: 640px) {
  .section-heading,
  .section-title {
    margin-bottom: 28px !important;
  }

  .story-content h2,
  .skills-copy h2,
  .offer-copy h2,
  .pricing-transparency h2,
  .section-heading h2,
  .section-title h2 {
    margin-bottom: 14px !important;
  }
}

/* 3. CARD GRIDS & INTERNAL CARD PADDING
   Derived from homepage capabilities grid (42px 22px gap) and process/contact cards (28px-30px padding) */
.portfolio-grid,
.project-grid,
.service-grid,
.package-grid,
.packages-grid,
.services-package-grid,
.tools-grid,
.tool-grid,
.about-achievements {
  gap: 32px 24px !important;
}

@media (max-width: 900px) {
  .portfolio-grid,
  .project-grid,
  .service-grid,
  .package-grid,
  .packages-grid,
  .services-package-grid,
  .tools-grid,
  .tool-grid,
  .about-achievements {
    gap: 28px 20px !important;
  }
}

@media (max-width: 640px) {
  .portfolio-grid,
  .project-grid,
  .service-grid,
  .package-grid,
  .packages-grid,
  .services-package-grid,
  .tools-grid,
  .tool-grid,
  .about-achievements {
    gap: 22px 16px !important;
  }
}

/* Card Internal Padding */
.package-card,
.tool-card,
.journey-card,
.contact-info-panel,
.contact-form-panel,
.offer-rules,
.pricing-transparency .glass-card {
  padding: 28px !important;
}

@media (max-width: 900px) {
  .package-card,
  .tool-card,
  .journey-card,
  .contact-info-panel,
  .contact-form-panel,
  .offer-rules,
  .pricing-transparency .glass-card {
    padding: 24px !important;
  }
}

@media (max-width: 640px) {
  .package-card,
  .tool-card,
  .journey-card,
  .contact-info-panel,
  .contact-form-panel,
  .offer-rules,
  .pricing-transparency .glass-card {
    padding: 20px !important;
  }
}

/* Filter Tabs Spacing */
.portfolio-tabs,
.filter-tabs,
.main-category-tabs,
.service-filters,
.tool-filters {
  margin-bottom: 34px !important;
  gap: 12px !important;
}

@media (max-width: 640px) {
  .portfolio-tabs,
  .filter-tabs,
  .main-category-tabs,
  .service-filters,
  .tool-filters {
    margin-bottom: 24px !important;
    gap: 8px !important;
  }
}

/* Journey Timeline Spacing */
.journey-timeline {
  margin-top: 48px !important;
}

.journey-item {
  padding-bottom: 36px !important;
}

@media (max-width: 640px) {
  .journey-timeline {
    margin-top: 32px !important;
  }

  .journey-item {
    padding-bottom: 28px !important;
  }
}

/* 4. CLEARANCE BEFORE FOOTER & FOOTER PADDING
   Derived from homepage .site-footer (86px 0 30px) and .footer-bottom (72px mt) */
.footer-main,
footer.footer-main {
  padding-top: 78px !important;
  padding-bottom: 32px !important;
}

.footer-bottom {
  margin-top: 54px !important;
  padding-top: 24px !important;
}

@media (max-width: 900px) {
  .footer-main,
  footer.footer-main {
    padding-top: 68px !important;
    padding-bottom: 28px !important;
  }

  .footer-bottom {
    margin-top: 44px !important;
    padding-top: 20px !important;
  }
}

@media (max-width: 640px) {
  .footer-main,
  footer.footer-main {
    padding-top: 56px !important;
    padding-bottom: 24px !important;
  }
  
  .footer-bottom {
    margin-top: 36px !important;
    padding-top: 18px !important;
  }
}