:root {
  --font-base:
    "Noto Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
  --color-text: #18181b;
  --color-muted: #52525b;
  --color-subtle: #71717a;
  --color-border: #e4e4e7;
  --color-accent: rgb(0, 88, 155);
  --space-page-x: 5vw;
  --header-z: 1100;
  --overlay-z: 1040;
  --drawer-z: 1080;
}

html {
  font-size: 100%;
}

body {
  padding: 0;
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  overflow-x: hidden;
  letter-spacing: -0.01em;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1.75;
  color: #222;
}

h1 {
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.75rem);
}

h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin-bottom: 2rem;
}

h3 {
  font-size: 2rem;
  padding-bottom: 1.25rem;
}

h4 {
  font-size: 1.4rem;
  padding-bottom: 1.25rem;
}

a {
  text-decoration: none;
  cursor: pointer;
}

p {
  font-weight: 400;
}

strong {
  color: rgb(0, 88, 155);
}

.container {
  padding-left: var(--space-page-x);
  padding-right: var(--space-page-x);
}

.p-bottom {
  padding-bottom: 7rem;
}

.p-top {
  padding-top: 5rem;
}
.p-bottom-content {
  padding-bottom: 2rem;
}
.is-relative {
  position: relative;
}

.is-absolute {
  position: absolute;
}

.is-white {
  color: white;
}

.is-Tpadding {
  padding-top: 5rem;
}

.is-Bpadding {
  padding-bottom: 5rem;
}

.is-flex {
  display: flex;
}

.box-shadow {
  box-shadow: rgba(0, 0, 0, 0.301) 0rem 0.1875rem 0.5rem;
}

#wrapper {
  width: 100%;
}

.p-side {
  padding-right: 3.125rem;
}

/* Loading */

#loading-screen {
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: #fff;
  overflow: hidden;
}

#loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

#portfolio.is-ready {
  animation: portfolioFadeIn 0.5s ease-out both;
}

@keyframes portfolioFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#loading-screen #container {
  position: relative;
  transform: scale(0.725);
}

.divider {
  position: absolute;
  z-index: 2;
  top: 4.0625rem;
  left: 12.5rem;
  width: 3.125rem;
  height: 0.9375rem;
  background: #fff;
}

.loading-text {
  position: relative;
  font-size: 3.65rem;
  font-weight: 400;
  margin: 0;
  white-space: nowrap;
}

.loading-text::before {
  position: absolute;
  content: "";
  z-index: 1;
  top: 2.5rem;
  left: 7.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  background: #000;
  border-radius: 50%;
  animation: dotMove 1.8s cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
  box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.3);
}

/* Dot trail effect */
.loading-text::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2.5rem;
  left: 7.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: #00589b;
  animation: dotTrail 1.8s cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
}

.letter {
  display: inline-block;
  position: relative;
  color: #000;
  letter-spacing: 0.5rem;
  font-weight: 300;
}

.letter:nth-child(1) {
  transform-origin: 100% 70%;
  transform: scale(1, 1.275);
}

.letter:nth-child(1)::before {
  position: absolute;
  content: "";
  top: 1.375rem;
  left: 0;
  width: 0.875rem;
  height: 2.25rem;
  background: #fff;
  transform-origin: 100% 0;
  animation: lineStretch 1.8s cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
}

.letter:nth-child(5) {
  transform-origin: 100% 70%;
  animation: letterStretch 1.8s cubic-bezier(0.25, 0.23, 0.73, 0.75) infinite;
}

.letter:nth-child(5)::before {
  position: absolute;
  content: "";
  top: 0.9375rem;
  left: 0.125rem;
  width: 0.5625rem;
  height: 0.9375rem;
  background: #fff;
}

.welcome {
  text-align: center;
  line-height: 1.5;
}

@keyframes dotMove {
  0%,
  100% {
    transform: rotate(180deg) translate(-6.875rem, -0.625rem) rotate(-180deg);
  }
  50% {
    transform: rotate(0deg) translate(-6.9375rem, 0.625rem) rotate(0deg);
  }
}

