/* Brand showcase: editorial typography and abstract, code-native artwork. */
.brand-collection {
  background: radial-gradient(ellipse at 0 0, #e9e2f780, transparent 48%), #f6f5f8;
}
.brand-collection .section-head { margin-bottom: 32px; }
.brand-collection .collection-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #d9d4e4;
  padding-top: 16px;
  margin-bottom: 20px;
  color: #787182;
  font: 9px/1.5 Arial, sans-serif;
  letter-spacing: 1.7px;
}
.collection-caption span:last-child { color: #7957b9; }
.brand-collection .service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.brand-collection .service-card {
  --card-ink: #251b3d;
  --card-line: #251b3d25;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  height: 252px;
  padding: 22px 24px 18px;
  border: 0;
  border-radius: 12px;
  color: var(--card-ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease;
}
.brand-collection .service-card:hover,
.brand-collection .service-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 17px 30px #3024431c;
}
.brand-collection .service-card:focus-visible { outline-offset: 4px; }
.service-card.brand-wide { grid-column: span 2; }
.brand-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
  font: 9px/1 Arial, sans-serif;
  letter-spacing: 1px;
}
.brand-meta span:last-child { font-size: 8px; letter-spacing: 1.4px; }
.brand-collection .service-name {
  position: relative;
  z-index: 1;
  font-family: Arial, sans-serif;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: .96;
  letter-spacing: -2.6px;
  font-weight: 850;
  margin: 18px 0;
}
.brand-collection .brand-wide .service-name { font-size: 76px; letter-spacing: -4px; }
.brand-collection .service-link {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--card-line);
  padding-top: 12px;
  margin: 0;
  color: inherit;
  font: 11px/1.4 Arial, sans-serif;
  letter-spacing: .2px;
}
.brand-collection .service-link .brand-visit {
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: none;
}
.brand-visit b { font-size: 10px; font-weight: 500; }
.brand-visit i {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--card-line);
  border-radius: 50%;
  font: normal 16px/1 Arial, sans-serif;
  transition: background .2s, color .2s, transform .3s;
}
.service-card:hover .brand-visit i {
  background: var(--card-ink);
  color: var(--card-bg);
  transform: rotate(45deg);
}
.brand-art {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transition: transform .7s cubic-bezier(.2,.65,.25,1);
}
.service-card:hover .brand-art { transform: rotate(9deg) scale(1.07); }
.brand-collection .brand-ievc {
  --card-bg: #d3baf7;
  background: linear-gradient(120deg, #e1cefa, #b18bde);
}
.brand-ievc .brand-art {
  width: 250px;
  height: 250px;
  right: 3%;
  top: -5px;
  border: 1px solid #fff9;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 27%, #f8efff, #c697e866 38%, #7546b488 65%, #5b3099b3);
  box-shadow: inset -18px -14px 35px #7048ae66, 0 0 35px #f5e7ff44;
}
.brand-ievc .brand-art::before,
.brand-ievc .brand-art::after {
  content: "";
  position: absolute;
  inset: 36px -30px;
  border: 1px solid #ffffffc0;
  border-radius: 50%;
  transform: rotate(-35deg);
}
.brand-ievc .brand-art::after { inset: -22px 48px; transform: rotate(40deg); }
.brand-collection .brand-took {
  --card-ink: #522719;
  --card-line: #52271933;
  --card-bg: #ffaf70;
  background: #ffaf70;
}
.brand-took .service-name { font-size: 64px; letter-spacing: -5px; text-transform: lowercase; }
.brand-took .brand-art { width: 160px; height: 160px; right: -36px; top: 30px; background: #ffe1a180; border-radius: 48% 52% 20% 80%; transform: rotate(-25deg); }
.brand-collection .brand-act {
  --card-ink: #f9f5eb;
  --card-line: #ffffff35;
  --card-bg: #222430;
  background: #222430;
}
.brand-act .service-name { font-size: 44px; letter-spacing: -2px; max-width: 180px; }
.brand-act .brand-art { width: 100px; height: 290px; right: 15px; top: -20px; background: #ffffff07; transform: rotate(32deg); box-shadow: 28px 0 0 #ffffff04, -28px 0 0 #ffffff04; }
.brand-collection .brand-maori {
  --card-ink: #2a5441;
  --card-line: #2a54412e;
  --card-bg: #e6eade;
  background: #e6eade;
}
.brand-maori .service-name { font-family: Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -2px; font-size: 42px; }
.brand-maori .brand-art { width: 95px; height: 150px; right: -6px; top: 32px; border-radius: 100% 0; background: #a4b99c66; transform: rotate(-20deg); box-shadow: -27px -7px 0 #bac9af55; }
.brand-collection .brand-sfo {
  --card-ink: #d6f07a;
  --card-line: #d6f07a40;
  --card-bg: #224648;
  background: #224648;
}
.brand-sfo .service-name { font-style: italic; font-size: 66px; letter-spacing: -4px; }
.brand-sfo .brand-art { width: 230px; height: 120px; border: 1px solid #d6f07a40; border-radius: 50%; top: 55px; left: 30px; transform: rotate(-35deg); box-shadow: 0 12px 0 #d6f07a0a, 0 -12px 0 #d6f07a0a, 0 24px 0 #d6f07a08; }
.brand-collection .brand-aotea {
  --card-ink: #245678;
  --card-line: #24567835;
  --card-bg: #c5dfed;
  background: linear-gradient(120deg,#d8eaf2,#b6d9ed);
}
.brand-aotea .service-name { font-weight: 450; letter-spacing: 1px !important; }
.brand-aotea .brand-art { width: 330px; height: 330px; border: 1px solid #fff9; border-radius: 50%; right: -45px; top: 25px; box-shadow: 0 -18px 0 #ffffff25, 0 -36px 0 #ffffff20, 0 -54px 0 #ffffff1a, 0 -72px 0 #ffffff17, 0 -90px 0 #ffffff10; }
.brand-collection .brand-vlook {
  --card-ink: #443466;
  --card-line: #44346630;
  --card-bg: #ddd7f5;
  background: #ddd7f5;
}
.brand-vlook .service-name { font-size: 35px; letter-spacing: -2px; }
.brand-vlook .brand-art { right: -20px; top: 36px; width: 155px; height: 155px; border: 24px solid #ad9cd855; border-radius: 50%; box-shadow: 0 0 0 13px #c5b8e544; }
.brand-collection .brand-makeyou {
  --card-ink: #762e49;
  --card-line: #762e492e;
  --card-bg: #f2c7d3;
  background: #f2c7d3;
}
.brand-makeyou .service-name { font-size: 40px; max-width: 155px; line-height: .94; letter-spacing: -2px; }
.brand-makeyou .brand-art { width: 115px; height: 115px; background: #e999b150; border-radius: 50%; right: -20px; top: 50px; box-shadow: -38px 38px 0 #e999b133; }
.brand-collection .brand-maketeam {
  --card-ink: #e1e7b5;
  --card-line: #e1e7b538;
  --card-bg: #292d29;
  background: #292d29;
}
.brand-collection .brand-maketeam .service-name { font-size: 59px; letter-spacing: -3px; max-width: 350px; }
.brand-maketeam .brand-art { width: 150px; height: 150px; border: 1px solid #d5e49c4a; border-radius: 50%; right: 0; top: 45px; box-shadow: -48px 0 0 #d5e49c0d, -96px 0 0 #d5e49c0a; }
.brand-collection .brands-footer { display:flex; justify-content:space-between; gap:20px; margin-top:24px; font:9px/1.6 Arial,sans-serif; letter-spacing:1.2px; }
.brands-footer .collection-signature { color:#645376; }
@media(min-width:761px) and (max-width:1050px) {
  .brand-collection .service-card { padding-inline:18px; height:230px; }
  .brand-meta span:last-child { font-size:7px; letter-spacing:.5px; }
  .brand-visit b { display:none; }
  .brand-collection .service-name { font-size:36px; }
  .brand-collection .brand-wide .service-name { font-size:62px; }
  .brand-collection .brand-maketeam .service-name { font-size:46px; }
}
@media(max-width:760px) {
  .brand-collection .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .brand-collection .service-card { height:220px; padding:20px 19px 15px; }
  .brand-collection .brand-wide .service-name { font-size:64px; }
  .brand-collection .service-name { font-size:42px; }
  .brand-collection .brand-took .service-name { font-size:60px; }
  .brand-collection .brand-act .service-name { max-width:150px; }
  .brand-collection .brand-maketeam .service-name { font-size:52px; }
  .brand-visit b { display:none; }
  .brand-meta span:last-child { font-size:7px; letter-spacing:.5px; }
  .brand-ievc .brand-art { width:210px; height:210px; right:-3%; top:0; }
  .brand-collection .brands-footer { font-size:8px; letter-spacing:.5px; }
}
@media(max-width:440px) {
  .brand-collection .service-card { height:196px; padding:17px 15px 13px; border-radius:9px; }
  .brand-collection .brand-wide { height:216px; }
  .brand-meta span:last-child { display:none; }
  .brand-wide .brand-meta span:last-child { display:inline; }
  .brand-collection .service-name { font-size:30px; letter-spacing:-1.8px; }
  .brand-collection .brand-took .service-name { font-size:50px; letter-spacing:-3.5px; }
  .brand-collection .brand-sfo .service-name { font-size:50px; }
  .brand-collection .brand-makeyou .service-name { max-width:110px; font-size:31px; }
  .brand-collection .brand-vlook .service-name { font-size:26px; }
  .brand-collection .brand-wide .service-name { font-size:58px; }
  .brand-collection .brand-maketeam .service-name { font-size:43px; }
  .brand-collection .service-link { font-size:10px; padding-top:10px; }
  .brand-visit i { width:22px; height:22px; font-size:14px; }
  .brand-collection .brands-footer { flex-direction:column; gap:5px; align-items:flex-start; }
}
@media(max-width:360px) {
  .brand-collection .brand-took .service-name,
  .brand-collection .brand-sfo .service-name { font-size:40px; letter-spacing:-2.5px; }
  .brand-collection .collection-caption { font-size:8px; letter-spacing:.8px; gap:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .brand-collection .service-card:hover,.brand-collection .service-card:focus-visible,.service-card:hover .brand-art { transform:none; }
}