.section-heading {
  width: var(--container);
  margin: 0 auto clamp(42px, 5vw, 76px);
}

.section-heading h2,
#capability h2,
.contact-copy h2 {
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.1vw, 5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .98;
}

.section-heading .eyebrow {
  margin-bottom: 18px;
}

.banner_index {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: calc(var(--header-height) + 30px) clamp(24px, 4.2vw, 72px) 64px;
  background: var(--color-paper);
  overflow: hidden;
}

.hero-awakening__backdrop,
.hero-awakening__frame {
  position: absolute;
  top: calc(var(--header-height) + 30px);
  right: clamp(24px, 4.2vw, 72px);
  bottom: 64px;
  left: clamp(24px, 8.5vw, 150px);
}

.hero-awakening__backdrop {
  z-index: -1;
  background: var(--color-red);
  transform: translate(16px, -8px) rotate(-1.8deg);
  transform-origin: left center;
}

.hero-awakening__frame {
  z-index: 1;
  overflow: hidden;
  background: #f3f2f2;
  box-shadow: 0 30px 80px rgba(23, 23, 23, .12);
}

.hero-artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-copy {
  position: absolute;
  top: 48%;
  left: clamp(210px, 29vw, 520px);
  z-index: 3;
  width: min(510px, 39vw);
  transform: translateY(-48%);
  text-shadow: 0 1px 26px rgba(255, 255, 255, .98);
}

.hero-copy h1 {
  margin: 12px 0 22px;
  color: var(--color-black);
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 6vw, 6.8rem);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .9;
}

.hero-title-line {
  display: block;
  position: relative;
  width: fit-content;
  overflow: hidden;
}

.hero-title-line__inner {
  display: block;
}

.hero-title-line::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-red);
  opacity: 0;
  pointer-events: none;
}

.hero-description {
  max-width: 31rem;
  color: #4c4c4c;
  font-size: clamp(.95rem, 1.12vw, 1.08rem);
  font-weight: 500;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-actions .btn-secondary {
  border-color: var(--color-black);
  color: var(--color-black);
}

.hero-actions .btn-secondary:hover {
  border-color: var(--color-red);
  color: var(--color-white);
}

/* React Bits Magnet visual-layer adapter.
   Source: https://github.com/DavidHDev/react-bits @ 3ba27d8037a1e51e93864a7609eb48b623bcdf30 */
[data-effect="magnet"] .motion-magnet__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.btn_1[data-effect="magnet"]:hover {
  transform: none;
}

.scroll_area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 4%;
  bottom: 2.5%;
  z-index: 4;
  min-width: 218px;
  min-height: 84px;
  padding: 18px 28px;
  border: 0;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .08em;
}

.scroll_area::before {
  content: "";
  width: 1px;
  height: 40px;
  margin-right: 24px;
  background: var(--color-white);
}

/* Dependency-free Awakening-style hero entrance. The no-JS/default state is complete. */
.motion-enhanced [data-effect="hero-awakening"][data-motion-ready="true"][data-motion-state="idle"] .hero-awakening__backdrop {
  opacity: 0;
  transform: translate(16px, -8px) rotate(-1.8deg) scaleX(0);
}

.motion-enhanced [data-effect="hero-awakening"][data-motion-ready="true"][data-motion-state="idle"] .hero-awakening__frame {
  clip-path: inset(0 100% 0 0);
}

.motion-enhanced [data-effect="hero-awakening"][data-motion-ready="true"][data-motion-state="idle"] .hero-artwork {
  transform: scale(1.08);
}

.motion-enhanced [data-effect="hero-awakening"][data-motion-ready="true"][data-motion-state="idle"] [data-hero-reveal],
.motion-enhanced [data-effect="hero-awakening"][data-motion-ready="true"][data-motion-state="idle"] .hero-title-line__inner {
  opacity: 0;
  transform: translateY(24px);
}

[data-effect="hero-awakening"][data-motion-state="running"] .hero-awakening__backdrop {
  animation: hero-red-sweep 700ms cubic-bezier(.77, 0, .175, 1) both;
}

[data-effect="hero-awakening"][data-motion-state="running"] .hero-awakening__frame {
  animation: hero-image-reveal 980ms cubic-bezier(.77, 0, .175, 1) 360ms both;
}

