/* --------------------------------------------------
STANDARD PAGE SECTION
Used for most content sections across the site.
Provides consistent vertical spacing between
major page sections.
-------------------------------------------------- */
.pc-section {
  padding-top: var(--pc-space-2xl);
  padding-bottom: var(--pc-space-2xl);
}
/* --------------------------------------------------
TIGHT SECTION
Used for testimonial strips, logos, or compact
content areas.
-------------------------------------------------- */
.pc-section-tight {
  padding-top: var(--pc-space-xl);
  padding-bottom: var(--pc-space-xl);
}
/* --------------------------------------------------
LOOSE SECTION
Used for hero sections or image-driven blocks
that need more visual breathing room.
-------------------------------------------------- */
.pc-section-loose {
  padding-top: var(--pc-space-3xl);
  padding-bottom: var(--pc-space-3xl);
}
/* --------------------------------------------------
STANDARD CONTENT CONTAINER
Ensures all content aligns consistently across
the site and prevents overly wide layouts.
-------------------------------------------------- */
.pc-container {
  width: min(100% - 40px, var(--pc-max-width));
  margin-inline: auto;
}
/* --------------------------------------------------
NARROW CONTENT CONTAINER
Used for blog text, long-form content, and
FAQ sections to improve readability.
-------------------------------------------------- */
.pc-container--narrow {
  width: min(100% - 40px, var(--pc-narrow-width));
  margin-inline: auto;
}

/* --------------------------------------------------
CARD COMPONENT
Used for service cards, testimonials, and
feature boxes.
-------------------------------------------------- */
.pc-card {
  padding: var(--pc-space-lg);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-sm);

}