/* 4dsHub V15 — home composition + portfolio case-study layout */

/* ---------------- HOME / FIVE GAMES ---------------- */
body.home-reference-mode:not(.concept-mode):not(.services-mode):not(.contact-mode):not(.power-mode):not(.brand-universe-mode):not(.form-mode) .home-game-showcase{
  position:absolute!important;
  left:50%!important;
  top:clamp(270px,30.5svh,325px)!important;
  width:min(1480px,92vw)!important;
  height:clamp(500px,54svh,610px)!important;
  transform:translateX(-50%)!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:end!important;
  justify-items:center!important;
  column-gap:clamp(8px,1.25vw,22px)!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  z-index:80!important;
}

body.home-reference-mode:not(.concept-mode):not(.services-mode):not(.contact-mode):not(.power-mode):not(.brand-universe-mode):not(.form-mode) .home-game-link{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  transform:translate3d(0,var(--game-base-y,0px),0)!important;
  animation:none!important;
  overflow:visible!important;
}

body.home-reference-mode:not(.concept-mode):not(.services-mode):not(.contact-mode):not(.power-mode):not(.brand-universe-mode):not(.form-mode) .home-game-link img{
  width:min(100%,var(--game-max,290px))!important;
  max-width:var(--game-max,290px)!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  transform:translate3d(0,0,0)!important;
  animation:gameFloatV15 var(--game-time,7s) cubic-bezier(.42,.04,.58,.96) var(--game-delay,0s) infinite alternate!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.32))!important;
}

body.home-reference-mode .home-game-link.is-catpuf{
  --game-base-y:40px;
  --game-max:305px;
  --game-up:-14px;
  --game-down:26px;
  --game-time:6.2s;
  --game-delay:-1.1s;
}
body.home-reference-mode .home-game-link.is-elie{
  --game-base-y:2px;
  --game-max:300px;
  --game-up:-30px;
  --game-down:18px;
  --game-time:8.8s;
  --game-delay:-5.7s;
}
body.home-reference-mode .home-game-link.is-cess{
  --game-base-y:-8px;
  --game-max:300px;
  --game-up:-20px;
  --game-down:24px;
  --game-time:7.1s;
  --game-delay:-2.4s;
}
body.home-reference-mode .home-game-link.is-shitart{
  --game-base-y:28px;
  --game-max:315px;
  --game-up:-34px;
  --game-down:20px;
  --game-time:10.1s;
  --game-delay:-7.3s;
}
body.home-reference-mode .home-game-link.is-setris{
  --game-base-y:-28px;
  --game-max:300px;
  --game-up:-24px;
  --game-down:30px;
  --game-time:7.8s;
  --game-delay:-4.1s;
}

@keyframes gameFloatV15{
  0%{transform:translate3d(0,var(--game-down,20px),0)}
  100%{transform:translate3d(0,var(--game-up,-20px),0)}
}

/* Keep hover subtle without fighting the floating animation. */
body.home-reference-mode .home-game-link:hover img,
body.home-reference-mode .home-game-link:focus-visible img{
  filter:drop-shadow(0 25px 38px rgba(0,0,0,.48)) drop-shadow(0 0 14px rgba(255,255,255,.08))!important;
}

@media(max-height:760px) and (min-width:901px){
  body.home-reference-mode:not(.concept-mode):not(.services-mode):not(.contact-mode):not(.power-mode):not(.brand-universe-mode):not(.form-mode) .home-game-showcase{
    top:clamp(235px,29svh,270px)!important;
    height:clamp(405px,55svh,470px)!important;
    width:min(1360px,91vw)!important;
  }
  body.home-reference-mode .home-game-link.is-catpuf{--game-max:245px;--game-base-y:28px}
  body.home-reference-mode .home-game-link.is-elie{--game-max:242px}
  body.home-reference-mode .home-game-link.is-cess{--game-max:242px}
  body.home-reference-mode .home-game-link.is-shitart{--game-max:255px;--game-base-y:18px}
  body.home-reference-mode .home-game-link.is-setris{--game-max:242px;--game-base-y:-18px}
}

