#work [data-ai-id="portfolio-project-list-footer"] > a {
  border-radius: 0;
  border-color: var(--wm-navy);
  background: transparent;
  color: var(--wm-navy);
}

#work [data-ai-id="portfolio-project-list-footer"] > a:hover,
#work [data-ai-id="portfolio-project-list-footer"] > a:focus-visible {
  background: var(--wm-yellow);
  color: var(--wm-navy);
}

.wm-portfolio-page {
  --portfolio-ink: #11110f;
  --portfolio-muted: #77766f;
  --portfolio-line: #d9d8d1;
  --portfolio-paper: #fdfdfb;
  color: var(--portfolio-ink);
  background: var(--portfolio-paper);
}

.wm-portfolio-shell {
  width: var(--content-width);
  margin-inline: auto;
}

.wm-portfolio-intro {
  display: flex;
  min-height: min(880px, 86svh);
  align-items: flex-end;
  padding: clamp(9rem, 15vw, 14rem) 0 clamp(4rem, 7vw, 7rem);
  border-bottom: 1px solid var(--portfolio-line);
}

.wm-portfolio-intro__eyebrow {
  margin: 0 0 clamp(2rem, 4vw, 4rem);
  font: 700 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wm-portfolio-intro h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(4.5rem, 11vw, 10.5rem);
  font-weight: 760;
  line-height: .79;
  letter-spacing: -.085em;
}

.wm-portfolio-intro h1 em {
  color: #6a47ff;
  font-style: normal;
}

.wm-portfolio-intro__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3rem;
  margin-top: clamp(3rem, 6vw, 6rem);
  padding-top: 1.15rem;
  border-top: 1px solid var(--portfolio-ink);
}

.wm-portfolio-intro__footer p {
  margin: 0;
}

.wm-portfolio-intro__footer p:first-child {
  max-width: 35rem;
  color: #4d4c47;
  font-size: clamp(.94rem, 1.25vw, 1.08rem);
  line-height: 1.7;
  word-break: keep-all;
}

.wm-portfolio-intro__footer p:last-child {
  font: 700 .65rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wm-portfolio-work {
  padding: clamp(6rem, 11vw, 11rem) 0 clamp(9rem, 15vw, 15rem);
}

.wm-portfolio-work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(5rem, 10vw, 10rem);
}

.wm-portfolio-work__head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.055em;
}

.wm-portfolio-work__head p {
  max-width: 25rem;
  margin: 0;
  color: var(--portfolio-muted);
  font-size: .86rem;
  line-height: 1.65;
  text-align: right;
  word-break: keep-all;
}

.wm-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: clamp(1rem, 2.3vw, 2.8rem);
  row-gap: clamp(6rem, 12vw, 13rem);
  align-items: start;
}

.wm-portfolio-card {
  --portfolio-span: 5;
  grid-column: var(--portfolio-start) / span var(--portfolio-span);
  min-width: 0;
}

.wm-portfolio-card--small { --portfolio-span: 5; }
.wm-portfolio-card--medium { --portfolio-span: 6; }
.wm-portfolio-card--large { --portfolio-span: 9; }
.wm-portfolio-card--offset-low { margin-top: clamp(2rem, 5vw, 5.5rem); }
.wm-portfolio-card--offset-high { margin-top: clamp(5rem, 10vw, 10rem); }

.wm-portfolio-card > a {
  display: block;
  outline: 0;
}

.wm-portfolio-card > a:focus-visible {
  outline: 2px solid var(--portfolio-ink);
  outline-offset: 8px;
}

.wm-portfolio-card__media {
  --card-accent: #6f51ff;
  --card-soft: #dcd5ff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--card-accent);
  transform: translateZ(0);
}

.wm-portfolio-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wm-portfolio-card__media--square { aspect-ratio: 1; }
.wm-portfolio-card__media--image {
  background: transparent;
}

.wm-portfolio-card__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: filter .35s ease, transform .35s ease;
}