@keyframes dotTrail {
  0% {
    transform: rotate(180deg) translate(-6.875rem, -0.625rem) rotate(-180deg);
    opacity: 0.5;
    width: 0.375rem;
    height: 0.375rem;
  }
  50% {
    transform: rotate(0deg) translate(-6.9375rem, 0.625rem) rotate(0deg);
    opacity: 0.1;
    width: 0.625rem;
    height: 0.625rem;
  }
  100% {
    transform: rotate(180deg) translate(-6.875rem, -0.625rem) rotate(-180deg);
    opacity: 0;
    width: 0.875rem;
    height: 0.875rem;
  }
}

@keyframes letterStretch {
  0%,
  100% {
    transform: scale(1, 0.35);
    transform-origin: 100% 75%;
  }
  8%,
  28% {
    transform: scale(1, 2.125);
    transform-origin: 100% 67%;
  }
  37% {
    transform: scale(1, 0.875);
    transform-origin: 100% 75%;
  }
  46% {
    transform: scale(1, 1.03);
    transform-origin: 100% 75%;
  }
  50%,
  97% {
    transform: scale(1);
    transform-origin: 100% 75%;
  }
}

@keyframes lineStretch {
  0%,
  45%,
  70%,
  100% {
    transform: scaleY(0.125);
  }
  49% {
    transform: scaleY(0.75);
  }
  50% {
    transform: scaleY(0.875);
  }
  53% {
    transform: scaleY(0.5);
  }
  60% {
    transform: scaleY(0);
  }
  68% {
    transform: scaleY(0.18);
  }
}

/* Navigation */

#header {
  border-bottom: 0.125rem solid #1a1a1a;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--header-z);
  transition: 0.25s ease-in;
  box-shadow: 0 0.625rem 0.875rem #4469f324;
  background-color: white;
}

.navigation {
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 5px 0px !important;
}

.brand {
  max-width: 3.125rem;
  display: flex;
  padding: 0.3125rem;
}

.brand img {
  width: 100%;
  max-width: 100%;
}

.nav-container {
  display: flex;
  align-items: center;
  min-height: 5rem;
  transition: 0.15s ease-in;
  position: relative;
  gap: 1rem;
}

.site-nav {
  margin-left: auto;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-list a {
  display: block;
  padding: 0.75rem 1rem;
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  background: #494949;
  color: #ffffff;
  transform: translateY(-0.0625rem);
}

.nav-list a[aria-current="page"] {
  background: #1a1a1a;
  color: #fff;
}

#nav-toggle {
  display: none;
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0;
  position: relative;
  z-index: var(--header-z);
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease;
}

#nav-toggle:hover,
#nav-toggle:focus-visible {
  background-color: rgba(0, 0, 0, 0.06);
}

.nav-toggle-icon {
  display: block;
  position: relative;
  width: 1.5rem;
  height: 1rem;
}

.nav-toggle-bar {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background: #1a1a1a;
  border-radius: 99rem;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    top 0.25s ease;
  transform-origin: center;
}

.nav-toggle-bar--top {
  top: 0;
}

.nav-toggle-bar--middle {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle-bar--bottom {
  top: calc(100% - 0.125rem);
}

.is-nav-open .nav-toggle-bar--top {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.is-nav-open .nav-toggle-bar--middle {
  opacity: 0;
}

.is-nav-open .nav-toggle-bar--bottom {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 16, 16, 0.42);
  backdrop-filter: blur(0.125rem);
  z-index: var(--overlay-z);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.nav-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Introduction */

.introduction h1 {
  font-size: 5.5rem;
  letter-spacing: -0.05em;
}

.introduction {
  text-align: center;
  text-align: center;
  min-height: 72vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-eyebrow,
.section-kicker {
  color: var(--color-accent);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.introduction p {
  font-size: 1.5rem;
  max-width: 850px;
  margin: 0 auto;
  color: #52525b;
}

.intro-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 2rem;
}

.intro-actions a {
  box-sizing: border-box;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.875rem 1.125rem;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.intro-actions a:first-child,
.intro-actions a:hover,
.intro-actions a:focus-visible {
  background: #1a1a1a;
  color: #fff;
  transform: translateY(-0.125rem);
}

.intro-actions a:first-child:hover,
.intro-actions a:first-child:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Image gallery  */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  justify-items: center;
  /* grid-gap: 1.25rem 1.25rem; */
}

.grid img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  justify-items: center;
  grid-gap: 1.25rem 1.25rem;
  padding-top: 1.25rem;
}

.grid-2 img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.image-container {
  position: relative;
}

.grid-works img {
  margin: 0 auto;
  display: block;
  width: 100%;
  object-fit: cover;
}

iframe {
  max-width: 100% !important;
}

#my-work .grid {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  padding-bottom: 5rem;
}

#my-work .image-container {
  width: calc(33.333% - 1.25rem);
  padding: 0.625rem;
}

