/* Contact is the canonical page-hero recipe. Service variants change only artwork and color. */
.about-page .page-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:center; gap:clamp(40px,4vw,80px); min-height:90svh; padding:clamp(152px,15svh,184px) var(--gutter) clamp(72px,8svh,96px); background:var(--page-hero-surface,#fff); color:#050607; }
.about-page .page-hero-copy { min-width:0; }
.about-page .page-hero .about-label { margin-bottom:28px; }
.about-page .page-hero h1 { font-size:clamp(60px,4.7vw,96px); line-height:1.05; letter-spacing:-.05em; text-wrap:balance; }
.about-page .page-hero .page-hero-lead { max-width:48ch; margin-top:32px; color:#596873; font-size:18px; line-height:1.5; text-wrap:pretty; }
.about-page .page-hero .page-hero-actions { flex-wrap:wrap; margin-top:36px; }
.about-page .page-hero .page-hero-actions .cut-button { width:max-content; min-width:0; justify-content:flex-start; font-size:18px; min-height:64px; padding:18px 25px; gap:20px; }
.about-page .page-hero-actions .button-stroke path { fill:none; stroke:var(--button-border); stroke-width:1; stroke-linejoin:miter; vector-effect:non-scaling-stroke; }
.about-page .page-hero-actions .cut-button { transition:color .32s ease,background-color 0s,transform .36s cubic-bezier(.16,1,.3,1),filter .36s ease; }
.about-page .page-hero-actions .cut-button:is(:hover,:focus-visible) { background:var(--button-hover-bg); transition:color .32s ease,background-color 0s .46s,transform .36s cubic-bezier(.16,1,.3,1),filter .36s ease; }
.about-page .page-hero-actions .cut-button:active { background:var(--button-hover-bg); transition:color .08s ease,background-color 0s,transform .08s cubic-bezier(.16,1,.3,1),filter .08s ease; }
.about-page .page-hero-lead[data-enter],.about-page .page-hero-actions[data-enter] { --enter-rise:24px; --enter-scale:1; }

/* A service page supplies its own complementary pair; the layout stays shared. */
.social-recruiting-page .service-hero { --page-hero-surface:#f4f3ff; --page-hero-accent:#8c82ff; }
.social-recruiting-page .service-hero .sr-accent { color:var(--page-hero-accent); }
.about-page .service-hero .page-hero-actions .cut-button { --button-base-bg:var(--page-hero-accent); --button-base-fg:#050607; --button-base-border:var(--page-hero-accent); --button-hover-bg:#050607; --button-hover-fg:#fff; --button-hover-border:#050607; }
:is(.social-recruiting-page .sr-hero-art,.employer-branding-page .eb-hero-art,.direct-recruiting-page .dr-hero-art) { display:flex; align-items:center; justify-content:center; min-width:0; height:clamp(440px,32vw,620px); --enter-rise:32px; --enter-scale:1; }
.social-recruiting-page .sr-hero-art .online-recruiting-illustration { display:block; width:100%; height:100%; max-width:780px; overflow:visible; }
.social-recruiting-page .sr-hero-art :is(.online-window,.online-lens,.online-orbit,.online-dot-active) { animation-play-state:paused; }
.social-recruiting-page .sr-hero-art.is-loop-visible :is(.online-window,.online-lens,.online-orbit,.online-dot-active) { animation-play-state:running; }

@media (max-width:1100px) {
  .about-page .page-hero { grid-template-columns:1fr; gap:48px; min-height:0; padding-top:148px; padding-bottom:var(--compact-space); }
  .about-page .page-hero-copy { max-width:850px; }
  .about-page .page-hero h1 { max-width:19ch; font-size:clamp(54px,7.2vw,78px); }
  .about-page .page-hero .page-hero-lead { font-size:17px; }
  .about-page .page-hero .page-hero-actions .cut-button { padding-inline:20px; font-size:16px; gap:18px; }
  :is(.social-recruiting-page .sr-hero-art,.employer-branding-page .eb-hero-art,.direct-recruiting-page .dr-hero-art) { width:100%; max-width:900px; height:clamp(440px,62vw,620px); margin-inline:auto; }
  .about-page .page-hero.service-hero .page-hero-visual { order:-1; height:auto; margin:0; align-items:flex-start; justify-content:flex-start; }
  .about-page .page-hero.service-hero .page-hero-visual svg { width:80%; height:auto; max-width:624px; }
}
@media (max-width:760px) {
  .about-page .page-hero { padding-top:132px; gap:36px; }
  .about-page .page-hero .about-label { margin-bottom:24px; }
  .about-page .page-hero h1 { font-size:clamp(39px,8.8vw,62px); max-width:20ch; }
  .about-page .page-hero .page-hero-lead { margin-top:24px; font-size:16px; }
  .about-page .page-hero .page-hero-actions { margin-top:28px; gap:12px; }
  .about-page .page-hero .page-hero-actions .cut-button { width:100%; justify-content:space-between; min-height:54px; padding:15px 17px; font-size:16px; }
  .about-page .service-hero { gap:24px; }
}
@media (min-width:1921px) and (min-aspect-ratio:21/10) {
  .about-page .page-hero { min-height:0; padding-top:200px; padding-bottom:120px; }
  .about-page .page-hero h1 { font-size:96px; }
  :is(.social-recruiting-page .sr-hero-art,.employer-branding-page .eb-hero-art,.direct-recruiting-page .dr-hero-art) { height:700px; }
}
@media (prefers-reduced-motion:reduce) {
  .about-page .page-hero-actions .cut-button { transition:none; }
  .social-recruiting-page .sr-hero-art :is(.online-window,.online-lens,.online-orbit,.online-dot-active) { animation:none; will-change:auto; }
}