.wm-portfolio-card__media--image .wm-portfolio-card__image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.45rem, 1.1vw, 1rem);
  padding: clamp(.9rem, 2.5vw, 2.5rem);
  background: rgb(0 0 0 / 64%);
  color: #fff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.wm-portfolio-card__media--image .wm-portfolio-card__image-overlay h3 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1.2rem, 2.5vw, 2.4rem);
  line-height: 1.25;
  word-break: keep-all;
}

.wm-portfolio-card__image-overlay p {
  margin: 0;
  max-width: 100%;
  color: #ddd;
  font-size: clamp(.72rem, 1.05vw, 1rem);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wm-portfolio-card__image-overlay .wm-portfolio-card__industry {
  color: #c4c4c4;
  font-weight: 650;
  font-size: clamp(.8rem, 1.3vw, 1.2rem);
}

.wm-portfolio-card__image-overlay p > span {
  margin-right: .5em;
  color: #aaa;
  font-weight: 500;
}

.wm-portfolio-card__shortcut {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(2.25rem, 3.5vw, 3rem);
  height: clamp(2.25rem, 3.5vw, 3rem);
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 0;
  background: #fff;
  color: #181818;
}

.wm-portfolio-card__shortcut svg {
  width: 55%;
  height: 55%;
}

[data-ai-id="home-main"] .wm-portfolio-card__meta {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 600px) {
  [data-ai-id="home-main"] .wm-portfolio-card__media--landscape .wm-portfolio-card__image-overlay {
    gap: .25rem;
    padding: .6rem;
  }
}

.wm-portfolio-card:is(:hover, :focus-within) .wm-portfolio-card__image {
  filter: blur(7px);
  transform: scale(1.06);
}

.wm-portfolio-card:is(:hover, :focus-within) .wm-portfolio-card__image-overlay {
  opacity: 1;
}

.wm-portfolio-card__media--portrait { aspect-ratio: 4 / 5; }
.wm-portfolio-card__media--landscape { aspect-ratio: 16 / 9; }
.wm-portfolio-card__media--violet { --card-accent: #6f54f8; --card-soft: #d8d0ff; }
.wm-portfolio-card__media--mint { --card-accent: #71d5b6; --card-soft: #d6f7ed; }
.wm-portfolio-card__media--blue { --card-accent: #3779ee; --card-soft: #cee0ff; }
.wm-portfolio-card__media--yellow { --card-accent: var(--wm-yellow); --card-soft: var(--wm-yellow-soft); }
.wm-portfolio-card__media--coral { --card-accent: #f27b63; --card-soft: #ffdbd3; }
.wm-portfolio-card__media--navy { --card-accent: var(--wm-navy); --card-soft: #adb9d5; }
.wm-portfolio-card__media--pink { --card-accent: #ed75a5; --card-soft: #ffd5e5; }
.wm-portfolio-card__media--green { --card-accent: #146c5d; --card-soft: #a6e2d5; }
.wm-portfolio-card__media--lavender { --card-accent: #9c92e6; --card-soft: #e0ddff; }
.wm-portfolio-card__media--orange { --card-accent: #f1993a; --card-soft: #ffe0b8; }

.wm-portfolio-card__cover,
.wm-portfolio-demo {
  position: absolute;
  inset: 0;
}

.wm-portfolio-card__cover {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, 2.2vw, 2rem);
  color: #fff;
  transition: opacity .38s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}

.wm-portfolio-card__media--yellow .wm-portfolio-card__cover,
.wm-portfolio-card__media--mint .wm-portfolio-card__cover,
.wm-portfolio-card__media--lavender .wm-portfolio-card__cover,
.wm-portfolio-card__media--orange .wm-portfolio-card__cover {
  color: #151515;
}

.wm-portfolio-card__cover::before,
.wm-portfolio-card__cover::after {
  position: absolute;
  z-index: -1;
  content: "";
}

.wm-portfolio-card__cover::before {
  right: -12%;
  bottom: -18%;
  width: 72%;
  aspect-ratio: 1;
  border: clamp(2rem, 5vw, 5.5rem) solid var(--card-soft);
  border-radius: 50%;
  opacity: .76;
  transform: rotate(-18deg);
}

.wm-portfolio-card__cover::after {
  top: 24%;
  left: 20%;
  width: 42%;
  aspect-ratio: 1.25;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .38;
  box-shadow: 3vw 4vw 0 -1px var(--card-soft);
  transform: rotate(23deg);
}

.wm-portfolio-card__cover > span,
.wm-portfolio-card__cover > small {
  font: 700 clamp(.58rem, .8vw, .72rem)/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wm-portfolio-card__cover > strong {
  align-self: center;
  margin-block: auto;
  font-size: clamp(2.2rem, 5vw, 6.2rem);
  font-weight: 780;
  line-height: .9;
  letter-spacing: -.075em;
}

.wm-portfolio-card__cover > small {
  align-self: flex-end;
}

.wm-portfolio-demo {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  background: color-mix(in srgb, var(--card-soft) 74%, white);
  transition: opacity .38s ease;
}

.wm-portfolio-card__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5rem;
  padding-top: 1rem;
}

.wm-portfolio-card__meta h3 {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.wm-portfolio-card__meta p {
  margin: .35rem 0 0;
  color: var(--portfolio-muted);
  font-size: clamp(.72rem, .86vw, .84rem);
  line-height: 1.55;
  word-break: keep-all;
}

.wm-portfolio-card__arrow {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid var(--portfolio-line);
  border-radius: 50%;
  font-size: 1rem;
  opacity: 0;
  transform: translate(-.45rem, .45rem);
  transition: opacity .25s ease, transform .35s ease, color .25s ease, background .25s ease;
}

.wm-portfolio-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-height: 2rem;
  padding: .8rem 0 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .25s ease, transform .35s ease;
}

.wm-portfolio-card__tags li {
  padding: .3rem .56rem;
  border: 1px solid var(--portfolio-line);
  border-radius: 999px;
  color: #65645e;
  font-size: .6rem;
  font-weight: 650;
  line-height: 1;
}

.wm-portfolio-card > a:hover .wm-portfolio-card__cover,
.wm-portfolio-card > a:focus-visible .wm-portfolio-card__cover {
  opacity: 0;
  transform: scale(1.035);
}

.wm-portfolio-card > a:hover .wm-portfolio-demo,
.wm-portfolio-card > a:focus-visible .wm-portfolio-demo,
.wm-portfolio-card > a:hover .wm-portfolio-card__arrow,
.wm-portfolio-card > a:focus-visible .wm-portfolio-card__arrow,
.wm-portfolio-card > a:hover .wm-portfolio-card__tags,
.wm-portfolio-card > a:focus-visible .wm-portfolio-card__tags {
  opacity: 1;
}

.wm-portfolio-card > a:hover .wm-portfolio-card__arrow,
.wm-portfolio-card > a:focus-visible .wm-portfolio-card__arrow,
.wm-portfolio-card > a:hover .wm-portfolio-card__tags,
.wm-portfolio-card > a:focus-visible .wm-portfolio-card__tags {
  transform: translate(0);
}

.wm-portfolio-card > a:hover .wm-portfolio-card__arrow,
.wm-portfolio-card > a:focus-visible .wm-portfolio-card__arrow {
  color: #fff;
  background: var(--portfolio-ink);
}

/* Scrolling website preview */
.wm-portfolio-demo--scroll {
  padding: clamp(1rem, 3vw, 3.5rem);
}

.wm-demo-browser {
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 15, .15);
  border-radius: clamp(.45rem, 1.2vw, 1rem);
  background: #fff;
  box-shadow: 0 1.5rem 4rem rgba(24, 26, 43, .16);
  transform: translateY(6%) scale(.93);
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
}

.wm-demo-browser__bar {
  position: relative;
  z-index: 2;
  display: flex;
  height: clamp(1.65rem, 3vw, 2.5rem);
  align-items: center;
  gap: .3rem;
  padding: 0 .7rem;
  border-bottom: 1px solid #e8e8e5;
  background: #f7f7f5;
}

.wm-demo-browser__bar i {
  width: clamp(.24rem, .5vw, .42rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #cfcec8;
}

.wm-demo-browser__bar span {
  position: absolute;
  left: 50%;
  color: #8f8e88;
  font: 600 clamp(.35rem, .65vw, .54rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  transform: translateX(-50%);
}

.wm-demo-browser__page {
  min-height: 205%;
  color: #161616;
  background: #fff;
  transition: transform 3.6s cubic-bezier(.22, .68, .28, 1);
}

.wm-demo-site-nav {
  display: flex;
  height: clamp(2.4rem, 4.5vw, 4rem);
  align-items: center;
  gap: 5%;
  padding: 0 5%;
  border-bottom: 1px solid #eeeeeb;
}

.wm-demo-site-nav b {
  margin-right: auto;
  font-size: clamp(.5rem, 1.1vw, 1rem);
  letter-spacing: -.04em;
}

.wm-demo-site-nav span {
  width: 8%;
  height: 3px;
  border-radius: 99px;
  background: #d2d2ce;
}

.wm-demo-site-hero {
  position: relative;
  min-height: clamp(11rem, 28vw, 27rem);
  padding: 9% 7%;
  overflow: hidden;
  background: #111217;
  color: #fff;
}

.wm-demo-site-hero small {
  font-size: clamp(.38rem, .75vw, .7rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wm-demo-site-hero strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 7%;
  font-size: clamp(1.35rem, 4vw, 4.4rem);
  line-height: .87;
  letter-spacing: -.07em;
}

.wm-demo-site-hero i {
  position: absolute;
  right: 7%;
  bottom: 9%;
  width: 35%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--card-soft), var(--card-accent));
  filter: blur(1px);
}

.wm-demo-site-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4%;
  padding: 7%;
}

.wm-demo-site-stats i {
  height: clamp(3rem, 9vw, 9rem);
  border-radius: .25rem;
  background: color-mix(in srgb, var(--card-soft) 55%, #f7f7f2);
}

.wm-demo-site-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5%;
  padding: 3% 7% 8%;
}

.wm-demo-site-split i {
  aspect-ratio: 1.2;
  background: var(--card-accent);
}

.wm-demo-site-split span {
  background: repeating-linear-gradient(to bottom, #d7d7d3 0 3px, transparent 3px 17%);
}

.wm-demo-site-banner {
  min-height: clamp(5rem, 14vw, 12rem);
  margin: 0 7% 7%;
  background: #161616;
}

.wm-portfolio-card > a:hover .wm-demo-browser,
.wm-portfolio-card > a:focus-visible .wm-demo-browser {
  transform: translateY(0) scale(1);
}

.wm-portfolio-card > a:hover .wm-demo-browser__page,
.wm-portfolio-card > a:focus-visible .wm-demo-browser__page {
  transform: translateY(-46%);
}

/* App screen stack */
.wm-portfolio-demo--screens {
  background: linear-gradient(145deg, var(--card-soft), #f8f8f4);
}

.wm-demo-phone {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 39%;
  height: 72%;
  padding: 7% 3% 4%;
  overflow: hidden;
  border: clamp(3px, .45vw, 7px) solid #161616;
  border-radius: clamp(1rem, 3vw, 2.8rem);
  background: #f9f9f7;
  box-shadow: 0 1.8rem 3rem rgba(22, 22, 22, .22);
  transition: transform .75s cubic-bezier(.2, .85, .2, 1);
}

.wm-demo-phone::before {
  position: absolute;
  top: 2.2%;
  left: 50%;
  width: 30%;
  height: 2.5%;
  border-radius: 999px;
  background: #161616;
  content: "";
  transform: translateX(-50%);
}

.wm-demo-phone i {
  display: block;
  width: 34%;
  aspect-ratio: 1;
  margin: 5% 0 10%;
  border-radius: 50%;
  background: var(--card-accent);
}

.wm-demo-phone b {
  display: block;
  width: 68%;
  height: 4%;
  margin-bottom: 10%;
  border-radius: 99px;
  background: #202020;
}

.wm-demo-phone span {
  display: block;
  height: 17%;
  margin-top: 6%;
  border-radius: clamp(.2rem, .7vw, .7rem);
  background: color-mix(in srgb, var(--card-soft) 72%, white);
}

.wm-demo-phone--one { transform: translateX(-68%) rotate(-5deg) scale(.9); }
.wm-demo-phone--two { z-index: 2; transform: translateX(-50%); }
.wm-demo-phone--three { transform: translateX(-32%) rotate(5deg) scale(.9); }
.wm-demo-phone--two i { border-radius: 25%; }
.wm-demo-phone--three i { width: 70%; aspect-ratio: 2; border-radius: 999px; }

.wm-portfolio-card > a:hover .wm-demo-phone--one,
.wm-portfolio-card > a:focus-visible .wm-demo-phone--one { transform: translateX(-112%) rotate(-12deg) scale(.93); }
.wm-portfolio-card > a:hover .wm-demo-phone--two,
.wm-portfolio-card > a:focus-visible .wm-demo-phone--two { transform: translateX(-50%) translateY(-3%); }
.wm-portfolio-card > a:hover .wm-demo-phone--three,
.wm-portfolio-card > a:focus-visible .wm-demo-phone--three { transform: translateX(12%) rotate(12deg) scale(.93); }

/* Before and after split */
.wm-portfolio-demo--compare {
  background: #e8e5dd;
}

.wm-demo-compare {
  position: absolute;
  inset: 0;
  padding: 9%;
  overflow: hidden;
}

.wm-demo-compare small {
  font: 700 clamp(.42rem, .8vw, .7rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wm-demo-compare i,
.wm-demo-compare b,
.wm-demo-compare span {
  display: block;
}

.wm-demo-compare i {
  width: 36%;
  aspect-ratio: 1;
  margin: 19% auto 12%;
  border-radius: 50%;
}

.wm-demo-compare b {
  width: 64%;
  height: 6%;
  margin: 0 auto 6%;
  border-radius: 99px;
}

.wm-demo-compare span {
  width: 45%;
  height: 3px;
  margin: 4% auto;
}

.wm-demo-compare--before {
  color: #8b8880;
  background: #dedbd3;
}

.wm-demo-compare--before i,
.wm-demo-compare--before b,
.wm-demo-compare--before span { background: #aaa79e; }

.wm-demo-compare--after {
  color: #fff;
  background: var(--card-accent);
  clip-path: inset(0 50% 0 0);
  transition: clip-path .9s cubic-bezier(.2, .8, .2, 1);
}

.wm-demo-compare--after i { border-radius: 18%; background: var(--card-soft); transform: rotate(8deg); }
.wm-demo-compare--after b,
.wm-demo-compare--after span { background: #fff; }

.wm-demo-compare__handle {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #fff;
  transition: left .9s cubic-bezier(.2, .8, .2, 1);
}

.wm-demo-compare__handle i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.3rem;
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--portfolio-ink);
  transform: translate(-50%, -50%);
}

.wm-demo-compare__handle i::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  content: "↔";
  font-size: .72rem;
}

.wm-portfolio-card > a:hover .wm-demo-compare--after,
.wm-portfolio-card > a:focus-visible .wm-demo-compare--after { clip-path: inset(0 12% 0 0); }
.wm-portfolio-card > a:hover .wm-demo-compare__handle,
.wm-portfolio-card > a:focus-visible .wm-demo-compare__handle { left: 88%; }

/* Dashboard focus */
.wm-portfolio-demo--dashboard {
  display: grid;
  place-items: center;
  padding: 7%;
  background: #e8e9ee;
}

.wm-demo-dashboard {
  display: grid;
  width: 92%;
  height: 82%;
  grid-template-columns: 18% 1fr;
  overflow: hidden;
  border-radius: clamp(.35rem, .8vw, .8rem);
  background: #f8f8f8;
  box-shadow: 0 1.3rem 3.4rem rgba(19, 23, 42, .18);
  transform: rotate(-2deg) scale(.92);
  transform-origin: 62% 35%;
  transition: transform .8s cubic-bezier(.2, .85, .2, 1);
}

.wm-demo-dashboard aside {
  padding: 22% 18%;
  background: #181925;
}

.wm-demo-dashboard aside b,
.wm-demo-dashboard aside i {
  display: block;
  border-radius: 999px;
  background: #555765;
}

.wm-demo-dashboard aside b { width: 58%; aspect-ratio: 1; margin-bottom: 55%; background: var(--card-accent); }
.wm-demo-dashboard aside i { width: 78%; height: 3px; margin: 33% 0; }
.wm-demo-dashboard > div { padding: 7%; }
.wm-demo-dashboard__top { display: block; width: 35%; height: 4%; margin-bottom: 8%; border-radius: 999px; background: #242531; }
.wm-demo-dashboard section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.wm-demo-dashboard section i { aspect-ratio: 1.8; border-radius: .2rem; background: color-mix(in srgb, var(--card-soft) 75%, white); }
.wm-demo-dashboard strong { display: block; height: 34%; margin: 5% 0; border-radius: .2rem; background: linear-gradient(160deg, transparent 50%, var(--card-accent) 51% 54%, transparent 55%), #ececf0; }
.wm-demo-dashboard footer { display: flex; height: 18%; align-items: flex-end; justify-content: space-around; gap: 4%; padding: 4% 6%; background: #f0f0f3; }
.wm-demo-dashboard footer i { flex: 1; background: var(--card-accent); }
.wm-demo-dashboard footer i:nth-child(1) { height: 32%; }
.wm-demo-dashboard footer i:nth-child(2) { height: 67%; }
.wm-demo-dashboard footer i:nth-child(3) { height: 45%; }
.wm-demo-dashboard footer i:nth-child(4) { height: 84%; }
.wm-demo-dashboard footer i:nth-child(5) { height: 58%; }

.wm-portfolio-card > a:hover .wm-demo-dashboard,
.wm-portfolio-card > a:focus-visible .wm-demo-dashboard { transform: rotate(0) scale(1.12); }

/* Gallery fan */
.wm-portfolio-demo--gallery {
  background: color-mix(in srgb, var(--card-accent) 82%, #101916);
}

.wm-demo-gallery__sheet {
  position: absolute;
  top: 17%;
  left: 50%;
  width: 48%;
  height: 64%;
  padding: 8%;
  background: #f6f4ef;
  box-shadow: 0 1.4rem 2.8rem rgba(0, 0, 0, .24);
  transform-origin: 50% 115%;
  transition: transform .8s cubic-bezier(.2, .85, .2, 1);
}

.wm-demo-gallery__sheet::before,
.wm-demo-gallery__sheet::after {
  display: block;
  content: "";
}

.wm-demo-gallery__sheet::before {
  height: 66%;
  background: var(--card-accent);
}

.wm-demo-gallery__sheet::after {
  width: 58%;
  height: 4%;
  margin-top: 10%;
  border-radius: 99px;
  background: #b7b4ad;
}

.wm-demo-gallery__sheet span {
  position: absolute;
  right: 7%;
  bottom: 5%;
  font: 700 clamp(.42rem, .8vw, .7rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wm-demo-gallery__sheet--one { transform: translateX(-54%) rotate(-4deg); }
.wm-demo-gallery__sheet--two { transform: translateX(-48%) rotate(2deg); }
.wm-demo-gallery__sheet--three { transform: translateX(-45%) rotate(7deg); }
.wm-demo-gallery__sheet--two::before { background: var(--card-soft); }
.wm-demo-gallery__sheet--three::before { background: #222; }

.wm-portfolio-card > a:hover .wm-demo-gallery__sheet--one,
.wm-portfolio-card > a:focus-visible .wm-demo-gallery__sheet--one { transform: translateX(-105%) rotate(-16deg); }
.wm-portfolio-card > a:hover .wm-demo-gallery__sheet--two,
.wm-portfolio-card > a:focus-visible .wm-demo-gallery__sheet--two { transform: translateX(-50%) translateY(-5%) rotate(0); }
.wm-portfolio-card > a:hover .wm-demo-gallery__sheet--three,
.wm-portfolio-card > a:focus-visible .wm-demo-gallery__sheet--three { transform: translateX(7%) rotate(16deg); }

/* Interface detail zoom */
.wm-portfolio-demo--detail {
  display: grid;
  place-items: center;
  padding: 9%;
  background: color-mix(in srgb, var(--card-soft) 68%, white);
}

.wm-demo-detail__frame {
  position: relative;
  width: 88%;
  height: 76%;
  padding: 9%;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 15, .14);
  border-radius: clamp(.4rem, 1vw, .9rem);
  background: #fff;
  box-shadow: 0 1.4rem 3rem rgba(20, 20, 30, .15);
  transform: scale(.92) rotate(2deg);
  transform-origin: 72% 64%;
  transition: transform .9s cubic-bezier(.2, .85, .2, 1);
}

.wm-demo-detail__frame > span {
  display: block;
  width: 22%;
  height: 3px;
  background: var(--card-accent);
}

.wm-demo-detail__frame strong {
  display: block;
  margin: 16% 0 10%;
  font-size: clamp(1rem, 3.3vw, 3.8rem);
  line-height: .88;
  letter-spacing: -.07em;
}

.wm-demo-detail__frame i {
  display: block;
  width: 42%;
  height: 4px;
  margin-top: 4%;
  border-radius: 99px;
  background: #dbdad5;
}

.wm-demo-detail__frame i:last-child {
  position: absolute;
  right: -8%;
  bottom: -15%;
  width: 58%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--card-accent);
}

.wm-demo-detail__cursor {
  position: absolute;
  z-index: 2;
  top: 31%;
  left: 31%;
  width: 0;
  height: 0;
  border-top: 1.3rem solid #171717;
  border-right: .75rem solid transparent;
  filter: drop-shadow(1px 2px 0 #fff);
  transform: rotate(-18deg);
  transition: top .8s cubic-bezier(.2, .85, .2, 1), left .8s cubic-bezier(.2, .85, .2, 1);
}

.wm-portfolio-card > a:hover .wm-demo-detail__frame,
.wm-portfolio-card > a:focus-visible .wm-demo-detail__frame { transform: scale(1.14) rotate(0); }
.wm-portfolio-card > a:hover .wm-demo-detail__cursor,
.wm-portfolio-card > a:focus-visible .wm-demo-detail__cursor { top: 67%; left: 71%; }

.wm-portfolio-contact {
  min-height: min(760px, 80svh);
  padding: clamp(6rem, 12vw, 12rem) 0;
  color: #fff;
  background: #11110f;
}

.wm-portfolio-contact__inner {
  display: flex;
  min-height: min(440px, 52svh);
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.wm-portfolio-contact p {
  margin: 0;
  color: #aaa9a2;
  font: 700 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wm-portfolio-contact h2 {
  margin: clamp(3rem, 6vw, 6rem) 0;
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 730;
  line-height: .83;
  letter-spacing: -.08em;
}

.wm-portfolio-contact a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid #fff;
  font-weight: 720;
}

.wm-portfolio-contact a span {
  transition: transform .25s ease;
}

.wm-portfolio-contact a:hover span,
.wm-portfolio-contact a:focus-visible span {
  transform: translate(.3rem, -.3rem);
}

@media (max-width: 900px) {
  .wm-portfolio-card--small { --portfolio-span: 6; }
  .wm-portfolio-card--medium { --portfolio-span: 7; }
  .wm-portfolio-card--large { --portfolio-span: 10; }
}

@media (max-width: 720px) {
  .wm-portfolio-intro {
    min-height: 88svh;
    padding: 8.5rem 0 3rem;
  }

  .wm-portfolio-intro h1 {
    font-size: clamp(4.15rem, 22vw, 7rem);
  }

  .wm-portfolio-intro__footer {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .wm-portfolio-intro__footer p:last-child {
    display: none;
  }

  .wm-portfolio-work {
    padding: 5.5rem 0 8rem;
  }

  .wm-portfolio-work__head {
    display: block;
    margin-bottom: 5.5rem;
  }

  .wm-portfolio-work__head p {
    max-width: 21rem;
    margin-top: 1rem;
    text-align: left;
  }

  .wm-portfolio-grid {
    display: block;
  }

  .wm-portfolio-card {
    width: 100%;
    margin-top: 0;
    margin-bottom: 6.5rem;
  }

  .wm-portfolio-card--small { width: 84%; }
  .wm-portfolio-card--medium { width: 93%; }
  .wm-portfolio-card:nth-child(even) { margin-left: auto; }

  /* Home: every card fills the shell instead of the staggered 84% / 93% layout. */
  .home .wm-portfolio-work .wm-portfolio-card,
  .home .wm-portfolio-work .wm-portfolio-card--small,
  .home .wm-portfolio-work .wm-portfolio-card--medium {
    width: 100%;
    margin-left: 0;
  }

  .wm-portfolio-card__arrow,
  .wm-portfolio-card__tags {
    opacity: 1;
    transform: none;
  }

  .wm-portfolio-card__cover > strong {
    font-size: clamp(2.2rem, 12vw, 4.7rem);
  }

  .wm-portfolio-contact {
    min-height: 78svh;
  }

  .wm-portfolio-contact h2 {
    font-size: clamp(3.8rem, 19vw, 6.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-portfolio-page *,
  .wm-portfolio-page *::before,
  .wm-portfolio-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .wm-portfolio-card > a:hover .wm-demo-browser__page,
  .wm-portfolio-card > a:focus-visible .wm-demo-browser__page {
    transform: none;
  }
}

/* Keep the 1024 x 768 mockup and its screen in one responsive coordinate space. */
[data-ai-id="portfolio-project-04-media"] {
  background: #e5e5e5;
}
[data-ai-id="portfolio-project-05-media"] {
  background: #efefef;
}
.wm-portfolio-mockup {
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  aspect-ratio: 4 / 3;
  transform: translateY(-50%);
  transition: filter .35s ease, transform .35s ease;
}
.wm-portfolio-card:is(:hover, :focus-within) .wm-portfolio-mockup {
  filter: blur(7px);
  transform: translateY(-50%) scale(1.06);
}
.wm-portfolio-mockup__frame {
  display: block;
  width: 100%;
  height: 100%;
}
.wm-portfolio-mockup__screen {
  position: absolute;
  /* Inner display rectangle: x=202, y=282, width=626, height=388. */
  left: 19.7265625%;
  top: 36.71875%;
  width: 61.1328125%;
  height: 50.5208333%;
  overflow: hidden;
  isolation: isolate;
  background: #111;
}

/* Trackpad-like strokes: moderate movement, gentle deceleration, brief pauses. */
.wm-portfolio-scroll {
  position: absolute;
  inset: 0;
}
.wm-portfolio-scroll > img,
.wm-portfolio-card:is(:hover, :focus-within) .wm-portfolio-scroll > img {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  filter: none;
  transition: none;
}
.wm-portfolio-scroll > img {
  animation: 7.44s cubic-bezier(.25, .65, .35, 1) infinite;
  animation-play-state: paused;
}
.wm-portfolio-scroll > img:first-child {
  aspect-ratio: 1440 / 12500;
  animation-name: wm-portfolio-scroll-part-one;
}
[data-ai-id="portfolio-project-05-scroll"] > img:first-child {
  aspect-ratio: 1440 / 6560;
}
.wm-portfolio-scroll.is-visible > img { animation-play-state: running; }
.wm-portfolio-card:is(:hover, :focus-within) .wm-portfolio-scroll > img {
  animation-play-state: paused;
}
/* Four strokes: each moves for 1.5s and holds for .36s, then resets to the top. */
@keyframes wm-portfolio-scroll-part-one {
  0% { transform: translateY(0); }
  20.16129%, 25% { transform: translateY(calc(-.15 * var(--scroll-distance, 0px))); }
  45.16129%, 50% { transform: translateY(calc(-.3 * var(--scroll-distance, 0px))); }
  70.16129%, 75% { transform: translateY(calc(-.45 * var(--scroll-distance, 0px))); }
  95.16129%, 100% { transform: translateY(calc(-.6 * var(--scroll-distance, 0px))); }
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .wm-portfolio-scroll > img { animation: none; transform: none; }
}