/* Refinements of the selected direction, using its original font, color and copy. */
.mobile-introduction{display:none}
.refinement .portrait{width:100%}
.refinement .portrait-inner{border-radius:6px}
.refinement .portrait figcaption strong{max-width:170px}
.studio .portrait-inner{aspect-ratio:4/4.4}
.studio .portrait img{object-position:60% 45%;transform:scale(1.03);transform-origin:60% 45%}
.studio .personal>img{object-position:52% 58%}

@media(max-width:640px){
  .refinement .hero{padding-block:25px 29px}
  .refinement .intro{margin-top:17px}
  .refinement .hero-copy{display:contents}
  .refinement .partner-hero{display:grid;grid-template-columns:1fr;gap:0}
  .refinement h1{font-size:clamp(36px,10.7vw,58px);line-height:1.01}
  .refinement .under-action{font-size:12px;margin-top:10px}

  /* A face and a real introduction come before the message, instead of after the CTA. */
  .hello .partner-hero{grid-template-columns:88px minmax(0,1fr);column-gap:18px}
  .hello .portrait{grid-column:1;grid-row:1;display:block;max-width:none;border:0;padding:0;margin:0 0 22px}
  .hello .portrait-inner{width:88px;height:104px;aspect-ratio:auto;border-radius:4px}
  .hello .portrait img{transform:scale(1.1);object-position:52% 55%;transform-origin:52% 55%}
  .hello .portrait figcaption{display:none}
  .hello .mobile-introduction{grid-column:2;grid-row:1;display:block;align-self:center;margin-bottom:22px}
  .mobile-introduction p{font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.8px}
  .mobile-introduction span{display:block;max-width:155px;margin-top:8px;font-size:14px;line-height:1.35;color:var(--muted)}
  .hello .desktop-introduction{display:none}
  .hello h1{grid-column:1/-1;grid-row:2}
  .hello .hero-details{grid-column:1/-1;grid-row:3}

  /* A working scene belongs to the message, rather than a detached headshot card. */
  .studio .hero-copy>.label{grid-row:1;max-width:285px;margin-bottom:17px}
  .studio h1{grid-row:2}
  .studio .portrait{grid-row:3;display:block;padding:0;margin-top:21px;border:0;position:relative}
  .studio .portrait-inner{width:100%;height:auto;aspect-ratio:1.85;border-radius:4px}
  .studio .portrait img{object-position:50% 44%;transform:none}
  .studio .portrait figcaption{position:absolute;inset:auto 0 0;padding:28px 13px 11px;margin:0;border:0;color:#fff;background:linear-gradient(transparent,rgba(12,22,17,.78));border-radius:0 0 4px 4px}
  .studio .portrait figcaption>span{font-size:13px;font-weight:600;margin:0}
  .studio .portrait figcaption strong{display:none}
  .studio .hero-details{grid-row:4}
  .studio .intro{margin-block:16px 20px}
  .refinement .engage h2{font-size:clamp(37px,10.3vw,47px)}
}
@media(max-width:350px){
  .hello .partner-hero{grid-template-columns:76px minmax(0,1fr);column-gap:15px}
  .hello .portrait-inner{width:76px;height:94px}
  .mobile-introduction p{font-size:22px}
  .mobile-introduction span{font-size:13px}
  .refinement h1{font-size:34px}
}