[data-effect="hero-awakening"][data-motion-state="running"] .hero-artwork {
  animation: hero-image-settle 1500ms cubic-bezier(.165, .84, .44, 1) 360ms both;
}

[data-effect="hero-awakening"][data-motion-state="running"] [data-hero-reveal="eyebrow"] {
  animation: hero-copy-in 620ms cubic-bezier(.165, .84, .44, 1) 820ms both;
}

[data-effect="hero-awakening"][data-motion-state="running"] .hero-title-line::after {
  animation: hero-title-wipe 900ms cubic-bezier(.77, 0, .175, 1) 920ms both;
}

[data-effect="hero-awakening"][data-motion-state="running"] .hero-title-line:nth-child(2)::after {
  animation-delay: 1050ms;
}

[data-effect="hero-awakening"][data-motion-state="running"] .hero-title-line__inner {
  animation: hero-title-rise 520ms cubic-bezier(.165, .84, .44, 1) 1260ms both;
}

[data-effect="hero-awakening"][data-motion-state="running"] .hero-title-line:nth-child(2) .hero-title-line__inner {
  animation-delay: 1390ms;
}

[data-effect="hero-awakening"][data-motion-state="running"] [data-hero-reveal="description"] {
  animation: hero-copy-in 650ms cubic-bezier(.165, .84, .44, 1) 1680ms both;
}

[data-effect="hero-awakening"][data-motion-state="running"] [data-hero-reveal="actions"] {
  animation: hero-copy-in 650ms cubic-bezier(.165, .84, .44, 1) 1840ms both;
}

[data-effect="hero-awakening"][data-motion-state="running"] [data-hero-reveal="scroll"] {
  animation: hero-copy-in 650ms cubic-bezier(.165, .84, .44, 1) 2050ms both;
}

@keyframes hero-red-sweep {
  from {
    opacity: 0;
    transform: translate(16px, -8px) rotate(-1.8deg) scaleX(0);
  }
  to {
    opacity: 1;
    transform: translate(16px, -8px) rotate(-1.8deg) scaleX(1);
  }
}

@keyframes hero-image-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes hero-image-settle {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@keyframes hero-title-wipe {
  0% {
    opacity: 1;
    transform: translateX(-102%);
  }
  46%, 54% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(102%);
  }
}

@keyframes hero-title-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-copy-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.indexBlock_1 {
  position: relative;
  padding: var(--space-section) 0 0;
  background: var(--color-white);
  overflow: hidden;
}

.indexBlock_1::before {
  content: "";
  position: absolute;
  top: 0;
  right: -5%;
  width: 43%;
  height: 14px;
  background: var(--color-red);
  transform: rotate(-2deg);
  transform-origin: right center;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
  width: var(--container);
  margin: 0 auto;
}

.about-copy {
  position: relative;
  z-index: 2;
  padding: clamp(30px, 4vw, 60px) 0;
}

.about-copy::before {
  content: "";
  position: absolute;
  top: 0;
  right: -48px;
  bottom: 0;
  left: -999px;
  z-index: -1;
  background: var(--color-paper);
}

.about-copy p + p {
  margin-top: 24px;
}

.about-brand-logo {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 0 0 clamp(32px, 4vw, 52px);
  mix-blend-mode: multiply;
}

/* React Bits BlurText classic-DOM adapter.
   Source: https://github.com/DavidHDev/react-bits @ 3ba27d8037a1e51e93864a7609eb48b623bcdf30 */
.motion-enhanced [data-effect="blur-text"][data-motion-ready="true"] .blur-text__semantic {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.blur-text__visual {
  display: inline;
}

.blur-text__unit {
  display: inline-block;
}

.motion-enhanced [data-effect="blur-text"][data-motion-state="idle"] .about-brand-logo,
.motion-enhanced [data-effect="blur-text"][data-motion-state="idle"] .blur-text__unit {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-18px);
  will-change: transform, filter, opacity;
}

.motion-enhanced [data-effect="blur-text"][data-motion-state="running"] .about-brand-logo {
  animation: about-blur-text-in 700ms linear both;
  will-change: transform, filter, opacity;
}

.motion-enhanced [data-effect="blur-text"][data-motion-state="running"] .blur-text__unit {
  animation: about-blur-text-in 700ms linear var(--blur-text-delay) both;
  will-change: transform, filter, opacity;
}

