/* Homepage services showcase */
.services-showcase {
  background:#111113;
  color:#fff;
  padding-block:clamp(38px,5vw,76px);
  scroll-margin-top:70px;
}
.showcase-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
  margin-bottom:32px;
}
.showcase-heading h2 {
  font-size:clamp(34px,4.1vw,62px);
  line-height:1.03;
  letter-spacing:-.055em;
  font-weight:850;
}
.showcase-heading h2 span {color:#ff3452}
.showcase-all {
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:46px;
  padding:11px 20px;
  border:1px solid #5c5c61;
  border-radius:40px;
  font-size:14px;
  font-weight:650;
  transition:background-color .2s, border-color .2s;
}
.showcase-all svg {width:18px;height:18px;color:#ff526b}
.showcase-all:hover {background:#2c2c2f;border-color:#aaa}
.showcase-grid {
  display:grid;
  grid-template-columns:1.45fr 1fr 1fr;
  grid-template-rows:clamp(295px,24vw,345px) clamp(210px,16vw,240px);
  gap:18px;
}
.showcase-card {
  position:relative;
  display:block;
  overflow:hidden;
  isolation:isolate;
  min-width:0;
  border-radius:12px;
  background:#282829;
  box-shadow:inset 0 0 0 1px #ffffff18;
  color:#fff;
}
.showcase-card::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(180deg,transparent 20%,#08080805 32%,#0808088c 66%,#080808f2 100%);
  pointer-events:none;
}
.showcase-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  transition:transform .55s cubic-bezier(.2,.65,.3,1);
}
.showcase-apparel {grid-row:span 2}
.showcase-apparel .showcase-image {object-position:48% 28%}
.showcase-apparel::after {background:linear-gradient(180deg,transparent 37%,#08080812 50%,#080808de 83%,#080808 100%)}
.showcase-uniforms .showcase-image {object-position:49% 22%}
.showcase-gifting .showcase-image {object-position:51% 20%}
.showcase-printing {grid-column:2 / 4}
.showcase-printing::after {background:linear-gradient(90deg,#080808f2 0%,#080808b3 36%,#08080805 76%)}
.showcase-printing .showcase-image {object-position:center}
.showcase-card-copy {
  position:absolute;
  inset:auto 24px 23px;
  padding-right:35px;
}
.showcase-card-copy h3 {
  font-size:clamp(24px,2.25vw,33px);
  letter-spacing:-.045em;
  line-height:1.06;
  font-weight:780;
}
.showcase-card-copy p {
  margin-top:10px;
  max-width:32ch;
  color:#f1eeee;
  font-size:13px;
  line-height:1.5;
}
.showcase-apparel .showcase-card-copy {inset:auto 32px 30px;padding-right:48px}
.showcase-apparel h3 {font-size:clamp(35px,3.9vw,59px);max-width:8ch}
.showcase-apparel p {max-width:28ch;font-size:15px;margin-top:14px}
.showcase-printing .showcase-card-copy {top:50%;bottom:auto;transform:translateY(-50%);max-width:48%;padding-right:0}
.showcase-printing h3 {max-width:11ch}
.showcase-printing p {max-width:24ch}
.showcase-arrow {
  position:absolute;
  right:20px;
  bottom:24px;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#151517;
  background:#fff;
  transition:background-color .2s,color .2s,transform .2s;
}
.showcase-arrow svg {width:17px;height:17px;transform:rotate(-45deg)}
.showcase-apparel .showcase-arrow {right:28px;bottom:30px;width:44px;height:44px}
.showcase-printing .showcase-arrow {bottom:auto;top:20px}
.services-showcase :focus-visible {outline:3px solid #ff647b;outline-offset:6px}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .showcase-card:hover .showcase-image {transform:scale(1.045)}
  .showcase-card:hover .showcase-arrow {background:#f22a47;color:#fff;transform:translate(2px,-2px)}
}
@media(max-width:1050px) {
  .showcase-grid {grid-template-columns:1.15fr 1fr 1fr;gap:14px}
  .showcase-card-copy {inset:auto 19px 20px;padding-right:22px}
  .showcase-card-copy h3 {font-size:25px}
  .showcase-apparel .showcase-card-copy {inset:auto 22px 24px;padding-right:32px}
  .showcase-apparel h3 {font-size:41px}
  .showcase-arrow {right:14px;bottom:18px;width:27px;height:27px}
  .showcase-apparel .showcase-arrow {right:20px;bottom:25px;width:35px;height:35px}
  .showcase-printing .showcase-card-copy {max-width:50%}
}
@media(max-width:800px) {
  .showcase-heading {gap:22px;align-items:start}
  .showcase-all {font-size:12px;padding:9px 14px;gap:10px}
  .showcase-grid {grid-template-columns:1fr 1fr;grid-template-rows:320px 280px;gap:15px}
  .showcase-apparel {grid-row:auto}
  .showcase-printing {grid-column:auto}
  .showcase-apparel h3 {font-size:33px;max-width:none}
  .showcase-apparel .showcase-card-copy {inset:auto 24px 23px;padding-right:30px}
  .showcase-apparel p {font-size:13px;margin-top:10px}
  .showcase-card-copy h3 {font-size:28px}
  .showcase-printing::after {background:linear-gradient(180deg,transparent 20%,#080808ad 65%,#080808fa 100%)}
  .showcase-printing .showcase-card-copy {top:auto;bottom:20px;transform:none;max-width:none;padding-right:30px}
  .showcase-printing .showcase-image {object-position:72% 15%}
  .showcase-printing .showcase-arrow {top:auto;bottom:18px}
}
@media(max-width:540px) {
  .services-showcase {padding-block:34px 36px}
  .showcase-heading {flex-wrap:wrap;gap:18px;margin-bottom:24px}
  .showcase-heading h2 {font-size:36px;max-width:11ch}
  .showcase-all {min-height:44px}
  .showcase-grid {grid-template-columns:minmax(0,1fr);grid-template-rows:365px repeat(2,320px) 220px;gap:16px}
  .showcase-card {border-radius:10px}
  .showcase-card-copy,.showcase-apparel .showcase-card-copy {inset:auto 22px 23px;padding-right:40px}
  .showcase-card-copy h3 {font-size:32px;max-width:12ch}
  .showcase-card-copy p,.showcase-apparel p {font-size:13px;max-width:29ch}
  .showcase-apparel h3 {font-size:40px;max-width:8ch}
  .showcase-arrow,.showcase-apparel .showcase-arrow {width:35px;height:35px;right:20px;bottom:24px}
  .showcase-printing .showcase-card-copy {inset:auto 22px 23px;padding-right:40px}
  .showcase-printing .showcase-card-copy h3 {font-size:28px}
  .showcase-printing .showcase-card-copy p {max-width:24ch}
  .showcase-printing .showcase-image {object-position:72% 20%}
}
@media(prefers-reduced-motion:reduce) {
  .services-showcase * {transition:none!important}
}
/* Keep the preceding hero within the same narrow viewport. */
.brand-hero > * {min-width:0}
@media(max-width:540px) {
  .showcase-heading h2 {max-width:none;font-size:clamp(32px,8.5vw,36px)}
  .brand-hero h1 {font-size:clamp(40px,10.6vw,72px)}
}
.brand-hero-photo {width:100%}