#my-work .img-content {
  width: 100%;
  background: #f4f4f5;
  box-shadow: 0 0.75rem 1.75rem rgba(24, 24, 27, 0.08);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

#my-work .img-content img,
#my-work .img-content video {
  display: block;
  width: 100%;
  height: auto;
}

#my-work .img-content:hover,
#my-work .img-content:focus-within {
  box-shadow: 0 1rem 2.25rem rgba(24, 24, 27, 0.14);
  transform: translateY(-0.25rem);
}

#my-work .work-card-display-ads {
  aspect-ratio: 4 / 3;
}

#my-work .work-card-display-ads a {
  display: block;
  height: 100%;
}

#my-work .work-card-display-ads img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* gallery image */

.scroll-reveal strong {
  color: #1a1a1a4a;
  font-weight: 600;
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image: linear-gradient(90deg, #017fe0, #a2d7ff);
  animation: scroll-reveal linear forwards;
  animation-timeline: view(y);
}

.scroll-reveal strong {
  animation-range-start: contain 65vh;
  animation-range-end: contain 75vh;
}

@keyframes scroll-reveal {
  to {
    background-size: 100% 100%;
  }
}

#portfolio .scroll {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 1.875rem 0rem 3.125rem 0;
}

.scroll-down {
  transform: translateY(0%) rotate(45deg);
  width: 1em;
  height: 1em;
  background-color: transparent;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: rgb(139, 139, 139);
  animation: scrolldown 1.2s ease-in-out infinite 0.15s;
  opacity: 0;
  margin: 0 auto;
}

.scroll-down-01 {
  animation: scrolldown 1.2s ease-in-out infinite;
}

@keyframes scrolldown {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
}
/* gallery image */

.image-container .title {
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 0.625rem;
}

.img-content {
  position: relative;
  overflow: hidden;
}

.img-content {
  position: relative;
  overflow: hidden;
}

.img-content .content-overlay {
  background: rgba(255, 255, 255, 50%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: absolute;
  transform: translate(-50%, -50%);
  height: 90%;
  width: 90%;
  top: 50%;
  left: 50%;
  transition: all 0.4s ease-in-out 0s;
  opacity: 0;
  z-index: 2;
}

.img-content:hover .content-overlay {
  opacity: 1;
}

.img-content:hover .content-overlay {
  opacity: 1;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease-in-out 0s;
  z-index: 3;
}

.img-content:hover .content-details {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3 {
  color: rgb(0, 0, 0);
  font-size: 1.25rem;

  padding-bottom: 1.25rem;
  text-transform: uppercase;
}

.content-details p {
  color: rgb(0, 0, 0);
  font-size: 1rem;
}

.content-details .content-text {
  padding-bottom: 0.3125rem;
}

#my-work {
  max-width: 68.75rem;
  margin: 0 auto;
}

.work-intro {
  margin-bottom: 1.5rem;
}

.work-intro h2 {
  max-width: 13ch;
  margin-bottom: 0;
}

/* productdesign */
.product-advertisement,
.display_ads,
.banner-showcase {
  max-width: 68.75rem;
  margin: 0 auto;
}

.display-ads-page,
.display-ads-page #wrapper {
  background: #fff;
}

.display_ads div {
  display: flex !important;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: auto;
}

.display_ads div iframe {
  padding: 1.25rem;
}

.banner-showcase .display-ads-back {
  padding: 1rem 0 1rem 0;
}

.banner-showcase .intro-img img {
  display: block;
  width: 100%;
}

