/* V4.3.11 — type, text choreography and paired project exits. */
.hero-copy .role{
  font-family:var(--body-font);font-size:clamp(19px,1.5vw,24px)!important;
  font-weight:500;letter-spacing:-.018em!important;line-height:1.45!important;
  color:#e4e8e6!important;max-width:30em;text-wrap:balance;
}
#about .about-copy .about-role{font-family:var(--body-font);font-size:clamp(16px,1.25vw,20px);font-weight:500;letter-spacing:-.015em;color:#e4e8e6}

/* Both actions use the very same component, with no circular secondary arrow. */
.case-behance.case-return{
  display:grid;grid-template-columns:1fr auto;row-gap:9px;column-gap:0;
  width:380px;max-width:100%;min-height:84px;padding:17px 20px;
  border:1px solid #ffffff0c;border-radius:12px;
  background:linear-gradient(120deg,#141616,#0d0f0f);text-align:left;
  font-family:inherit;justify-content:normal;
}
.case-behance.case-return:hover,.case-behance.case-return:focus-visible{border-color:#ff6a0033;background:linear-gradient(120deg,#191b19,#111210)}
.case-return:hover .case-behance__arrow{transform:translateY(-4px)}

/* One section label, one grid for every existing reference. */
#about .references.reference-row{display:block;padding-top:32px;border-top:1px solid #ffffff12}
.references .reference-label{margin:0 0 34px;font-size:11px;letter-spacing:.13em}
.references .client-logo-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 34px}
.references .client-mark{min-height:44px}

/* Native, selectable text revealed through measured line masks. */
#about[data-about-motion="light-reveal"] .about-line{overflow:hidden;overflow:clip;padding:.07em 0 .12em;margin:-.07em 0 -.12em}
#about[data-about-motion="light-reveal"] .about-line>span{transform-origin:0 100%;background:none!important;color:#f1f0ed!important;-webkit-text-fill-color:currentColor!important}
#about .about-text-mask{display:block;overflow:hidden;overflow:clip;padding-block:.08em;margin-block:-.08em}
#about .about-text-line{display:block;transform-origin:0 100%}

@media(max-width:1100px){.references .client-logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}}
@media(max-width:760px){
  .hero-copy .role{font-size:clamp(16px,4.25vw,20px)!important;line-height:1.5!important;max-width:23em}
  #about .about-copy .about-role{font-size:16px;line-height:1.55}
  .case-behance.case-return{min-height:80px;padding:16px 18px;row-gap:8px;border-radius:10px}
  .references .reference-label{margin-bottom:26px;font-size:10px}
  .references .client-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
}
@media(prefers-reduced-motion:reduce){
  #about .about-line>span,#about .about-text-line{transform:none!important;opacity:1!important;filter:none!important}
}