/* Trimmed by CSS tree-shake (heuristic) */
:root{
  --site-gutter-large: 14vw;
  --site-gutter-mid: 32px;
  --site-gutter-small: 16px;

  
  --base-unit: 4px;
  --space-xs: calc(var(--base-unit) * 1);  /* 4px */
  --space-sm: calc(var(--base-unit) * 2);  /* 8px */
  --space-md: calc(var(--base-unit) * 4);  /* 16px */
  --space-lg: calc(var(--base-unit) * 6);  /* 24px */
  --space-xl: calc(var(--base-unit) * 8);  /* 32px */
  --space-xxl: calc(var(--base-unit) * 10); /* 40px */
  --space-xxxl: calc(var(--base-unit) * 16); /* 64px */
  --space-120: calc(var(--base-unit) * 30); /* 120px */

  --palette-0: #000;
  --palette-10: #161616;
  --palette-black: #2D2828;
  --palette-gray-80: #808184;
  --palette-gray-60: #B4B5B9;
  --palette-gray-20: #e9e9eb;
  --palette-white: #FFFFFF;
  

    --color-text-main: var( --palette-black);
    --color-text-hover-light: var( --palette-gray-80);
    --color-text-hover-dark: var( --palette-black);
    --color-text-secondary: var( --palette-gray-80);
    --color-bg-default:  var( --palette-white);
    --color-bg-secondary: var(--palette-gray-20);
    --color-bg-tertiary: var(--palette-gray-60);
    --color-text-link: var( --palette-gray-80);


    --grid-item-min-size: 300px;

    --logo-invert-mode: none;

  }body.dark-mode{

    --color-text-main: var(--palette-white);
    --color-text-secondary: var( --palette-gray-80);
    --color-bg-default: var(--palette-0);
    --color-bg-secondary: var(--palette-10);
    --color-text-link: var( --palette-gray-60);
    --color-text-hover-light: var( --palette-gray-60);
    --color-text-hover-dark: var( --palette-gray-20);
    --logo-invert-mode: invert(1);
}.case-context-content{
    display: flex;
    flex-direction: row;
    gap: 64px;
    top: 174px;
    margin-bottom: 0px;
  }@media (max-width: 768px) {.case-context-content{
      display: flex;
      flex-direction: column;
      gap: 24px;
margin-bottom: 24px;
    }}.case-sidebar-content{
    display: flex;
    flex-direction: column;
    position: sticky;
    gap: 24px;
    top: 174px;
  }.case-sidebar-content-title{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }.case-sidebar-content-title p{
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text-secondary);
  }h1,h2,h3,h4,h5{
 font-family: "Rubik", sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 0;
    color: var(--color-text-main);
  }p{
    font-size: 1em;
    color: var(--color-text-main);
     font-family: "Rubik", sans-serif;
    font-weight: 400;
  }a{
    font-size: 1em;
  }b{
    font-weight: 500;
  }*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }body{
 font-family: "Rubik", sans-serif;
    font-weight: 500;
    font-style: normal;
    background-color: var(--color-bg-default);
    min-height: 100vh;
  
  }
  
  @media (max-width: 768px) {

  }.case-study{
    
    padding-left: var(--site-gutter-large);
    padding-right: var(--site-gutter-large);
    padding-bottom: var(--site-gutter-large);
    padding-top: 174px;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
  }
  .content-container{
    padding-left: var(--site-gutter-large);
    padding-right: var(--site-gutter-large);
    padding-bottom: var(--site-gutter-large);
    padding-top: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-items: center;
  }
  #about-content{
display: flex;
flex-direction: row;
gap: 40px;
width: 100%;
justify-content: start;
align-items: flex-start;
  }
  #footer-container{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
width: 100%;
    height:200px;
    align-items: end;
    background-color: white;
    overflow: clip;
  }.main-content{
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 58vw;
    max-width: 1200px;
  }.main-content.case-gallery{
    width: 100%;
 }#footer-container{
  flex: 1;
  gap: 10%;
 }

a{
  text-decoration: underline;
  color: var(--color-text-link);
  }a:hover{
  text-decoration: underline;
  color: var(--color-text-hover-dark);
  }.vimeo-embed-wrapper{
  padding:56.25% 0 0 0;
  position:relative;
  border-radius: 6px;
  overflow: clip;
  }.vimeo-embed-wrapper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  }.video-embed-wrapper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  }.image-banner img{
  
  object-fit: cover;
  width: 100%;
  }@media (max-width: 768px) {about .main-content{
    max-width: 100%;
  }.case-study{
  padding-top: var(--site-gutter-large);
  display: flex;
  flex-direction: column;
  gap: 40px;
  }.content-container{
  display: flex;
  flex-direction: column;
  gap: 40px;
      padding-left: var(--site-gutter-small);
    padding-right: var(--site-gutter-small);
    padding-bottom: var(--site-gutter-small);
  }#footer-container{
  flex-direction: column;
  align-items: start;
  padding: var(--site-gutter-mid);
  gap: var(--site-gutter-mid);
  padding-bottom: 240px;
  }.main-content{
  width: 100%;
  gap: 40px;
  }#footer-links{
  display: flex;
  flex-direction: row!important;
  gap: 20px!important;
  justify-content: space-between!important;
  width: 100%;
  }}



