/* =========================================================
   Minh Ngo — Portfolio Box
   All layer coordinates are in the 1440 × 900 design frame.
   The stage is scaled to the viewport by script, so every
   element keeps its exact position from the Figma design.
   ========================================================= */

:root {
  --desk: #f4f3e3;
  --ink: #00263e;
  --coral: #ee6c55;
  --blush: #eadada;
  --teal: #13757c;
  --dim: rgba(0, 0, 0, 0.656);

  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --soft: cubic-bezier(0.22, 1, 0.36, 1);
  --inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* set by script: modal frame scale + offset */
  --s: 1;
  --fx: 0px;
  --fy: 0px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--desk);
  font-family: "Montserrat", system-ui, sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------------------------------------------------------
   Stage
   --------------------------------------------------------- */
.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  transform-origin: 0 0;
}

.layer {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
}

.layer {
  pointer-events: none;
}

.layer > img {
  width: 100%;
  height: 100%;
}

/* the artwork keeps its Figma size and rotation inside the bounding box,
   so nudges and lifts rotate it around its own centre */
.art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--iw);
  height: var(--ih);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

.art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* the hit area follows the object's outline (convex hull) */
.hit {
  position: absolute;
  inset: 0;
  clip-path: polygon(var(--clip));
  pointer-events: auto;
}

.lid .hit,
.obj .hit {
  cursor: pointer;
}

.lid.is-leaving .hit,
.obj:not(.is-ready) .hit {
  pointer-events: none;
}

/* ---------------------------------------------------------
   Desk items — nudged by the box landing and by the cursor
   --------------------------------------------------------- */
.desk-item {
  --dx: 0px;
  --dy: 0px;
  --rot: 0deg;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  transition: transform 0.9s var(--spring);
  will-change: transform;
}

.desk-item.is-bumped {
  transition-duration: 0.55s;
}

/* ---------------------------------------------------------
   Navigation on the monitor screen
   --------------------------------------------------------- */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  height: 72px;
  z-index: 6;
  color: var(--ink);
  font-size: 20px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.8s var(--soft), transform 0.8s var(--soft);
}

.is-open .nav {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 1.2s;
}

.nav__brand,
.nav__link {
  position: absolute;
  top: 22px;
  line-height: 28px;
  white-space: nowrap;
}

.nav__brand {
  left: 328px;
  font-weight: 600;
}

.nav__link {
  font-weight: 400;
  color: inherit;
  text-decoration: none;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--soft);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__projects.is-open .nav__link::after {
  transform: scaleX(1);
}

.nav__profile { left: 744px; }
.nav__contact { left: 1033px; }
.nav__projects .nav__link { left: 864px; padding-right: 30px; }
.nav__projects .nav__link::after { right: 30px; }

.nav__chev {
  position: absolute;
  right: 0;
  top: 9px;
  width: 16px;
  height: 10px;
  transition: transform 0.35s var(--soft);
}

.nav__projects.is-open .nav__chev { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  left: 846px;
  top: 64px;
  min-width: 290px;
  padding: 10px;
  background: #fffdf3;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 38, 62, 0.18), 0 2px 6px rgba(0, 38, 62, 0.08);
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transform-origin: 30% 0;
  pointer-events: none;
  transition: opacity 0.3s var(--soft), transform 0.4s var(--spring);
}

.nav__projects.is-open .dropdown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 17px;
  padding: 11px 14px;
  border-radius: 10px;
  transition: background 0.25s, transform 0.25s var(--soft);
}

.dropdown button:hover,
.dropdown button:focus-visible {
  background: #eef0f7;
  transform: translateX(4px);
  outline: none;
}

/* ---------------------------------------------------------
   The box: drop → lid lift → objects appear
   --------------------------------------------------------- */
.box {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform-origin: 721px 450px;
}

.box.is-dropping {
  animation: boxDrop 1.15s var(--soft) forwards;
}

.box.is-landed {
  opacity: 1;
}

@keyframes boxDrop {
  0% {
    opacity: 0;
    transform: translateY(-140px) scale(1.55) rotate(-4deg);
    filter: drop-shadow(0 90px 60px rgba(60, 40, 20, 0.28));
  }
  15% { opacity: 1; }
  55% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: drop-shadow(0 6px 8px rgba(60, 40, 20, 0.16));
    animation-timing-function: ease-out;
  }
  68% { transform: translateY(-6px) scale(1.018) rotate(0.4deg); }
  82% { transform: translateY(0) scale(0.996) rotate(-0.15deg); }
  100% {
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 0 0 rgba(60, 40, 20, 0));
  }
}

/* soft shadow pooling under the falling box */
.box-shadow {
  position: absolute;
  left: 260px;
  top: 166px;
  width: 919px;
  height: 567px;
  border-radius: 100px;
  z-index: 2;
  background: rgba(70, 50, 25, 0.22);
  filter: blur(26px);
  opacity: 0;
  transform: scale(0.55);
  pointer-events: none;
}

.box-shadow.is-dropping {
  animation: shadowDrop 1.15s var(--soft) forwards;
}

@keyframes shadowDrop {
  0% { opacity: 0; transform: scale(0.5); }
  55% { opacity: 0.9; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1); }
}

.stage.is-shaking {
  animation: thud 0.35s ease-out;
}

@keyframes thud {
  0%, 100% { translate: 0 0; }
  25% { translate: 0 2px; }
  55% { translate: 0 -1px; }
}

/* lid + sticky note */
.lid {
  --x: 261px;
  --y: 167px;
  --w: 919px;
  --h: 567px;
  z-index: 10;
  cursor: pointer;
  transform-origin: 50% 50%;
}

.lid .hit { clip-path: inset(0 round 100px); }

/* handwriting on the lid (live text, positioned by its centre) */
.scribble {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  margin: 0;
  transform: translate(-50%, -50%) rotate(var(--r));
  white-space: nowrap;
  line-height: normal;
  font-weight: 400;
}

.scribble--name {
  --cx: 301.85px;
  --cy: 215.22px;
  --r: -12.85deg;
  font-family: "Nanum Pen Script", cursive;
  font-size: 80px;
  color: #074369;
}

.scribble--title {
  --cx: 459.57px;
  --cy: 269.24px;
  --r: -12.85deg;
  font-family: "Mynerve", cursive;
  font-size: 90px;
  color: #1e1e1e;
}

.scribble--note {
  --cx: 171.21px;
  --cy: 154.52px;
  --r: -23.69deg;
  font-family: "Mynerve", cursive;
  font-size: 40px;
  color: #b90404;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.lid:hover:not(.is-leaving) {
  transform: translateY(-3px);
  transition: transform 0.5s var(--soft);
}

.lid.is-leaving {
  animation: lidOff 1.7s var(--inout) forwards;
  pointer-events: none;
}