@media(max-width:900px){
  body.home-reference-mode:not(.concept-mode):not(.services-mode):not(.contact-mode):not(.power-mode):not(.brand-universe-mode):not(.form-mode) .home-game-showcase{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:min(94vw,760px)!important;
    height:auto!important;
    transform:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
    margin:28px auto 48px!important;
  }
  body.home-reference-mode .home-game-link{
    min-height:260px!important;
    transform:none!important;
  }
  body.home-reference-mode .home-game-link.is-cess{
    grid-column:1 / span 2!important;
    width:50%!important;
    justify-self:center!important;
  }
  body.home-reference-mode .home-game-link img{
    width:min(100%,250px)!important;
    max-width:250px!important;
  }
}

@media(max-width:520px){
  body.home-reference-mode:not(.concept-mode):not(.services-mode):not(.contact-mode):not(.power-mode):not(.brand-universe-mode):not(.form-mode) .home-game-showcase{
    grid-template-columns:1fr!important;
    width:min(88vw,360px)!important;
    gap:6px!important;
  }
  body.home-reference-mode .home-game-link,
  body.home-reference-mode .home-game-link.is-cess{
    grid-column:1!important;
    width:100%!important;
    min-height:250px!important;
  }
  body.home-reference-mode .home-game-link img{
    width:min(100%,240px)!important;
    max-width:240px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.home-reference-mode .home-game-link img{animation:none!important;will-change:auto!important;}
}

/* ---------------- PORTFOLIO / INDEX ---------------- */
body.home-reference-mode.concept-mode .concept-portfolio-award.is-active{
  padding-top:clamp(24px,3vh,38px)!important;
}
body.home-reference-mode.concept-mode .concept-portfolio-award.is-active .portfolio-awards{
  width:min(1480px,92vw)!important;
  max-width:1480px!important;
  margin:0 auto!important;
}

.portfolio-awards .pf-tools{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:22px!important;
  margin:0 0 clamp(28px,4vh,44px)!important;
  padding:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
.portfolio-awards .pf-filters{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.portfolio-awards .pf-filters button{
  border:1px solid rgba(255,255,255,.13)!important;
  background:rgba(255,255,255,.025)!important;
  color:rgba(255,255,255,.58)!important;
  border-radius:999px!important;
  padding:10px 15px!important;
  font-size:10px!important;
  letter-spacing:.14em!important;
  font-weight:750!important;
  transition:background .24s ease,color .24s ease,border-color .24s ease,transform .24s ease!important;
}
.portfolio-awards .pf-filters button:hover{
  color:#fff!important;
  border-color:rgba(255,255,255,.30)!important;
  transform:translateY(-1px)!important;
}
.portfolio-awards .pf-filters button.on{
  background:#fff!important;
  color:#070707!important;
  border-color:#fff!important;
}
.portfolio-awards .pf-search{
  width:min(320px,30vw)!important;
  min-width:230px!important;
  height:42px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.025)!important;
}
.portfolio-awards .pf-search span{font-size:9px!important;letter-spacing:.18em!important;}
.portfolio-awards .pf-search input{font-size:13px!important;}

.portfolio-awards .pf-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(18px,1.65vw,28px)!important;
  grid-auto-flow:row!important;
}
.portfolio-awards .pf-card,
.portfolio-awards .pf-card.pf-card-wide,
.portfolio-awards .pf-card.pf-card-tall{
  grid-column:auto!important;
  aspect-ratio:16/10!important;
  min-height:0!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:#0a0a0a!important;
  box-shadow:0 18px 58px rgba(0,0,0,.25)!important;
  overflow:hidden!important;
  transition:transform .42s cubic-bezier(.16,1,.3,1),border-color .32s ease,box-shadow .42s ease!important;
}
.portfolio-awards .pf-card:before{
  background:linear-gradient(180deg,rgba(0,0,0,0) 46%,rgba(0,0,0,.82) 100%)!important;
  opacity:1!important;
}
.portfolio-awards .pf-card:after{
  content:"↗"!important;
  display:grid!important;
  place-items:center!important;
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  z-index:3!important;
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.36)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  color:rgba(255,255,255,.88)!important;
  font:500 18px/1 system-ui,sans-serif!important;
  opacity:0!important;
  transform:translateY(5px)!important;
  transition:opacity .28s ease,transform .28s ease,background .28s ease!important;
  pointer-events:none!important;
  backdrop-filter:blur(8px)!important;
}
.portfolio-awards .pf-card img{
  transform:scale(1.002)!important;
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .34s ease,filter .5s ease!important;
}
.portfolio-awards .pf-card > div:not(.pf-media-loader){
  padding:22px 24px!important;
  transform:none!important;
  background:transparent!important;
}
.portfolio-awards .pf-card small{
  color:rgba(255,255,255,.58)!important;
  font-size:9px!important;
  letter-spacing:.18em!important;
}
.portfolio-awards .pf-card h3{
  margin:8px 0 0!important;
  font-size:clamp(25px,2.1vw,38px)!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
}
.portfolio-awards .pf-card p{display:none!important;}
.portfolio-awards .pf-card:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:0 28px 82px rgba(0,0,0,.42)!important;
}
.portfolio-awards .pf-card:hover img{
  transform:scale(1.04)!important;
  filter:contrast(1.035) saturate(1.03)!important;
}
.portfolio-awards .pf-card:hover:after{opacity:1!important;transform:translateY(0)!important;}

