.avi-work-page,
.avi-work-preview {
  --work-black: #111111;
  --work-paper: #f4f1eb;
  --work-coral: #f14f44;
  --work-blue: #386bb7;
  color: var(--work-black);
}

.avi-work-shell {
  width: min(1320px, calc(100% - 80px));
  margin-inline: auto;
}

.avi-work-eyebrow {
  margin: 0 0 22px;
  color: var(--work-coral);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.avi-work-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(120px, 11vw, 190px) 0 clamp(82px, 9vw, 145px);
  background:
    radial-gradient(circle at 78% 16%, rgba(241, 79, 68, .2), transparent 23%),
    radial-gradient(circle at 88% 78%, rgba(56, 107, 183, .18), transparent 24%),
    var(--work-black);
  color: #fff;
}

.avi-work-hero::after {
  position: absolute;
  top: -38%;
  right: -8%;
  width: min(62vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 100px rgba(255,255,255,.025), 0 0 0 200px rgba(255,255,255,.018);
  content: "";
}

.avi-work-hero .avi-work-shell {
  position: relative;
  z-index: 1;
}

.avi-work-hero h1,
.avi-work-heading h2,
.avi-work-cta h2,
.avi-work-preview h2 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.055em;
}

.avi-work-hero h1 {
  max-width: 1050px;
  color: #fff;
  font-size: clamp(55px, 8.4vw, 128px);
  line-height: .92;
}

.avi-work-hero h1 span {
  color: var(--work-coral);
}

.avi-work-hero__intro {
  display: grid;
  grid-template-columns: minmax(0, 520px) auto;
  justify-content: space-between;
  align-items: end;
  gap: 50px;
  margin-top: clamp(48px, 6vw, 92px);
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.18);
}

.avi-work-hero__intro p,
.avi-work-heading > p,
.avi-work-preview__heading > p {
  margin: 0;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.65;
}

.avi-work-hero__intro p {
  color: rgba(255,255,255,.72);
}

.avi-work-hero__intro a,
.avi-work-cta a,
.avi-work-preview__link,
.avi-work-card__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  font-weight: 700;
  text-decoration: none;
}

.avi-work-hero__intro a {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.5);
  color: #fff;
}

.avi-work-hero__intro svg,
.avi-work-cta svg,
.avi-work-preview__link svg,
.avi-work-card__link svg {
  width: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.avi-work-hero__intro a:hover svg,
.avi-work-cta a:hover svg,
.avi-work-preview__link:hover svg,
.avi-work-card__link:hover svg {
  transform: translateX(5px);
}

.avi-work-section {
  padding: clamp(88px, 10vw, 160px) 0;
}

.avi-work-section--clients {
  background: var(--work-paper);
}

.avi-work-section--platforms {
  background: #fff;
}

.avi-work-heading,
.avi-work-preview__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .6fr);
  align-items: end;
  gap: 80px;
  margin-bottom: clamp(54px, 6vw, 92px);
}

.avi-work-heading h2,
.avi-work-preview h2 {
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: 1.02;
}

.avi-work-heading > p,
.avi-work-preview__heading > p {
  color: #5e5d5a;
}

.avi-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

.avi-work-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(17,17,17,.09);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(17,17,17,.06);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.avi-work-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 100px rgba(17,17,17,.12);
}

.avi-work-section--clients .avi-work-card:nth-child(3) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
}

.avi-work-section--clients .avi-work-card:nth-child(3) .avi-work-card__visual {
  min-height: 510px;
}

.avi-work-section--clients .avi-work-card:nth-child(3) .avi-work-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.avi-work-card__visual {
  display: grid;
  min-height: 420px;
  padding: clamp(24px, 4vw, 58px);
  place-items: center;
  background: #e9e5dc;
}