@keyframes lidOff {
  0% { transform: none; filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
  28% {
    transform: translateY(-22px) scale(1.05) rotate(-1.2deg);
    filter: drop-shadow(0 36px 32px rgba(60, 40, 20, 0.3));
  }
  42% {
    transform: translateY(-26px) scale(1.06) rotate(-1.6deg);
    filter: drop-shadow(0 40px 36px rgba(60, 40, 20, 0.3));
  }
  100% {
    transform: translate(1350px, -420px) scale(1.08) rotate(16deg);
    filter: drop-shadow(0 40px 36px rgba(60, 40, 20, 0.3));
  }
}

.note {
  --x: 455.58px;
  --y: 228.82px;
  --w: 331.454px;
  --h: 285.643px;
  --iw: 278.493px;
  --ih: 193.241px;
  --r: -22.67deg;
  transform-origin: 78% 18%;
  animation: noteIdle 4.2s ease-in-out 2.2s infinite;
}

.lid:hover .note {
  animation: noteWiggle 0.7s var(--soft);
}

@keyframes noteIdle {
  0%, 82%, 100% { transform: rotate(0deg); }
  87% { transform: rotate(-3deg); }
  92% { transform: rotate(2deg); }
  96% { transform: rotate(-1deg); }
}

@keyframes noteWiggle {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-5deg) translateY(-3px); }
  60% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

/* tray + project objects */
.tray {
  --x: 260px;
  --y: 166px;
  --w: 919px;
  --h: 567px;
  z-index: 1;
}

.obj {
  z-index: 2;
  opacity: 0;
  transform: translateY(18px) scale(0.82) rotate(var(--tilt, 0deg));
  transition:
    transform 0.55s var(--spring),
    filter 0.55s var(--soft);
  cursor: pointer;
}

.obj .art > img { transition: opacity 0.35s var(--soft); }
.obj .obj__hover { opacity: 0; }

/* hover label, handwritten on the darkened object */
.obj__label {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  margin: 0;
  transform: translate(-50%, -50%) rotate(var(--lr));
  font-family: "Nanum Pen Script", cursive;
  font-size: var(--lf, 28px);
  line-height: 32px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s var(--soft);
}

.obj--phone  { --lx: 49.88%; --ly: 49.81%; --lr: -17.83deg; }
.obj--swatch { --lx: 50.03%; --ly: 60.29%; --lr: 13.35deg; --lf: 36px; }
.obj--folder { --lx: 45.43%; --ly: 68.38%; --lr: 14.97deg; }
.obj--camera { --lx: 50.06%; --ly: 49.68%; --lr: -8.62deg; }
.obj--brand  { --lx: 49.58%; --ly: 49.69%; --lr: 2.22deg; --lf: 36px; }
.obj--idcard { --lx: 54.77%; --ly: 50.19%; --lr: 0deg; --lf: 40px; }

.is-revealed .obj {
  animation: objIn 0.8s var(--spring) forwards;
  animation-delay: calc(var(--i) * 90ms + 0.15s);
}

@keyframes objIn {
  0% { opacity: 0; transform: translateY(18px) scale(0.82) rotate(var(--tilt, 0deg)); }
  100% { opacity: 1; transform: none; }
}

/* once revealed, hand control to transitions */
.obj.is-ready {
  animation: none;
  opacity: 1;
  transform: none;
}

.obj.is-ready:hover:not(.is-taken),
.obj.is-ready.is-hovered:not(.is-taken) {
  transform: translateY(-4px) scale(1.025);
  filter: drop-shadow(0 10px 10px rgba(60, 40, 20, 0.18));
  z-index: 5;
}

.obj.is-ready:hover:not(.is-taken) :is(.obj__hover, .obj__label),
.obj.is-ready.is-hovered:not(.is-taken) :is(.obj__hover, .obj__label) {
  opacity: 1;
}

.obj.is-taken {
  z-index: 20;
  transform: translateY(-58px) scale(1.17) rotate(-4deg);
  filter: drop-shadow(0 46px 34px rgba(50, 30, 15, 0.32));
  transition:
    transform 0.6s var(--spring),
    filter 0.6s var(--soft);
}

.obj.is-settling {
  transition:
    transform 0.8s var(--spring),
    filter 0.8s var(--soft);
}

/* ---------------------------------------------------------
   Overlay + modals (in a 1440 × 900 frame, "contain" scaled)
   --------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--dim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--soft), visibility 0s linear 0.45s;
}

.overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--soft), visibility 0s;
}

.frame {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: 1440px;
  height: 900px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  pointer-events: none;
}

.modal {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--soft), visibility 0s linear 0.35s;
}

.modal.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s var(--soft), visibility 0s;
}

.modal.is-active .pop,
.modal.is-active .back {
  pointer-events: auto;
}

.pop {
  position: absolute;
}

/* entrance uses translate/scale so hover transforms still compose */
.modal.is-active .pop {
  animation: popIn 0.8s var(--spring) both;
  animation-delay: calc(var(--d, 0) * 80ms + 100ms);
}

@keyframes popIn {
  0% { opacity: 0; translate: 0 34px; scale: 0.94; }
  45% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

.close {
  width: 42px;
  height: 42px;
  color: #fff;
  border-radius: 50%;
  transition: transform 0.45s var(--spring), opacity 0.4s var(--soft);
}

.close svg { width: 100%; height: 100%; display: block; }
.close:hover { transform: rotate(90deg) scale(1.08); }

/* ---------- About ⇄ Experience flip card ---------- */
.profile {
  left: 166px;
  top: 126px;
  width: 1109px;
  height: 645px;
  perspective: 2200px;
}

.profile__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s var(--inout);
}

.modal.is-flipped .profile__inner {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 62px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.22);
}

/* lift a little mid-flip so the turn feels physical */
.profile.is-turning .profile__inner {
  animation: flipLift 1s var(--inout);
}

@keyframes flipLift {
  50% { scale: 0.94; }
}

.about {
  background: var(--blush);
}

.about__head {
  height: 101px;
  background: var(--coral);
  color: #fff;
  font-size: 63px;
  font-weight: 800;
  line-height: 101px;
  text-align: center;
  letter-spacing: 0.2px;
}

.about__abs { position: absolute; }

.about__photo {
  left: 31px;
  top: 129px;
  width: 220px;
  height: 276px;
  object-fit: cover;
}

.about__row {
  font-size: 24px;
  line-height: 32px;
  white-space: nowrap;
}

.about__row b { font-weight: 700; margin-right: 8px; }

.about__name { left: 275px; top: 135px; }
.about__age { left: 702px; top: 135px; }
.about__edu { left: 275px; top: 185px; }

.about__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 24px;
  line-height: 40px;
}

.about__list li { position: relative; padding-left: 21px; }

.about__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.about__list--l { left: 420px; top: 221px; }
.about__list--r { left: 703px; top: 221px; }