/* ---------------- PORTFOLIO / INDEPENDENT CASE STUDY ---------------- */
.portfolio-awards.pf-detail-open .pf-tools,
.portfolio-awards.pf-detail-open .pf-grid{
  display:none!important;
}
.portfolio-awards .pf-detail[hidden]{display:none!important;}
.portfolio-awards .pf-detail{
  display:block!important;
  margin:0!important;
  padding:0 0 clamp(30px,5vh,70px)!important;
  border:0!important;
  width:100%!important;
}
.pf-detail-topbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:0 0 24px!important;
  margin:0 0 clamp(30px,5vh,56px)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.pf-back{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.03)!important;
  color:rgba(255,255,255,.86)!important;
  font-size:10px!important;
  letter-spacing:.15em!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}
.pf-back:hover{background:#fff!important;color:#050505!important;border-color:#fff!important;}
.pf-detail-eyebrow{
  color:rgba(255,255,255,.42)!important;
  font:700 10px/1.2 system-ui,sans-serif!important;
  text-transform:uppercase!important;
  letter-spacing:.20em!important;
}

.pf-case-hero{
  display:grid!important;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr)!important;
  gap:clamp(34px,5vw,84px)!important;
  align-items:center!important;
  margin:0 0 clamp(72px,10vh,130px)!important;
}
.pf-case-hero-copy small{
  display:block!important;
  margin:0 0 18px!important;
  color:rgba(255,255,255,.48)!important;
  font-size:10px!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
}
.pf-case-hero-copy h2{
  margin:0 0 22px!important;
  font-size:clamp(58px,7.8vw,126px)!important;
  line-height:.82!important;
  letter-spacing:-.08em!important;
  color:#fff!important;
}
.pf-case-hero-copy .pf-cover-line{
  margin:0 0 20px!important;
  max-width:650px!important;
  color:#fff!important;
  font-size:clamp(20px,1.7vw,29px)!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:-.035em!important;
}
.pf-case-intro{
  max-width:650px!important;
  margin:0!important;
  color:rgba(255,255,255,.66)!important;
  font-size:clamp(15px,1.15vw,19px)!important;
  line-height:1.65!important;
  letter-spacing:-.015em!important;
}
.pf-case-meta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  margin-top:30px!important;
  padding-top:24px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