.avi-work-card--com2-web .avi-work-card__visual { background: #d9ebd7; }
.avi-work-card--com2-service .avi-work-card__visual { background: #cae2dc; }
.avi-work-card--desivogue .avi-work-card__visual { background: #ead8cf; }
.avi-work-card--daleel .avi-work-card__visual { background: #d6dbea; }
.avi-work-card--inference .avi-work-card__visual { background: #dbd3ec; }
.avi-work-card--investranks .avi-work-card__visual { background: #d2e3e9; }
.avi-work-card--crm .avi-work-card__visual { background: #d7e0f0; }

.avi-work-card__copy {
  padding: clamp(28px, 3.2vw, 48px);
}

.avi-work-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #72716d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.avi-work-status {
  padding: 7px 10px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 100px;
  background: #f6f4ef;
  color: #3b3a37;
  letter-spacing: .08em;
  white-space: nowrap;
}

.avi-work-card h3 {
  margin: 28px 0 14px;
  color: var(--work-black);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.05;
}

.avi-work-card__copy > p {
  margin: 0;
  color: #64635f;
  font-size: 16px;
  line-height: 1.7;
}

.avi-work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.avi-work-tags li {
  margin: 0;
  padding: 7px 11px;
  border-radius: 2px;
  background: #f1efe9;
  color: #4b4a47;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
}

.avi-work-card__link {
  margin-top: 28px;
  color: var(--work-black);
  font-size: 14px;
}

.avi-work-browser {
  width: min(100%, 650px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(17,17,17,.22);
  color: #fff;
  transform: perspective(1000px) rotateX(1deg) rotateY(-2deg);
  transition: transform 300ms ease;
}

.avi-work-card:hover .avi-work-browser {
  transform: perspective(1000px) rotateX(0) rotateY(0) scale(1.015);
}

.avi-work-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 37px;
  padding: 0 14px;
  background: #ecebe8;
}

.avi-work-browser__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4c2bc;
}

.avi-work-browser__bar span {
  overflow: hidden;
  margin-left: 8px;
  color: #77746e;
  font-size: 8px;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.avi-work-browser__body {
  position: relative;
  overflow: hidden;
  min-height: 275px;
  padding: clamp(25px, 4vw, 46px);
  background: #153d29;
}

.avi-work-browser--green .avi-work-browser__body {
  background: radial-gradient(circle at 82% 76%, #4ea652 0, #4ea652 15%, transparent 15.5%), linear-gradient(135deg, #0b2e1f, #225c39);
}

.avi-work-browser--forest .avi-work-browser__body {
  background: linear-gradient(135deg, #092a28, #1d5551);
}

.avi-work-browser--vogue .avi-work-browser__body {
  background: linear-gradient(135deg, #281b1d, #725245);
}

.avi-work-browser--daleel .avi-work-browser__body {
  background: linear-gradient(135deg, #17213a, #39446d);
}

.avi-work-browser--inference .avi-work-browser__body {
  background: radial-gradient(circle at 74% 36%, rgba(196,158,255,.28), transparent 30%), linear-gradient(135deg, #1c1833, #493668);
}

.avi-work-browser--rank .avi-work-browser__body {
  background: linear-gradient(135deg, #10212a, #1e5561);
}

.avi-work-browser--crm .avi-work-browser__body {
  background: radial-gradient(circle at 85% 18%, rgba(92,144,255,.3), transparent 31%), linear-gradient(135deg, #111a34, #294c82);
}

.avi-work-ui-brand,
.avi-work-ui-kicker {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

.avi-work-ui-brand span {
  margin-left: 7px;
  color: #b6e3c0;
}

.avi-work-browser--vogue .avi-work-ui-brand span { color: #e9ad8f; }
.avi-work-browser--daleel .avi-work-ui-brand span { color: #9fb8ff; }
.avi-work-browser--rank .avi-work-ui-brand span { color: #5de4c2; }

.avi-work-ui-kicker {
  color: rgba(255,255,255,.55);
  font-size: 8px;
}

.avi-work-browser__body > strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 34px;
  color: #fff;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 450;
  letter-spacing: -.045em;
  line-height: 1.05;
}

.avi-work-browser__body > strong em {
  color: #7edb83;
  font-style: normal;
}

.avi-work-ui-pills,
.avi-work-ui-ticker {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 28px;
}

.avi-work-ui-pills span,
.avi-work-ui-ticker span {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  color: rgba(255,255,255,.76);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.avi-work-ui-scene,
.avi-work-ui-metric {
  position: absolute;
  right: 25px;
  bottom: 23px;
  display: grid;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
}

.avi-work-ui-scene b,
.avi-work-ui-metric b { font-size: 18px; }
.avi-work-ui-scene small,
.avi-work-ui-metric small { color: rgba(255,255,255,.6); font-size: 7px; text-transform: uppercase; }

.avi-work-ui-steps {
  display: flex;
  gap: 8px;
  margin-top: 30px;
}

.avi-work-ui-steps span {
  flex: 1;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  font-size: 13px;
  font-weight: 700;
}

.avi-work-ui-steps small { color: rgba(255,255,255,.6); font-size: 7px; font-weight: 500; }
.avi-work-ui-button { width: fit-content; margin-top: 16px; padding: 9px 13px; border-radius: 3px; background: #a2e1bd; color: #123b31; font-size: 8px; font-weight: 750; }

.avi-work-ui-products {
  display: flex;
  gap: 8px;
  margin-top: 27px;
}

.avi-work-ui-products span {
  width: 25%;
  height: 54px;
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
}

.avi-work-ui-chart,
.avi-work-ui-bars {
  display: flex;
  align-items: end;
  gap: 7px;
  height: 56px;
  margin-top: 24px;
}

.avi-work-ui-chart i,
.avi-work-ui-bars i {
  flex: 1;
  height: 32%;
  border-radius: 3px 3px 0 0;
  background: #87a9ff;
}

.avi-work-ui-chart i:nth-child(2), .avi-work-ui-bars i:nth-child(2) { height: 58%; }
.avi-work-ui-chart i:nth-child(3), .avi-work-ui-bars i:nth-child(3) { height: 43%; }
.avi-work-ui-chart i:nth-child(4), .avi-work-ui-bars i:nth-child(4) { height: 82%; }
.avi-work-ui-chart i:nth-child(5), .avi-work-ui-bars i:nth-child(5) { height: 68%; }
.avi-work-ui-bars i { background: #5de4c2; }

.avi-work-ui-nodes {
  position: relative;
  height: 66px;
  margin-top: 23px;
  background: linear-gradient(90deg, transparent 8%, rgba(255,255,255,.16) 8%, rgba(255,255,255,.16) 92%, transparent 92%) center/100% 1px no-repeat;
}

.avi-work-ui-nodes span {
  position: absolute;
  top: 25px;
  width: 15px;
  height: 15px;
  border: 3px solid #c9a6ff;
  border-radius: 50%;
  background: #35254e;
}

.avi-work-ui-nodes span:nth-child(1) { left: 7%; }
.avi-work-ui-nodes span:nth-child(2) { left: 28%; top: 9px; }
.avi-work-ui-nodes span:nth-child(3) { left: 49%; }
.avi-work-ui-nodes span:nth-child(4) { left: 70%; top: 40px; }
.avi-work-ui-nodes span:nth-child(5) { left: 90%; }
.avi-work-ui-answer { width: fit-content; padding: 9px 12px; border-radius: 4px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 8px; }
.avi-work-ui-answer b { margin-left: 8px; color: #fff; }

.avi-work-ui-crm {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 25px;
}

.avi-work-ui-crm span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px;
  background: rgba(255,255,255,.07);
}

.avi-work-ui-crm b { color: #fff; font-size: 15px; }
.avi-work-ui-crm small { color: rgba(255,255,255,.58); font-size: 7px; text-transform: uppercase; }

.avi-work-ui-pipeline {
  display: grid;
  grid-template-columns: 1.4fr 1fr .72fr .48fr;
  gap: 6px;
  margin-top: 12px;
}

.avi-work-ui-pipeline i {
  height: 8px;
  border-radius: 99px;
  background: #82aaff;
  opacity: .95;
}

.avi-work-ui-pipeline i:nth-child(2) { opacity: .75; }
.avi-work-ui-pipeline i:nth-child(3) { opacity: .55; }
.avi-work-ui-pipeline i:nth-child(4) { opacity: .35; }

.avi-work-disclaimer {
  margin: 30px 0 0;
  color: #73716d;
  font-size: 12px;
}

.avi-work-cta {
  padding: clamp(80px, 9vw, 135px) 0;
  background: var(--work-blue);
  color: #fff;
}

.avi-work-cta .avi-work-shell {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 60px;
}

.avi-work-cta .avi-work-eyebrow { color: rgba(255,255,255,.62); }
.avi-work-cta h2 { color: #fff; font-size: clamp(48px, 6.8vw, 98px); line-height: .95; }
.avi-work-cta a { flex: 0 0 auto; padding: 17px 23px; border: 1px solid rgba(255,255,255,.35); border-radius: 2px; color: #fff; }

.avi-work-preview {
  padding: clamp(80px, 9vw, 135px) 0;
  background: var(--work-paper);
}

.avi-work-preview h2 span { color: var(--work-blue); }

.avi-work-preview__rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(17,17,17,.2);
  border-bottom: 1px solid rgba(17,17,17,.2);
}

.avi-work-preview__rail > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 205px;
  padding: 30px 25px;
  border-right: 1px solid rgba(17,17,17,.16);
  transition: background 180ms ease, color 180ms ease;
}

.avi-work-preview__rail > div:last-child { border-right: 0; }
.avi-work-preview__rail > div:hover { background: var(--work-black); color: #fff; }
.avi-work-preview__rail small { color: var(--work-coral); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.avi-work-preview__rail strong { margin-top: auto; font-size: clamp(25px, 2.6vw, 39px); font-weight: 450; letter-spacing: -.04em; }
.avi-work-preview__rail span { margin-top: 9px; color: #76736e; font-size: 13px; line-height: 1.45; }
.avi-work-preview__rail > div:hover span { color: rgba(255,255,255,.62); }
.avi-work-preview__link { margin-top: 35px; color: var(--work-black); font-size: 15px; }

@media (max-width: 1024px) {
  .avi-work-shell { width: min(100% - 48px, 1320px); }
  .avi-work-heading,
  .avi-work-preview__heading { grid-template-columns: 1fr; gap: 30px; }
  .avi-work-heading > p,
  .avi-work-preview__heading > p { max-width: 650px; }
  .avi-work-preview__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avi-work-preview__rail > div:nth-child(even) { border-right: 0; }
  .avi-work-preview__rail > div:not(:last-child) { border-bottom: 1px solid rgba(17,17,17,.16); }
}

@media (max-width: 767px) {
  .avi-work-shell { width: min(100% - 36px, 1320px); }
  .avi-work-hero { padding-top: 92px; }
  .avi-work-hero__intro { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .avi-work-grid { grid-template-columns: 1fr; gap: 24px; }
  .avi-work-section--clients .avi-work-card:nth-child(3) { grid-column: auto; display: flex; }
  .avi-work-section--clients .avi-work-card:nth-child(3) .avi-work-card__visual,
  .avi-work-card__visual { min-height: 340px; padding: 23px; }
  .avi-work-card__meta { align-items: flex-start; flex-direction: column; }
  .avi-work-browser__body { min-height: 245px; padding: 27px; }
  .avi-work-browser__body > strong { font-size: 27px; }
  .avi-work-cta .avi-work-shell { align-items: flex-start; flex-direction: column; }
  .avi-work-preview__rail { grid-template-columns: 1fr; }
  .avi-work-preview__rail > div { min-height: 170px; border-right: 0; border-bottom: 1px solid rgba(17,17,17,.16); }
  .avi-work-preview__rail > div:nth-child(3) { border-bottom: 1px solid rgba(17,17,17,.16); }
  .avi-work-preview__rail > div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .avi-work-card,
  .avi-work-browser,
  .avi-work-hero__intro svg,
  .avi-work-cta svg,
  .avi-work-preview__link svg,
  .avi-work-card__link svg { transition: none; }
}