.display-ads-meta {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.display-ads-meta .display-ads-meta-title {
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.display-ads-meta ul {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.display-ads-meta li {
  color: rgb(0, 88, 155);
  font-size: 1.0625rem;
  line-height: 1.625;
}

.display-ads-content {
  padding-top: 5rem;
  padding-bottom: 7rem;
}

.display-ads-page .intro-project.js-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ad-campaign {
  padding-bottom: 5rem;
}

.ad-campaign + .ad-campaign {
  border-top: 0.0625rem solid var(--color-border);
  padding-top: 4rem;
}

.ad-campaign-heading {
  margin-bottom: 2rem;
}

.ad-campaign-heading h3 {
  padding-bottom: 0;
}

.ad-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.ad-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 1rem;
  background: #fff;
  border: 0.0625rem solid var(--color-border);
  border-radius: 0.375rem;
}

.ad-frame {
  max-width: 100%;
  overflow-x: auto;
}

.ad-frame iframe {
  display: block;
  width: calc(var(--ad-width) * 1px);
  height: calc(var(--ad-height) * 1px);
  max-width: none !important;
  margin: 0 auto;
  background: #fff;
  border: 0;
}

.ad-card figcaption {
  color: var(--color-subtle);
  font-size: 0.875rem;
  line-height: 1.4;
}

.intro-img img {
  max-width: 100%;
  margin: 0 auto;
  height: auto;
}

.description-col-1 {
  flex: 0 70%;
  max-width: 100%;
  margin-right: 5rem;
}

.description-col-2 {
  flex: 0 30%;
  max-width: 100%;
  margin-left: 0;
}

.description-col-1 p {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.625;
}

.description-col-2 p {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.625;
  color: rgb(0, 88, 155);
}

.project-content p,
.description-col-1 p,
.work-details ul {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #52525b;
  max-width: 70ch;
  line-height: 1.825;
}

.project-content p {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.825;
  color: #52525b;
}

.pd-bottom {
  padding-bottom: 1rem;
}

.work-details {
  padding-bottom: 1.5rem;
}

.datavisor img {
  box-shadow: rgba(0, 0, 0, 0.301) 0rem 0.1875rem 0.5rem;
}

.datavisor-website-gallery {
  display: grid;
  gap: 1.25rem;
}

.datavisor-website-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.datavisor-website-shot img {
  display: block;
  width: 100%;
}

.demo-product video {
  box-shadow: rgba(0, 0, 0, 0.301) 0rem 0.1875rem 0.5rem;
}

.work-details strong {
  font-weight: 500;
  color: #1a1a1a;
}

.demo-product {
  display: flex;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
}

.demo-image {
  width: calc(33.333% - 1.25rem);
  padding: 0.625rem;
}

.project-images {
  display: flex;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, 1fr);
}

.demo-image.gif {
  width: calc(40% - 1.25rem);
}

.demo-image.mockup {
  width: calc(60% - 1.25rem);
}

.demo-image.gif p {
  font-size: 0.8rem;
  font-style: italic;
}

.project-images.vera .mock {
  width: calc(50% - 1.25rem);
}

.project-images.vera .gif {
  width: calc(50% - 1.25rem);
}

.intro-project {
  padding: 3.125rem 0;
  background: #eeeeee99;
}

.project-highlights,
.project-impact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1.2rem;
}

.project-highlights li,
.project-impact li {
  color: #52525b;
  line-height: 1.8;
  font-weight: 400;
}

.project-highlights strong,
.project-impact strong {
  color: #18181b;
  font-weight: 600;
}

.img-bottom {
  padding-bottom: 3rem;
}

#mamamia .mamamia-image-container {
  display: flex;
  width: auto;
  justify-content: flex-start;
  margin: 0 -0.9375rem;
}

#mamamia .mamamia-image-container img {
  flex-basis: calc(33.33% - 1.875rem);
  width: calc(33.33% - 1.875rem);
  margin: 0.9375rem;
}

#mamamia .video {
  width: 100%;
}

#mamamia .short-story {
  display: flex !important;
}

#mamamia .short-story .img-bottom {
  width: 35%;
  margin: 0 auto;
}

#mamamia .short-story .img-bottom iframe {
  height: 34.375rem;
}

#mamamia .mama-site {
  padding-top: 0.9375rem;
  display: flex;
}

.about .button {
  align-items: center;
  background-color: #fff;
  border: 0.125rem solid #000;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  fill: #000;
  font-size: 1rem;
  height: 3rem;
  justify-content: center;
  line-height: 1.5rem;
  min-width: 8.75rem;
  outline: 0;
  padding: 0 1.25rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.4s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 2.5rem;
}

.about .button:hover {
  background-color: #494949;
  border: 0.125rem solid #494949;
  color: white;
}
.about .button-1 {
  margin-right: 1.2rem;
}

/* about */