.motion-enhanced [data-effect="blur-text"][data-motion-state="complete"] .about-brand-logo,
.motion-enhanced [data-effect="blur-text"][data-motion-state="complete"] .blur-text__unit {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  will-change: auto;
}

@keyframes about-blur-text-in {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-18px);
  }
  50% {
    opacity: .5;
    filter: blur(5px);
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.about-media {
  position: relative;
  min-height: clamp(440px, 48vw, 660px);
}

.about-media img {
  position: absolute;
  object-fit: cover;
}

.about-media .layer_1 {
  top: 0;
  right: 0;
  width: 82%;
  height: 78%;
}

.about-media .layer_2 {
  bottom: 0;
  left: 0;
  width: 52%;
  height: 49%;
  border: 10px solid var(--color-white);
  box-shadow: var(--shadow-float);
}

.about-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: var(--container);
  margin: clamp(64px, 8vw, 116px) auto 0;
  border-top: 1px solid rgba(23, 23, 23, .28);
}

.about-figures > div {
  min-height: 180px;
  padding: 30px clamp(16px, 2.5vw, 36px);
  border-right: 1px solid rgba(23, 23, 23, .18);
}

.about-figures > div:first-child {
  padding-left: 0;
}

.about-figures > div:last-child {
  border-right: 0;
}

.about-figures dt {
  color: var(--color-red);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

/* React Bits CountUp output adapter.
   Source: https://github.com/DavidHDev/react-bits @ 3ba27d8037a1e51e93864a7609eb48b623bcdf30 */
.about-figures [data-motion-output] {
  font-variant-numeric: tabular-nums;
}

.about-figures dd {
  margin-top: 18px;
  color: var(--color-muted);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .08em;
}

@keyframes restrained-text-in {
  0% { opacity: .65; filter: blur(2px); transform: translateY(calc(var(--motion-entry-distance) * .5)); }
  50% { opacity: .82; filter: blur(.75px); transform: translateY(-1px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.service-audience {
  margin-top: 0;
  padding: 28px max(24px, calc((100vw - 1180px) / 2));
  background: var(--color-red);
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
}

.indexBlock_2 {
  position: relative;
  isolation: isolate;
  padding: var(--space-section) 0 clamp(120px, 12vw, 210px);
  background: var(--color-paper);
  overflow: clip;
}

.service-backdrop {
  position: absolute;
  top: 80px;
  left: .5%;
  z-index: 0;
  height: calc(100vh - 160px);
  min-height: 520px;
  background: #ececec;
  pointer-events: none;
  transition: opacity .4s, transform .8s cubic-bezier(.34, 1.56, .64, 1);
  will-change: opacity, transform;
}

.service-backdrop.rect {
  width: 99%;
}

.service-backdrop.rect_mb {
  left: 1%;
  width: 98%;
}

.indexBlock_2 .section-heading {
  position: relative;
  z-index: 2;
  text-align: center;
}

.indexBlock_2 .section-heading h2 {
  max-width: none;
}

.service_contents {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1310px;
  padding: 0 30px;
  margin: 0 auto;
  transition: all .6s cubic-bezier(.165, .84, .44, 1);
}

.service-panel {
  display: flex;
  align-items: end;
  background: transparent;
}

.service-panel:not(:last-child) {
  margin-bottom: -100px;
}

.service-visual {
  position: relative;
  top: -30px;
  left: 20px;
  width: 50%;
}

.service-visual .show_layer {
  transition: opacity .4s, transform .4s cubic-bezier(.34, 1.56, .64, 1);
  will-change: opacity, transform;
}

.motion-enhanced [data-service-showcase][data-service-state="ready"] .service-visual .show_layer:not(.in) {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .2s, transform .2s cubic-bezier(.65, 0, .35, 1);
}

.service-panel .scrollMove {
  position: relative;
  transition: top 1s cubic-bezier(.11, .29, .62, .88);
  will-change: top;
}

.service-title {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 40px);
  min-height: 101px;
  margin: 0 0 0 clamp(20px, 3vw, 52px);
}

.service-title .eyebrow {
  margin: 0;
  color: var(--color-red);
  font-family: var(--font-display);
  font-size: calc(1.51042vw + 1.3125rem);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.3;
}

.service-title h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1.3vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.5;
}

.service-title__script {
  position: absolute;
  top: 25px;
  left: calc(100% - 85px);
  color: #c4c4c4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.4rem, 4.5vw, 5.2rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.service-info-column {
  position: relative;
  right: 20px;
  width: 50%;
}

.service-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 600px;
  padding: 50px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 2px 2px 20px rgba(0, 0, 0, .12);
  transition: all .6s cubic-bezier(.165, .84, .44, 1);
}

.service-copy ul {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 30px;
  margin-bottom: 25px;
  border-bottom: 1px solid #d5d5d5;
  list-style: none;
  transition: all .6s cubic-bezier(.165, .84, .44, 1);
}

.service-copy li {
  display: flex;
  align-items: center;
  width: 50%;
  padding-right: 10px;
  color: var(--color-black);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.8;
  transition: all .6s cubic-bezier(.165, .84, .44, 1);
}

.service-copy li::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 20px;
  background: var(--color-red);
}