.about__label {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.about__tools-label { left: 275px; top: 311px; }
.about__social-label { left: 700px; top: 311px; }

.about__icons {
  left: 275px;
  top: 343px;
  display: flex;
  gap: 23px;
}

.about__icons img,
.about__social img {
  width: 61px;
  height: 61px;
  border-radius: 12px;
  transition: transform 0.4s var(--spring);
}

.about__icons img:hover { transform: translateY(-5px) rotate(-4deg) scale(1.06); }

.about__social { left: 699px; top: 350px; }
.about__social img { width: 62px; height: 46px; border-radius: 10px; }
.about__social a:hover img { transform: scale(1.1); }

.about__bio {
  left: 31px;
  top: 412px;
  width: 1050px;
  margin: 0;
  font-size: 18px;
  line-height: 40px;
}

.linkish {
  font-size: 24px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.linkish span {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.linkish svg {
  width: 20px;
  height: 20px;
  transition: transform 0.4s var(--spring);
}

.linkish:hover svg { transform: translateX(6px); }

.about__more {
  left: 0;
  right: 0;
  top: 581px;
  display: flex;
  justify-content: center;
}

.exp {
  background: var(--teal);
  color: #fff;
  transform: rotateY(180deg);
}

.exp__scroll {
  height: 100%;
  overflow-y: auto;
  padding: 44px 46px 44px 43px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.exp__job {
  display: grid;
  grid-template-columns: 296px 1fr;
  font-size: 24px;
  line-height: 40px;
}

.exp__job + .exp__job { margin-top: 32px; }

.exp__job h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
}

.exp__when p { margin: 0; }

.exp__job ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exp__job li { position: relative; padding-left: 36px; }

.exp__job li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 19px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.back {
  position: absolute;
  left: 178px;
  top: 790px;
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.back svg { width: 30px; height: 30px; transition: transform 0.4s var(--spring); }
.back:hover svg { transform: translateX(-6px); }

/* the back link only shows on the experience side */
.back {
  opacity: 0;
  transform: translateX(-12px);
  visibility: hidden;
  transition: opacity 0.4s var(--soft), transform 0.5s var(--soft), visibility 0s linear 0.4s;
}

.modal.is-flipped .back {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.5s var(--soft) 0.55s, transform 0.6s var(--spring) 0.55s, visibility 0s;
}

.about-close { left: 1296px; top: 96px; }

/* ---------- Apps modal ---------- */
.app-phone {
  left: 174px;
  top: 140px;
  width: 302px;
  height: 638px;
}

.app-phone > img { width: 100%; height: 100%; }

.app-icon {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 24px;
  transition: transform 0.45s var(--spring), filter 0.4s var(--soft);
}

.app-icon img { width: 100%; height: 100%; border-radius: 24px; }

.app-icon:hover {
  transform: translateY(-6px) scale(1.08);
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.22));
}

.app-icon:active { transform: scale(0.95); }

.app-eluvo { left: 42px; top: 110px; }
.app-pausora { left: 163px; top: 110px; }
.app-mentation { left: 42px; top: 252px; }

.apps-card {
  left: 531px;
  top: 164px;
  width: 758px;
  height: 571px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.apps-card > * { position: absolute; left: 27px; margin: 0; }

.apps-card h2 {
  top: 31px;
  font-size: 55px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -0.3px;
}

.apps-card .company {
  top: 158px;
  font-size: 24px;
  line-height: 30px;
  color: #3a3a3a;
}

.apps-card .desc {
  top: 245px;
  width: 678px;
  font-size: 20px;
  line-height: 28px;
  color: #2b2b2b;
}

.apps-card .hint {
  top: 342px;
  font-size: 20px;
  line-height: 28px;
  color: #2b2b2b;
  display: flex;
  align-items: center;
  gap: 12px;
}

.apps-card .hint svg {
  width: 16px;
  height: 16px;
  animation: nudgeLeft 1.8s ease-in-out infinite;
}

@keyframes nudgeLeft {
  0%, 100% { transform: none; }
  50% { transform: translateX(-5px); }
}

.apps-card dl {
  top: 420px;
  font-size: 20px;
  line-height: 33px;
}

.apps-card dl div { display: flex; gap: 6px; }
.apps-card dt { font-weight: 700; color: #000; }
.apps-card dd { margin: 0; color: #4a4a4a; }

.apps-close { left: 1316px; top: 128px; }

/* ---------- UX/UI projects chooser ---------- */
.project {
  transition: transform 0.55s var(--spring), filter 0.5s var(--soft);
}

.project img { width: 100%; height: 100%; }

.project:hover,
.project:focus-visible {
  transform: translateY(-14px) rotate(-1.5deg) scale(1.04);
  filter: drop-shadow(0 26px 22px rgba(0, 0, 0, 0.35));
  outline: none;
}

.project.is-taken {
  transform: translateY(-40px) scale(1.1) rotate(-3deg);
  filter: drop-shadow(0 40px 30px rgba(0, 0, 0, 0.4));
}

.projects-close { left: 1316px; top: 248px; }

/* ---------- Brand systems chooser ---------- */
.brand-card {
  top: 241px;
  width: 493px;
  height: 423px;
  padding: 16px 19px 0;
  background: #ffe7a7;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
  transition: transform 0.55s var(--spring), box-shadow 0.5s var(--soft);
}
.brand-card--cano { left: 190px; }
.brand-card--membit { left: 784px; top: 236px; }
.brand-card img { width: 455px; height: 328px; border-radius: 20px; background: #fff; object-fit: cover; }
.brand-card img.is-missing { background: #fff; }
.brand-card__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 21px;
  font-size: 28px;
  line-height: 40px;
  font-weight: 600;
}
.brand-card__label svg {
  width: 28px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--spring);
}
.brand-card:hover,
.brand-card:focus-visible {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 40px 70px rgba(0, 0, 0, 0.3);
  outline: none;
}
.brand-card:hover .brand-card__label svg { transform: translateX(6px); }
.brand-card.is-taken { transform: translateY(-30px) scale(1.06); }
.brand-close { left: 1316px; top: 128px; }

/* ---------- Content creator: the camera ---------- */
.cam {
  left: 182px;
  top: 120px;
  width: 1078px;
  height: 659px;
}

.cam__body { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.cam__pad { transform-origin: 958px 444px; transition: transform 0.5s var(--spring); }
.cam:hover .cam__pad { transform: rotate(-8deg); }

/* the camera's screen scrolls, like browsing on the device */
.cam__screen {
  position: absolute;
  left: 10px;
  top: 147px;
  width: 839px;
  height: 503px;
  border: 10px solid #000;
  border-radius: 25px;
  background: #414141;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 33px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.cam__item {
  display: grid;
  grid-template-columns: 375px 1fr;
  gap: 29px;
  align-items: start;
  color: #fff;
}

.cam__item + .cam__item { margin-top: 26px; }
.cam__item img { width: 375px; height: auto; }

.cam__item h2 {
  margin: 3px 0 12px;
  font-size: 28px;
  line-height: 28px;
  font-weight: 600;
}

.cam__item p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 24px;
}

.cam__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 34px;
  color: #1abcfe;
  text-decoration: none;
}

.cam__link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--spring);
}

.cam__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cam__link:hover svg { transform: translate(2px, -2px); }

.cam-close { left: 1316px; top: 128px; }

/* ---------- Contact: an email draft under the nav ---------- */
.contact {
  left: 720px;
  top: 67px;
  width: 421px;
  padding: 12px 36px 38px 31px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
  font-size: 20px;
  line-height: 34px;
  color: #000;
  transform-origin: 75% 0;
}

.contact p { margin: 0; }

.contact__row {
  padding: 18px 8px 3px;
  border-bottom: 1px solid #a9c7e3;
}

.contact__row a { color: #0051ff; text-decoration: none; }
.contact__row a:hover { text-decoration: underline; text-underline-offset: 4px; }

.contact__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 8px 0;
}

.contact__links a {
  color: #0051ff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: transform 0.35s var(--spring);
}

.contact__links a:hover { transform: translateX(4px); }

.contact__sign {
  margin-top: 20px !important;
  padding-top: 0;
  line-height: 30px;
}

/* ---------- Case study (scrolling) ---------- */
.case {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
  scroll-behavior: smooth;
}

.case.is-active {
  visibility: visible;
  pointer-events: auto;
}

.case__card {
  margin: calc(var(--fy) + 145px * var(--s)) 0 calc(80px * var(--s)) calc(var(--fx) + 141px * var(--s));
  width: calc(1159px * var(--s));
  border-radius: calc(30px * var(--s));
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.4s var(--soft), transform 0.5s var(--soft);
}

.case.is-active .case__card {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--soft) 0.1s, transform 0.9s var(--spring) 0.1s;
}

/* ---------- Case-study content: live text on one spacing scale ----------
   Laid out at the design width (1159px) and zoomed to the window,
   so every page shares the same type ramp and rhythm:
   section gap 96 · heading → content 32 · sub-heading 40/16 · paragraphs 16 */
.cs {
  --pad: 57px;
  --gap: 24px;
  position: relative;
  width: 1159px;
  zoom: var(--s);
  padding: 64px var(--pad) 72px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #414141;
}

.cs img { max-width: 100%; height: auto; }
.cs figure { margin: 0; }
.cs p { margin: 0 0 16px; }
.cs p:last-child { margin-bottom: 0; }
.cs b { font-weight: 600; color: #000; }

/* hero */
.cs-hero {
  position: relative;
  min-height: 556px;
  padding-top: 32px;
}

.cs-hero > :not(.cs-hero__art) { position: relative; z-index: 1; max-width: 560px; }
.cs-hero > .cs-title { max-width: 640px; }

.cs-title {
  margin: 0 0 12px;
  font-size: 56px;
  line-height: 56px;
  font-weight: 700;
  color: #000;
}

.cs-sub {
  font-size: 24px;
  line-height: 34px;
}

.cs-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 34px;
  color: #0051ff;
  text-decoration: none;
}

.cs-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--spring);
}