:root{
  --gap: 8px;
  --minWvw: 30;
  --maxWvw: 80;
  --maxHvh: 100;
}





* { box-sizing: border-box; }
html, body { height: auto; min-height: 100%; }
body.mode-scroll {
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  background: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  background-color: var(--color-bg-default);
  color: var(--color-text-main);
  transition: background-color 450ms ease, color 200ms ease;

}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

body, main.site {
  min-height: 100svh;
  max-height: 70vh;
}

.site { min-height: 100%; display: block; }
.stack { width: min(90vw, 1200px); margin-inline: auto; }

/* ---------- GRID MODE ---------- */
body.mode-grid {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}



body.mode-grid #gridStage{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
  will-change: transform;
}

body.mode-scroll #gridStage{
  position: static;
  inset: auto;
  transform: none;
}

body.mode-grid #projects{
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

body.mode-scroll #gridStage{
margin-bottom: 200px;
}
body.mode-grid .card{
  width: 100% !important;
  max-height: none !important;
}

/* ---------- SCROLL MODE ---------- */
body.mode-scroll{ overflow: auto; }

body.mode-scroll #gridStage{
  position: static;
  display: block;
  transform: none !important;
}

body.mode-scroll #projects{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: min(90vw, 1200px);
}

#scrollTopSpacer { height: 16vh; display: none; }
body.mode-scroll #scrollTopSpacer { display: block; }

