@charset "UTF-8";
/* The blue/pink sculpted hero is the visual language of the whole portfolio. */
body {
  background:
    radial-gradient(ellipse 100vw 900px at 0 6%, #d2ebff 0, transparent 75%),
    radial-gradient(ellipse 95vw 900px at 100% 33%, #ffd6eb 0, transparent 75%),
    radial-gradient(ellipse 100vw 1100px at 0 68%, #c7e8ff 0, transparent 75%),
    linear-gradient(145deg, #f1f9ff, #fff1f8 55%, #e4f3ff);
}
.work-section, .more-section {
  padding: 66px 40px 76px;
  margin-bottom: 80px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 42px;
  background: linear-gradient(145deg, rgba(255,255,255,.91), rgba(214,237,255,.83) 60%, rgba(255,220,237,.8));
  box-shadow: inset 0 3px 6px #fff, 0 22px 48px rgba(74,140,204,.12);
}
.more-section { margin-top: 80px; background: linear-gradient(140deg, #fff6fb, #ffe0ef 62%, #dcefff); }
.about-section, .contact-section {
  width: min(1440px, calc(100% - 48px));
  margin-inline: auto;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 44px;
  box-shadow: inset 0 3px 7px rgba(255,255,255,.9), 0 24px 54px rgba(76,138,202,.13);
}
.about-section { background: radial-gradient(ellipse at 76% 12%, #fff5fc, transparent 43%), linear-gradient(145deg,#dbf1ff,#a9d8ff 61%,#f8d6ec); }
.contact-section { margin-bottom: 25px; background: radial-gradient(ellipse at 16% 12%,#fff9fc,transparent 40%),linear-gradient(140deg,#ffe4f2,#ffb9da 64%,#c6e7ff); }
.about-side img { border: 1px solid #fff; }
.more-list a { background: linear-gradient(145deg,#fff,#f5fbff); }
.contact-list > div { background: linear-gradient(145deg,#fff,rgba(255,255,255,.72)); }
.case-info, .case-assets, .case-outro {
  padding-inline: 34px;
  border: 1px solid #fff;
  border-radius: 36px;
  background: linear-gradient(145deg,rgba(255,255,255,.93),rgba(213,237,255,.8),rgba(255,229,242,.82));
  box-shadow: inset 0 2px 5px #fff,0 17px 36px rgba(70,135,200,.1);
  margin-bottom: 65px;
}
.case-story-item { background: linear-gradient(145deg,#fff,#edf7ff); }
.case-story-item:nth-child(2) { background: linear-gradient(145deg,#fff,#ffedf6); }
.case-outro { padding-top: 60px; padding-bottom: 60px; }

/* Transparent motion decoded from a single ordinary MP4 colour+alpha atlas. */
.hero-ip.hero-motion { width: 390px; height: 390px; right: -60px; bottom: -6px; }
.hero-motion .ip-motion-poster,
.hero-motion .ip-motion-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  animation: none; filter: none;
}
.hero-motion .ip-motion-canvas { opacity: 0; transition: opacity .18s ease; }
.hero-motion.is-ready .ip-motion-canvas { opacity: 1; }
.hero-motion.is-ready .ip-motion-poster { opacity: 0; }
.hero-motion .ip-motion-source { position: absolute; width: 1px; height: 1px; opacity: .001; left: 0; top: 0; pointer-events: none; }
.hero-motion::before { width: 225px; height: 27px; left: 80px; bottom: 12px; opacity: .66; }
.hero-motion::after { display: none; }
.hero-motion figcaption { bottom: -10px; right: 74px; }
.ip-motion-replay {
  position: absolute; right: 28px; bottom: 15px; z-index: 2;
  display: flex; align-items: center; gap: 5px; min-height: 34px;
  padding: 5px 12px; border: 1px solid #efadd0; border-radius: 999px;
  color: #714163; background: rgba(255,250,253,.95);
  box-shadow: 0 5px 12px rgba(211,102,157,.14);
  font-size: 11px; cursor: pointer; pointer-events: auto;
}
.ip-motion-replay:hover { background: #ffe1f0; }
.ip-motion-replay b { font-size: 17px; line-height: 1; font-weight: 500; }
.motion-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:1000px) {
  .hero-ip.hero-motion { width: 365px; height: 365px; right: -22px; }
}
@media(max-width:700px) {
  .work-section,.more-section { padding: 40px 20px 48px; border-radius: 29px; margin-bottom: 50px; }
  .more-section { margin-top: 50px; }
  .about-section,.contact-section { width: calc(100% - 24px); border-radius: 31px; }
  .about-layout { width: calc(100% - 36px); }
  .hero-ip.hero-motion { width: 276px; height: 276px; right: -13px; bottom: -5px; }
  .hero-motion::before { width: 165px; height: 21px; left: 58px; bottom: 9px; }
  .ip-motion-replay { right: 19px; bottom: 5px; font-size: 10px; min-height: 31px; padding: 4px 10px; }
  .case-info,.case-assets,.case-outro { padding-inline: 20px; border-radius: 28px; margin-bottom: 43px; }
}
@media(max-width:430px) {
  .hero-ip.hero-motion { width: 250px; height: 250px; right: -9px; }
  .hero-motion::before { width: 148px; left: 56px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-motion .ip-motion-canvas { transition: none; }
}