.service-copy > p:last-child {
  margin: auto 0 35px;
  color: var(--color-black);
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 2.2;
  opacity: 1;
  transition: all .6s cubic-bezier(.165, .84, .44, 1);
}

.service-media {
  height: 493px;
}

.service-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#capability {
  margin-top: var(--space-section);
  padding: clamp(72px, 8vw, 116px) max(24px, calc((100vw - 1180px) / 2));
  background: var(--color-black);
  color: var(--color-white);
}

#capability h2 {
  max-width: 16ch;
}

/* Dependency-free StrokeText adapter based on the user-provided React/GSAP component. */
[data-effect="stroke-text"] {
  position: relative;
  isolation: isolate;
}

.stroke-text__semantic {
  display: block;
}

.motion-enhanced [data-effect="stroke-text"][data-motion-ready="true"] .stroke-text__semantic {
  color: transparent;
  -webkit-text-stroke: .75px rgba(255, 255, 255, .14);
}

.stroke-text__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.stroke-text__stroke,
.stroke-text__fill {
  font: inherit;
  text-rendering: geometricPrecision;
}

.stroke-text__stroke {
  fill: none;
  stroke: var(--color-red);
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stroke-text__fill {
  fill: var(--color-white);
  stroke: none;
}

.capability-list,
.process-list {
  display: grid;
  list-style: none;
}

.capability-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(52px, 6vw, 82px);
  border-block: 1px solid rgba(255, 255, 255, .24);
}

.capability-list li {
  display: grid;
  align-items: center;
  min-height: 112px;
  padding: 22px 28px;
  border-right: 1px solid rgba(255, 255, 255, .24);
  font-weight: 700;
  letter-spacing: .06em;
}

/* React Bits SpotlightCard CSS adapter.
   Source: https://github.com/DavidHDev/react-bits @ 3ba27d8037a1e51e93864a7609eb48b623bcdf30 */
[data-effect="spotlight-grid"] > li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: var(--effect-spotlight-color);
}

[data-effect="spotlight-grid"] > li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle var(--effect-spotlight-size) at var(--mouse-x) var(--mouse-y),
    var(--spotlight-color),
    transparent 80%
  );
  transition: opacity var(--motion-fast) ease;
}

[data-effect="spotlight-grid"] > li:hover::before,
[data-effect="spotlight-grid"] > li:focus-within::before,
[data-effect="spotlight-grid"] > li.is-spotlit::before {
  opacity: .6;
}

.capability-list li:last-child {
  border-right: 0;
}

.process-list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  counter-reset: process;
  margin-top: 44px;
}

.process-list li {
  counter-increment: process;
  position: relative;
  padding: 40px 18px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: .88rem;
  font-weight: 700;
}

.process-list li::before {
  content: counter(process, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-red);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}

.process-list li::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 14px;
  left: 38px;
  height: 1px;
  background: rgba(255, 255, 255, .24);
}

.process-list li:last-child::after {
  display: none;
}

.indexBlock_3 {
  position: relative;
  padding: var(--space-section) 0;
  background: var(--color-white);
  overflow: hidden;
}

.indexBlock_3::before {
  content: "";
  position: absolute;
  right: -10%;
  bottom: 8%;
  width: 68%;
  height: 28%;
  background: var(--color-red);
  transform: skewY(-3deg);
}

.indexBlock_3 .section-heading {
  position: relative;
  z-index: 1;
  text-align: center;
}

.indexBlock_3 .section-heading h2 {
  max-width: none;
}

.indexBlock_3 .section-heading > p:last-child {
  max-width: 720px;
  margin: 28px auto 0;
  color: var(--color-muted);
}

