::-webkit-scrollbar {width:0px; display: none !important;}

  html, body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
	}

body:not(.wf-design-mode) .page-wrapper, [header-text-wrapper], [footer="navbar"] {opacity: 0}
  
.line-mask, .word-mask, .char-mask { padding-block: 0.1em; margin-block: -0.1em; }
  ::selection{
    background-color: var(--theme--light);
    color: var(--theme--notblack);
    text-shadow:none;
  }
  .page_wrapper {opacity: 0};
  .page_wrapper .is--singleproject {opacity: 1};
  
  @media (max-width: 767px) {
  .progress_list_wrapper {
    display: flex;
    flex-direction: column;
    max-height: 600px; /* or whatever fits 15 items */
    overflow-y: auto;
  }
  .progress_counter {
    transition: opacity 0.2s;
  }
  .progress_counter[style*="display: none"] {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

.wf-design-mode:not [data-navbar-wrapper] {
  opacity: 0;
  visibility: hidden;
  }
.wf-design-mode:not [header-text-wrapper] {
  opacity: 0;
  visibility: hidden;
  }

/* Animate Accordion Bottom Grid */
[accordion-info="wrapper"] {
  transition: grid-template-rows 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] [accordion-info="wrapper"] {
  grid-template-rows: 1fr;
}

/* Animate Icon */
.accordion-css__item-icon {
  transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-icon {
  transform: rotate(0.001deg);
}
[accordion-info="text"]{
transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}
[data-accordion-status="active"] [accordion-info="text"] {
  opacity: 1;
}



[title-info="wrapper"] { opacity: 0;}

/*----projects page-----*/
[button-toggle="toggle"], [button-text="right"], [button-text="left"], .icon-listview-wrapper, .icon-scrollview-wrapper {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
 
[data-button-list="true"] [button-toggle="toggle"] {
  transform: translateX(200%);
}
[data-button-list="true"] [button-text="right"] {
  transform: translateX(100%);
}
[data-button-list="true"] [button-text="left"] {
  transform: translateX(0%);
}
[data-button-list="true"] .icon-scrollview-wrapper {
  opacity: 0;
}
[data-button-list="true"] .icon-listview-wrapper {
  opacity: 1;
}

.wf-design-mode:not [data-fouc-element] { opacity: 0;}

[data-projects="wrapper"][data-layout-status] {
  --grid-columns: 3;
  --grid-gap: 0.75rem;
  --grid-ratio: 3.9;            /* card width / height (unitless) */
  --grid-top-space: 0rem;       /* extra room between heading and grid */
  --grid-bottom-space: 8rem;    /* keeps the last row clear of the fixed navbar */
  --layout-duration: 0.65s;     /* keep in sync with DURATION in the JS */
  --layout-ease: cubic-bezier(0.76, 0, 0.24, 1); /* ~ power4.inOut */
}

@media screen and (max-width: 991px) {
  [data-projects="wrapper"][data-layout-status] { --grid-columns: 2; --grid-ratio: 3.2; }
}
@media screen and (max-width: 767px) {
  [data-projects="wrapper"][data-layout-status] { --grid-columns: 1; --grid-ratio: 3; --grid-gap: 0.5rem; }
}

/* ---------- 2. Video wrapper: the clip is always defined, so it can transition ---------- */
[data-projects="item"] > [data-project-link] {
  --grid-clip: 0%;                                  /* scroll view: nothing clipped */
  clip-path: inset(var(--grid-clip) 0%);
}

/* Only the card(s) Flip is moving get a clip transition; everything else snaps. */
[data-projects="item"][data-layout-flipping] { z-index: 6; }
[data-projects="item"][data-layout-flipping] > [data-project-link] {
  transition: clip-path var(--layout-duration) var(--layout-ease);
}

/* ---------- 3. Grid view ---------- */
[data-layout-status="grid"] [data-projects="list"] {
  flex-flow: row wrap;
  gap: var(--grid-gap);
  padding-top: var(--grid-top-space);
  padding-bottom: var(--grid-bottom-space);
  align-items: flex-start;
  align-content: flex-start;
}

/* Card height comes from padding, not aspect-ratio: Safari ignores aspect-ratio on these
   flex items and sizes them from the video inside. */
[data-layout-status="grid"] [data-projects="item"] {
  left: auto !important;
  width: calc((100% - (var(--grid-columns) - 1) * var(--grid-gap)) / var(--grid-columns)) !important;
  max-width: none !important;
  align-self: flex-start;
  box-sizing: border-box;
  height: 0;
  min-height: 0;
  max-height: none;
  padding-top: calc((100% - (var(--grid-columns) - 1) * var(--grid-gap)) / var(--grid-columns) / var(--grid-ratio));
}

/* The video keeps its 16:9 box, centred on the card; clip-path cuts it down to the card. */
[data-layout-status="grid"] [data-projects="item"] > [data-project-link] {
  --grid-clip: calc((1 - (16 / 9) / var(--grid-ratio)) * 50%);
  position: absolute;
  left: 0;
  top: calc((1 - var(--grid-ratio) * 9 / 16) * 50%);
  width: 100%;
  max-width: none;
  height: auto;              /* undo the 60vh / max-height the scroll view uses */
  max-height: none;
  aspect-ratio: 16 / 9;
}

/* Scroll-view-only UI */
[data-layout-status="grid"] [data-projects="scrollview-infowrapper"],
[data-layout-status="grid"] [data-navigation-progress="pin"] {
  display: none;
}

/* Heading scrolls away with the grid instead of staying pinned */
[data-layout-status="grid"] [data-projects="pin"] {
  position: relative;
}

/* ---------- 4. Card caption (title + client), grid view only ---------- */
[data-projects="caption"] {
  position: absolute;
  left: 1.5em;
  right: 1.5em;
  bottom: calc(var(--grid-clip) + 1.25em);   /* sits on the bottom edge of the clipped area */
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

[data-layout-status="grid"] [data-projects="item"] > [data-project-link] [data-projects="caption"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s;
}

/* hidden while a switch is running, and on the card that expands to the single project */
[data-layout-status][data-transitioning] [data-projects="caption"],
[data-project-link].is--fullscreen [data-projects="caption"] {
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}

/* Scrim so the caption stays readable on bright footage */
[data-projects="item"] > [data-project-link]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
[data-layout-status="grid"] [data-projects="item"] > [data-project-link]::after {
  opacity: 1;
}

/* Animation */
[data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading) {
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

/* Placeholder */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Dark Overlay */
[data-bunny-player-init][data-player-status="paused"] .bunny-player__dark,
[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark{
  opacity: 0.3;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__dark {
  opacity: 0;
}

/* Play/Pause */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__playpause,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__playpause {
  opacity: 0;
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__playpause {
  opacity: 1;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg {
  display: none;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg{
  display: block;
}

/* Loading */
[data-bunny-player-init][data-player-status="loading"] .bunny-player__loading {
  opacity: 1;
  visibility: visible;
}

/* Interface */
.bunny-player__interface {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__interface{
  opacity: 0;
  transform: translateY(1em) rotate(0.001deg);
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface {
  opacity: 1;
  transform: translateY(0em) rotate(0.001deg);
}

/* Timeline */
[data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline,
[data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline {
  pointer-events: none;
}

/* Timeline Handle */
[data-bunny-player-init] .bunny-player__timeline-handle {
  transition: transform 0.15s ease-in-out;
}

[data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle {
  transform: translate(-50%, -50%) scale(1);
}

/* Fullscreen */
[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg {
  display: block;
}

[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg {
  display: none;
}

/* Mute */
[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-mute-svg {
  display: block;
}

[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-up-svg {
  display: none;
}

/* Cover Mode */
[data-bunny-player-init][data-player-update-size="cover"] {
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

[data-bunny-player-init][data-player-update-size="cover"] [data-player-before] {
  display: none;
}

[data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video {
  object-fit: cover;
}

[data-depth-tiles-item] .demo-card {
  transition: transform 0.4s cubic-bezier(0.35, 1.5, 0.6, 1);
  transform: scale(1)rotate(0.001deg);
}

[data-depth-tiles-item]:hover .demo-card {
  transform: scale(0.95) rotate(0.001deg);
}

/* Optional to show tiles in a row in the Webflow Designer */
:is(.wf-design-mode, .wf-editor) [data-depth-tiles-list] {
  display: flex;
  max-width: 100vw;
  overflow: scroll;
}

[data-fit-width] {
  display: inline-block;
  white-space: nowrap; 
  margin: 0;
}


/* icon states */
  [data-case-audio][data-case-audio-status="playing"] [data-case-audio-icon="play"],
  [data-case-audio]:not([data-case-audio-status="playing"]) [data-case-audio-icon="pause"],
  [data-case-audio-muted="true"] [data-case-audio-icon="volume"],
  [data-case-audio-muted="false"] [data-case-audio-icon="muted"] { display: none; }

  /* loading feedback */
  [data-case-audio-wave] { transition: opacity 0.3s; }
  [data-case-audio-status="idle"] [data-case-audio-wave],
  [data-case-audio-status="loading"] [data-case-audio-wave] { opacity: 0.4; }

  [data-case-audio-control] { cursor: pointer; }
  
  
  [data-odometer-element] {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

[data-odometer-part="mask"], 
[data-odometer-part="static"] {
  display: inline-block;
  overflow: clip;
  padding: 0.05em;
  margin: -0.05em;
}

[data-odometer-part="roller"] {
  display: block;
  white-space: pre;
  text-align: center;
  will-change: transform;
}

[data-odometer-part="static"] {
  display: inline-block;
}

/* Tooltip - Icon Types */
[data-css-tooltip-icon] > svg path:not(:first-child) {
  display: none;
}

[data-css-tooltip-icon="question"] > svg path:nth-child(2),
[data-css-tooltip-icon="question"] > svg path:nth-child(3){
  display: block;
}

[data-css-tooltip-icon="alert"] > svg path:nth-child(4),
[data-css-tooltip-icon="alert"] > svg path:nth-child(5){
  display: block;
}

[data-css-tooltip-icon="info"] > svg path:nth-child(6),
[data-css-tooltip-icon="info"] > svg path:nth-child(7),
[data-css-tooltip-icon="info"] > svg path:nth-child(8),
[data-css-tooltip-icon="info"] > svg path:nth-child(9){
  display: block;
}

/* Tooltip - Hover Element */
[data-css-tooltip-hover] {
  position: relative;
  cursor: pointer;
}

/* Tooltip - Animation */
[data-css-tooltip-y] {
  transition: all 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

[data-css-tooltip-active] [data-css-tooltip-y] {
  opacity: 1;
  visibility: visible;
}

.css-tooltip__box-inner {
  transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translateY(1em) scale(0.9) rotate(0.001deg);
}

[data-css-tooltip-active] [data-css-tooltip-y] .css-tooltip__box-inner {
  transform: translateY(0em) scale(1) rotate(0.001deg);
}

/* Tooltip - Bottom */
[data-css-tooltip-y="bottom"] {
  top: 100%;
  bottom: unset;
}

[data-css-tooltip-y="bottom"] .css-tooltip__card {
  order: 2;
}

[data-css-tooltip-y="bottom"] .css-tootlip__tip {
  transform: scaleY(-1);
}

[data-css-tooltip-y="bottom"] .css-tooltip__box-inner {
  transform: translateY(-1em) scale(0.9) rotate(0.001deg);
}

/* Tooltip - Left */
[data-css-tooltip-x="left"] {
  align-items: flex-start;
  left: -2em;
  transform: translateX(0%);
}

[data-css-tooltip-x="left"] .css-tooltip__box-inner {
  align-items: flex-start;
}

/* Tooltip - Right */
[data-css-tooltip-x="right"] {
  align-items: flex-end;
  left: unset;
  right: -2em;
  transform: translateX(0%);
}

[data-css-tooltip-x="right"] .css-tooltip__box-inner {
  align-items: flex-end;
}

[data-player-thumb] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

/* First frame painted: fade the thumbnail out */
[data-player-frame="true"] [data-player-thumb] {
  opacity: 0;
}

/* Touch + grid view (and during the switch): thumbnail stays on, video hidden */
[data-grid-touch][data-layout-status="grid"] [data-player-thumb],
[data-grid-touch][data-transitioning] [data-player-thumb] {
  opacity: 1;
  transition: none;
}

[data-grid-touch][data-layout-status="grid"] [data-bunny-background-init] video,
[data-grid-touch][data-transitioning] [data-bunny-background-init] video {
  visibility: hidden;
}

/* Desktop: thumbnail overlay only in grid view (hover fade), never in scroll view */
@media (hover: hover) and (pointer: fine) {
  [data-player-thumb] {
    display: none;
  }
  [data-layout-status="grid"] [data-player-thumb] {
    display: block;
  }
}

[data-project-flipping],
[data-project-flipping] * {
  transition: none !important;
}

[data-project-flipping] .grid__info-wrapper {
  opacity: 0 !important;
  visibility: hidden !important;
}