.cs-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cs-link:hover svg { transform: translate(2px, -2px); }

.cs-lead,
.cs-p--lg {
  font-size: 20px;
  line-height: 28px;
}

.cs-hero .cs-lead { margin: 24px 0 40px; }
.cs-lead--center { text-align: center; color: #000; margin-bottom: 32px !important; }

.cs-meta { margin: 0; font-size: 20px; line-height: 33px; }
.cs-meta div { display: flex; gap: 6px; }
.cs-meta dt { font-weight: 600; color: #000; }
.cs-meta dd { margin: 0; }

.cs-hero__art {
  position: absolute;
  left: calc(var(--pad) * -1);
  top: -64px;
  width: 1159px;
  height: 100%;
  pointer-events: none;
}

.cs-place {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
}

.cs-place img { width: 100%; height: 100%; object-fit: contain; }

/* brand pages: old logo → arrow → new logo */
.cs-hero--brand { min-height: 600px; }
.cs-hero--brand > .cs-title { max-width: 720px; }
.cs-hero--brand .cs-hero__art { position: static; width: auto; height: auto; }
.cs-rebrand {
  position: absolute;
  right: 0;
  top: -20px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cs-rebrand img { width: 240px; height: 240px; object-fit: contain; }
.cs-rebrand__arrow { width: 64px; height: 64px; }

/* app pages: icon + title */
.cs-hero--app {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  min-height: 0;
  padding-top: 0;
}
.cs-hero--app > .cs-hero__text { max-width: 760px; }
.cs-appicon { flex: none; width: 181px; height: 181px; border-radius: 40px; }
.cs-title--app { font-size: 40px; line-height: 48px; margin-top: 8px; }
.cs-hero--app .cs-lead { margin: 16px 0 0; }

/* sections */
.cs-sec { margin-top: 96px; }
.cs-sec--tight { margin-top: 64px; }
.cs-h {
  margin: 0 0 32px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  color: #000;
}
.cs-h4 {
  margin: 40px 0 16px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: #000;
}
.cs-label { font-weight: 600; color: #000; margin-bottom: 8px !important; }
.cs-center { text-align: center; }
.cs-caption { max-width: 360px; margin: 16px auto 0 !important; text-align: center; }

.cs-list { margin: 0 0 16px; padding-left: 22px; }
.cs-list li + li { margin-top: 8px; }
.cs-list--lg { font-size: 20px; line-height: 28px; }

.cs-fig { margin: 32px 0 !important; }
.cs-fig img { display: block; }
.cs-fig--center img { margin: 0 auto; }
.cs-fig--framed img { border: 1px solid #808080; }
.cs-row { display: flex; gap: var(--gap); justify-content: space-between; margin: 32px 0; }
.cs-row .cs-fig { margin: 0 !important; }
.cs-row--center { justify-content: center; }
.cs-row--bottom { align-items: flex-end; }

.cs-pair {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  margin: 48px 0;
}
.cs-pair .cs-fig { margin: 0 0 16px !important; }
.cs-pair > div { max-width: 476px; }

.cs-buttons { display: flex; justify-content: center; align-items: center; gap: var(--gap); }

/* interview */
.cs-interview { display: grid; grid-template-columns: 306px 1fr; gap: 40px; align-items: start; margin-bottom: 8px; }
.cs-user__time { text-align: center; font-size: 18px; white-space: nowrap; }
.cs-user__card {
  border: 1.5px solid #980000;
  border-radius: 6px;
  padding: 16px 16px 20px;
}
.cs-user__title { text-align: center; font-weight: 600; color: #000; }
.cs-quotes { display: flex; flex-direction: column; gap: 32px; padding: 8px 0 0 40px; }
.cs-quote {
  position: relative;
  margin: 0;
  padding: 24px 28px;
  background: #980000;
  border-radius: 10px;
  box-shadow: 10px 10px 0 #1e1e1e;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: #fff;
}
.cs-quote::before {
  content: "\201C";
  position: absolute;
  left: -40px;
  top: -14px;
  font: 700 72px/1 Georgia, serif;
  color: #980000;
}
.cs-quote::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -26px;
  border: 14px solid transparent;
  border-top: 18px solid #980000;
  border-left-width: 6px;
}

.cs-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
  margin-top: 48px;
}
.cs-grid3 h4 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; color: #000; }
.cs-grid3 p { margin: 0; }

.cs-reflect {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 808px;
  margin: 0 auto 24px;
  padding: 16px 24px 16px 16px;
  border: 1.5px solid #980000;
  border-radius: 6px;
}
.cs-reflect--flip { padding: 16px 16px 16px 24px; }
.cs-reflect img { flex: none; width: 200px; }

/* resipe */
.cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 24px; }
.cs-facts { margin: 0; }
.cs-facts div + div { margin-top: 8px; }
.cs-facts dt { display: inline; font-weight: 500; color: #000; }
.cs-facts dd { display: inline; margin: 0 0 0 4px; }
.cs-phone { border-radius: 28px; }
.cs-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 80px; }
.cs-phones img { width: 281px; border-radius: 40px; }

/* eluvo */
.cs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 860px; margin: 0 auto 32px; }
.cs-compare > div { border: 1px solid #d4d4d4; border-radius: 12px; padding: 16px 20px; }
.cs-compare .cs-list { margin: 0; }

/* app screenshots: swipe row */
.cs-strip {
  display: flex;
  gap: 20px;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: thin;
}
.cs-strip img { flex: none; width: 191px; border-radius: 16px; scroll-snap-align: start; }

/* brand slides run edge to edge */
.cs-sec--slide { margin: 48px calc(var(--pad) * -1) 0; }
.cs-slide { display: block; width: 100%; }
.cs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* image not exported yet: keep its space, show a soft placeholder */
.cs img.is-missing {
  background: #f3f1ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c3b3' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 8'/%3E%3C/svg%3E") center / 48px no-repeat;
  border-radius: 12px;
  color: transparent;
}

/* end of page: thanks + other projects */
.cs-end { margin-top: 98px; text-align: center; }
.cs-exact + .cs-end { margin-top: 0; } /* exact pages end 98px below their last element */
.cs-thanks { font-size: 36px; line-height: 56px; font-weight: 600; color: #d4d4d4; }
.cs-more__title {
  margin: 72px 0 24px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  color: #000;
  text-align: left;
}
.cs-more {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}
.cs-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #f7f6ef;
  text-align: left;
  transition: transform 0.45s var(--spring), box-shadow 0.45s var(--soft);
}
.cs-card:hover,
.cs-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
  outline: none;
}
.cs-card__img {
  height: 150px;
  display: grid;
  place-items: center;
  background: #eeece2;
  overflow: hidden;
}
.cs-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cs-card__img img.is-missing { width: 100%; height: 100%; border-radius: 0; }
.cs-card__img--icon img { width: 96px; height: 96px; object-fit: contain; border-radius: 22px; }
.cs-card__body { padding: 14px 16px 16px; }
.cs-card__kind { display: block; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8478; }
.cs-card__name { display: block; margin-top: 4px; font-size: 16px; line-height: 22px; font-weight: 600; color: #000; }

.case__nav {
  position: fixed;
  left: calc(var(--fx) + 23px * var(--s));
  top: calc(var(--fy) + 340px * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--s));
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s var(--soft), transform 0.5s var(--soft);
}

.case.is-active .case__nav {
  opacity: 1;
  transform: none;
  transition-delay: 0.35s;
}

.case__nav button {
  text-align: left;
  font-size: calc(13px * var(--s));
  line-height: calc(24px * var(--s));
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s, transform 0.35s var(--soft);
}

.case__nav button:hover { color: rgba(255, 255, 255, 0.85); transform: translateX(3px); }
.case__nav button.is-current { color: #fff; font-weight: 600; }

.case__close {
  position: fixed;
  left: calc(var(--fx) + 1314px * var(--s));
  top: calc(var(--fy) + 79px * var(--s));
  width: calc(42px * var(--s));
  height: calc(42px * var(--s));
  opacity: 0;
}

.case.is-active .case__close { opacity: 1; transition-delay: 0.3s; }

/* ---------------------------------------------------------
   Toast (sticky-note style)
   --------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  z-index: 200;
  padding: 14px 26px 12px;
  background: #fbd166;
  color: #c0182d;
  font-family: "Caveat", cursive;
  font-size: 28px;
  line-height: 1;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(60, 40, 20, 0.25);
  opacity: 0;
  transform: translate(-50%, 160%) rotate(-3deg);
  transition: transform 0.6s var(--spring), opacity 0.3s var(--soft);
  pointer-events: none;
}

.toast.is-shown { opacity: 1; transform: translate(-50%, 0) rotate(-3deg); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Layer positions (from the Figma file, 1440 × 900 frame)
   --x/--y/--w/--h = rotated bounding box, --iw/--ih = the
   unrotated artwork, --r = its rotation, --clip = outline
   ========================================================= */
.monitor {
  --x: 81.00px;
  --y: -235.00px;
  --w: 1277.00px;
  --h: 462.00px;
  --iw: 1277.00px;
  --ih: 462.00px;
  --r: 0deg;
}

.tea {
  --x: 1190.00px;
  --y: 24.00px;
  --w: 287.00px;
  --h: 280.00px;
  --iw: 287.00px;
  --ih: 280.00px;
  --r: 0deg;
  --clip: 45.3% 99.8%, 23.3% 99.8%, 22.0% 99.5%, 19.9% 98.8%, 18.1% 97.9%, 16.6% 96.8%, 14.6% 95.2%, 13.1% 93.2%, 12.0% 91.6%, 11.7% 90.9%, 2.6% 66.1%, 1.7% 63.4%, 1.0% 60.9%, 0.7% 59.5%, 0.5% 58.6%, 0.0% 55.5%, 0.0% 42.1%, 0.5% 39.3%, 0.7% 38.4%, 1.2% 36.2%, 1.6% 35.0%, 2.8% 31.2%, 3.1% 30.4%, 3.8% 28.8%, 5.2% 25.7%, 6.8% 23.0%, 7.7% 21.6%, 8.0% 21.1%, 9.6% 18.9%, 11.5% 16.4%, 15.3% 12.5%, 17.4% 10.7%, 18.3% 10.0%, 20.9% 8.0%, 23.2% 6.6%, 25.1% 5.5%, 27.5% 4.3%, 29.1% 3.6%, 31.4% 2.7%, 33.4% 2.0%, 35.4% 1.4%, 36.1% 1.2%, 38.3% 0.7%, 41.3% 0.2%, 42.9% 0.0%, 52.3% 0.0%, 53.8% 0.2%, 56.8% 0.7%, 58.4% 1.1%, 59.8% 1.4%, 61.0% 1.8%, 64.6% 3.0%, 67.2% 4.1%, 68.6% 4.8%, 70.9% 6.1%, 72.5% 7.0%, 75.6% 9.1%, 76.3% 9.6%, 78.9% 11.8%, 84.0% 17.0%, 95.6% 32.0%, 99.8% 48.8%, 99.8% 55.0%, 99.5% 56.2%, 99.0% 57.9%, 87.8% 90.0%, 87.5% 90.7%, 86.9% 91.6%, 85.4% 93.2%, 84.3% 93.9%, 83.6% 94.3%, 82.6% 94.6%;
}

.pencil {
  --x: 58.00px;
  --y: 406.00px;
  --w: 190.67px;
  --h: 370.49px;
  --iw: 28.00px;
  --ih: 395.00px;
  --r: -24.73deg;
  --clip: 98.2% 0.6%, 98.2% 89.6%, 69.6% 97.7%, 60.7% 99.5%, 55.4% 99.9%, 42.9% 99.9%, 39.3% 99.7%, 35.7% 99.2%, 1.8% 90.1%, 0.0% 89.2%, 0.0% 75.4%, 1.8% 0.9%, 3.6% 0.5%, 5.4% 0.3%, 8.9% 0.0%, 89.3% 0.0%;
}

.greenbook {
  --x: -234.00px;
  --y: 475.00px;
  --w: 565.38px;
  --h: 567.49px;
  --iw: 389.30px;
  --ih: 413.31px;
  --r: -41.44deg;
  --clip: 33.6% 2.2%, 41.6% 1.1%, 42.0% 1.2%, 46.3% 3.0%, 90.2% 21.4%, 94.0% 23.0%, 94.7% 23.3%, 94.7% 23.6%, 94.6% 23.9%, 93.2% 27.0%, 82.9% 48.7%, 65.3% 86.0%, 60.6% 96.0%, 60.1% 97.0%, 34.7% 99.9%, 33.1% 99.9%, 31.8% 99.8%, 30.8% 99.6%, 29.3% 99.4%, 28.0% 99.2%, 26.4% 98.8%, 25.5% 98.5%, 23.6% 97.9%, 21.7% 97.2%, 20.8% 96.9%, 19.0% 96.0%, 17.8% 95.4%, 17.2% 95.0%, 16.4% 94.6%, 16.3% 94.4%, 2.1% 68.8%, 2.1% 68.1%, 2.4% 67.2%, 30.2% 8.5%, 32.9% 2.8%, 33.0% 2.5%, 33.2% 2.3%;
}

.pen {
  --x: 204.00px;
  --y: 498.00px;
  --w: 108.30px;
  --h: 335.85px;
  --iw: 28.00px;
  --ih: 339.00px;
  --r: -13.84deg;
  --clip: 98.2% 0.7%, 98.2% 73.5%, 96.4% 88.6%, 91.1% 90.6%, 64.3% 98.8%, 62.5% 99.3%, 60.7% 99.6%, 57.1% 99.9%, 46.4% 99.9%, 42.9% 99.6%, 41.1% 99.3%, 39.3% 98.8%, 7.1% 90.0%, 1.8% 75.1%, 0.0% 44.5%, 0.0% 2.7%, 1.8% 2.1%, 7.1% 0.7%, 10.7% 0.1%, 12.5% 0.0%, 94.6% 0.0%, 96.4% 0.3%;
}

.purplebook {
  --x: 1090.00px;
  --y: 450.00px;
  --w: 402.89px;
  --h: 469.24px;
  --iw: 282.27px;
  --ih: 395.41px;
  --r: 20.5deg;
  --clip: 0.0% 99.5%, 0.0% 0.5%, 0.2% 0.4%, 0.9% 0.0%, 94.3% 0.0%, 95.0% 0.1%, 96.1% 0.5%, 97.2% 1.1%, 98.8% 2.3%, 99.1% 2.7%, 99.3% 2.9%, 99.8% 4.2%, 99.8% 95.8%, 99.3% 97.0%, 98.9% 97.5%, 96.5% 99.2%, 95.9% 99.5%, 95.6% 99.6%, 95.0% 99.7%, 92.0% 99.9%, 0.9% 99.9%, 0.5% 99.7%;
}

.airpods {
  --x: 1162.00px;
  --y: 704.00px;
  --w: 196.66px;
  --h: 195.88px;
  --iw: 144.00px;
  --ih: 134.00px;
  --r: -41.81deg;
  --clip: 57.3% 99.6%, 55.9% 99.3%, 9.4% 74.3%, 8.0% 73.1%, 6.6% 71.6%, 5.9% 70.5%, 4.9% 68.3%, 4.5% 67.2%, 4.5% 61.9%, 5.2% 60.1%, 10.8% 48.1%, 21.9% 24.6%, 30.9% 5.6%, 32.6% 3.4%, 34.0% 2.2%, 35.4% 1.5%, 37.5% 0.7%, 42.0% 0.7%, 44.1% 1.5%, 83.7% 22.8%, 90.3% 26.5%, 91.7% 27.6%, 92.4% 28.4%, 93.4% 29.9%, 94.1% 31.3%, 94.4% 32.5%, 94.8% 34.0%, 94.8% 37.3%, 94.4% 39.2%, 84.0% 61.6%, 74.3% 82.1%, 68.4% 94.4%, 67.7% 95.5%, 65.6% 97.8%, 64.6% 98.5%, 63.9% 98.9%, 62.8% 99.3%, 61.5% 99.6%;
}

.bud1 {
  --x: 1140.00px;
  --y: 647.00px;
  --w: 96.33px;
  --h: 93.72px;
  --iw: 88.80px;
  --ih: 85.91px;
  --r: -5.28deg;
  --clip: 14.6% 69.8%, 65.7% 22.1%, 68.0% 20.3%, 71.3% 18.6%, 75.3% 18.6%, 77.5% 19.2%, 79.2% 19.8%, 84.8% 22.7%, 87.1% 24.4%, 89.3% 26.7%, 90.4% 28.5%, 91.0% 29.7%, 91.6% 31.4%, 92.1% 36.6%, 92.1% 39.0%, 91.6% 44.8%, 91.0% 47.7%, 89.3% 52.9%, 87.6% 56.4%, 86.5% 58.1%, 82.0% 62.8%, 79.8% 64.0%, 75.8% 65.7%, 62.4% 70.3%, 56.7% 72.1%, 41.0% 76.7%, 28.7% 80.2%, 26.4% 80.8%, 19.1% 82.6%, 18.0% 82.6%, 17.4% 81.4%, 15.7% 75.0%, 14.6% 70.3%;
}

.bud2 {
  --x: 1203.00px;
  --y: 650.00px;
  --w: 113.85px;
  --h: 115.38px;
  --iw: 88.80px;
  --ih: 85.91px;
  --r: -66.91deg;
  --clip: 14.6% 29.7%, 14.6% 29.1%, 15.7% 24.4%, 17.4% 18.0%, 18.0% 16.9%, 19.1% 16.9%, 26.4% 18.6%, 28.7% 19.2%, 41.0% 22.7%, 56.7% 27.3%, 62.4% 29.1%, 75.8% 33.7%, 79.8% 35.5%, 82.0% 36.6%, 86.5% 41.3%, 87.6% 43.0%, 89.3% 46.5%, 91.0% 51.7%, 91.6% 54.7%, 92.1% 60.5%, 92.1% 62.8%, 91.6% 68.0%, 91.0% 69.8%, 90.4% 70.9%, 89.3% 72.7%, 87.1% 75.0%, 84.8% 76.7%, 79.2% 79.7%, 77.5% 80.2%, 75.3% 80.8%, 71.3% 80.8%, 68.0% 79.1%, 65.7% 77.3%;
}

.glasses {
  --x: 887.00px;
  --y: 775.00px;
  --w: 332.57px;
  --h: 232.06px;
  --iw: 311.94px;
  --ih: 116.75px;
  --r: 23.65deg;
  --clip: 96.0% 9.4%, 99.7% 91.8%, 99.7% 94.8%, 99.5% 95.7%, 99.2% 96.6%, 98.6% 97.9%, 97.6% 98.7%, 97.0% 99.1%, 3.4% 99.1%, 2.6% 98.7%, 1.6% 97.9%, 0.8% 96.1%, 0.5% 94.4%, 0.5% 91.8%, 5.6% 10.3%, 5.9% 9.4%, 6.6% 8.6%, 8.0% 7.3%, 10.1% 6.0%, 13.0% 4.7%, 15.1% 3.9%, 16.5% 3.4%, 20.2% 2.6%, 22.3% 2.1%, 74.5% 1.7%, 79.5% 1.7%, 84.1% 2.1%, 87.7% 3.4%, 94.4% 6.9%, 94.9% 7.3%, 95.5% 8.2%;
}

.usb {
  --x: 112.00px;
  --y: 58.00px;
  --w: 114.62px;
  --h: 136.43px;
  --iw: 51.00px;
  --ih: 130.00px;
  --r: 33.75deg;
  --clip: 93.1% 22.3%, 93.1% 97.3%, 92.2% 97.7%, 90.2% 98.1%, 9.8% 98.1%, 7.8% 97.7%, 6.9% 96.9%, 2.0% 58.1%, 2.0% 46.5%, 6.9% 22.7%, 27.5% 2.7%, 28.4% 2.3%, 29.4% 2.3%, 76.5% 2.7%;
}

.clip1 {
  --x: 152.00px;
  --y: 175.00px;
  --w: 101.47px;
  --h: 104.97px;
  --iw: 84.00px;
  --ih: 62.99px;
  --r: -128.25deg;
  --clip: 8.9% 89.7%, 8.9% 17.5%, 9.5% 16.7%, 42.3% 16.7%, 82.7% 32.5%, 84.5% 34.1%, 86.3% 37.3%, 87.5% 40.5%, 88.1% 42.9%, 88.7% 50.8%, 88.7% 56.3%, 88.1% 65.1%, 86.9% 69.0%, 86.3% 70.6%, 84.5% 73.0%, 82.1% 75.4%, 42.3% 90.5%, 9.5% 90.5%;
}

.clip2 {
  --x: 87.64px;
  --y: 191.28px;
  --w: 84.20px;
  --h: 98.40px;
  --iw: 84.00px;
  --ih: 62.99px;
  --r: -106.44deg;
  --clip: 8.9% 89.7%, 8.9% 17.5%, 9.5% 16.7%, 42.3% 16.7%, 82.7% 32.5%, 84.5% 34.1%, 86.3% 37.3%, 87.5% 40.5%, 88.1% 42.9%, 88.7% 50.8%, 88.7% 56.3%, 88.1% 65.1%, 86.9% 69.0%, 86.3% 70.6%, 84.5% 73.0%, 82.1% 75.4%, 42.3% 90.5%, 9.5% 90.5%;
}

.clip3 {
  --x: 45.00px;
  --y: 733.00px;
  --w: 84.89px;
  --h: 99.05px;
  --iw: 84.00px;
  --ih: 61.91px;
  --r: -71.95deg;
  --clip: 8.9% 91.1%, 8.9% 17.7%, 9.5% 16.9%, 42.3% 16.9%, 82.7% 33.1%, 86.3% 37.9%, 86.9% 39.5%, 88.1% 43.5%, 88.7% 51.6%, 88.7% 57.3%, 88.1% 66.1%, 86.9% 70.2%, 86.3% 71.8%, 84.5% 74.2%, 82.1% 76.6%, 41.7% 92.7%, 14.3% 92.7%, 9.5% 91.9%;
}

.note__paper { --clip: 95.2% 25.1%, 85.8% 93.5%, 84.0% 93.5%, 70.4% 93.0%, 37.3% 91.7%, 17.6% 90.9%, 12.4% 90.7%, 7.0% 35.8%, 7.0% 35.5%, 13.5% 20.5%, 24.6% 13.0%, 72.9% 16.1%, 74.9% 16.8%, 80.6% 19.2%, 93.4% 24.4%; }

.obj--phone {
  --x: 763.00px;
  --y: 186.00px;
  --w: 348.16px;
  --h: 240.94px;
  --iw: 151.63px;
  --ih: 317.05px;
  --r: 72.28deg;
  --clip: 97.4% 8.2%, 97.4% 92.1%, 97.0% 93.2%, 96.7% 93.7%, 96.0% 94.5%, 95.0% 95.4%, 94.1% 96.1%, 93.1% 96.5%, 91.4% 97.2%, 89.4% 97.6%, 86.1% 98.1%, 83.8% 98.3%, 16.2% 98.3%, 14.5% 98.1%, 11.6% 97.6%, 9.9% 97.3%, 8.6% 97.0%, 5.9% 95.7%, 4.3% 94.3%, 3.0% 92.4%, 1.3% 35.3%, 1.3% 15.6%, 3.0% 8.2%, 3.6% 6.9%, 4.3% 6.0%, 5.3% 5.0%, 6.9% 3.9%, 9.2% 3.2%, 11.2% 2.7%, 12.9% 2.4%, 14.5% 2.2%, 18.2% 2.1%, 67.0% 1.6%, 81.2% 1.6%, 87.5% 2.4%, 89.4% 2.7%, 91.4% 3.2%, 93.4% 3.9%, 94.4% 4.4%, 97.0% 6.9%;
}

.obj--swatch {
  --x: 706.00px;
  --y: 429.00px;
  --w: 334.54px;
  --h: 304.28px;
  --iw: 237.35px;
  --ih: 280.98px;
  --r: 105.63deg;
  --clip: 90.5% 8.9%, 91.8% 88.8%, 91.8% 89.3%, 89.9% 95.6%, 66.7% 99.6%, 62.7% 97.5%, 59.6% 95.7%, 6.7% 29.4%, 5.3% 27.2%, 5.3% 27.0%, 5.7% 26.7%, 10.3% 23.8%, 28.6% 13.0%, 29.7% 12.5%, 57.7% 5.2%, 58.5% 5.0%, 59.2% 5.0%, 89.9% 6.6%;
}

.obj--folder {
  --x: 296.00px;
  --y: 388.37px;
  --w: 361.81px;
  --h: 329.40px;
  --iw: 305.87px;
  --ih: 260.51px;
  --r: 14.65deg;
  --clip: 5.7% 89.6%, 5.7% 9.2%, 6.0% 8.6%, 7.4% 7.1%, 7.8% 6.7%, 31.5% 6.7%, 91.0% 15.5%, 92.3% 16.1%, 93.0% 16.5%, 93.5% 16.9%, 93.6% 17.1%, 94.8% 18.6%, 95.1% 19.6%, 95.1% 89.8%, 94.4% 91.4%, 93.0% 93.1%, 92.2% 93.5%, 90.8% 93.9%, 10.1% 93.9%, 8.8% 93.5%, 8.0% 93.1%, 6.4% 91.2%;
}

.obj--camera {
  --x: 310.95px;
  --y: 183.00px;
  --w: 320.45px;
  --h: 246.22px;
  --iw: 293.04px;
  --ih: 204.50px;
  --r: -8.65deg;
  --clip: 4.8% 84.1%, 4.8% 26.4%, 5.5% 19.6%, 7.3% 16.4%, 7.8% 15.6%, 19.3% 9.3%, 37.7% 7.3%, 95.1% 7.3%, 95.4% 7.8%, 96.1% 26.4%, 96.1% 83.9%, 95.7% 89.0%, 95.4% 89.7%, 95.2% 90.0%, 94.2% 90.5%, 6.3% 90.5%, 5.6% 90.0%, 5.1% 89.2%, 4.9% 88.8%;
}

.obj--idcard {
  --x: 554.95px;
  --y: 325.00px;
  --w: 302.20px;
  --h: 253.69px;
  --iw: 284.47px;
  --ih: 231.53px;
  --r: 4.62deg;
  --clip: 20.0% 76.2%, 4.0% 61.1%, 1.2% 54.9%, 1.1% 54.4%, 1.1% 52.7%, 1.2% 51.8%, 19.0% 6.5%, 19.3% 5.8%, 20.0% 5.0%, 20.7% 4.8%, 21.6% 4.8%, 95.3% 20.3%, 95.6% 20.5%, 96.1% 21.0%, 96.7% 21.6%, 96.8% 22.2%, 96.8% 22.9%, 96.7% 75.2%, 95.6% 76.5%, 70.1% 94.8%, 68.4% 94.8%, 20.9% 76.7%, 20.4% 76.5%;
}

.obj--brand {
  --x: 952.00px;
  --y: 361.00px;
  --w: 178.92px;
  --h: 177.65px;
  --iw: 142.00px;
  --ih: 140.00px;
  --r: -18.39deg;
  --clip: 99.3% 99.3%, 1.1% 99.3%, 0.7% 98.9%, 0.7% 0.4%, 1.1% 0.0%, 99.6% 0.0%, 99.6% 98.9%;
}

.project--nextplay {
  --x: 145px;
  --y: 297px;
  --w: 372.5px;
  --h: 332px;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  top: var(--y);
}

.project--resipe {
  --x: 547.2px;
  --y: 297px;
  --w: 372.5px;
  --h: 332px;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  top: var(--y);
}

.project--mimy {
  --x: 949.4px;
  --y: 297px;
  --w: 372.5px;
  --h: 332px;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  top: var(--y);
}

/* case-study video (MIMY final product walkthrough) */
.cs-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #2b1a14;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* ---------- Other creative works: gallery ---------- */
.art-hero { min-height: 400px; }

.art-hero__art { pointer-events: none; }

.art-print {
  position: absolute;
  margin: 0;
  padding: 10px 10px 34px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.art-print img { display: block; width: 100%; height: auto; }
.art-print--a { left: 640px; top: 150px; width: 300px; rotate: -5deg; }
.art-print--b { left: 900px; top: 80px; width: 210px; rotate: 6deg; }

.art-grid {
  display: grid;
  gap: 20px;
  margin: 24px 0;
  align-items: start;
}

.art-grid--2 { grid-template-columns: repeat(2, 1fr); }
.art-grid--3 { grid-template-columns: repeat(3, 1fr); }
.art-grid--posters { grid-template-columns: 1.4fr 1fr 1fr; align-items: end; }

.art-item {
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f1ea;
  cursor: zoom-in;
  transition: transform 0.45s var(--spring), box-shadow 0.45s var(--soft);
}

.art-item img { display: block; width: 100%; height: auto; }

.art-item:hover,
.art-item:focus-visible {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.16);
  outline: none;
}

.art-split {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  align-items: center;
  margin: 24px 0;
}

.art-outline { columns: 2; column-gap: 40px; }
.art-outline li { break-inside: avoid; }

/* full-size viewer */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 56px 96px 72px;
  background: rgba(10, 10, 10, 0.88);
  opacity: 0;
  transition: opacity 0.3s var(--soft);
}

.lightbox.is-open { opacity: 1; }

.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 128px);
  border-radius: 8px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  transform: scale(0.96);
  transition: transform 0.45s var(--spring);
}