.work-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
  gap: 10px;
  width: var(--container);
  margin: 0 auto 52px;
}

.category-filter {
  min-height: 44px;
  padding: 8px 20px;
  border: 1px solid rgba(23, 23, 23, .22);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-size: .84rem;
  font-weight: 700;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.category-filter:hover,
.category-filter[aria-pressed="true"] {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--color-white);
}

.works_slick {
  display: flex;
  gap: clamp(22px, 3vw, 44px);
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: max(24px, calc((100vw - 1180px) / 2));
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.works_slick::-webkit-scrollbar {
  display: none;
}

.works_slick.slick-initialized {
  display: block;
  overflow: visible;
  scroll-snap-type: none;
}

.works_slick.slick-initialized .work-card {
  flex: 0 0 auto;
}

.work-card {
  flex: 0 0 clamp(420px, 56vw, 760px);
  position: relative;
  min-width: 0;
  padding: 0 0 24px;
  border: 0;
  border-bottom: 8px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  text-align: left;
  scroll-snap-align: center;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.work-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  background: var(--color-red);
  transform: scaleX(.2);
  transform-origin: left;
  transition: transform var(--transition-slow);
}

.work-card:hover::after,
.work-card:focus-visible::after {
  transform: scaleX(1);
}

.work-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.work-media {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.work-media img {
  display: block;
  width: 100%;
}

/* React Bits GlareHover CSS adapter (playOnce attached to each .work-media).
   Source: https://github.com/DavidHDev/react-bits @ 3ba27d8037a1e51e93864a7609eb48b623bcdf30 */
.work-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    -45deg,
    hsla(0, 0%, 0%, 0) 60%,
    var(--effect-glare-color) 70%,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 0) 100%
  );
  transition: none;
  background-size: 250% 250%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -100% -100%, 0 0;
}

.work-card[data-effect="glare"]:is(:hover, :focus-visible) .work-media::after {
  transition: var(--motion-interaction) ease;
  background-position: 100% 100%, 0 0;
}

.work-card:hover img {
  transform: scale(1.025);
}

.work-title,
.work-category {
  display: block;
  padding-inline: clamp(20px, 3vw, 38px);
}

.work-title {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.work-category {
  margin-top: 6px;
  color: var(--color-red);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.slick-list {
  width: 100%;
  overflow: hidden;
}

.slick-track {
  display: flex;
}

.slick-slide {
  height: auto;
  padding-inline: 12px;
}

.slick-slide > div,
.slick-slide .work-card {
  height: 100%;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  min-width: 52px;
  min-height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  transform: translateY(-50%);
}

.slick-prev {
  left: 24px;
}

.slick-next {
  right: 24px;
}

.slick-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 32px;
  list-style: none;
}

.slick-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(23, 23, 23, .28);
  color: transparent;
}

.slick-dots .slick-active button {
  background: var(--color-red);
}

.project-gallery {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(20px, 3vw, 48px);
  border: 0;
  background: var(--color-black);
  color: var(--color-white);
  overflow: auto;
}

.project-gallery::backdrop {
  background: rgba(0, 0, 0, .84);
}

.project-gallery[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 20px;
  z-index: var(--z-dialog);
}

.gallery-close {
  justify-self: end;
  min-width: 88px;
  min-height: 44px;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-white);
}

.gallery-stage {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  min-height: 0;
}

.gallery-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.gallery-prev,
.gallery-next {
  min-width: 52px;
  min-height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--color-red);
  color: var(--color-white);
}

.gallery-caption {
  text-align: center;
}

.gallery-caption h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 3rem);
}

.gallery-category,
.gallery-counter {
  color: rgba(255, 255, 255, .68);
}

footer {
  position: relative;
  min-height: 760px;
  padding: clamp(74px, 9vw, 132px) 0;
  background: var(--color-red);
  color: var(--color-white);
  overflow: hidden;
}

.contact-marquee {
  width: max-content;
  margin-left: -5vw;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(4.8rem, 10vw, 10rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .8;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .46);
  white-space: nowrap;
}

/* React Bits ScrollVelocity classic-CSS adapter. */
/* Source: https://github.com/DavidHDev/react-bits @ 3ba27d8037a1e51e93864a7609eb48b623bcdf30 */
.motion-scroll-velocity__semantic {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-enhanced .contact-marquee[data-motion-enhanced="true"] {
  position: relative;
  width: 100%;
  margin-left: 0;
  overflow: hidden;
}

.motion-scroll-velocity__scroller {
  display: flex;
  width: max-content;
  white-space: nowrap;
  text-align: center;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .1));
  will-change: transform;
}

