/*
 * Hey Pawan sitewide type system.
 * Loaded after page styles so typography remains consistent without changing layout components.
 */
:root {
  --hp-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hp-heading-color: #0B132B;
  --hp-body-color: #475569;
  --ink: var(--hp-heading-color);
  --muted: var(--hp-body-color);
  --hp-heading-h1: clamp(2.05rem, 3.75vw, 3.15rem);
  --hp-heading-h2: clamp(1.55rem, 2.4vw, 2.1rem);
  --hp-heading-h3: clamp(1rem, 1.4vw, 1.25rem);
  --hp-heading-h4: clamp(0.98rem, 1.2vw, 1.15rem);
}

.hp-service-page {
  --hps-ink: var(--hp-heading-color);
  --hps-text: var(--hp-body-color);
}

.hp-ppc-page {
  --ppc-ink: var(--hp-heading-color);
  --ppc-copy: var(--hp-body-color);
}

.hp-web-page {
  --web-ink: var(--hp-heading-color);
  --web-copy: var(--hp-body-color);
}

.hpac-page {
  --hpac-ink: var(--hp-heading-color);
  --hpac-copy: var(--hp-body-color);
}

/* AI SEO is loaded inline after the global layer, so its shared color tokens need priority. */
body #hpseo-page {
  --hp-ink: var(--hp-heading-color) !important;
  --hp-text: var(--hp-body-color) !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--hp-font-family);
}

body {
  font-weight: 400;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--hp-font-family);
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

body main#main h1,
body main#main-content h1,
body main#hpseo-page h1 {
  font-size: var(--hp-heading-h1) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
}

body main#main h2,
body main#main-content h2,
body main#hpseo-page h2 {
  font-size: var(--hp-heading-h2) !important;
  line-height: 1.14 !important;
  letter-spacing: 0.01em !important;
}

body main#main h3,
body main#main-content h3,
body main#hpseo-page h3 {
  font-size: var(--hp-heading-h3) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
}

body main#main h4,
body main#main-content h4,
body main#hpseo-page h4 {
  font-size: var(--hp-heading-h4) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
}

body main p {
  color: var(--hp-body-color);
  font-weight: 400;
}

/* The only shared button color change in this task. */
.btn-upwork,
.hpseo-btn-upwork,
.footer-social .social-upwork {
  color: #ffffff !important;
  border-color: #108A00 !important;
  background-color: #108A00 !important;
  background-image: none !important;
}

.btn-upwork:hover,
.btn-upwork:focus,
.btn-upwork:focus-visible,
.hpseo-btn-upwork:hover,
.hpseo-btn-upwork:focus,
.hpseo-btn-upwork:focus-visible,
.footer-social .social-upwork:hover,
.footer-social .social-upwork:focus,
.footer-social .social-upwork:focus-visible {
  color: #ffffff !important;
  border-color: #0B6B00 !important;
  background-color: #0B6B00 !important;
  background-image: none !important;
}

body .hp-service-hero-system :is(.btn-upwork, .hpseo-btn-upwork),
body .footer-cta-actions .btn-upwork,
body main :is(.btn-upwork, .hpseo-btn-upwork) {
  color: #ffffff !important;
}

body .hp-service-hero-system :is(.btn-upwork, .hpseo-btn-upwork):is(:hover, :focus, :focus-visible),
body .footer-cta-actions .btn-upwork:is(:hover, :focus, :focus-visible),
body main :is(.btn-upwork, .hpseo-btn-upwork):is(:hover, :focus, :focus-visible) {
  color: #ffffff !important;
}

/* One visible hierarchy trail on every public view except the homepage. */
.hp-global-breadcrumb {
  position: relative;
  z-index: 4;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.66);
  background: #06152c;
}

.hp-global-breadcrumb-inner {
  display: flex;
  width: min(1180px, calc(100% - 48px));
  min-height: 44px;
  align-items: center;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  list-style: none;
  white-space: nowrap;
}

.hp-global-breadcrumb-inner li {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  color: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.hp-global-breadcrumb-inner li + li::before {
  margin: 0 0.62rem;
  color: #65e5f4;
  content: "/";
}

.hp-global-breadcrumb-inner a {
  color: #fff;
  text-decoration: none;
}

.hp-global-breadcrumb-inner a:hover,
.hp-global-breadcrumb-inner a:focus-visible {
  color: #65e5f4;
}

.hp-global-breadcrumb-inner [aria-current="page"] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep consent controls vertically centred with both one- and two-line copy. */
body .home-contact-form .home-consent-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 0.48rem !important;
}

body .home-contact-form .home-consent-check input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0 !important;
}

body .home-contact-form .home-consent-check > span {
  display: block;
  min-width: 0;
  line-height: 1.38 !important;
}

@media (max-width: 680px) {
  .hp-global-breadcrumb-inner {
    width: min(100% - 28px, 640px);
    min-height: 40px;
  }

  .hp-global-breadcrumb-inner li {
    font-size: 0.72rem;
  }
}