#branding .services-section-header{
  margin-bottom:36px;
}

#branding .services-section-header h2{
  max-width:none;
}

#design .services-section-header h2{max-width:800px}
#digital .services-section-header h2,
#automation .services-section-header h2,
#express .services-section-header h2{max-width:none}

@media(min-width:821px){
  #branding .services-section-header h2{white-space:nowrap}
}

#branding.section{
  padding-top:52px;
}

.brand-showcase{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.68fr);
  min-height:600px;
  border-top:1px solid #d7d3cd;
  border-right:1px solid #d7d3cd;
  background:#f6f4ef;
}

.brand-showcase__media{
  position:relative;
  min-width:0;
  min-height:600px;
  overflow:hidden;
  border-bottom:1px solid #d7d3cd;
  border-left:1px solid #d7d3cd;
  background:#292724;
}

.brand-showcase__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.025);
  transition:opacity .45s ease,transform .8s cubic-bezier(.2,.75,.25,1);
}

.brand-showcase__image.is-active{
  opacity:1;
  transform:scale(1);
}

.brand-showcase__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(12,11,10,.68));
  pointer-events:none;
}

.brand-showcase__media-caption{
  position:absolute;
  z-index:1;
  right:28px;
  bottom:24px;
  left:28px;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.brand-showcase__list{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  min-width:0;
}

.brand-showcase__item{
  position:relative;
  display:flex;
  grid-column:span 2;
  min-width:0;
  min-height:300px;
  flex-direction:column;
  justify-content:center;
  padding:44px 58px 34px 24px;
  border-bottom:1px solid #d7d3cd;
  border-left:1px solid #d7d3cd;
  color:#1a1918;
  text-decoration:none;
  transition:background-color .25s ease;
}

.brand-showcase__item:nth-child(n+4){
  grid-column:span 3;
}

.brand-showcase--four .brand-showcase__list{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.brand-showcase--four .brand-showcase__item,
.brand-showcase--four .brand-showcase__item:nth-child(n+4){
  grid-column:span 1;
  min-height:300px;
}

.brand-showcase__item::before{
  content:"";
  position:absolute;
  top:28px;
  bottom:28px;
  left:-1px;
  width:3px;
  background:#ff4b16;
  opacity:0;
  transform:scaleY(.55);
  transition:opacity .2s ease,transform .3s ease;
}

.brand-showcase__number,
.brand-showcase__meta{
  position:absolute;
  top:22px;
  color:#85817b;
  font-size:10px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.brand-showcase__number{left:24px}
.brand-showcase__meta{right:20px;max-width:110px;text-align:right}

.brand-showcase__item h3{
  margin:12px 0 10px;
  color:#1a1918;
  font-size:clamp(21px,1.48vw,26px);
  font-weight:650;
  line-height:1.08;
  letter-spacing:-.025em;
}

.brand-showcase__item p{
  max-width:29em;
  margin:0;
  color:#74706a;
  font-size:13px;
  line-height:1.48;
}

.brand-showcase__arrow{
  position:absolute;
  right:18px;
  bottom:28px;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid #bbb7b1;
  border-radius:50%;
  color:#1a1918;
  font-size:17px;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}

.brand-showcase__item:is(.is-active,:hover,:focus-visible){background:#fbfaf7}
.brand-showcase__item:is(.is-active,:hover,:focus-visible)::before{opacity:1;transform:scaleY(1)}
.brand-showcase__item:is(.is-active,:hover,:focus-visible) .brand-showcase__arrow{
  border-color:#ff4b16;
  background:#ff4b16;
  color:#fff;
  transform:translateX(3px);
}

.brand-showcase__item:focus-visible{
  z-index:2;
  outline:3px solid #ff6b35;
  outline-offset:-3px;
}

@media(max-width:1180px){
  .brand-showcase{grid-template-columns:minmax(260px,.72fr) minmax(0,1.58fr)}
  .brand-showcase__item{padding-right:48px;padding-left:20px}
  .brand-showcase__number{left:20px}
  .brand-showcase__meta{right:16px}
  .brand-showcase__arrow{right:14px}
}

@media(max-width:980px){
  .brand-showcase{grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr)}
  .brand-showcase__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-showcase__item,
  .brand-showcase__item:nth-child(n+4){grid-column:span 1;min-height:240px}
  .brand-showcase--four .brand-showcase__item,
  .brand-showcase--four .brand-showcase__item:nth-child(n+4){min-height:240px}
  .brand-showcase__item:nth-child(5){grid-column:1 / -1;min-height:190px}
}

@media(max-width:820px){
  .brand-showcase{grid-template-columns:1fr;min-height:0;border-top:0}
  .brand-showcase__media{
    min-height:0;
    aspect-ratio:16 / 9;
    border-top:1px solid #d7d3cd;
  }
  .brand-showcase__item{min-height:210px}
}

@media(max-width:620px){
  #branding.section{padding-top:40px}
  #branding .services-section-header{margin-bottom:28px}
  .brand-showcase__media{aspect-ratio:4 / 3}
  .brand-showcase__list,
  .brand-showcase--four .brand-showcase__list{grid-template-columns:1fr}
  .brand-showcase__item,
  .brand-showcase__item:nth-child(n+4),
  .brand-showcase__item:nth-child(5){
    grid-column:1;
    min-height:190px;
    padding:50px 68px 26px 22px;
  }
  .brand-showcase__number{left:22px}
  .brand-showcase__meta{right:18px}
  .brand-showcase__item h3{font-size:26px}
  .brand-showcase__item p{font-size:14px}
  .brand-showcase__arrow{right:18px;bottom:24px;width:40px;height:40px}
  .brand-showcase__media-caption{right:20px;bottom:18px;left:20px}
}

@media(max-width:380px){
  .brand-showcase__item,
  .brand-showcase__item:nth-child(n+4),
  .brand-showcase__item:nth-child(5){min-height:196px;padding-left:18px}
  .brand-showcase__number{left:18px}
  .brand-showcase__item p{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  .brand-showcase__image,
  .brand-showcase__item,
  .brand-showcase__item::before,
  .brand-showcase__arrow{transition:none}
}