:root {
  --ny-page-bg: #ffffff;
  --ny-page-surface: #ffffff;
  --ny-page-surface-soft: #f8fafc;
  --ny-page-border: #dbe2ea;
  --ny-page-border-strong: #e2e8f0;
  --ny-page-radius-lg: 24px;
  --ny-page-radius-md: 16px;
  --ny-page-shadow-soft: 0 12px 24px rgba(15, 23, 42, 0.05);
  --ny-title-h1: clamp(34px, 5.2vw, 56px);
  --ny-title-h2: clamp(28px, 4.1vw, 40px);
  --ny-title-h3: clamp(20px, 2.2vw, 26px);
}

:is(.pu-page, .pf-page, .on-page, .contact-page, .blog-page, .blog-single-page, .vacancy-single-page) {
  background: var(--ny-page-bg);
  color: var(--c-text);
}

:is(.pu-page, .pf-page, .on-page) h1 {
  margin: 0;
  font-size: var(--ny-title-h1);
  line-height: 1.04;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

:is(.pu-page, .pf-page, .on-page) h2 {
  margin: 0 0 var(--s-4);
  font-size: var(--ny-title-h2);
  line-height: 1.12;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}

:is(.pu-page, .pf-page, .on-page) h3 {
  margin: 0;
  font-size: var(--ny-title-h3);
  line-height: 1.25;
  font-weight: var(--fw-bold);
}

:is(.pu-page, .pf-page, .on-page) p {
  margin: 0;
  font-size: var(--fs-3);
  line-height: 1.62;
  color: #475569;
}

.pf-page li,
.pf-page summary {
  font-size: var(--fs-3);
  line-height: 1.62;
}

:is(.pu-kicker, .pf-section__kicker, .on-section__kicker) {
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(225, 29, 47, 0.08);
  color: #e11d2f;
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

:is(.pu-hero__kicker, .pf-hero__kicker, .on-hero__kicker, .blog-header__kicker, .contact-hero__kicker) {
  margin: 0 0 12px !important;
  width: max-content;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(225, 29, 47, 0.08);
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:is(
  .pu-hero #pu-hero-title,
  .pf-hero #pf-hero-title,
  .on-hero #on-hero-title,
  .blog-page .blog-header__title,
  .contact-hero .contact-hero__title
) {
  margin-top: 0 !important;
}

/* Unified inner-page hero system (except homepage mosaic) */
:is(.pu-hero, .pf-hero, .on-hero, .contact-hero, .blog-page .blog-hero) {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 104px) 0;
  border-bottom: 1px solid var(--ny-page-border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

:is(.pu-hero__grid, .pf-hero__grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}

:is(.pu-hero__grid--single, .pf-hero__grid--single) {
  grid-template-columns: minmax(0, 1fr);
}

:is(.pu-hero__content, .pf-hero__content, .on-hero .on-narrow, .blog-page .blog-header) {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.contact-hero__intro {
  position: relative;
  z-index: 1;
  border: 1px solid var(--ny-page-border-strong);
  border-radius: 22px;
  background: #ffffff;
  padding: clamp(24px, 3.4vw, 40px);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

:is(.on-hero .on-narrow, .contact-hero__intro) {
  width: 100%;
}

.on-hero .on-narrow {
  max-width: 980px;
}

.contact-hero__intro {
  max-width: 920px;
}

:is(.pu-hero__actions, .pf-hero__actions) {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

:is(.pu-hero__media, .pf-hero__media) {
  border-radius: 18px;
  border: 1px solid var(--ny-page-border);
  overflow: hidden;
  box-shadow: 0 16px 26px rgba(15, 23, 42, 0.12);
  background: #ffffff;
}

:is(.pu-hero__media img, .pf-hero__media img) {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pf-hero__lead,
.on-hero p {
  margin-top: var(--s-4);
  max-width: 62ch;
}

.contact-hero::before,
.contact-hero::after {
  display: none;
}

.blog-page .blog-hero::before,
.blog-page .blog-hero::after {
  content: none;
  display: none;
}

.contact-hero > .container {
  min-height: 0;
  display: grid;
  align-items: start;
  justify-content: stretch;
  gap: var(--s-4);
}

.blog-page .blog-hero > .container {
  min-height: 0;
  display: grid;
  align-items: start;
  justify-content: stretch;
  gap: var(--s-4);
}

.contact-hero__title {
  margin: 0;
  text-align: left;
  color: var(--c-text);
}

.contact-hero__intro {
  margin: 0;
}

.blog-page .blog-header {
  max-width: 980px;
  margin: 0;
  text-align: left;
}

.blog-page .blog-header__title {
  margin: 0;
  font-size: var(--ny-title-h1);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--c-text);
  text-align: left !important;
}

.blog-page .blog-header__lead {
  margin: var(--s-4) 0 0;
  max-width: 62ch;
  color: #475569;
  font-size: var(--fs-3);
  line-height: 1.62;
}

/* Keep inner-page content sections white (homepage has its own intentional gray sections). */
:is(
  .blog-surface,
  .blog-newsletter__inner,
  .vacancy-single-body,
  .vacancy-overview-grid
) {
  background: #ffffff;
}

:is(.pu-benefits-wrap .container, .pu-journey .container, .pu-seo .container, .pu-page .hp-vacancies-v2 .container, .pu-section[aria-labelledby="pu-faq-title"] .container) {
  border: 1px solid var(--ny-page-border);
  border-radius: var(--ny-page-radius-lg);
  background: var(--ny-page-surface);
}

.pf-section[aria-labelledby="pf-faq-title"] .container {
  border: 1px solid var(--ny-page-border);
  border-radius: var(--ny-page-radius-lg);
  background: var(--ny-page-surface);
  padding-top: clamp(30px, 4vw, 52px);
  padding-bottom: clamp(34px, 4vw, 58px);
}

:is(.pu-benefit-card, .pu-support-steps li, .pu-journey-card, .pf-card, .on-principle) {
  border-color: var(--ny-page-border-strong);
  border-radius: var(--ny-page-radius-md);
}

:is(.pu-section[aria-labelledby="pu-faq-title"] h2, .pf-section[aria-labelledby="pf-faq-title"] h2) {
  margin: 0;
  text-align: center;
  font-size: var(--ny-title-h2);
  line-height: 1.12;
}

:is(.pu-faq, .pf-faq) {
  margin: clamp(20px, 2.8vw, 30px) auto 0;
  width: min(100%, 860px);
  display: grid;
  gap: 14px;
}

:is(.pu-faq details, .pf-faq details) {
  border: 1px solid #e6eaf0;
  border-radius: 20px;
  background: #ffffff;
  padding: 0;
  overflow: hidden;
  transition: border-color 220ms ease, background-color 220ms ease;
}

:is(.pu-faq details, .pf-faq details):hover {
  border-color: #d8dee8;
  background: #ffffff;
}

:is(.pu-faq summary, .pf-faq summary) {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 24px);
  font-weight: var(--fw-semibold);
  color: #0f172a;
  line-height: 1.35;
  list-style: none;
}

:is(.pu-faq summary, .pf-faq summary)::-webkit-details-marker {
  display: none;
}

:is(.pu-faq summary, .pf-faq summary)::after {
  content: "\2304";
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #e6eaf0;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-size: 18px;
  line-height: 1;
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

:is(.pu-faq details[open], .pf-faq details[open]) summary::after {
  transform: rotate(180deg);
  border-color: #d5dde8;
  background: #ffffff;
}

:is(.pu-faq p, .pf-faq p) {
  margin: 0;
  padding: 0 clamp(16px, 2.2vw, 24px) clamp(16px, 2vw, 22px);
  font-size: var(--fs-3);
  color: #475569;
}

@media (max-width: 980px) {
  :is(.pu-hero__grid, .pf-hero__grid) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 740px) {
  :is(.pu-hero, .pf-hero, .on-hero, .contact-hero, .blog-page .blog-hero) {
    padding: var(--s-6) 0;
  }

  :is(.pu-hero__grid, .pf-hero__grid) {
    grid-template-columns: 1fr;
  }

  :is(.pu-hero__actions, .pf-hero__actions) {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-hero__intro {
    padding: 20px;
  }

  .blog-page .blog-header__lead {
    font-size: 15px;
    line-height: 1.58;
  }

  .pf-section[aria-labelledby="pf-faq-title"] .container {
    padding-top: 28px;
    padding-bottom: 30px;
  }

  :is(.pu-faq, .pf-faq) {
    gap: 10px;
    margin-top: 18px;
  }

  :is(.pu-faq summary, .pf-faq summary) {
    padding: 15px 14px 15px 16px;
  }

  :is(.pu-faq summary, .pf-faq summary)::after {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  :is(.pu-faq p, .pf-faq p) {
    padding: 0 16px 16px;
    font-size: 15px;
  }
}