.lightbox.is-open img { transform: none; }

.lightbox__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  margin: 0;
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.25s, transform 0.35s var(--spring);
}

.lightbox__nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.08); }
.lightbox__prev { left: 24px; }
.lightbox__next { right: 24px; }

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 34px;
  height: 34px;
}

/* the viewer covers the page, so it must be truly gone while closed */
.lightbox[hidden] { display: none; }

/* back to the list, at the end of each project page */
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  padding: 14px 28px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  transition: transform 0.4s var(--spring), box-shadow 0.4s var(--soft);
}

.cs-back svg {
  width: 22px;
  height: 22px;
  transition: transform 0.4s var(--spring);
}

.cs-back:hover,
.cs-back:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  outline: none;
}

.cs-back:hover svg { transform: translateX(-5px); }

/* ---------- Pages laid out at their exact design coordinates ----------
   .cs-exact is the 1159px-wide white card; every .x sits at its measured x/y */
.cs-exact {
  position: relative;
  width: 1159px;
  margin: -64px calc(var(--pad) * -1) 0;
  overflow: hidden;
}

.cs-exact .x { position: absolute; margin: 0; }
.cs-exact img.x { max-width: none; }
.cs-exact .cs-h { margin: 0; white-space: nowrap; }
.cs-exact .cs-title { margin: 0; }
.cs-exact .cs-link { margin: 0; }
.cs-exact .cs-title--sm { font-size: 32px; line-height: 56px; }
.cs-exact .cs-title--app { font-size: 40px; line-height: 56px; }
.cs-exact .cs-sub { margin: 0; }
.cs-h--white { color: #fff; }
.cs-medium { font-weight: 500; }
.cs-ink { color: #000; }
.cs-mult { mix-blend-mode: multiply; }
.cs-framed { outline: 1px solid #808080; outline-offset: -1px; }
.cs-exact-video { object-fit: contain; background: #000; }
.cs-exact .cs-play { padding: 0; border: 0; background: none; cursor: pointer; }

.cs-tight { margin: 0; padding: 0 0 0 28px; list-style: none; }
.cs-tight li { position: relative; }
.cs-tight li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0.75em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* Next Play research keeps the Inter set in the design */
.cs-in { font-family: "Inter", system-ui, sans-serif; }
.cs-in--h { font-size: 20px; line-height: 21px; font-weight: 500; color: #000; }
.cs-in--time { font-size: 20px; line-height: 24px; text-align: center; }
.cs-usercard { border: 1.5px solid #980000; border-radius: 5px; }
.cs-bubble {
  width: 525px;
  height: 126px;
  background: #980000;
  border-radius: 10px;
  box-shadow: 10px -10px 0 #1e1e1e;
}
.cs-bubble::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 116px;
  width: 45px;
  height: 37px;
  background: #980000;
  clip-path: polygon(0 0, 100% 0, 12% 100%);
}
.cs-bubble__text {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 24.48px;
  line-height: 29.4px;
  font-weight: 600;
  color: #fff;
}
.cs-qmark {
  font: 700 72px/1 Georgia, serif;
  color: #980000;
}
.cs-reflect-box { border: 1.5px solid #980000; border-radius: 6px; }

.cs-stat {
  padding: 14px 18px;
  border: 1px solid #d4d4d4;
  border-radius: 12px;
}
.cs-stat p { margin: 0 !important; color: #414141; font-weight: 400; }

/* app screenshots run off the card's right edge and scroll sideways */
.cs-exact .cs-strip {
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 35px 8px;
  scroll-padding-inline: 35px;
}
.cs-strip img { flex: none; max-width: none; border-radius: 0; }

/* brand pages */
.cs-tag { text-align: center; font-size: 16px; line-height: 20px; font-weight: 300; color: #000; }
.cs-tag--lg { font-size: 20px; line-height: 24px; font-weight: 400; color: #000; }
.cs-swatch { width: 163px; height: 163px; }
.cs-spec { font-size: 16px; line-height: 24.3px; color: #000; white-space: nowrap; }
.cs-ab { font-size: 77.27px; line-height: 44px; font-weight: 700; color: #000; }
.cs-fontname { font-size: 38.63px; line-height: 44px; font-weight: 700; color: #000; white-space: nowrap; }
.cs-glyphs { font-size: 24.15px; line-height: 43px; color: #000; white-space: nowrap; }

/* bullet lists on the exact pages */
.cs-dots { margin: 0; padding: 0; list-style: none; }
.cs-dots li { position: relative; }
.cs-dots li::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.cs-refl-t { line-height: 27px; }
.cs-tight--re { padding-left: 30px; }
.cs-exact .cs-in--stage { font-size: 28px; font-weight: 600; }