@font-face{font-family:Inter;src:url('/portfolio-cover/cover/inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:dark}body{margin:0;background:#060607;color:#f5f5f5;font:16px/1.55 Inter,"PingFang SC","Microsoft YaHei",sans-serif}
#home{position:relative;width:100%;height:100vh;height:100svh;min-height:400px;background:#090b0e url('/portfolio-cover/cover/particle-poster.png') center/cover no-repeat}
#home iframe{display:block;width:100%;height:100%;border:0}.skip{position:absolute;z-index:3;top:1rem;left:1rem;transform:translateY(-250%);padding:10px 18px;background:#fff;color:#141518;border-radius:24px}.skip:focus{transform:none}
.bio, footer{padding:clamp(54px,8vw,134px) 6.25vw;max-width:1920px;margin:auto}.bio .eyebrow,footer small{font-size:12px;letter-spacing:.16em;color:#aeafb4}.bio h1{font-size:clamp(38px,5.5vw,100px);letter-spacing:-.055em;margin:20px 0 14px;font-weight:560;line-height:1.12}.bio h1 span{font-weight:350;color:#a9aaaf}.bio p{max-width:43em;color:#c0c1c6;font-size:clamp(16px,1.15vw,22px);margin:12px 0}.bio nav{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:28px}.bio a,.legal a{color:#ebebee;text-underline-offset:5px}.legal{border-top:1px solid #28292e;display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap}.legal p{margin:0}.legal h2{font-size:clamp(20px,3vw,46px);font-weight:500;letter-spacing:-.04em;margin:8px 0 12px}.legal nav{display:flex;flex-wrap:wrap;gap:14px 22px;font-size:14px}.legal a:hover,.bio a:hover{color:white}.noscript{position:absolute;bottom:1rem;left:6.25vw;color:white}a:focus-visible{outline:2px solid #639aff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}



.study {
  container-type: inline-size;
  width: 100%;
  margin: 0 auto;
  color: #fff;
  background: #060607;
  font-family: Inter, "PingFang SC", "PingFang SC", sans-serif;
  -webkit-user-select: text;
  user-select: text;
}
.board {
  --u: calc(100cqw / 1920);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: calc(var(--height) * var(--u) + var(--reading-space, 0px));
  scroll-margin: 0;
  background: #060607;
}
.study :is(figure, p, ul, ol, li, dl, dd, h2, h3, h4) {
  margin: 0;
  padding: 0;
}
.study :is(ul, ol) {
  list-style: none;
}
.study img {
  display: block;
  width: 100%;
  height: auto;
}
.pin {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc((var(--y) - var(--cut)) * var(--u));
  width: calc(var(--w) * var(--u));
}
.study .backdrop,
.caseLight {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--cut) * var(--u));
  width: 100%;
  pointer-events: none;
  z-index: -1;
}
.stories {
  background: white;
}
.study .caseLight {
  top: calc(-1 * var(--cut) * var(--u));
  bottom: auto;
}
.heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(16 * var(--u));
}
.study h2 {
  font-size: calc(50 * var(--u));
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}
.kicker {
  font:
    400 calc(20 * var(--u))/1.45 Inter,
    sans-serif;
  color: #6cb6ff;
  background: linear-gradient(90deg, #0089ff, #42deff 45%, #2885ff);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.description {
  font-size: calc(16 * var(--u));
  line-height: calc(29 * var(--u));
  color: #aaa;
}
.study #business-refactor .description,
.campaign .description,
.variation .description {
  font-size: calc(18 * var(--u));
  line-height: calc(28 * var(--u));
}
.cover .heading {
  gap: calc(24 * var(--u));
}
.cover .kicker {
  font-size: calc(32 * var(--u));
  color: #2a65ff;
  background: linear-gradient(
    100deg,
    #529dff,
    #98f0ff 24%,
    #bbaaff 72%,
    #2a65ff
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cover h2 {
  font-weight: 500;
  font-size: calc(110 * var(--u));
}
.cover .description {
  font-size: calc(24 * var(--u));
  line-height: 1.25;
}
.scope {
  text-align: center;
  font:
    400 calc(14 * var(--u))/2 Inter,
    sans-serif;
  color: #777;
}
.scope a {
  display: inline-block;
  margin-top: calc(15 * var(--u));
  color: #397bff;
  font-size: calc(16 * var(--u));
  text-decoration: none;
}
.scope a:hover {
  text-decoration: underline;
}
.perspective {
  display: grid;
  gap: calc(12 * var(--u));
}
.perspective small {
  font:
    300 calc(20 * var(--u))/1.2 Inter,
    sans-serif;
  letter-spacing: 0.04em;
  color: #ddd;
}
.perspective h3 {
  font-weight: 500;
  font-size: calc(35 * var(--u));
  line-height: 1.2;
}
.perspective p {
  color: #aaa;
  font-size: calc(20 * var(--u));
  line-height: 1.2;
}
.after .perspective {
  margin-left: calc(505 * var(--u));
}
.after h3 {
  width: max-content;
  background: linear-gradient(90deg, #e2deff, #61d6ff);
  background-clip: text;
  color: transparent;
}
.study .orbit {
  position: relative;
  aspect-ratio: 493/331;
  margin-top: calc(68 * var(--u));
  width: 100%;
  font-size: calc(20 * var(--u));
}
.orbitRings,
.orbitCenter,
.orbit li {
  position: absolute;
  left: 51.4%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.orbitRings {
  width: 70%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.orbitRings i {
  position: absolute;
  border: 1px dashed #29292e;
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1;
}
.orbitRings i:nth-child(2) {
  width: 72%;
}
.orbitRings i:nth-child(3) {
  width: 46%;
}
.orbitRings::before,
.orbitRings::after {
  content: "";
  position: absolute;
  width: 100%;
  border-top: 1px dashed #313137;
  z-index: -1;
}
.orbitRings::after {
  transform: rotate(90deg);
}
.orbitCenter {
  width: 27.6%;
  aspect-ratio: 1;
  border-radius: 100%;
  display: grid;
  place-items: center;
  background: #18181b;
}
.orbitCenter img {
  width: 74%;
}
.orbit li {
  border-radius: 999px;
  border: 1px solid #353539;
  background: #121214;
  white-space: nowrap;
  line-height: 1;
  display: grid;
  place-items: center;
  height: 18%;
}
.orbit li:nth-child(1) {
  top: 9.2%;
  width: 34%;
}
.orbit li:nth-child(2) {
  left: 15.1%;
  width: 30.2%;
}
.orbit li:nth-child(3) {
  left: 86.9%;
  width: 26.2%;
}
.orbit li:nth-child(4) {
  top: 89.8%;
  width: 38.5%;
}
.study .destinations {
  display: grid;
  gap: calc(50 * var(--u));
  margin-top: calc(75 * var(--u));
}
.destinations li {
  display: grid;
  grid-template-columns: 48.33% 1fr;
  align-items: center;
}
.path,
.recipient {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}
.path {
  font-size: calc(20 * var(--u));
  color: #999bff;
}
.path i {
  width: calc(147 * var(--u));
  height: calc(4 * var(--u));
  background: linear-gradient(90deg, transparent, #b15dba, #6658ff);
  position: relative;
}
.path i::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: calc(8 * var(--u)) solid transparent;
  border-right: 0;
  border-left-color: #7765ff;
}
.iconDisc {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(72 * var(--u));
  aspect-ratio: 1;
  border: 1px solid #323237;
  border-radius: 100%;
  background: #121214;
}
.iconDisc img {
  width: 50%;
}
.recipient h4 {
  font-size: calc(28 * var(--u));
  line-height: 1.2;
  font-weight: 700;
}
.destinations > li:first-child .recipient h4 {
  font-weight: 600;
}
.recipient p {
  margin-top: calc(8 * var(--u));
  color: #94a3b8;
  font-size: calc(21 * var(--u));
  line-height: 1.2;
}
.evidenceWash {
  position: absolute;
  z-index: -1;
  inset: calc((427 - var(--cut)) * var(--u)) 30% auto 0;
  height: calc(561 * var(--u));
  background: linear-gradient(90deg, #0d1432, transparent 82%);
}
.evidenceHeader,
.evidence li {
  display: grid;
  grid-template-columns: 36.16% 1fr;
  align-items: center;
}
.evidenceHeader h3,
.strategyPanel > h3 {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  color: #7fc9ff;
  font-size: calc(24 * var(--u));
  line-height: 1.375;
  font-weight: 700;
}
.evidenceHeader small,
.strategyPanel > h3 small {
  color: #94a3b8;
  font:
    500 calc(14 * var(--u))/1.2 Inter,
    sans-serif;
  letter-spacing: 0.04em;
}
.evidence ol {
  margin-top: calc(44 * var(--u));
}
.evidence li {
  min-height: calc(164 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.3;
  border-bottom: 1px solid #ffffff0b;
}
.evidence li:last-child {
  border: 0;
}
.evidence li div {
  position: relative;
}
.folio {
  position: absolute;
  left: calc(-4 * var(--u));
  bottom: 45%;
  font:
    400 calc(74 * var(--u))/1.12 Inter,
    sans-serif;
  background: linear-gradient(#ffffff1c, #ffffff00);
  background-clip: text;
  color: transparent;
}
.evidence h4 {
  position: relative;
  font-weight: 700;
}
.evidence li p {
  color: #aaa;
}
.evidence strong {
  font-weight: 600;
  color: white;
}
.strategyPanel {
  position: relative;
  isolation: isolate;
  aspect-ratio: 653/647;
  padding: calc(38 * var(--u)) calc(35 * var(--u)) 0 calc(78 * var(--u));
}
.strategyPanel > h3 {
  padding-left: calc(10 * var(--u));
}
.panelBg {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 100% !important;
}
.strategyPanel ol {
  margin-top: calc(88 * var(--u));
  display: grid;
  gap: calc(100 * var(--u));
}
.strategyPanel li {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  min-height: calc(64 * var(--u));
}
.strategyPanel li > img {
  width: calc(64 * var(--u));
  flex: none;
}
.strategyPanel h4 {
  font-size: calc(23 * var(--u));
  line-height: 1.22;
}
.strategyPanel h4 small {
  font:
    500 calc(13 * var(--u))/1.2 Inter,
    sans-serif;
  color: #818cf8;
}
.strategyPanel li p {
  margin-top: calc(12 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.35;
  color: #999;
}
.devicePair,
.phoneTrio {
  display: flex;
  justify-content: space-between;
}
.devicePair img {
  width: 46.54%;
}
.phoneTrio img {
  width: 28.14%;
}
.mapping {
  display: grid;
  grid-template-columns: calc(156 * var(--u)) 1fr;
  gap: calc(36 * var(--u));
  align-items: center;
}
.mapping > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  font-size: calc(16 * var(--u));
  background: radial-gradient(
      ellipse at 25% 50%,
      #57afff,
      #98f0ff 19%,
      #57afff 40%,
      #f3d0ffba 73%,
      transparent
    )
    white;
  color: transparent;
  background-clip: text;
}
.mapping > span::before,
.mapping > span::after {
  content: "";
  flex: 0 0 calc(26 * var(--u));
  height: max(1px, var(--u));
  background: url("/assets/portfolio/website-study/mapping-left.svg") center /
    100% 100% no-repeat;
}
.mapping > span::after {
  background-image: url("/assets/portfolio/website-study/mapping-right.svg");
}
.mapping h3 {
  font-size: calc(32 * var(--u));
  font-weight: 500;
  line-height: 1.2;
}
.mapping p,
.note > p {
  font-size: calc(16 * var(--u));
  line-height: calc(28 * var(--u));
  margin-top: calc(16 * var(--u));
  color: #aaa;
}
.study .tags {
  display: flex;
  align-items: center;
  gap: calc(55 * var(--u));
  margin-top: calc(16 * var(--u));
}
.tags li {
  padding: calc(8 * var(--u)) calc(20 * var(--u));
  border-radius: 100px;
  color: #328fff;
  background: #101b31;
  font-size: calc(18 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
  position: relative;
}
.tags li + li::before {
  content: "⟶";
  position: absolute;
  right: 100%;
  width: calc(55 * var(--u));
  text-align: center;
  color: #32518c;
}
.cards {
  display: grid;
  grid-template-columns: 1086fr 570fr;
  grid-template-rows: repeat(2, calc(313 * var(--u)));
  gap: calc(24 * var(--u));
}
.caseCard {
  container-type: inline-size;
  overflow: hidden;
  background: #fff;
  color: #1c1c21;
  border-radius: calc(14 * var(--u));
  font-family: Inter, sans-serif;
}
.caseCard:first-child {
  grid-row: span 2;
}
.cardContent {
  --c: calc(100cqw / 1086);
  position: relative;
  height: 100%;
  padding: calc(112 * var(--c)) calc(137 * var(--c)) 0;
  color: #121531;
}
.caseCard {
  border: 1px solid #00000015;
  border-radius: calc(24 * var(--u));
  box-shadow: 0 3px 12px #0000000a;
}
.cardRoles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e9e9ef;
  color: #b8b9be;
  font-size: calc(13 * var(--c));
  height: calc(42 * var(--c));
}
.cardRoles span {
  flex: 1;
  align-self: stretch;
  display: grid;
  place-items: center;
}
.cardRoles span[data-active="true"] {
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #5d5dff;
  color: #3030ff;
  background: #f6f7ff;
}
.storyLabel img {
  width: 1.4em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.3em;
}
.study .storyLabel {
  margin-top: calc(40 * var(--c));
  font-size: calc(12 * var(--c));
  color: #3434ff;
  font-weight: 600;
}
.cardContent h3 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.2em;
  font-size: calc(26 * var(--c));
  line-height: 1.2;
  letter-spacing: -0.035em;
  margin-top: calc(18 * var(--c));
}
.cardContent h3 img {
  width: 8.5%;
  height: auto;
}
.study .storyDesc {
  max-width: 79%;
  font-size: calc(10.7 * var(--c));
  line-height: 1.5;
  margin-top: calc(12 * var(--c));
  color: #42486b;
}
.cardBottom {
  display: grid;
  grid-template-columns: 52% 1fr;
  gap: 6.5%;
  margin-top: calc(24 * var(--c));
}
.cardBottom figure {
  position: relative;
  background: var(--brand);
  border-radius: calc(8 * var(--c));
  overflow: hidden;
}
.cardBottom figure > img {
  aspect-ratio: 2.36;
  object-fit: cover;
}
.cardBottom figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 4%;
  background: linear-gradient(
    transparent,
    color-mix(in srgb, var(--brand) 91%, transparent)
  );
  color: white;
  font-size: calc(9 * var(--c));
  line-height: 1.5;
}
.cardBottom figcaption b {
  font-size: calc(10 * var(--c));
  margin-bottom: 0.7em;
}
.cardBottom dl {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-content: space-around;
  gap: calc(12 * var(--c));
  min-width: 0;
}
.cardBottom dt {
  font-size: calc(19 * var(--c));
  font-weight: 650;
  color: var(--brand);
}
.cardBottom dd {
  font-size: calc(10 * var(--c));
  line-height: 1.35;
  color: #45496a;
}
.models {
  background: #fff;
  color: #222;
}
.models .heading {
  align-items: center;
  text-align: center;
}
.models .description {
  color: #666;
}
.modelIntro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2%;
}
.modelIntro::before,
.modelIntro::after {
  content: "";
  width: 29%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c4b4ff);
}
.modelIntro::after {
  transform: rotate(180deg);
}
.modelIntro {
  text-align: center;
  color: #151b3c;
  font:
    400 calc(22 * var(--u))/1.65 Inter,
    "PingFang SC",
    sans-serif;
}
.modelGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.modelGrid figure {
  min-width: 0;
  padding-top: calc(52 * var(--u));
  height: calc(522 * var(--u));
  position: relative;
  background: radial-gradient(ellipse at 50% 34%, #efefff, transparent 46%);
}
.modelGrid figure::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: calc(35 * var(--u)) 0 auto;
  height: calc(166 * var(--u));
  background: none
    center top / calc(414 * var(--u)) auto no-repeat;
}
.modelGrid figcaption::before {
  content: "";
  height: 1px;
  background: #dadaff;
  position: absolute;
  inset: 50% 0 auto;
  z-index: -1;
}
.modelGrid figure::after {
  content: "";
  position: absolute;
  inset: calc(201 * var(--u)) 0 auto;
  height: calc(45 * var(--u));
  background: linear-gradient(#f2f2ff, #f6f6ff);
  pointer-events: none;
}
.modelGrid figcaption,
.modelGrid figure > img {
  z-index: 1;
}
.modelGrid figure > p {
  position: relative;
  margin: auto;
  width: 70%;
  color: #515977;
  text-align: center;
  font:
    400 calc(16 * var(--u))/1.55 Inter,
    sans-serif;
}
.modelGrid em {
  font-style: normal;
  color: #2474ff;
}
.modelGrid figcaption {
  position: absolute;
  top: calc(171 * var(--u));
  width: 100%;
  text-align: center;
  isolation: isolate;
  color: #131b3e;
  font-size: calc(18 * var(--u));
  font-weight: 600;
}
.modelGrid figcaption span {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: 0 calc(14 * var(--u));
  height: calc(60 * var(--u));
  border: max(1px, var(--u)) solid white;
  border-radius: 999px;
  background: rgb(251 251 251 / 70%);
  -webkit-backdrop-filter: blur(clamp(8px, 1.042vw, 20px));
  backdrop-filter: blur(clamp(8px, 1.042vw, 20px));
}
.modelGrid figcaption img {
  border-radius: 50%;
  width: calc(44 * var(--u));
}
.modelGrid figure > img {
  position: absolute;
  left: 0;
  bottom: 0;
}
.gallery {
  display: grid;
  grid-template-columns: 601fr 702fr 537fr;
  gap: calc(40 * var(--u));
}
.variation {
  background: #060607;
}
.variation::before {
  content: "";
  position: absolute;
  left: 70.35%;
  top: 0;
  width: 1px;
  height: 115%;
  transform-origin: top;
  transform: rotate(12.4deg);
  background: linear-gradient(#50658f99, #1e2d4a55);
}
.variation h2 {
  font-size: calc(60 * var(--u));
}
.posterWord {
  position: absolute;
  left: 5.83%;
  top: calc((548 - var(--cut)) * var(--u));
  z-index: 2;
  font:
    400 calc(388 * var(--u))/1.15 Inter,
    sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: auto;
}
.posterWord > span:first-child {
  color: #16171b;
}
.study .glass {
  position: absolute;
  left: 61.72%;
  top: calc((128 - var(--cut)) * var(--u));
  width: 27.66%;
  pointer-events: none;
}
.glassLetter {
  display: inline-block;
  filter: blur(calc(6 * var(--u)));
  opacity: 0.8;
}
.sceneGallery {
  display: flex;
  flex-wrap: wrap;
  gap: calc(55 * var(--u)) 2.91666%;
}
.sceneGallery img {
  height: calc(454 * var(--u));
  object-fit: cover;
}
.sceneGallery img:nth-child(1) {
  width: 23.0208%;
}
.sceneGallery img:nth-child(2),
.sceneGallery img:nth-child(5) {
  width: 41.9791%;
}
.sceneGallery img:nth-child(3) {
  width: 29.1%;
}
.sceneGallery img:nth-child(4) {
  width: 33.54%;
}
.sceneGallery img:nth-child(6) {
  width: 18.59%;
}
.campaign .kicker {
  background-image: linear-gradient(100deg, #ff285e, #ffe998 48%, #ff602a);
}
.campaignMock {
  position: relative;
  isolation: isolate;
}
.liftCard {
  position: absolute;
  left: 18.49%;
  top: 42.33%;
  width: 96.6%;
  transform-origin: 30% 65%;
  z-index: 1;
}
.liftCard[data-card-state="waiting"] {
  transform: translate(-16%, 5%) scale(0.88);
  opacity: 0.08;
  clip-path: inset(0 9% 0 0);
}
.liftCard[data-card-state="entered"] {
  animation: cardLift 850ms cubic-bezier(0.17, 0.76, 0.22, 1) both;
}
@keyframes cardLift {
  from {
    transform: translate(-16%, 5%) scale(0.88);
    opacity: 0.08;
    clip-path: inset(0 9% 0 0);
  }
  to {
    transform: none;
    opacity: 1;
    clip-path: inset(0);
  }
}
.note h3 img {
  display: inline-block;
  vertical-align: middle;
  width: 1.18em;
  margin-left: 0.55em;
}
.note h3 {
  font-size: calc(28 * var(--u));
  line-height: 1.2;
  font-weight: 500;
}
.annotated::before {
  content: "";
  position: absolute;
  right: calc(100% + 26 * var(--u));
  top: calc(17 * var(--u));
  width: calc(195 * var(--u));
  border-top: 1px dotted #a36d374f;
}
.campaign#hsbc .annotated::before {
  border-color: #9e264f55;
  width: calc(142 * var(--u));
}
.swatches {
  display: flex;
  margin-top: calc(24 * var(--u));
  font:
    400 calc(16 * var(--u))/1.5 Inter,
    sans-serif;
}
.swatches span {
  width: calc(206 * var(--u));
  height: calc(67 * var(--u));
  display: flex;
  align-items: end;
  padding: calc(8 * var(--u));
  background: linear-gradient(90deg, #f40064, #40071c);
}
.swatches span + span {
  width: calc(260 * var(--u));
  background: linear-gradient(90deg, #ff6200, transparent);
}
.figures,
.growth {
  border-radius: calc(16 * var(--u));
  background: #101012;
}
.figures {
  display: flex;
  justify-content: space-between;
  margin-top: calc(24 * var(--u));
  padding: calc(20 * var(--u)) calc(40 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.5;
}
.figures small {
  font-size: inherit;
  color: #aaa;
}
.figures p {
  margin-top: calc(16 * var(--u));
}
.figures b {
  font-size: calc(24 * var(--u));
  color: #ffad41;
}
.figures b span {
  display: inline-block;
}
.campaign .tags {
  gap: calc(55 * var(--u));
}
.campaign .tags li {
  background: #2b1116;
  color: #fc747c;
}
.campaign .tags li + li::before {
  color: #a76b24;
}
.growth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(30 * var(--u));
  min-height: calc(117 * var(--u));
  white-space: nowrap;
}
.growth p {
  font-size: calc(20 * var(--u));
  font-weight: 500;
  color: #eddec4;
}
.growth strong {
  font:
    600 calc(43 * var(--u))/1.2 Inter,
    sans-serif;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #ff1768, #ffd081, #ff651e);
  background-clip: text;
  color: transparent;
  min-width: 3.2em;
}
.growth small {
  font-size: 0.58em;
}
.campaign#hsbc .growth strong {
  background-image: linear-gradient(100deg, #ff216b, #ffa686);
}
.legal {
  text-align: center;
  font-size: calc(12 * var(--u));
  line-height: 2.33;
  color: #777;
}
@media (min-width: 768px) {
  .liftCard[data-card-state] {
    opacity: 1;
    clip-path: none;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liftCard[data-card-state] {
    opacity: 1;
    clip-path: none;
    transform: none;
    animation: none;
  }
}

@media (max-width: 760px) {
  .board {
    --u: 0.9px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 52px max(20px, 5vw);
    overflow: hidden;
  }
  .board + .board {
    border-top: 1px solid #ffffff0a;
  }
  .pin {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }
  .mobileLead {
    order: -1;
  }
  .study h2,
  .variation h2 {
    font-size: clamp(27px, 6.8vw, 40px);
    line-height: 1.28;
    letter-spacing: -0.028em;
  }
  .heading {
    gap: 10px;
  }
  .kicker {
    font-size: 13px;
  }
  .description,
  .study #business-refactor .description,
  .campaign .description,
  .variation .description {
    font-size: 15px;
    line-height: 1.75;
  }
  .cover {
    min-height: clamp(315px, 85vw, 570px);
    justify-content: center;
  }
  .cover .backdrop {
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
  }
  .cover .heading {
    gap: 12px;
  }
  .cover h2 {
    font-size: clamp(44px, 10vw, 78px);
  }
  .cover .kicker {
    font-size: 18px;
  }
  .cover .description {
    font-size: 15px;
  }
  .overview {
    justify-content: space-between;
    min-height: clamp(440px, 98vw, 640px);
    background: #050507;
  }
  .overview .backdrop {
    top: 55%;
    transform: translateY(-50%);
    width: 125%;
    max-width: none;
    left: -12.5%;
  }
  .scope {
    font-size: 11px;
    line-height: 1.45;
  }
  .scope a {
    font-size: 13px;
    margin-top: 6px;
  }
  .perspective {
    gap: 4px;
  }
  .perspective small {
    font-size: 12px;
  }
  .perspective h3 {
    font-size: 23px;
  }
  .perspective p {
    font-size: 14px;
  }
  .study .orbit {
    max-width: 440px;
    margin: 18px auto 0;
    font-size: clamp(13px, 3.2vw, 18px);
  }
  .after .perspective {
    margin-left: 0;
  }
  .study .destinations {
    margin-top: 20px;
    gap: 18px;
  }
  .destinations li {
    grid-template-columns: minmax(112px, 39%) 1fr;
    gap: 8px;
  }
  .path {
    font-size: 12px;
    gap: 6px;
  }
  .path i {
    width: clamp(12px, 4vw, 36px);
    height: 2px;
  }
  .path i::after {
    border-width: 4px 0 4px 4px;
  }
  .recipient {
    gap: 8px;
  }
  .iconDisc {
    width: 35px;
  }
  .recipient h4 {
    font-size: 17px;
  }
  .recipient p {
    font-size: 12px;
    line-height: 1.45;
    margin-top: 3px;
  }
  .evidenceWash {
    inset: 24% 0 auto;
    height: 48%;
  }
  .evidenceHeader,
  .evidence li {
    grid-template-columns: 37% 1fr;
    gap: 12px;
  }
  .evidenceHeader h3,
  .strategyPanel > h3 {
    font-size: 17px;
    gap: 5px;
  }
  .evidenceHeader small,
  .strategyPanel > h3 small {
    font-size: 9px;
  }
  .evidence ol {
    margin-top: 16px;
  }
  .evidence li {
    font-size: 14px;
    min-height: 86px;
    line-height: 1.6;
  }
  .folio {
    font-size: 36px;
  }
  .strategyPanel {
    aspect-ratio: auto;
    padding: 32px min(8vw, 48px) 42px;
  }
  .strategyPanel > h3 {
    padding: 0;
  }
  .strategyPanel li {
    gap: 12px;
    min-height: 0;
  }
  .strategyPanel ol {
    gap: 25px;
    margin-top: 26px;
  }
  .strategyPanel li > img {
    width: 40px;
  }
  .strategyPanel h4 {
    font-size: 17px;
  }
  .strategyPanel h4 small {
    font-size: 10px;
  }
  .strategyPanel li p {
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.6;
  }
  .devicePair {
    max-width: 500px;
    margin: auto;
    justify-content: space-evenly;
  }
  .devicePair img {
    width: 38%;
  }
  .mapping {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .mapping > span {
    text-align: left;
    font-size: 12px;
    color: #76baff;
  }
  .mapping > span {
    width: max-content;
    gap: 8px;
    color: transparent;
  }
  .mapping > span::before,
  .mapping > span::after {
    flex-basis: 20px;
    width: 20px;
  }
  .mapping h3 {
    font-size: 21px;
  }
  .mapping p,
  .note > p {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 8px;
  }
  .study .tags,
  .campaign .tags {
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 12px;
  }
  .tags li {
    font-size: 12px;
    padding: 6px 9px;
  }
  .tags li + li::before {
    width: 17px;
  }
  .stories {
    background: linear-gradient(#060607 30%, white 75%);
  }
  .stories .caseLight {
    top: 0;
  }
  .cards {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }
  .caseCard:first-child {
    grid-row: auto;
  }
  .caseCard {
    border-radius: 14px;
  }
  .cardContent {
    padding: 20px 18px;
  }
  .cardRoles {
    height: 28px;
    font-size: 11px;
  }
  .study .storyLabel {
    margin-top: 18px;
    font-size: 10px;
  }
  .cardContent h3 {
    font-size: 20px;
    margin-top: 8px;
  }
  .study .storyDesc {
    font-size: 12px;
    max-width: none;
    line-height: 1.5;
    margin-top: 7px;
  }
  .cardBottom {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
  }
  .cardBottom figcaption,
  .cardBottom figcaption b {
    font-size: 10px;
  }
  .cardBottom dl {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .cardBottom dt {
    font-size: 16px;
  }
  .cardBottom dd {
    font-size: 10px;
  }
  .models .heading {
    align-items: start;
    text-align: left;
  }
  .modelIntro {
    text-align: left;
    font-size: 17px;
  }
  .modelGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .modelGrid figure {
    height: auto;
    position: relative;
    padding: 15px 0 0;
  }
  .modelGrid figure > p {
    width: 96%;
    font-size: 13px;
  }
  .modelGrid figcaption {
    position: relative;
    top: auto;
    margin: 20px auto 0;
    font-size: 13px;
  }
  .modelGrid figure::after {
    display: none;
  }
  .modelGrid figure::before {
    top: 14px;
    height: 95px;
    background-size: 215px auto;
  }
  .modelGrid figcaption span {
    height: 40px;
    padding: 0 12px;
    gap: 6px;
  }
  .modelGrid figcaption img {
    width: 25px;
  }
  .modelGrid figure > img {
    position: static;
  }
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .variation {
    min-height: clamp(355px, 83vw, 560px);
  }
  .posterWord {
    font-size: 20vw;
    top: auto;
    bottom: 12%;
    left: 4vw;
  }
  .study .glass {
    width: 25%;
    top: auto;
    bottom: -5%;
    left: 62%;
  }
  .sceneGallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .sceneGallery img:nth-child(n) {
    width: 100%;
    height: 100%;
    aspect-ratio: 1.2;
    object-fit: cover;
  }
  .campaignMock[data-amazon="true"] {
    width: 86.5%;
  }
  .annotated::before {
    display: none;
  }
  .note h3 {
    font-size: 21px;
  }
  .swatches {
    margin-top: 14px;
    font-size: 12px;
  }
  .swatches span,
  .swatches span + span {
    width: 42%;
    height: 40px;
  }
  .figures {
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 14px;
    padding: 16px 20px;
    font-size: 13px;
  }
  .figures p {
    margin-top: 7px;
  }
  .figures b {
    font-size: 18px;
  }
  .growth {
    min-height: 72px;
    gap: 12px;
    padding: 10px;
    flex-wrap: wrap;
  }
  .growth p {
    font-size: 14px;
  }
  .growth strong {
    font-size: 28px;
    min-width: auto;
  }
  .legal {
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .modelIntro::before,
  .modelIntro::after {
    display: none;
  }
}

.board:is(
  #business-refactor,
  #design-strategy,
  #visual-mapping,
  #capability-models,
  #amazon,
  #hsbc
) {
  --reading-space: clamp(42px, 4.2vw, 86px);
}
@media (max-width: 760px) {
  .board:where(:not(.cover)) {
    padding-bottom: calc(40px + var(--reading-space, 8px));
  }
}

.study .kickerOutline {
  display: none;
}
@media (min-width: 768px) {
  .kickerOriginal {
    display: none;
  }
  .study .kickerOutline {
    display: block;
    width: calc(var(--outline-w) * var(--u));
    height: calc(var(--outline-h) * var(--u));
  }
}

@media (min-width: 768px) {
  .study #amazon .growth strong {
    --count-gradient: linear-gradient(100deg, #ff1768, #ffd081, #ff651e);
    background: none;
    color: #ff1768;
  }
  .study #amazon .growth strong [data-count-prefix],
  .study #amazon .growth strong [data-count-suffix] {
    background-image: var(--count-gradient);
    background-clip: text;
    color: transparent;
  }
}