.pf-case-meta div span{
  display:block!important;
  margin-bottom:7px!important;
  color:rgba(255,255,255,.36)!important;
  font-size:9px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
.pf-case-meta div strong{
  color:rgba(255,255,255,.86)!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:650!important;
}
.pf-hero-image{
  position:relative!important;
  width:100%!important;
  min-height:360px!important;
  aspect-ratio:16/10!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:26px!important;
  background:#090909!important;
  box-shadow:0 28px 80px rgba(0,0,0,.35)!important;
  overflow:hidden!important;
}
.pf-hero-image img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

.pf-case-story{
  display:grid!important;
  grid-template-columns:minmax(260px,.68fr) minmax(0,1.32fr)!important;
  gap:clamp(36px,6vw,96px)!important;
  align-items:start!important;
  margin:0 0 clamp(70px,10vh,120px)!important;
}
.pf-case-story-title small{
  display:block!important;
  margin-bottom:14px!important;
  color:rgba(255,255,255,.40)!important;
  font-size:10px!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
}
.pf-case-story-title h3{
  margin:0!important;
  font-size:clamp(44px,5vw,82px)!important;
  line-height:.9!important;
  letter-spacing:-.065em!important;
  color:#fff!important;
}
.pf-case-story-title p{
  margin:22px 0 0!important;
  color:rgba(255,255,255,.62)!important;
  font-size:16px!important;
  line-height:1.65!important;
}
.pf-case-facts{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
.pf-case-facts article{
  min-height:230px!important;
  padding:26px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015))!important;
}
.pf-case-facts span{
  display:block!important;
  margin-bottom:14px!important;
  color:rgba(255,255,255,.38)!important;
  font-size:9px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
.pf-case-facts h4{
  margin:0 0 12px!important;
  color:#fff!important;
  font-size:clamp(22px,1.7vw,30px)!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
.pf-case-facts p{
  margin:0!important;
  color:rgba(255,255,255,.62)!important;
  font-size:14px!important;
  line-height:1.6!important;
}

.pf-gallery-heading{
  display:flex!important;
  align-items:end!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin:0 0 24px!important;
}
.pf-gallery-heading h3{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(34px,3.4vw,58px)!important;
  line-height:.95!important;
  letter-spacing:-.055em!important;
}
.pf-gallery-heading p{
  margin:0!important;
  color:rgba(255,255,255,.43)!important;
  font-size:12px!important;
}
.portfolio-awards .pf-gallery{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(14px,1.8vw,26px)!important;
}
.portfolio-awards .pf-gallery button{
  position:relative!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  background:#090909!important;
  overflow:hidden!important;
}
.portfolio-awards .pf-gallery img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
  transition:transform .65s cubic-bezier(.16,1,.3,1)!important;
}
.portfolio-awards .pf-gallery button:hover img{transform:scale(1.035)!important;}

@media(max-width:1100px){
  .portfolio-awards .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .pf-case-hero,.pf-case-story{grid-template-columns:1fr!important;}
  .pf-case-hero-copy{max-width:850px!important;}
  .pf-hero-image{min-height:0!important;}
}
@media(max-width:760px){
  .portfolio-awards .pf-tools{display:block!important;}
  .portfolio-awards .pf-filters{flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:8px!important;scrollbar-width:none!important;}
  .portfolio-awards .pf-filters::-webkit-scrollbar{display:none!important;}
  .portfolio-awards .pf-search{width:100%!important;min-width:0!important;margin-top:10px!important;}
  .portfolio-awards .pf-grid{grid-template-columns:1fr!important;gap:16px!important;}
  .portfolio-awards .pf-card{aspect-ratio:4/3!important;border-radius:18px!important;}
  .pf-detail-topbar{margin-bottom:32px!important;}
  .pf-case-hero{margin-bottom:64px!important;gap:28px!important;}
  .pf-case-meta{grid-template-columns:1fr!important;gap:12px!important;}
  .pf-case-story{margin-bottom:64px!important;gap:30px!important;}
  .pf-case-facts{grid-template-columns:1fr!important;}
  .pf-case-facts article{min-height:0!important;}
  .pf-gallery-heading{display:block!important;}
  .pf-gallery-heading p{margin-top:8px!important;}
  .portfolio-awards .pf-gallery{grid-template-columns:1fr!important;gap:14px!important;}
  .portfolio-awards .pf-gallery button{border-radius:18px!important;}
}