.motion-scroll-velocity__copy {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .motion-scroll-velocity__scroller {
    transform: none !important;
    will-change: auto;
  }
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: clamp(54px, 8vw, 120px);
  position: relative;
  z-index: 1;
  width: var(--container);
  margin: clamp(70px, 8vw, 118px) auto 0;
}

.contact-copy h2 {
  max-width: 11ch;
}

.contact-copy p {
  max-width: 36rem;
  margin-top: 28px;
  color: rgba(255, 255, 255, .78);
}

.drift-wall {
  --dw-tile-w: 200px;
  --dw-tile-h: 132px;
  --dw-gap: 18px;
  --dw-radius: 14px;
  --dw-lift: 64px;
  --dw-dim: 0.55;
  --dw-gray: 0;
  --dw-overlay: #060010;
  --dw-edge: 40%;
  position: relative;
  width: 100%;
  min-height: 580px;
}

.drift-wall__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1200px;
  -webkit-mask-image:
    radial-gradient(ellipse at center, #000 42%, transparent 92%),
    linear-gradient(to bottom, transparent 0, #000 var(--dw-edge), #000 calc(100% - var(--dw-edge)), transparent 100%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse at center, #000 42%, transparent 92%),
    linear-gradient(to bottom, transparent 0, #000 var(--dw-edge), #000 calc(100% - var(--dw-edge)), transparent 100%);
  mask-repeat: no-repeat, no-repeat;
  mask-size: 100% 100%, 100% 100%;
  mask-composite: intersect;
}

.drift-wall__hint {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: .75rem;
}

.drift-wall__fallback {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 28px 0;
}

.drift-wall__fallback-tile {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: transparent;
  aspect-ratio: 3 / 2;
}

.drift-wall__fallback-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drift-wall.is-enhanced .drift-wall__fallback {
  display: none;
}

.drift-wall__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(5, var(--dw-tile-w));
  gap: var(--dw-gap);
  width: max-content;
  height: 100%;
  transform: translate(-50%, -50%) rotateX(8deg) rotateY(-6deg);
  transform-origin: center;
  will-change: transform;
}

.drift-wall__plane,
.drift-wall__col,
.drift-wall__track,
.drift-wall__copy {
  transform-style: preserve-3d;
}

.drift-wall__col {
  height: 100%;
  overflow: visible;
}

.drift-wall__track,
.drift-wall__copy {
  display: flex;
  flex-direction: column;
  gap: var(--dw-gap);
}

.drift-wall__track {
  width: var(--dw-tile-w);
  will-change: transform;
}

.drift-wall__tile {
  display: block;
  flex: 0 0 var(--dw-tile-h);
  width: var(--dw-tile-w);
  height: var(--dw-tile-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--dw-radius);
  background: transparent;
  color: #fff;
  font: inherit;
  opacity: var(--dw-dim);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: opacity .24s ease;
}

.drift-wall__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--dw-overlay);
  box-shadow: 0 16px 38px rgba(6, 0, 16, .24);
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity .24s ease, box-shadow .24s ease, transform .32s ease;
}

.drift-wall__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(var(--dw-gray));
  transition: filter .24s ease, transform .32s ease;
}

.drift-wall__overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  min-height: 52%;
  padding: 12px;
  background: linear-gradient(to top, rgba(6, 0, 16, .9), transparent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
  opacity: 0;
  transition: opacity .24s ease;
}

.drift-wall__tile.is-active {
  z-index: 2;
  opacity: 1;
}

.drift-wall__tile.is-active .drift-wall__inner {
  box-shadow: 0 calc(var(--dw-lift) * .375) calc(var(--dw-lift) * .9) rgba(6, 0, 16, .44);
  transform: translateZ(var(--dw-lift));
}

.drift-wall__tile.is-active img {
  transform: scale(1.04);
}

.drift-wall__tile.is-active .drift-wall__overlay {
  opacity: 1;
}

.drift-wall__tile:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.drift-wall__tile.is-image-error img {
  visibility: hidden;
}

.drift-wall__tile.is-image-error .drift-wall__inner {
  opacity: .16;
}