.site-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background: rgba(248, 247, 242, 0.96);
  backdrop-filter: blur(12px);
}
html {
  scroll-padding-top: 110px;
}
.home-needs > .container {
  display: block;
}
.home-needs header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 48px;
}
.home-needs header h2 {
  font-size: 27px;
  line-height: 1.8;
}
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.marketing {
  --group: #e4eee2;
  --accent: #6b8970;
}
.sales {
  --group: #e3eaf0;
  --accent: #6d869d;
}
.operations {
  --group: #f0eadb;
  --accent: #99865f;
}
.challenge {
  padding: 28px 24px 30px;
  background: var(--group);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s;
}
.challenge:hover {
  transform: translateY(-4px);
}
.challenge-tag {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
}
.challenge-tag span {
  font: 32px/1 var(--display);
  color: var(--accent);
}
.challenge h3 {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.9;
  font-weight: 500;
  margin: 0 0 20px;
}
.challenge-answer {
  font-size: 14px;
  line-height: 2;
  margin: 0 0 24px;
}
.challenge-link {
  font-size: 12px;
  margin-top: auto;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.support-group {
  background: var(--group);
  padding: 32px;
  margin-bottom: 28px;
  scroll-margin-top: 20px;
}
.support-group > header {
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin-bottom: 24px;
}
.support-group > header > p {
  font: 32px/1.2 var(--display);
  margin: 0;
  color: var(--accent);
}
.support-group > header > h3 {
  font-size: 14px;
  font-weight: 500;
}
.support-group .service-item {
  border: 0;
  padding: 18px 0;
  background: transparent;
}
.support-group .service-item h3 {
  font-size: 19px;
}
.support-group .service-item p {
  font-size: 14px;
}
.recruit-entry {
  background: #eaf0e9;
}
.recruit-entry-link {
  display: grid;
  grid-template-columns: 36% 1fr;
  gap: 9%;
  color: inherit;
  text-decoration: none;
}
.recruit-entry h2 {
  font-size: 14px;
}
.recruit-entry h3,
.recruit-intro h2 {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 24px;
}
.recruit-entry p:not(.heading-en) {
  font-size: 15px;
  line-height: 2;
}
.recruit-entry .text-link {
  margin-top: 24px;
}
.company-recruit-link h2 {
  font-size: 24px;
  font-weight: 500;
  margin: 20px 0;
}
.recruit-values {
  background: #eaf0e9;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 60px;
}
.values-grid article > span {
  font: 42px var(--display);
  color: #7a8d7b;
}
.values-grid h3 {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.7;
  margin: 22px 0;
}
.values-grid p {
  font-size: 15px;
  line-height: 2.1;
}
.recruit-talk {
  text-align: center;
}
.recruit-talk h2 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.8;
  margin: 28px 0;
}
.recruit-talk p:not(.heading-en) {
  font-size: 15px;
  line-height: 2.1;
}
.recruit-talk .button {
  margin-top: 28px;
}
.recruit-intro .team-scene {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  html {
    scroll-padding-top: 85px;
  }
  .home-needs header {
    display: block;
  }
  .home-needs header h2 {
    font-size: 23px;
    margin-top: 22px;
  }
  .challenge-grid,
  .recruit-entry-link,
  .values-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .challenge {
    padding: 25px;
  }
  .challenge h3 {
    font-size: 22px;
  }
  .support-group {
    padding: 24px 20px;
  }
  .support-group > header {
    display: block;
  }
  .support-group > header > h3 {
    margin-top: 8px;
  }
  .recruit-entry-link {
    gap: 32px;
  }
  .values-grid {
    gap: 38px;
  }
  .recruit-talk h2 {
    font-size: 24px;
  }
}
body {
  padding-top: 98px;
}
.site-header {
  position: fixed !important;
  inset: 0 0 auto;
  width: 100%;
  height: 98px;
  box-sizing: border-box;
}
.home-page .site-header {
  background: rgba(247, 244, 235, 0.96);
}
@media (max-width: 720px) {
  body {
    padding-top: 78px;
  }
  .site-header {
    height: 78px;
  }
}
/* Floating navigation without a background band. */
body .site-header,
body.home-page .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
/* Keep the recruitment lead together at laptop and phone widths. */
.recruit-intro h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  text-wrap: balance;
}
.company-recruit-link h2 {
  text-wrap: balance;
}
@media (max-width: 760px) {
  .recruit-talk h2 {
    font-size: 22px;
    text-wrap: balance;
  }
}

/* Keep the transparent header legible over the dark photographic/contact areas. */
body .site-header {
  filter: none;
  text-shadow: none;
}
body .site-header .is-on-dark,
body .site-header .brand.is-on-dark .brand-dot {
  color: #fff;
}
body .site-header .header-contact.is-on-dark {
  background: #fff;
  color: var(--ink);
}
body .site-header .menu-toggle.is-on-dark > span:not(.sr-only) {
  background: #fff;
}
/* The pink hover wash still uses dark lettering for contrast. */
body .site-header .soft-action.soft-active,
body .site-header .soft-action:focus-visible {
  color: #48283f;
}
@media (max-width: 720px) {
  body .site-header .main-nav.is-open a {
    color: var(--ink);
  }
}