/* ---------- CARD / MEDIA (shared) ---------- */
.card{
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

body.mode-scroll .card{
  width: clamp(var(--minWvw)vw, 40vw, var(--maxWvw)vw);
  max-height: var(--maxHvh)vh;
  will-change: width;
}

.mode-scroll .card:not(.active) {
   opacity: 0.5;
   transition: opacity 220ms ease;
}

.mode-scroll .card.active {
  
  opacity: 1;
}

.mode-scroll project-thumbnail:not(.active) {
  transition: opacity 220ms ease;
  opacity: 0.5;
}


.thumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb.hover{ opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
.card:hover .thumb.hover{ opacity: 1; }
.card:hover .thumb.default{ opacity: 0; }

@media (hover:none) and (pointer:coarse){
  .card .thumb.hover{ display:none; }
  .card .thumb.default{ opacity:1 !important; }
}

html{ scroll-behavior: smooth; }

#scrollTopSpacer { height: 0; display: none; }
body.mode-scroll #scrollTopSpacer { display: block; }



h1, h2, h3, h4, h5, p {
    margin: 0px;
  font-family: "Rubik", sans-serif;
    font-weight: 400;
        color: var(--color-text-main);
}

h2 {
   font-weight: 400;
}
h4 {
    font-size: 16px;
}


/*────────────  Text Overlays  ────────────*/
.text-overlay {
  position: fixed;
  display: block;
  z-index: 1000;
  pointer-events: none;
}

.text-overlay a,
.text-overlay .bl-menu,
.text-overlay .bl-list,
.text-overlay .bl-trigger {
  pointer-events: auto;
}

.text-overlay.top-left    { left: 24px; top: 24px; }
.text-overlay.top-right   { right: 24px; top: 24px; }
.text-overlay.top-right-context { right: 24px; top: 48px; text-align: end; }
.text-overlay.bottom-right{ right: 24px; bottom: 24px; }
.text-overlay.bottom-left { left: 24px; bottom: 24px; }


.bl-menu {
  position: absolute;
margin-top: 4px;
width: 200px;
}
.bl-trigger {
  cursor: default;
opacity: 0.4;
}

.bl-list {
  position: absolute;
  left: 0;
  margin: 0 0 0 0;
  padding: 8px 0 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  padding-bottom: 24px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 20;
}

.bl-menu:hover .bl-list{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bl-list li { opacity: .4; transition: opacity .15s ease; }
.bl-list li:hover { opacity: 1; }


.bl-list a{
  text-decoration: none;
  color: inherit;
  display: inline-block;
  line-height: 1.2;
}

.bl-list a {
  position: relative;
  padding-left: 18px;
  transition: color .2s ease;
}

.bl-list a::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

.bl-list a:hover::before,
.bl-list a:focus-visible::before,
.bl-list li:hover a::before {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.text-overlay.top-right .bl-menu {
  right: 0;
  text-align: right;
}
.text-overlay.top-right .bl-list {
  position: absolute;
  right: 0;
}
.text-overlay.top-right .bl-list li {
  opacity: .4;
  transition: opacity .15s ease;
}
.text-overlay.top-right .bl-list li:hover {
  opacity: 1;
}
.text-overlay.top-right .bl-list a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  line-height: 1.2;
}
.text-overlay.top-right .bl-list a {
  position: relative;
  padding-right: 18px;
  transition: color .2s ease;
}
.text-overlay.top-right .bl-list a::before {
  content: "←";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.text-overlay.top-right .bl-list a:hover::before,
.text-overlay.top-right .bl-list a:focus-visible::before,
.text-overlay.top-right .bl-list li:hover a::before {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.svg-swap-container {
  width: 180px;
  position: fixed;
  left: 50%;
  bottom: -110px;
  transform: translateX(-50%) scale(0);
  transition: transform .35s ease, opacity .35s ease;
  padding: 8px 12px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: auto;
  z-index: 25;
  aspect-ratio: 683 / 882;
}
.svg-swap-container svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.svg-hover { opacity: 0;}
.svg-swap-container:hover .svg-default { opacity: 0; }
.svg-swap-container:hover .svg-hover   { opacity: 1; }

body.zoomed-out .svg-swap-container {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* --- FOOTER SVG --- */
.footer-svg-swap-container {
  width: 240px;
  aspect-ratio: 683 / 882;
  position: absolute;
  left: 50%;
  bottom: -130px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 6px;
  opacity: 1;
  pointer-events: auto;
  z-index: 25;
}

.footer-svg-swap-container svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

.footer-svg-swap-container .svg-hover { opacity: 0; }

.footer-svg-swap-container:hover .svg-default { opacity: 0; }
.footer-svg-swap-container:hover .svg-hover   { opacity: 1; }





.two-column-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.two-column-wrapper > youtube-embed {
  display: block;
  width: 100%;
}

.arena-timestamp {
  font-size: 12px;
  line-height: 1.2;
  color: #6B7280;
  margin: 0px 6px 6px 20px;
  user-select: none;
}

#arena-latest-text {
    position: absolute;
    right: 24px;
    bottom: 40px;
    left: 50%;
    transform: translateX(160px);
}


.chat-bubble {
  display: inline-block;
  max-width: 25vw;
  line-height: 1.45;
  font-size: 15px;
  color: #111111;
  background: #EEF0F2;
  border-radius: 18px;
  padding: 10px 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  margin: 0px 0 0 6px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-bubble::before {
  content: "";
  position: absolute;
  left: 0px; bottom: 0px;
  width: 12px; height: 12px;
  background: #EEF0F2;
  border-bottom-right-radius: 10px;
  transform: rotate(45deg);
  box-shadow: -1px 1px 0 rgba(0,0,0,0.03);
}




@media (max-width: 768px) {
  :root {
    --gap: 12px;
  }

  body.mode-grid #gridStage {
    width: 100vw;
    margin: 0 auto;
  }

  body.mode-grid #projects {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    ;
    gap: 4px;
    justify-items: center;
    align-content: center;
  }

  body.mode-grid #projects .card {
    width: calc(60vw / 2);
    aspect-ratio: 16/9;
  }

  body.mode-grid #projects .card:nth-of-type(n+9) {
    display: none !important;
  }

  .text-overlay {
    position: absolute;
    display: block;
    z-index: 1000;
    pointer-events: none;
  }

    .case-study {
      margin-top: 180px;
      padding-left: var(--site-gutter-small);
      padding-right: var(--site-gutter-small);
      padding-bottom: var(--site-gutter-small);
    }


.two-column-wrapper {
    grid-template-columns: 1fr;
}

#about-content {
  flex-direction: column-reverse;
  gap: 32px;
}

  .text-overlay .bl-menu .bl-list {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: none !important;
  }
  .text-overlay .bl-menu .bl-list li { opacity: 0.6 !important; }
  .text-overlay .bl-menu .bl-trigger { display: none;}


.bl-list a {
  position: relative;
  padding-left: 0px;
}
.text-overlay.top-right .bl-list a {
  position: relative;
  padding-right: 0px;
}

.bl-list a:hover::before,
.bl-list a:focus-visible::before,
.bl-list li:hover a::before,
.text-overlay.top-right .bl-list a:hover::before,
.text-overlay.top-right .bl-list a:focus-visible::before,
.text-overlay.top-right .bl-list li:hover a::before {
  transform: translateY(-50%) translateX(0);
  opacity: 0;
}

#arena-latest-text {
    position: relative;
    bottom: inherit;
    left: inherit;
    right: inherit;
    transform:inherit;
}

.chat-bubble {
  max-width: 100%;
}

/* Tail (left/incoming) */
.chat-bubble::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -10px;
  width: 12px; height: 12px;
  background: #EEF0F2;
  border-bottom-right-radius: 10px;
  transform: rotate(0deg);
  box-shadow: -1px 1px 0 rgba(0,0,0,0.03);
}


#footer-container{
height: 400px;
justify-content: end;
align-items: center;
  }


}



  .mode-scroll #gridStage .card { width: min(92vw, calc(70vh * 16 / 9)); }



body.mode-grid,
body.mode-grid #gridStage {
  touch-action: none;
}


body.mode-scroll {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body.mode-scroll #gridStage {
  position: static;
  inset: auto;
  transform: none;
}

body.mode-grid #footer-container {
display: none;
}

#scrollTopSpacer { display: none; }
body.mode-scroll #scrollTopSpacer { display: block; }