/* Container for Polaroid */
.polaroid {
  position: relative;
  background: #fff;
  padding: 1rem 1rem 3rem;
  border: 0.125rem solid #eee;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  text-align: center;
  margin: 1.25rem auto;
  transform: rotate(-2deg); /* Slight tilt for a Polaroid effect */
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  cursor: pointer;
}

/* Image within the Polaroid */
.polaroid-img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  object-fit: cover;
  filter: grayscale(50%);
  transition: filter 0.3s;
  padding-bottom: 1.25rem;
}

/* Caption for the Polaroid */
.caption {
  font-family: var(--font-base);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #555;
  margin-top: 0.625rem;
}

/* Hover effect */
.polaroid:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.4);
}

.polaroid:hover .polaroid-img {
  filter: grayscale(0%);
}

.about {
  padding-top: 6.25rem;
  padding-bottom: 3.125rem;
  max-width: 68.75rem;
  margin: 0 auto;
}
.about p {
  padding-bottom: 1.2vw;
  line-height: 1.8;
}
.about-col-1 {
  flex: 40%;
  max-width: 100%;
  margin-right: 5rem;
  text-align: right;
}

.about-col-2 {
  flex: 50%;
  max-width: 100%;
  height: auto;
}

.about a {
  color: rgb(0, 88, 155);
}
/* Privacy Policy */
.privacy p {
  line-height: 1.3rem;
}

.privacy strong {
  color: #1a1a1a;
}

.privacy a {
  text-decoration: none;
  color: rgb(0, 88, 155);
}

.privacy h1 {
  font-size: 2.8125rem;

  padding-bottom: 0.625rem;
}

.privacy h2 {
  font-size: 2.1875rem;
  padding-bottom: 0.625rem;
}

.privacy h3 {
  font-size: 1.5625rem;
  padding-bottom: 0rem;
}

.privacy li {
  padding-bottom: 0.3125rem;
}
/* footer */

.footer {
  padding-top: 5rem;
  padding-bottom: 1.875rem;
  max-width: 68.75rem;
  margin: 0 auto;
}

.f-container {
  max-width: 68.75rem;
  padding-left: 5vw;
  padding-right: 5vw;
}

.footer img {
  max-width: 3%;
  padding-bottom: 0.625rem;
  padding-right: 0.625rem;
}

.footer a {
  text-decoration: none;
  color: rgb(91 91 91);
}

.footer p {
  color: #494949;
}

#page-top {
  position: fixed;
  right: 5vw;
  bottom: 3.125rem;
  height: 1.875rem;
  text-decoration: none;
  transform: rotate(90deg);
  font-size: 90%;
  line-height: 1.5rem;
  color: #49494982;
  padding: 0 0 0 2.1875rem;
  border-top: solid 0.0625rem;
  transition: 0.3s ease-in;
}

#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -0.0625rem;
  left: 0rem;
  width: 0.9375rem;
  border-top: solid 0.0625rem;
  transform: rotate(35deg);
  transform-origin: left top;
}

#page-top:hover {
  color: #494949;
}

.mama-site h3 {
  font-size: 1.25rem;
}
.mama-site {
  color: #494949;
  transition: 0.3s ease-in;
}
.mama-site:hover {
  color: rgb(0, 88, 155);
}
.mama-site strong {
  color: #1a1a1a;
  padding-right: 0.625rem;
}

.banner-container iframe {
  height: auto;
}

.banner-container .banner-long {
  margin: 0 auto;
  display: flex;
  height: auto;
}

.banner-container .banner-short,
.banner-container .banner-middle {
  display: none;
  margin: 0 auto;
  height: auto;
  min-height: 16.875rem;
}

.footer p:hover {
  color: #c2c2c2;
}
.footer img:hover {
  opacity: 0.7;
}
.footer p,
.footer img {
  transition: 0.3s ease-in;
}

/* Ecotrend */
#ecotrend iframe {
  aspect-ratio: 16 / 9;
  width: 100% !important;
  height: auto;
}

#ecotrend .grid-works a,
.display_ads a,
.banner-showcase a,
#mamamia .project-content a {
  color: rgb(0, 88, 155);
  font-weight: 600;
  text-decoration: underline;
}

#mamamia .project-content a strong {
  text-decoration: white underline;
}

#ecotrend .grid-works a:hover,
.display_ads a:hover,
.banner-showcase a:hover {
  color: rgb(23, 135, 220);
}

.music-video iframe {
  aspect-ratio: 16 / 9;
  width: 100% !important;
  height: auto;
}

