:root {
  --site-header-width: 1440px;
  --site-content-width: 1320px;
  --site-page-gutter: clamp(16px, 2vw, 24px);
}

/* One shared content rail across pages; section backgrounds remain full-bleed. */
.navbar-shell,
.site-footer__wrap,
.blog-page__hero-wrap,
.blog-page__wrap,
.districts-wrap,
.district-page__wrap,
.home-blog-wrap,
.home-reviews-wrap,
.home-faq-wrap,
.hero-container,
.solutions-wrap,
.excellence-wrap,
.service-universe__wrap,
.seo-content-wrap,
.patna-web-wrap,
.services-offered__wrap,
.values-wrap,
.services-cta__inner,
.clients-section__wrap,
.tech-stack-wrap,
.about-wrap {
  width: min(var(--site-content-width), 100%) !important;
  max-width: var(--site-content-width) !important;
  margin-inline: auto !important;
}

.navbar-shell {
  width: min(var(--site-header-width), 100%) !important;
  max-width: var(--site-header-width) !important;
}

.blog-page__wrap,
.blog-page__hero-wrap {
  box-sizing: border-box;
}

.patna-design {
  --pd-page-gutter: var(--site-page-gutter);
  padding-inline: var(--site-page-gutter);
}

.patna-design__breadcrumbs,
.patna-design__hero,
.patna-design__section,
.patna-design__cta,
.patna-clients,
.patna-design__prose,
.patna-design__wide-image,
.patna-design__industry-list,
.patna-design__locality-visual,
.patna-design__locality-list,
.patna-design__note,
.patna-design__guide-grid,
.patna-design__faq-list {
  box-sizing: border-box;
  width: min(var(--site-content-width), 100%) !important;
  max-width: var(--site-content-width) !important;
  margin-inline: auto !important;
}

/* Shared hero-title scale: matches the Website Design page across the site. */
:root {
  --site-hero-title-size: 3.5rem;
  --site-hero-title-line-height: 1.06;
  --site-hero-kicker-size: .82rem;
  --site-hero-lead-size: 1.15rem;
  --site-hero-proof-title-size: 10px;
  --site-hero-proof-detail-size: 10px;
  --site-hero-cta-title-size: 1.16rem;
  --site-hero-action-title-size: 12px;
  --site-hero-action-detail-size: .75rem;
  --site-hero-action-icon-size: 30px;
}

.patna-design__hero h1,
.webdev__hero h1,
.ecom-hero h1,
.crawl-page__hero h1,
.hero h2,
.blog-page__hero h1,
.blog-article h1,
.district-hero h1,
.localities-hero h1,
.about-hero h1 {
  font-size: var(--site-hero-title-size) !important;
  line-height: var(--site-hero-title-line-height) !important;
}

.patna-design__eyebrow,
.webdev__eyebrow,
.ecom-hero .ecom-eyebrow {
  font-size: var(--site-hero-kicker-size);
}

.patna-design__hero-copy > p,
.webdev__hero-copy > p,
.ecom-hero .ecom-hero__lead {
  font-size: var(--site-hero-lead-size);
}

.patna-design__button {
  font-size: var(--site-hero-action-title-size);
}
.ecom-hero .ecom-button {
  font-size: var(--site-hero-action-title-size);
}

/* Website Design is the reference for the proof and contact type scale. */
.patna-design__trust li strong,
.webdev__proof-points strong {
  font-size: var(--site-hero-proof-title-size) !important;
}
.patna-design__trust li small,
.webdev__proof-points small {
  font-size: var(--site-hero-proof-detail-size) !important;
}
.patna-design__consultation-title,
.webdev__contact-block h2 {
  font-size: var(--site-hero-cta-title-size) !important;
}
.patna-design__contact-options strong,
.webdev__contact-actions strong {
  font-size: var(--site-hero-action-title-size) !important;
}
.patna-design__contact-options small,
.webdev__contact-actions small {
  font-size: var(--site-hero-action-detail-size) !important;
}
.patna-design__contact-options > a > i,
.webdev__contact-actions > a > i {
  flex-basis: var(--site-hero-action-icon-size);
  width: var(--site-hero-action-icon-size);
  height: var(--site-hero-action-icon-size);
}

@media (max-width: 900px) {
  :root {
    --site-hero-title-size: clamp(2.5rem, 6.2vw, 3.5rem);
  }
}

@media (max-width: 600px) {
  :root {
    --site-hero-title-size: clamp(2.2rem, 8.5vw, 3rem);
    --site-hero-title-line-height: 1.2;
    --site-hero-kicker-size: .75rem;
    --site-hero-lead-size: 1rem;
    --site-hero-cta-title-size: 1.08rem;
  }
}

/* Shared mobile heading rhythm, including page-specific section titles. */
@media (max-width: 600px) {
  body h1, body h2, body h3, body h4, body h5, body h6 {
    line-height: 1.2 !important;
  }
}