/* A small portfolio of the actual customer logos, websites and visual assets. */
.customer-card--brand {
  flex: 0 0 clamp(350px, 30vw, 500px);
  width: clamp(350px, 30vw, 500px);
  border: 0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 10px 24px #251c0b0c;
}
.customer-card--brand > a { display: grid; grid-template-rows: auto 1fr; color: #171714; border: 1px solid #251c0b12; border-radius: inherit; overflow: hidden; }
.customer-card--brand > a:focus-visible { outline: 3px solid #171714; outline-offset: -4px; }
.customer-brand { position: relative; height: 380px; overflow: hidden; background: radial-gradient(circle at 12% 15%, #ffffffbd, transparent 64%), var(--customer-wash); }
.customer-brand::before { content: ''; position: absolute; width: 250px; height: 250px; border: 1px solid #ffffffc4; border-radius: 50%; left: -70px; top: 95px; }
.customer-brand__logo { position: absolute; z-index: 2; top: 28px; left: 24px; width: 39%; height: 112px; padding: 17px; display: grid; place-items: center; background: #fff; border-radius: 14px; transform: rotate(-6deg); box-shadow: 0 12px 24px #27201b15; }
.customer-brand__logo img { width: 100%; height: 100%; object-fit: contain; }
.customer-brand__palette { position: absolute; top: 162px; left: 30px; display: flex; gap: 7px; }
.customer-brand__palette span { width: 22px; height: 22px; border-radius: 50%; background: var(--customer-primary); border: 3px solid #ffffffa6; }
.customer-brand__palette span:nth-child(2) { background: var(--customer-secondary); }
.customer-brand__palette span:nth-child(3) { background: #fff; }
.customer-brand__website { position: absolute; z-index: 1; top: 47px; right: -2%; width: 55%; height: 320px; border: 6px solid #fff; border-radius: 15px; background: #fff; overflow: hidden; transform: rotate(7deg); box-shadow: 0 18px 35px #27201b30; transition: transform .35s ease; }
.customer-brand__browser { display: flex; align-items: center; gap: 3px; height: 23px; background: #fff; padding: 0 5px; overflow: hidden; }
.customer-brand__browser i { width: 4px; height: 4px; flex: none; border-radius: 50%; background: #d4d1cb; }
.customer-brand__browser span { margin-left: 4px; font: 9px/1.3 Arial, sans-serif; color: #66635f; white-space: nowrap; }
.customer-brand__website > img { width: 100%; height: auto; display: block; }
.customer-brand__visual { position: absolute; z-index: 3; bottom: 29px; left: 17px; width: 52%; height: 143px; padding: 6px; background: #fff; border-radius: 12px; transform: rotate(-7deg); box-shadow: 0 15px 25px #27201b24; overflow: hidden; }
.customer-brand__visual img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 7px; }
.customer-brand__visual--cover { height: 124px; display: grid; grid-template-rows: 1fr auto; gap: 5px; }
.customer-brand__visual--cover img { object-fit: contain; background: #faf6f0; }
.customer-brand__visual--cover > span { font-size: 10px; line-height: 1.3; text-align: center; color: #5b5149; }
.customer-brand__identity { height: 100%; padding: 14px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(130deg, var(--customer-primary), var(--customer-secondary)); color: #fff; border-radius: 7px; }
.customer-brand__identity strong { font-size: 21px; line-height: 1.05; letter-spacing: -.03em; }
.customer-brand__identity > span { font-size: 10px; margin-top: 7px; line-height: 1.3; }
.customer-brand__identity small { font-size: 9px; line-height: 1.3; margin-top: 14px; opacity: .8; }
.customer-brand__stamp { position: absolute; z-index: 4; top: 15px; right: 17px; font-size: 10px; line-height: 1.4; font-weight: 800; background: #ffffffc9; border: 1px solid #ffffffcf; border-radius: 999px; padding: 5px 9px; color: #37332d; }
.customer-brand__caption { min-height: 128px; padding: 21px 23px; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 14px; }
.customer-card--brand .customer-card__kind { font-size: 10px; line-height: 1.3; margin-bottom: 6px; letter-spacing: .07em; }
.customer-card--brand h3 { font-size: clamp(24px, 1.8vw, 29px); line-height: 1.12; min-height: 0; margin: 0 0 7px; letter-spacing: -.025em; }
.customer-brand__domain { display: block; font-size: 13px; line-height: 1.4; color: #6c675f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-brand__visit { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #ffcb05; color: #171714; font-size: 24px; transition: transform .25s; }
.customer-card--brand > a:hover .customer-brand__website { transform: rotate(4deg) translateY(-3px); }
.customer-card--brand > a:hover .customer-brand__visit { transform: rotate(9deg); }
@media (max-width: 700px) {
  .customer-card--brand { width: min(350px, calc(100vw - 48px)); flex-basis: min(350px, calc(100vw - 48px)); border-radius: 22px; }
  .customer-brand { height: 322px; }
  .customer-brand__logo { top: 29px; left: 18px; height: 94px; padding: 12px; border-radius: 11px; }
  .customer-brand__palette { top: 146px; left: 24px; gap: 5px; }
  .customer-brand__palette span { width: 18px; height: 18px; border-width: 2px; }
  .customer-brand__website { top: 43px; height: 273px; border-width: 5px; border-radius: 12px; }
  .customer-brand__browser { height: 19px; padding-inline: 3px; }
  .customer-brand__browser span { font-size: 8px; }
  .customer-brand__visual { left: 13px; bottom: 28px; height: 116px; padding: 5px; border-radius: 10px; }
  .customer-brand__visual--cover { height: 104px; }
  .customer-brand__stamp { top: 12px; right: 12px; font-size: 9px; padding: 4px 7px; }
  .customer-brand__caption { min-height: 115px; padding: 19px 18px; gap: 10px; grid-template-columns: minmax(0, 1fr) 38px; }
  .customer-card--brand h3 { font-size: 23px; }
  .customer-brand__domain { font-size: 12px; }
  .customer-brand__visit { width: 38px; height: 38px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-brand__website, .customer-brand__visit { transition: none; }
}