/* fade - in */

.fade-in,
.js-reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.fade-in-up {
  transform: translate3d(0, 1.5rem, 0);
}

.scroll-in,
.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.stagger-item {
  transition-delay: calc(var(--stagger-index, 0) * 60ms);
}

.img-content img,
.img-content video {
  transition:
    transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1),
    filter 0.6s ease;
  will-change: transform;
}

.img-content:hover img,
.img-content:hover video {
  transform: scale(1.02);
}

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

  .img-content:hover img,
  .img-content:hover video {
    transform: none;
  }
}

@media only screen and (max-width: 62.5rem) {
  .p-bottom {
    padding-bottom: 4rem;
  }
  #my-work {
    padding: 0 0.9375rem;
  }

  #my-work .image-container {
    width: calc(50% - 1.25rem);
    padding: 0.625rem;
  }

  .footer {
    padding: 1.25rem 0.9375rem;
  }

  h1 {
    font-size: 1.875rem;
  }

  .introduction p {
    font-size: 1.125rem;
    padding: 2.5rem 0;
  }

  .container {
    padding: 0 1.25rem;
  }

  .p-side {
    padding-right: 0rem;
  }

  .nav-container {
    padding: 0 1.25rem;
  }

  #nav-toggle {
    display: flex;
  }

  #header .site-nav {
    background-color: rgb(255, 255, 255);
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    width: min(82vw, 23rem);
    z-index: var(--drawer-z);
    transform: translateX(100%);
    opacity: 0;
    transition:
      transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.2s ease;
    box-shadow: -0.25rem 0 1.75rem rgba(0, 0, 0, 0.12);
    padding-top: 6rem;
    margin-left: 0;
    visibility: hidden;
    pointer-events: none;
  }

  #header.is-nav-open .site-nav {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: stretch;
    padding-inline: 1.2rem;
  }

  .nav-list a {
    padding: 1rem 1.2rem;

    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* about */
  .about .is-flex {
    display: block;
    margin: 0 auto;
  }

  .about-col-1 {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 1.875rem 0;
    max-width: 50%;
  }
  .about-col-2 {
    margin: 0 auto;
  }

  .polaroid {
    padding: 1rem 1rem 3rem;
  }
  .polaroid-img {
    filter: grayscale(0%);
  }

  #page-top {
    right: 0;
  }

  .container {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .banner-small-container {
    display: flex;
  }

  .banner-container .banner-short,
  .banner-container .banner-middle {
    display: flex;
  }

  .banner-container .banner-long {
    display: none;
  }

  .about .button {
    min-width: 9.375rem;
  }

  /* grid */
  .grid-works {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: start;
    justify-items: center;
  }

  .intro-img img {
    max-width: 100%;
  }
  #mamamia .short-story {
    flex-direction: column;
  }

  #mamamia .short-story .img-bottom {
    width: 50%;
  }
}

@media only screen and (max-width: 43.75rem) {
  .introduction {
    min-height: 68vh;
  }

  .introduction h1 {
    font-size: 3rem;
  }

  .intro-eyebrow {
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .introduction p {
    font-size: 1.125rem;
    max-width: 18rem;
  }

  .intro-actions {
    align-items: stretch;
    flex-direction: column;
    margin: 0 auto;
    max-width: 18rem;
  }

  .work-intro h2 {
    font-size: 2rem;
    max-width: 100%;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  #my-work .image-container {
    width: 100%;
    padding: 0.625rem 0.3125rem;
  }

  .about-col-1 .about-img {
    max-width: 100%;
  }
  .scroll-reveal strong {
    animation-range-start: contain 80vh;
    animation-range-end: contain 90vh;
  }

  #mamamia .mamamia-image-container {
    margin: 0 -0.3125rem;
  }

  #mamamia .is-flex {
    display: block;
  }

  #mamamia .mamamia-image-container img {
    margin: 0.3125rem;
    flex-basis: calc(33.33% - 0.625rem);
    width: calc(33.33% - 0.625rem);
  }

  .banner-container .banner-short {
    display: none;
  }

  .banner-container .banner-middle {
    margin: 0 auto;
  }
  .description-col-1 p {
    font-size: 1rem;
  }

  .description-col-2 p {
    font-size: 1rem;
  }
  .mama-site h3 {
    font-size: 1.25rem;
  }

  .about-col-1 {
    max-width: 80%;
  }

  .display-ads-content {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .ad-campaign {
    padding-bottom: 3.5rem;
  }

  .ad-campaign + .ad-campaign {
    padding-top: 3rem;
  }

  .ad-grid {
    gap: 1.25rem;
  }

  .ad-card {
    width: 100%;
    padding: 0.875rem;
  }
}

/* For smartphone */

@media only screen and (max-width: 31.25rem) {
  /* navigation */

  .content-details h3 {
    font-size: 1.25rem;
  }

  .nav-container {
    padding-left: 5vw;
    padding-right: 5vw;
    min-height: 5rem;
  }

  .brand {
    max-width: 2.5rem;
  }

  .scroll-reveal strong {
    animation-range-start: contain 65vh;
    animation-range-end: contain 80vh;
  }

  /* Introduction */
  .introduction p {
    font-size: 1.0625rem;
    line-height: 1.7;
    padding: 2.5rem 0.625rem;
    letter-spacing: 0.0625rem;
  }

  .intro-img img {
    max-width: 100%;
    margin: 0 auto;
  }

  .nav-container {
    padding: 0 1.25rem;
  }

  /* Product Design */

  .grid-works img {
    width: 100%;
  }

  .is-flex {
    display: block;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5625rem;
    letter-spacing: 0.0625rem;
    font-weight: 400;
    padding-bottom: 1.25rem;
  }

  .p-bottom {
    padding-bottom: 2rem;
  }

  .is-Tpadding {
    padding-top: 2rem;
  }

  .project-content h3 {
    font-size: 1.55rem;
    padding: initial;
    font-weight: 400;
  }

  .project-content h4 {
    font-size: 1.25rem;
  }

  .project-images {
    flex-direction: column;
    width: 100%;
  }
  .demo-image,
  .demo-image.mockup,
  .demo-image.gif,
  .project-images.vera .mock,
  .project-images.vera .gif {
    width: 100%;
    padding: 15px 0 0 0;
  }

  .datavisor-website-gallery,
  .datavisor-website-row {
    gap: 0.9375rem;
  }

  .datavisor-website-row {
    grid-template-columns: 1fr;
  }

  .mama-site {
    font-size: 1.125rem;
    padding-top: 0rem;
  }

  #mamamia .short-story .img-bottom {
    width: 80%;
  }

  .project-content p,
  .project-highlights li {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
  }

  .intro-img img {
    max-width: 100%;
    height: auto;
  }

  .intro-project {
    padding: 2.5rem 0;
    background-color: #f3f3f3;
  }

  .intro-project .description {
    font-size: 0.9375rem;
    padding-bottom: 1.25rem;
  }

  .description-col-1 {
    margin: initial;
  }

  .description-col-2 p {
    font-size: 0.875rem;
  }

  .project-content p {
    padding-top: 0.625rem;
    text-align: left;
  }

  .border {
    border: 0.125rem solid rgb(126, 126, 126);
  }

  /* .project-content img {
    padding-bottom: 1.875rem;
  } */

  .underline {
    margin: 0.625rem 0;
  }

  .intro-image {
    max-width: 100%;
  }

  #mama-site .description-col-1 h3 {
    font-size: 0.9375rem;
  }

  /* about  */
  .about {
    margin: 0 auto;
    padding-bottom: 0rem;
  }
  .about-col-1 {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2.5rem;
  }

  .about .about-col-1 img {
    width: 100%;
  }

  .about-col-2 {
    max-width: 100%;
    height: auto;
    margin-right: 0rem;
  }

  .about-col-2 p {
    font-size: 0.875rem;
    padding-bottom: 0.9375rem;
  }

  .about {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
  }

  .about .button {
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
  }

  /* privacy policy */
  .privacy h1 {
    font-size: 2.1875rem;
    padding-bottom: 0.625rem;
  }

  .privacy h2 {
    font-size: 1.875rem;
    padding-bottom: 0.625rem;
  }

  .privacy h3 {
    font-size: 1.25rem;
    padding-bottom: 0rem;
  }

  .privacy li {
    padding-bottom: 0.3125rem;
  }

  /* footer */
  .footer img {
    max-width: 7%;
    padding-bottom: 1.25rem;
    padding-right: 0.625rem;
  }
  .footer p {
    font-size: 0.75rem;
  }

  #page-top {
    bottom: 4.0625rem;
  }
}